⁠Chapter 11. Panels

11.1. <rich:panel>
11.1.1. Basic usage
11.1.2. Adding a header
11.1.3. Reference data
11.1.4. Style classes and skin parameters
11.2. <rich:accordion>
11.2.1. Basic usage
11.2.2. Switching panels
11.2.3. <rich:accordion> client-side events
11.2.4. <rich:accordion> server-side events
11.2.5. JavaScript API
11.2.6. Reference data
11.2.7. Style classes and skin parameters
11.2.8. <rich:accordionItem>
11.3. <rich:collapsiblePanel>
11.3.1. Basic usage
11.3.2. Expanding and collapsing the panel
11.3.3. Appearance
11.3.4. <rich:collapsiblePanel> server-side events
11.3.5. JavaScript API
11.3.6. Reference data
11.3.7. Style classes and skin parameters
11.3.8. <rich:panelToggleListener>
11.4. <rich:popupPanel>
11.4.1. Basic usage
11.4.2. Showing and hiding the pop-up
11.4.3. Modal and non-modal panels
11.4.4. Size and positioning
11.4.5. Header and controls
11.4.6. Contents of the pop-up
11.4.7. JavaScript API
11.4.8. Reference data
11.4.9. Style classes and skin parameters
11.5. <rich:tabPanel>
11.5.1. Switching panels
11.5.2. <rich:tabPanel> client-side events
11.5.3. <rich:tabPanel> server-side events
11.5.4. JavaScript API
11.5.5. Reference data
11.5.6. Style classes and skin parameters
11.5.7. <rich:tab>
11.6. <rich:togglePanel>
11.6.1. Basic usage
11.6.2. Dynamic panel item generation
11.6.3. Toggling between components
11.6.4. JavaScript API
11.6.5. Reference data
11.6.6. <rich:itemChangeListener>
11.6.7. <rich:toggleControl>
11.6.8. <rich:togglePanelItem>
This chapter details those components which act as panels and containers to hold groups of other components.

⁠11.1. <rich:panel>

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

Figure 11.1. <rich:panel>

⁠11.1.1. Basic usage

No attributes need to be listed for basic usage. a <rich:panel> without any attributes defined renders a bordered region with no header.

⁠11.1.2. Adding a header

To add a header to the panel, use the header attribute to specify the text to appear in the header. Alternatively the header can be constructed using a header facet. Example 11.1, “Adding a header” demonstrates the two different approaches.
⁠

Example 11.1. Adding a header

​<rich:panel header="This is the panel header">
​    <h:outputText value="This is the panel content" />
​</rich:panel>

​<rich:panel>
​    <f:facet name="header">
​        <h:outputText value="This is the panel header">
​    </f:facet>
​    <h:outputText value="This is the panel content" />
​</rich:panel>
Both the examples render an identical panel.
⁠
Adding a header

Figure 11.2. Adding a header

⁠11.1.3. Reference data

  • component-type: org.richfaces.Panel
  • component-class: org.richfaces.component.UIPanel
  • component-family: org.richfaces.Panel
  • renderer-type: org.richfaces.PanelRenderer

⁠11.1.4. Style classes and skin parameters

⁠

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

Class (selector) Skin Parameters Mapped CSS properties
.rf-p
This class defines styles for the panel itself.
generalBackgroundColor
background-color
panelBorderColor
color
.rf-p-hdr
This class defines styles for the header of a panel.
headerBackgroundColor
background-color, border-color
headerTextColor
color
headerSizeFont
font-size
headerWeightFont
font-weight
headerFamilyFont
font-family
.rf-p-b
This class defines styles for the body of a panel.
generalTextColor
color
generalSizeFont
font-size
generalFamilyFont
font-family