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

 h1. PushButton:
  h2. Overview
 _Since 2.0_
  
See the namespace definition requirements on Slider component
  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}
  
  
 page should look like:
 {code:xml}
 <html xmlns:ann="http://www.icesoft.com/icefaces/component/annotated"
 ..>
 <h:body class="yui-skin-sam">
  <h:form >
  <ann:pushbutton />
  <h:form>
  h2. Getting Started
 {panel}
 {code:xml|borderStyle=dashed}
 <html ... xmlns:ace="http://www.icefaces.org/icefaces/components">
  
 <h:body>
<html>
   <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
  
*basic attributes:*
 &nbsp;actionListener, example:-
  {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="myform">
  <h:panelGroup id="push1" class="yui-button yui-push-button">
  <ann:pushbutton id="pushId" label="submitForm"
  actionListener="#{button.actionListenerMethod}" />
 </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}
  
&nbsp;image and action
  h2. Event Listeners
  
{code:xml}
  <h:form id="myform2">
  <h:panelGroup id="push2">
  <ann:pushbutton id="pushId2" label="Action"
  singleSubmit="true"
  image="../images/image1.gif"
  action="#{button.methodAction}" />
  </h:panelGroup>
  </h:form>
 {code}
  As a descendant of UICommand, this component supports an action listener.
  
| actionListener | Method that will be notified when the component is activated by the user |
  
h2. Client Behavior Events
  
h2. Additional attributes:
  | action | Fired when the button is clicked or pressed by any other means (default event). |
  
*&nbsp;Defining style:*
 &nbsp; a pass through to the root element of the component.
  {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}
  
*&nbsp;Defining style class:*
 &nbsp; a pass through to the root element of the component.
  h2. JavaScript API
  
*&nbsp;Defining tabindex:*
 &nbsp; a pass through to the root element of the component, default=0.
  h4. ICEfaces 3.x
  
*&nbsp;Defining disabled:*
 &nbsp; a pass through to the root element of the component.
  The client side component object is exposed through the global variable name specified in the *widgetVar* attribute.
  
*&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 submit happens where execute being set to @all. default valid is false.
  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.
  
h2. Keyboard and ARIA support:
  {code}var widget = ice.ace.instance('frm:componentId);{code}
  
&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.
  {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}
  
&nbsp;To enable/disable ARIA at page level, the ice:config tag handler can used:
  {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}
  
{code:xml}
  <ice:config ariaEnabled="true"/>
 {code}
  h2. Keyboard and ARIA Support
  
&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}
  The following ARIA roles are supported: button.
  
h3. Keyboard short-cuts supported by pushbutton:
  h2. CSS Classes
  
* space or enter key will fire the button's onclick event
  The following markup represents the basic HTML structure of the component and the CSS classes it uses.
  
&nbsp;Aria role="button", aria-describedby and aria-disabled properties supported
  {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}
  
h4. Storyboard
  h2. Known Issues
  
||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 |
 |
  None.
  
h2. Additional Resources
  
 None.

© Copyright 2018 ICEsoft Technologies Canada Corp.