Skip to main content

Understanding Java Server Faces 2.0 Part 3

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
























Labels:



























































Popular posts from this blog





















Docker : Tomcat Clustering with Load Balancer (Tomcat and Nginx)




























  In this post i will show Tomcat Clustering in Docker Container. In  my previous post i discussed how to achieve tomcat clustering with Nginx Front end .    Its almost same scenario, but this time we will achieve via docker container.   Docker  Docker  is an  open-source  project that automates the deployment of  applications  inside  software containers , by providing an additional layer of abstraction and automation of  operating-system-level virtualization  on  Linux . [4]  Docker uses resource isolation features of the Linux kernel  such as  cgroups  and kernel  namespaces  to allow independent "containers" to run within a single Linux instance, avoiding the overhead of starting and maintaining  virtual machine   --Wikipedia   

























Read more






























Understanding Virtual Host Concept in Tomcat




























 Hi in this post we will see how to setup virtual host in Apache Tomcat server. Virtual Host is in-built feature that allows to deploy multiple website(domains) in single instance of tomcat server. The main benefit in this way is its cost effective.   Scenario:   I am going to deploy 3 website with following domain names in single tomcat    http://www.ramki.com  http://www.krishnan.com  http://www.blog.ramki.com   The following diagram is my outline.    Outline structure of Virtual Host Concept in Tomcat   Here my tomcat IP address 192.168.1.15. or any IP address allocated my ISP. but it should be public IP address.   How all domain names are pointing to my Tomcat?                    When we purchase the domain name we need to update the our tomcat IP address to it. like      or we can simulate same DNS Setup through hosts file in both Linux and Windows. In Linux tha file is located at  /etc/hosts   Now How Setup...

























Read more






























Virtual Host + Apache httpd server + Tomcat + mod_jk connector




























 In my last post ( Virtual Host in Tomcat ) we discussed about how setup the virtual host in Tomcat. Its cost effective technique because only one public IP is enough to host multiple domain. If we have big organization and each department want to host their website in locally in different machine. then how to achieve the virtual host concept?. In this post we will see the how we do this.     Update :   I posted  Virtual Host + Nginx + Tomcat  Its easy to configure, compare to Apache httpd server    Problem Scenario:          In big organization they have multiple department, each department want to host their website in different machine. so these websites are accessed locally with different local IP address.      When we mapping to public address then we face the problem. We have two choice either purchase as many public address or Put one server front  and delegate these request.   ...

























Read more