[richfaces-svn-commits] JBoss Rich Faces SVN: r4605 - branches/3.1.x/docs/userguide/en/src/main/docbook/included.

[richfaces-svn-commits at lists.jboss.org]

Author: artdaw
Date: 2007-12-07 14:09:44 -0500 (Fri, 07 Dec 2007)
New Revision: 4605

Modified:
   branches/3.1.x/docs/userguide/en/src/main/docbook/included/contextMenu.xml
Log:
http://jira.jboss.com/jira/browse/RF-1298 - add Look-and-Feel Customization, Skin Parameters Redefinition, Definition of Custom Style Classes

Modified: branches/3.1.x/docs/userguide/en/src/main/docbook/included/contextMenu.xml
===================================================================
--- branches/3.1.x/docs/userguide/en/src/main/docbook/included/contextMenu.xml	2007-12-07 19:09:02 UTC (rev 4604)
+++ branches/3.1.x/docs/userguide/en/src/main/docbook/included/contextMenu.xml	2007-12-07 19:09:44 UTC (rev 4605)
@@ -263,4 +263,122 @@
             </tgroup>
         </table>
     </section>
+    <section>
+        <title>Look-and-Feel Customization</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>
+        <para>There are two ways to redefine the appearance of all <emphasis role="bold">
+            <property>&lt;rich:contextMenu&gt;</property>
+        </emphasis> components at once: <itemizedlist>
+            <listitem>Redefine the corresponding skin parameters</listitem>
+            <listitem> Add to your style sheets style classes used by a <emphasis role="bold">
+                <property>&lt;rich:contextMenu&gt;</property>
+            </emphasis> component</listitem>
+        </itemizedlist>
+        </para>
+    </section>
+    <section>
+        <title>Skin Parameters Redefinition</title>
+        <table>
+            <title>Skin parameters redefinition for a border</title>
+            <tgroup cols="2">
+                <thead>
+                    <row>
+                        <entry>Skin parameters</entry>
+                        <entry>CSS properties</entry>
+                    </row>
+                </thead>
+                <tbody>
+                    <row>
+                        <entry>panelBorderColor</entry>
+                        <entry>border-color</entry>
+                    </row>
+                    <row>
+                        <entry>additionalBackgroundColor</entry>
+                        <entry>background-color</entry>
+                    </row>
+                </tbody>
+            </tgroup>
+        </table>
+        <table>
+            <title>Skin parameters redefinition for a background</title>
+            <tgroup cols="2">
+                <thead>
+                    <row>
+                        <entry>Skin parameters</entry>
+                        <entry>CSS properties</entry>
+                    </row>
+                </thead>
+                <tbody>
+                    <row>
+                        <entry>additionalBackgroundColor</entry>
+                        <entry>border-top-color</entry>
+                    </row>
+                    <row>
+                        <entry>additionalBackgroundColor</entry>
+                        <entry>border-left-color</entry>
+                    </row>
+                    <row>
+                        <entry>additionalBackgroundColor</entry>
+                        <entry>border-right-color</entry>
+                    </row>
+                </tbody>
+            </tgroup>
+        </table>
+    </section>
+    <section>
+        <title>Definition of Custom Style Classes</title>
+        
+        <para>On the screenshot there are classes names that define styles for component elements.</para>
+        
+        
+        <figure>
+            <title>Style classes</title>
+            
+            <mediaobject>
+                <imageobject>
+                    <imagedata fileref="images/contextMenu_classes.png" scalefit="1"/>
+                </imageobject>
+            </mediaobject>
+        </figure>
+        
+        <table>
+            <title>Classes names that define the contextMenu element</title>
+            <tgroup cols="2">
+                <thead>
+                    <row>
+                        <entry>Class name</entry>
+                        <entry>Description</entry>
+                    </row>
+                </thead>
+                <tbody>
+                    <row>
+                        <entry>rich-menu-list-border</entry>
+                        <entry>Defines styles for borders</entry>
+                    </row>
+                    <row>
+                        <entry>rich-menu-list-bg</entry>
+                        <entry>Defines styles for a general background list</entry>
+                    </row>
+                    <row>
+                        <entry>rich-menu-list-strut</entry>
+                        <entry>Defines styles for a wrapper &lt;div&gt; element for a strut of a popup list</entry>
+                    </row>
+                </tbody>
+            </tgroup>
+        </table>
+        <para>In order to redefine styles for all <emphasis role="bold">
+            <property>&lt;rich:contextMenu&gt;</property>
+        </emphasis> components on a page using CSS, it's enough to create classes with the same
+            names and define necessary properties in them. </para>
+        <para>To change styles of particular <emphasis role="bold">
+            <property>&lt;rich:contextMenu&gt;</property>
+        </emphasis> components, define your own style classes in the corresponding <emphasis
+            role="bold">
+            <property>&lt;rich:contextMenu&gt;</property>
+        </emphasis> component attributes.</para> 
+    </section>
 </section>