Keywords: rich:tabPanel

JBoss.org Community Documentation

- Prev
- Next

## 6.78. < rich:tabPanel >

### 6.78.1. Description

A tab panel displaying tabs for grouping content of the panel.

Figure 6.251. <rich:tabPanel> component

### 6.78.2. Key Features

- Skinnable tab panel and child items

- Disabled/enabled tab options

- Customizable headers

- Group any content inside a tab

- Each tab has a unique name for direct access (e.g. for switching between tabs)

- Switch methods can be easily customized with attribute to:

  - Server

  - Client

  - AJAX

- Switch methods can be selected for the whole tab panel and for the each tab separately

Table 6.432. rich : tabPanel attributes

Attribute Name | Description
--- | ---
activeTabClass | A CSS class to be applied to an active tab
binding | The attribute takes a value-binding expression for a component property of a backing bean
contentClass | A CSS class for content of a tab panel
contentStyle | A CSS style is for the content of a tab panel
converter | Id of Converter to be used or reference to a Converter
converterMessage | A ValueExpression enabled attribute that, if present, will be used as the text of the converter message, replacing any message that comes from the converter
dir | Direction indication for text that does not inherit directionality. Valid values are "LTR" (left-to-right) and "RTL" (right-to-left)
disabledTabClass | A CSS class to be applied to a disabled tab
headerAlignment | Sets tab headers alignment. It can be "left" or "right". Default value is "left".
headerClass | A CSS style is for the header of a tab panel.
headerSpacing | Sets tab headers spacing. It should be a valid size unit expression. Default value is "1px".
height | Height of a tab panel defined in pixels or in percents
id | Every component may have a unique id that is automatically created if omitted
immediate | A flag indicating that this component value must be converted and validated immediately (that is, during Apply Request Values phase), rather than waiting until a Process Validations phase
inactiveTabClass | CSS class to be applied to an inactive (but not disabled) tab
label | A localized user presentable name for this component.
lang | Code describing the language used in the generated markup for this component
onclick | HTML: a script expression; a pointer button is clicked
ondblclick | HTML: a script expression; a pointer button is double-clicked
onkeydown | HTML: a script expression; a key is pressed down
onkeypress | HTML: a script expression; a key is pressed and released
onkeyup | HTML: a script expression; a key is released
onmousedown | HTML: script expression; a pointer button is pressed down
onmousemove | HTML: a script expression; a pointer is moved within
onmouseout | HTML: a script expression; a pointer is moved away
onmouseover | HTML: a script expression; a pointer is moved onto
onmouseup | HTML: script expression; a pointer button is released
ontabchange | HTML: a script expression; a tab has been changed
rendered | If "false", this component is not rendered
required | If "true", this component is checked for non-empty input
requiredMessage | A ValueExpression enabled attribute that, if present, will be used as the text of the validation message for the "required" facility, if the "required" facility is used
selectedTab | Attribute defines name of selected tab
style | CSS style(s) is/are to be applied when this component is rendered
styleClass | Corresponds to the HTML class attribute
switchType | Tab switch algorithm: "client", "server"(default), "ajax"
tabClass | A CSS class to be applied to all tabs
title | Advisory title information about markup elements generated for this component
validator | MethodBinding pointing at a method that is called during Process Validations phase of the request processing lifecycle, to validate the current value of this component
validatorMessage | A ValueExpression enabled attribute that, if present, will be used as the text of the validator message, replacing any message that comes from the validator
value | The current value of this component
valueChangeListener | Listener for value changes
width | Width of a tab panel defined in pixels or in percents. The default value is 100%

Table 6.433. Component identification parameters

Name | Value
--- | ---
component-type | org.richfaces.tabPanel
component-class | org.richfaces.component.html.HtmltabPanel
component-family | org.richfaces.tabPanel
renderer-type | org.richfaces.tabPanelRenderer
tag-class | org.richfaces.taglib.tabPanelTag

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

    ...

