Command Button

Table of Contents

CommandButton

Currently five types of commandButtons are defined within the mobility component project:

  1. unimportant
  2. important
  3. attention
  4. 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

Usage

Default button

       <mobi:commandButton value="Submit"/>

Using single submit

       <mobi:commandButton id="importantOne"
           buttonType="important" value="importantSStrue"
           singleSubmit="true"
           actionListener="#{input.importantEvent}"/>

Using commandButtons with panelConfirmation and submitNotification

      <mobi:commandButton id="importantOne"
           buttonType="important" value="importantSStrue"
           panelConfirmation="pn1"
           submitNotification="sn1"
           singleSubmit="true"
           actionListener="#{input.importantEvent}"/>

Using commandButton with <mobi:ajax>

     <mobi:commandButton id="withmobiAjax" value="clickMe">
          <mobi:ajax execute="@this" render="@this" listener="#{bean.listenerMethod}"/>
     </mobi:commandButton>

Also, see documentation on mobi:ajax for onStart, onComplete, onSuccess callbacks.

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.

     <mobi:commandButtonGroup orientation="#{button.orientation}"
                                         styleClass="#{button.styleClass}"
                                         disabled="#{button.groupDisabled}"
                                         style="#{button.buttonGroupStyle}">
         <mobi:commandButton value="Yes"
                             buttonType="${button.buttonType}">
         </mobi:commandButton>
         <mobi:commandButton value="No"
                            buttonType="#{button.buttonType}">
         </mobi:commandButton>
         <mobi:commandButton value="Please"
                            buttonType="#{button.buttonType}" >
         </mobi:commandButton>
     </mobi:commandButtonGroup>

Component Documentation

commandButton
commandButtonGroup
submitNotification
panelConfirmation

Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

© Copyright 2016 ICEsoft Technologies Canada Corp.