<section role="NotInToc" id="rich_panelMenuGroup">
      <title>
            &lt;rich:panelMenuGroup&gt; <emphasis role="since"><superscript> available since <emphasis role="version">3.1.0</emphasis></superscript></emphasis>
      </title>
      <section>
            <title>Description</title>
            <para>
                  The <emphasis role="bold"><property>&lt;rich:panelMenuGroup&gt;</property></emphasis> defines an expandable group of <link linkend="rich_panelMenuItem">&lt;rich:panelMenuItem&gt;</link> components inside the <link linkend="rich_panelMenu">&lt;rich:panelMenu&gt;</link>.
            </para>
            <figure>
                  <title>
                        The <emphasis role="bold"><property>&lt;rich:panelMenuGroup&gt;</property></emphasis> component</title>
                  <mediaobject>
                        <imageobject>
                              <imagedata fileref="images/panelMenuGroup_init.png"/>
                        </imageobject>
                  </mediaobject>
            </figure>
      </section>
      
      <section>
            <title>Key Features</title>
            <itemizedlist>
                  <listitem>
                        <para>Different submission modes inside every group</para>
                  </listitem>
                  <listitem>
                        <para>Optional submissions on expand/collapse</para>
                  </listitem>
                  <listitem>
                        <para>Supports predefined and custom icons</para>
                  </listitem>
                  <listitem>
                        <para>Can be disabled</para>
                  </listitem>
                  <listitem>
                        <para>Has customizable look-and-feel</para>
                  </listitem>
            </itemizedlist>
      </section>
      
      <section>
            <title>Details of Usage</title>
            <para>
                  All attributes except <emphasis><property>&quot;label&quot;</property></emphasis> are optional. 
                  The <emphasis><property>&quot;label&quot;</property></emphasis> attribute defines text to be represented.
            </para>
            <para>
                  Switching mode could be chosen with the<emphasis><property>&quot;expandMode&quot;</property></emphasis> attribute for the concrete panelMenu group.
                  The <emphasis><property>&quot;expandMode&quot;</property></emphasis> attribute could be used with three possible parameters:
            </para>

      <itemizedlist>
         <listitem>
            <para>
                  <code>ServerM</code> (default) — regular form submission request is used;
            </para>
         </listitem>
      </itemizedlist>

      <itemizedlist>
         <listitem>
            <para>
                  <code>Ajax</code> — Ajax submission is used for switching;
            </para>
         </listitem>
      </itemizedlist>

      <itemizedlist>
         <listitem>
            <para>
               <code>None</code>.
            </para>
         </listitem>
      </itemizedlist>

      <para>
         <emphasis>
               <property>&quot;Action&quot;</property>
         </emphasis> and <emphasis>
               <property>&quot;actionListener&quot;</property>
         </emphasis> attributes are ignored. Items don't fire any submits itself. Behavior is
      fully defined by the components nested into items.</para>

      <para>There are three icon-related attributes. The <emphasis>
            <property>&quot;iconExpanded&quot;</property>
         </emphasis> attribute defines an icon for an expanded state. The <emphasis>
               <property>&quot;iconCollapsed&quot;</property>
         </emphasis> attribute defines an icon for a collapsed state. The <emphasis>
               <property>&quot;iconDisabled&quot;</property>
         </emphasis> attribute defines an icon for a disabled state. 
            Default icons are shown on the picture below:</para>

      <figure>
         <title>Default icons</title>

         <mediaobject>
            <imageobject>
               <imagedata fileref="images/panelMenuGroup2.png"/>
            </imageobject>
         </mediaobject>
      </figure>

      <para>Here is an example:</para>

      
      <programlisting role="XML"><![CDATA[...
<rich:panelMenu>
		<rich:panelMenuGroup label="Group1" iconExpanded="disc" iconCollapsed="chevron">
       			<!--Nested panelMenu components-->
       	</rich:panelMenuGroup>
</rich:panelMenu>
...]]></programlisting>
      <para> As the result the pictures are shown below. The first one represents the collapsed state,
      the second one - expanded state:</para>

      <figure>
         <title>Collapsed state</title>

         <mediaobject>
            <imageobject>
               <imagedata fileref="images/panelMenuGroup3.png"/>
            </imageobject>
         </mediaobject>
      </figure>

      <figure>
         <title>Expanded state</title>

         <mediaobject>
            <imageobject>
               <imagedata fileref="images/panelMenuGroup4.png"/>
            </imageobject>
         </mediaobject>
      </figure>

      <para>It's also possible to define a path to the icon. Simple code is placed below.</para>

      <programlisting role="XML"><![CDATA[...
<rich:panelMenu>
		<rich:panelMenuGroup label="Group1" iconExpanded="\images\img1.png" iconCollapsed="\images\img2.png">
       				<!--Nested menu components-->
       	</rich:panelMenuGroup>
</rich:panelMenu>
...]]></programlisting>
      <para>
      Information about the <emphasis>
            <property>"process"</property>
      </emphasis> attribute usage you can find &quot;<link linkend="process">Decide what to process</link>&quot; guide section.
    </para>
  </section>
   <section>
      <title>Reference Data</title>
      <para>
         <ulink url="&tlddoc;rich/panelMenuGroup.html">Table of 
							&lt;rich:panelMenuGroup&gt; 
							 attributes</ulink>.
						</para>
      <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.PanelMenuGroup</entry>
               </row>

               <row>
                  <entry>component-class</entry>

                  <entry>org.richfaces.component.html.HtmlPanelMenuGroup</entry>
               </row>

               <row>
                  <entry>component-family</entry>

                  <entry>org.richfaces.PanelMenuGroup</entry>
               </row>

               <row>
                  <entry>renderer-type</entry>

                  <entry>org.richfaces.PanelMenuGroupRenderer</entry>
               </row>

               <row>
                  <entry>tag-class</entry>

                  <entry>org.richfaces.taglib.PanelMenuGroupTag</entry>
               </row>
            </tbody>
         </tgroup>
      </table>
      <table>
         <title>JavaScript API</title>

         <tgroup cols="2">
            <thead>
               <row>
                  <entry>Function</entry>

                  <entry>Description</entry>
               </row>
            </thead>

            <tbody>
               <row>
                  <entry>expand()</entry>

                  <entry>Expands group</entry>
               </row>

               <row>
                  <entry>collapse()</entry>

                  <entry>Collapses group</entry>
               </row>
            </tbody>
         </tgroup>
      </table>
      
         <table id="tab_cn_pMG">
               <title>Style classes (selectors) and mapped skin parameters</title>
               <tgroup cols="4">
                     <thead>
                           <row>
                                 <entry>Class name</entry>
                                 <entry>Description</entry>
                                 <entry>Skin parameter</entry>
                                 <entry>CSS property</entry>
                           </row>
                     </thead>
                     <tbody>
                           <row>
                                 <entry>.rich-pmenu-disabled-element</entry>
                                 <entry>Defines styles for panel menu disabled element</entry>
                                 <entry>tabDisabledTextColor</entry>
                                 <entry>color</entry>
                           </row>
                           <row>
                                 <entry morerows="4">.rich-pmenu-group</entry>
                                 <entry morerows="4">Defines styles for panel menu group</entry>
                                 <entry>generalTextColor</entry>
                                 <entry>color</entry>
                           </row>
                           <row>
                                 <entry>headerFamilyFont</entry>
                                 <entry>font-family</entry>
                           </row>
                           <row>
                                 <entry>headerSizeFont</entry>
                                 <entry>font-size</entry>
                           </row>
                           <row>
                                 <entry>headerWeightFont</entry>
                                 <entry>font-weight</entry>
                           </row>
                           <row>
                                 <entry>tableBorderColor</entry>
                                 <entry>border-top-color</entry>
                           </row>
                           <row>
                                 <entry>.rich-pmenu-hovered-element</entry>
                                 <entry>Defines styles for panel menu hevered element</entry>
                                 <entry>additionalBackgroundColor</entry>
                                 <entry>background-color</entry>
                           </row>
                           <row>
                                 <entry morerows="4">.rich-pmenu-top-group</entry>
                                 <entry morerows="4">Defines styles for a top group element of a component</entry>
                                 <entry>generalFamilyFont</entry>
                                 <entry>font-family</entry>
                           </row>
                           <row>
                                 <entry>headerSizeFont</entry>
                                 <entry>font-size</entry>
                           </row>
                           <row>
                                 <entry>headerTextColor</entry>
                                 <entry>color</entry>
                           </row>
                           <row>
                                 <entry>headerWeightFont</entry>
                                 <entry>font-weight</entry>
                           </row>
                           <row>
                                 <entry>headerBackgroundColor</entry>
                                 <entry>background-color</entry>
                           </row>
                           <row>
                                 <entry>.rich-pmenu-top-group-div</entry>
                                 <entry>Defines styles for a top group div element of a component</entry>
                                 <entry>panelBorderColor</entry>
                                 <entry>border-color</entry>
                           </row>
                     </tbody>
               </tgroup>
         </table>
         
         <table>
               <title>Internal style classes (selectors)</title>
               <tgroup cols="2">
                     <thead>
                           <row>
                                 <entry>Class name (selector)</entry>
                                 <entry>Description</entry>
                           </row>
                     </thead>
                     <tbody>
                           <row>
                                 <entry>.rich-pmenu-disabled-element</entry>
                                 <entry>Defines styles for panel menu disabled element</entry>
                           </row>
                           <row>
                                 <entry>.rich-pmenu-group</entry>
                                 <entry>Defines styles for panel menu group</entry>
                           </row>
                           <row>
                                 <entry>.rich-pmenu-group-self-label</entry>
                                 <entry>Defines styles for panel menu group label</entry>
                           </row>
                           <row>
                                 <entry>.rich-pmenu-nowrap</entry>
                                 <entry>Defines styles for panel menu wrapper</entry>
                           </row>
                           <row>
                                 <entry>.rich-pmenu-top-group</entry>
                                 <entry>Defines styles for panel menu top group element</entry>
                           </row>
                           <row>
                                 <entry>.rich-pmenu-top-group-div</entry>
                                 <entry>Defines styles for panel menu top group div element</entry>
                           </row>
                     </tbody>
               </tgroup>
         </table>
         
         <para>
               You can find all necessary information about style classes redefinition in <link linkend="customstyles">Definition of Custom Style Classes</link> section.      
         </para>
         
   </section>
   <section>
      <title>Relevant Resources Links</title>
      <para>
            Visit <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/panelMenu.jsf?c=panelMenu&amp;tab=usage">panelMenuGroup page</ulink> at RichFaces LiveDemo for examples of component usage and their sources..
      </para>
         <para>
               If you have any questions or ideas regarding the <emphasis role="bold"><property>&lt;rich:panelMenuGroup&gt;</property></emphasis> tell about them at the <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&amp;p=4064191">RichFaces Users Forum</ulink>.
         </para> 
  </section>
</section>
