[richfaces-svn-commits] JBoss Rich Faces SVN: r693 - in trunk/docs/userguide/en: included and 1 other directory.
richfaces-svn-commits at lists.jboss.org
richfaces-svn-commits at lists.jboss.org
Tue May 8 10:42:13 EDT 2007
Author: smukhina
Date: 2007-05-08 10:42:12 -0400 (Tue, 08 May 2007)
New Revision: 693
Added:
trunk/docs/userguide/en/images/menuGroup3.png
trunk/docs/userguide/en/images/menuItem2.png
trunk/docs/userguide/en/images/menuSeparator2.png
Modified:
trunk/docs/userguide/en/included/dropDownMenu.desc.xml
trunk/docs/userguide/en/included/dropDownMenu.xml
trunk/docs/userguide/en/included/menuGroup.desc.xml
trunk/docs/userguide/en/included/menuGroup.xml
trunk/docs/userguide/en/included/menuItem.desc.xml
trunk/docs/userguide/en/included/menuItem.xml
trunk/docs/userguide/en/included/menuSeparator.desc.xml
trunk/docs/userguide/en/included/menuSeparator.xml
Log:
Added: trunk/docs/userguide/en/images/menuGroup3.png
===================================================================
(Binary files differ)
Property changes on: trunk/docs/userguide/en/images/menuGroup3.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: trunk/docs/userguide/en/images/menuItem2.png
===================================================================
(Binary files differ)
Property changes on: trunk/docs/userguide/en/images/menuItem2.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: trunk/docs/userguide/en/images/menuSeparator2.png
===================================================================
(Binary files differ)
Property changes on: trunk/docs/userguide/en/images/menuSeparator2.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Modified: trunk/docs/userguide/en/included/dropDownMenu.desc.xml
===================================================================
--- trunk/docs/userguide/en/included/dropDownMenu.desc.xml 2007-05-08 13:04:47 UTC (rev 692)
+++ trunk/docs/userguide/en/included/dropDownMenu.desc.xml 2007-05-08 14:42:12 UTC (rev 693)
@@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<section>
<sectioninfo>
- - <keywordset>
+ <keywordset>
<keyword>dropDownMenu</keyword>
</keywordset>
</sectioninfo>
Modified: trunk/docs/userguide/en/included/dropDownMenu.xml
===================================================================
--- trunk/docs/userguide/en/included/dropDownMenu.xml 2007-05-08 13:04:47 UTC (rev 692)
+++ trunk/docs/userguide/en/included/dropDownMenu.xml 2007-05-08 14:42:12 UTC (rev 693)
@@ -43,26 +43,18 @@
<section>
<title>Creation on a page</title>
<para>To create the simplest variant on a page use the following syntax:</para>
- <programlisting role="xml">
- <![CDATA[
- ...
- <rich:dropDownMenu value="Item1">
- <!--Nested menu components-->
- </rich:dropDownMenu>
- ...
- ]]>
- </programlisting>
+ <programlisting role="xml"><![CDATA[...
+ <rich:dropDownMenu value="Item1">
+ <!--Nested menu components-->
+ </rich:dropDownMenu>
+...]]></programlisting>
</section>
<section>
<title>Dynamical Creation from Java Code</title>
- <programlisting role="java">
- <![CDATA[
- ...
- org.richfaces.component.html.HtmlDropDownMenu myMenu = new org.richfaces.component.html.HtmlDropDownMenu();
- ...
- ]]>
- </programlisting>
+ <programlisting role="java"><![CDATA[...
+ org.richfaces.component.html.HtmlDropDownMenu myMenu = new org.richfaces.component.html.HtmlDropDownMenu();
+...]]></programlisting>
</section>
<section>
@@ -76,27 +68,19 @@
<para>
Example.
</para>
- <programlisting role="xml">
- <![CDATA[
- ...
- <f:facet name="label">
- <h:graphicImage value="/images/img1.gif"/>
- </f:facet>
- ...
- ]]>
- </programlisting>
+ <programlisting role="xml"><![CDATA[...
+ <f:facet name="label">
+ <h:graphicImage value="/images/img1.gif"/>
+ </f:facet>
+...]]></programlisting>
<para>
Use the "event" attribute to define an event on the representation element that triggers a menu appearance. An example of a menu appearance on a click could be seen below.
</para>
- <programlisting role="xml">
- <![CDATA[
- ...
- <rich:dropDownMenu event="onclick" value="Item1">
- <!--Nested menu components-->
- </rich:dropDownMenu>
- ...
- ]]>
- </programlisting>
+ <programlisting role="xml"><![CDATA[...
+ <rich:dropDownMenu event="onclick" value="Item1">
+ <!--Nested menu components-->
+ </rich:dropDownMenu>
+...]]></programlisting>
<para>
Switching mode could be chosen with the <rich:dropDownMenu> attribute "mode" with three possible parameters.
</para>
@@ -150,15 +134,11 @@
<para>
Example.
</para>
- <programlisting role="xml">
- <![CDATA[
- ...
- <rich:dropDownMenu value="Item1" direction="bottom-right" jointPoint="tr">
- <!—Nested menu components-->
- </rich:dropDownMenu>
- ...
- ]]>
- </programlisting>
+ <programlisting role="xml"><![CDATA[...
+ <rich:dropDownMenu value="Item1" direction="bottom-right" jointPoint="tr">
+ <!--Nested menu components-->
+ </rich:dropDownMenu>
+...]]></programlisting>
<para>
As a result:
</para>
@@ -176,14 +156,11 @@
<para>
Example.
</para>
- <programlisting role="xml">
- <![CDATA[
- ...
- <rich:dropDownMenu value="Item1" direction="bottom-right" jointPoint="tr" horizontalOffset="-15" verticalOffset="0">
- <!-Nested menu components-->
- </rich:dropDownMenu>
- ...
- ]]>
+ <programlisting role="xml"><![CDATA[...
+ <rich:dropDownMenu value="Item1" direction="bottom-right" jointPoint="tr" horizontalOffset="-15" verticalOffset="0">
+ <!--Nested menu components-->
+ </rich:dropDownMenu>
+...]]>
</programlisting>
<para>
As a result:
@@ -197,21 +174,22 @@
</mediaobject>
</figure>
</section>
+
<section>
<title> Look and Feel Customization</title>
- <para>
- Skin parameters redefinition:
- </para>
- <para>
+ <para>
For skinnability implementation, the components use a style class redefinition method. Default style classes are mapped on skin parameters.
</para>
<para>
- There are two ways to redefine appearance of all dropDownMenus at once :
+ There are two ways to redefine appearance of all dropDownMenus at once:
</para>
<itemizedlist>
<listitem><para>Redefine corresponding skin parameters.</para></listitem>
- <listitem><para>Add to user's stylesheets style classes used by a panel.</para></listitem>
- </itemizedlist>
+ <listitem><para>Add to user's stylesheets style classes used by a dropDownMenu.</para></listitem>
+ </itemizedlist>
+ </section>
+ <section>
+ <title>Skin parameters redefinition</title>
<table>
<title>Label Skin parameters redefinition</title>
<tgroup cols="2">
@@ -304,14 +282,14 @@
</tbody>
</tgroup>
</table>
- </section>
+ </section>
<section>
<title> Definition custom style classes </title>
<para>
- On the screenshot, there are classes' names that define an element label.
+ On the screenshot, there are classes names that define element label.
</para>
<figure>
- <title>Classes' names</title>
+ <title>Classes names</title>
<mediaobject>
<imageobject>
<imagedata fileref="images/dropDownMenu4.png" />
@@ -319,7 +297,7 @@
</mediaobject>
</figure>
<table>
- <title>Classes' names that define element label</title>
+ <title>Classes names that define element label</title>
<tgroup cols="2">
<thead>
<row>
@@ -348,10 +326,10 @@
</tgroup>
</table>
<para>
- On the screenshot, there are classes' names that define an element popup.
+ On the screenshot, there are classes names that define element popup.
</para>
<figure>
- <title>Classes' names</title>
+ <title>Classes names</title>
<mediaobject>
<imageobject>
<imagedata fileref="images/dropDownMenu5.png" />
@@ -359,7 +337,7 @@
</mediaobject>
</figure>
<table>
- <title>Classes' names that define element popup</title>
+ <title>Classes names that define element popup</title>
<tgroup cols="2">
<thead>
<row>
@@ -380,10 +358,10 @@
</tgroup>
</table>
<para>
- In order to redefine style for all menus on a page using CSS, it's enough to create classes with the same names and define the necessary properties in them.
+ In order to redefine style for all dropDownMenus on a page using CSS, it's enough to create classes with the same names and define the necessary properties in them.
</para>
<para>
- To change style peculiarities of the particular menus define your own style classes in the corresponding simple toggle panels attributes.
+ To change style peculiarities of the particular dropDownMenus define your own style classes in the corresponding simple dropDownMenu attributes.
</para>
</section>
</section>
Modified: trunk/docs/userguide/en/included/menuGroup.desc.xml
===================================================================
--- trunk/docs/userguide/en/included/menuGroup.desc.xml 2007-05-08 13:04:47 UTC (rev 692)
+++ trunk/docs/userguide/en/included/menuGroup.desc.xml 2007-05-08 14:42:12 UTC (rev 693)
@@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<section>
<sectioninfo>
- - <keywordset>
+ <keywordset>
<keyword>menuGroup</keyword>
</keywordset>
</sectioninfo>
Modified: trunk/docs/userguide/en/included/menuGroup.xml
===================================================================
--- trunk/docs/userguide/en/included/menuGroup.xml 2007-05-08 13:04:47 UTC (rev 692)
+++ trunk/docs/userguide/en/included/menuGroup.xml 2007-05-08 14:42:12 UTC (rev 693)
@@ -43,30 +43,22 @@
<section>
<title>Creation on a page</title>
<para>To create the simplest variant on a page use the following syntax:</para>
- <programlisting role="xml">
- <![CDATA[
- ...
- <rich:dropDownMenu value="Active">
- ...
- <rich: menuGroup value="Active">
- <!—Nested menu components-->
- </rich:menuGroup>
- ...
- </rich:dropDownMenu >
- ...
- ]]>
- </programlisting>
+ <programlisting role="xml"><![CDATA[...
+ <rich:dropDownMenu value="Active">
+ ...
+ <rich: menuGroup value="Active">
+ <!--Nested menu components-->
+ </rich:menuGroup>
+ ...
+ </rich:dropDownMenu >
+...]]></programlisting>
</section>
<section>
<title>Dynamical Creation from Java Code</title>
- <programlisting role="java">
- <![CDATA[
- ...
- org.richfaces.component.html.HtmlMenuGroup myGroup = new org.richfaces.component.html.HtmlMenuGroup ();
- ...
- ]]>
- </programlisting>
+ <programlisting role="java"><![CDATA[...
+ org.richfaces.component.html.HtmlMenuGroup myGroup = new org.richfaces.component.html.HtmlMenuGroup ();
+...]]></programlisting>
</section>
<section>
@@ -80,14 +72,11 @@
<para>
Example.
</para>
- <programlisting role="xml">
- <![CDATA[
- ...
- <f:facet name="icon">
- <h:selectBooleanCheckbox value="#{bean.property}"/>
- </f:facet>
- ...
- ]]>
+ <programlisting role="xml"><![CDATA[...
+ <f:facet name="icon">
+ <h:selectBooleanCheckbox value="#{bean.property}"/>
+ </f:facet>
+...]]>
</programlisting>
<para>
The "iconFolder" and "iconFolderDisabled" attributes are defined for using icons as a folder icon. The "iconFolder" and "iconFolderDisabled" facets use content as folder icon representation.
@@ -107,14 +96,11 @@
<para>
</para>
- <programlisting role="xml">
- <![CDATA[
- ...
- <rich:menuGroup value="Active" direction="left"
- <!--Nested menu components-->
- </rich:menuGroup>
- ...
- ]]>
+ <programlisting role="xml"><![CDATA[...
+ <rich:menuGroup value="Active" direction="left"
+ <!--Nested menu components-->
+ </rich:menuGroup>
+...]]>
</programlisting>
<para>
As a result:
@@ -128,4 +114,155 @@
</mediaobject>
</figure>
</section>
- </section>
+
+ <section>
+ <title> Look and Feel Customization</title>
+ <para>
+ For skinnability implementation, the components use a style class redefinition method. Default style classes are mapped on skin parameters.
+ </para>
+ <para>
+ There are two ways to redefine appearance of all menuGroups at once:
+ </para>
+ <itemizedlist>
+ <listitem><para>Redefine corresponding skin parameters.</para></listitem>
+ <listitem><para>Add to user's stylesheets style classes used by a menuGroup.</para></listitem>
+ </itemizedlist>
+ </section>
+ <section>
+ <title>Skin parameters redefinition</title>
+ <table>
+ <title>Label Skin parameters redefinition</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin parameters for group</entry>
+ <entry>CSS properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>generalFamilyFont</entry>
+ <entry>font-family</entry>
+ </row>
+ <row>
+ <entry>generalSizeFont</entry>
+ <entry>font-size</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <table>
+ <title>Label Skin parameters redefinition</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin parameters for disabled group</entry>
+ <entry>CSS properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>tabDisabledTextColor</entry>
+ <entry>color</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <table>
+ <title>Label Skin parameters redefinition</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin parameters for text label</entry>
+ <entry>CSS properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>generalTextColor</entry>
+ <entry>color</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+</section>
+
+<section>
+ <title> Definition custom style classes </title>
+ <para>
+ On the screenshot, there are classes names that define group element appearance.
+ </para>
+ <figure>
+ <title>Classes names</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/menuGroup3.png" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <table>
+ <title>Classes names that define group element appearance.</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Class name</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>Rich-menu-group</entry>
+ <entry>Defines the class for wrapping div element for the whole group</entry>
+ </row>
+ <row>
+ <entry>Rich-menu-item-label</entry>
+ <entry>Defines properties for the text</entry>
+ </row>
+ <row>
+ <entry>Rich-menu-item-icon</entry>
+ <entry>Defines properties for the left icon element</entry>
+ </row>
+ <row>
+ <entry>Rich-menu-item-folder</entry>
+ <entry>Defines properties for the right icon element</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <para>
+ All listed elements except of general are defined for disabled mode.
+ </para>
+ <table>
+ <title>Classes names for disabled mode</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Class name</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>Rich-menu-item-label-disabled</entry>
+ <entry>Defines properties for the text</entry>
+ </row>
+ <row>
+ <entry>Rich-menu-item-icon-disabled</entry>
+ <entry>Defines properties for the left icon element</entry>
+ </row>
+ <row>
+ <entry>Rich-menu-item-folder-disabled</entry>
+ <entry>Defines properties for the right icon element</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <para>
+ In order to redefine style for all menuGroups on a page using CSS, it's enough to create classes with the same names and define the necessary properties in them.
+ </para>
+ <para>
+ To change style peculiarities of the particular menuGroups define your own style classes in the corresponding simple menuGroup attributes.
+ </para>
+</section>
+</section>
Modified: trunk/docs/userguide/en/included/menuItem.desc.xml
===================================================================
--- trunk/docs/userguide/en/included/menuItem.desc.xml 2007-05-08 13:04:47 UTC (rev 692)
+++ trunk/docs/userguide/en/included/menuItem.desc.xml 2007-05-08 14:42:12 UTC (rev 693)
@@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<section>
<sectioninfo>
- <keywordset>
+ <keywordset>
<keyword>menuItem</keyword>
</keywordset>
</sectioninfo>
Modified: trunk/docs/userguide/en/included/menuItem.xml
===================================================================
--- trunk/docs/userguide/en/included/menuItem.xml 2007-05-08 13:04:47 UTC (rev 692)
+++ trunk/docs/userguide/en/included/menuItem.xml 2007-05-08 14:42:12 UTC (rev 693)
@@ -43,28 +43,20 @@
<section>
<title>Creation on a page</title>
<para>To create the simplest variant on a page use the following syntax:</para>
- <programlisting role="xml">
- <![CDATA[
- ...
- <rich:dropDownMenu>
- ...
- <rich:menuItem value="Active"/>
- ...
- <rich:dropDownMenu>
- ...
- ]]>
- </programlisting>
+ <programlisting role="xml"><![CDATA[...
+ <rich:dropDownMenu>
+ ...
+ <rich:menuItem value="Active"/>
+ ...
+ <rich:dropDownMenu>
+...]]></programlisting>
</section>
<section>
<title>Dynamical Creation from Java Code</title>
- <programlisting role="java">
- <![CDATA[
- ...
- org.richfaces.component.html.HtmlMenuItem myItem = new org.richfaces.component.html.HtmlMenuItem ();
- ...
- ]]>
- </programlisting>
+ <programlisting role="java"><![CDATA[...
+ org.richfaces.component.html.HtmlMenuItem myItem = new org.richfaces.component.html.HtmlMenuItem ();
+...]]></programlisting>
</section>
<section>
@@ -78,15 +70,11 @@
<para>
Example.
</para>
- <programlisting role="xml">
- <![CDATA[
- ...
- <f:facet name="icon">
- <h:selectBooleanCheckbox value="#{bean.property}"/>
- </f:facet>
- ...
- ]]>
- </programlisting>
+ <programlisting role="xml"><![CDATA[...
+ <f:facet name="icon">
+ <h:selectBooleanCheckbox value="#{bean.property}"/>
+ </f:facet>
+...]]></programlisting>
<para>
A switching mode could be chosen with the <rich: menuItem> attribute "mode" with three possible parameters.
@@ -115,33 +103,221 @@
<para>
Example.
</para>
- <programlisting role="xml">
- <![CDATA[
- ...
- <rich:dropDownMenu>
- ...
- <rich:menuItem submitMode="none">
- <h:outputLink value=”www.jboss.org”/>
- </rich:menuItem>
- ...
- <rich:dropDownMenu>
- ...
- ]]>
- </programlisting>
+ <programlisting role="xml"><![CDATA[...
+ <rich:dropDownMenu>
+ ...
+ <rich:menuItem submitMode="none">
+ <h:outputLink value=”www.jboss.org”/>
+ </rich:menuItem>
+ ...
+ <rich:dropDownMenu>
+...]]></programlisting>
<para>
You can use the "disabled" attribute to set item state.
</para>
<para>
Example.
</para>
- <programlisting role="xml">
- <![CDATA[
- ...
- <rich:dropDownMenu>
- <rich:menuItem value="Disable" disabled="true"/>
- <rich:dropDownMenu>
- ...
- ]]>
- </programlisting>
+ <programlisting role="xml"><![CDATA[...
+ <rich:dropDownMenu>
+ <rich:menuItem value="Disable" disabled="true"/>
+ <rich:dropDownMenu>
+...]]></programlisting>
</section>
- </section>
+
+ <section>
+ <title> Look and Feel Customization</title>
+ <para>
+ For skinnability implementation, the components use a style class redefinition method. Default style classes are mapped on skin parameters.
+ </para>
+ <para>
+ There are two ways to redefine appearance of all menuItems at once:
+ </para>
+ <itemizedlist>
+ <listitem><para>Redefine corresponding skin parameters.</para></listitem>
+ <listitem><para>Add to user's stylesheets style classes used by a menuItem.</para></listitem>
+ </itemizedlist>
+ </section>
+ <section>
+ <title>Skin parameters redefinition</title>
+ <table>
+ <title>Label Skin parameters redefinition</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin parameters for item</entry>
+ <entry>CSS properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>generalFamilyFont</entry>
+ <entry>font-family</entry>
+ </row>
+ <row>
+ <entry>generalSizeFont</entry>
+ <entry>font-size</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <table>
+ <title>Label Skin parameters redefinition</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin parameters for hovered item</entry>
+ <entry>CSS properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>tipBorderColor</entry>
+ <entry>border-color</entry>
+ </row>
+ <row>
+ <entry>tipBackgroundColor</entry>
+ <entry>background-color</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <table>
+ <title>Label Skin parameters redefinition</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin parameters for disabled item</entry>
+ <entry>CSS properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>tabDisabledTextColor</entry>
+ <entry>color</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+
+ <table>
+ <title>Label Skin parameters redefinition</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin parameters for text element label</entry>
+ <entry>CSS properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>generalTextColor</entry>
+ <entry>color</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ </section>
+
+ <section>
+ <title> Definition custom style classes </title>
+ <para>
+ On the screenshot, there are classes names that define item element appearance.
+ </para>
+ <figure>
+ <title>Classes names</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/menuItem2.png" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <table>
+ <title>Classes names that define item element appearance.</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Class name</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>Rich-menu-item</entry>
+ <entry>Defines the class for wrapping div element for the whole item</entry>
+ </row>
+ <row>
+ <entry>Rich-menu-item-label</entry>
+ <entry>Defines properties for the text</entry>
+ </row>
+ <row>
+ <entry>Rich-menu-item-icon</entry>
+ <entry>Defines properties for the left icon element</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <para>
+ All listed elements except of general are defined for disabled, enabled and hovered modes.
+ </para>
+ <table>
+ <title>Classes names for modes</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Class name</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>Rich-menu-item-disabled</entry>
+ <entry>Defines the class for wrapping div element for the whole item</entry>
+ </row>
+ <row>
+ <entry>Rich-menu-item-enabled</entry>
+ <entry>Defines the class for wrapping div element for the whole item</entry>
+ </row>
+ <row>
+ <entry>Rich-menu-item-hover</entry>
+ <entry>Defines the class for wrapping div element for the whole item</entry>
+ </row>
+
+ <row>
+ <entry>Rich-menu-item-label-disabled</entry>
+ <entry>Defines properties for the text</entry>
+ </row>
+ <row>
+ <entry>Rich-menu-item-icon-disabled</entry>
+ <entry>Defines properties for the left icon element</entry>
+ </row>
+ <row>
+ <entry>Rich-menu-item-label-enabled</entry>
+ <entry>Defines properties for the text</entry>
+ </row>
+ <row>
+ <entry>Rich-menu-item-icon-enabled</entry>
+ <entry>Defines properties for the left icon element</entry>
+ </row>
+ <row>
+ <entry>Rich-menu-item-label-selected</entry>
+ <entry>Defines properties for the text</entry>
+ </row>
+ <row>
+ <entry>Rich-menu-item-icon-selectedr</entry>
+ <entry>Defines properties for the left icon element</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <para>
+ In order to redefine style for all menuItems on a page using CSS, it's enough to create classes with the same names and define the necessary properties in them.
+ </para>
+ <para>
+ To change style peculiarities of the particular menuItems define your own style classes in the corresponding simple menuItem attributes.
+ </para>
+ </section>
+</section>
+
Modified: trunk/docs/userguide/en/included/menuSeparator.desc.xml
===================================================================
--- trunk/docs/userguide/en/included/menuSeparator.desc.xml 2007-05-08 13:04:47 UTC (rev 692)
+++ trunk/docs/userguide/en/included/menuSeparator.desc.xml 2007-05-08 14:42:12 UTC (rev 693)
@@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<section>
<sectioninfo>
- <keywordset>
+ <keywordset>
<keyword>menuSeparator</keyword>
</keywordset>
</sectioninfo>
Modified: trunk/docs/userguide/en/included/menuSeparator.xml
===================================================================
--- trunk/docs/userguide/en/included/menuSeparator.xml 2007-05-08 13:04:47 UTC (rev 692)
+++ trunk/docs/userguide/en/included/menuSeparator.xml 2007-05-08 14:42:12 UTC (rev 693)
@@ -43,27 +43,90 @@
<section>
<title>Creation on a page</title>
<para>To create the simplest variant on a page use the following syntax:</para>
- <programlisting role="xml">
- <![CDATA[
- ...
- <rich:dropDownMenu/>
- ...
- <rich: menuSeparator/>
- ...
- <rich:dropDownMenu/>
- ...
- ]]>
- </programlisting>
+ <programlisting role="xml"><![CDATA[...
+ <rich:dropDownMenu/>
+ ...
+ <rich: menuSeparator/>
+ ...
+ <rich:dropDownMenu/>
+...]]></programlisting>
</section>
<section>
<title>Dynamical Creation from Java Code</title>
- <programlisting role="java">
- <![CDATA[
- ...
- org.richfaces.component.html.HtmlMenuSeparator mySep = new org.richfaces.component.html.HtmlMenuSeparator ();
- ...
- ]]>
- </programlisting>
+ <programlisting role="java"><![CDATA[...
+ org.richfaces.component.html.HtmlMenuSeparator mySep = new org.richfaces.component.html.HtmlMenuSeparator ();
+...]]></programlisting>
</section>
+
+ <section>
+ <title> Look and Feel Customization</title>
+ <para>
+ For skinnability implementation, the components use a style class redefinition method. Default style classes are mapped on skin parameters.
+ </para>
+ <para>
+ There are two ways to redefine appearance of all menuSeparators at once:
+ </para>
+ <itemizedlist>
+ <listitem><para>Redefine corresponding skin parameters.</para></listitem>
+ <listitem><para>Add to user's stylesheets style classes used by a menuSeparator.</para></listitem>
+ </itemizedlist>
+ </section>
+ <section>
+ <title>Skin parameters redefinition</title>
+ <table>
+ <title>Label Skin parameters redefinition</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Skin parameters for item</entry>
+ <entry>CSS properties</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>panelBorderColor</entry>
+ <entry>border-top-color</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ </section>
+ <section>
+ <title> Definition custom style classes </title>
+ <para>
+ On the screenshot, there are classes names that define separator element appearance.
+ </para>
+ <figure>
+ <title>Classes names</title>
+ <mediaobject>
+ <imageobject>
+ <imagedata fileref="images/menuSeparator2.png" />
+ </imageobject>
+ </mediaobject>
+ </figure>
+ <table>
+ <title>Classes names that define separator element appearance.</title>
+ <tgroup cols="2">
+ <thead>
+ <row>
+ <entry>Class name</entry>
+ <entry>Description</entry>
+ </row>
+ </thead>
+ <tbody>
+ <row>
+ <entry>Rich-menu-item</entry>
+ <entry>Defines the class for div element for separator</entry>
+ </row>
+ </tbody>
+ </tgroup>
+ </table>
+ <para>
+ In order to redefine style for all menuSeparators on a page using CSS, it's enough to create classes with the same names and define the necessary properties in them.
+ </para>
+ <para>
+ To change style peculiarities of the particular menuSeparators define your own style classes in the corresponding simple menuSeparator attributes.
+ </para>
+ </section>
</section>
More information about the richfaces-svn-commits
mailing list