<section role="NotInToc" id="rich_tab">
      <title>&lt;rich:tab&gt;<emphasis role="since">
                  <superscript> available since <emphasis role="version">3.0.0</emphasis></superscript>
            </emphasis></title>
      <section>
            <title>Description</title>
            <para>The component defines a tab section within a tab panel.</para>
            <figure>
                  <title>
                        <emphasis role="bold">
                              <property>&lt;rich:tab&gt;</property>
                        </emphasis> component</title>
                  <mediaobject>
                        <imageobject>
                              <imagedata fileref="images/tab_init.png"/>
                        </imageobject>
                  </mediaobject>
            </figure>
      </section>

      <section>
            <title>Key Features</title>
            <itemizedlist>
                  <listitem>
                        <para>Fully skinnable <property>tabs</property> content</para>
                  </listitem>
                  <listitem>
                        <para>Disabled/enabled <property>tab</property> options</para>
                  </listitem>
                  <listitem>
                        <para>Groups any content inside a <property>tab</property>
                        </para>
                  </listitem>
                  <listitem>
                        <para>Each <property>tab</property> has a unique name for a direct access (e.g. for switching between tabs)</para>
                  </listitem>
                  <listitem>
                        <para>Switch methods can be easily customized for every <property>tab</property> separately with attribute to:</para>
                        <itemizedlist>
                              <listitem>
                                    <para>
                                          <code>Server</code>
                                    </para>
                              </listitem>
                              <listitem>
                                    <para>
                                          <code>Client</code>
                                    </para>
                              </listitem>
                              <listitem>
                                    <para>
                                          <code>AJAX</code>
                                    </para>
                              </listitem>
                        </itemizedlist>
                  </listitem>
            </itemizedlist>
      </section>
      
      <section>
            <title>Details of Usage</title>
            <para>The main component function is to define a content group that is rendered and processed when the <property>tab</property> is active, i.e. click on a <property>tab</property> causes switching onto a <property>tab</property>
                  containing content corresponded to this <property>tab</property>.</para>
            <para>The <emphasis>
                        <property>&quot;label&quot;</property>
                  </emphasis> attribute defines text to be represented. If you can use the <emphasis>
                        <property>&quot;label&quot;</property>
                  </emphasis> facet, you can even not use the <emphasis>
                        <property>&quot;label&quot;</property>
                  </emphasis> attribute.</para>
           
            <programlisting role="XML"><![CDATA[<rich:tab>
      <f:facet name="label">
            <h:graphicImage value="/images/img1.png"/>
      </f:facet>
       <!--Any Content inside-->
</rich:tab>]]></programlisting>

            <para>A marker on a <property>tab</property> header defined with the <emphasis>
                        <property>&quot;label&quot;</property>
                  </emphasis> attribute. Moreover, each <property>tab</property> could be disabled (switching on this <property>tab</property> is impossible) with the <emphasis>
                        <property>"disable"</property>
                  </emphasis> attribute.</para>

           
            <programlisting role="XML"><![CDATA[<rich:tabPanel width="20%">
      <tabs:tab  label="Canon">
            <h:outputText value="Canon EOS Digital Rebel XT" />
             ...
      </tabs:tab>
      <tabs:tab  label="Nikon">
            <h:outputText value="Nikon D70s" />
             ...
      </tabs:tab>
      <tabs:tab label="Olympus">
            <h:outputText value="Olympus EVOLT E-500" />
             ...
      </tabs:tab>
      <tabs:tab disabled="true" name="disabled" label="Disabled"/>
</rich:tabPanel>]]></programlisting>
            <para>With this example it's possible to generate the <property>tab panel</property> with the last disabled and three active <property>tabs</property> (see the picture).</para>
            <figure>
                  <title>
                        <emphasis role="bold">
                              <property>&lt;rich:tabPanel&gt;</property>
                        </emphasis> with disabled <emphasis role="bold">
                              <property>&lt;rich:tab&gt;</property>
                        </emphasis>
                  </title>
                  <mediaobject>
                        <imageobject>
                              <imagedata fileref="images/tab2.png"/>
                        </imageobject>
                  </mediaobject>
            </figure>
            <para>Switching mode could be defined not only for the whole panel <property>tab</property>, but also for each particular <property>tab</property>, i.e. switching onto one <property>tab</property> could be performed right on the
                  client with the corresponding JavaScript and onto another <property>tab</property> with an Ajax request on the server. <property>Tab</property> switching modes are the same as <property>tabPanel</property> ones.</para>
            <para>Each <property>tab</property> also has an attribute name (alias for <emphasis>
                        <property>"id"</property>
                  </emphasis> attribute). Using this attribute value it's possible e.g. to set an active <property>tab</property> on a model level specifying this name in the corresponding attribute of the whole
                  <property>tab</property>.</para>
            
            <para>Except the specific component attributes it has all necessary attributes for JavaScript event definition.</para>
            <itemizedlist>
                  <listitem>
                        <para>
                              <emphasis>
                                    <code>onmouseover</code>
                              </emphasis>
                        </para>
                  </listitem>
                  <listitem>
                        <para>
                              <emphasis>
                                    <code>onmouseout</code>
                              </emphasis>
                        </para>
                  </listitem>
                  <listitem>
                        <para>etc.</para>
                  </listitem>
            </itemizedlist>
            <para> Some event could be performed on the tab which has been entered/left using &quot;<emphasis><property>"ontabenter"</property></emphasis>&quot; and 
                  &quot;<emphasis><property>ontableave</property></emphasis>&quot; attributes. See the example below:</para>

          
            <programlisting role="XML"><![CDATA[<rich:tabPanel>
      <rich:tab label="Tab1" ontabenter="alert()">
       ...
      </rich:tab>
      ...
</rich:tabPanel>]]></programlisting>
            <para> The following example shows how on the client side to get the names of <code>entered</code>/<code>left</code> tabs. </para>
            <programlisting role="JAVA"><![CDATA[ontabenter="alert(leftTabName)"]]></programlisting>
            <para> Information about the <emphasis>
                        <property>"process"</property>
                  </emphasis> attribute usage you can find in the <link linkend="process"> "Decide what to process" </link> guide section. </para>
      </section>
      <section>
            <title>Reference Data</title>
            <para>
                  <ulink url="&tlddoc;rich/tab.html">Table of &lt;rich:tab&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.Tab</entry>
                              </row>
                              <row>
                                    <entry>component-class</entry>
                                    <entry>org.richfaces.component.html.HtmlTab</entry>
                              </row>
                              <row>
                                    <entry>component-family</entry>
                                    <entry>org.richfaces.Tab</entry>
                              </row>
                              <row>
                                    <entry>renderer-type</entry>
                                    <entry>org.richfaces.TabRenderer</entry>
                              </row>
                              <row>
                                    <entry>tag-class</entry>
                                    <entry>org.richfaces.taglib.TabTag</entry>
                              </row>
                        </tbody>
                  </tgroup>
            </table>
            <table>
                  <title>Facet</title>
                  <tgroup cols="2">
                        <thead>
                              <row>
                                    <entry>Facet name</entry>
                                    <entry>Description</entry>
                              </row>
                        </thead>
                        <tbody>
                              <row>
                                    <entry>label</entry>
                                    <entry>Defines the text for the actual &quot;tab&quot; in a tab section</entry>
                              </row>
                        </tbody>
                  </tgroup>
            </table>
            
            <table id="tab_classes">
                  <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 morerows="2">.rich-tab-active</entry>
                                    <entry morerows="2">Defines styles for an active tab</entry>
                                    <entry>generalTextColor</entry>
                                    <entry>color</entry>
                              </row>
                              <row>
                                    <entry>generalBackgroundColor</entry>
                                    <entry>background-color</entry>
                              </row>
                              <row>
                                    <entry>subBorderColor</entry>
                                    <entry>border-color</entry>
                              </row>
                              
                              <row>
                                    <entry>.rich-tab-bottom-line</entry>
                                    <entry>Defines styles for a tab bottom line</entry>
                                    <entry>panelBorderColor</entry>
                                    <entry>border-bottom-color</entry>
                              </row>
                              
                              <row>
                                    <entry morerows="2">.rich-tab-disabled</entry>
                                    <entry morerows="2">Defines styles for a disabled tab</entry>
                                    <entry>subBorderColor</entry>
                                    <entry>border-color</entry>
                              </row>
                              <row>
                                    <entry>tabBackgroundColor</entry>
                                    <entry>background-color</entry>
                               </row>
                              <row>
                                    <entry>tabDisabledTextColor</entry>
                                    <entry>color</entry>
                              </row>
                              
                              <row>
                                    <entry morerows="2">.rich-tab-header</entry>
                                    <entry morerows="2">Defines styles for a tab header</entry>
                                    <entry>generalFamilyFont</entry>
                                    <entry>font-family</entry>
                              </row>
                              <row>
                                    <entry>generalSizeFont</entry>
                                    <entry>font-size</entry>
                              </row>
                              <row>
                                    <entry>generalTextColor</entry>
                                    <entry>color</entry>
                              </row>
                                                          
                              <row>
                                    <entry morerows="1">.rich-tab-inactive</entry>
                                    <entry morerows="1">Defines styles for an inactive tab</entry>
                                    <entry>subBorderColor</entry>
                                    <entry>border-color</entry>
                              </row>
                              <row>
                                    <entry>tabBackgroundColor</entry>
                                    <entry>background-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-tab-active</entry>
                                    <entry>Defines styles for an active tab</entry>
                              </row>
                              <row>
                                    <entry>.rich-tab-disabled</entry>
                                    <entry>Defines styles for a disabled tab</entry>
                              </row>
                              <row>
                                    <entry>.rich-tab-header</entry>
                                    <entry>Defines styles for a tab header</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/tabPanel.jsf;">TabPanel 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:tab&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>
