<?xml version='1.0' encoding='UTF-8'?>
<section>
  <sectioninfo>
    <keywordset>
      <keyword>node</keyword>
      <keyword>rich:treeNode</keyword>
      <keyword>HtmlTreeNode</keyword>
    </keywordset>
  </sectioninfo>

  <table>
    <title>Component identification parameters </title>
    <tgroup cols="2">
      <thead>
        <row>
          <entry>Name</entry>
          <entry>Value</entry>
        </row>
      </thead>
      <tbody>
        <row>
          <entry>component-type</entry>
          <entry>org.richfaces.TreeNode</entry>
        </row>
        <row>
          <entry>component-class</entry>
          <entry>org.richfaces.component.html.HtmlTreeNode</entry>
        </row>
        <row>
          <entry>component-family</entry>
          <entry>org.richfaces.TreeNode</entry>
        </row>
        <row>
          <entry>renderer-type</entry>
          <entry>org.richfaces.TreeNodeRenderer</entry>
        </row>
        <row>
          <entry>tag-class</entry>
          <entry>org.richfaces.taglib.TreeNodeTag</entry>
        </row>
      </tbody>
    </tgroup>
  </table>

  <section>
    <title>Creating the Component with a Page Tag</title>
    <para>Here is a simple example as it can be used on a page: </para>

    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="XML"><![CDATA[...
    <rich:tree ... faceNode="simpleNode">
        <rich:treeNode type="simpleNode">
            <!--Tree node data displaying template-->
        </rich:treeNode>
    </rich:tree>
...
]]></programlisting>
  </section>
  <section>
    <title>Creating the Component Dynamically Using Java</title>

    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlTreeNode;
