Over a million developers have joined DZone.

JSF 2.0 Ajax For Beginners

· Java Zone

Bitbucket is for the code that takes us to Mars, decodes the human genome, or drives your next car. What will your code do? Get started with Bitbucket today, it's free.

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;
@ManagedBean
public class MainBean {
private String date = (new Date()).toString();
public void update() {
try {
Thread.sleep(4000);
date = (new Date()).toString();
} catch (InterruptedException e) {
e.printStackTrace();
}
}
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>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>

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">
<h:head>
<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;
}
</style>
<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";
}
}
</script>
</h:head>
<h:body>
<h:form id="myForm">

<h2>JSF 2.0 AJAX</h2>
<br/>

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

<table border="0px">
<tr>
<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>
</tr>

</table>

</h:form>
</h:body>
</html>

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/

Bitbucket is the Git solution for professional teams who code with a purpose, not just as a hobby. Get started today, it's free.

Topics:

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}