A simple t:tree2 example as jsp:root-include looks like this (originally from http://www.irian.at/myfaces/tree2.jsf with TreeBacker as managed bean):
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:t="http://myfaces.apache.org/tomahawk" xmlns:c="http://shale.apache.org/clay"> <f:view> <h:form id="vps"> <t:tree2 id="clientTree" showLines="false" showRootNode="false" showNav="true" value="#{@managed-bean-name.treeData}" var="nodeVar" varNodeToggler="vpT" clientSideToggle="false" imageLocation="/img" javascriptLocation="src" preserveToggle="false"> <f:facet name="foo-folder"> <h:panelGroup> <h:outputText value="#{nodeVar.description}" styleClass="nodeFolder"/> </h:panelGroup> </f:facet> <f:facet name="bar-folder"> <h:panelGroup> <h:outputText value="#{nodeVar.description}" styleClass="nodeFolder"/> </h:panelGroup> </f:facet> <f:facet name="person"> <h:panelGroup> <h:outputText value="#{nodeVar.description}"/> </h:panelGroup> </f:facet> <f:facet name="dynamic-person"> <h:panelGroup> <h:outputText value="#{nodeVar.description}"/> </h:panelGroup> </f:facet> <f:facet name="document"> <h:panelGroup> <h:outputText value="#{nodeVar.description}"/> </h:panelGroup> </f:facet> </t:tree2> </h:form> </f:view> </jsp:root>
As real clay-component (defined in clay-config.xml) it would look like the following:
... <view> ... <component...> ... <element renderId="1" jsfid="t:tree2"> <attributes> <set name="id" value="clientTree"/> <set name="showLines" value="false"/> <set name="showRootNode" value="false"/> <set name="showNav" value="true"/> <set name="value" value="#{@managed-bean-name.treeData}"/> <set name="var" value="nodeVar"/> <set name="varNodeToggler" value="vpT"/> <set name="clientSideToggle" value="false"/> <set name="imageLocation" value="/img"/> <set name="javascriptLocation" value="src"/> <set name="preserveToggle" value="false"/> </attributes> <element renderId="1" jsfid="panelGroup" facetName="foo-folder" > <element renderId="1" jsfid="outputText"> <attributes> <set name="value" value="#{nodeVar.description}" /> <set name="styleClass" value="nodeFolder" /> </attributes> </element> </element> <element renderId="2" jsfid="panelGroup" facetName="bar-folder" > <element renderId="1" jsfid="outputText"> <attributes> <set name="value" value="#{nodeVar.description}" /> <set name="styleClass" value="nodeFolder" /> </attributes> </element> </element> <element renderId="3" jsfid="panelGroup" facetName="person" > <element renderId="1" jsfid="outputText"> <attributes> <set name="value" value="#{nodeVar.description}" /> </attributes> </element> </element> <element renderId="4" jsfid="panelGroup" facetName="dynamic-person" > <element renderId="1" jsfid="outputText"> <attributes> <set name="value" value="#{nodeVar.description}" /> </attributes> </element> </element> <element renderId="5" jsfid="panelGroup" facetName="document" > <element renderId="1" jsfid="outputText"> <attributes> <set name="value" value="#{nodeVar.description}" /> </attributes> </element> </element> </element> ... </component...> ... </view> ...