...
HtmlTreeNode myPanel = new HtmlTreeNode();
...
]]></programlisting>
  </section>
  <section>
    <title>Details of Usage</title>
    <para> The <emphasis>
        <property>&quot;icon&quot;</property>
      </emphasis>, <emphasis>
        <property>&quot;iconCollapsed&quot;</property>
      </emphasis>, <emphasis>
        <property>&quot;iconExpanded&quot;</property>
      </emphasis>, <emphasis>
        <property>&quot;iconLeaf&quot;</property>
      </emphasis> attributes define icons for the component. Also you can define icons using facets
      with the same names. If the facets are defined, the corresponding attributes are ignored and
      facets contents are used as icons. The width of a rendered facet area is 16px. </para>
	  
    <programlisting role="XML"><![CDATA[...
    <rich:tree ...>
        ...
        <rich:treeNode ...>
            <f:facet name="icon">
                <outputText value="A"/>
            </f:facet>
            <f:facet name="iconCollapsed">
                <outputText value="B"/>
            </f:facet>		
            <f:facet name="iconExpanded">
                <outputText value="C"/>
            </f:facet>
            <f:facet name="iconLeaf">
                <outputText value="D"/>
            </f:facet>
        </rich:treeNode>
        ...
    </rich:tree>
...
]]></programlisting>
    <para>As it has been mentioned <link linkend="treeNode">above</link>, <emphasis role="bold"><property>&lt;rich:treeNode&gt;</property></emphasis>  defines a template for nodes
      rendering in a tree. Thus, during XML document rendering (a web.xml application) as a tree,
      the following nodes output (passed via <code>var=&quot;data&quot;</code> on a tree) happens:</para>
    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="XML"><![CDATA[...
    <rich:tree ... faceNode="simpleNode" ... value="#{bean.data}" var="data">
        <rich:treeNode type="simpleNode">
            <h:outputText value="context-param:"/>
            <h:inputText value="#{data.name}"/>
        </rich:treeNode>
    </rich:tree >
...
]]></programlisting>
    <figure>
      <title>Nodes output</title>
      <mediaobject>
        <imageobject>
          <imagedata fileref="images/treeNode2.png"/>
        </imageobject>
      </mediaobject>
    </figure>
    <para>Hence,<emphasis role="bold"><property>&lt;h:outputText /&gt;</property></emphasis> tag outputs the <code>&quot;context-param&quot;</code> string and
      then the <emphasis role="bold"><property>&lt;h:inputText /&gt;</property></emphasis> outputs the <code>data.name</code> element of this node.  
    </para>
    <para>Different nodes for rendering could be defined depending on some conditions on the tree
      level. Each condition represents some rendering template. To get more information on various
        <property>treeNodesAdaptorAdaptor</property> definition for nodes, <link linkend="tree">see the tree
        component chapter</link>.</para>
    <para>Switching between expanded/collapsed modes is also managed on the tree level and defined
      in <link linkend="tree">the corresponding section</link>.</para>
    <para>Default nodes of the tree level as well as the ones defined with the
      <property>treeNodesAdaptorAdaptor</property> component could send Ajax requests when selected with the
      mouse, it&apos;s managed with the <emphasis>
        <property>&quot;ajaxSubmitSelection&quot;</property>
      </emphasis> attribute (true/false).</para>
    <para>
      Information about the <emphasis><property>&quot;process&quot;</property></emphasis> attribute usage you can find <link linkend="process">&quot; Decide what to process &quot; </link> guide section.
    </para>
  </section>
  <section>
    <title>Built-in Drag and Drop</title>
    <para>The main information on Drag and Drop operations is given in <link linkend="tree">the
        corresponding paragraph</link> of the <property>tree</property> component chapter.
      It&apos;s only necessary to mention that each node could also be a Drag element as well as
      a Drop container, i.e. the container and the element have all attributes, listeners and ways
      of behavior similar to the ones of the <emphasis role="bold">
        <property>&lt;rich:dragSupport &gt;</property>
      </emphasis> and <emphasis role="bold">
        <property>&lt;rich:dropSupport &gt;</property>
      </emphasis> components simultaneously.</para>
  </section>
  <section>
    <title>Events Handling</title>
    <para>Just as Drag and Drop operations it corresponds to the one described on <link
        linkend="tree">the tree component level</link> for a default Node.</para>
  </section>
  
  <section>
		<title>Facets</title>
		<table>
			<title>Facets</title>
				<tgroup cols="2">
					<thead>
						<row>
							<entry>Facet name</entry>
							<entry>Description</entry>
						</row>
					</thead>
					<tbody>
						<row>
							<entry>icon</entry>
							<entry>Redefines the icon for node. Related attribute is &quot;icon&quot;</entry>
						</row>
						<row>
							<entry>iconCollapsed</entry>
							<entry>Redefines the icon for collapsed node. Related attribute is &quot;iconCollapsed&quot;</entry>
						</row>
						<row>
							<entry>iconExpanded</entry>
							<entry>Redefines the icon for expanded node. Related attribute is &quot;iconExpanded&quot;</entry>
						</row>
						<row>
							<entry>iconLeaf</entry>
							<entry>Redefines the icon for component leaves. Related attribute is &quot;iconLeaf&quot;</entry>
						</row>
					</tbody>
				</tgroup>
		</table>
	</section>
  
  <section>
    <title>Look-and-Feel Customization</title>
    
    <para>For skinnability implementation, the components use a <emphasis>
      <property>style class redefinition method.</property>
    </emphasis> Default style classes are mapped on <emphasis>
      <property>skin parameters.</property>
    </emphasis></para>
    
    <para>There are two ways to redefine the appearance of all <emphasis role="bold">
      <property>&lt;rich:treeNode&gt;</property>
    </emphasis> components at once:</para>
    
    <itemizedlist>
      <listitem>
        <para>Redefine the corresponding skin parameters</para>
      </listitem>
      
      <listitem>
        <para>Add to your style sheets <emphasis>
          <property>style classes</property>
        </emphasis> used by a <emphasis role="bold">
          <property>&lt;rich:treeNode&gt;</property>
        </emphasis> component</para>
      </listitem>
    </itemizedlist>
  </section>
  
  <section id="SPRofTN">
    <title>Skin Parameters Redefinition</title>
    <table>
      <title>Skin parameters for a node element</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Skin parameters</entry>
            <entry>CSS properties</entry>
          </row>
        </thead>
        <tbody>
          <row>
            <entry>panelTextColor</entry>
            <entry>color</entry>
          </row>
          <row>
            <entry>preferableDataSizeFont</entry>
            <entry>font-size</entry>
          </row>
          <row>
            <entry>preferableDataFamilyFont</entry>
            <entry>font-family</entry>
          </row>
        </tbody>
      </tgroup>
    </table>
    <table>
      <title>Skin parameters for a selected element</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Skin parameters</entry>
            <entry>CSS properties</entry>
          </row>
        </thead>
        <tbody>
          <row>
            <entry>headerBackgroundColor</entry>
            <entry>border-color</entry>
          </row>
          <row>
            <entry>panelTextColor</entry>
            <entry>color</entry>
          </row>
          <row>
            <entry>selectControlColor</entry>
            <entry>color</entry>
          </row>
        </tbody>
      </tgroup>
    </table>
    <table>
      <title>Skin parameters for a mouseovered element</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Skin parameters</entry>
            <entry>CSS properties</entry>
          </row>
        </thead>
        <tbody>
          <row>
            <entry>selectControlColor</entry>
            <entry>color</entry>
          </row>
        </tbody>
      </tgroup>
    </table>
  </section>
  
  <section>
    <title>Definition of Custom Style Classes</title>
    <para>On the screenshot there are classes names that define styles for component elements.</para>
    
    <figure>
      <title>Classes names</title>
    <mediaobject>
      <imageobject>
        <imagedata fileref="images/treeNode_cn.png"/>
      </imageobject>
    </mediaobject>
    </figure>
    
    <table>
      <title>Classes names that define a node element</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Class name</entry>
            <entry>Description</entry>
          </row>
        </thead>
        <tbody>
          <row>
            <entry>rich-tree-node</entry>
            <entry>Defines styles for a tree node</entry>
          </row>
          
          <row>
            <entry>rich-tree-node-handle</entry>
            <entry>Defines styles for a tree node handle</entry>
          </row>

          <row>
            <entry>rich-tree-node-handleicon</entry>
            <entry>Defines styles for a tree node handle icon</entry>
          </row>
     
          <row>
            <entry>rich-tree-node-children</entry>
            <entry>Defines styles for all tree node subnodes</entry>
          </row>
          <row>
            <entry>rich-tree-node-text</entry>
            <entry>Defines styles for a tree node text</entry>
          </row>
          <row>
            <entry>rich-tree-node-icon</entry>
            <entry>Defines styles for a tree node icon</entry>
          </row>
          <row>
            <entry>rich-tree-node-icon-leaf</entry>
            <entry>Defines styles for a tree node icon leaf</entry>
          </row>
        </tbody>
      </tgroup>
    </table>
    
    <table>
      <title>Classes names that define states for a node element</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Class name</entry>
            <entry>Description</entry>
          </row>
        </thead>
        <tbody>
         
          <row>
            <entry>rich-tree-node-selected</entry>
            <entry>Defines styles for a selected tree node </entry>
          </row>
          <row>
            <entry>rich-tree-node-highlighted</entry>
            <entry>Defines styles for a highlighted tree node </entry>
          </row>
          
          <row>
            <entry>rich-tree-node-handleicon-collapsed</entry>
            <entry>Defines styles for a collapsed tree node handleicon </entry>
          </row>
          <row>
            <entry>rich-tree-node-handleicon-expanded</entry>
            <entry>Defines styles for a expanded tree node handleicon</entry>
          </row>
         
        </tbody>
      </tgroup>
    </table>
    
    <para>In order to redefine the style for all <emphasis role="bold">
      <property>&lt;rich:treeNode&gt;</property>
    </emphasis> components on a page using CSS, it&apos;s enough to create classes with the
      same names and define the necessary properties in them.</para>
    
    <para>To change the style of particular <emphasis role="bold">
      <property>&lt;rich:treeNode&gt;</property>
    </emphasis> components define your own style classes in the corresponding <emphasis
      role="bold">
      <property>&lt;rich:treeNode&gt;</property>
    </emphasis>attributes.</para>
    <para>It is also possible to change look and feel of specific <emphasis role="bold"><property>&lt;rich:treeNode&gt;</property>
    </emphasis> with the help of defining for them <emphasis>
        <property>&quot;selectedClass&quot;</property>
      </emphasis> and <emphasis>
        <property>&quot;highlightedClass&quot;</property>
      </emphasis> attributes by their specific classes.</para>
  </section>

  <section>
    <title>Relevant Resources Links</title>
    <para>How to Expand/Collapse Tree Nodes from code see in this<ulink
        url="http://labs.jboss.com/wiki/ExpandCollapsetreeNodesAdaptor">wiki article</ulink>. </para>
  </section>
</section>
