panelMenuGroup

Component identification parameters

Name | Value
--- | ---
component-type | org.richfaces.PanelMenuGroup
component-class | org.richfaces.component.html.HtmlPanelMenuGroup
component-family | org.richfaces.PanelMenuGroup
renderer-type | org.richfaces.PanelMenuGroupRenderer
tag-class | org.richfaces.taglib.PanelMenuGroupTag

## Creating the Component with a Page Tag

To create the simplest variant on a page use the following syntax:

Example:

    ...
          <rich:panelMenu>
                <rich:panelMenuGroup label="Group1">
                      <!--Nested panelMenu components-->
                </rich:panelMenuGroup>
          </rich:panelMenu>
    ...

## Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlPanelMenuGroup;
    ...
    HtmlPanelMenuGroup myPanelMenuGroup = new HtmlPanelMenuGroup();
    ...

## Details of Usage

All attributes except "label" are optional. The "label" attribute defines text to be represented.

Switching mode could be chosen with the "expandMode" attribute for the concrete panelMenu group.

The "expandMode" attribute could be used with three possible parameters:

- Server (default)

Regular form submission request is used.

- Ajax

Ajax submission is used for switching.

- None

"Action" and "ActionListener" attributes are ignored. Items don't fire any submits itself. Behavior is fully defined by the components nested into items.

There are three icon-related attributes. The "iconExpanded" attribute defines an icon for an expanded state. The "iconCollapsed" attribute defines an icon for a collapsed state. The "iconDisabled" attribute defines an icon for a disabled state.

Default icons are shown on the picture below:

Default icons

Here is an example:

Example:

    ...
          <rich:panelMenu>
                <rich:panelMenuGroup label="Group1" iconExpanded="disc" iconCollapsed="chevron">
                      <!--Nested panelMenu components-->
                </rich:panelMenuGroup>
          </rich:panelMenu>
    ...

As the result the pictures are shown below. The first one represents the collapsed state, the second one - expanded state:

Collapsed state

Expanded state

It's also possible to define a path to the icon. Simple code is placed below.

    ...
          <rich:panelMenu>
                <rich:panelMenuGroup label="Group1" iconExpanded="\images\img1.gif" iconCollapsed="\images\img2.gif">
                      <!--Nested menu components-->
                </rich:panelMenuGroup>
          </rich:panelMenu>
    ...

## JavaScript API

In Java Script code for expanding/collapsing group element creation it's necessary to use Expand()/Collapse() function.

JavaScript API

Function | Description
--- | ---
Expand() | Expand group element
Collapse() | Collapse group element

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

- Redefine the corresponding skin parameters

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

## Skin Parameters Redefinition

Skin parameters redefinition for a table element of the first level group

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

Skin parameters redefinition for a table element of second and next level groups

Skin parameters | CSS properties
--- | ---
headerWeightFont | font-weight
headerFamilyFont | font-family
headerSizeFont | font-size
generalTextColor | color
tableBorderColor | border-top-color

Skin parameters redefinition for wrapper div element of the first level group

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

Skin parameters redefinition for a hovered group element

Skin parameters | CSS properties
--- | ---
additionalBackgroundColor | background-color

Skin parameters redefinition for a disabled group element

Skin parameters | CSS properties
--- | ---
tabDisabledTextColor | color

## Definition of Custom Style Classes

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

Classes names

Classes names that define an upper level groups

Class name | Description
--- | ---
rich-pmenu-top-group-div | Defines styles for a wrapper <div> element of a top group
rich-pmenu-top-group | Defines styles for a top group
rich-pmenu-top-group-self-icon | Defines styles for a top group icon
rich-pmenu-top-group-self-label | Defines styles for a top group label

Classes names that define a second and lower level groups

Class name | Description
--- | ---
rich-pmenu-group-div | Defines styles for a wrapper <div> element of a group
rich-pmenu-group | Defines styles for a group
rich-pmenu-group-self-icon | Defines styles for a group icon
rich-pmenu-group-self-label | Defines styles for a group label

Classes names that define a group state

Class name | Description
--- | ---
rich-pmenu-hovered-element | Defines styles for a hovered group element
rich-pmenu-disabled-element | Defines styles for a disabled group element

In order to redefine styles for all <rich:panelMenuGroup> 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:panelMenuGroup> components, define your own style classes in the corresponding <rich:panelMenuGroup> attributes.