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 &quot;event&quot; 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 &lt;rich:dropDownMenu&gt; attribute &quot;mode&quot; 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&apos;s stylesheets style classes used by a panel.</para></listitem> - </itemizedlist> + <listitem><para>Add to user&apos;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&apos; names that define an element label. + On the screenshot, there are classes names that define element label. </para> <figure> - <title>Classes&apos; names</title> + <title>Classes names</title> <mediaobject> <imageobject> <imagedata fileref="images/dropDownMenu4.png" /> @@ -319,7 +297,7 @@ </mediaobject> </figure> <table> - <title>Classes&apos; 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&apos; names that define an element popup. + On the screenshot, there are classes names that define element popup. </para> <figure> - <title>Classes&apos; names</title> + <title>Classes names</title> <mediaobject> <imageobject> <imagedata fileref="images/dropDownMenu5.png" /> @@ -359,7 +337,7 @@ </mediaobject> </figure> <table> - <title>Classes&apos; 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&apos;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&apos;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 &quot;iconFolder&quot; and &quot;iconFolderDisabled&quot; attributes are defined for using icons as a folder icon. The &quot;iconFolder&quot; and &quot;iconFolderDisabled&quot; 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&apos;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&apos;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 &lt;rich: menuItem&gt; attribute &quot;mode&quot; 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 &quot;disabled&quot; 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&apos;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&apos;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&apos;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&apos;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>