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>
   ...

UsingTree2 (last edited 2009-09-20 21:52:51 by localhost)