<?xml version="1.0" encoding="UTF-8"?>
<section>
    <sectioninfo>
        <keywordset>
            <keyword>rich:menuGroup</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.MenuGroup</entry>
                </row>
                <row>
                    <entry>component-class</entry>
                    <entry>org.richfaces.component.html.HtmlMenuGroup</entry>
                </row>
                <row>
                    <entry>component-family</entry>
                    <entry>org.richfaces.DropDownMenu</entry>
                </row>
                <row>
                    <entry>renderer-type</entry>
                    <entry>org.richfaces.MenuGroupRenderer</entry>
                </row>
                <row>
                    <entry>tag-class</entry>
                    <entry>org.richfaces.taglib.MenuGroupTag</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 value="Active">
		...
		<rich:menuGroup value="Active">
       			<!--Nested menu components-->
       	</rich:menuGroup>
        ...
</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.HtmlMenuGroup; 	
...
HtmlMenuGroup myMenuGroup = new HtmlMenuGroup();
...
]]></programlisting>
    </section>

    <section>
        <title>Details of Usage</title>
        <para> The <emphasis>
                <property>&quot;value&quot;</property>
            </emphasis> attribute defines the text representation of a group element in the page. </para>
        <para> The <emphasis>
                <property>&quot;icon&quot;</property>
            </emphasis> attribute defines an icon for the component. The <emphasis>
                <property>&quot;iconDisabled&quot;</property>
            </emphasis> attribute defines an icon for when the group is disabled. Also you can use
            the <emphasis>
                <property>&quot;icon&quot;</property>
            </emphasis> and <emphasis>
                <property>&quot;iconDisabled&quot;</property>
            </emphasis> facets. If the facets are defined, the corresponding <emphasis>
                <property>&quot;icon&quot;</property>
            </emphasis> and <emphasis>
                <property>&quot;iconDisabled&quot;</property>
            </emphasis> attributes are ignored and the facets&apos; contents are used as icons.
            This could be used for an item check box implementation. </para>
        <para> Here is an example: </para>
        <programlisting role="XML"><![CDATA[...
<f:facet name="icon">
		<h:selectBooleanCheckbox value="#{bean.property}"/>
</f:facet>
...
]]></programlisting>
        <para> The <emphasis>
                <property>&quot;iconFolder&quot;</property>
            </emphasis> and <emphasis>
                <property>&quot;iconFolderDisabled&quot;</property>
            </emphasis> attributes are defined for using icons as folder icons. The <emphasis>
                <property>&quot;iconFolder&quot;</property>
            </emphasis> and <emphasis>
                <property>&quot;iconFolderDisabled&quot;</property>
            </emphasis> facets use their contents as folder icon representations in place of the
            attribute values. </para>
        <para> The <emphasis>
                <property>&quot;direction&quot;</property>
            </emphasis> attribute is used to define which way to display the menu as shown in the
            example below: </para>
        <para>Possible values are:</para>
        <itemizedlist>
            <listitem>
                <para>&quot;left - down&quot; - a submenu is attached to the left side of the menu and is
                    dropping down</para>
            </listitem>
            <listitem>
                <para>&quot;left - up&quot; - a submenu is attached to the left side of the menu and is dropping
                    up</para>
            </listitem>
            <listitem>
                <para>&quot;right - down&quot; - a submenu is attached to the right side of the menu and is
                    dropping down</para>
            </listitem>
            <listitem>
                <para>&quot;right - up&quot; - a submenu is attached to the right side of the menu and is
                    dropping up</para>
            </listitem>
            <listitem>
                <para>&quot;auto - smart&quot; positioning activation</para>
            </listitem>
        </itemizedlist>
        <para> By default, the <emphasis>
                <property>&quot;direction&quot;</property>
            </emphasis> attribute is set to &quot;auto&quot;. </para>
        <para> Here is an example: </para>
        <programlisting role="XML"><![CDATA[...
<rich:menuGroup value="Save As..." direction="left-down">
		<rich:menuItem   submitMode="ajax" value="Text File"  action="#{ddmenu.doSaveText}"/>
      	<rich:menuItem   submitMode="ajax" value="PDF File"  action="#{ddmenu.doSavePDF}"/>
</rich:menuGroup>
...
]]></programlisting>
        <para> This would be the result: </para>
        <figure>
            <title>Using the <emphasis><property>&quot;direction&quot;</property></emphasis> attribute</title>
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/menuGroup2.png"/>
                </imageobject>
            </mediaobject>
        </figure>
        <note><title>Note:</title><para> The <emphasis role="bold">
            <property>&lt;rich:menuGroup&gt;</property>
        </emphasis> component was designed to be used only for pop-up menu list creation.</para></note>
    </section>
    
    <section>
        <title>Facets</title>
        <table>
            <title>Facets</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Facet</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>icon</entry>
                        <entry>Redefines the icon for the enabled item state. Related attribute is &quot;icon&quot;</entry>
                    </row>
                    <row>
                        <entry>iconFolder</entry>
                        <entry>Redefines the folder icon for the enabled item state. Related attribute is &quot;iconFolder&quot;</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
    </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:menuGroup&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:menuGroup&gt;</property>
                </emphasis> component</para>
            </listitem>
        </itemizedlist>
    </section>
    
    <section>
        <title>Skin Parameters Redefinition</title>
        <table>
            <title>Skin parameters redefinition for a group</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</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>Skin parameters redefinition for a disabled group</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>tabDisabledTextColor</entry>
                        <entry>color</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>

        <table>
            <title>Skin parameters redefinition for a label</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Skin parameters</entry>
                        <entry>CSS properties</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>generalTextColor</entry>
                        <entry>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/menuGroup_cn.png"/>
                </imageobject>
            </mediaobject>
        </figure>
        <table id="tab_mG">
            <title>Classes names that define an appearance of group elements</title>
            <tgroup cols="2">
                <thead>
                    <row>
                        <entry>Class name</entry>
                        <entry>Description</entry>
                    </row>
                </thead>
                <tbody>
                    <row>
                        <entry>rich-menu-group</entry>
                        <entry>Defines styles for a wrapper &lt;div&gt; element for a group</entry>
                    </row>
                    <row>
                        <entry>rich-menu-item-label</entry>
                        <entry>Defines styles for a label of an item</entry>
                    </row>
                    <row>
                        <entry>rich-menu-item-icon</entry>
                        <entry>Defines styles for the left icon of an item</entry>
                    </row>
                    <row>
                        <entry>rich-menu-item-folder</entry>
                        <entry>Defines styles for the right icon of an item</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
        
        <table>
            <title>Classes names that define different states</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 styles for a label of a disabled item</entry>
                    </row>
                    <row>
                        <entry>rich-menu-item-icon-disabled</entry>
                        <entry>Defines styles for the left icon of a disabled item</entry>
                    </row>
                    <row>
                        <entry>rich-menu-item-folder-disabled</entry>
                        <entry>Defines styles for the right icon of a disabled item</entry>
                    </row>
                    <row>
                        <entry>rich-menu-group-hover</entry>
                        <entry>Defines styles for a wrapper &lt;div&gt; element of a hover group</entry>
                    </row>
                    <row>
                        <entry>rich-menu-item-icon-enabled</entry>
                        <entry>Defines styles for the left icon of an enabled item</entry>
                    </row>
                    <row>
                        <entry>rich-menu-item-icon-selected</entry>
                        <entry>Defines styles for the left icon of a selected item</entry>
                    </row>
                </tbody>
            </tgroup>
        </table>
        <para>In order to redefine styles for all <emphasis role="bold">
            <property>&lt;rich:menuGroup&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_mG"> above</link>) and define necessary properties in them. </para>
        
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="CSS"><![CDATA[...
.rich-menu-item-label-disabled{
        font-style: italic;
}
...]]></programlisting>  
        
        <para>This is a result:</para>
        
        <figure>
            <title>Redefinition styles with predefined classes</title>
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/menuGroup_pc.png"/>
                </imageobject>
            </mediaobject>
        </figure>
        
        <para>In the example a disabled label font style was changed.</para>
        
        <para>Also it&apos;s possible to change styles of particular <emphasis role="bold"
            ><property>&lt;rich:menuGroup&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold"
                ><property>&lt;rich:menuGroup&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para>
        
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="CSS"><![CDATA[...
.myClass{
    background-color: #acbece; 
    border: none;
}
...]]></programlisting>  
        <para>The <emphasis><property>&quot;selectClass&quot;</property></emphasis> attribute for <emphasis role="bold"
            ><property>&lt;rich:menuGroup&gt;</property></emphasis> is defined as it&apos;s shown in the example below:</para>
        
        <para>
            <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="XML"><![CDATA[<rich:menuGroup value="Save As..." selectClass="myClass">
]]></programlisting>    
        
        <para>This is a result:</para>
        
        <figure>
            <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title>
            <mediaobject>
                <imageobject>
                    <imagedata fileref="images/menuGroup_oc.png"/>
                </imageobject>
            </mediaobject>
        </figure>  
        
        <para>As it could be seen on the picture above, the background color for selected class was changed. Also selected class has no border.</para>
    </section>
    <section>
        <title>Relevant Resources Links</title>
        <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dropDownMenu.jsf?c=menuGroup"
            >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"
                ><property>&lt;rich:menuGroup&gt;</property></emphasis> usage and sources for the given example. </para>
    </section>    
</section>
