This is Third  part of JSF 2.0 discussion. Please visit part one  and part two

Update : New Post JasperReports in JSF

In this post we will discuss JSF with AJAX. In JSF 2.0 gives full support for ajax integration in web application. With Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page. so with help of ajax we will make more interactive page.   JSF 2.0 Faclets provide <f:ajax> tag for achieve ajax in web application without writing client side java script ajax code. JSF 2.0 takes care all of this.


JSF and ajax integration is one of the greatest feature. and no other framework provide this much easy ajax integration in web application.


Consider we have one simple web application it prompt the name and click submit button its display the name in same page in some where .


we will see this example without ajax 


index.xhtml




<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
      <center>
        <h1>JSF 2.0 Web Application</h1><br/>

        <h:form>
          Enter Your Name 
          <h:inputText value="#{demoBean.userName}"/>
          <h:commandButton value="Submit"/><br/>

          <h2>
             <h:outputLabel 
                    value="#{demoBean.sayHello()}"/>
          </h2>
       </h:form>
     </center>
    </h:body>
</html>



DemoBean.java








here when we click the submit button then entire page is refreshed, ie. complete page is downloaded from server and displayed in browser.



Integrate Ajax in JSF

     JSF 2.0 provides full ajax support. so we no need to write client side java script for ajax. JSF 2.0 container generate client side java script, if we use <f:ajax> tag.







If we use <f:ajax> tag then JSF 2.0 container attached one java script file in generated response code.

that java script handles all ajax related events/actions.



now we change above example, add ajax in jsf

index.xhtml


<?xml version='1.0' encoding='UTF-8' ?>

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
  <h:head>
        <title>Facelet Title</title>
  </h:head>
  <h:body>
   <center>
     <h1>JSF 2.0 Web Application</h1><br/><br/><br/>

      <h:form>
         Enter Your Name 
         <h:inputText id="user_name" value="#{demoBean.userName}"/>
         <h:commandButton value="Submit">
            <f:ajax execute="user_name" render="display"/>
         </h:commandButton><br/>

         <h2>  
           <h:outputLabel id="display" value="#{demoBean.sayHello()}"/>
         </h2>
       </h:form>
     </center>
    </h:body>
</html>




here each component need id attribute. to distinguish between various components in page. <f:ajax> tags have some attributes. we nested inside the command button. so ajax event occur when command button clicked. Browser send ajax request to server. JSF 2.0 container proceeds the request and send partial response back to browser. JSF supplied java script takes care to parse the partial response and applied to DOM tree.



this is partial response returned by container








we will see <f:ajax> tag attributes



execute - while send the ajax request what are the parameters(or form fields) attach with request. here some predefined values are

              @all - all components value in the page are submitted,

              @this- only one component where we attach ajax tag that component value is submitted,

              @form -  current form (where ajax tag attached) fields are submitted



render - what are components we need to refresh (or update). here i mentioned 'display'. so only update the component whose id is display.



event - when ajax request should happen. default value is click, when we attached with command Button. or default value is change ,when attache with input text. here possible values are blur, change, valueChange, click, dblclick, focus, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, mouseup, select.





now we modify the index.xhtml to call ajax event for every key up event.

 


comments are welcomed