<sc:tree> - A YUI Tree Wrapper

This component will allow you to create an expandable tree containing arbitrary components. The tree can be used in one of two ways: facet-based or UIComponent-based.

UIComponent-based Approach

The UIComponent-based form of usage is via nested UIComponents, sc:treeNode, which currently supports label and expanded attributes. Each sc:treeNode must have either the label attribute, or a f:facet named label. If exanded is set to true, that node (and every node above it in its hierarchy) will be rendered expanded. Below is a simple example of this form:

<sc:tree> <sc:treeNode id="ui1" expanded="true" label="Node 1"> <sc:treeNode label="Node 1-1"/> <sc:treeNode label="Node 1-2"/> </sc:treeNode> <sc:treeNode label="Node 2"> <sc:treeNode label="Node 2-1"/> <sc:treeNode label="Node 2-2"/> </sc:treeNode> <sc:treeNode label="Node 3"> <sc:treeNode label="Node 3-1"/> <sc:treeNode label="Node 3-2"> <sc:treeNode label="Node 3-2-1" expanded="true"/> </sc:treeNode> </sc:treeNode> </sc:tree>

This will render as:

Facet-based Approach

The facet-based approach allows the application author to define "templates" for an application-specific node type using a facet whose name is the type. The application model data is then passed to the component using the value attribute, which must be a List<ITreeNode, as show below:

<sc:tree value="#{testBean.newTree}" var="item"> <f:facet name="file"> <h:panelGroup> <h:outputText value="#{item.name}"/> </h:panelGroup> </f:facet> <f:facet name="dir"> <h:panelGroup> <h:outputText value="#{item.name}"/> </h:panelGroup> </f:facet> </sc:tree>

Before looking at the component in more detail, this is how it will render:

Note that we define two facets, file and directory. These are application-specific types that we'll define in our model in Java code. The tree itself is bound to #{testBean.newTree}. The implementation of that method itself isn't very interesting, but the signature is:

public List<ITreeNode> getNewTree() { List<ITreeNode> list = new ArrayList<ITreeNode>(); // snip return list; }

This method creates a list of ITreeNode objects, which defines the top-level items in the tree. Each item in the List is also an ITreeNode object, which looks like this:

public interface ITreeNode { String getType(); List<ITreeNode> getChildren(); }

To use one of your classes in the tree, the class must implement ITreeNode. The type property on the interface tells <sc:tree> how to render that particular item. For example, in the Scales demo, we have FileItem, which returns "file" as its type. When rendering, <sc:tree> see that a particular item in the object graph has type file so it renders it based on the contents of the file facet. The number and depth of items in tree is limited only by the system resources of the server.