panel rich:simpleTogglePanel HtmlSimpleTogglePanel switch

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

## Creating the Component with a Page Tag

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

Example:

    ...
        <rich:simpleTogglePanel>
            ...
        </rich:simpleTogglePanel>
    ...

## Creating the Component Dynamically Using Java

Example:

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

## Details of Usage

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 component could also have an "expanded" (true/false) attribute responsible for keeping a panel state. It gives an opportunity to manage a simpleTogglePanel state from a model.

- onmouseover
- onclick
- onmouseout
- etc.

SimpleTogglePanel states

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

- Redefine the corresponding skin parameters

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

## Skin Parameters Redefinition

Skin parameters for a whole component

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

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

Skin parameters for a body element

Skin parameters | CSS properties
--- | ---
generalBackgroundColor | background-color
generalSizeFont | font-size
panelTextColor | 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-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

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 and define necessary properties in them.

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

## Relevant Resources Links

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