<?xml version='1.0' encoding='UTF-8'?>
<chapter> 
  <chapterinfo>
    <keywordset>
      <keyword>a4j:commandButton</keyword>
    </keywordset>
  </chapterinfo>
      <para><table frame="all">
 <title>Component identification parameters</title>
        <tgroup cols="2">
	  <thead>
            <row>
                <entry>Name</entry>
                <entry>Value</entry>
            </row>
       </thead>
          <tbody>
            <row>
              <entry>component-type</entry>
              <entry>org.ajax4jsf.CommandButton</entry>
            </row>
            <row>
              <entry>component-family</entry>
              <entry>javax.faces.Command</entry>
            </row>
            <row>
              <entry>component-class</entry>
              <entry>org.ajax4jsf.component.html.HtmlAjaxCommandButton</entry>
            </row>
            <row>
              <entry>renderer-type</entry>
              <entry>org.ajax4jsf.components.AjaxCommandButtonRenderer</entry>
            </row>
          </tbody>
        </tgroup>
      </table></para>
        <section>
      <title>Creating on a page</title>
          <para>The simplest tag usage example:</para>
          <para>
            <emphasis role="bold">Example:</emphasis>
          </para>
          <programlisting role="XML"><![CDATA[...
<a4j:commandButton reRender="someData" action="#{bean.action1}" value="Link"/>
...]]></programlisting>
            
    </section>
	  <section>
      <title>Creating the Component Dynamically Using Java</title>

  <para>
      <emphasis role="bold">Example:</emphasis>
 </para>
	    <programlisting role="JAVA"><![CDATA[import org.ajax4jsf.component.html.HtmlAjaxCommandButton;
...
HtmlAjaxCommandButton myButton = new HtmlAjaxCommandButton();
...
]]></programlisting>
    </section>
    <section>
      <title>Key attributes and ways of usage</title>
      <para><emphasis role="bold"><property>&lt;a4j:commandButton&gt;</property></emphasis> is used in the same way as <emphasis role="bold"><property>&lt;h:commandButton&gt;</property></emphasis>, but with definition of the area that is updated after the response comes back from the server.</para>
      <para>This definition of the component provides a link, a click on the link causes an Ajax form submit on the server, <code>action1</code> method performance, and rendering of the component with <code>someData</code> id after the response comes back from the server.</para>
      <para>The component <emphasis role="bold"><property>&lt;a4j:commandButton&gt;</property></emphasis> placed on a page generates the following HTML code:</para>
	  <programlisting role="XML"><![CDATA[...
<input type="submit" onclick="A4J.AJAX.Submit(...request parameters);return false;" value="sort"/>
...]]></programlisting>
      <para>Hence, the utility method <code>A4J.AJAX.Submit</code> is called on a click, the method performs Ajax request as the <emphasis role="bold"><property>&lt;a4j:support&gt;</property></emphasis> component</para>
	 <note>
      <title>Note:</title>
      <para>AJAX support is built in and it&apos;s not necessary to add nested <emphasis role="bold"><property>&lt;a4j:support&gt;</property></emphasis> to the component.</para>
	 </note>
      <para>
        The usage of the keyword <code>&apos;this&apos;</code> in JavaScript code in the <emphasis><property>&quot;oncomplete&quot;</property></emphasis> attribute 
        depends on the location of <emphasis role="bold"><property>&lt;a4j:commandButton&gt;</property></emphasis>. If the <property>commandButton</property> is situated outside the re-rendered region
        you can use keyword <property>&apos;this&apos;</property> as in the following example:  
      </para>
       <programlisting role="XML"><![CDATA[...
<h:form id="form"> 
  <a4j:commandButton id="cbutton" action="director.rollCamera" 
           onclick="this.disabled=true" 
           oncomplete="this.disabled=false" /> 
</h:form>
...
]]></programlisting>
      <para>
        Otherwise if the <property>commandButton</property> contained in re-rendered region
        the <emphasis><property>&quot;oncomplete&quot;</property></emphasis> attribute has a problem obtaining a reference of the <property>commandButton</property> object 
        when using the keyword  <code>&apos;this&apos;</code>. In this case you can use  the <emphasis><property>&quot;oncomplete&quot;</property></emphasis> attribute as in the following example:
      </para>
      <programlisting role="XML"><![CDATA[...
<h:form id="form"> 
<a4j:commandButton id="cbutton" action="director.rollCamera" 
         onclick="this.disabled=true" 
         oncomplete="document.getElementById('form:cbutton').disabled=false" /> 
</h:form>
...
]]></programlisting>
	  <para>Common JSF navigation could be performed after an Ajax submit and partial rendering, but Navigation Case must be defined as <emphasis role="bold"><property>&lt;redirect/&gt;</property></emphasis> in order to avoid problems with some browsers.</para>
      <para>As any Core Ajax component sending Ajax requests and processing server responses 
        <emphasis role="bold"><property>&lt;a4j:commandButton&gt;</property></emphasis> has all attributes described above 
        (see <emphasis role="bold"><property>&lt;a4j:support&gt;</property></emphasis> <link linkend="support">chapter</link>)
        that provide the required behavior of requests sending (delay, limitation of submit area and rendering, and etc.)</para>
      <para>
        Information about the <emphasis><property>&quot;process&quot;</property></emphasis> attribute usage you can find <link linkend="process">here</link>.
      </para>
    </section>
  <section>
    <title>Relevant resources links</title>
	<para>
	  <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/commandButton.jsf?c=commandButton">Here</ulink> you can see the example of <emphasis role="bold"
	    ><property>&lt;a4j:commandButton&gt;</property></emphasis> usage and sources for the given example.
	</para>
  </section> 	
</chapter>