Archive for May 5th, 2010

Hi, This tutorial for people who wants to start with JSF2.0 AJAX quickly …

ok, lets start..

1) Open your eclipse… create new web project.
2) put jsf-api.jar, jsf-imp.jar under 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 used @ManagedBean jsf2.0 annotation .. we marked here our MainBean as 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 as its clear is  ” *.jsf ”

4) No need for faces-config.xml… thanks for jsf2.0 annotations 🙂

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

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

6)create main.xhtml page and put it under 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 specific area in the page

b) onevent : here we call 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 response back from server this function will hide ajax indicator message.
7)put this image ajax-loader.gif under WebContent folder:

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

I hope you will find this tutorial useful 🙂

Read Full Post »