MenuItem

Overview

Since 3.1

MenuItem is used by various menu components to specify the menu items.

See the ICEfaces Showcase Live Demo of this component, complete with source code.

Getting Started

<ace:contextMenu ...>
    <ace:menuItem value="Copy" icon="ui-icon ui-icon-disk" action="#{contextMenuComponent.performAction}">
        <f:param name="actionType" value="Text Copy" />
    </ace:menuItem>
    <ace:menuItem value="Translate" icon="ui-icon ui-icon-arrowrefresh-1-w" action="#{contextMenuComponent.performAction}">
        <f:param name="actionType" value="Text Translation" />
    </ace:menuItem>
</ace:contextMenu>

Attributes

TagLib Documentation
This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component is available here.

value specifies the label of the menu item.

action and actionListener are the standard JSF listeners for menu item activation.

icon specifies icon style class(es) to control display and positioning of icon images.

url is URL to be navigated to when menu item is activated.

target specifies where to open linked URL. Same as HTML target attribute.

Event Listeners

action	The application action to invoke when this component is activated by the user.
actionListener	An action listener method that will be notified when this component is activated by the user.

Client Behavior Events

action

Fired when the menu item is clicked or selected by any other means (default event).

Prior to 4.0 this event was named "activate". The "activate" event name is now deprecated but treated as an alias for "action" for backwards compatibility with existing applications.

JavaScript API

Not applicable.

Keyboard and ARIA Support

The following ARIA roles are supported: menuitem.

CSS Classes

The following markup represents the basic HTML structure of the component and the CSS classes it uses.

<li class="ui-widget wijmo-wijmenu-item ui-state-default ui-corner-all">
	<a class="wijmo-wijmenu-link ui-corner-all">
		<span class="wijmo-wijmenu-text">
			<span class="ui-icon wijmo-wijmenu-icon-left"></span>
			<span class="wijmo-wijmenu-text <user defined classes>" style="<user defined styles>">Menu item label</span>
		</span>
	</a>
</li>

Known Issues

Whenever a menu item is dynamically changed, without updating the entire menu in which it is, it may appear to lose some styling and behaviour. This is so, because the nodes corresponding to the menu item were replaced without re-initializing the whole menu on the client, which applies additional styling and behaviour. For these cases, simply set the forceMenuUpdate attribute to true in an event listener when the change in the menu item occurs, and the whole menu will be updated to keep all the necessary styling and bahaviour for the menu to work properly. This attribute will be automatically set back to false by the component after being consumed.