<?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>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: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> 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.</note>
    <para>Switching mode could be chosen with the <property>tabPanel</property> attribute <emphasis>
        <property>&quot;mode&quot;</property>
      </emphasis> with three possible parameters.</para>
    <itemizedlist>
      <listitem> Server (DEFAULT)<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> Ajax<para>AJAX form submission is performed around the
          <property>tabPanel</property>, content of the called <property>tabPanel</property> is
          uploaded on Ajax request and additionally specified elements in the <emphasis>
            <property>&quot;reRender&quot;</property>
          </emphasis> attribute are rendered. Only one at a time <property>tabPanel</property> is
          uploaded on the client.</para>
      </listitem>
      <listitem> Client<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: left (Default), right, center, 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>&lt;rich:tabPanel&gt; with right aligned tabs</title>
      <mediaobject>
        <imageobject>
          <imagedata fileref="images/tabPanel1.png"/>
        </imageobject>
      </mediaobject>
    </figure>

    <para>Except the specific attributes, the component has all necessary attributes for JavaScript
      events definition.</para>
    <itemizedlist>
      <listitem> onmouseover </listitem>
      <listitem> onmouseout </listitem>
      <listitem> etc. </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 contant</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/tabPanel4.png" scalefit="1"/>
        </imageobject>
      </mediaobject>
    </figure>

    <table>
      <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>
        </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 and define necessary properties in them.</para>
    
    <para>To change styles of particular <emphasis role="bold">
      <property>&lt;rich:tabPanel&gt;</property>
    </emphasis> components, define your own style classes in the corresponding <emphasis
      role="bold">
      <property>&lt;rich:tabPanel&gt;</property>
    </emphasis>attributes.</para>
  </section>

  <section>
    <title>Relevant Resources Links</title>
    <para>
      <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/tabPanel.jsf?c=tabPanel"
      >Here</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>
