|Java TM Look and Feel Design Guidelines: Advanced Topics > Part II: Special Topics > 5: Idioms > Idioms for Text Fields and Lists||
The Browse idiom enables users to specify an object--typically, a file, directory, or web page. This idiom consists of a label, an editable text field, and a command button, whose text begins with the word "Browse," as shown in Figure 57.Figure 57 Browse Idiom
Clicking the command button opens a dialog box that enables users to navigate through a hierarchy of locations and then choose a file, directory, web page, or other object. Typically, choosing an object causes the text field to display the full path to that object.
When using the Browse idiom for choosing a file, directory, or web address, label the idiom's command button "Browse," and use "B" as its mnemonic unless that letter is a mnemonic for different button or command.
In a window with more than one copy of the Browse idiom, assign different button text and a different mnemonic to each copy's command button. For example, you could make one button's text
Browse For T emplate and another button's text
Browse For M essage Folder Even if you cannot make each button's text different from the others, use a different mnemonic for each button.
The Key-Search idiom enables users to find a list item by typing its first letter (called the "search key" or "key"). The Key-Search idiom is case insensitive, and it works on any list of text items, even an unsorted list.
To start a key search, a user types any printable character while keyboard focus is in a list. In response, the application deselects the currently selected list item and then scrolls down to the next list item that begins with that character, highlighting that item. For example, if the user types the letter
v , the key search highlights the next item that begins with
v , as shown on the left in Figure 58.
To find each subsequent list item that begins with
v , the user types the letter
v again. The right side of Figure 58 shows the result of typing
v after the first search, shown on the left. Successive searches on the same key cause the application to loop through the list until the user stops searching.
If a search key does not match the first character of any list item, the application should alert the user--for example, by causing the user's system to beep--but should leave the current highlighting and selection unchanged.
As of version 1.4 of the Java 2 SDK, the key-search feature is part of the standard behavior for components that extend the
The list on the left, called the original list, contains a set of objects that users can add to the list on the right--the chosen list. The command buttons enable users to control which items appear in the chosen list. In Figure 59:
Optionally, the chosen list can be a table, as in Figure 59. The table's leftmost column, called the main column, displays items that come from the original list. In Figure 59, the Name column is the main column.
The chosen list can have one or more supplementary columns to provide more information about each item in the main column. In Figure 59, the Project column is the only supplementary column.
In the Add-and-Remove idiom, if the chosen list is a table, use a row- selection model. If the table is editable, use internal editing. (For more information, see Using Row Selection Models and Editing Row-Selection Tables.)
Table 12 describes the command buttons that you can include in the Add-and-Remove idiom.
Adds items to the chosen list. The Add command copies all selected items from the original list and adds them to the chosen list--at the end or, if the chosen list is sorted, in their correct positions. If the items must be unique in the chosen list, the Add command then deletes from the original list all copied items. Finally, the Add command selects the copied items in the chosen list and deselects any previously selected items in the original list. The Add command is available only while one or more items are selected in the original list. Another way to activate the Add command is to double-click an item in the original list, thereby selecting it and immediately adding it to the chosen list.
(Optional) Moves or copies all items from the original list to the chosen list and then selects them in the chosen list. The Add All command is available only while the original list is not empty. You should provide the Add All command only if your users need it.
Removes items from the chosen list. The Remove command removes the selected items from the chosen list, adds them to the original list (at the end or, preferably, at their previous positions) and, finally, selects the items in the original list, deselecting the chosen list. Removing an item from the chosen list has no effect on the original list if that item is already in the original list. The Remove command is available only while one or more items are selected in the chosen list.
(Optional) Moves the selected items one row up in the chosen list. If a user applies the Move Up command to a selection containing nonadjacent items, the command works as if the user performed it on each of the items separately. As a result, the items retain their positions relative to one another.
In the Add-and-Remove idiom, ensure that the command buttons behave as described in Table 12.
Assign the mnemonics in Table 12 to the command buttons of the Add- and-Remove idiom.
When adding list items in the Add-and-Remove idiom, display at least the first newly added item, by scrolling the list if necessary.
In the Add-and-Remove idiom, label the command buttons with a graphic and text--especially if your application's users are inexperienced with computers. Label the command buttons with just a graphic only if there is no space for text and your application's users are experienced.
In the Add-and-Remove idiom, provide tool tips for the command buttons if the buttons are labeled with just a graphic.
Typically, the command buttons of the Add-and-Remove idiom are between the original list and the chosen list. The buttons are spaced as shown in Figure 60. Measurements in the figure are in pixels.Figure 60 Preferred Layout of the Add-and-Remove Idiom
In windows without enough vertical space for the typical layout, you can lay out the Add-and-Remove Idiom as shown in Figure 61. In the figure, the Move Up and Move Down buttons are to the right of the chosen list and apply only to that list.Figure 61 Layout of the Add-and-Remove Idiom With Limited Vertical Space
In the Add-and-Remove idiom, make the vertical space for the original list at least as long as the column of command buttons, as shown in Figure 61. Provide the same amount of vertical space for the chosen list as for the original list.
|Java Look and Feel Design Guidelines: Advanced Topics.
Copyright 2001. Sun Microsystems, Inc. All Rights Reserved.