4.4.3. Example

The following is an example of a simple panel component:

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

This code generates a panel component on a page, which consists of two elements: a wrapper <div> element and a <div> element for the panel body with the specified style properties. The wrapper <div> element will look like this:

<div class="dr-pnl rich-panel">
     ...
</div>

dr-pnl is a CSS class that is specified in the framework via skin parameters:

You can change all colors for all panels on all pages by changing these skin parameter values. However, if you specify a <rich:panel> class on the page, its parameters are also acquired by all panels on this page.

Developers can also change the style properties for panel. For example:

<rich:panel styleClass="customClass" />

The previous definition could add some style properties from customClass to one particular panel. As a result, we will get three styles:

<div class="dr_pnl rich-panel customClass"> 
	...
</div>