View Source

h3. Overview

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_.

h3. Usage
{code}
<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: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}

h3. Attributes

{info: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/v2_latest/ace/tld/ace/pushButton.html].{info}
{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.
{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}

h3. 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.

To enable/disable ARIA at page level, the [<icecore:config>|Core Tags#icecoreconfig] tag can used:

{code}
<icecore:config ariaEnabled="true"/>
{code}
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}
* 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.

h3. Storyboard

|| 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 | | ||