java.sun.com > Guidelines Home Page > Java Look and Feel Design Guidelines > Part III: The Components of the Java Foundation Classes > 10: Basic Controls

10: Basic Controls

Buttons, combo boxes, and sliders are examples of controls--interface elements users can manipulate to perform an action, select an option, or set a value. A button is a control that users click to perform an action, set or toggle a state, or set an option. In the Java look and feel, buttons include command and toggle buttons, toolbar buttons, checkboxes, and radio buttons. A combo box is a control that enables users to select one option from an associated list; users can also type an option into an editable combo box. A list box is a control that presents a set of choices from which a user can select one or more items; items in a list box can be text, graphics, or both. (A related list component, called a selectable list, is described in Chapter 12.) A slider is a control that enables users to set a value in a range.

 For text in buttons, sliders, and combo boxes, use headline capitalization.

 Make sure you use layout managers to lay out your controls so they allow for the longer text strings frequently associated with localization.

Command Buttons

A command button is a button with a rectangular border that contains text, a graphic, or both. These buttons typically use button text, often a single word, to identify the action or setting that the button represents. See Command Buttons in Dialog Boxes for a list of commonly used command button names and their recommended usage.

Command buttons in a dialog box can stand alone or appear in a row, as shown in Figure 149.

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

Figure 149   Command Buttons in a Dialog Box

Command buttons that appear in toolbars are called "toolbar buttons." Typically, they use button graphics instead of button text.

Figure 150 shows toolbar buttons for a text-editing application.

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

Figure 150   Toolbar Buttons

See Toolbar Buttons for details on toolbar buttons. For a discussion of badges in toolbar buttons, see Using Badges in Button Graphics.

When a command button is unavailable, the dimmed appearance indicates that it cannot be used. The following figure shows the appearance of available, pressed, and unavailable command buttons.

Users can click command buttons to specify a command or initiate an action, such as Save, Cancel, or Submit Changes.

For a list of keyboard operations for the activation of command buttons, see Table 17.

 Display mnemonics in button text, with the exception of default command buttons and the Cancel button in dialog boxes.

 To make command buttons without text more accessible, create tool tips that describe or name the functions of the buttons.

 Make your button text easier to localize by using resource bundles. A resource bundle stores text separately so that localizers don't have to change the application's source code to accommodate translation.

For more on resource bundles in the localization process, see Resource Bundles.

For general details on keyboard operations and mnemonics, see Keyboard Operations and Mnemonics. For details on displaying a command button's tool tip, see Table 31.

For details on the layout and spacing of command buttons, see Command Button Spacing and Padding.

Default Command Buttons

One of the buttons in a window can be the default command button. The JFC gives default command buttons a heavier border.

Default command buttons typically appear in dialog boxes. The default command button is activated when users press Enter (or Return).

A default command button (such as Save in Figure 152) should represent the action most often performed (if that action does not lead to loss of user data).

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

Figure 152   Default and Nondefault Command Buttons

The Enter and Return equivalents activate the default command button unless keyboard focus is currently on a component that accepts the Enter or Return key. For instance, if the insertion point is in a multiline text area and the user presses Enter, the insertion point moves to the beginning of a new line rather than activating a default button. In this case, users can press Ctrl-Enter to activate the default button. Alternatively, they can press Ctrl-Tab to move the focus out of the current component and then press Enter.

Since you are not required to have a default button in every circumstance, you can use discretion about including them in your interface elements.

 In most situations, make OK the default button.

 Never make an unsafe choice the default button. For instance, a button that would result in the loss of unsaved changes should not be the default command button.

 The JFC does not automatically implement the Escape key as the keyboard equivalent for the Cancel button, so this behavior must be implemented. As with the Enter and Return keys for the default command button, the Cancel button should not require keyboard focus to be activated by the Escape key.

Combining Graphics With Text in Command Buttons

In some circumstances, you might use a graphic along with text to identify the action or setting represented by a command button.

Figure 153 shows a Print button with a graphic on the leading edge of the text and a Delete button with a graphic above the button text.

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

Figure 153   Command Buttons Containing Both Text and Graphics

 In command buttons containing both text and graphics, place the text after or below the image.

 When adding graphics to buttons that typically use text, such as dialog box command buttons, place the graphic on the leading edge of the button text (that is, to the left of the text in left-to-right locales). Include the graphic in such contexts, for instance, if the graphic serves as a reminder of the toolbar button that initially displayed the dialog box.

 In contexts that typically use graphical buttons, such as toolbars, place button text beneath the graphic or on the trailing edge (right in left-to-right locales) of the button. Consider giving users the choice of what to display and where to display it.

 Use mnemonics in your command buttons--with the exception of the default and Cancel buttons.

 Provide a way to display text in command buttons as an aid to low-vision users.

For a list of commonly used mnemonics organized by menus, see Table 9. For an alphabetical list of commonly used mnemonics, see Table 13. Try to use these mnemonics if possible. Do not duplicate mnemonics.

Using Ellipses in Command Buttons

When a command button does not fully specify an operation but instead that operation is completed by a dialog box, notify the user by placing an ellipsis mark after the button text. (Note that this applies only to text in buttons. No ellipsis is used in graphics-only buttons.) For example, after clicking a Print... button, users are presented with a dialog box in which to specify printer location, how many copies to print, and so forth. By contrast, a Print command that prints one copy to the default printer without displaying a dialog box would not require an ellipsis mark.

 When users must interact with a dialog box to finish the specification of a command initiated in a command button, use an ellipsis mark (...) after the button text. (Do not use an ellipsis with graphics-only buttons.) When a full specification of the command is made in the button text, do not use ellipses.

 The button text added to a command button that uses ellipses must contain three periods.

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