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:
  • background-color is defined with generalBackgroundColor
  • border-color is defined with panelBorderColor
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>