JBoss.orgCommunity Documentation
A collapsible panel, which content shows/hides after activating a header control.
Highly customizable look and feel
Support for any content inside
Collapsing expanding content
Three modes of collapsing/expanding
Server
Client
Ajax
Table 6.272. rich : simpleTogglePanel attributes
Table 6.273. Component identification parameters
Name | Value |
---|---|
component-type | org.richfaces.SimpleTogglePanel |
component-class | org.richfaces.component.html.HtmlSimpleTogglePanel |
component-family | org.richfaces.SimpleTogglePanel |
renderer-type | org.richfaces.SimpleTogglePanelRenderer |
tag-class | org.richfaces.taglib.SimpleTogglePanelTag |
To create the simplest variant on a page use the following syntax:
Example:
...
<rich:simpleTogglePanel>
...
</rich:simpleTogglePanel>
...
Example:
import org.richfaces.component.html.HtmlSimpleTogglePanel;
...
HtmlSimpleTogglePanel myPanel = new HtmlSimpleTogglePanel();
...
The component is a simplified version of toggle panel that initially has a defined layout as a panel with a header playing a role of a mode switching control. On a component header element, it's possible to define a label using an attribute with the same name.
Switching mode could be defined with the "switchType" attribute with three possible parameters.
Server
(DEFAULT)
The common submission is performed around simpleTogglePanel and a page is completely rendered on a called panel. Only one at a time panel is uploaded onto the client side.
Ajax
AJAX form submission is performed around the panel, content of the called panel is uploaded on Ajax request and additionally specified elements in the "reRender" attribute are rendered. Only one at a time panel is uploaded on the client side.
Client
All panels are uploaded on the client side. Switching from the active to the hidden panel is performed with client JavaScript.
The <rich:simpleTogglePanel> component also has an "opened" attribute responsible for keeping a panel state. It gives an opportunity to manage state of the component from a model. If the value of this attribute is"true" the component is expanded.
"onmouseover "
"onclick "
"onmouseout "
etc.
With help of "openMarker" and "closeMarker" facets you can set toggle icon for simpleTogglePanel .
Information about the "process" attribute usage you can find " Decide what to process " guide section.
Table 6.274. Facets
Facet name | Description |
---|---|
openMarker | Redefines the icon for expanding the panel |
closeMarker | Redefines the icon for collapsing the panel |
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:simpleTooglePanel> components at once:
Redefine the corresponding skin parameters
Add to your style sheets style classes used by a <rich:simpleTooglePanel> component
Table 6.275. Skin parameters for a whole component
Skin parameters | CSS properties |
---|---|
generalBackgroundColor | background-color |
panelBorderColor | border-color |
Table 6.276. Skin parameters for a header element
Skin parameters | CSS properties |
---|---|
headerBackgroundColor | background-color |
headerBackgroundColor | border-color |
headerSizeFont | font-size |
headTextColor | color |
headerWeightFont | font-weight |
headerFamilyFont | font-family |
Table 6.277. Skin parameters for a body element
Skin parameters | CSS properties |
---|---|
generalBackgroundColor | background-color |
generalSizeFont | font-size |
panelTextColor | color |
generalFamilyFont | font-family |
On the screenshot there are classes names that define styles for component elements.
Table 6.278. Classes names that define a component appearance
Class name | Class description |
---|---|
rich-stglpanel | Defines styles for a wrapper <div> element of a component |
rich-stglpanel-header | Defines styles for header element of a component |
rich-stglpnl-marker | Defines styles for a wrapper <div> element of a marker |
rich-stglpanel-body | Defines styles for a component content |
Table 6.279. Style component classes
Class name | Class description |
---|---|
styleClass | The class defines panel common style. It's used in the outside <div> element |
bodyClass | applicable to panels body elements |
headerClass | applicable to header elements |
In order to redefine styles for all <rich:simpleTogglePanel> components on a page using CSS, it's enough to create classes with the same names (possible classes could be found in the tables above) and define necessary properties in them.
Example:
...
.rich-stglpanel-header{
font-style:italic;
}
...
This is a result:
In the example the font style for header was changed.
Also it's possible to change styles of particular <rich:simpleTogglePanel> component. In this case you should create own style classes and use them in corresponding <rich:simpleTogglePanel> styleClass attributes. An example is placed below:
Example:
...
.myClass{
background-color:#ffead9;
}
...
The "bodyClass" attribute for <rich:simpleTogglePanel> is defined as it's shown in the example below:
Example:
<rich:simpleTogglePanel ... bodyClass="myClass"/>
This is a result:
As it could be seen on the picture above,background color for body was changed.
On the component LiveDemo page you can see the example of <rich:simpleTogglePanel> usage and sources for the given example.