View source for Tree Controls

= Tree Controls =

== Reference Implementations ==

== Orbeon Tree appearance of select and select1 ==

The Orbeon XForms system has tree appearance for items within tree views.
[http://wiki.orbeon.com/forms/doc/developer-guide/xforms-controls/selection-controls#TOC-Tree-appearance 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 ===
[http://ajaxforms.sourceforge.net/samples/addons.html 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.

[http://docs.jquery.com/Plugins/Treeview Tree View]

[http://plugins.jquery.com/project/jquery-checkboxtree 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