rich:tab HtmlTab

Component identification parameters

Name | Value
--- | ---
component-type | org.richfaces.Tab
component-class | org.richfaces.component.html.HtmlTab
component-family | org.richfaces.Tab
renderer-type | org.richfaces.TabRenderer
tag-class | org.richfaces.taglib.TabTag

## Creating the Component with a Page Tag

To create the simplest variant on a page use the following syntax:

Example:

    ...
        <rich:tabPanel>
            <!--Set of Tabs inside-->
                <rich:tab>
                    ...
                </rich:tab>
        </rich:tabPanel>
    ...

## Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlTab;
    ...
    HtmlTab myTab = new HtmlTab();
    ...

## Details of Usage

The main component function is to define a content group that is rendered and processed when the tab is active, i.e. click on a tab causes switching onto a tab containing content corresponded to this tab.

The "label" attribute defines text to be represented. If you can use the "label" facet, you can even not use the "label" attribute.

Example:

    ...
        <rich:tab>
            <f:facet name="label">
                <h:graphicImage value="/images/img1.png"/>
            </f:facet>
            ...
            <!--Any Content inside-->
            ...
        </rich:tab>
    ...

A marker on a tab header defined with the "label" attribute. Moreover, each tab could be disabled (switching on this tab is impossible) with the "disable" attribute.

Example:

    ...
        <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>
    ...

With this example it's possible to generate the tab panel with the last disabled and three active tabs (see the picture).

<rich:tabPanel> with disabled <rich:tab>

Switching mode could be defined not only for the whole panel tab, but also for each particular tab, i.e. switching onto one tab could be performed right on the client with the corresponding JavaScript and onto another tab with an Ajax request on the server. Tab switching modes are the same as tabPanel ones.

Each tab also has an attribute name (alias for "id" attribute). Using this attribute value it's possible e.g. to set an active tab on a model level specifying this name in the corresponding attribute of the whole tab.

Except the specific component attributes it has all necessary attributes for JavaScript event definition.

- "onmouseover"

- "onmouseout"

- etc.

Some event could be performed on the tab which has been entered/left using "ontabenter" / "ontableave" attributes. See the example below.

Example:

    ...
        <rich:tabPanel>
            <rich:tab label="Tab1" ontabenter="alert()">
                ...
            </rich:tab>
            ...
        </rich:tabPanel>
    ...

The following example shows how on the client side to get the names of `entered`/`left` tabs.

    ontabenter="alert(leftTabName)"

Information about the "process" attribute usage you can find in the "Decide what to process" guide section.

## Facets

Facets

Facet name | Description
--- | ---
label | Defines the text for the actual "tab" in a tab section

## Look-and-Feel Customization

For skinnability implementation, the components use a style class redefinition method. Default style classes are mapped on skin parameters.

Note:

A panel appearance and content is defined with a tab panel i.e. on the tab level it's possible to define only an appearance of this tab header.

There are two ways to redefine the appearance of all <rich:tab> components at once:

- Redefine the corresponding skin parameters

- Add to your style sheets style classes used by a <rich:tab> component

## Skin Parameters Redefinition

Skin parameters redefinition for a tab header

Skin parameters | CSS properties
--- | ---
generalTextColor | color
generalSizeFont | font-size
generalFamilyFont | font-family

Skin parameters redefinition for an active tab

Skin parameters | CSS properties
--- | ---
generalTextColor | color
subBorderColor | border-color
generalBackgroundColor | background-color

Skin parameters redefinition for an inactive tab

Skin parameters | CSS properties
--- | ---
tabBackgroundColor | background-color
subBorderColor | border-color

Skin parameters redefinition for a disabled tab

Skin parameters | CSS properties
--- | ---
tabBackgroundColor | background-color
subBorderColor | border-color
tabDisabledTextColor | color

## Definition of Custom Style Classes

Classes names

Classes names that define a tab

Class name | Description
--- | ---
rich-tab-header | Defines styles for a tab header
rich-tab-label | Defines styles for a tab label

Classes names that define a tab states

Class name | Description
--- | ---
rich-tab-active | Defines styles for an active tab
rich-tab-inactive | Defines styles for an inactive tab
rich-tab-disabled | Defines styles for a disabled tab

In order to redefine styles for all <rich:tab> components on a page using CSS, it's enough to create classes with the same names (possible classes could be found in the tables above) and define necessary properties in them.

Example:

    ...
    .rich-tab-header{
            font-weight: bold;
    }
    ...

This is a result:

Redefinition styles with predefined classes

In the example a header font weight was changed.

Also it's possible to change styles of particular <rich:tab> component. In this case you should create own style classes and use them in corresponding <rich:tab> styleClass attributes. An example is placed below:

Example:

    ...
    .myClass{
            border-color: #5d9ffc;
    }
    ...

The "styleClass" attribute for <rich:tab> is defined as it's shown in the example below:

Example:

    <rich:tab ... styleClass="myClass"/>

This is a result:

Redefinition styles with own classes and styleClass attributes

As it could be seen on the picture above, the border color was changed.