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 28 changes. View first change.

 h1. PushButton:
  h2. Overview
 _Since 2.0_
  
 page should look like:
 {code:xml}
 <html xmlns:ice="http://www.icefaces.org/icefaces/components"
  ..>
  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_.
  
<!-- can use either class of ice-skin-sam or ice-skin-rime -->
 <h:body class="ice-skin-sam">
  <h:form >
  <ice:pushbutton />
  <h:form>
 <h:body>
 <html>
 {code}
  {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}
  
*basic attributes:*
 &nbsp;actionListener, example:-
  
{code:xml}
  <h:form id="myform">
  <h:panelGroup id="push1">
  <ice:pushbutton id="pushId" label="submitForm"
  actionListener="#{button.actionListenerMethod}" />
 </h:panelGroup>
  h2. Getting Started
 {panel}
 {code:xml|borderStyle=dashed}
 <html ... xmlns:ace="http://www.icefaces.org/icefaces/components">
  
 <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
  
&nbsp;image and action
  {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.
  
{code:xml}
  <h:form id="myform2">
  <h:panelGroup id="push2">
  <ice:pushbutton id="pushId2" label="Action"
  singleSubmit="true"
  action="#{button.methodAction}" />
  </h:panelGroup>
  </h:form>
 {code}
  {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}
 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}
  
h2. Additional attributes:
  h2. Event Listeners
  
*&nbsp;Defining style:*
 &nbsp; a pass through to the root element of the component.
  As a descendant of UICommand, this component supports an action listener.
  
*&nbsp;Defining style class:*
 &nbsp; a pass through to the root element of the component.
  | actionListener | Method that will be notified when the component is activated by the user |
  
*&nbsp;Defining tabindex:*
 &nbsp; a pass through to the root element of the component, default=0.
  h2. Client Behavior Events
  
*&nbsp;Defining disabled:*
 &nbsp; a pass through to the root element of the component.
  | action | Fired when the button is clicked or pressed by any other means (default event). |
  
*&nbsp;Defining the submission behaviour:*
 &nbsp;When singleSubmit attribute is true, the pushbutton only submits an event request a submit call with execute=@this and render=@all, if false then full form submit happens where execute being set to @all. default valid is false.
  {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
  
h2. Keyboard and ARIA support:
  h4. ICEfaces 3.x
  
&nbsp;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.
  The client side component object is exposed through the global variable name specified in the *widgetVar* attribute.
  
&nbsp;To enable/disable ARIA at page level, the ice:config tag handler can used:
  h4. ICEfaces 4+
  
{code:xml}
  <ice:config ariaEnabled="true"/>
 {code}
  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.
  
&nbsp;To enable/disable ARIA at application level, the following param can be set in web.xml.
 {code:xml}
  <context-param>
  <param-name>org.icefaces.aria.enabled</param-name>
  <param-value>false</param-value>
  </context-param>
 {code}
  {code}var widget = ice.ace.instance('frm:componentId);{code}
  
h3. Keyboard short-cuts supported by pushbutton:
  {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}
  
* space or enter key will fire the button's onclick event
  {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}
  
&nbsp;Aria role="button", aria-describedby and aria-disabled properties supported
  h2. Keyboard and ARIA Support
  
h3. Storyboard
  The following ARIA roles are supported: button.
  
||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. 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}
  
 h2. Known Issues
  
 None.
  
 h2. Additional Resources
  
 None.

© Copyright 2018 ICEsoft Technologies Canada Corp.