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

9: Menus and Toolbars

A menu displays a list of options (menu items) for users to choose or browse through. Typically, menus are logically grouped and displayed by an application so that a user need not memorize all available commands. Menus in the Java look and feel can appear "sticky"--that is, they remain posted on screen after users click the menu title. Usually the primary means to access your application's features, menus also provide a quick way for users to see what those features are.

In Java look and feel applications, you can provide three kinds of menus: drop-down menus, submenus, and contextual menus. A drop-down menu is a menu whose titles appear in the menu bar. A submenu appears adjacent to a menu item in a drop-down menu; its presence is indicated by an arrow next to the item. A contextual menu displays lists of commands, settings, or attributes that apply to the selected item or items under the pointer. Contextual menus can also have submenus.

A toolbar is a collection of frequently used commands or options that appear as a row of toolbar buttons. Toolbars normally appear horizontally beneath a primary window's menu bar, but they can be dragged anywhere in the window or into their own window. Toolbars typically contain buttons, but you can provide other components (such as text fields and combo boxes) as well. Toolbar buttons can contain menu indicators, which denote the presence of a menu. Toolbars are provided as shortcuts to features available elsewhere in the application, often in the menus.

Menu Elements

Figure 127 shows an example of a drop-down menu that is activated and displayed. Within the Format menu, the Style item is activated; a submenu appears that includes the Bold, Italic, and Underline checkbox menu items. (The Italic checkbox menu item is highlighted as if the pointer is positioned over it.) In the Java look and feel, menus use a highlight color (primary 2) for the background of activated menu titles and menu items.

A separator divides the menu items for specifying font, style, and size from the alignment radio button items. Keyboard shortcuts appear to the right of the frequently used menu items, and mnemonics are included for each menu title and menu item.

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

Menu Bars

The menu bar appears at the top of a primary window and contains menu titles, which describe the content of each menu. Menu titles usually appear as text; however, it is possible to use a graphic or a graphic with text as a menu title. Each menu title needs a mnemonic. See Mnemonics for details.

A drop-down menu appears when users choose a menu title in the menu bar.

 Use a single word for each menu title.

 Use menu titles that make it easy for users to determine which menu contains the items of interest to them. For example, the Format menu typically contains commands that enable users to change the formatting of their documents or data.

 Be sure to include mnemonics for every menu title in your menu bar.

 Do not display menu bars in secondary windows.

 If you are writing an applet that runs in the user's current browser window (with the browser menu bar), do not display your own menu bar in the applet. Although applets displayed inside a browser window can have their own menu bars in the JFC, users are often confused when both the browser window and the applet have menu bars. If your applet requires a menu bar, display the applet in a separate browser window that does not have its own menu bar or navigation controls.

 Even on Macintosh systems, which ordinarily place a menu bar only at the top of the screen, menu bars are displayed in windows for a Java look and feel application. On the Macintosh, the screen-top menu bar remains, but, since all the application menus are in the windows, the only command in the screen-top menu bar is Quit in the File menu. (Exit also appears in the File menu of primary windows.)

Drop-down Menus

The menu bar contains all of the drop-down menus and submenus in your application. Each menu in the menu bar is represented by its menu title. The titles describe the content of each menu.

Users can display menus in two ways:

• To post a menu (that is, to display it and have it stay open until the next click), users click the menu title. Users can then move the pointer over other menu titles to view other menus.
• To pull down a menu, users press the mouse button when the pointer is over the menu title. The menu title is highlighted, and the menu drops down. When users choose a command and release the mouse button, the menu closes.

For details on keyboard operations in menus, see Table 20.

Submenus

A submenu is a menu that users open by highlighting a menu item in a higher-level menu. The title for a submenu is its menu item in the higher level drop-down menu. Sometimes you can shorten a menu by moving related choices to a submenu. Submenus (such as the Style submenu shown in the following figure) appear adjacent to the submenu indicator. For instance, the Style item opens a submenu consisting of three items: Bold, Italic, and Underline. Note that the items in the Style submenu include both keyboard shortcuts and mnemonics.

Users display submenus by clicking or by dragging over the menu item in the higher-level menu item that is the submenu's title. In Figure 128, the first item in the submenu aligns with the submenu indicator, slightly overlapping the higher-level drop-down menu. Just as in other menus, items in the submenu are highlighted when the user moves the pointer over them.

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

For a list of keyboard operations in submenus, see Table 20.

 Because many people (especially novice users, children, and older people) find submenus difficult to use, minimize the use of submenus, especially with these populations. If at all possible, avoid using a second level of submenus. If you want to present a large or complex set of choices, display them in a dialog box.

 Submenus are created using the JMenu component.

Menu Items

A simple menu item consists of the command name, such as Undo.

When a menu item is available for use, its text is displayed in black, as shown in Figure 129.

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

When users position the pointer over an individual item within a menu, the menu item (if available) is highlighted.

Users can activate menu items in two ways:

