<?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 could 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="JAVA"><![CDATA[...
    <rich:tree ...>
        ...
        <rich:treeNode ...>
            <f:facet name="icon">
                <hutputText value="A"/>
            </f:facet>
            <f:facet name="iconCollapsed">
                <hutputText value="B"/>
            </f:facet>		
            <f:facet name="iconExpanded">
                <hutputText value="C"/>
            </f:facet>
            <f:facet name="iconLeaf">
                <hutputText value="D"/>
            </f:facet>
        </rich:treeNode>
        ...
    </rich:tree>
...
]]></programlisting>

  </section>
  <section>
    <title>Look-and-Feel Customization</title>
    <para>As it has been mentioned <link linkend="treeNode">above</link>, <property>treeNode</property> 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 var=&quot;data&quot; 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/tree2.gif"/>
        </imageobject>
      </mediaobject>
    </figure>
    <para>Hence, outputText outputs the &quot;context-param&quot; string and then the input
      is output for the data.name 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 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>
  </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:draggable&gt;</property>
      </emphasis> and <emphasis role="bold">
        <property>&lt;rich:dropZone&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>Look-and-Feel Customization</title>
    <para>For skinnability implementation the components use a <emphasis>
        <property>style class redefinition method</property>
      </emphasis>.</para>
    <para>Default style classes are mapped on <emphasis><property>skin
      parameters</property>.</emphasis></para>
    <para>To redefine appearance of all treeNodesAdaptor at once, there are two ways:</para>
    <itemizedlist>
      <listitem>to redefine corresponding skin parameters</listitem>
      <listitem>to add <emphasis>
          <property>style classes</property>
        </emphasis> used by the treeNode to your page style sheets</listitem>
    </itemizedlist>
  </section>
  <section>
    <title>Skin Parameters Redefinition:</title>
    <table>
      <title>Default skins for treeNode element</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Default skins for treeNode element</entry>
            <entry>Properties corresponding to CSS parameter</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 selected Node element</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Skin parameters for selected Node element</entry>
            <entry>Properties corresponding to CSS parameter</entry>
          </row>
        </thead>
        <tbody>
          <row>
            <entry>headerBackgroundColor</entry>
            <entry>background-color</entry>
          </row>
          <row>
            <entry>headerBackgroundColor</entry>
            <entry>background-color</entry>
          </row>
          <row>
            <entry>headTextColor</entry>
            <entry>color</entry>
          </row>
        </tbody>
      </tgroup>
    </table>
    <table>
      <title>Skin parameters for mouseovered Node element</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Skin parameters for mouseovered Node element</entry>
            <entry>Properties corresponding to CSS parameter</entry>
          </row>
        </thead>
        <tbody>
          <row>
            <entry>selectControlColor</entry>
            <entry>color</entry>
          </row>
        </tbody>
      </tgroup>
    </table>
    <para>Hence, to change look and feel of all <property>treeNodesAdaptor</property> components on an
      application, change these parameters values.</para>
  </section>
  <section>
    <title>Definition of Custom Style Classes</title>
    <para>The following classes are applied to a node element in three states: default, marked,
      mouseovered:</para>
    <itemizedlist>
      <listitem>rich-tree-node</listitem>
      <listitem>rich-tree-node-selected</listitem>
      <listitem>rich-tree-node-highlighted</listitem>
    </itemizedlist>
    <para>Hence, in order to change an appearance of all <property>treeNodesAdaptor</property> on a page,
      declare and customize the above-mentioned classes in your CSS.</para>
    <para>It is also possible to change look and feel of specific <property>treeNodesAdaptor</property>
      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 <ulink
        url="http://labs.jboss.com/wiki/ExpandCollapsetreeNodesAdaptor">here</ulink>. </para>
  </section>
</section>
