Java TM Look and Feel Design Guidelines: Advanced Topics > Part II: Special Topics > 5: Idioms > Idioms for Selecting and Editing in Tables   Previous Next Contents/Index/Search


 

Idioms for Selecting and Editing in Tables

If your application provides tables in which users can select and edit, you can make selecting and editing easier for users by consistently displaying the same idioms. This section describes:

  • Concepts for selecting and editing in application-provided tables
  • Idioms that enable users to select and edit in such tables

For information on table layout and order, see Idioms for Arranging a Table.

Selection Models and Editing Models for Tables

To enable users to select and edit in a table, you need to provide:

  • A   selection model --A set of rules and techniques for selecting a portion of the table, such as a cell or row
  • An editing model --A set of rules and techniques for editing a portion of a table

This section provides guidelines to help you choose the correct selection model and editing model for your application's tables.

For an introduction to selection models for tables, see Chapter 12 of Java Look and Feel Design Guidelines , 2d ed. Of the selection models described in that chapter, use a row selection model or a cell selection model .

Row selection differs from cell selection in that selecting a cell also selects the entire row containing that cell. Tables using a row selection model are called row-selection table s. Tables using a cell selection model are called cell-selection table s.

The recommended types of row selection are:

  • Single row
  • Single range of rows
  • Multiple distinct rows
  • Multiple ranges of rows

The recommended types of cell selection are:

  • Single cell
  • Single range of cells

Choose the selection model that offers a table's users as much flexibility as they need.

 Use a row selection model in tables where rows need to be operated on as a unit.

 In tables, enable users to select one or more ranges of rows or cells.

Using Row Selection Models

You can use a row-selection table if users can operate on a row's contents only as a unit. For example, you can use a row-selection table if users need to update several interdependent cells at the same time--such as before committing a record to a database that verifies whether the interdependent values are consistent with one another.

You can associate commands with a row-selection table to enable users to manipulate its rows. Figure 44 shows a table with such commands, each represented as a command button to the right of the table.

Figure 44   Row-Selection Table With Associated Command Buttons

 

For a row-selection table, the correct set of commands depends on the table's editing model. Some commands can be used with any row-selection table, regardless of its editing model.

Table 11 describes those commands. For a list of commands and mnemonics for each editing model, see Editing Row-Selection Tables.

 

Command Mnemonic Description

New Row

N

Adds a new row directly above the uppermost row of the selected rows or, if there is no selection, adds a new row at the table's end. The New Row command selects the new row, deselecting any previous selection.

Delete Row

R

Deletes the selected rows.

Move Row Up

U

Moves the selected rows up by one row. If a user applies the Move Row Up command to a selection containing nonadjacent items, the command works as if the user performed it on each of the items separately. The items retain their positions relative to one another.

Move Row Down

D

Moves the selected rows down by one row. If a user applies the Move Row Down command to a selection containing nonadjacent items, the command works as if the user performed it on each of the items separately.






 If you use the default names for commands that manipulate row-selection tables, assign the recommended mnemonics to those commands. ( Table 8 lists the default names and the recommended mnemonics.)

 In row-selection tables, command buttons for Move Row Up and Move Row Down can sometimes be labeled Move Up and Move Down, as in Figure 45. Use these short labels only if space is limited and if the purpose of each button is clear to users. If you use the short labels, use them for both buttons or for neither.

 If a user deletes a row of a row-selection table, move the selection to a different row. Follow these rules:

  • If the deleted row was the table's only row, either:
    • Display the table with a single empty row, which is selected.
    • Display the table with no rows, if the user can add rows.
  • If the deleted row was not the table's only row but was the table's bottom row, select the row directly above the deleted row.
  • If the deleted row was neither the table's only row nor the bottom row, select the row directly below the deleted row.

Editing Row-Selection Tables

To enable users to edit in row-selection tables, you can use either the external editing model or the internal editing model . Tables using one of these models are called "externally editable" or "internally editable."

External Editing Model--In this model, users can edit a table row only by entering values in an editing area , located outside the table and, typically, just below it. The editing area includes editable text fields, combo boxes, or other editable components that enable users to type or choose input values. Each editable component in the editing area must correspond to a single column in the table.

Use the external editing model in row-selection tables if users can edit a row's contents only as a unit. For example, use the external editing model if, after users edits a row, your application must perform actions--such as a database update or a cell-interdependent validity check--that require the row's values to be consistent with one another.

Figure 45 shows a row-selection table that uses the external editing model.

Figure 45   Row-Selection Table With External Editing

 

In   Figure 45, the user has selected Jack Melville's row. Selecting a row updates the editing area's input fields with values from the table's uppermost selected row (in this example, only one row is selected). Selecting a row also makes the Update Row button and the New Row button available. (The Update Row button and the New Row button copy values from the editing area's input fields into the table itself. The copied values remain displayed in the input fields.)

If, in the editing area, the user edits the Project field, changing its value from Moonbeam to, for example, Firedog, the change takes effect and is displayed in the table only if the user clicks the Update Row button after editing.

In tables with external editing, a user's changes to a row all take effect at the same time--when the user clicks the Update Row button or the New Row button. For this reason, the values in the row always stay consistent with one another.

Table 9 describes commands for manipulating row-selection tables that are externally editable.

 

Command Mnemonic Description

Delete Row

R

Deletes the selected rows.

Move Row Up

U

Moves the selected rows up by one row.

Move Row Down

D

Moves the selected rows down by one row.

U pdate Row

P

Copies values from the input fields of the editing area into the selected row. The copied values remain displayed in the input fields. If the selection contains more than one row, the Update Row command and the input fields of the editing area are unavailable.

