View Source

h2. Overview
_Since 3.1_

MenuButton uses a button to trigger a popup menu.

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

h2. Getting Started
{code:xml|borderStyle=dashed}<ace:menuButton value="Texts">
<ace:menuItem value="Copy" .../>
<ace:menuItem value="Translate" .../>
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* sets the label of the button.
*effect* sets the effect for the menu display. Supports standard jQuery animations like "slide" and "fade".
*effectDuration* sets the effect duration in milliseconds.
h2. Event Listeners
h2. Client Behavior Events


h2. JavaScript API

h4. ICEfaces 3.x

The client side component object is exposed through the global variable name specified in the *widgetVar* attribute.

h4. ICEfaces 4+

The "widgetVar" attribute on the ACE components has been removed in ICEfaces 4 and in its place a new "ice.ace.instance()" client JavaScript object lookup API has been introduced. The reason for this change is to enable lazy-initialization of the ACE component JavaScript objects to improve runtime performance and reduce browser memory use.

{code}var widget = ice.ace.instance('frm:componentId);{code}

{tip}The _ice.ace.instance_ function requires the _full_ client id of the component to be specified, such as "j_idt77:componentId" instead of just "componentId". To reduce the complexity of working with complete IDs with this function it may be preferable in some cases to use {{prependId="false"}} in the enclosing form (e.g. _<h:form prependId="false">_).{tip}

{info}This component doesn't have a client-side API made specifically to be used by application developers. However, the component's internal methods and variables can be accessed in this way, including the underlying jQuery object and objects from underlying Javascript libraries (if applicable), and can be used for whatever purpose a developer might have in mind.

h2. Keyboard and ARIA Support

The following ARIA roles are supported: button, menu, menuitem.

h2. Known Issues

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:
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'.
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

h2. CSS Classes

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

<!-- Root container -->
<span style="[user defined styles]" class="wijmo-wijmenu-menubutton [user defined classes]">
<!-- Button -->
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary ui-state-hover">
<span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s"></span>
<span class="ui-button-text">Menu Button</span>
<!-- Drop down menu -->
<div class="ui-widget ui-widget-content wijmo-wijmenu ui-corner-all ui-helper-clearfix">
<div class="scrollcontainer checkablesupport">
<ul class="wijmo-wijmenu-list ui-helper-reset">
<!-- Menu 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="wijmo-wijmenu-text">Menu item label</span>