JBoss.orgCommunity Documentation

6.52.  < rich:menuGroup >

The <rich:menuGroup> component is used to define an expandable group of items inside a pop-up list or another group.


Table 6.218. rich : menuGroup attributes

Attribute NameDescription
bindingThe attribute takes a value-binding expression for a component property of a backing bean
converterId of Converter to be used or reference to a Converter
directionDefines direction of the popup sublist to appear ("right", "left", "auto"(Default), "left-down", "left-up", "right-down", "right-up")
disabledIf "true" sets state of the item to disabled state. Default value is "false".
eventDefines the event on the representation element that triggers the menu's appearance. Default value is "onmouseover".
iconPath to the icon to be displayed for the enabled item state
iconClassClass to be applied to icon element
iconDisabledPath to the icon to be displayed for the disabled item state
iconFolderPath to the folder icon to be displayed for the enabled item state
iconFolderDisabledPath to the folder icon to be displayed for the enabled item state
iconStyleCSS style rules to be applied to icon element
idEvery component may have a unique id that is automatically created if omitted
labelClassClass to be applied to label element
oncloseHTML: script expression; group was closed
onmousemoveHTML: a script expression; a pointer is moved within
onmouseoutHTML: a script expression; a pointer is moved away
onmouseoverHTML: a script expression; a pointer is moved onto
onopenHTML: script expression; group was opened
renderedIf "false", this component is not rendered
selectClassClass to be applied to selected items
selectStyleCSS style rules to be applied to selected items
showDelayDelay between event and menu showing. Default value is "300".
styleCSS style(s) is/are to be applied when this component is rendered
styleClassCorresponds to the HTML class attribute
valueDefines representation text for menuItem

Table 6.219. Component identification parameters

NameValue
component-typeorg.richfaces.MenuGroup
component-classorg.richfaces.component.html.HtmlMenuGroup
component-familyorg.richfaces.DropDownMenu
renderer-typeorg.richfaces.MenuGroupRenderer
tag-classorg.richfaces.taglib.MenuGroupTag

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

Example:


...
    <rich:dropDownMenu value="Active">
        ...
        <rich:menuGroup value="Active">
            <!--Nested menu components-->
        </rich:menuGroup>
        ...
    </rich:dropDownMenu >
...

Example:

import org.richfaces.component.html.HtmlMenuGroup;  

...
HtmlMenuGroup myMenuGroup = new HtmlMenuGroup();
...

The "value" attribute defines the text representation of a group element in the page.

The "icon" attribute defines an icon for the component. The "iconDisabled" attribute defines an icon for when the group is disabled. Also you can use the "icon" and "iconDisabled" facets. If the facets are defined, the corresponding "icon" and "iconDisabled" attributes are ignored and the facets' contents are used as icons. This could be used for an item check box implementation.

Here is an example:


...
    <f:facet name="icon">
        <h:selectBooleanCheckbox value="#{bean.property}"/>
    </f:facet>
...

The "iconFolder" and "iconFolderDisabled" attributes are defined for using icons as folder icons. The "iconFolder" and "iconFolderDisabled" facets use their contents as folder icon representations in place of the attribute values.

The "direction" attribute is used to define which way to display the menu as shown in the example below:

Possible values are:

By default, the "direction" attribute is set to "auto".

Here is an example:


...
        <rich:menuGroup value="Save As..." direction="left-down">
                <rich:menuItem   submitMode="ajax" value="Text File"  action="#{ddmenu.doSaveText}"/>
                <rich:menuItem   submitMode="ajax" value="PDF File"  action="#{ddmenu.doSavePDF}"/>
        </rich:menuGroup>
...

This would be the result:


Note:

The <rich:menuGroup> component was designed to be used only for pop-up menu list creation.


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




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




In order to redefine styles for all <rich:menuGroup> 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-menu-item-label-disabled{
        
font-style: italic;
}
...

This is a result:


In the example a disabled label font style was changed.

Also it's possible to change styles of particular <rich:menuGroup> component. In this case you should create own style classes and use them in corresponding <rich:menuGroup> styleClass attributes. An example is placed below:

Example:


...
.myClass{
    
background-color: #acbece; 
    
border: none;
}
...

The "selectClass" attribute for <rich:menuGroup> is defined as it's shown in the example below:

Example:


<rich:menuGroup value="Save As..." selectClass="myClass">

This is a result:


As it could be seen on the picture above, the background color for selected class was changed. Also selected class has no border.

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