Command Button

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


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

View page history


There are 5 changes. View first change.

 h3. CommandButton
  
 Currently five types of commandButtons are defined within the mobility component project:
 # unimportant
 # important
 # attention
 # back
  
 If no type is fined, a default style will be applied.
  
 Each of these buttons supports the ability to use Action and ActionListeners, and basic normal JSF button support.
  
 As of 1.0.0.EE and 1.1.0 releases, this component will also support *panelConfirmation* and *submitNotification* attributes which determine the presence/absence of a panelConfirmation popup and/or a submitNotification component.
  
 Each is styled for the devices that this project supports to most look and feel like the native buttons on the devices. (use <mobi:deviceStylesheet 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 {{<mobi:ajax />}} support
  
 h3. Usage
  
 h4. Default button
  
 {code:xml}
  <mobi:commandButton value="Submit"/>
 {code}
  
 h4. Using single submit
 {code:xml}
  <mobi:commandButton id="importantOne"
  buttonType="important" value="importantSStrue"
  singleSubmit="true"
  actionListener="#{input.importantEvent}"/>
 {code}
  
 h4. Using commandButtons with panelConfirmation and submitNotification
  
 {code:xml}
  <mobi:commandButton id="importantOne"
  buttonType="important" value="importantSStrue"
  panelConfirmation="pn1"
  submitNotification="sn1"
  singleSubmit="true"
  actionListener="#{input.importantEvent}"/>
 {code}
  
 h4. Using commandButton with {{<mobi:ajax>}}
 {code:xml}
  <mobi:commandButton id="withmobiAjax" value="clickMe">
  <mobi:ajax execute="@this" render="@this" listener="#{bean.listenerMethod}"/>
  </mobi:commandButton>
 {code}
 Also, see documentation on mobi:ajax for onStart, onComplete, onSuccess callbacks.
  
 h4. Button Grouping
  
 Button grouping allows buttons to be styled in grouped fashion. Groupings are often used for buttons bars in either a vertical or horizontal orientation. Grouping orientation can be specified with the orientation attribute. If disabled, then the selected button may not be modified.
  
 {code:xml}
 <mobi:commandButtonGroup orientation="#{button.orientation}"
  <mobi:commandButtonGroup orientation="#{button.orientation}"
  styleClass="#{button.styleClass}"
  disabled="#{button.groupDisabled}"
  style="#{button.buttonGroupStyle}">
<mobi:commandButton value="Yes"
  <mobi:commandButton value="Yes"
  buttonType="${button.buttonType}">
</mobi:commandButton>
 <mobi:commandButton value="No"
  </mobi:commandButton>
 <mobi:commandButton value="No"
  buttonType="#{button.buttonType}">
</mobi:commandButton>
 <mobi:commandButton value="Please"
  </mobi:commandButton>
 <mobi:commandButton value="Please"
  buttonType="#{button.buttonType}" >
 </mobi:commandButton>
 </mobi:commandButtonGroup>
  </mobi:commandButton>
 </mobi:commandButtonGroup>
 {code}
  
  
 h3. Component Documentation
 [commandButton|http://res.icesoft.org/docs/icemobile/v1_latest/jsf/tld/mobi/commandButton.html]
 [commandButtonGroup|http://res.icesoft.org/docs/icemobile/v1_latest/jsf/tld/mobi/commandButtonGroup.html]
 [submitNotification|http://res.icesoft.org/docs/icemobile/v1_latest/jsf/tld/mobi/submitNotification.html]
 [panelConfirmation|http://res.icesoft.org/docs/icemobile/v1_latest/jsf/tld/mobi/panelConfirmation.html]

© Copyright 2016 ICEsoft Technologies Canada Corp.