Author: artdaw Date: 2008-02-06 14:17:40 -0500 (Wed, 06 Feb 2008) New Revision: 5882 Modified: trunk/docs/userguide/en/src/main/docbook/included/tree.xml Log: http://jira.jboss.com/jira/browse/RF-1137 - Definition of Custom Style Classes, Events handling verified. Modified: trunk/docs/userguide/en/src/main/docbook/included/tree.xml =================================================================== --- trunk/docs/userguide/en/src/main/docbook/included/tree.xml 2008-02-06 19:16:34 UTC (rev 5881) +++ trunk/docs/userguide/en/src/main/docbook/included/tree.xml 2008-02-06 19:17:40 UTC (rev 5882) @@ -59,9 +59,9 @@ </para> <programlisting role="XML"><![CDATA[... - <rich:tree> - <rich:recursiveTreeNodesAdaptor roots="#{fileSystemBean.sourceRoots}" var="item" nodes="#{item.nodes}" /> - </rich:tree> +<rich:tree> + <rich:recursiveTreeNodesAdaptor roots="#{fileSystemBean.sourceRoots}" var="item" nodes="#{item.nodes}" /> +</rich:tree> ...]]></programlisting> <para> In the second case, it&apos;s necessary to define it with these attributes as @@ -71,12 +71,12 @@ <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}" /> - </rich:treeNode> - ... - </rich:tree> +<rich:tree value="#{library.data}" var="item" > + <rich:treeNode icon="/images/tree/singer.png" > + <h:outputText value="#{item.name}" /> + </rich:treeNode> + ... +</rich:tree> ...]]></programlisting> </section> <section> @@ -372,18 +372,18 @@ </para> <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"> - <h:outputText value="#{item.name}" /> - </rich:treeNode> - <rich:treeNode type="album" iconLeaf="/images/tree/disc.png" icon="/images/tree/disc.png"> - <h:outputText value="#{item.title}" /> - </rich:treeNode> - <rich:treeNode type="song" iconLeaf="/images/tree/song.png" icon="/images/tree/song.png"> - <h:outputText value="#{item.title}" /> - </rich:treeNode> - </rich:tree> +<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"> + <h:outputText value="#{item.name}" /> + </rich:treeNode> + <rich:treeNode type="album" iconLeaf="/images/tree/disc.png" icon="/images/tree/disc.png"> + <h:outputText value="#{item.title}" /> + </rich:treeNode> + <rich:treeNode type="song" iconLeaf="/images/tree/song.png" icon="/images/tree/song.png"> + <h:outputText value="#{item.title}" /> + </rich:treeNode> + </rich:tree> </h:form> ...]]></programlisting> <para>This is a result: </para> @@ -430,7 +430,7 @@ <para> <emphasis role="bold">Example:</emphasis> </para> - <programlisting role="JAVA"><![CDATA[nodeFace="#{data.name != 'param-value' ? 'artist' : 'album'}" ]]></programlisting> + <programlisting role="XML"><![CDATA[nodeFace="#{data.name != 'param-value' ? 'artist' : 'album'}" ]]></programlisting> <para>There are some essential moments in a <emphasis> <property>&quot;nodeFace&quot;</property> </emphasis> attribute usage. For their description it&apos;s necessary to define notions @@ -491,19 +491,19 @@ </para> <programlisting role="XML"><![CDATA[... - <h:form> - <rich:tree style="width:300px" value="#{library.data}" var="item" nodeFace="#{item.type}"> - ... - <rich:treeNode type="album" iconLeaf="/images/tree/album.gif" icon="/images/tree/album.gif" +<h:form> + <rich:tree style="width:300px" value="#{library.data}" var="item" nodeFace="#{item.type}"> + ... + <rich:treeNode type="album" iconLeaf="/images/tree/album.gif" icon="/images/tree/album.gif" rendered="#{item.exist}"> - <h:outputText value="#{item.name}" /> - </rich:treeNode> - <rich:treeNode type="album" iconLeaf="/images/tree/album_absent.gif" icon="/images/tree/album_absent.gif" + <h:outputText value="#{item.name}" /> + </rich:treeNode> + <rich:treeNode type="album" iconLeaf="/images/tree/album_absent.gif" icon="/images/tree/album_absent.gif" rendered="#{not item.exist}"> - <h:outputText value="#{item.name}" /> - </rich:treeNode> - ... - </rich:tree> + <h:outputText value="#{item.name}" /> + </rich:treeNode> + ... + </rich:tree> </h:form> ...]]></programlisting> <para>This is a result: </para> @@ -566,22 +566,22 @@ </para> <programlisting role="XML"><![CDATA[... - <rich:tree ....> - ... - <f:facet name="icon"> - <h:graphicImage value="/images/tree/singer.png "/> - </f:facet> - <f:facet name="iconCollapsed"> - <h:graphicImage value="/images/tree/singer.png " /> - </f:facet> - <f:facet name="iconExpanded"> - <h:graphicImage value="/images/tree/singer.png " /> - </f:facet> - <f:facet name="iconLeaf"> - <h:graphicImage value="/images/tree/song.png " /> - </f:facet> - ... - </rich:tree> +<rich:tree value="#{library.data}" var="item"> + ... + <f:facet name="icon"> + <h:graphicImage value="/images/tree/singer.png "/> + </f:facet> + <f:facet name="iconCollapsed"> + <h:graphicImage value="/images/tree/singer.png " /> + </f:facet> + <f:facet name="iconExpanded"> + <h:graphicImage value="/images/tree/singer.png " /> + </f:facet> + <f:facet name="iconLeaf"> + <h:graphicImage value="/images/tree/song.png " /> + </f:facet> + ... +</rich:tree> ...]]></programlisting> <para> The <emphasis role="bold"> @@ -671,21 +671,21 @@ </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> - </h:form> +<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> +</h:form> ...]]></programlisting> <para>In the example a song from one album can be dragged into other because for the second @@ -803,6 +803,7 @@ </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"> @@ -817,22 +818,6 @@ <entry>rich-tree</entry> <entry>Defines styles for a wrapper &lt;div&gt; element of a tree</entry> </row> - <row> - <entry>rich-tree-node</entry> - <entry>Defines styles for a node of a tree</entry> - </row> - <row> - <entry>rich-tree-node-children</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a child node of a tree</entry> - </row> - <row> - <entry>rich-tree-node-selected</entry> - <entry>Defines styles for a selected node of a tree</entry> - </row> - <row> - <entry>rich-tree-node-highlighted</entry> - <entry>Defines styles for a highlighted node of a tree</entry> - </row> </tbody> </tgroup> </table> @@ -847,7 +832,7 @@ </para> <programlisting role="CSS"><![CDATA[... .rich-tree{ - color: #ff7700; + font-weight:bold; } ...]]></programlisting> @@ -862,7 +847,7 @@ </mediaobject> </figure> - <para>In the example a tree color text was changed.</para> + <para>In the example a tree font weight was changed to bold.</para> <para>Also it’s possible to change styles of particular <emphasis role="bold" @@ -872,10 +857,10 @@ </para> <programlisting role="CSS"><![CDATA[... .myClass{ - background-color: #bdd5f7; + font-weight:bold; } ...]]></programlisting> - <para>The <emphasis><property>&quot;styleClass&quot;</property></emphasis> attribute for <emphasis role="bold" + <para>The <emphasis><property>&quot;highlightedClass&quot;</property></emphasis> attribute for <emphasis role="bold" <para> @@ -895,7 +880,7 @@ </mediaobject> </figure> - <para>As it could be seen on the picture above, background color of tree was changed.</para> + <para>As it could be seen on the picture above, font weight of highlighted text node of a tree was changed to bold.</para> </section> <section>