| Java >
Guidelines Home Page > Java Look and Feel Design Guidelines >
Part III: The Components of the Java Foundation Classes > 9: Menus and Toolbars >
A toolbar provides quick and convenient access to a set of frequently used commands or options. Toolbars typically contain buttons, but other components (such as text fields and combo boxes) can be placed in the toolbar as well. An optional, textured "drag area" on the toolbar indicates that users can drag the toolbar anywhere in the window or into a separate window. The drag area is on the leading edge when the toolbar is horizontal and on the top when it is vertical.
Click here to view the corresponding code for Figure 140 (also available on the book's companion CD-ROM).Figure 140 Horizontal Toolbar
Users typically access the components in the toolbar by clicking. For information on the keyboard operations that are appropriate for toolbars, see Table 32.
Include commonly used menu items as buttons (or other components) in your toolbar.
Even if your window has a toolbar, make all toolbar commands accessible from menus.
Be sure to provide tool tips for all toolbar buttons.
Consider providing text on toolbar buttons as a user option. This feature makes the meaning of the button clear to new users. It also enables low- vision users to utilize large fonts.
Because toolbars can be difficult for users with motor impairments and are not always regarded as a good use of space, provide a way to hide each toolbar in your application.
Provide large and small graphics (such as 24 x 24 and 16 x 16 pixels) in your application and enable users to select the large graphics in all parts of the application, including the toolbars.
If your window has a menu bar, place the toolbar horizontally immediately under the menu bar.
If you use multiple toolbars, provide a way for users to control their display and organize their contents within logical groupings of features.
You can specify that your toolbar be draggable. Users can then move the toolbar or display it in a separate window. Users drag the toolbar by holding down the mouse button while the pointer is over the drag area. An outline of the toolbar moves as the user moves the pointer. The outline provides an indication of where the toolbar will appear if the user releases the mouse button.
When the pointer is over a "hot spot," the outline has a dark border, indicating the toolbar will anchor to an edge of the container, as shown in Figure 141. The toolbar automatically changes its orientation between horizontal and vertical depending on the edge of the window where it anchors.
Click here to view the corresponding code for Figure 141 (also available on the book's companion CD-ROM).Figure 141 Outline of a Toolbar Being Dragged
If the pointer is outside a hot spot, the outline has a light border, indicating that the toolbar will be displayed in a separate window. The following figure shows the toolbar in a separate window. When the user closes the toolbar window, the toolbar returns to its original location in the primary window.Figure 142 Toolbar in a Separate Window
A toolbar can dock (attach) along the interior top, bottom, left, or right edge of a container. (The relocated toolbar does not obscure the container contents; rather, the contents of the container are repositioned to compensate for the new placement of the toolbar.)
A toolbar button is a command button or toggle button that appears in a toolbar, typically as part of a set of such buttons. Toolbar buttons can also act as titles to display menus. In other contexts, command buttons typically use text to specify the operation or state they represent, but toolbar buttons typically use graphics.
Toolbar graphics can be difficult for users to understand. Weigh the comprehensibility of your graphics against the space taken up by button text before deciding whether to use button text in addition to the button graphics. Consider giving users the choice of whether to display button text.
Use button graphics that are either 16 x 16 or 24 x 24 pixels (but not both in the same toolbar), depending on the space available in your application.
Provide optional text-only toolbar buttons to enable viewing by low-vision users.
If you use text on the toolbar buttons, provide a user setting to display only the graphics. Using graphics only, you can conserve space and display more commands and settings in the toolbar.
To create functional groupings of toolbar buttons in your application, provide a separate toolbar for each. Using this technique, the drag area serves as both a visual separator and a way to move the toolbar button groups to convenient locations.
For guidelines on the vertical and horizontal measurements for toolbar buttons in toolbars, see Toolbar Button Spacing.
To conserve space, you can use mouse-over borders (also called "rollover borders") on toolbar buttons. This border appears around a button when users move the pointer over it; otherwise, the border is invisible.Figure 143 Mouse-over Border on a Toolbar Button
For specifications on spacing between toolbar buttons with mouse-over borders, see Toolbar Button Spacing.
JToolBar.isRollover client property is set to true to enable mouse-over borders.
Figure 144 shows the drop-down menu indicated by a drop-down arrow on the Open button. The menu shows a list of recently used files that users can open. The mnemonics use numbers because the menu items are likely to change often.Figure 144 Toolbar Button With a Drop-down Menu
For a discussion of how to use drop-down arrows as menu indicators, see Using Badges in Button Graphics.
Provide a menu indicator (the drop-down arrow) in the graphic for any toolbar button that has a drop-down menu.
The behavior of drop-down arrows in toolbar buttons is unlike that of some applications that do not use the Java look and feel. In the toolbar buttons of these other applications, a click activates a default command, whereas a press displays a menu.
You can provide tool tips for the toolbar components. The tool tip displays information about the component whenever the user rests the pointer over that component. If you specify a keyboard shortcut for a toolbar component, the JFC displays the shortcut in the tool tip. Figure 145 shows a tool tip that describes the Cut button.
Click here to view the corresponding code for Figure 145 (also available on the book's companion CD-ROM).Figure 145 Tool Tip for a Toolbar Button
Ensure that the keyboard shortcuts for toolbar buttons match the keyboard shortcuts for the corresponding menu items.
Attach tool tips to all toolbar components that do not include text identifiers.
If your application does not have menus, attach tool tips to the toolbar buttons in order to display keyboard shortcuts.
|Java Look and Feel Design Guidelines, second edition.
Copyright 2001. Sun Microsystems, Inc. All Rights Reserved.