PushButton

compared with
Current by Arturo Zambrano
on Jan 12, 2016 14:43.


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

View page history


There are 13 changes. View first change.

 h2. Overview
 _Since 2.0_
  
 The _ace:pushButton_ component allows submission of a form in it's entirety or also the submission of itself only. This component supports an action attribute as well as an _actionListener_ attribute similar to a _h:commandButton_.
  
{tip}See the ICEfaces Showcase [Live Demo|http://icefaces-showcase.icesoft.org/showcase.jsf?grp=aceMenu&exp=pushButton] of this component, complete with source code.{tip}
  
  
 h2. Getting Started
 {panel}
 {code:xml|borderStyle=dashed}
 <html ... xmlns:ace="http://www.icefaces.org/icefaces/components">
  
<!-- can use either class of ice-skin-sam or ice-skin-rime -->
 <h:body class="ice-skin-sam">
  <h:body>
  <h:form >
  <h:panelGroup id="push1">
  <ace:pushButton
  id="pushId"
  value="submit"
  label="this button submits the entire form"
  actionListener="#{button.actionListenerMethod}" />
  </h:panelGroup>
  </h:form>
 </h:body>
 {code}
 {panel}
 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|http://www.icefaces.org/docs/v3_latest/ace/tld/ace/pushButton.html].{tip}
  {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|http://www.icefaces.org/docs/v4_latest/ace/tld/ace/pushButton.html].{tip}
 {panel}
 *value* refers to the text written on the button, similar to that of jsf commandButton.
 {panel}
 {panel}
 *label* If no value present, the label will be used for the pushButton. Otherwise if both are used, the label will be used to define the aria-role, described-by.
  
 {panel}
 {panel}
 *style:* a pass through to the root element of the component.
 {panel}
 {panel}
 *styleClass* a pass through to the root element of the component.
 {panel}
 {panel}
 *tabindex* a pass through to the root element of the component, default=0.
 {panel}
 {panel}
 *disabled* a pass through to the root element of the component.
 {panel}
 {panel}
*singleSubmit* When singleSubmit attribute is true, the pushbutton only submits an event request via submit call with execute=@this and render=@all, in other words, only the button is submitted with any action/actionListener attributes. If false then full form submit happens where execute being set to @all.
 Default valid is false.
  The following attributes are supported as pass-thru attributes: *accesskey*, *alt*, *dir*, *label*, *lang*, *style*, *tabindex*, *title*, *onchange*, *onselect*, *onclick*, *ondblclick*, *onkeydown*, *onkeypress*, *onkeyup*, *onmousedown*, *onmousemove*, *onmouseout*, *onmouseover*, *onmouseup*, *onblur*, *onfocus*
 {panel}
{panel}
 The following attributes are supported as pass-thru attributes: *accesskey*, *alt*, *dir*, *label*, *lang*, *style*, *tabindex*, *title*, *type*, *onchange*, *onselect*, *onclick*, *ondblclick*, *onkeydown*, *onkeypress*, *onkeyup*, *onmousedown*, *onmousemove*, *onmouseout*, *onmouseover*, *onmouseup*, *onblur*, *onfocus*
 {panel}
 h2. ARIA and Keyboard Navigation Support
  
Pushbutton component supports keyboard short-cuts and ARIA. Aria support can be enabled at page level or at application level. By default ARIA is enabled at application level.
  h2. Event Listeners
  
To enable/disable ARIA at page level, the [<icecore:config>|Core Tags#icecoreconfig] tag can used:
  As a descendant of UICommand, this component supports an action listener.
  
{panel}
 {code:xml|borderStyle=dashed}
 <icecore:config ariaEnabled="true"/>
  | actionListener | Method that will be notified when the component is activated by the user |
  
 h2. Client Behavior Events
  
 | action | Fired when the button is clicked or pressed by any other means (default event). |
  
 {tip}Prior to 4.0 this event was named "activate". The "activate" event name is now deprecated but treated as an alias for "action" for backwards compatibility with existing applications.{tip}
  
 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.
 {info}
  
 h2. Keyboard and ARIA Support
  
 The following ARIA roles are supported: button.
  
 h2. CSS Classes
  
 The following markup represents the basic HTML structure of the component and the CSS classes it uses.
  
 {code:xml}
 <div class="yui-content ui-tabs-panel ui-widget-content ui-corner-bottom">
  <div>
  <div class="ui-tabs-panel ui-widget-content ui-corner-bottom">
  <div class="[user defined classes]" style="[user defined styles]">
  <span class="first-child">
  <button class="ui-button ui-widget ui-state-default ui-corner-all">
  <span>Label</span>
  </button>
  </span>
  </div>
  </div>
  </div>
 </div>
 {code}
{panel}
 To enable/disable ARIA at application level, the following param can be set in web.xml.
 {panel}
 {code:xml|borderStyle=dashed}
 <context-param>
  <param-name>org.icefaces.aria.enabled</param-name>
  <param-value>false</param-value>
 </context-param>
 {code}
 {panel}
 * space or enter key will fire the button's onclick event
  
Aria _role="button"_, aria-describedby and aria-disabled properties supported
 The ARIA implementation is based on the specification at [button aria practices|http://www.w3.org/TR/wai-aria-practices/#button]. Currently only the basic ARIA attributes and single-key keyboard shortcuts have been implemented.
  h2. Known Issues
  
h2. Storyboard
  None.
  
 || Action || focus || hover || active || disabled || onkeypress || aria ||
 || yui-class | yui-button-focus | yui-button-hover | yui-button-active | yui-button-disabled | space or enter will submit | role, disabled, description ||
 || Submit | | | submit form & queus event | none | submit form/queue event | ||
 || Single Submit | | | submit button only & queue event | none | submit form/queue event | ||
 || Action ||
 || ActionListener ||
 || Screen Reader | description | description | role & description | role | | ||
  h2. Additional Resources
  
 None.

© Copyright 2018 ICEsoft Technologies Canada Corp.