Tree Controls

Reference Implementations

Orbeon Tree appearance of select and select1

The Orbeon XForms system has tree appearance for items within tree views. Tree Appearance

If you specify appearance="xxforms:tree" on an <xforms:select> or <xforms:select1>, it will be rendered as a tree, as shown in the screenshots below. The nesting of the tree nodes in the UI will follow the nesting of the nodes you point to with <xforms:itemset ref="...">.

AJAX Forms

AJAX Forms tree add on has simple folding folders.

This discussion is how to standardize some of the needs for tree-like edit controls. These are sometimes refereed to as:

folding trees
binary trees
checkbox trees
folder views

etc. There are many variations and there are many configuration options.

Tree View

Checkbox Tree

Issues

Default open, closed position

When a tree is displayed initially, folders may be initially set to be open or closed. One obvious approach is add an open attribute to each node. open="true" indicates that the item should be displayed open. open="false" should indicate that the folder should initially be displayed with a closed icon.

The following is taken from the Orbeon page:

The <xforms:itemset> element supports the xxforms:open extension attribute, which determines which nodes of the tree are open when the tree is first rendered. You can use <xforms:itemset xxforms:open="true"> if you want all the nodes to be open. If you have a condition under which nodes should be open, use an AVT. For instance, the following will open just the first level of the tree. If you wanted to open all the nodes up to 3 levels of depth, you would instead write {count(ancestor-or-self::item) le 3}.

Styling Icons (folders, +/-)

There are several options to display a tree. One is to use simple +/- symbols. The other is use use icons of folders.

Emulation using switch/case functions

References

I found this link on the Wiki and it references a "tree" and "treeitem" elements:

Media:Tree_controls$tree-control.xhtml

http://www.w3.org/MarkUp/Forms/wiki/images/9/90/Tree_controls%24tree-control.xhtml