JSF 2.0 Ajax For Beginners

DZone 's Guide to

JSF 2.0 Ajax For Beginners

· Java Zone ·
Free Resource

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/


Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}