<?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;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><emphasis role="bold"><property>&lt;rich:tabPanel&gt;</property></emphasis> with right aligned tabs</title>
      <mediaobject>
        <imageobject>
          <imagedata fileref="images/tabPanel1.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 “DoubleRangeValidator.MAXIMUM”, {2}
      for “ShortConverter.SHORT”.
    </para>
    <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 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/tabPanel4.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>
        </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_CS1.png"/>
        </imageobject>
      </mediaobject>
    </figure>
    
    <para>In the example a tab active font  weight and text color were changed.</para>
    
    <para>Also it’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’s shown in the example below:</para>
    
    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="CSS"><![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_CS2.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"
      >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>
