Wednesday 28 March 2012

DEMO FOR BUILT-IN AJAX SUPPORT IN JSF-2

    Just now I did a successful demo for built-in ajax support in jsf-2.
A simple tag <f:ajax> does the trick.
 The main point to be noted is the change in the JSF view page.



<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html
       xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html" >

 <h:body>

  <f:view>
     <h:form  id="form1">

      <h:inputText    id="text1"                            value="#{backing.name}" /><br/>

    <h:commandButton   id="button1"   value="echo">
            <f:ajax   execute="text1"  render="text2"/>
    </h:commandButton>

     <h:outputText  id="text2" value="#{backing.result}" />




     </h:form>
</f:view>

    </h:body>
</html>
***********************************************
The model is as usual


package mypack;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.*;


@ManagedBean(name="backing")
@SessionScoped






public class backing implements  Serializable
{


String  name=null;
String result;






       public void setName(String a){   name=a;  }
       public void setResult(String a){result=a;}




        public  String getName(){return name;}
        public  String getResult()
        {


        echobean    bean1=new  echobean();
        result  =  bean1.echothis(name);
              
         return  result;
        
       }


     //------------------------------------------



}
****************************************
The  helper class echobean is given below



package  mypack;


public  class  echobean
{
  public  String  echothis(String a)
  {


    return "echo  is       "+ a;
  
  }
}

***************************************
Explanation for the JSF code.
Carefully note that <f:ajax> tag occurs inside command button tags.

 <h:commandButton   id="button1"   value="echo">
            <f:ajax   execute="text1"  render="text2"/>
    </h:commandButton>

Screen shots follow
BEFORE AJAX CALL