ContextMenu

Overview

Since 3.0

ContextMenu provides a popup menu that is displayed on mouse right-click event.

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

Getting Started

<h:outputText id="intro" value=" Right click on this sentence to display a component specific menu"/>
......
<ace:contextMenu for="intro">
    <ace:menuItem value="Copy" icon="ui-icon ui-icon-disk" style="font-size: small;"
                  action="#{contextMenuComponent.performAction}">
        <f:param name="actionType" value="Text Copy" />
    </ace:menuItem>
    <ace:menuItem value="Translate" icon="ui-icon ui-icon-arrowrefresh-1-w" style="font-style: small;"
                  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.

for: id of the component context menu is for.

effect sets the effect for the menu display. Supports standard jQuery animations like "slide" and "fade".

effectDuration sets the effect duration in milliseconds.

Event Listeners

None.

Client Behavior Events

None.

JavaScript API

These components are based on The Wijmo Menu widget (see below for reference).

Keyboard and ARIA Support

The following ARIA roles are supported: menu, menuitem.

CSS Classes

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

<!-- Root container -->
<span>
	<div class="ui-widget ui-widget-content wijmo-wijmenu ui-corner-all ui-helper-clearfix wijmo-wijmenu-flyout [user defined classes]" style="[user defined styles]">
		<div class="scrollcontainer checkablesupport">
			<ul class="wijmo-wijmenu-list ui-helper-reset">
				<!-- First level submenu item -->
				<li class="ui-widget wijmo-wijmenu-item ui-state-default ui-corner-all wijmo-wijmenu-parent">
					<a class="wijmo-wijmenu-link ui-corner-all">
						<span class="wijmo-wijmenu-text">
							<span class="ui-icon ui-icon-document wijmo-wijmenu-icon-left"></span>
							<span class="wijmo-wijmenu-text">First level submenu label</span>
						</span>
						<span class="ui-icon ui-icon-triangle-1-e"></span>
					</a>
					<ul class="wijmo-wijmenu-list ui-widget-content ui-corner-all ui-helper-clearfix wijmo-wijmenu-child wijmo-wijmenu-flyout">
						<!-- Second level submenu item -->
						<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 ui-icon-disk wijmo-wijmenu-icon-left"></span>
									<span class="wijmo-wijmenu-text">Second level submenu label</span>
								</span>
							</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</span>

Known Issues

At the moment, specifying an effect does not work for IE 7 and IE 8, the default 'slide' effect will always be applied on such browsers.

There's a known issue when using MyFaces and building menus from a model. If the bean where the model is created is using a scope different than @SessionScope and the menu is not recreated at every request (e.g. only created in the constructor), then MyFaces will hand in a corrupt model object with loss of information to the component code. Visually, this looks like the menu disappears at the first dynamic update. The problem is related to serialization in MyFaces.
This situation can fixed by adding the following markup in the deployment descriptor:

<context-param>
 <param-name>org.apache.myfaces.SERIALIZE_STATE_IN_SESSION</param-name>
 <param-value>false</param-value>
 </context-param>

Alternatively, if adding the above parameter is not possible. This problem can be avoided by simply using @SessionScope in the bean that creates the model object. If this is not possible either, another solution is to simply generate the model at every request (e.g. in the getter method for the model).

There seems to be an issue when using a custom style class, not overriding certain styles defined by the current theme, even though the custom style class is added correctly at the end of the 'class' attribute of the root container. The way to fix this is by either forcing rule precedence by adding the '!important' keyword at the end of each rule in the custom class or by simply making the custom class more specific, in order to make it have more precedence. For example, instead of '.myClass', define the custom class as 'div.myClass'.

Additional Resources

Wijmo Menu Documentation