JBoss.orgCommunity Documentation
The <rich:panelMenuItem> component is used to define a single item inside popup list.
Highly customizable look-and-feel
Different submission modes
Optionally supports any content inside
Custom and predefined icons supported
Support for disabling
Table 6.250. rich : panelMenuItem attributes
Table 6.251. 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 |
To create the simplest variant on a page use the following syntax:
Example:
...
<rich:panelMenu>
...
<rich:panelMenuItem value="Item1"/>
...
</rich:panelMenu>
...
Example:
import org.richfaces.component.html.HtmlPanelMenuItem;
...
HtmlPanelMenuItem myPanelMenuItem = new HtmlPanelMenuItem();
...
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 mode="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:
Here is an example:
Example:
...
<rich:panelMenu>
...
<rich:panelMenuItem value="Item 1.1" icon="chevronUp" />
...
</rich:panelMenu>
...
As the result the picture is shown below:
It's also possible to define a path to the icon. Simple code is placed below.
...
<rich:panelMenu>
...
<rich:panelMenuItem value="Item 1.1" icon="\images\img1.png" />
...
</rich:panelMenu>
...
Information about the "process" attribute usage you can find in the "Decide what to process" guide section.
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
Table 6.252. 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 |
Table 6.253. Skin parameter redefinition for a disabled item
Parameter for disabled item | CSS properties |
---|---|
tabDisabledTextColor | color |
On the screenshot there are classes names that define styles for component elements.
Table 6.254. 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 |
Table 6.255. 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 | Defines styles for a panel menu item icon |
rich-pmenu-item-label | Defines styles for a panel menu item label |
Table 6.256. 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 (possible classes could be found in the tables above) and define necessary properties in them.
Example:
...
.rich-pmenu-hovered-element {
background-color: #ff7800;
}
...
This is a result:
In the example a hovered element background color was changed.
Also it's possible to change styles of particular <rich:panelMenuItem> component. In this case you should create own style classes and use them in corresponding <rich:panelMenuItem> styleClass attributes. An example is placed below:
Example:
...
.myClass {
color: #a0a0a0;
}
...
The "disabledClass" attribute for <rich:panelMenuItem> is defined as it's shown in the example below:
Example:
<rich:panelMenuItem ... disabledClass="myClass"/>
This is a result:
As it could be seen on the picture above, the text color for disabled item was changed.
Some additional information about usage of component can be found on this LiveDemo page.