<?xml version="1.0" encoding="UTF-8"?>
<section>
    <sectioninfo>
         <keywordset>
             <keyword>rich: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 <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:menuSeparator&gt;</property>
        </emphasis> components at once:</para>
        
        <itemizedlist>
            <listitem>
                <para>Redefine the corresponding skin parameters</para>
            </listitem>
            
            <listitem>
                <para>Add to your style sheets <emphasis>
                    <property>style classes</property>
                </emphasis> used by a <emphasis role="bold">
                    <property>&lt;rich:menuSeparator&gt;</property>
                </emphasis> component</para>
            </listitem>
        </itemizedlist>
    </section>
    
        <section>
            <title>Skin Parameters Redefinition</title>
            <table>
                <title>Skin parameters redefinition for an item</title> 
                <tgroup cols="2">
                    <thead>
                        <row>
                            <entry>Skin parameters</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>On the screenshot there are classes names that define styles for component elements.</para>
        
        <figure>
            <title>Classes names</title> 
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/menuSeparator_cn.png" /> 
                </imageobject>
            </mediaobject>
        </figure>
        <table id="tab_mS">
            <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-separator</entry> 
                        <entry>Defines styles for a wrapper &lt;div&gt; element for a separator</entry> 
                    </row>
                </tbody>
            </tgroup>
        </table>
        <para>In order to redefine styles for all <emphasis role="bold">
            <property>&lt;rich:menuSeparator&gt;</property>
        </emphasis> components on a page using CSS, it&apos;s enough to create classes with the
            same names (possible classes could be found in the tables <link linkend="tab_mS"> above</link>) and define necessary properties in them. </para>
        
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="CSS"><![CDATA[...
.rich-menu-separator{
        border-color: #acbece;
}
...]]></programlisting>  
        
        <para>This is a result:</para>
        
        <figure>
            <title>Redefinition styles with predefined classes</title>
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/menuSeparator_pc.png"/>
                </imageobject>
            </mediaobject>
        </figure>
        
        <para>In the example a menu separator border color was changed.</para>
    </section>
    <section>
        <title>Relevant Resources Links</title>
        <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dropDownMenu.jsf?c=menuSeparator"
            >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"
                ><property>&lt;rich:menuSeparator&gt;</property></emphasis> usage and sources for the given example. </para>
    </section>    
</section>
