<?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>TabPanel with right aligned tabs</title>
      <mediaobject>
        <imageobject>
          <imagedata fileref="images/tabPanel1.gif"/>
        </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>.</para>
    <para>Default style classes are mapped on <emphasis><property>skin
      parameters</property>.</emphasis></para>
    <para>To redefine appearance of all tabPanels at once, there are two ways:</para>
    <itemizedlist>
      <listitem>to redefine corresponding skin parameters</listitem>
      <listitem>to add <emphasis>
          <property>style classes</property>
        </emphasis> used by the tabPanel to your page style sheets</listitem>
    </itemizedlist>

  </section>
  <section>
    <title>Definition of Custom Style Classes</title>


    <figure>
      <title>TabPanel style classes</title>
      <mediaobject>
        <imageobject>
          <imagedata fileref="images/tabPanel4.gif" scalefit="1"/>
        </imageobject>
      </mediaobject>
    </figure>
    <para>On the screenshot, there are names on the redefined CSS classes that substituted
      automatically by the framework in order to define an appearance of the corresponding elements
      of all tab panels on a page.</para>

    <table>
      <title>Classes names that define appearance</title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Class name</entry>
            <entry>Description</entry>
          </row>
        </thead>
        <tbody>
          <row>
            <entry>rich-tabpanel-content</entry>
            <entry>Tab internal content</entry>
          </row>
          <row>
            <entry>rich-tabpanel-content-position</entry>
            <entry>A class for wrapping element content. It should define a shift equal to borders
              width in order to overlap a panel and tabs</entry>
          </row>
          <row>
            <entry>rich-tabhdr-side-border</entry>
            <entry>A class for side elements of a tab header</entry>
          </row>
          <row>
            <entry>rich-tabhdr-side-cell</entry>
            <entry>A class 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>A class for an internal element of an active header</entry>
          </row>
          <row>
            <entry>rich-tabhdr-cell-inactive</entry>
            <entry>A class for internal element of an inactive label </entry>
          </row>
          <row>
            <entry>rich-tabhdr-cell-disabled</entry>
            <entry>A class for an internal element of a disabled label </entry>
          </row>
        </tbody>
      </tgroup>
    </table>
    <para>Also it is possible to change look-and-feel settings of individual tab panel component by
      writing your own style classes in corresponding class attributes of
      <property>tabPanel</property>.</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>
