Tree Spec

Written by Dave Hyatt and Mike Pinkerton
Last Modified: 2/23/99

Overview

A tree (also referred to as a tree view) is a way to display hierarchical information to the user. The user may expand containers within the tree to display their children (indented from the parent), or collapse them to again only display the parent. Users should already be quite comfortable navigating tree views as they are present in, for example, the MacOS Finder, Windows Explorer, and the Bookmarks window of Navigator.

A tree view consists of three main areas (going from top to bottom): a title bar, column headers, and tree rows:

The title bar is useful to describe what the contents represent, for example, a tree displaying a user's Inbox would probably be titled, "Inbox." There can be only one title bar.
Column headers sit atop each column and provide a description of what information is displayed there. Users can rearrange, resize, show, and hide column headers by manipulating them directly in the UI. Using the mail example, likely column headers would be "Subject," "To/From," and "Date."

Tree rows contain the actual information, and there can be an arbitrary number of tree rows.

Syntax

In our implementation, the tree view is described using modified table frames. The title bar is represented using a table caption, the column headers are represented using a table head and table headers, and the tree rows are represented using table rows and cells inside of a scrolling table body. This explains why the syntax is similar to tables.

The following XUL tags are used to describe a tree view:

Tag

Allowed Children

Attributes

Description

tree

caption, treehead, contextmenu, treebody

open, target

The root tag for a tree view. The target attribute designates an object that is used by default for targeting of links selected in the tree view. The tree head and tree body tags function just like the THEAD and TBODY tags in HTML tables.

caption

(Text)

none

A child of the <tree> tag, the <caption> tag contains the text that should be displayed in the title bar. Apply styles to this tag to determine the look of the title bar. The normal visibility mechanism for elements is used to show/hide the title bar.

treerow

<treecell>

none

A child of the <treeitem> tag. The represents the column data for a particular node The tags it contains as children are the column data that should be displayed for that node in the tree view.

<treecell>

(Text)

none

A child of the <treerow> tag is assumed to be column information, which represents data for a particular row in the tree.

The child of the tag contains the displayable text that should be shown in the cell.

children

treeitem

none

A child of a <treeitem> tag, the <children> tag holds the children of the item that appear in the tree.

treeitem

treerow, contextmenu, children

open, enabled, tooltip, description

A child of a <children> tag. Represents a child in the tree view. Individual styles can be applied to the item. The open attribute indicates whether or not the node is open or closed in the tree view. A folder can be disabled (in which case it cannot be selected or manipulated).

The treerow child contains the column data for the node. The contextmenu child contains the context menu items and their associated commands for the node. The children tag contains the children that should appear in the tree view.

Examples

maintained by Mike Pinkerton (pinkerton@netscape.com)

Tag	Allowed Children	Attributes	Description
tree	caption, treehead, contextmenu, treebody	open, target	The root tag for a tree view. The target attribute designates an object that is used by default for targeting of links selected in the tree view. The tree head and tree body tags function just like the THEAD and TBODY tags in HTML tables.
caption	(Text)	none	A child of the <tree> tag, the <caption> tag contains the text that should be displayed in the title bar. Apply styles to this tag to determine the look of the title bar. The normal visibility mechanism for elements is used to show/hide the title bar.
treerow	<treecell>	none	A child of the <treeitem> tag. The represents the column data for a particular node The tags it contains as children are the column data that should be displayed for that node in the tree view.
<treecell>	(Text)	none	A child of the <treerow> tag is assumed to be column information, which represents data for a particular row in the tree. The child of the tag contains the displayable text that should be shown in the cell.
children	treeitem	none	A child of a <treeitem> tag, the <children> tag holds the children of the item that appear in the tree.
treeitem	treerow, contextmenu, children	open, enabled, tooltip, description	A child of a <children> tag. Represents a child in the tree view. Individual styles can be applied to the item. The open attribute indicates whether or not the node is open or closed in the tree view. A folder can be disabled (in which case it cannot be selected or manipulated). The treerow child contains the column data for the node. The contextmenu child contains the context menu items and their associated commands for the node. The children tag contains the children that should appear in the tree view.