RichFaces <rich:panel>

It is a bordered panel with an optional header. For basic usage, it does not require any attribute. A <rich:panel> without any attributes defined renders a bordered region with no header.

We should use header attribute to specify the text to appear in the header.

Style classes and skin parameters

The following table shows the style classes and corresponding skin parameters for the panel.

Class	Function	Skin Parameters	Mapped CSS properties
.rf-p	It is used to define styles for the panel itself.	generalBackgroundColor	background-color
.rf-p-hdr	It is used to define styles for the header of a panel.	headerTextColor headerSizeFont	color font-size
.rf-p-b	It is used to define styles for the body of a panel.	generalSizeFont generalFamilyFont	font-size font-family

Example

Here, in the following example, we are implementing <rich:panel> component. This example contains the following files.

JSF File

// rich-panel.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<f:view>
<h:head>
<title>Rich Panel</title>
</h:head>
<h:body>
<h:form>
<h:outputText value="Rich Panel"/><br/><br/>
<rich:panel>
<f:facet name="header">
<h:outputText value="Rich Panel Header"/>
</f:facet>
<h:outputText value="We can place our content here." />
</rich:panel>
</h:form>
</h:body>
</f:view>
</ui:composition>

Output: