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 30 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"
 ..>
 <body>
  <h:form styleClass="yui3-skin-name">
  <ann:pushbutton />
  <h:form>
 <body>
 <html>
 {code}
  h2. Getting Started
 {panel}
 {code:xml|borderStyle=dashed}
 <html ... xmlns:ace="http://www.icefaces.org/icefaces/components">
  
*basic attributes:*
 &nbsp;actionListener, example:-
  
 {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: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">
  <ann:pushbutton id="pushId2" label="Action"
  singleSubmit="true"
  image="../images/image1.gif"
  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. Event Listeners
  
As a descendant of UICommand, this component supports an action listener.
  
h2. Additional attributes:
  | actionListener | Method that will be notified when the component is activated by the user |
  
*&nbsp;Defining style:*
 &nbsp; a pass through to the root element of the component.
  h2. Client Behavior Events
  
*&nbsp;Defining style class:*
 &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 tabindex:*
 &nbsp; a pass through to the root element of the component, default=0.
  {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 disabled:*
 &nbsp; a pass through to the root element of the component.
  h2. JavaScript API
  
*&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 3.x
  
The client side component object is exposed through the global variable name specified in the *widgetVar* attribute.
  
h2. Keyboard and ARIA support:
  h4. ICEfaces 4+
  
&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 "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 page level, the ice:config tag handler can used:
  {code}var widget = ice.ace.instance('frm:componentId);{code}
  
{code:xml}
  <ice:config ariaEnabled="true"/>
 {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}
  
&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}
  {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}
  
h3. Keyboard short-cuts supported by pushbutton:
  h2. Keyboard and ARIA Support
  
* space or enter key will fire the button's onclick event
  The following ARIA roles are supported: button.
  
&nbsp;Aria role="button", aria-describedby and aria-disabled properties supported
  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.