New Row

N

Adds a new row directly above the uppermost selected row or, if there is no selection, adds a new row at the table's end. In either case, the New Row command fills the new row with values from the editing area's input fields and selects the new row. (The values in the editing area remain displayed there.) In addition, the New Row command deselects any previous selection and moves the insertion point to the first editable field of the editing area.

Clear Form

C

Sets each editable component of the editing area to its default value or, if there is no default value, clears the field.






Typically, the commands for manipulating an externally editable row-selection table are divided between two locations--below the table and to the right of it, as shown in Figure 45.

When labeling command buttons for an externally editable table, you can use the names Update Row and so on, as in Table 9. Alternatively, you can replace the word "Row" with the name of the object to which the row corresponds.

 Use the external editing model in row-selection tables if users must edit each row as a unit.

 For externally editable row-selection tables, ensure that table commands work as described in Table 9.

 If you use the default names for commands that manipulate externally editable row-selection tables, assign the recommended mnemonics to those commands. ( Table 9 lists the default names and the recommended mnemonics.)

 For externally editable tables, open an alert box if a user changes values in the table's editing area but then either:

  • Selects a new row without first clicking Update Row or New Row.
  • Clicks the Clear Form button without first clicking the Update Row button or New Row button.

In the alert box, ask the user to confirm whether the pending changes should be discarded.

Internal Editing Model--The internal editing model enables users to edit a table row by entering values directly in the row's cells. A user's changes to a row take effect one cell at a time, as the user moves keyboard focus from cell to cell. As a result, the values displayed in the row's cells can become temporarily inconsistent with one another while the user edits interdependent cells one at a time.

Figure 46 shows a row-selection table with internal editing.

Figure 46   Row-Selection Table With Internal Editing

 

Table 10 describes commands for manipulating row-selection tables that are internally editable.

 

Command Mnemonic Description

New Row

N

Adds a new row directly above the uppermost row of the selected rows or, if there is no selection, adds a new row at the table's end. In either case, the New Row command selects the new row, deselecting any previous selection, and moves the insertion point to the first editable cell of the new row.

Delete Row

R

Deletes the selected rows.

Hide Column

C

Hides the column that has keyboard focus.

Move Row Up

U

Moves the selected rows up by one row.

Move Row Down

D

Moves the selected rows down by one row.






 Provide internally editable row-selection tables if your application must process each row as a unit, but users can edit or copy cells individually.

 For internally editable row-selection tables, ensure that table commands work as described in Table 10.

 If you use the default names for commands that manipulate internally editable row-selection tables, assign the recommended mnemonics to those commands. ( Table 10 lists the default names and the recommended mnemonics.)

Using Cell Selection Models

You should use a cell selection model in an application-provided table only if no row selection model is appropriate. A table that uses a cell selection model is called a cell-selection table.

You can associate commands with a cell-selection table so that users can manipulate its rows and columns. Figure 47 shows a table with such commands, represented as buttons to the right of the table.

Figure 47   Cell-Selection Table With Associated Command Buttons

 

In Figure 47, each command applies to all the rows or columns that contain a selected cell.

Table 11 describes the commands for manipulating cell-selection tables and lists the commands' recommended mnemonics.

 

Command Mnemonic Description

New Row

N

Adds a new row directly above the uppermost row of the selected cells, or if there is no selection, adds a new row at the table's end. In addition, the New Row command moves the insertion point to the first editable cell of the new row. (Your application should enable users to add a new row at the end of the table--typically, by clicking the Tab key in the final cell of the final row.)

Delete Row

R

Deletes the rows containing the selected cells.

Hide Column

C

Hides the columns containing the selected cells.

Move Row Up

U

Moves the rows containing the selected cells up by one row.

Move Row Down

D

Moves the rows containing the selected cells down by one row.






In Table 11, the commands are not for editing the contents of cells. For information on editing cell contents, see the next section.

When providing commands for manipulating cell-selection tables, include only the commands that users need.

 Use a cell selection model in tables where actions can apply to cells or groups of cells individually.

 For cell-selection tables, ensure that table commands work as described in Table 11.

 If you use the default names for commands that manipulate cell-selection tables, assign the recommended mnemonics to those commands. ( Table 11 lists the default names and the recommended mnemonics.)

 If a user deletes a row of a cell-selection table, move the selection to the first cell of a different row. Follow these rules:

  • If the deleted row was the table's only row, either:
    • Display the table with a single empty row, in which the first cell is selected.
    • Display the table with no rows, if the user can add rows.
  • If the deleted row was not the table's only row but was the table's bottom row, select the first cell of the row directly above the deleted row.
  • If the deleted row was neither the table's only row nor the bottom row, select the first cell of the row directly below the deleted row.

Editing Cell-Selection Tables

You can enable users to edit the contents of cell-selection tables by entering values directly in the cell that has keyboard focus. Figure 48 shows an editable cell-selection table.

Figure 48   Editable Cell-Selection Table

 




Java Look and Feel Design Guidelines: Advanced Topics.
Copyright 2001. Sun Microsystems, Inc. All Rights Reserved.
Previous Next Contents/Index/Search
Table 11    Commands for Cell-Selection Tables 
Table 10   Commands for Row-Selection Tables With Internal Editing 
Table 9   Commands for Row-Selection Tables With External Editing 
Table 8   Commands for Any Row-Selection Table 
Left Curve
Java SDKs and Tools
Right Curve
Left Curve
Java Resources
Right Curve
JavaOne Banner
Java 8 banner (182)