<?xml version="1.0" encoding="UTF-8"?>
<section>
    <sectioninfo>
         <keywordset>
            <keyword>menuseparator</keyword> 
        </keywordset>
    </sectioninfo>
  
     <table>
        <title>Component identification parameters</title> 
         <tgroup cols="2">
             <thead>
                 <row>
                    <entry>Name</entry> 
                    <entry>Value</entry> 
                </row>
            </thead>
             <tbody>
                <row>
                    <entry>component-type</entry> 
                    <entry>org.richfaces.MenuSeparator</entry> 
                </row>
                 <row>
                    <entry>component-class</entry>
                    <entry>org.richfaces.component.html.HtmlMenuSeparator</entry>
                </row>
                 <row>
                    <entry>component-family</entry>
                    <entry>org.richfaces.DropDownMenu</entry>
                </row>
                 <row>
                    <entry>renderer-type</entry>
                    <entry>org.richfaces.MenuSeparatorRenderer</entry>
                </row>
                 <row>
                    <entry>tag-class</entry>
                    <entry>org.richfaces.taglib.MenuSeparatorTag</entry>
                </row>
            </tbody>
        </tgroup>
    </table>
    
    <section>
       <title>Creating the Component with a Page Tag</title>
        <para>Here is a simple example as it could be used on a page:</para>

    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
        <programlisting role="XML"><![CDATA[...
    <rich:dropDownMenu/>
        ...
        <rich:menuSeparator/>
        ...
    <rich:dropDownMenu/>
...
]]></programlisting>
    </section>
    
    <section>
        <title>Creating the Component Dynamically Using Java</title>

    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
        <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlMenuSeparator; 	
...
HtmlMenuSeparator myMenuSeparator = new 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 the appearance of all menu separators at once:     
            </para>
            <itemizedlist>
                <listitem><para>Redefine the corresponding skin parameters</para></listitem>
                <listitem><para>Add to your style sheets style classes used by a menu separator</para></listitem>
            </itemizedlist>
        </section>
        <section>
            <title>Redefinition of Skin Parameters</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 of Custom Style Classes</title>
        <para>
            In the screenshot, there are the 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 a style for all menu separators in 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 the style peculiarities of the particular menu separators, define your own style classes in the corresponding menuSeparator attributes.
        </para>
    </section>
</section>
