java.sun.com > Guidelines Home Page > Java Look and Feel Design Guidelines > Part III: The Components of the Java Foundation Classes > 9: Menus and Toolbars > Toolbars

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.

Figure 140 shows a toolbar with a drag area on the leading edge. For another example, see Figure 8.

Click here to view the corresponding code for Figure 140 (also available on the book's companion CD-ROM).

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.

Toolbar Placement

In general, a toolbar is located at the edge of the window or area on which it operates.

 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.

Draggable Toolbars

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).

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.

 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.)

Toolbar Buttons

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.

For more information on command buttons, see Command Buttons. For details on toggle buttons, see Toggle Buttons.

Mouse-over Borders

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.

The following figure shows a toolbar button with a mouse-over border activated for the Open button.

For specifications on spacing between toolbar buttons with mouse-over borders, see Toolbar Button Spacing.

 The JToolBar.isRollover client property is set to true to enable mouse-over borders.

Drop-down Menus in Toolbar Buttons

You can attach a drop-down menu to a toolbar button. The menu appears when the user clicks (or presses and holds the mouse button over) the toolbar button.

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.

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.

Tool Tips for Toolbar Buttons

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).

 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.