panelMenuItem

Component identification parameters

Name | Value
--- | ---
component-type | org.richfaces.PanelMenuItem
component-class | org.richfaces.component.html.HtmlPanelMenuItem
component-family | org.richfaces.PanelMenuItem
renderer-type | org.richfaces.PanelMenuItemRenderer
tag-class | org.richfaces.taglib.PanelMenuItemTag

## Creating the Component with a Page Tag

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

Example:

    ...
          <rich:panelMenu>
                 ...
                <rich:panelMenuItem value="Item1"/>
                ...
          </rich:panelMenu>
    ...

## Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlPanelMenuItem;
    ...
    HtmlPanelMenuItem myPanelMenuItem = new HtmlPanelMenuItem();
    ...

## Details of Usage

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

The "mode" 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.

Here is an example for value "none" :

Example:

    ...
          <rich:panelMenu>
                ...
                <rich:panelMenuItem submitMode="none" onclick="document.location.href='http://labs.jboss.com/jbossrichfaces/">
                      <h:outputLink value="http://labs.jboss.com/jbossrichfaces/">
                            <h:outputText value="RichFaces Home Page"></h:outputText>
                      </h:outputLink>
                </rich:panelMenuItem>
                ...
          </rich:panelMenu>
    ...

There are two icon-related attributes. The "icon" attribute defines an icon. The "iconDisabled" attribute defines an icon for a disabled item.

Default icons are shown on the picture below:

Default icons

Here is an example:

Example:

    ...
          <rich:panelMenu>
                ...
                <rich:panelMenuItem ="Item 1.1" icon="chevronUp" />
                ...
          </rich:panelMenu>
    ...

As the result the picture is shown below:

Using an "icon" attribute

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

    ...
          <rich:panelMenu>
                ...
                <rich:panelMenuItem ="Item 1.1" icon="\images\img1.gif" />
                ...
          </rich:panelMenu>
    ...

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

- Redefine the corresponding skin parameters

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

## Skin Parameters Redefinition

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

Skin parameters | CSS properties
--- | ---
generalFamilyFont | font-family
generalWeightFont | font-weight
generalSizeFont | font-size
generalTextColor | color
panelBorderColor | border-top-color

Skin parameter redefinition for a disabled item

Parameter for disabled item | 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 the first level items

Class name | Description
--- | ---
rich-pmenu-top-item | Defines styles for a top panel menu item
rich-pmenu-top-item-icon | Defines styles for a top panel menu item icon
rich-pmenu-top-item-label | Defines styles for a top panel menu item label

Classes names that define the second and lower level items

Class name | Description
--- | ---
rich-pmenu-item | Defines styles for a panel menu item
rich-pmenu-item-icon | Definesstyles for a panel menu item icon
rich-pmenu-item-label | Defines styles for a panel menu item label

Classes names that define items state

Class name | Description
--- | ---
rich-pmenu-item-selected | Defines styles for a panel menu selected item
rich-pmenu-disabled-element | Defines styles for a disabled panel menu item
rich-pmenu-hovered-element | Defines styles for a hovered panel menu item

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