Components: tree, treechildren, treeitem, treerow, treecell, treecols and treecol.
A tree consists of two parts, the set of columns, and the tree body. The set of columns is defined by a number of treecol components, one for each column. Each column will appear as a header at the top of the tree. The second part, the tree body, contains the data to appear in the tree and is created with a treechildren component.
An example of a tree control is as follows.
<tree id="tree" rows="5"><treecols> <treecol label="Name"/> <treecol label="Description"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="Item 1"/> <treecell label="Item 1 description"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="Item 2"/> <treecell label="Item 2 description"/> </treerow> <treechildren> <treeitem> <treerow> <treecell label="Item 2.1"/> </treerow> <treechildren> <treeitem> <treerow> <treecell label="Item 2.1.1"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="Item 2.1.2"/> </treerow> </treeitem> </treechildren> </treeitem> <treeitem> <treerow> <treecell label="Item 2.2"/> <treecell label="Item 2.2 is something who cares"/> </treerow> </treeitem> </treechildren> </treeitem> <treeitem label="Item 3"/> </treechildren> </tree>
tree: This is the outer component of a tree control.
treecols: This component is a placeholder for a collection of treecol components.
treecol: This is used to declare a column of the tree. By using this comlumn, you can specify additional information such as the column header.
treechildren: This contains the main body of the tree, which contain a collection of treeitem components.
treeitem: This component contains a row of data (treerow), and an optional treechildren.
If the component doesn't contain a treechildren, it is a leaf node that doesn't accept any child items.
If it contains a treechildren, it is a branch node that might contain other items.
For a branch node, an +/- button will appear at the beginning of the row, such that user could open and close the item by clicking on the +/- button.
treerow: A single row in the tree, which should be placed inside a treeitem component.
treecell: A single cell in a tree row. This element would go inside a treerow component.
Mouseless Entry tree
UP and DOWN to move the selection up and down one tree item.
PgUp and PgDn to move the selection up and down in a step of one page.
HOME to move the selection to the first item, and END to the last item.
RIGHT to open a tree item, and LEFT to close a tree item.
Ctrl+UP and Ctrl+DOWN to move the focus up and down one tree item without changing the selection.
SPACE to select the item of the focus.