<?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 <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/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-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:separator&gt;</property>
        </emphasis> components on a page using CSS, it&apos;s enough to create class with the
            same name and define necessary properties in it.</para>
        
        <para>To change styles of particular <emphasis role="bold">
            <property>&lt;rich:separator&gt;</property>
        </emphasis> components, define your own style class in the corresponding <emphasis
            role="bold">
            <property>&lt;rich:separator&gt;</property>
        </emphasis>attributes.</para>
    </section>
    <section>
        <title>Relevant Resources Links</title>
        <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dropDownMenu.jsf?c=menuSeparator"
            >Here</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>
