Over a million developers have joined DZone.
Platinum Partner

JSF 2.0 Ajax For Beginners

· Java Zone

Learn more about Kotlin, a new programming language designed to solve problems that software developers face every day brought to you in partnership with JetBrains.

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/

The Java Zone is brought to you in partnership with JetBrains.  Discover how powerful static code analysis and ergonomic design make development not only productive but also an enjoyable experience.

Topics:

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

{{ parent.tldr }}

{{ parent.urlSource.name }}