<section role="NotInToc" id="rich_panelMenuItem">
   <title>
         &lt;rich:panelMenuItem&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:panelMenuItem&gt;</property></emphasis> defines a single item inside <link linkend="rich_panelMenuGroup">&lt;rich:panelMenuGroup&gt;</link>.
        </para>
         <figure>
            <title>
                  The <emphasis role="bold"><property>&lt;rich:panelMenuItem&gt;</property></emphasis> component.
            </title>
               <mediaobject>
                     <imageobject>
                           <imagedata fileref="images/panelMenuItem_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>
            The <emphasis><property>&quot;mode&quot;</property></emphasis> attribute could be used with three possible parameters:
      </para>

                    <itemizedlist>
                              <listitem>
                                        <para>
                                              <code>Server</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.
                   
            Here is an example for value <code>none</code>:
      </para>

                    <programlisting role="XML"><![CDATA[...
<rich:panelMenu>
		...
       <rich:panelMenuItem mode="none" onclick="document.location.href='http://labs.jboss.com/jbossrichfaces/">
       			<h:outputLink value="http://labs.jboss.com/jbossrichfaces/">
               		<h:outputText value="RichFaces Home Page"></h:outputText>
            	</h:outputLink>
      	</rich:panelMenuItem>
      	...
</rich:panelMenu>
...]]></programlisting>

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

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

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

                   
                    <programlisting role="XML"><![CDATA[...
      <rich:panelMenu>
            ...
            <rich:panelMenuItem value="Item 1.1" icon="chevronUp" />
            ...	
      </rich:panelMenu>
...]]></programlisting>
                    <para> As the result the picture is shown below:</para>

                    <figure>
                              <title>Using an <emphasis>
                                                  <property>"icon"</property>
                                        </emphasis> attribute</title>

                              <mediaobject>
                                        <imageobject>
                                                  <imagedata fileref="images/panelMenuItem3.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:panelMenuItem value="Item 1.1" icon="\images\img1.png" />
      	...	
</rich:panelMenu>
...]]></programlisting>
                    <para>
                          Information about the <emphasis><property>&quot;process&quot;</property></emphasis> attribute usage you can find in the &quot;<link linkend="process">Decide what to process</link>&quot; guide section.
                    </para>
</section>

<section>
      <title>Reference Data</title>
      <para>
            <ulink url="&tlddoc;rich/panelMenuItem.html">Table of &lt;rich:panelMenuItem&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.PanelMenuItem</entry>
                        </row>
                        <row>
                              <entry>component-class</entry>
                              <entry>org.richfaces.component.html.HtmlPanelMenuItem</entry>
                        </row>
                        <row>
                              <entry>component-family</entry>
                              <entry>org.richfaces.PanelMenuItem</entry>
                        </row>
                        <row>
                              <entry>renderer-type</entry>
                              <entry>org.richfaces.PanelMenuItemRenderer</entry>
                        </row>
                        <row>
                              <entry>tag-class</entry>
                              <entry>org.richfaces.taglib.PanelMenuItemTag</entry>
                        </row>
                  </tbody>
            </tgroup>
      </table>
      
      <table id="tab_cn_pMI">
            <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>.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-item</entry>
                              <entry morerows="4">Defines styles for panel menu item</entry>
                              <entry>generalTextColor</entry>
                              <entry>color</entry>
                        </row>
                        <row>
                              <entry>generalFamilyFont</entry>
                              <entry>font-family</entry>
                        </row>
                        <row>
                              <entry>genealSizeFont</entry>
                              <entry>font-size</entry>
                        </row>
                        <row>
                              <entry>generalWeightFont</entry>
                              <entry>font-weight</entry>
                        </row>
                        <row>
                              <entry>tableBorderColor</entry>
                              <entry>border-top-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-self-label</entry>
                                 <entry>Defines styles for panel menu group label</entry>
                           </row>
                           <row>
                                 <entry>.rich-pmenu-item</entry>
                                 <entry>Defines styles for panel menu item</entry>
                           </row>
                           <row>
                                 <entry>.rich-pmenu-selected-element</entry>
                                 <entry>Defines styles for panel menu selected 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">panelMenuItem 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:panelMenu&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>