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 a choice into an editable combo box. A slider is a control that enables users to set a value in a range.
A progress bar is an interface element that indicates one or more operations are in progress and shows users what proportion of the operation has been completed. In contrast to the other components in this chapter, no user manipulation is involved.
Make sure you use the appropriate layout manager to lay out your controls so they allow for the longer text strings frequently associated with localization.
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 that appear in toolbars are called "toolbar buttons." The following figure shows toolbar buttons for a text-editing application. See Toolbar Buttons for details.
For a list of keyboard operations for the activation of command buttons, see Table 15.
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, set tool tips that describe or name the functions of the buttons.
For details on layout and spacing of command buttons, see Command Button Spacing.
One of the buttons in any 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 Return or Enter. A default command button (such as Save in the following figure) should represent the action most often performed, assuming that the action will not lead to loss of user data.
The Enter and Return equivalents work 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 Return, the insertion point moves to the beginning of a new line rather than activating a default button. Keyboard focus must be moved to another component before the default button can be activated with the keyboard.
The JFC does not automatically implement the Escape key as the keyboard equivalent for the Cancel button, so you must implement this behavior. 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.
Do not supply mnemonics for the default and Cancel buttons.
For a list of commonly used mnemonics, see Table 10.
In circumstances in which a command button does not fully specify an action or operation and a dialog box finishes the specification, you can notify the user that this situation is about to occur by placing an ellipsis mark after the button text. 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 view a dialog box to finish the specification of a command initiated in a command button, use an ellipsis mark (...) after the button text. When a full specification of the command is made in the button text, do not use ellipses.
For a consistent appearance, follow the guidelines described in this section to create padding within and space between command buttons. The following figure shows button text (Help) centered in a command button.
Center the button text within buttons.
Since the length and height of translated text varies, use layout managers properly to allow for differences.
The blank space between the button text and the button border is referred to as "command button padding." Often command buttons appear in groups within a dialog box or an applet. In such a case, the button in the group with the widest text determines the inner padding, as shown in the following figure. Here the Cancel button has the widest text. The padding is 12 pixels on either side of the button text. The other buttons in the group (OK and Help) have the same width as the Cancel button.
Determine which button has the widest button text, and insert 12 pixels of padding on either side of the text. Make all the remaining buttons in the group the same size as the button with the longest text.
Space buttons in a group 5 pixels apart. (Because of the white border on the right side of a button, the apparent spacing will be 6 pixels.)
A toggle button is a button that represents a setting with two states--on and off. Toggle buttons look similar to command buttons and display a graphic or text that identifies the button. The graphic or button text should remain the same whether the button is in the on or off state.
Toggle buttons can be placed in a button group to get radio button behavior.
An independent toggle button behaves like a checkbox. Whether it appears alone or with other buttons, its setting is independent of other controls. An example of an independent toggle button is a Bold button on a toolbar, as shown in the following illustration.
When users click the Bold button, it is highlighted to indicate that the bold style has been applied to the selection or that text to be entered will be bold. If the button is clicked again, it reverts to the normal button appearance and the bold style is removed from the selection.
For details on the spacing of toggle buttons, see Command Button Spacing.
A toggle button can also work as part of a group to represent an exclusive choice within the set. A common example is a set of toolbar toggle buttons representing left, centered, and right text alignment along with justification, as shown in the following figure.
If users click the button representing left alignment, the button is highlighted to indicate that text is aligned flush with the left border of the document. If users then click the button representing centered alignment, the appearance of the Align Left button reverts to the normal button appearance and the Center button is highlighted to indicate centered alignment of the selected text.
When toggle buttons form a radio set, separate them with 2 pixels.
A checkbox is a control that represents a setting or value with an on or off choice. The setting of an individual checkbox is independent of other checkboxes--that is, more than one checkbox in a set can be checked at any given time.
For a list of keyboard operations for checkboxes, see Table 13.
Display checkbox text to the right of the graphic unless the application is designed for locales with right-to-left writing systems, such as Arabic and Hebrew. In this case, display the text to the left of the graphic.
In addition to standard checkboxes, the JFC includes a component that is the functional equivalent of the checkbox for use in menus. See Checkbox Menu Items for more information.
This section provides the spacing guidelines for checkbox components. As shown in the following figure, the height of the checkbox square doesn't change in an inactive checkbox even though the white highlight border is not drawn. Hence, while the checkbox is the same size, the last row and column of pixels on the bottom and right are the same color as the background canvas. The apparent spacing is 6 pixels between components; however, the actual spacing is 5 pixels.
Use the appropriate layout manager to achieve consistent spacing in checkbox button groups.
A radio button represents an exclusive choice within a set of related options. Within a set of radio buttons, only one button can be on at any given time. The following figure shows active radio buttons and inactive radio buttons in both on and off states.
When users click a radio button, its setting is always set to on. An inner filled circle within the round button indicates that the setting is selected. If another button in the set has previously been selected, its state changes to off. When a radio button is inactive, users cannot change its setting.
For a list of keyboard operations for radio buttons, see Table 21.
Display radio button text to the right of the graphic unless the application is designed for locales with right-to-left writing systems, such as Arabic and Hebrew. In those locales, place the text to the left of the graphic.
Although radio buttons and toggle buttons in a radio set have the same function, use radio buttons in dialog boxes and use grouped toggle buttons with graphics in toolbars. Grouped toggle buttons with text identifiers work well in either situation.
The JFC includes a component that is the functional equivalent of the radio button for use in menus. See Radio Button Menu Items for more information.
This section provides guidelines for the spacing of radio buttons. The height of the radio button is 12 pixels, not counting the white highlight border. Inactive radio buttons do not have white borders. Hence, while the radio button is the same size, the last row and column of pixels on the bottom and right are the same color as the background canvas. As shown in the following figure, the apparent spacing is 6 pixels between components; however, the actual spacing is 5 pixels.
Use the appropriate layout manager to achieve consistent spacing in radio button groups.
The currently selected item appears in the combo box. As users move the pointer over the list, each option under the pointer is highlighted. An option chosen from the list will replace the current selection. In the following figure, the currently selected option is Vanilla, and the Guanabana option will replace Vanilla when the combo box is closed.
For a list of keyboard operations appropriate for combo boxes, see Table 14.
You can use combo boxes to provide a way for users to indicate a choice from a set of mutually exclusive options. Noneditable combo boxes enable users to choose one item from a limited set of items. Editable combo boxes provide users the additional option of typing in an item.
In the JFC, the term "combo box" includes both of what Microsoft Windows applications call "list boxes" and "combo boxes."
The following figure shows a noneditable combo box with a drop-down arrow to the right of the currently selected item. (Note the gray background in the default Java look and feel theme, indicating that users cannot edit text.)
Editable combo boxes combine a text field with a drop-down arrow that users click to display an associated list of options. As shown in the following figure, editable combo boxes initially appear as editable text fields with a drop-down arrow. The white background of the editable combo box indicates that users can type, select, and edit text.
You can use an editable combo box to save users time by making the most likely menu choices available while still enabling users to type other values in the text field. An example might be the specification of a font size. The combo box might initially display the current size, say 12. Users could select from a list of standard sizes (10, 12, 14, 18, or 24 points) or type in their own values--for instance, 22 points.
You can specify the maximum number of items to be displayed before a scrollbar appears.
A slider is a control that is used to select a value from a continuous or discontinuous range. The position of the indicator reflects the current value. Major tick marks indicate large divisions along the range of values (for instance, every ten units); minor tick marks indicate smaller divisions (for instance, every five units).
Users can drag the indicator to set a specific value or click the channel to move back and forth by one unit. Sliders can represent a series of discrete values, in which case the indicator snaps to the value closest to the end point of the drag operation.
For a list of keyboard operations for sliders, see Table 23.
If the slider represents a continuous range or a large number of discrete values and the exact value that is chosen is important, provide a text field where the chosen value can be displayed. For instance, a user might want to specify an annual retirement savings contribution of 2.35%. In such a situation, consider making the text field editable to give users the option of typing in the value directly.
The JSlider.isFilled client property can be used to enable the optional filling slider.
A progress bar indicates that one or more operations is under way and shows users what proportion of the operation has been completed. The progress bar consists of a rectangular bar that fills as the operation progresses, as shown in the following figure.
Users cannot interact with a progress bar. If you would like to enable users to set a value in a range, use the slider component, described here.
You can orient the progress bar horizontally, so it fills from left to right, or vertically, so it fills from bottom to top. Within the bounds of the progress bar, you can display a text message that is updated as the bar fills. By default, the message shows the percentage of the process completed--for example, 25%.
The following figure shows another use of the progress bar. In this example of a process control application, the progress bar is not used to track the progress of an operation; rather, it is used as a gauge to show the temperature of a vat in a candy factory. The temperature indicates the proportion of the maximum temperature that has been reached (more than three-quarters), and the text message within the progress bar specifies the exact value (114 degrees).
|Java homepage :
||Previous | Next | Contents | Index | Search|
Copyright 1999 Sun Microsystems, Inc. All Rights Reserved.