JSF 2.0 Ajax

This is the second compilation of the tutorial Java EE 7 enterprise application development tutorial using Eclipse Kepler and GlassFish 4. In this tutorial, I’ve enhanced the application to purely use the JSF 2 Ajax. As shown in the following diagram, I used Firebug to trace the Ajax request and response. As you see, jsf.js is the magic of JSF 2 Ajax.

image

As shown in the above figure, when you add a new department, without refreshing the entire page, it updates the table under the “submit” button.

Here the source for the facelet

<!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:ui="http://java.sun.com/jsf/facelets"  
    xmlns:h="http://java.sun.com/jsf/html"  
    xmlns:f="http://java.sun.com/jsf/core">  
    <h:head>  
        <title>department</title>  
    </h:head>  
    <body>  
        <h:form id="dept\_form">  
            <p>  
                Department:  
                <f:ajax render="dept\_name\_Message">  
                    <h:inputText lable="department" id="dept\_name" value="#{dept.name}"/>  
                    <h:message id="dept\_name\_Message" for="dept\_name"></h:message>  
                </f:ajax>  
            </p>  
            <p>      
                <!-- h:commandButton value="submit" action="#{dept.addDept()}"/-->  
                <h:commandButton value="submit" action="#{dept.addDept()}">  
                    <f:ajax render=":all\_depts"/>  
                </h:commandButton>  
            </p>  
        </h:form>  
        <span id="msg"></span>  
        <h:dataTable id="all\_depts" value="#{dept.departments}" var="d">  
  
            <h:column>  
                <f:facet name="header">Dept Id</f:facet>  
                <h:outputText value="#{d.deptId}">  
                </h:outputText>  
                  
            </h:column>  
            <h:column>  
                <f:facet name="header">Department Name</f:facet>  
                <h:outputText value="#{d.name}">  
                </h:outputText>  
                  
            </h:column>  
  
        </h:dataTable>  
    </body>  
  
</html>

It is important to point out the “<f:ajax render=":all_depts"/>” which will render the label belongs to this “all_depts”.

Here the source for the managed bean.

package au.com.blogspot.ojitha.eafirstweb.managedbeans;  
  
import java.util.List;  
  
import javax.ejb.EJB;  
import javax.faces.bean.ManagedBean;  
import javax.faces.bean.SessionScoped;  
  
import org.hibernate.validator.constraints.NotEmpty;  
  
import au.com.blogspot.ojitha.eafirstejb.DepartmentService;  
import au.com.blogspot.ojitha.eafirstejb.domain.Department;  
  
@ManagedBean(name="dept")  
@SessionScoped  
public class DepartmentManagedBean {  
    @EJB(beanName="deptService")  
    DepartmentService deptService;  
      
    //This is the validation, when you change the focus (using tab key)  
    //the default message will be displayed in the facelet.  
    @NotEmpty  
    private String name;  
  
    public String getName() {  
        return this.name;  
    }  
  
      
    public void setName(String name) {  
        this.name = name;  
    }  
      
    public String addDept(){  
        if (this.name!=null){  
            this.deptService.save(this.name);  
        }  
          
        // this should be null otherwise, when user open the new tab in the same browser  
        // this will be saved again.  
        this.name=null;  
        return "";  
    }  
  
  
    /\*\*  
     \* Retrieve all the departments.  
     \* This will be displayed in the datatable with the id=all\_depts  
     \* @return  
     \*/  
    public List<Department> getDepartments() {  
        return this.deptService.getAllDepartments();  
    }  
  
}

It is important to note that the session scope is important for the Ajax as I understood. If anybody can do this within the more narrowed @requestscope, your comments are well come.

The source code of this blog is available in the GitHub.

Written with StackEdit.

Comments

Post a Comment

commented your blog

Popular posts from this blog

Parse the namespace based XML using Python

In this blog, I am considering how to parser and modify the xml file using python. For example, I need to parser the following xml 1 (slightly modified for this blog) and need to write the modified xml to out.xml file. Here the country.xml <?xml version="1.0"?> <actors xmlns:fictional="http://characters.example.com" xmlns="http://people.example.com"> <actor type='T1'> <name>John Cleese</name> <fictional:character>Lancelot</fictional:character> <fictional:character>Archie Leach</fictional:character> </actor> <actor type='T2'> <name>Eric Idle</name> <fictional:character>Sir Robin</fictional:character> <fictional:character>Gunther</fictional:character> <fictional:character>Commander Clement</fictional:character> </actor> </actors> In ...
Continue »

How To: GitHub projects in Spring Tool Suite

Image
The first step is sign up in the GitHub and create a  new project. For example I’ve created a new project Spring3part7 in the GitHub. Before add the projects you need to configure STS for GitHub access. For example, you need to add configuration as shown in the following picture Git local repository also important Now you are ready to pull the project from the GitHub, in the STS import menu select the following Now type the project name and click the ‘Search’ as shown in the following. However, when you select the found project click ‘Finish’ nothing will change in the STS interface. Now you are going to create real project. Here I am going to create simple utility project. This template project need to be created inside the imported GitHub project You have to give the same project name of the GitHub project as shown in the following project Now your project is ready to push. Before that you need to add ignore flag to all the folders and files except pom...
Continue »

EJB 3 JUnit testing with OpenEJB 3.1.4

This is quick example of how to create JUnit test to test the EJB 3.0 session bean. The approach is new innovation using @LocalClient. This will create EJB client for Java SE. The interface of the calculator class is, package com.ojitha.calculator; import javax.ejb.Local; @Local public interface CalculatorLocal { public int add(int a, int b); } This is the implement of the Calculator package com.ojitha.calculator; import javax.ejb.Stateless; /** * Session Bean implementation class Calculator */ @Stateless public class Calculator implements CalculatorLocal { /** * Default constructor. */ public Calculator() { } @Override public int add(int a, int b) { return a + b; } } Let's look at the openEJB based JUnit test class package com.ojitha.calculator; import static org.junit.Assert.*; import java.util.Properties; import javax.ejb.EJB; import javax.naming.InitialContext; import org.apache.openejb.api.LocalClient; import org.junit.After; import o...
Continue »