• In a posted menu, users click a menu item to activate it and close the menu.
• In a pulled-down menu, users drag over a menu item to highlight it. Releasing the mouse button activates the command and closes the menu.

Keyboard shortcuts and mnemonics can also be used to activate menu items. For details, see Keyboard Shortcuts and Mnemonics.

For a list of keyboard operations for menu items, see Table 20.

Available and Unavailable Items

When menu items do not apply to the current context, they are dimmed and cannot be activated. Keyboard navigation skips over them. Here are some guidelines for handling available and unavailable menu items in your application.

 If an application feature is not currently applicable, make the corresponding menu item unavailable and dim its text. For example, the Undo command might not be available until the user has made a change in a document window.

 If all the items in a menu are unavailable, do not make the menu unavailable. If the menu itself is still available, users can display the menu and view all its (unavailable) items. Similarly, if all the items in a submenu are currently not available, do not make the original menu title unavailable.

Composition and Construction of Items

Here are some recommendations for the use of concise language, consistent capitalization, and keyboard operations in menu items.

 Make your menu items brief. Menu items can be verb phrases, such as Align Left. They can also be nouns, such as Font, particularly when they display a submenu or a dialog box.

 Never give a menu item the same name as its menu title. For example, an Edit menu should not contain an Edit menu item.

 Use headline capitalization for menu items.

 Include mnemonics for all menu items.

 Offer keyboard shortcuts for frequently used menu items.

 Use the same keyboard shortcut if a menu item appears in multiple menus-- for instance, if a Cut item appears in a contextual menu as well as in a drop- down Edit menu, use Ctrl-X for both.

 Use the same mnemonic if a menu item appears in several menus--for instance, if a Copy item appears in a contextual menu as well as in a drop- down Edit menu, use Copy for both.

Commonly used keyboard shortcuts and mnemonics are described in Table 12 and Table 13.

Ellipses in Items

Ellipses (...) are punctuation marks that indicate the omission of one or more words that must be supplied in order to make a construction complete. In your menus, you can use ellipses in a similar way: to indicate that the command issued by a menu item needs more specification in order to make it complete.

 If a menu item does not fully specify a command and users need a dialog box to finish the specification, use an ellipsis after the menu item. For example, after choosing Save As..., users are presented with a file chooser to specify a file name and location.

 Do not use an ellipsis mark simply to indicate that a secondary or utility window will appear. For example, choosing Preferences displays a dialog box; because that display is the entire effect of the command, however, Preferences is not followed by an ellipsis.

Separators

A separator is a line graphic that is used to divide menu items into logical groupings.

Two separators are shown in Figure 130.

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

Users can never choose a separator.

You can use separators to make lengthy menus easier to read. For instance, in the typical File menu, shown in Figure 134, the commands that affect saving are separated from those that are relevant to printing.

 Use separators to group similar menu items in a way that helps users find items and better understand their range of choices.

 While separators serve important functions on menus, avoid using them elsewhere in your application. Instead, use blank space or an occasional titled border to delineate areas in dialog boxes or other components.

 If a menu is or has the potential to become very long (for instance, in menus that present lists of bookmarks or email recipients), display the menu choices in multiple columns.

Menu Item Graphics

You can add application graphics before the leading edge of menu items in your application, as shown in the following figure. Such graphics should correspond to toolbar button graphics in your application.

 Provide menu item graphics when there are corresponding toolbar button graphics in your application. The graphics help users associate the toolbar button with the corresponding menu command.

Checkbox Menu Items

A checkbox menu item is a menu item that appears with a checkbox next to it to represent an on or off setting. A check mark in the adjacent checkbox graphic indicates that the attribute associated with that menu item is turned on. A dimmed checkbox menu item shows a gray box (checked or unchecked) that indicates that the setting cannot be changed. The following figure shows checked, unchecked, and unavailable menu items.

You can use checkbox menu items to present users with a nonexclusive choice.

For a list of keyboard operations for checkbox menu items, see Table 20.

 Use the standard checkbox graphic for checkbox menu items.

 Use checkbox menu items with restraint. As with all menu items, after users choose a checkbox menu item, the menu is dismissed. To choose another item, users must reopen the menu. If users must set more than one or two related attributes, place the checkboxes in a dialog box (or provide a utility window or toolbar buttons for the attributes).

 Use checkbox menu items instead of the toggle menu items often used on other platforms to indicate choices you can turn on or off. These toggle menu items (for instance, commands like Italics On and Italics Off) confuse users. It is unclear if the commands are telling users the current state of the selected object or the state they can change the object to by choosing the menu item.

Radio Button Menu Items

A radio button menu item is a menu item that appears with a radio button next to it to represent an off or on setting. Each radio button menu item offers users a single choice within a set of radio button menu items, as illustrated in the following set of alignment options.

For a list of keyboard operations for radio button menu items, see Table 20.

 To indicate that the radio button items are part of a set, group them and use separators to separate them from other menu items.

Java Look and Feel Design Guidelines, second edition. Copyright 2001. Sun Microsystems, Inc. All Rights Reserved.