### 6.78.4. Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmltabPanel;

    ...

    HtmltabPanel mytabPanel = new HtmltabPanel();

    ...

### 6.78.5. Details of Usage

As it was mentioned above, tabPanel groups content on panels and performs switching from one to another. Hence, modes of switching between panels are described first of all.

## Note:

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

Switching mode could be chosen with the tabPanel attribute "mode" with three possible parameters.

- Server (DEFAULT)

  The common submission is performed around tabPanel and a page is completely rendered on a called panel. Only one at a time tabPanel is uploaded onto the client side.

- Ajax

  AJAX form submission is performed around the tabPanel, content of the called tabPanel is uploaded on Ajax request and additionally specified elements in the "reRender" attribute are rendered. Only one at a time tabPanel is uploaded on the client.

- Client

  All tabPanels are uploaded on the client side. The switching from the active to the hidden panel is performed with client JavaScript.

As a result, the tabPanel 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.

There is also the "selectedTab" attribute. The attribute keeps an active tab name; therefore, an active tabPanel could be changed with setting a name of the necessary tab to this attribute.

There is also the "headerAlignment" attribute responsible for rendering of tabPanel components. The attribute has several values: left (Default), right, center, which specify Tabs components location on the top of the tabPanel.

Example:

    ...

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

    ...

Figure 6.252. <rich:tabPanel> with right aligned tabs

The "label" attribute is a generic attribute. The "label" 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”.

Except the specific attributes, the component has all necessary attributes for JavaScript events definition.

- onmouseover

- onmouseout

- etc.

### 6.78.6. Look-and-Feel Customization

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

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

- Redefine the corresponding skin parameters

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

### 6.78.7. Skin Parameters Redefinition

Table 6.434. Skin parameters redefinition for a header

Skin parameters | CSS properties
--- | ---
panelBorderColor | border-top-color

Table 6.435. Skin parameters redefinition for an internal content

Skin parameters | CSS properties
--- | ---
generalBackgroundColor | background-color
generalTextColor | color
panelBorderColor | border-bottom-color
panelBorderColor | border-right-color
panelBorderColor | border-left-color
generalSizeFont | font-size
generalFamilyFont | font-family

### 6.78.8. Definition of Custom Style Classes

On the screenshot there are classes names that define styles for component elements.

Figure 6.253. Style classes

Table 6.436. Classes names that define a component appearance

Class name | Description
--- | ---
rich-tabpanel | Defines styles for all tabPanel
rich-tabpanel-content | Defines styles for an internal content
rich-tabpanel-content-position | 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
rich-tabhdr-side-border | Defines styles for side elements of a tabPanel header
rich-tabhdr-side-cell | Defines styles for a header internal element

Table 6.437. Classes names that define different tab header states (corresponds to rich-tabhdr-side-cell)

Class name | Description
--- | ---
rich-tabhdr-cell-active | Defines styles for an internal element of an active header
rich-tabhdr-cell-inactive | Defines styles for an internal element of an inactive label
rich-tabhdr-cell-disabled | Defines styles for an internal element of a disabled label

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

Example:

    ...

    .rich-tabhdr-cell-active{

        font-weight: bold;

    }

    ...

This is a result:

Figure 6.254. Redefinition styles with predefined classes

In the example a tab active font weight and text color were changed.

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

Example:

    ...

    .myClass{

           font-style: italic;

    }

    ...

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

Example:

    <rich:tabPanel ... activeTabClass="myClass"/>

This is a result:

Figure 6.255. Redefinition styles with own classes and styleClass attributes

As it could be seen on the picture above, font style on inactive tab was changed.

### 6.78.9. Relevant Resources Links

Here you can see the example of <rich:tabPanel> usage and sources for the given example.

- Prev6.77. < rich:suggestionbox >
- Top of page
- Front page
- Next6.79. < rich:tab >