⁠11.5. <rich:tabPanel>

The <rich:tabPanel> component provides a set of tabbed panels for displaying one panel of content at a time. The tabs can be highly customized and themed. Each tab within a <rich:tabPanel> container is a <rich:tab> component. Refer to Section 11.5.7, “<rich:tab>” for further details on the <rich:tab> component.
⁠
A <rich:tabPanel> component containing three <rich:tab> components

Figure 11.6. A <rich:tabPanel> component containing three <rich:tab> components

Note

All <rich:tabPanel> components should be wrapped in a form element when using either ajax or server mode, as usual for submitting components.

⁠11.5.1. Switching panels

The activeItem attribute holds the active tab name. This name is a reference to the name identifier of the active child <rich:tab> component.
The switching mode for performing submissions is determined by the switchType attribute, which can have one of the following three values:
server
The default setting. Activation of a <rich:tab> component causes the parent <rich:tabPanel> component to perform a common submission, completely refreshing the page. Only one tab at a time is rendered to the client side.
ajax
Activation of a <rich:tab> component causes the parent <rich:tabPanel> component to perform an Ajax form submission, and the content of the tab panel is refreshed. Only one tab at a time is rendered to the client side.
client
Activation of a <rich:tab> component causes the parent <rich:tabPanel> component to update on the client side. All the tabs are rendered to the client during the initial page render. JavaScript changes the styles such that one tab becomes hidden while the other is shown.

⁠11.5.2. <rich:tabPanel> client-side events

In addition to the standard Ajax events and HTML events, the <rich:tabPanel> component uses the client-side events common to all switchable panels:
  • The itemchange event points to the function to perform when the switchable item is changed.
  • The beforeitemchange event points to the function to perform when before the switchable item is changed.

⁠11.5.3. <rich:tabPanel> server-side events

The <rich:tabPanel> component uses the server-side events common to all switchable panels:
  • The ItemChangeEvent event occurs on the server side when an item is changed through Ajax using the server mode. It can be processed using the ItemChangeListener attribute. Refer to Section 11.6.6, “<rich:itemChangeListener>” for details on the <rich:itemChangeListener> tag.

⁠11.5.4. JavaScript API

The <rich:tabPanel> component can be controlled through the JavaScript API. The JavaScript API provides the following functions, which are common to all switchable panels:
getItems()
Return an array of the tabs contained in the tab panel.
getItemsNames()
Return an array of the names of the tabs contained in the tab panel.
switchToItem(itemName)
Switch to and display the item identified by the itemName string passed as a parameter.
firstItem(), prevItem(), nextItem(), lastItem()
Get the name of the first item, the previous item, the next item, or the last item.

⁠11.5.5. Reference data

  • component-type: org.richfaces.TabPanel
  • component-class: org.richfaces.component.UITabPanel
  • component-family: org.richfaces.TabPanel
  • renderer-type: org.richfaces.TabPanelRenderer
  • handler-class: org.richfaces.view.facelets.html.TogglePanelTagHandler

⁠11.5.6. Style classes and skin parameters

⁠

Table 11.5. Style classes (selectors) and corresponding skin parameters

Class (selector) Skin Parameters Mapped CSS properties
.rf-tab-hdr
This class defines styles for a tab header.
panelBorderColor
border
tabBackgroundColor
background-color
generalTextColor
color
.rf-tab-hdr-act
This class defines styles for a tab header when it is active.
additionalBackgroundColor
background-color
.rf-tab-hdr-inact
This class defines styles for a tab header when it is inactive.
No skin parameters.
.rf-tab-hdr-dis
This class defines styles for a tab header when it is disabled.
tabDisabledTextColor
color
.rf-tab-hdr-tabline-vis
This class defines styles for the header tab line when it is visible.
additionalBackgroundColor
background-color
panelBorderColor
border-color
.rf-tab-hdr-tabs
This class defines styles for the tabs in the header.
No skin parameters.
.rf-tab-hdr-spcr
This class defines styles for the tab header spacer.
panelBorderColor
border-bottom
.rf-tab-lbl
This class defines styles for the tab label.
generalFamilyFont
font-family
generalSizeFont
font-size
.rf-tab-hdn
This class defines styles for the tab when it is hidden.
No skin parameters.
.rf-tab-hdr-scrl-lft, .rf-tab-hdr-scrl-rgh
These classes define styles for the left and right controls for the tab header scroller.
additionalBackgroundColor
background
panelBorderColor
border
generalFamilyFont
font-family
generalSizeFont
font-size
.rf-tab-hdr-tablst
This class define styles for the tab header list.
additionalBackgroundColor
background
panelBorderColor
border
generalFamilyFont
font-family
.rf-tab-hdr-brd
This class define styles for the tab header border.
tabBackgroundColor
background
panelBorderColor
border
.rf-tab-cnt
This class define styles for the content of the tab panel.
generalBackgroundColor
background
panelBorderColor
border
generalFamilyFont
font-family
generalSizeFont
font-size

⁠11.5.7. <rich:tab>

The <rich:tab> component represents an individual tab inside a <rich:tabPanel> component, including the tab's content. Clicking on the tab header will bring its corresponding content to the front of other tabs.

⁠11.5.7.1. Basic usage

Basic usage of the <rich:tab> component requires only the tab header and tab content. No additional attributes are required.
The header attribute provides the text on the tab header. The content of the tab is then detailed inside the <rich:tab> tags.
Alternatively, the header facet could be used in place of the header attribute. This would allow custom components to be applied to the tab header. The component also supports three facets to customize the appearance depending on the current state of the tab:
headerActive facet
This facet is used when the tab is the currently active tab.
headerInactive facet
This facet is used when the tab is not currently active.
headerDisabled facet
This facet is used when the tab is disabled.
The header facet is used in place of any state-based facet that has not been defined.

⁠11.5.7.2. Switching tabs

The switching mode for performing submissions can be inherited from the switchType attribute of the parent <rich:tabPanel> component, or set individually for each <rich:tab> component. Refer to Section 11.5, “<rich:tabPanel>” for details on the switchType attribute.
An individual tab can be disabled by setting disabled="true". Disabled tabs cannot be activated or switched to.

⁠11.5.7.3. <rich:tab> client-side events

In addition to the standard HTML events, the <rich:tab> component uses the client-side events common to all switchable panel items:
  • The enter event points to the function to perform when the mouse enters the tab.
  • The leave attribute points to the function to perform when the mouse leaves the tab.

⁠11.5.7.4. Reference data

  • component-type: org.richfaces.Tab
  • component-class: org.richfaces.component.UITab
  • component-family: org.richfaces.Tab
  • renderer-type: org.richfaces.TabRenderer

⁠11.5.7.5. Style classes and skin parameters

The <rich:tab> component uses the same styles as those applied to the parent <rich:tabPanel> component. Refer to Section 11.5.6, “Style classes and skin parameters” for details.