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

Here is a simple example as it could be used on a page:

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.gif"/>
            </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%">
            <rich:tab label="Tab">
                <h:outputText value="Active Tab content"/>
            </rich:tab>
            <rich:tab label="Disabled Tab" disabled="true">
                ...
            </rich:tab>
            <rich:tab label="Next Enabled Tab">
                ...
            </rich:tab>
        </rich:tabPanel>
    ...

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

Tab Panel with disabled 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)"

## 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-lable | Defines styles for a tab lable

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 and define necessary properties in them.

To change styles of particular <rich:tab> components define your own style classes in the corresponding <rich:tab> attribute.