<?xml version='1.0' encoding='UTF-8'?>
<section>
          <sectioninfo>
                    <keywordset>
                              <keyword>tab</keyword>
                              <keyword>rich:tabPanel</keyword>
                              <keyword>HtmltabPanel</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.tabPanel</entry>
                                        </row>
                                        <row>
                                                  <entry>component-class</entry>
                                                  <entry>org.richfaces.component.html.HtmltabPanel</entry>
                                        </row>
                                        <row>
                                                  <entry>component-family</entry>
                                                  <entry>org.richfaces.tabPanel</entry>
                                        </row>
                                        <row>
                                                  <entry>renderer-type</entry>
                                                  <entry>org.richfaces.tabPanelRenderer</entry>
                                        </row>
                                        <row>
                                                  <entry>tag-class</entry>
                                                  <entry>org.richfaces.taglib.tabPanelTag</entry>
                                        </row>
                              </tbody>
                    </tgroup>
          </table>

          <section>
                    <title>Creating the Component with a Page Tag</title>
                    <para>To create the simplest variant on a page use the following syntax:</para>

                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
                    <programlisting role="XML"><![CDATA[...
    <rich:tabPanel>
        <!--//Set of Tabs inside-->
        <rich:tab>
            ...
        </rich:tab>
    </rich:tabPanel>
...
]]></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.HtmltabPanel;
...	
HtmltabPanel mytabPanel = new HtmltabPanel();
...
]]></programlisting>
          </section>
          <section>
                    <title>Details of Usage</title>
                    <para>As it was mentioned <link linkend="tabPanel">above</link>,
                                        <property>tabPanel</property> groups content on panels and
                              performs switching from one to another. Hence, modes of switching
                              between panels are described first of all.</para>
                    <note>
                              <title>Note:</title>
                              <para> All <property>tabPanels</property> should be wrapped into a
                                        form element so as content is correctly submitted inside. If
                                        a form is placed into each tab, the Action elements of Tab
                                        controls appear to be out of the form and content submission
                                        inside the panels could be performed only for Action
                                        components inside tabs.</para>
                    </note>
                    <para>Switching mode could be chosen with the <property>tabPanel</property>
                              attribute <emphasis>
                                        <property>&quot;switchType&quot;</property>
                              </emphasis> with three possible parameters.</para>
                    <itemizedlist>
                              <listitem>
                                        <para><code>Server</code> (DEFAULT)</para>
                                        <para>The common submission is performed around
                                                  <property>tabPanel</property> and a page
                                                  is completely rendered on a called panel. Only one
                                                  at a time <property>tabPanel</property> is
                                                  uploaded onto the client side.</para>
                              </listitem>
                              <listitem>
                                        <para>
                                                  <code>Ajax</code>
                                        </para>
                                        <para>AJAX form submission is performed around the
                                                  <property>tabPanel</property>, content
                                                  of the called <property>tabPanel</property> is
                                                  uploaded on Ajax request. Only one at a
                                                  time <property>tabPanel</property> is uploaded on
                                                  the client.</para>
                              </listitem>
                              <listitem>
                                        <para>
                                                  <code>Client</code>
                                        </para>
                                        <para> All <property>tabPanels</property> are uploaded on
                                                  the client side. The switching from the active to
                                                  the hidden <property>panel</property> is performed
                                                  with client JavaScript.</para>
                              </listitem>
                    </itemizedlist>
                    <para>As a result, the <property>tabPanel</property> is switched to the second
                              tab according to the action returning outcome for moving onto another
                              page and switching from the second to the first tab is performed.</para>
                    <para>There is also the <emphasis>
                                        <property>&quot;selectedTab&quot;</property>
                              </emphasis> attribute. The attribute keeps an active tab name;
                              therefore, an active <property>tabPanel</property> could be changed
                              with setting a name of the necessary tab to this attribute.</para>
                    <para>There is also the <emphasis>
                                        <property>&quot;headerAlignment&quot;</property>
                              </emphasis> attribute responsible for rendering of
                              <property>tabPanel</property> components. The attribute has several
                              values: &quot;left&quot; (Default), &quot;right&quot;,
                              &quot;center&quot;, which specify Tabs components location on
                              the top of the tabPanel.</para>


                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
                    <programlisting role="XML"><![CDATA[...
    <rich:tabPanel width="40%" headerAlignment="right">
        <rich:tab label="Canon">
            ...
        </rich:tab>
        <rich:tab label="Nikon">
            ...
        </rich:tab>
        <rich:tab label="Olympus">
            ...
        </rich:tab>
    </rich:tabPanel>
...
]]></programlisting>

                    <figure>
                              <title><emphasis role="bold">
                                                  <property>&lt;rich:tabPanel&gt;</property>
                                        </emphasis> with right aligned tabs</title>
                              <mediaobject>
                                        <imageobject>
                                                  <imagedata fileref="images/tabPanel2.png"/>
                                        </imageobject>
                              </mediaobject>
                    </figure>
                    <para> The <emphasis>
                                        <property>&quot;label&quot;</property>
                              </emphasis> attribute is a generic attribute. The <emphasis>
                                        <property>&quot;label&quot;</property>
                              </emphasis> attribute provides an association between a component, and
                              the message that the component (indirectly) produced. This attribute
                              defines the parameters of localized error and informational messages
                              that occur as a result of conversion, validation, or other application
                              actions during the request processing lifecycle. With the help of this
                              attribute you can replace the last parameter substitution token shown
                              in the messages. For example, {1} for
                                        <code>&quot;DoubleRangeValidator.MAXIMUM&quot;</code>,
                              {2} for <code>&quot;ShortConverter.SHORT&quot;</code>. </para>
                    <para>Except the specific attributes, the component has all necessary attributes
                              for JavaScript events definition.</para>
                    <itemizedlist>
                              <listitem>
                                        <para>
                                                  <emphasis>
                                                  <property>&quot;onmouseover&quot;</property>
                                                  </emphasis>
                                        </para>
                              </listitem>
                              <listitem>
                                        <para>
                                                  <emphasis>
                                                  <property>&quot;onmouseout&quot;</property>
                                                  </emphasis>
                                        </para>
                              </listitem>
                              <listitem>
                                        <para> etc. </para>
                              </listitem>
                    </itemizedlist>

          </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:tabPanel&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:tabPanel&gt;</property>
                                                  </emphasis> component</para>
                              </listitem>
                    </itemizedlist>

          </section>

          <section>
                    <title>Skin Parameters Redefinition</title>
                    <table>
                              <title>Skin parameters redefinition for a header</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>

                    <table>
                              <title>Skin parameters redefinition for an internal content</title>
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Skin parameters</entry>
                                                  <entry>CSS properties</entry>
                                                  </row>
                                        </thead>
                                        <tbody>
                                                  <row>
                                                  <entry>generalBackgroundColor</entry>
                                                  <entry>background-color</entry>
                                                  </row>
                                                  <row>
                                                  <entry>generalTextColor</entry>
                                                  <entry>color</entry>
                                                  </row>
                                                  <row>
                                                  <entry>panelBorderColor</entry>
                                                  <entry>border-bottom-color</entry>
                                                  </row>
                                                  <row>
                                                  <entry>panelBorderColor</entry>
                                                  <entry>border-right-color</entry>
                                                  </row>
                                                  <row>
                                                  <entry>panelBorderColor</entry>
                                                  <entry>border-left-color</entry>
                                                  </row>
                                                  <row>
                                                  <entry>generalSizeFont</entry>
                                                  <entry>font-size</entry>
                                                  </row>
                                                  <row>
                                                  <entry>generalFamilyFont</entry>
                                                  <entry>font-family</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>Style classes</title>
                              <mediaobject>
                                        <imageobject>
                                                  <imagedata fileref="images/tabPanel_cn.png"
                                                  scalefit="1"/>
                                        </imageobject>
                              </mediaobject>
                    </figure>

                    <table id="tab_cn5">
                              <title>Classes names that define a component appearance</title>
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Class name</entry>
                                                  <entry>Description</entry>
                                                  </row>
                                        </thead>
                                        <tbody>
                                                  <row>
                                                  <entry>rich-tabpanel</entry>
                                                  <entry>Defines styles for all
                                                  tabPanel</entry>
                                                  </row>
                                                  <row>
                                                  <entry>rich-tabpanel-content</entry>
                                                  <entry>Defines styles for an internal
                                                  content</entry>
                                                  </row>
                                                  <row>
                                                  <entry>rich-tabpanel-content-position</entry>
                                                  <entry>Defines styles for a wrapper
                                                  element of a tabPanel content.
                                                  It should define a shift equal
                                                  to borders width in order to
                                                  overlap panel tabs</entry>
                                                  </row>
                                                  <row>
                                                  <entry>rich-tabhdr-side-border</entry>
                                                  <entry>Defines styles for side elements
                                                  of a tabPanel header</entry>
                                                  </row>
                                                  <row>
                                                  <entry>rich-tabhdr-side-cell</entry>
                                                  <entry>Defines styles for a header
                                                  internal element</entry>
                                                  </row>
                                                  <row>
                                                  <entry>rich-tab-bottom-line</entry>
                                                  <entry>Defines styles for a tab bottom
                                                  line element of a tabPanel
                                                  </entry>
                                                  </row>
                                        </tbody>
                              </tgroup>
                    </table>


                    <table>
                              <title>Classes names that define different tab header states
                                        (corresponds to rich-tabhdr-side-cell)</title>
                              <tgroup cols="2">
                                        <thead>
                                                  <row>
                                                  <entry>Class name</entry>
                                                  <entry>Description</entry>
                                                  </row>
                                        </thead>
                                        <tbody>
                                                  <row>
                                                  <entry>rich-tabhdr-cell-active</entry>
                                                  <entry>Defines styles for an internal
                                                  element of an active
                                                  header</entry>
                                                  </row>
                                                  <row>
                                                  <entry>rich-tabhdr-cell-inactive</entry>
                                                  <entry>Defines styles for an internal
                                                  element of an inactive label
                                                  </entry>
                                                  </row>
                                                  <row>
                                                  <entry>rich-tabhdr-cell-disabled</entry>
                                                  <entry>Defines styles for an internal
                                                  element of a disabled label
                                                  </entry>
                                                  </row>
                                        </tbody>
                              </tgroup>
                    </table>
                    <para>In order to redefine styles for all <emphasis role="bold">
                                        <property>&lt;rich:tabPanel&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 table <link linkend="tab_cn5">above</link>) and define necessary
                              properties in them. An example is placed below:</para>

                    <para>
                              <emphasis role="bold">Example:</emphasis>
                    </para>
                    <programlisting role="CSS"><![CDATA[...
.rich-tabhdr-cell-active{
    font-weight: bold;
}
...]]></programlisting>

                    <para>This is a result:</para>

                    <figure>
                              <title>Redefinition styles with predefined classes</title>
                              <mediaobject>
                                        <imageobject>
                                                  <imagedata fileref="images/tabPanel_pc.png"/>
                                        </imageobject>
                              </mediaobject>
                    </figure>

                    <para>In the example a tab active font weight and text color were changed.</para>

                    <para>Also it&apos;s possible to change styles of particular <emphasis
                                        role="bold">
                                        <property>&lt;rich:tabPanel&gt;</property>
                              </emphasis> component. In this case you should create own style
                              classes and use them in corresponding <emphasis role="bold">
                                        <property>&lt;rich:tabPanel&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{
       font-style: italic;
}
...]]></programlisting>
                    <para>The <emphasis>
                                        <property>&quot;styleClass&quot;</property>
                              </emphasis> attribute for <emphasis role="bold">
                                        <property>&lt;rich:tabPanel&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:tabPanel ... activeTabClass="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/tabPanel_oc.png"/>
                                        </imageobject>
                              </mediaobject>
                    </figure>

                    <para>As it could be seen on the picture above, font style on inactive tab was
                              changed.</para>
          </section>

          <section>
                    <title>Relevant Resources Links</title>
                    <para>
                              <ulink
                                        url="http://livedemo.exadel.com/richfaces-demo/richfaces/tabPanel.jsf?c=tabPanel"
                                        >On the component LiveDemo page</ulink> you can see the example of <emphasis
                                        role="bold">
                                        <property>&lt;rich:tabPanel&gt;</property>
                              </emphasis> usage and sources for the given example. </para>
          </section>

</section>
