Over a million developers have joined DZone.
Platinum Partner

JSF 2.0 Ajax For Beginners

· Java Zone

The Java Zone is brought to you in partnership with ZeroTurnaround. Discover how you can skip the build and redeploy process by using JRebel by ZeroTurnaround.

This tutorial is for people who want to get a quick start with JSF2.0 AJAX

1) Open Eclipse and create a new web project.

2) Put jsf-api.jar, jsf-imp.jar under the WEB-INF\lib folder.

3)Create juma.mohammad.MainBean class

package juma.mohammad;
import java.util.Date;
import javax.faces.bean.ManagedBean;
public class MainBean {
private String date = (new Date()).toString();
public void update() {
try {
date = (new Date()).toString();
} catch (InterruptedException e) {
public String getDate() {
return date;
public void setDate(String date) {
this.date = date;

Here we use the @ManagedBean JSF2.0 annotation. We marked here our MainBean as a JSF Backing Bean..

4) Web.xml as below:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
<servlet-name>Faces Servlet</servlet-name>
<servlet-name>Faces Servlet</servlet-name>

our url pattern is " *.jsf "

4) There is no need for faces-config.xml,  thanks to JSF 2.0 annotations :)

5)Create index.jsp and put it under the WebContent folder:

<% response.sendRedirect("main.jsf"); %>

6)Create main.xhtml page and put it under the WebContent folder as well:

<!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:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core">
<title>JSF 2.0 Simple Ajax...</title>
<style type="text/css" >
.ajaxResult { color: #440000;
font-weight: bold;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
<script language="javascript" type="text/javascript">
function showDateIndicator(data) {
showIndicatorRegion(data, "dateIndicator");

function showIndicatorRegion(data, regionId) {
if (data.status == "begin") {
document.getElementById(regionId).style.display = "inline";
} else if (data.status == "success") {
document.getElementById(regionId).style.display = "none";
<h:form id="myForm">

<h2>JSF 2.0 AJAX</h2>

<h:commandButton value="Update Date" action="#{mainBean.update}">
<f:ajax render="myForm:viewDate" onevent="showDateIndicator" />

<table border="0px">
<td><h:outputText value="#{mainBean.date}" id="viewDate" /></td>
<td><span class="ajaxResult" id="dateIndicator" style="display: none; font-size: 60%"> <img src="ajax-loader.gif" /> Loading data from server... </span></td>



Now, to enable Ajax behaviour we just need to use <f:ajax tag > which takes 2 attributes

a) rerender : which is responsible for updating a specific area on the page

b) onevent : here we call a Javascript function which will handle the ajax call, and it will take response data as argument.

We used it here to show AJAX indicator message , and once the response is received back from server this function will hide the AJAX indicator message.

7)Put this image ajax-loader.gif under WebContent folder:

8)Export the project as a war, and deploy it …

I hope you will find this tutorial useful 

From http://java4you.wordpress.com/2010/05/05/jsf-2-0-ajax-for-begginers/

The Java Zone is brought to you in partnership with ZeroTurnaround. Discover how you can skip the build and redeploy process by using JRebel by ZeroTurnaround.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}