Java >
Guidelines Home Page >  Java Look and Feel Design Guidelines
>
Part III: The Components of the Java Foundation Classes
> 7: Windows and Panes >
Organizing the Contents of Windows
  Previous Next Contents/Index/Search


Organizing the Contents of Windows

The JFC provides a number of user interface elements you can use for organizing the contents of windows: panels, tabbed panes, split panes, and scroll panes. Panels and panes can be used to organize windows into one or more viewing areas. A panel is a JFC component that you can use for grouping other components inside windows or other panels.

A pane is a collective term used for scroll panes, split panes, and tabbed panes, among others. Panes provide a client area where you can offer control over which user interface elements users see. For instance, a scroll pane enables the viewing of different parts of a client area; a tabbed pane enables users to choose among screen-related client areas; and a split pane enables users to allocate the proportions of a larger viewing area between two client areas.

Figure 94   Lower-Level Containers

 

Lower-Level Containers

Panels

In contrast to scroll panes and tabbed panes, which typically play an interactive role in an application, a panel simply groups components within a window or another panel. Layout managers enable you to position components visually within a panel. For a thorough treatment of the visual layout and alignment of components, see Layout and Visual Alignment. For more information on layout managers, see The Java Tutorial at http://docs.oracle.com/javase/tutorial/ .

Scroll Panes

A scroll pane is a specialized container offering vertical or horizontal scrollbars (or both) that enable users to change the visible portion of the window contents.

Figure 95 provides an example of a scroll pane with a vertical scrollbar. The size of the scroll box indicates the proportion of the content currently displayed.

Figure 95   Scroll Pane in a Document Window

 

Scroll Pane in Document Window

You can choose whether a scroll pane always displays scrollbars or whether they appear only when needed.

  Unless you have a compelling reason to do otherwise, use the default setting for horizontal scrollbars, which specifies that they appear only when needed.

  Display a horizontal scrollbar if users can't see all the information in the window pane--for instance, in a word-processing application that prepares printed pages, users might want to look at the margins as well as the text.

  If the data in a list is known and appears to fit in the available space (for example, a predetermined set of colors), you still need to place the list in a scroll pane. Specify that a vertical scrollbar should appear only if needed. For instance, if users change the font, the list items might become too large to fit in the available space, and a vertical scrollbar would be required.

  If the data in a scroll pane sometimes requires a vertical scrollbar in the normal font, specify that the vertical scrollbar always be present. This practice prevents the distracting reformatting of the display whenever the vertical scrollbar appears or disappears.

  Scrollbars are obtained by placing the component, such as a text area, inside a scroll pane.

Scrollbars

A scrollbar is a component that enables users to control what portion of a document or list (or similar information) is visible on screen. In locales with left-to-right writing systems, scrollbars appear along the bottom and the right sides of a scroll pane, a list, a combo box, a text area, or an editor pane. In locales with right-to-left writing systems, such as Hebrew and Arabic, scrollbars appear along the bottom and left sides of the relevant component. By default, scrollbars appear only when needed to view information that is not currently visible, although you can specify that the scrollbar is always present.

The size of the scroll box represents the proportion of the window content that is currently visible. The position of the scroll box within the scrollbar represents the position of the visible material within the document. As users move the scroll box, the view of the document changes accordingly. If the entire document is visible, the scroll box fills the entire channel.

Both horizontal and vertical scroll boxes have a minimum size of 16 x 16 pixels so that users can still manipulate them when viewing very long documents or lists.

At either end of the scrollbar is a scroll arrow, which is used for controlling small movements of the data.

The following figure shows horizontal and vertical scrollbars. Each scrollbar is a rectangle consisting of a textured scroll box, a recessed channel, and scroll arrows.

Figure 96   Vertical and Horizontal Scrollbars

 

Vertical and Horizontal Scrollbars

Do not confuse the scrollbar with a slider, which is used to select a value. For details, see Sliders.

Users drag the scroll box, click the scroll arrows, or click in the channel to change the contents of the viewing area. When users click a scroll arrow, more of the document or list scrolls into view. The contents of the pane or list move in increments based on the type of data. When users hold down the mouse button, the pane or list scrolls continuously.

For a description of keyboard operations for scrollbars, see Table 22.

  Scroll the content approximately one pane at a time when users click in the scrollbar's channel. Leave one small unit of overlap from the previous information pane to provide context for the user. For instance, in scrolling through a long document, help users become oriented to the new page by providing one line of text from the previous page.

  Scroll the content one small unit at a time when users click a scroll arrow. (The smallest unit might be one line of text, one row in a table, or 10 to 20 pixels of a graphic.) The unit controlled by the scroll arrows should be small enough to enable precise positioning of the text or graphic but not so small that users must spend an impractical amount of time using the scroll arrow.

  Ensure that the scroll speed is fairly constant when users click the scroll arrows. Ensure that scrollbar controls run quickly yet enable users to perform the operation without overshooting the intended location. The best way to determine the appropriate scrolling rate is to test the scrolling rate with users who are unfamiliar with your application.

  Ensure that the scrolling rate is appropriate across different processor speeds.

  Place scrollbars in the orientation that is suitable for the writing system of your target locale. For example, in the left-to-right writing systems (such as English and other European languages), the scrollbars appear along the right side of the scroll pane or other component. In other locales, they might appear along the left side of the scroll pane.

Tabbed Panes

A tabbed pane is a container that enables users to switch between several content panes that appear to share the same space on screen. (The panes are implemented as JPanel components.) The tabs themselves can contain text or images or both.

A typical tabbed pane appears with tabs displayed at the top, but the tabs can be displayed on any of the four sides. If the tabs cannot fit in a single row, additional rows are created automatically. Note that tabs do not change position when they are activated. For the first row of tabs, there is no separator line between the active tab and the pane.

The following figure shows the initial content pane in the JFC-supplied color chooser. Note that the tabbed pane is displayed within a dialog box that uses the borders, title bar, and window controls of the platform on which its associated application is running.

Figure 97   Swatches Content Pane in the JFC Color Chooser

 

Swatches Content Pane

Users choose which content pane to view by clicking the corresponding tab. The content pane changes accordingly, as shown in the following figure of the content pane associated with the RGB tab.

For a list of keyboard operations appropriate for tabbed panes, see Table 26.

Figure 98   RGB Content Pane in the JFC Color Chooser

 

RGB Content Pane

You can use tabbed panes to good advantage in secondary windows, such as a preferences dialog box, that require you to fit a lot of information into a small area.

You can also use tabbed panes to provide a way for users to switch between content panes that represent:

  • Different ways to view the same information, like a color chooser's RGB and HSB panes
  • Different parts of an informational unit, like worksheets that are part of a workbook in a spreadsheet application

  Use headline capitalization for tab names.

  Provide mnemonics so users can navigate from tab to tab and from tabs to associated content panes using keyboard operations.

  Do not nest tabbed panes.

  If your tabbed pane requires multiple rows of tabs, consider dividing the content among several dialog boxes or other components. Multiple rows of tabs can be confusing. You might also consider displaying the tabs vertically so more could be displayed in a single column.

  Place any dialog box buttons outside the tabbed pane because they apply to the whole dialog box (that is, all the panes) at once.

Split Panes

A split pane is a container that divides a larger pane into resizable panes. Split panes enable users to adjust the relative sizes of two adjacent panes. The Java look and feel drag texture (along with a pointer change when the pointer is over the splitter bar) indicates that users can resize split panes.

To adjust the size of the split panes, users drag the splitter bar, as shown in the following figure.

Figure 99   Split Pane (Horizontal Orientation)

 

Split Pane (Horizontal)

Users can also control the splitter bar by clicking one of the optional zoom buttons shown in the following figure. Clicking a button moves the splitter bar to its extreme (upper, lower, left, or right) position. If the splitter bar is already at its extreme position, clicking a zoom button in the direction of the split restores the panes to the size they had before the zoom operation (or before the user dragged the splitter bar to close one of the panes).

For a list of keyboard operations appropriate for split panes, see Table 25.

Figure 100   Zoom Buttons in a Split Pane (Vertical Orientation)

 

Split Pane (Vertical)

  Include zoom buttons in split panes because they are very convenient for users.

Nested Split Panes

In addition to splitting panes either horizontally or vertically, you can nest one split pane inside another. The following figure portrays a mail application in which the top pane of a vertically split pane has a horizontally split pane (in blue in the lower schematic diagram) embedded in it.

Figure 101   Nested Split Panes

 

Nested Split Panes


Java Look and Feel Design Guidelines, second edition.
Copyright 2001. Sun Microsystems, Inc. All Rights Reserved.
Previous Next Contents/Index/Search
Left Curve
Java SDKs and Tools
Right Curve
Left Curve
Java Resources
Right Curve
JavaOne Banner Java 8 banner (182)