Java Tutorial Blog

JSF 2 Ajax Progress Bar Example

//  by 

One of the major issues that could be cause a headache for the end user when the web application support Ajax, is the indicator of being things are going or happening. Most of web applications doesn’t consider such that indicator, so the end user may submit the form multiple times or canceling it or do any operation on the site in an improper way. Such a scenario may cause the application to act in a wrong way.

Inside JSF 2.0, you can monitor your Ajax request once you have been using f:ajax’s onevent attribute. That attribute’s value must be a JavaScript function. JSF calls that function at each stage of an Ajax request: begin, complete & success. While the application has been doing a certain process, the application shows an animated progress shape. When the Ajax call returns, the application hides the progress shape.

Also Read:

The meaning of stages that mentioned is as follow:

  • begin: Just before JSF sends the Ajax call to the server.
  • success: Just after the Ajax response is rendered.
  • complete: For a successful call, JSF calls this method just after the execute potion of the lifecycle, which by definition means just before the render portion. For errors, JSF calls this method just before it invokes the error handler. You typically set the error handler either with the onevent attribute of f:ajax or with the JSF JavaScript APIs.

JSF passes a data object to any JavaScript function that’s registered with an Ajax call via f:ajax’s onevent attribute. That data object’s attributes are listed in the below lines:

  • status: The status of the current Ajax call. Must be one: begin, complete or error.
  • type: Either event or status.
  • source: The DOM element that is the source of the event.
  • responseXML: The response to the Ajax request. This object is undefined in the begin phase of the Ajax request.
  • responseText: The XML response, as a text. This object is also undefined in the begin phase of the Ajax request.
  • responseCode: The numeric response code of the Ajax request. Like responseXML and responseText, this object is undefined in the begin phase of the Ajax request.

1. The View

index.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
<h:head>
	<script>
		function monitor(data){
			var loading = document.getElementById("image");
			if(data.status == "begin"){
				loading.style.display = "block";
			}
			else if(data.status == "success"){
				loading.style.display = "none";
			}
		}
	</script>
	<h:outputScript library="javax.faces" name="jsf.js"/>
</h:head>
<h:body>
	<f:view>
		<h1>JavaBeat JSF 2.2 Examples</h1>
		<h2>JSF2 Ajax Monitoring Example</h2>
		<h:form prependId="false">
			<h:inputText id="input" value="#{indexBean.message}"/>
			#{' '}
			<h:commandButton value="Display Text" action="#{indexBean.action}">
				<f:ajax execute="@this input" render="output" onevent="monitor"></f:ajax>
			</h:commandButton>
			#{' '}
			<h:outputText id="output" value="#{indexBean.message}"></h:outputText>
			<h:graphicImage id="image" value="#{resource['images:ajax-loader.gif']}" style="display:none;"></h:graphicImage>

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

2. Managed Bean

IndexBean.java

package net.javabeat.jsf;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class IndexBean {
	private String message;

	public String getMessage() {
		return message;
	}

	public void setMessage(String message) {
		this.message = message;
	}

	public String action() throws Exception{
		Thread.sleep(6000);
		System.out.println(message);
		return "";
	}
}

3. The Deployment Descriptor (web.xml)

web.xml

<?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"
	id="WebApp_ID" version="2.5" metadata-complete="true">
	<context-param>
		<description>State saving method: 'client' or 'server'
						(=default). See JSF Specification 2.5.2
		</description>
		<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
		<param-value>client</param-value>
	</context-param>
	<context-param>
		<param-name>javax.faces.application.CONFIG_FILES</param-name>
		<param-value>/WEB-INF/faces-config.xml</param-value>
	</context-param>
	<servlet>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>/faces/*</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.xhtml</url-pattern>
	</servlet-mapping>
	<listener>
		<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
	</listener>
</web-app>

4. JSF 2 Ajax Progress Bar Demo

The below snapshots will show you the way that could be used for monitoring the Ajax request/response.

JSF 2 Ajax Monitoring Example 1

  • The input has been filled by the user with the desired message.
  • Still, there is no Ajax request initiated yet.

JSF 2 Ajax Monitoring Example 2

  • The user has activated the Display Text action.
  • Ajax request has been initiated once the action activated.
  • The action (Display Text) provide an f:ajax onevent attribute.
  • The jsf framework will call the JavaScript function (monitor) at each stages (begin, complete and success).

JSF 2 Ajax Monitoring Example 3

  • The message has been displayed.
[wpdm_file id=32]

About Amr Mohammed