View Controls
The following controls allow users to modify how information is presented to them or select which information to view.
In this section:
Disclosure Triangles
Disclosure Buttons
List Views
Column Views
Split Views
Tab Views
Disclosure Triangles
A disclosure triangle allows the display, or disclosure, of information or functionality associated with the primary information in a window. A disclosure triangle is not used to display additional choices associated with a specific control, such as a pop-up menu. If you need to do this, use a disclosure button (see “Disclosure Buttons”).
Disclosure triangles have two uses: in dialogs that have a minimal state and an expanded state and in hierarchical lists. See Figure 14-52 for an example in a dialog and Figure 14-55 for an example in a hierarchical list.
Use a disclosure triangle when you want to provide a simple default view of something but need to allow the user to view more details or perform additional actions at times.
Disclosure triangles should be in the closed position, pointing to the right, by default. When the user clicks a disclosure triangle, it points down and the additional information is displayed.
Disclosure triangles in dialogs should have a label indicating what is disclosed or hidden. An ideal label changes depending on the position of the disclosure triangle. For example, when closed it might say, “Show advanced settings,” and when open, “Hide advanced settings.”
-
Carbon: Disclosure triangles are available in Interface Builder. To create one programmatically, you can use the Control Manager function
CreateDisclosureTriangleControlor the Appearance Manager functionHIThemeDrawButton. -
Cocoa: Disclosure triangles are available in Interface Builder. To create one programmatically, set the bezel style to
NSDisclosureBezelStyleand the button type toNSPushOnPushOffButton. See Button Programming Topics for Cocoa in Cocoa User Experience Documentation.
Disclosure Triangle Specifications
Disclosure Buttons
A disclosure button expands a dialog or utility window to offer the user a wider range of choices related to a specific selection control, such as a pop-up menu, combination box, or command pop-down menu. This makes a disclosure button different from a disclosure triangle (described in “Disclosure Triangles”), which displays additional information or functionality related to the contents of a window or a section of a window. If you need to offer additional options that are not closely related to a specific list of choices, use a disclosure triangle.
An example of a dialog expanded by a disclosure button is the expanded Save dialog (shown in Figure 14-54). The minimal Save dialog (shown in Figure 13-39) uses a pop-up menu to provide the user with a list of standard and recently accessed locations in which to save a file. To get a wider range of choices, the user clicks the disclosure button, which puts the file system at the user’s fingertips without requiring the user to leave the context of the Save dialog.
By default, disclosure buttons should be in the closed position, pointing down. When the user clicks a disclosure button, the window expands and the disclosure button changes to point up.
A disclosure button should be aligned with the pop-up menu or other list-based selection control (such as a command pop-down menu) it affects. Disclosure buttons should never be accompanied by labels.
-
Carbon: Disclosure buttons are available in Interface Builder. To create one programmatically, you can use the Control Manager function
CreateDisclosureButtonControl. -
Cocoa: Disclosure buttons are not available in Interface Builder. To create one programmatically, set the bezel style to
NSRoundedDisclosureBezelStyleand the button type toNSPushOnPushOffButton. See Button Programming Topics for Cocoa in Cocoa User Experience documentation.
List Views
List views display ordered records in a table in which users can resize, rearrange, and sometimes add and subtract, columns representing attributes of the data.
Sort the rows in the table by the selected column heading. You can implement sorting on secondary attributes behind the scenes, but the user should see only one column selected at a time. If a user clicks an already selected column heading, change the direction of the sort.
List views may contain disclosure triangles to reveal a list hierarchy, but only in one column. (See Figure 14-55)
Items may be editable depending on the purpose of your application. In the Finder, for example, items in the Name column are editable when in list view, but nothing else is.
-
Carbon: List views are available in the Browsers & Tab palette of Interface Builder. To create one programmatically, use the list version of the data browser control.
-
Cocoa: List views are available in the Data palette of Interface Builder. To create a simple list view programmatically, use the NSTableView class. NSOutlineView in column format gives you disclosure triangles.
Column Views
The column view control provides a way for users to display and select items from an organized hierarchy of data.
-
A column view is useful when there is only one way the data can be sorted or when you want to present only one way of sorting the data. It is also useful for deep hierarchies, such as a file system, where users move back and forth among multiple levels frequently.
-
If the column view represents a tree of information, the root is on the left side. As users select items, the focus moves to the right, displaying either the possible choices at that branch or, if there are no more choices, the terminal object. When the user selects a terminal object, you may display additional information about it in the rightmost column.
-
Carbon: Column views are available in the Browsers & Tab palette of Interface Builder. To create one programmatically, use the column version of the data browser control.
-
Cocoa: Column views are available in the Data palette of Interface Builder. To create one programmatically, use the NSBrowser class or NSOutlineView in column format.
Split Views
A split view groups together two or more other views, such as column or list views, and allows the user to adjust the relative width or height of those views. A split view includes a splitter bar between each of its subviews; for example, a split view with five subviews would have four splitter bars.
A split view can display its subviews either side-by-side (with vertical splitter bars) or stacked on top of each other (with horizontal splitter bars). A single split view does not display a combination of vertically and horizontally oriented subviews. However, a single window might contain different split views that each display a different orientation. For an example of how this might look, see Figure 15-11
The user can adjust the relative widths or heights of the subviews by dragging anywhere on the splitter bar. The splitter bar displays a circular dimple at its midpoint that indicates to the user that it is draggable. In addition, the entire splitter bar is a hot zone. In other words, when the mouse pointer passes over any part of the splitter bar, the cursor changes to one of the move or resize cursors (shown in Table 11-1).
If a user drags a splitter bar all the way to the edge of the split view (or to the next splitter bar), the subview should disappear but the splitter bar should not. The splitter bar should remain in view to remind the user where the hidden subview is and to make it easier for the user to uncover it.
The width of the splitter bar in a metal window is different from its width in a standard window. In a metal window, the width of a splitter bar is 7 pixels (as shown in Figure 14-57).
In a standard Aqua window, the width of the splitter bar is 9 pixels, as shown in Figure 14-58
-
Carbon: Split views are not available in Interface Builder.
-
Cocoa: Split views are available in the Layout menu of Interface Builder selecting the subviews and choosing Layout > Make subviews of > Split View). To create one programmatically, use the NSSplitView class (note that splitter bars are horizontal by default).
Tab Views
The tab view provides a convenient way to present information in a multipane format. The tab control displays horizontally centered across the top edge of a content area.
The content area below the control is called a pane. In a window with a tab view, you can use other controls, such as push buttons and text entry fields.The controls can be global—affecting the settings of all panes—or specific to an individual pane; make it clear through labeling and placement (within or outside of a pane’s boundary) whether a control affects one pane or all panes.
A segmented control can provide a way to switch between panes. It looks similar to a tab view, but it is not attached to the panes. See “Segmented Control.”
Tab View Specifications
-
Text:
-
Full size: System font, centered in tab with 12 pixels on each side
-
Small: Small system font, centered in tab with 10 pixels on each side
-
Mini: Mini system font, centered in tab with 8 pixels on each side
-
-
Tab height:
-
Full size: 20 pixels
-
Small: 17 pixels
-
Mini: 15 pixels
-
Panes can extend from one edge of a window to the other, or they can be inset within a window. Figure 14-62 shows an example of panes that extend from one edge of a window to the other.
For inset tab panes, the recommended inset is 20 pixels on each side within a window, although 16 is also allowed. You can define a window so that space remains below the tab pane for global controls such as push buttons. Figure 14-63 shows an example of tab panes inset within a window, with buttons below the panes.
Tab View Measurement Differences Between Carbon and Cocoa
There is a difference of three pixels in the vertical spacing of tab views between Carbon and Cocoa windows when you follow the blue Aqua guides in Interface Builder. This is because the Aqua guide is measured from a clipping line that is different in the two types of window. Because most developers do not mix Carbon and Cocoa windows in the same application, this does not cause problems. You should still follow the Aqua guides when you use Interface Builder to design your user interface.
Figure 14-64 shows the difference in vertical space. In both windows, the pop-up menu is placed according to the blue Aqua guide, which measures 20 pixels below the clipping line.
Tab View Differences Between Previous Mac OS X Versions
The size of the tab views changed between Mac OS X version 10.2 (Jaguar) and Mac OS X version 10.3 (Panther). There are no size changes for tab views in Mac OS X version 10.4 (Tiger). This section discusses how the earlier change in size affects applications that must run on versions of Mac OS X prior to version 10.3.
If you are supporting only Mac OS X v10.3 and later, then you do not need to do anything. Follow the guidelines in “Tab Views.”
If you need to support Mac OS X v10.2 (or earlier) in addition to Mac OS X v10.3, then you need to consider the differences.
The Mac OS X v10.2 tabs were 29 pixels high from the top of the tab to the bottom of the bar under the tab. The Mac OS X v10.3 and later tabs are only 20 pixels high. This means that if you have designed your user interface elements for Mac OS X v10.2, there will be an additional space of 4 pixels under the tabs when viewed in Mac OS X v10.3 or later and a space of 5 pixels above.
Considering your users, you must decide whether to redesign your interface so that it does not use tabs, or to allow the new spacing and adhere to the Mac OS X v10.2 specification for spacing around the tab views.
