3:21 a.m.
Author: atsebro
Date: 2008-08-12 04:21:51 -0400 (Tue, 12 Aug 2008)
New Revision: 10040
Modified:
trunk/docs/userguide/en/src/main/docbook/included/tree.xml
Log:
RF-3819: Documenting. Tree built-in drag-and-drop.
Modified: trunk/docs/userguide/en/src/main/docbook/included/tree.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/tree.xml 2008-08-12 08:14:47 UTC
(rev 10039)
+++ trunk/docs/userguide/en/src/main/docbook/included/tree.xml 2008-08-12 08:21:51 UTC
(rev 10040)
@@ -1,76 +1,76 @@
<?xml version="1.0" encoding="UTF-8"?>
<section>
- <sectioninfo>
- <keywordset>
- <keyword>presentation of data</keyword>
- <keyword>rich:tree</keyword>
- <keyword>HtmlTree</keyword>
- </keywordset>
- </sectioninfo>
+ <sectioninfo>
+ <keywordset>
+ <keyword>presentation of data</keyword>
+ <keyword>rich:tree</keyword>
+ <keyword>HtmlTree</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.Tree</entry>
- </row>
- <row>
- <entry>component-class</entry>
- <entry>org.richfaces.component.html.HtmlTree</entry>
- </row>
- <row>
- <entry>component-family</entry>
- <entry>org.richfaces.Tree</entry>
- </row>
- <row>
- <entry>renderer-type</entry>
- <entry>org.richfaces.TreeRenderer</entry>
- </row>
- <row>
- <entry>tag-class</entry>
- <entry>org.richfaces.taglib.TreeTag</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
+ <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.Tree</entry>
+ </row>
+ <row>
+
<entry>component-class</entry>
+
<entry>org.richfaces.component.html.HtmlTree</entry>
+ </row>
+ <row>
+
<entry>component-family</entry>
+
<entry>org.richfaces.Tree</entry>
+ </row>
+ <row>
+
<entry>renderer-type</entry>
+
<entry>org.richfaces.TreeRenderer</entry>
+ </row>
+ <row>
+ <entry>tag-class</entry>
+
<entry>org.richfaces.taglib.TreeTag</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
- <section>
- <title>Creating the Component with a Page Tag</title>
- <para>There are two ways to set up a tree: 1) with <emphasis
role="bold">
- <property><rich:recursiveTreeNodesAdaptor></property>
- </emphasis> or <emphasis role="bold">
- <property><rich:treeNodesAdaptor></property>
- </emphasis> 2) and without them. The first method allows to
omit<emphasis>
- <property>"value"</property>
- </emphasis> and <emphasis>
- <property>"var"</property>
- </emphasis> attributes definition as follows: </para>
+ <section>
+ <title>Creating the Component with a Page Tag</title>
+ <para>There are two ways to set up a tree: 1) with <emphasis
role="bold">
+
<property><rich:recursiveTreeNodesAdaptor></property>
+ </emphasis> or <emphasis
role="bold">
+
<property><rich:treeNodesAdaptor></property>
+ </emphasis> 2) and without them. The first method
allows to omit<emphasis>
+
<property>"value"</property>
+ </emphasis> and <emphasis>
+
<property>"var"</property>
+ </emphasis> attributes definition as follows:
</para>
- <para>
- <emphasis role="bold">Example:</emphasis>
- </para>
+ <para>
+ <emphasis
role="bold">Example:</emphasis>
+ </para>
- <programlisting role="XML"><![CDATA[...
+ <programlisting role="XML"><![CDATA[...
<rich:tree>
<rich:recursiveTreeNodesAdaptor roots="#{fileSystemBean.sourceRoots}"
var="item" nodes="#{item.nodes}" />
</rich:tree>
...]]></programlisting>
- <para> The second way requires defining some attributes, as
- it's shown in the example: </para>
+ <para> The second way requires defining some attributes, as
it's shown
+ in the example: </para>
- <para>
- <emphasis role="bold">Example:</emphasis>
- </para>
- <programlisting role="XML"><![CDATA[...
+ <para>
+ <emphasis
role="bold">Example:</emphasis>
+ </para>
+ <programlisting role="XML"><![CDATA[...
<rich:tree value="#{library.data}" var="item" >
<rich:treeNode icon="/images/tree/singer.png" >
<h:outputText value="#{item.name}" />
@@ -78,19 +78,19 @@
...
</rich:tree>
...]]></programlisting>
- </section>
- <section>
- <title>Creating the Component Dynamically Using Java</title>
+ </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.HtmlTree;
+ <para>
+ <emphasis
role="bold">Example:</emphasis>
+ </para>
+ <programlisting role="JAVA"><![CDATA[import
org.richfaces.component.html.HtmlTree;
...
HtmlTree myTree = new HtmlTree();
...]]></programlisting>
- </section>
- <!--section>
+ </section>
+ <!--section>
<title>Details of Usage</title>
<para>As it has been mentioned <link
linkend="tree">above</link> the <emphasis role="bold">
<property><rich:tree></property>
@@ -309,71 +309,76 @@
</section-->
- <section>
- <title>Details of Usage</title>
- <para>As it has been mentioned <link
linkend="tree">above</link> the <emphasis role="bold">
- <property><rich:tree></property>
- </emphasis> component allows rendering any tree-like data
model.</para>
- <para>The component interacts with data model via
- <code>"TreeNode"</code> interface (<ulink
-
url="http://labs.jboss.com/file-access/default/members/jbossrichface...
- >org.richfaces.model.TreeNode</ulink>) that is used for tree nodes
representation. The <emphasis>
- <property>"value"</property>
- </emphasis> attribute of the <emphasis role="bold">
- <property><rich:tree></property>
- </emphasis> component contains a nodes structure defined in a bean property.
The property
- keeps a structure of objects that implements
<code>"TreeNode"</code>
- interface.</para>
- <para><emphasis role="bold">
- <property><rich:treeNode></property>
- </emphasis> has a property
- <property>"data"</property> (see <ulink
-
url="http://labs.jboss.com/file-access/default/members/jbossrichface...
- >org.richfaces.model.TreeNode</ulink>). Data contained in the property
is placed in a
- request scope variable, which name is defined with <emphasis>
- <property>"var"</property>
- </emphasis> attribute for the <emphasis role="bold">
- <property><rich:tree></property>
- </emphasis> component.</para>
- <para>You can develop and use your own pattern of the
- <code>"TreeNode"</code> interface or use a default
implementation,
- which is defined with a default class
<code>"TreeNodeImpl"</code>
- (<ulink
-
url="http://labs.jboss.com/file-access/default/members/jbossrichface...
- >org.richfaces.model.TreeNodeImpl</ulink>).</para>
- <para>There is a
<code>"XmlTreeDataBuilder"</code> class (<ulink
-
url="http://labs.jboss.com/file-access/default/members/jbossrichface...
- >org.richfaces.component.xml.XmlTreeDataBuilder</ulink>) that allows
transforming XML into
- structures of objects containing
<code>"XmlNodeData"</code> (<ulink
-
url="http://labs.jboss.com/file-access/default/members/jbossrichface...
- >org.richfaces.component.xml.XmlNodeData</ulink>) instances as data,
which could be
- represented by the <emphasis role="bold">
- <property><rich:tree></property>
- </emphasis> component.</para>
- <para>It's possible to define a visual representation of a node data
model (to define a
- node icon) and its behavior in correspondence with the data contained in this node
(with a value of
- the <emphasis>
- <property>"var"</property>
- </emphasis> attribute). The node behavior is defined by the components
nested into the <emphasis
- role="bold">
- <property><rich:treeNode></property>
- </emphasis> (e.g. links or buttons). For these purposes you should use
<emphasis>
- <property>"nodeFace"</property>
- </emphasis> attribute. For each tree node a value of <emphasis>
- <property>"nodeFace"</property>
- </emphasis> attribute is evaluated and <emphasis
role="bold">
- <property><rich:treeNode></property>
- </emphasis> with a value of <emphasis>
- <property>"type"</property>
- </emphasis> attribute equal to a value of <emphasis>
- <property>"nodeFace"</property>
- </emphasis> is used for node representation. See an example
below.</para>
+ <section>
+ <title>Details of Usage</title>
+ <para>As it has been mentioned <link
linkend="tree">above</link> the <emphasis
+ role="bold">
+
<property><rich:tree></property>
+ </emphasis> component allows rendering any tree-like
data model.</para>
+ <para>The component interacts with data model via
+
<code>"TreeNode"</code> interface (<ulink
+
url="http://labs.jboss.com/file-access/default/members/jbossrichface...
+ >org.richfaces.model.TreeNode</ulink>)
that is used for tree
+ nodes representation. The <emphasis>
+
<property>"value"</property>
+ </emphasis> attribute of the <emphasis
role="bold">
+
<property><rich:tree></property>
+ </emphasis> component contains a nodes structure
defined in a bean
+ property. The property keeps a structure of objects that
implements
+
<code>"TreeNode"</code> interface.</para>
+ <para><emphasis role="bold">
+
<property><rich:treeNode></property>
+ </emphasis> has a property
+ <property>"data"</property>
(see <ulink
+
url="http://labs.jboss.com/file-access/default/members/jbossrichface...
+ >org.richfaces.model.TreeNode</ulink>).
Data contained in
+ the property is placed in a request scope variable, which
name is
+ defined with <emphasis>
+
<property>"var"</property>
+ </emphasis> attribute for the <emphasis
role="bold">
+
<property><rich:tree></property>
+ </emphasis> component.</para>
+ <para>You can develop and use your own pattern of the
+
<code>"TreeNode"</code> interface or use a
+ default implementation, which is defined with a default
class
+
<code>"TreeNodeImpl"</code> (<ulink
+
url="http://labs.jboss.com/file-access/default/members/jbossrichface...
+
>org.richfaces.model.TreeNodeImpl</ulink>).</para>
+ <para>There is a
<code>"XmlTreeDataBuilder"</code> class
+ (<ulink
+
url="http://labs.jboss.com/file-access/default/members/jbossrichface...
+
>org.richfaces.component.xml.XmlTreeDataBuilder</ulink>)
+ that allows transforming XML into structures of objects
containing
+
<code>"XmlNodeData"</code> (<ulink
+
url="http://labs.jboss.com/file-access/default/members/jbossrichface...
+
>org.richfaces.component.xml.XmlNodeData</ulink>) instances
+ as data, which could be represented by the <emphasis
role="bold">
+
<property><rich:tree></property>
+ </emphasis> component.</para>
+ <para>It's possible to define a visual representation
of a node data
+ model (to define a node icon) and its behavior in
correspondence with
+ the data contained in this node (with a value of the
<emphasis>
+
<property>"var"</property>
+ </emphasis> attribute). The node behavior is defined
by the components
+ nested into the <emphasis role="bold">
+
<property><rich:treeNode></property>
+ </emphasis> (e.g. links or buttons). For these
purposes you should use <emphasis>
+
<property>"nodeFace"</property>
+ </emphasis> attribute. For each tree node a value of
<emphasis>
+
<property>"nodeFace"</property>
+ </emphasis> attribute is evaluated and <emphasis
role="bold">
+
<property><rich:treeNode></property>
+ </emphasis> with a value of <emphasis>
+
<property>"type"</property>
+ </emphasis> attribute equal to a value of
<emphasis>
+
<property>"nodeFace"</property>
+ </emphasis> is used for node representation. See an
example below.</para>
- <para id="example">
- <emphasis role="bold">Example:</emphasis>
- </para>
+ <para id="example">
+ <emphasis
role="bold">Example:</emphasis>
+ </para>
- <programlisting role="XML"><![CDATA[...
+ <programlisting role="XML"><![CDATA[...
<h:form>
<rich:tree style="width:300px" value="#{library.data}"
var="item" nodeFace="#{item.type}">
<rich:treeNode type="artist"
iconLeaf="/images/tree/singer.png" icon="/images/tree/singer.png">
@@ -388,111 +393,132 @@
</rich:tree>
</h:form>
...]]></programlisting>
- <para>This is a result: </para>
- <figure>
- <title>The <emphasis>
- <property>"nodeFace"</property>
- </emphasis> attribute usage</title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/tree2.png"/>
- </imageobject>
- </mediaobject>
- </figure>
- <para>In the example above, when each node of data model is processed, data
contained in the <code>"data"</code> property
- of
- <property>"TreeNode"</property> interface is assigned
to a request scope variable, which name is defined with <emphasis>
- <property>"var"</property>
- </emphasis> attribute. The value of the <emphasis>
- <property>"nodeFace"</property>
- </emphasis> attribute is evaluated in correspondence with the data assigned
to the <emphasis>
- <property>"var"</property>
- </emphasis> attribute. The corresponding <emphasis
role="bold"><property><rich:treeNode></property></emphasis>
component (with a value of <emphasis>
- <property>"type"</property>
- </emphasis> attribute equal to a value of <emphasis>
- <property>"nodeFace"</property>
- </emphasis>) is used for the node representation. For example, during data
model processing, an object with a name "Chris
- Rea" was inserted in the <emphasis>
- <property>"var"</property>
- </emphasis> attribute. Then the value of <emphasis>
- <property>"nodeFace"</property>
- </emphasis> attribute was evaluated as
<code>"artist"</code>. Thus, for the node
- representation the <emphasis role="bold">
- <property><rich:treeNode></property>
- </emphasis> with <emphasis>
- <property>"type"</property>
- </emphasis> equal to "<code>artist</code>" was
used.</para>
- <para>You can also assign an EL-expression as value of the <emphasis>
- <property>"nodeFace"</property>
- </emphasis> attribute. See an example below: </para>
- <para>
- <emphasis role="bold">Example:</emphasis>
- </para>
- <programlisting role="JAVA"><![CDATA[
+ <para>This is a result: </para>
+ <figure>
+ <title>The <emphasis>
+
<property>"nodeFace"</property>
+ </emphasis> attribute usage</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata
fileref="images/tree2.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para>In the example above, when each node of data model is
processed, data
+ contained in the
<code>"data"</code> property of
+
<property>"TreeNode"</property> interface
+ is assigned to a request scope variable, which name is
defined with <emphasis>
+
<property>"var"</property>
+ </emphasis> attribute. The value of the
<emphasis>
+
<property>"nodeFace"</property>
+ </emphasis> attribute is evaluated in correspondence
with the data
+ assigned to the <emphasis>
+
<property>"var"</property>
+ </emphasis> attribute. The corresponding <emphasis
role="bold">
+
<property><rich:treeNode></property>
+ </emphasis> component (with a value of
<emphasis>
+
<property>"type"</property>
+ </emphasis> attribute equal to a value of
<emphasis>
+
<property>"nodeFace"</property>
+ </emphasis>) is used for the node representation. For
example, during
+ data model processing, an object with a name
"Chris
+ Rea" was inserted in the <emphasis>
+
<property>"var"</property>
+ </emphasis> attribute. Then the value of
<emphasis>
+
<property>"nodeFace"</property>
+ </emphasis> attribute was evaluated as
+
<code>"artist"</code>. Thus, for the node
+ representation the <emphasis role="bold">
+
<property><rich:treeNode></property>
+ </emphasis> with <emphasis>
+
<property>"type"</property>
+ </emphasis> equal to
"<code>artist</code>" was used.</para>
+ <para>You can also assign an EL-expression as value of the
<emphasis>
+
<property>"nodeFace"</property>
+ </emphasis> attribute. See an example below:
</para>
+ <para>
+ <emphasis
role="bold">Example:</emphasis>
+ </para>
+ <programlisting role="JAVA"><![CDATA[
nodeFace="#{data.name != 'param-value' ? 'artist' :
'album'}"
]]></programlisting>
- <para>There are some essential points in a <emphasis>
- <property>"nodeFace"</property>
- </emphasis> attribute usage: you need to define notions for
<property>typeless</property> and a <property>default</property>
nodes.
- </para>
+ <para>There are some essential points in a <emphasis>
+
<property>"nodeFace"</property>
+ </emphasis> attribute usage: you need to define
notions for
+ <property>typeless</property> and a
+ <property>default</property> nodes.
</para>
- <para>The <property>typeless node</property> is the first
<emphasis role="bold">
- <property><rich:treeNode></property>
- </emphasis> component (from all children nodes nested to the <emphasis
role="bold">
- <property><rich:tree></property>
- </emphasis> component) with not defined <emphasis>
- <property>"type"</property>
- </emphasis> attribute and defined <emphasis>
- <property>"rendered"</property>
- </emphasis> attribute. The <property>typeless node</property> is
used for representation when <emphasis>
- <property>"nodeFace"</property>
- </emphasis> attribute is null.</para>
- <para><property>Default node</property> has the following interior
presentation:</para>
- <para>
- <emphasis role="bold">Example:</emphasis>
- </para>
- <programlisting role="XML"><![CDATA[...
+ <para>The <property>typeless node</property> is the
first <emphasis role="bold">
+
<property><rich:treeNode></property>
+ </emphasis> component (from all children nodes nested
to the <emphasis
+ role="bold">
+
<property><rich:tree></property>
+ </emphasis> component) with not defined
<emphasis>
+
<property>"type"</property>
+ </emphasis> attribute and defined <emphasis>
+
<property>"rendered"</property>
+ </emphasis> attribute. The <property>typeless
node</property> is used
+ for representation when <emphasis>
+
<property>"nodeFace"</property>
+ </emphasis> attribute is null.</para>
+ <para><property>Default node</property> has the
following interior presentation:</para>
+ <para>
+ <emphasis
role="bold">Example:</emphasis>
+ </para>
+ <programlisting role="XML"><![CDATA[...
<h:outputText value="#{varAttributeName}">
...]]></programlisting>
- <para>
-
<emphasis><property>"varAttributeName"</property></emphasis>
is a value for <emphasis>
- <property>"var"</property>
- </emphasis> attribute. </para>
- <para><property>Default node</property> is used in the following
cases:</para>
- <itemizedlist>
- <listitem><para><emphasis>
- <property>"nodeFace"</property>
- </emphasis> attribute is defined, but its value isn't equal to any
<emphasis>
- <property>"type"</property>
- </emphasis> attribute value from all children
nodes;</para></listitem>
- <listitem><para><emphasis>
- <property>"nodeFace"</property>
- </emphasis> attribute is defined and its value is equal to a value of some
<emphasis>
- <property>"type"</property>
- </emphasis> attribute from all children nodes, but the value of
<emphasis>
- <property>"rendered"</property>
- </emphasis> attribute for this node is
-
<property>"false"</property>.</para></listitem>
- </itemizedlist>
- <para>There is also one thing that has to be remembered using
<emphasis>
- <property>"type"</property>
- </emphasis> and <emphasis>
- <property>"rendered"</property>
- </emphasis> attributes: it's possible to define several <emphasis
role="bold">
- <property><rich:treeNode></property>
- </emphasis> components with equal values of <emphasis>
- <property>"type"</property>
- </emphasis> attribute and different values of <emphasis>
- <property>"rendered"</property>
- </emphasis> attribute. It provides a possibility to define different
representation styles for the
- same node types. In the example with artists and their albums (see <link
linkend="example"
- >above</link>) it's possible to represent albums that are
available for sale and
- albums that are not available. Please study the example below:</para>
- <para>
- <emphasis role="bold">Example:</emphasis>
- </para>
+ <para>
+ <emphasis>
+
<property>"varAttributeName"</property>
+ </emphasis> is a value for <emphasis>
+
<property>"var"</property>
+ </emphasis> attribute. </para>
+ <para><property>Default node</property> is used in
the following cases:</para>
+ <itemizedlist>
+ <listitem>
+ <para><emphasis>
+
<property>"nodeFace"</property>
+ </emphasis> attribute is defined,
but its value
+ isn't equal to any
<emphasis>
+
<property>"type"</property>
+ </emphasis> attribute value from
all children
+ nodes;</para>
+ </listitem>
+ <listitem>
+ <para><emphasis>
+
<property>"nodeFace"</property>
+ </emphasis> attribute is defined
and its value is
+ equal to a value of some
<emphasis>
+
<property>"type"</property>
+ </emphasis> attribute from all
children nodes, but
+ the value of <emphasis>
+
<property>"rendered"</property>
+ </emphasis> attribute for this
node is
+
<property>"false"</property>.</para>
+ </listitem>
+ </itemizedlist>
+ <para>There is also one thing that has to be remembered using
<emphasis>
+
<property>"type"</property>
+ </emphasis> and <emphasis>
+
<property>"rendered"</property>
+ </emphasis> attributes: it's possible to
define several
+ <emphasis role="bold">
+
<property><rich:treeNode></property>
+ </emphasis> components with equal values of
<emphasis>
+
<property>"type"</property>
+ </emphasis> attribute and different values of
<emphasis>
+
<property>"rendered"</property>
+ </emphasis> attribute. It provides a possibility to
define different
+ representation styles for the same node types. In the
example with
+ artists and their albums (see <link
linkend="example">above</link>)
+ it's possible to represent albums that are
available for sale
+ and albums that are not available. Please study the example
below:</para>
+ <para>
+ <emphasis
role="bold">Example:</emphasis>
+ </para>
- <programlisting role="XML"><![CDATA[...
+ <programlisting role="XML"><![CDATA[...
<h:form>
<rich:tree style="width:300px" value="#{library.data}"
var="item" nodeFace="#{item.type}">
...
@@ -508,64 +534,78 @@
</rich:tree>
</h:form>
...]]></programlisting>
- <para>This is a result of the code: </para>
- <figure>
- <title>The <emphasis>
- <property>"type"</property>
- </emphasis> and the <emphasis>
- <property>"rendered"</property>
- </emphasis> attributes usage</title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/tree4.png"/>
- </imageobject>
- </mediaobject>
- </figure>
- <para>In the example the <emphasis role="bold">
- <property><rich:treeNode></property>
- </emphasis> components has equal values of the <emphasis>
- <property>"type"</property>
- </emphasis> attribute. Depending on value of the <emphasis>
- <property>"rendered"</property>
- </emphasis> attribute the corresponding <emphasis
role="bold">
- <property><rich:treeNode></property>
- </emphasis> component is selected for node representation. If an album is
available for sale
- the value of the <emphasis>
- <property>"rendered"</property>
- </emphasis> for the first <emphasis>
- <property><rich:treeNode></property>
- </emphasis> component is "true", for the second one is
- "false". Thus, the first <emphasis
role="bold">
- <property><rich:treeNode></property>
- </emphasis> is selected for node representation. </para>
- <para>Tree node can be run in tree modes. Modes can be specified with
<emphasis>
- <property>"switchType"</property>
- </emphasis> attribute for<emphasis role="bold">
- <property><rich:tree></property>
- </emphasis> component.</para>
- <itemizedlist>
- <listitem><para><code>Ajax</code> (default value) - Ajax
submission is used performing the functionality.
-Note, that for collapse/expand operations an Ajax request is sent to the server and it
can cause a short delay.</para></listitem>
- <listitem><para><code>Server</code> - regular form of
submission request is used.</para></listitem>
- <listitem><para><code>Client</code> – all operations are
performed totally on the client; no interaction with a server is involved. Full page
content is reloaded after every action.</para></listitem>
- </itemizedlist>
- <para> The <emphasis>
- <property>"icon"</property>
- </emphasis>, <emphasis>
- <property>"iconCollapsed"</property>
- </emphasis>, <emphasis>
- <property>"iconExpanded"</property>
- </emphasis>, <emphasis>
- <property>"iconLeaf"</property>
- </emphasis> attributes set the icons' images for the component. You
can also define icons using facets with the same names.
+ <para>This is a result of the code: </para>
+ <figure>
+ <title>The <emphasis>
+
<property>"type"</property>
+ </emphasis> and the <emphasis>
+
<property>"rendered"</property>
+ </emphasis> attributes usage</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata
fileref="images/tree4.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <para>In the example the <emphasis
role="bold">
+
<property><rich:treeNode></property>
+ </emphasis> components has equal values of the
<emphasis>
+
<property>"type"</property>
+ </emphasis> attribute. Depending on value of the
<emphasis>
+
<property>"rendered"</property>
+ </emphasis> attribute the corresponding <emphasis
role="bold">
+
<property><rich:treeNode></property>
+ </emphasis> component is selected for node
representation. If an album
+ is available for sale the value of the <emphasis>
+
<property>"rendered"</property>
+ </emphasis> for the first <emphasis>
+
<property><rich:treeNode></property>
+ </emphasis> component is "true",
for the second one
+ is "false". Thus, the first <emphasis
role="bold">
+
<property><rich:treeNode></property>
+ </emphasis> is selected for node representation.
</para>
+ <para>Tree node can be run in tree modes. Modes can be
specified with <emphasis>
+
<property>"switchType"</property>
+ </emphasis> attribute for<emphasis
role="bold">
+
<property><rich:tree></property>
+ </emphasis> component.</para>
+ <itemizedlist>
+ <listitem>
+ <para><code>Ajax</code>
(default value) - Ajax submission is
+ used performing the functionality.
Note, that for
+ collapse/expand operations an Ajax
request is sent
+ to the server and it can cause a short
+ delay.</para>
+ </listitem>
+ <listitem>
+ <para><code>Server</code> -
regular form of submission
+ request is used.</para>
+ </listitem>
+ <listitem>
+ <para><code>Client</code> – all
operations are performed
+ totally on the client; no interaction
with a
+ server is involved. Full page content
is reloaded
+ after every action.</para>
+ </listitem>
+ </itemizedlist>
+ <para> The <emphasis>
+
<property>"icon"</property>
+ </emphasis>, <emphasis>
+
<property>"iconCollapsed"</property>
+ </emphasis>, <emphasis>
+
<property>"iconExpanded"</property>
+ </emphasis>, <emphasis>
+
<property>"iconLeaf"</property>
+ </emphasis> attributes set the icons' images
for the
+ component. You can also define icons using facets with the
same names.
+ If the facets are defined, the corresponding attributes are
ignored
+ and facets' content is used as icons. By default
the width of
+ a rendered facet area is 16px. </para>
+ <para>
+ <emphasis
role="bold">Example:</emphasis>
+ </para>
-If the facets are defined, the corresponding attributes are ignored and
- facets' content is used as icons. By default the width of a rendered facet
area is 16px. </para>
- <para>
- <emphasis role="bold">Example:</emphasis>
- </para>
-
- <programlisting role="XML"><![CDATA[...
+ <programlisting role="XML"><![CDATA[...
<rich:tree value="#{library.data}" var="item">
...
<f:facet name="icon">
@@ -583,333 +623,408 @@
...
</rich:tree>
...]]></programlisting>
-
- <para> The <emphasis role="bold">
- <property><rich: tree></property>
- </emphasis> component can be used together with <emphasis
role="bold">
- <property><rich: treeNodeAdaptor></property>
- </emphasis>. In this case there is no need to specify the attributes
<emphasis>
- <property>"value"</property>
- </emphasis> and <emphasis>
- <property>"var"</property>
- </emphasis>. Besides, visual representation shouldn't be defined right
in the
- <property>tree</property>. In this case a <emphasis
role="bold"><property><rich:
tree></property></emphasis> tag is applied mainly for defining common
- attributes such as <emphasis>
- <property>"ajaxSubmitSelection"</property>
- </emphasis> etc. </para>
- <para>
- Information about the
<emphasis><property>"process"</property></emphasis>
attribute usage you can find <link linkend="process">here</link>.
- </para>
- <tip>
- <title>Tip:</title>
- <para>
- <emphasis><property>"rowKeyConverter"</property></emphasis>
support for the <emphasis
role="bold"><property><rich:tree></property></emphasis>
is pending!
- </para>
- </tip>
- </section>
- <section>
- <title>Built-In Drag and Drop</title>
- <para>The <emphasis role="bold">
- <property><rich: tree></property>
- </emphasis> component functionality provides a built-in support for Drag and
Drop operations.
- The main usage principles are similar to RichFaces DnD wrapper components. Hence,
to get
- additional information on the issue, read the corresponding chapters:<link
linkend="dndParam"
- >"rich:dndParam"</link>, <link
linkend="dragSupport"
- >"rich:dragSupport"</link>, <link
linkend="dragIndicator"
- >"rich:dragIndicator"</link>, <link
linkend="dropSupport"
- >"rich:dropSupport"</link>. Since
<property>treeNodes</property>can be assigned as
- Drag, Drop or Drag-and-Drop elements, a <property>tree</property> can
include the following
- groups of attributes.</para>
- <table>
- <title>Drag group</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Attribute Name</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>dragValue</entry>
- <entry>Element value drag passed into processing after a Drop
event</entry>
- </row>
+ <para> The <emphasis role="bold">
+ <property><rich:
tree></property>
+ </emphasis> component can be used together with
<emphasis role="bold">
+ <property><rich:
treeNodeAdaptor></property>
+ </emphasis>. In this case there is no need to specify
the attributes <emphasis>
+
<property>"value"</property>
+ </emphasis> and <emphasis>
+
<property>"var"</property>
+ </emphasis>. Besides, visual representation
shouldn't be
+ defined right in the <property>tree</property>.
In this case a
+ <emphasis role="bold">
+ <property><rich:
tree></property>
+ </emphasis> tag is applied mainly for defining common
attributes such
+ as <emphasis>
+
<property>"ajaxSubmitSelection"</property>
+ </emphasis> etc. </para>
+ <para> Information about the <emphasis>
+
<property>"process"</property>
+ </emphasis> attribute usage you can find <link
linkend="process"
+ >here</link>. </para>
+ <tip>
+ <title>Tip:</title>
+ <para>
+ <emphasis>
+
<property>"rowKeyConverter"</property>
+ </emphasis> support for the <emphasis
role="bold">
+
<property><rich:tree></property>
+ </emphasis> is pending! </para>
+ </tip>
+ </section>
-
-
- <row>
- <entry>dragListener</entry>
- <entry>A listener that processes a Drag event</entry>
- </row>
- <row>
- <entry>dragIndicator</entry>
- <entry>Id of a component that is used as a drag pointer during the drag
operation</entry>
- </row>
- <row>
- <entry>dragType</entry>
- <entry>Defines a drag zone type that is used for definition of a
dragged element, which
- can be accepted by a drop zone</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
- <table>
- <title>Drop group</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Attribute Name</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>dropValue</entry>
- <entry>Element value drop passed into processing after Drop events
</entry>
- </row>
-
- <row>
- <entry>dropListener</entry>
- <entry>A listener that processes a Drop event. </entry>
- </row>
- <row>
- <entry>acceptedTypes</entry>
- <entry>Drag zone names are allowed to be processed with a Drop
zone</entry>
- </row>
- <row>
- <entry>typeMapping</entry>
- <entry>Drag zones names mapping on the corresponding drop zone
parameters</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
-
- <para>Please see an example below.</para>
-
- <para>
- <emphasis role="bold">Example:</emphasis>
- </para>
-
- <programlisting role="XML"><![CDATA[...
+ <section id="tsebro" role="updated">
+ <title>Built-In Drag and Drop</title>
+ <para>Words "built-in" in this context mean,
+ that <emphasis
role="bold"><property><rich:tree></property></emphasis>
component has its own attributes, that provide
<property>drag-and-drop</property> capability.
+ These attributes can be divided into two groups: those ones
which provide <property>drag</property> and those which provide
<property>drop</property> operations (see the tables below).
+ </para>
+
+ <table>
+ <title>Drag group</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Attribute
Name</entry>
+
<entry>Description</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+
<entry>dragValue</entry>
+ <entry>Element value
drag passed into processing after a Drop event</entry>
+ </row>
+ <row>
+
<entry>dragListener</entry>
+ <entry>A listener that
processes a Drag event</entry>
+ </row>
+ <row>
+
<entry>dragIndicator</entry>
+ <entry>Id of a
component that is used as a drag pointer during the drag
+
operation</entry>
+ </row>
+ <row>
+
<entry>dragType</entry>
+ <entry>Defines a drag
zone type that is used for definition of a dragged element, which
+ can be accepted by
a drop zone</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <table>
+ <title>Drop group</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Attribute
Name</entry>
+
<entry>Description</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+
<entry>dropValue</entry>
+ <entry>Element value
drop passed into processing after Drop events </entry>
+ </row>
+ <row>
+
<entry>dropListener</entry>
+ <entry>A listener that
processes a Drop event. </entry>
+ </row>
+ <row>
+
<entry>acceptedTypes</entry>
+ <entry>Drag zone names
are allowed to be processed with a Drop zone</entry>
+ </row>
+ <row>
+
<entry>typeMapping</entry>
+ <entry>Drag zones names
mapping on the corresponding drop zone parameters</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <para>Consider <property>drag-and-drop</property>
inside a tree.
+ All zones, which are assumed to be dragged, must be marked.
+ In terms of <emphasis
role="bold"><property><rich:tree></property></emphasis>
these zones completely correspond to tree nodes.
+ So, all dragging nodes should be marked with
<emphasis><property>"dragType"</property></emphasis>
attribute, which value must be the same as value for node’s
<emphasis><property>"type"</property></emphasis>
attribute.
+ Then, to mark zone(-s), where the dragging node could be
dropped, pass the type of dragging node to the
<emphasis><property>"acceptedTypes"</property></emphasis>
attribute of the drop zone.
+ It would be good to itemize, that each tree node in the
<emphasis
role="bold"><property><rich:tree></property></emphasis>
component’s structure has its own <emphasis>key</emphasis>.
+ Depending on how the component is used, these keys can be
generated by the component itself or can be taken from the component’s data model.
+ Keys help to identify each node in a tree; key is what
exactly being passing from one node to another in
<property>drag-and-drop</property> operations.
+ Finally, the method binding, that will process
<property>drag-and-drop</property> operation, should be pointed via
<emphasis><property>"dropListener"</property></emphasis>
attribute of the <emphasis
role="bold"><property><rich:tree></property></emphasis>.
+ </para>
+ <para>
+ Chapters "<link linkend="ch1">6.40
<dragIndicator></link>" and "<link
linkend="dndParam">6.39 <dndParam></link>"
describes how to apply visual element, that show some additional information (e.g.
dragging item name) while operating with <property>drag-and-drop</property>.
+ </para>
+ <para>
+ Page code, that describes a tree with built in
<property>drag-and-drop</property> in the way it is considered, is shown
below.
+ </para>
+
+ <para>
+ <emphasis
role="bold">Example:</emphasis>
+ </para>
+
+ <programlisting role="XML"><![CDATA[...
<h:form>
- <rich:tree dragIndicator=":treeDragIndicator"
dropListener="#{libraryAjaxTree.processDrop}" style="width:300px"
value="#{libraryAjaxTree.data}" var="item"
nodeFace="#{item.type}">
- <rich:treeNode type="artist" acceptedTypes="album"
iconLeaf="/images/tree/group.png" icon="/images/tree/group.png">
- <h:outputText value="#{item.name}" />
- </rich:treeNode>
- <rich:treeNode type="album" dragType="album"
acceptedTypes="song" iconLeaf="/images/tree/cd.png"
icon="/images/tree/cd.png">
- <h:outputText value="#{item.title}" />
- <rich:dndParam name="label" type="drag"
value="Album: #{item.title}" />
- </rich:treeNode>
- <rich:treeNode type="song" dragType="song"
iconLeaf="/images/tree/music.png" icon="/images/tree/music.png">
- <h:outputText value="#{item.title}" />
- <rich:dndParam name="label" type="drag"
value="Song: #{item.title}" />
- </rich:treeNode>
+ <rich:tree style="width:300px"
value="#{libraryAjaxTree.data}" nodeFace="#{item.type}"
var="item" dropListener="#{libraryAjaxTree.processDrop}"
dragIndicator=":treeDragIndicator">
+ <rich:treeNode type="artist"
icon="/images/tree/group.png" iconLeaf="/images/tree/group.png"
acceptedTypes="album">
+ <h:outputText value="#{item.name}" />
+ </rich:treeNode>
+ <rich:treeNode type="album" icon="/images/tree/cd.png"
iconLeaf="/images/tree/cd.png" dragType="album"
acceptedTypes="song">
+ <h:outputText value="#{item.title}" />
+ <rich:dndParam name="label" type="drag"
value="Album: #{item.title}" />
+ </rich:treeNode>
+ <rich:treeNode type="song" icon="/images/tree/music.png"
iconLeaf="/images/tree/music.png" dragType="song">
+ <h:outputText value="#{item.title}" />
+ <rich:dndParam name="label" type="drag"
value="Song: #{item.title}" />
+ </rich:treeNode>
</rich:tree>
</h:form>
-...]]>
-</programlisting>
+...]]></programlisting>
+
+ <para>This code renders following tree:</para>
+
+ <figure>
+ <title>DnD operations</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata
fileref="images/tree5.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+
+ </section>
+
+ <section>
+ <title>Events handling</title>
+ <para>Listeners classes that process events on the server side
are defined with
+ the help of:</para>
+ <itemizedlist>
+ <listitem>
+
<para><property>changeExpandListener</property> processes
+ expand/collapse event of a
+
<property>treeNode</property></para>
+ </listitem>
+ <listitem>
+
<para><property>dropListener</property> processes a Drop
+ event</para>
+ </listitem>
+ <listitem>
+
<para><property>dragListener</property> processes a Drag
+ event</para>
+ </listitem>
+ <listitem>
+
<para><property>nodeSelectListener</property> is called
+ during request sending on a node
selecting event
+ (if request sending on this event is
+ defined)</para>
+ </listitem>
+ </itemizedlist>
- <para>
+ <para>Listener methods can be defined using the <link
linkend="treeNodeKF"
+ >following attributes</link> or using
nested tags.</para>
+ <para>Client event attributes are:</para>
+ <itemizedlist>
+ <listitem>
+ <para><emphasis>
+
<property>"onexpand"</property>
+ </emphasis> is a script
expression to invoke when
+ a node is expanded</para>
+ </listitem>
+ <listitem>
+ <para><emphasis>
+
<property>"oncollapse"</property>
+ </emphasis> is a script
expression to invoke when
+ a node is collapsed</para>
+ </listitem>
+ <listitem>
+ <para><emphasis>
+
<property>"ondragexit"</property>
+ </emphasis> is a script
expression to invoke when
+ an element passing out from a tree
zone</para>
+ </listitem>
+ <listitem>
+ <para><emphasis>
+
<property>"ondragstart"</property>
+ </emphasis> is a script
expression to invoke when
+ dragging starts</para>
+ </listitem>
+ <listitem>
+ <para><emphasis>
+
<property>"ondragend"</property>
+ </emphasis> is a script
expression to invoke when
+ dragging ends (a drop
event)</para>
+ </listitem>
+ <listitem>
+ <para><emphasis>
+
<property>"ondragenter"</property>
+ </emphasis>is a script expression
to invoke when a
+ dragged element appears on a
tree</para>
+ </listitem>
+ </itemizedlist>
-In the shown example a song from one album can be dragged into another because attribute
- <code>acceptedTypes="song"</code> defined in the second
<property>treeNode</property>
- with <code>type="album"</code>. Its value is equal to the
value of the<emphasis>
-
<property>"type"</property></emphasis>attribute
defined in the third <property>treeNode</property> (see picture below). An
album can be also
- dragged into <property>treeNode</property> with
<code>type="artist"</code> property.
+ <para>They can be used to add some JavaScript
effects.</para>
-</para>
+ <para> Standart HTML event attributes like<emphasis>
+
<property>"onclick"</property>
+ </emphasis>, <emphasis>
+
<property>"onmousedown"</property>
+ </emphasis>, <emphasis>
+
<property>"onmouseover"</property>
+ </emphasis> etc. can be also used. Event handlers of
a <emphasis
+ role="bold">
+
<property><rich:tree></property>
+ </emphasis> component capture events occured on any
+ <property>tree</property> part. But event
handlers of
+ <property>treeNode</property> capture
events occured on
+ <property>treeNode</property> only,
except for children
+ events. </para>
+ </section>
- <figure>
- <title>DnD operations</title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/tree5.png"/>
- </imageobject>
- </mediaobject>
- </figure>
+ <section>
+ <title>Look-and-Feel Customization</title>
- </section>
- <section>
- <title>Events handling</title>
- <para>Listeners classes that process events on the server side are defined with
the help of:</para>
- <itemizedlist>
- <listitem><para><property>changeExpandListener</property>
processes expand/collapse event of a
<property>treeNode</property></para></listitem>
- <listitem><para><property>dropListener</property> processes
a Drop event</para></listitem>
- <listitem><para><property>dragListener</property> processes
a Drag event</para></listitem>
- <listitem><para><property>nodeSelectListener</property> is
called during request sending on a node selecting event (if request sending on this event
is defined)</para></listitem>
- </itemizedlist>
+ <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>Listener methods can be defined using the <link
linkend="treeNodeKF">following
- attributes</link> or using nested tags.</para>
- <para>Client event attributes are:</para>
- <itemizedlist>
-
<listitem><para><emphasis><property>"onexpand"</property></emphasis>
is a script expression to invoke when a node is expanded</para></listitem>
-
<listitem><para><emphasis><property>"oncollapse"</property></emphasis>
is a script expression to invoke when a node is collapsed</para></listitem>
-
<listitem><para><emphasis><property>"ondragexit"</property></emphasis>
is a script expression to invoke when an element passing out from a tree
zone</para></listitem>
-
<listitem><para><emphasis><property>"ondragstart"</property></emphasis>
is a script expression to invoke when dragging starts</para></listitem>
-
<listitem><para><emphasis><property>"ondragend"</property></emphasis>
is a script expression to invoke when dragging ends (a drop
event)</para></listitem>
-
<listitem><para><emphasis><property>"ondragenter"</property></emphasis>is
a script expression to invoke when a dragged element appears on a
tree</para></listitem>
- </itemizedlist>
+ <para>There are two ways to redefine the appearance of all
<emphasis role="bold">
+
<property><rich:tree></property>
+ </emphasis> components at once:</para>
- <para>They can be used to add some JavaScript effects.</para>
+ <itemizedlist>
+ <listitem>
+ <para>Redefine the corresponding skin
parameters</para>
+ </listitem>
- <para> Standart HTML event attributes
like<emphasis><property>"onclick"</property></emphasis>,
<emphasis>
- <property>"onmousedown"</property>
- </emphasis>, <emphasis>
- <property>"onmouseover"</property>
- </emphasis> etc. can be also used. Event handlers of a <emphasis
role="bold">
- <property><rich:tree></property>
- </emphasis> component capture events occured on any
<property>tree</property> part. But event
- handlers of <property>treeNode</property> capture events occured on
- <property>treeNode</property> only, except for children events.
</para>
- </section>
+ <listitem>
+ <para>Add to your style sheets
<emphasis>
+ <property>style
classes</property>
+ </emphasis> used by a
<emphasis role="bold">
+
<property><rich:tree></property>
+ </emphasis>
component</para>
+ </listitem>
+ </itemizedlist>
+ </section>
- <section>
- <title>Look-and-Feel Customization</title>
+ <section>
+ <title>Skin Parameters Redefinition:</title>
+ <para>There is only one skin parameter for <emphasis
role="bold">
+
<property><rich:tree></property>
+ </emphasis>. As it's a wrapper component for
<emphasis
+ role="bold">
+
<property><rich:treeNode></property>
+ </emphasis> components, look and feel customization
is described in
+ the <link linkend="SPRofTN">corresponding
section</link>.</para>
+ <table>
+ <title>Skin parameters for a wrapper
element</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin
parameters</entry>
+ <entry>CSS
properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+
<entry>overAllBackground</entry>
+ <entry>background-color
</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ </section>
+ <section>
+ <title>Definition of Custom Style Classes</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>
+ <table id="tab_cn7">
+ <title>Classes names that define a component
appearance</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Class name</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>rich-tree</entry>
+ <entry>Defines styles for a
wrapper
+ <div> element of
+ a tree</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
- <para>There are two ways to redefine the appearance of all <emphasis
role="bold">
- <property><rich:tree></property>
- </emphasis> components at once:</para>
+ <para>In order to redefine styles for all <emphasis
role="bold">
+
<property><rich:tree></property>
+ </emphasis> components on a page using CSS,
it's enough to
+ create classes with the same names (possible classes could
be found in
+ the table <link
linkend="tab_cn7">above</link>) and define necessary
+ properties in them. An example is placed
below:</para>
- <itemizedlist>
- <listitem>
- <para>Redefine the corresponding skin parameters</para>
- </listitem>
+ <para>
+ <emphasis
role="bold">Example:</emphasis>
+ </para>
+ <programlisting role="CSS"><![CDATA[...
+ .rich-tree{
+ font-weight:bold;
+}
+...]]></programlisting>
- <listitem>
- <para>Add to your style sheets <emphasis>
- <property>style classes</property>
- </emphasis> used by a <emphasis role="bold">
- <property><rich:tree></property>
- </emphasis> component</para>
- </listitem>
- </itemizedlist>
- </section>
+ <para>This is a result:</para>
- <section>
- <title>Skin Parameters Redefinition:</title>
- <para>There is only one skin parameter for <emphasis
role="bold">
- <property><rich:tree></property>
- </emphasis>. As it's a wrapper component for <emphasis
role="bold">
- <property><rich:treeNode></property>
- </emphasis> components, look and feel customization is described in the
<link
- linkend="SPRofTN">corresponding section</link>.</para>
- <table>
- <title>Skin parameters for a wrapper element</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Skin parameters</entry>
- <entry>CSS properties</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>overAllBackground</entry>
- <entry>background-color </entry>
- </row>
- </tbody>
- </tgroup>
- </table>
- </section>
- <section>
- <title>Definition of Custom Style Classes</title>
-
- <table id="tab_cn7">
- <title>Classes names that define a component appearance</title>
- <tgroup cols="2">
- <thead>
- <row>
- <entry>Class name</entry>
- <entry>Description</entry>
- </row>
- </thead>
- <tbody>
- <row>
- <entry>rich-tree</entry>
- <entry>Defines styles for a wrapper <div> element of a
tree</entry>
- </row>
- </tbody>
- </tgroup>
- </table>
+ <figure>
+ <title>Redefinition styles with predefined
classes</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata
fileref="images/tree_pc.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
- <para>In order to redefine styles for all <emphasis
role="bold">
- <property><rich:tree></property>
- </emphasis> components on a page using CSS, it's enough to create
classes with the
- same names (possible classes could be found in the table <link
linkend="tab_cn7">above</link>) and define necessary properties in
them. An example is placed below:</para>
-
- <para>
- <emphasis role="bold">Example:</emphasis>
- </para>
- <programlisting role="CSS"><![CDATA[...
- .rich-tree{
- font-weight:bold;
-}
-...]]></programlisting>
-
- <para>This is a result:</para>
-
- <figure>
- <title>Redefinition styles with predefined classes</title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/tree_pc.png"/>
- </imageobject>
- </mediaobject>
- </figure>
-
- <para>In the example a tree font weight was changed to bold.</para>
- <para>Also it's possible to change styles of a particular <emphasis
role="bold"
- ><property><rich:tree></property></emphasis>
component. In this case you should create own style classes and use them in corresponding
<emphasis role="bold"
- ><property><rich:tree></property></emphasis>
<property>styleClass</property> attributes. An example is placed
below:</para>
-
- <para>
- <emphasis role="bold">Example:</emphasis>
- </para>
- <programlisting role="CSS"><![CDATA[...
+ <para>In the example a tree font weight was changed to
bold.</para>
+ <para>Also it's possible to change styles of a
particular <emphasis
+ role="bold">
+
<property><rich:tree></property>
+ </emphasis> component. In this case you should create
own style
+ classes and use them in corresponding <emphasis
role="bold">
+
<property><rich:tree></property>
+ </emphasis>
+ <property>styleClass</property> attributes. An
example is placed
+ below:</para>
+
+ <para>
+ <emphasis
role="bold">Example:</emphasis>
+ </para>
+ <programlisting role="CSS"><![CDATA[...
.myClass{
font-weight:bold;
}
-...]]></programlisting>
- <para>The
<emphasis><property>"highlightedClass"</property></emphasis>
attribute for <emphasis role="bold"
- ><property><rich:tree> </property></emphasis> is
defined as it's shown in the example below:</para>
-
- <para>
- <emphasis role="bold">Example:</emphasis>
- </para>
- <programlisting role="XML"><![CDATA[<rich:tree ...
styleClass="myClass"/>
-]]></programlisting>
-
- <para>This is a result:</para>
-
- <figure>
- <title>Redefinition styles with own classes and styleClass
attributes</title>
- <mediaobject>
- <imageobject>
- <imagedata fileref="images/tree_oc.png"/>
- </imageobject>
- </mediaobject>
- </figure>
-
- <para>As it's shown on the picture above, font weight of highlighted
text node of a <property>tree</property> was changed to bold.</para>
- </section>
-
- <section>
- <title>Relevant Resources Links</title>
- <para>
- <ulink
url="http://livedemo.exadel.com/richfaces-demo/richfaces/tree.jsf?c=...
- you can see the example of <emphasis role="bold">
- <property><rich:tree></property>
- </emphasis> usage and sources for the given example. </para>
- <para>How to Expand/Collapse Tree Nodes from code, see <ulink
-
url="http://labs.jboss.com/wiki/ExpandCollapseTreeNodes">her...;.
</para>
- </section>
+...]]></programlisting>
+ <para>The <emphasis>
+
<property>"highlightedClass"</property>
+ </emphasis> attribute for <emphasis
role="bold">
+ <property><rich:tree>
</property>
+ </emphasis> is defined as it's shown in the
example below:</para>
+ <para>
+ <emphasis
role="bold">Example:</emphasis>
+ </para>
+ <programlisting role="XML"><![CDATA[<rich:tree
... styleClass="myClass"/>
+]]></programlisting>
+
+ <para>This is a result:</para>
+
+ <figure>
+ <title>Redefinition styles with own classes and
styleClass attributes</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata
fileref="images/tree_oc.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+
+ <para>As it's shown on the picture above, font weight
of highlighted
+ text node of a <property>tree</property> was
changed to bold.</para>
+ </section>
+
+ <section>
+ <title>Relevant Resources Links</title>
+ <para>
+ <ulink
+
url="http://livedemo.exadel.com/richfaces-demo/richfaces/tree.jsf?c=...
+ >Here</ulink> you can see the example of
<emphasis
+ role="bold">
+
<property><rich:tree></property>
+ </emphasis> usage and sources for the given example.
</para>
+ <para>How to Expand/Collapse Tree Nodes from code, see
<ulink
+
url="http://labs.jboss.com/wiki/ExpandCollapseTreeNodes"
+ >here</ulink>. </para>
+ </section>
+
</section>