View Source

h2. Overview
_Since 3.1_

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

{tip}See the ICEfaces Showcase [Live Demo|] of this component, complete with source code.{tip}

h2. Getting Started
{code:xml|borderStyle=dashed}<ace:contextMenu ...>
<ace:menuItem value="Copy" icon="ui-icon ui-icon-disk" action="#{contextMenuComponent.performAction}">
<f:param name="actionType" value="Text Copy" />
<ace:menuItem value="Translate" icon="ui-icon ui-icon-arrowrefresh-1-w" action="#{contextMenuComponent.performAction}">
<f:param name="actionType" value="Text Translation" />
h2. Attributes
{tip:title=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|].{tip}
*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.
h2. 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. |

h2. Client Behavior Events

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

{tip}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.{tip}

h2. JavaScript API

Not applicable.

h2. Keyboard and ARIA Support

The following ARIA roles are supported: menuitem.

h2. 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>

h2. 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.

h2. Additional Resources