rectangle rich:panel HtmlPanel

Component identification parameters

Name | Value
--- | ---
component-type | org.richfaces.panel
component-class | org.richfaces.component.html.HtmlPanel
component-family | org.richfaces.panel
renderer-type | org.richfaces.PanelRenderer
tag-class | org.richfaces.taglib.PanelTag

## Creating the Component with a Page Tag

Here is a simple example as it could be used on a page:

Example:

    ...
        <rich:panel header="Panel Header">
            ...
            <!--Any Content inside-->
            ...
        </rich:panel>
    ...

## Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlPanel;
    ...
    HtmlPanel myPanel = new HtmlPanel();
    ...

## Details of Usage

The "header" attribute defines text to be represented. If you can use the "header" facet, you can even not use the "header" attribute.

Example:

    ...
        <rich:panel>
            <f:facet name="header">
                <h:graphicImage value="/images/img1.gif"/>
            </f:facet>
            ...
            <!--Any Content inside-->
            ...
        </rich:panel>
    ...

<rich:panel> components are used to group page content pieces on similarly formatted rectangular panels.

Example:

    ...
        <rich:panel>
            ...
        </rich:panel>
    ...

It's generating on a page in the following way:

Generated panel without header

The example shows that similar rectangular areas are formed with a particular style.

When creating a panel with a header element, one more <div> element is added with content defined for a header.

Example:

    ...
        <rich:panel>
            <f:facet name="header">
                <h:outputText value="Olympus EVOLT E-500 "/>
            </f:facet>
            ...
        </rich:panel>
    ...

It's displayed on a page in the following way:

Panel with header

As it has been mentioned above, the component is mostly used for a page style definition, hence the main attributes are style ones.

- "styleClass" and "style"
- "headerClass" and "headerStyle"
- "bodyClass" and "bodyStyle"

Moreover, to add e.g. some JavaScript effects, events defined on it are used.

- "onmouseover"
- "onclick"
- "onmouseout"
- etc.

## 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:panel> components at once:

- Redefine the corresponding skin parameters

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

## Skin Parameters Redefinition

Skin parameters redefinition for a whole component

Skin parameters | CSS properties
--- | ---
generalBackgroundColor | background-color
panelBorderColor | border-color

Skin parameters redefinition for a header element

Skin parameters | CSS properties
--- | ---
headerBackgroundColor | background-color
headerBackgroundColor | border-color
headerSizeFont | font-size
headerTextColor | color
headerWeightFont | font-weight
headerFamilyFont | font-family

Skin parameters redefinition for a body element

Skin parameters | CSS properties
--- | ---
generalSizeFont | font-size
generalTextColor | color
generalFamilyFont | font-family

## Definition of Custom Style Classes

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

Style classes

Classes names that define a component appearance

Class name | Class description
--- | ---
rich-panel | Defines styles for a wrapper <div> element of a component
rich-panel-header | Defines styles for a header element
rich-panel-body | Defines styles for a body elemnt

In order to redefine styles for all <rich:panel> components on a page using CSS, it's enough to create classes with the same names and define necessary properties in them.

To change styles of particular <rich:panel> components, define your own style classes in the corresponding <rich:panel> attribute.

CSS code piece used on a page:

Example:

    ...
        .rich-panel-header{
            background-color:#F99;
        }
        .myClass{
            font-style:italic;
        }
    ...

Hence, a header class is redefined for all panels (its color changed) of this page and body class is extended with the custom style properties (font-style) for this particular panel. As a result, the panel with a header redefined color and a text style in body is got.

Panel with redefined header and body text style

## Relevant Resources Links

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