Java Sun >
Guidelines Home Page >  Java Look and Feel Design Guidelines
>
Part III: The Components of the Java Foundation Classes
>
12: Selectable Lists, Tables, and Tree Components
>
Tree Components
  Previous Next Contents/Index/Search


Tree Components

A tree component represents a set of hierarchical data in the form of an indented outline, which users can expand and collapse. Tree components are useful for displaying data such as the folders and files in a file system or the table of contents in a help system.

A tree component consists of nodes. The top-level node, from which all other nodes branch, is the root node. Nodes that might have subnodes are called "containers." All other nodes are called "leaves." The default icon for a container is a folder, and the default icon for a leaf is a file. Each node is accompanied by text.

Turners appear next to each container in the tree component. The turner points right when the container is collapsed and down when the container is expanded.

In the following figure, the Projects, Fire station, First floor, and Landscaping nodes are expanded containers; all the other containers are collapsed. Landscaping is a container without subnodes. Communications, Garage, and Shop are leaves.

The turner, container, and leaf graphics shown in Figure 199 are the default graphics provided by the JFC.

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

Figure 199   Tree Component With Top-Level Lines

 

Top-Level Lines in Tree Component

Users can click a right-pointing turner to expand its container so that the contents are visible in the tree component. The turner rotates to point downward. Clicking a downward-pointing turner collapses its container so that the contents are no longer visible. For the keyboard operations that are appropriate for tree components, see Table 33.

  In most tree components, display the second level of the hierarchy as your highest level. Your outline will be easier to use if you do not display the root node.

  Display turners for all containers in the tree component, including the containers at the highest level. Turners remind users that they can expand and collapse the node.

  Setting the rootVisible property of the tree component to false turns off the display of the root node.

  Setting the showsRootHandles of the tree component to true turns on the display of turners for the highest-level containers.

Lines in Tree Components

The JFC provides three options for including lines in a tree component. The first option is not to include any lines. The second option is to draw lines that separate the top-level nodes, as shown in Figure 199. The third option is to draw lines that define the hierarchical relationships of the nodes, as shown in the following figure.

Figure 200   Tree Component With Hierarchy Lines

 

Hierarchy Lines in Tree Component

  If your tree component contains three or more levels, use lines to delineate the hierarchical relationships of the nodes.

  The client property JTree.lineStyle can be set to None to display no lines, to Horizontal to display top-level lines, and to Angled to display hierarchy lines.

Graphics in Tree Components

You can substitute your own graphics for the JFC-supplied container and leaf node graphics. For example, if your hierarchy represents the clients and servers in a network, you might include graphic representations of the clients and servers. In Figure 200, a custom music graphic is used for the leaf nodes. You might also use separate graphics to show when a container is expanded and when it is collapsed.

Editing in Tree Components

You can enable users to edit the text in a tree component. When editing is enabled, users can change text using the same editing commands that they use for text fields. These commands are described in Editable Text Fields.

To start editing a node in a tree component, users can:

  • Click, pause, click, and wait 1200 milliseconds
  • Triple-click
  • Press F2 when a node is selected

  Setting the editable property to true enables editing of all nodes in the tree.


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)