[richfaces-svn-commits] JBoss Rich Faces SVN: r5882 - trunk/docs/userguide/en/src/main/docbook/included.
richfaces-svn-commits at lists.jboss.org
richfaces-svn-commits at lists.jboss.org
Wed Feb 6 14:17:41 EST 2008
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'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>"nodeFace"</property>
</emphasis> attribute usage. For their description it'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 <div> 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 <div> 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"
><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>
@@ -872,10 +857,10 @@
</para>
<programlisting role="CSS"><![CDATA[...
.myClass{
- background-color: #bdd5f7;
+ font-weight:bold;
}
...]]></programlisting>
- <para>The <emphasis><property>"styleClass"</property></emphasis> attribute for <emphasis role="bold"
+ <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>
@@ -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>
More information about the richfaces-svn-commits
mailing list