JBoss.orgCommunity Documentation

Chapter 9. Panels

9.1. <rich:panel>
9.1.1. Basic usage
9.1.2. Adding a header
9.1.3. Reference data
9.1.4. Style classes and skin parameters
9.2. <rich:accordion>
9.2.1. Basic usage
9.2.2. Switching panels
9.2.3. <rich:accordion> client-side events
9.2.4. <rich:accordion> server-side events
9.2.5. JavaScript API
9.2.6. Reference data
9.2.7. Style classes and skin parameters
9.2.8. <rich:accordionItem>
9.3. <rich:collapsiblePanel>
9.3.1. Basic usage
9.3.2. Expanding and collapsing the panel
9.3.3. Appearance
9.3.4. <rich:collapsiblePanel> server-side events
9.3.5. JavaScript API
9.3.6. Reference data
9.3.7. Style classes and skin parameters
9.3.8. <rich:panelToggleListener>
9.4. <rich:popupPanel>
9.4.1. Basic usage
9.4.2. Showing and hiding the pop-up
9.4.3. Modal and non-modal panels
9.4.4. Size and positioning
9.4.5. Header and controls
9.4.6. Contents of the pop-up
9.4.7. JavaScript API
9.4.8. Reference data
9.4.9. Style classes and skin parameters
9.5. <rich:tabPanel>
9.5.1. Switching panels
9.5.2. <rich:tabPanel> client-side events
9.5.3. <rich:tabPanel> server-side events
9.5.4. JavaScript API
9.5.5. Reference data
9.5.6. Style classes and skin parameters
9.5.7. <rich:tab>
9.6. <rich:togglePanel>
9.6.1. Basic usage
9.6.2. Toggling between components
9.6.3. JavaScript API
9.6.4. Reference data
9.6.5. <rich:itemChangeListener>
9.6.6. <rich:toggleControl>
9.6.7. <rich:togglePanelItem>

This chapter details those components which act as panels and containers to hold groups of other components.

The <rich:panel> component is a bordered panel with an optional header.

Figure 9.1. <rich:panel>


The <rich:accordion> is a series of panels stacked on top of each other, each collapsed such that only the header of the panel is showing. When the header of a panel is clicked, it is expanded to show the content of the panel. Clicking on a different header will collapse the previous panel and epand the selected one. Each panel contained in a <rich:accordion> component is a <rich:accordionItem> component.

Figure 9.3. A <rich:accordion> component containing three <rich:accordionItem> components


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

Class (selector)Skin ParametersMapped CSS properties
.rf-ac

This class defines styles for the accordion control itself.

panelBorderColor

border-color

generalBackgroundColor

background

.rf-ac-itm-hdr

This class defines styles for the header of an accordion item.

panelBorderColor

border-bottom-color

headerBackgroundColor

background-color

headerTextColor

color

headerWeightFont

font-weight

headerFamilyFont

font-family

headerSizeFont

font-size

.rf-ac-itm-hdr-act, .rf-ac-itm-hdr-inact

These classes define styles for the header when the item is either active (expanded) or inactive (collapsed).

No skin parameters.
.rf-ac-itm-hdr-dis

This class defines styles for the header when it is disabled.

tabDisabledTextColor

color

.rf-ac-itm-gr

This class defines styles for an item group.

No skin parameters.
.rf-ac-itm-cnt

This class defines styles for the content of an accordion item.

panelBorderColor

border-bottom-color

generalTextColor

color

generalFamilyFont

font-family

generalSizeFont

font-size

.rf-ac-itm-ico

This class defines styles for the item icon.

No skin parameters.
.rf-ac-itm-exp-ico

This class defines styles for the expanded icon for an item.

No skin parameters.
.rf-ac-itm-ico-act, .rf-ac-itm-ico-inact

These classes define styles for the icon when the item is either active (expanded) or inactive (collapsed).

No skin parameters.
.rf-ac-itm-lbl

This class defines styles for the item label.

No skin parameters.
.rf-ac-itm-lbl-act, .rf-ac-itm-lbl-inact

These classes define styles for the label when the item is either active (expanded) or inactive (collapsed).

No skin parameters.

The <rich:collapsiblePanel> component is a collapsible panel that shows or hides content when the header bar is activated. It is a simplified version of <rich:togglePanel> component.

Figure 9.4. <rich:collapsiblePanel>


The <rich:popupPanel> component provides a pop-up panel or window that appears in front of the rest of the application. The <rich:popupPanel> component functions either as a modal window which blocks interaction with the rest of the application while active, or as a non-modal window. It can be positioned on the screen, dragged to a new position by the user, and re-sized.

If show="true" then the pop-up panel will display when the page is first loaded.

The <rich:popupPanel> component can be shown and hidden manually using the show() and hide() methods from the JavaScript API. These can be implemented using two different approaches:

For explicit referencing when using the functions, the component can be given an id identifier.

Example 9.2, “<rich:popupPanel> example” demonstrates basic use of both the <rich:componentControl> component and the rich:component function to show and hide the <rich:popupPanel> component.


Placement

The <rich:popupPanel> component is usually rendered in front of any other objects on the page. This is achieved by attaching the component to the <body> element of the page, and setting a very high "z-index" (the stack order of the object). This approach is taken because relatively-positioned elements could still overlap the pop-up panel if they exist at higher levels of the DOM hierarchy, even if their z-index is less than the <rich:popupPanel> component.

To avoid form limitation of the pop-up panel on pages where no such elements exist, the <rich:popupPanel> component can be reattached to its original DOM element by setting domElementAttachment to either parent or form.

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 9.5.7, “<rich:tab>” for further details on the <rich:tab> component.

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


Form elements required

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

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

Class (selector)Skin ParametersMapped 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


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.

The <rich:togglePanel> component is used as a base for the other switchable components, the <rich:accordion> component and the <rich:tabPanel> component. It provides an abstract switchable component without any associated markup. As such, the <rich:togglePanel> component could be customized to provide a switchable component when neither an accordion component or a tab panel component is appropriate.

The <rich:togglePanel> component acts as a wrapper for multiple <rich:togglePanelItem> components. Each child component is displayed after being activated with the <rich:toggleControl> behavior.

Refer to Section 9.6.6, “<rich:toggleControl>” and Section 9.6, “<rich:togglePanel>” for details on how to use the components together.

The <rich:toggleControl> behavior can be attached to any interface component, whether inside or outside the controlled panel itself. It works with a <rich:togglePanel> component to switch between different <rich:togglePanelItem> components. Refer to Section 9.6, “<rich:togglePanel>” and Section 9.6.7, “<rich:togglePanelItem>” for details on how to use the components together.

The <rich:toggleControl> implements the JSF BehaviorHolder component, which provides events to attached components and behaviors.

The <rich:toggleControl> component can switch the attached <rich:togglePanel> component in multiple ways: