Thodoris Bais

About Thodoris Bais

Thodoris Bais is currently working as a Junior Java Developer while on parallel, pursuing a diploma at Informatics & Telecommunications Engineering. He specializes in Java Core, Android and J2EE and looks forward to being a professional Software Engineer. He is also a quick learner and curious about new technologies.

Ajax Example with JSF 2.0

Hi there, you do remember right from my last example, today we ‘re gonna talk about integrating JSF together with Ajax. Ajax stands for Asynchronous Javascript and XML and is also a helpful technique for creating web pages with dynamic content (i.e. when you want to update a single component in your web page, instead of updating the whole page). This is implemented asynchronously by exchanging small amounts of data with the server, in the back-end. For further details about today’s example, refer here.

Everything is set up as is, in the previous two JSF examples, so we ‘ll dive quickly, into the technical part of the example.
 

1. JSF Page

Here is our JSF page that supports Ajax.

helloAjax.xhtml

<?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:head>
        <title>Ajax JSF Example</title>
    </h:head>
    <h:body>
    	<h3>JSF 2.2 Hello Ajax Example</h3>

    	<h:form>
    	   <h:inputText id="name" value="#{helloBean.name}"></h:inputText>
    	   <h:commandButton value="Welcome Me">
    	   		<f:ajax execute="name" render="output"/>
    	   </h:commandButton>
           <h2><h:outputText id="output" value="#{helloBean.sayWelcome}" /></h2>
    	</h:form>
    </h:body>
</html>

We ‘ll keep the same base with the previous example, so what will make our site Ajaxable, is the button. Thus, when in clicked, it will send a request to the server, instead of submitting the whole form.

The key code branch of the above snippet is this:

           <h:commandButton value="Welcome Me">
    	   		<f:ajax execute="name" render="output"/>
    	   </h:commandButton>
    	   <h2><h:outputText id="output" value="#{helloBean.sayWelcome}" /></h2>

What enables Ajax features of our page is the tag f:ajax. There are two processes that take part there:

  1. The execute="name" property indicated that a component, which id is equal to name, will be sent to server for processing. That is, the server is going to search the form component that matches the required id. In our case, we ‘re talking about the value of our inputText Keep in mind, that if we had more that one components that we might want to send to server for processing, we could just split them with a space character; for example, execute="id1 id2 id3".
  2. What comes after a request (in normal circumstances)? A response, of course, so our render="output" means that the server’s response will be rendered to a component, which id is output. Thus, in our case, the response will be displayed in the outputText component.

2. Managed Bean

Before reading the code for HelloBean.java, a small quote for the fore-mentioned key code snippet: the action that will make the outputText take the inputText‘s value, is its property of value="#{helloBean.sayWelcome}". If something isn’t clear till here, you have to refer to the previous example.

All right, here’s the structure of HelloBean.java.

HelloBean.java

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

@ManagedBean
@SessionScoped
public class HelloBean implements Serializable{

	private static final long serialVersionUID = 1L;

	private String name;

	public String getName()
	{
		return name;
	}

	public void setName(String name)
	{
		this.name = name;
	}

	public String getSayWelcome()
	{
		if("".equals(name) || name == null)
		{	return "" ; }
		else{
			return "Ajax message : Welcome " + name ;
			}
	}

}

3. Demo

You can test you application by simply hitting Run in your IDE, or by accessing the following URL: http://localhost:8080/AjaxJSFexample/:

imageA

What are we waiting for, after the button is clicked? The server’s response, which is implemeted from the getSayWelcome() method, without having the whole page refreshed:

AjaxJSF_B

This was an example of integrating Ajax together with JSF. You can also download the source code: AjaxJSFexample

Related Whitepaper:

Java Essential Training

Author David Gassner explores Java SE (Standard Edition), the language used to build mobile apps for Android devices, enterprise server applications, and more!

The course demonstrates how to install both Java and the Eclipse IDE and dives into the particulars of programming. The course also explains the fundamentals of Java, from creating simple variables, assigning values, and declaring methods to working with strings, arrays, and subclasses; reading and writing to text files; and implementing object oriented programming concepts. Exercise files are included with the course.

Get it Now!  

Examples Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use
All trademarks and registered trademarks appearing on Examples Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Examples Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.

Sign up for our Newsletter

15,153 insiders are already enjoying weekly updates and complimentary whitepapers! Join them now to gain exclusive access to the latest news in the Java world, as well as insights about Android, Scala, Groovy and other related technologies.

As an extra bonus, by joining you will get our brand new e-books, published by Java Code Geeks and their JCG partners for your reading pleasure! Enter your info and stay on top of things,

  • Fresh trends
  • Cases and examples
  • Research and insights
  • Two complimentary e-books
Get tutored by the Geeks! JCG Academy is a fact... Join Now
Hello. Add your message here.