Menu Button

compared with
Current by Judy Guglielmin
on May 20, 2013 08:28.


 
Key
These lines were removed. This word was removed.
These lines were added. This word was added.

View page history


There are 7 changes. View first change.

 h3. MenuButton
  
 The MenuButton will allow the user to create a list of objects with a value, label, panelConfirmation and submitNotification which will trigger an ActionEvent when the option is selected.(Action and ActionListeners is supported)
  
 This component is styled for the devices that this project supports to most look and feel like the native html5 select tag on the devices/desktop browsers. As for all mobi components, use <mobi:deviceStylesheet to have proper css loaded for each device.
  This component is styled for the devices that this project supports to most look and feel like the native html5 select tag on the devices/desktop browsers. As for all mobi components, use {code} <mobi:deviceStylesheet> {code} or {code} <mobi:deviceResource> {code} to have proper css loaded for each device.
  
If an Action or ActionListener is required and form submission is not required or desired, then place a singleSubmit="true" attribute on the button and only the button will be submitted to the server, firing the Action/ActionListener's method, with the resulting update. Otherwise, the button will submit the entire form (normal function). This component also has {code} <mobi:ajax />{code} support
  MenuButtonGroup component will group the menuButtonItem components that represent the actual selected item.
  
If an Action or ActionListener is required and form submission is not required or desired, then place a singleSubmit="true" attribute on the button and only the button will be submitted to the server, firing the Action/ActionListener's method, with the resulting update. Otherwise, the button will submit the entire form (normal function). This component also has mobi:ajax support
  
 h3. Usage
  
 h4. Basic Use (no singleSubmit, mobi:ajax, panelConfirmation or submitNotification)
  
{code:xml}
 <mobi:menuButton id="mnu1" buttonLabel="Action Menu"
  selectTitle="Choose Item">
  <mobi:menuButtonGroup label="Group1">
  <mobi:menuButtonItem label="item1"
  actionListener="#{menuButton.choose1}"/>
  </mobi:menuButtonGroup>
  <mobi:menuButtonGroup label="Group2">
  <mobi:menuButtonItem label="item2a"
  actionListener="#{menuButton.choose2a}"/>
  <mobi:menuButtonItem label="item2b"
  actionListener="#{menuButton.choose2b}"/>
  </mobi:menuButtonGroup>
 </mobi:menuButton>
 {code}
<mobi:menuButton id="mnu1"
  buttonLabel="Action Menu"
  value="#{menuButton.dynamicMenuButton}"
  var="item">
  <mobi:menuButtonItem
  label="#{item.label}"
  actionListener="#{item.commandAction.execute}"/>
  </mobi:menuButton>
 {code}
  
 h4. Using singleSubmit (can be done by individual item in the backing bean for example). Can also choose a panelConfirmation or submitNotification the same way.
 {code}
  <mobi:menuButton id="menu1" value="#{menu.data}" var="item">
  <mobi:menuButtonItem value="#{item.value}" label="#{item.label}"
  singleSubmit="#{item.singleSubmit}"
  panelConfirmation="#{item.panelConfId}"
  submitNotification="#{item.submitNotif}"
  disabled="#{item.disabled}" actionListener="#{item.actionMethod}"/>
  </mobi:menuButton>
 {code}
 In the backing bean, just populate the values for each of the "item" attributes. In this way, for example, you may want to just have a "Cancel" selection in the menuButton submit itself and trigger a method with the actionListener attribute. In this way, the singleSubmit property for the "Cancel" option can be set to true while the other options can be triggering full form submit (if that is the required use-case).
  
h3. Attributes. This component actually requires the menuButton and menuButtonItem components
  h4. Can also use a collection bound to the value attribute with a var attribute denoting the individual record in the collection.
  
  
 {panel}
 h5. menuButton attributes
  
 * style - standard jsf component attribute
 * disabled - button will not submit
 * styleClass - for user to extend/overwrite the pre-defined, device-detected styleClasses
 * buttonLabel - label of the button itself
 {panel}
 {panel}
 h5. menuButtonItem attributes
  
 * singleSubmit - if true, then the menuButton submits itself only and renders @all (using DomDiff algorithm of course)
 * value - allows user to have a value of the option to use separate of label
 * label - allows user to have separate value for label (can use jsf messages.properties for i8N for example)
 * immediate - as per jsf specs
 * panelConfirmation - each menuButtonItem option may specify it's own panelConfirmation (or none as the case may be)
 * submitNotification - each menuButtonItem option may specify it's own submitNotification panel (or none as case may be)
 * disabled - allows each option to have it's own value for disabled.
 {panel}
  
 {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 not available until after the release [here|http://res.icesoft.org/docs/icemobile/v1_0_1/tld/mobi/menuButton.html].{tip}
  h3. Component Documentation
 [menuButton|http://res.icesoft.org/docs/icemobile/v1_latest/jsf/tld/mobi/menuButton.html]
 [menuButtonItem|http://res.icesoft.org/docs/icemobile/v1_latest/jsf/tld/mobi/menuButtonItem.html]

© Copyright 2016 ICEsoft Technologies Canada Corp.