8:48 a.m.
Author: ochikvina
Date: 2007-11-08 09:48:28 -0500 (Thu, 08 Nov 2007)
New Revision: 3822
Modified:
trunk/docs/userguide/en/src/main/docbook/included/treeNode.desc.xml
trunk/docs/userguide/en/src/main/docbook/included/treeNode.xml
Log:
http://jira.jboss.com/jira/browse/RF-920 - replacing and adding screenshots
Modified: trunk/docs/userguide/en/src/main/docbook/included/treeNode.desc.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/treeNode.desc.xml 2007-11-08
14:11:03 UTC (rev 3821)
+++ trunk/docs/userguide/en/src/main/docbook/included/treeNode.desc.xml 2007-11-08
14:48:28 UTC (rev 3822)
@@ -12,7 +12,7 @@
<title>TreeNode component</title>
<mediaobject>
<imageobject>
- <imagedata fileref="images/tree1.gif"/>
+ <imagedata fileref="images/treeNode.png"/>
</imageobject>
</mediaobject>
</figure>
Modified: trunk/docs/userguide/en/src/main/docbook/included/treeNode.xml
===================================================================
--- trunk/docs/userguide/en/src/main/docbook/included/treeNode.xml 2007-11-08 14:11:03 UTC
(rev 3821)
+++ trunk/docs/userguide/en/src/main/docbook/included/treeNode.xml 2007-11-08 14:48:28 UTC
(rev 3822)
@@ -108,7 +108,7 @@
</section>
<section>
- <title>Look-and-Feel Customization</title>
+ <title>Details of Usage</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="data" on a tree)
happens:</para>
@@ -129,7 +129,7 @@
<title>Nodes output</title>
<mediaobject>
<imageobject>
- <imagedata fileref="images/tree2.gif"/>
+ <imagedata fileref="images/treeNode2.png"/>
</imageobject>
</mediaobject>
</figure>
@@ -166,28 +166,41 @@
</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>
+
+ <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><rich:treeNode></property>
+ </emphasis> components at once:</para>
+
<itemizedlist>
- <listitem>to redefine corresponding skin parameters</listitem>
- <listitem>to add <emphasis>
+ <listitem>
+ <para>Redefine the corresponding skin parameters</para>
+ </listitem>
+
+ <listitem>
+ <para>Add to your style sheets <emphasis>
<property>style classes</property>
- </emphasis> used by the treeNode to your page style
sheets</listitem>
+ </emphasis> used by a <emphasis role="bold">
+ <property><rich:treeNode></property>
+ </emphasis> component</para>
+ </listitem>
</itemizedlist>
</section>
- <section>
- <title>Skin Parameters Redefinition:</title>
+
+ <section id="SPRofTN">
+ <title>Skin Parameters Redefinition</title>
<table>
- <title>Default skins for treeNode element</title>
+ <title>Skin parameters for a node element</title>
<tgroup cols="2">
<thead>
<row>
- <entry>Default skins for treeNode element</entry>
- <entry>Properties corresponding to CSS parameter</entry>
+ <entry>Skin parameters</entry>
+ <entry>CSS properties</entry>
</row>
</thead>
<tbody>
@@ -207,37 +220,37 @@
</tgroup>
</table>
<table>
- <title>Skin parameters for selected Node element</title>
+ <title>Skin parameters for a selected element</title>
<tgroup cols="2">
<thead>
<row>
- <entry>Skin parameters for selected Node element</entry>
- <entry>Properties corresponding to CSS parameter</entry>
+ <entry>Skin parameters</entry>
+ <entry>CSS properties</entry>
</row>
</thead>
<tbody>
<row>
<entry>headerBackgroundColor</entry>
- <entry>background-color</entry>
+ <entry>border-color</entry>
</row>
<row>
- <entry>headerBackgroundColor</entry>
- <entry>background-color</entry>
+ <entry>panelTextColor</entry>
+ <entry>color</entry>
</row>
<row>
- <entry>headTextColor</entry>
+ <entry>selectControlColor</entry>
<entry>color</entry>
</row>
</tbody>
</tgroup>
</table>
<table>
- <title>Skin parameters for mouseovered Node element</title>
+ <title>Skin parameters for a mouseovered element</title>
<tgroup cols="2">
<thead>
<row>
- <entry>Skin parameters for mouseovered Node element</entry>
- <entry>Properties corresponding to CSS parameter</entry>
+ <entry>Skin parameters</entry>
+ <entry>CSS properties</entry>
</row>
</thead>
<tbody>
@@ -248,14 +261,21 @@
</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>On the screenshot, there are classes that are applied to a node element
in three states: default, marked,
- mouseovered:</para>
+ <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/treeNode3.png"/>
+ </imageobject>
+ </mediaobject>
+ </figure>
+
<table>
<title>Classes names that define a node element</title>
<tgroup cols="2">