Over a million developers have joined DZone.

JSF 2.0 Ajax For Beginners

DZone's Guide to

JSF 2.0 Ajax For Beginners

· Java Zone ·
Free Resource

Secure your Java app or API service quickly and easily with Okta's user authentication and authorization libraries. Developer accounts are free forever. Try Okta Instead.

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/

Secure your Java app or API service quickly and easily with Okta's user authentication and authorization libraries. Developer accounts are free forever. Try Okta Instead.


Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}