JSF with AJAX : A Novel to Help Web Pages Deliver Content Quickly

jsf ajaxJava Server Faces (JSF) is a MVC web framework that makes the construction of user interfaces(UI) easier for server based applications. This is accomplished by the use of reusable UI components in a page. It has features which help connect UI widgets with data sources and to server-side event handlers. The JSF specification not only outlines a set of standard UI components but also provides an API for the development of components. It makes possible the reuse and extension of the existing standard UI components. JSF makes easy the transfer of data between UI components. It manages UI state across multiple server requests. Also it wires client side events to server side application code. In this intermediate level tutorial we teach you to use AJAX in JSF programs.  We assume that you are familiar with the JSF basics. If not, we suggest you take this basic tutorial on JSF.

What is AJAX?

AJAX is an acronym for Asynchronous JavaScript and Xml. In Ajax, the HTTPXML object of JavaScript is used to send data to server and receive data from server asynchronously. By the use of Ajax technique JavaScript code exchanges data with server and updates parts of the web page without reloading the entire page. Note that JSF provides good support for making ajax call. Learn more about AJAX with this beginners course.

JSF and AJAX

There are two methods to add Ajax functionality to a webpage. They are as follows.

  • Add the required JavaScript code to an application.
  • Use the built-in Ajax resource library.

It is possible to enable Ajax functionality for standard UI (User Interface) components such as buttons, labels, or text fields with the use of the JavaScript resource library.  Also the resource library can be loaded and its methods directly used within the managed bean code.

The built-in Ajax resource library can be used in JavaServer Faces web applications in two ways

  • Use the f:ajax tag  along with another standard component in a JSF application. This way Ajax functionality is added to any UI component without the need of additional coding and configuration.
  • Use the JavaScript API method jsf.ajax.request() directly in the JSF application. This way you get direct access to Ajax methods and permits customized control of component behavior.

This course shows you how web development is done using Ajax and JQuery.

How to use the f:ajax tag

In the example given below, the f: ajax tag is included as a result of which Ajax behavior is added to an input component.

<h:inputText value="#{bean.message}">
    <f:ajax />
</h:inputText>

Here, even though Ajax is enabled the other attributes of the tag are not defined. In case of an event not defined then the default action for the component is performed.  Learn more about writing your own Ajax code with this course.

Attributes of the f:ajax Tag

  • disabled – Gives the tag status. If the value is true, Ajax behaviour will not be rendered. In case the value is false Ajax behavior will be rendered. Note that the default value is false.
  • event– It’s a string which indicates the type of event to which the Ajax application will apply. If given, it has to be one of the events supported by the component. If not given the default which triggers the Ajax request is determined by the component.
  1. For javax.faces.component.ActionSource components the default event is action.
  2. For javax.faces.component.EditableValueHolder components the default is valueChange.
  • execute– It is of type collection. It indicates a list of components to be executed on the server. If a literal is given it has to be space-delimited String of component identifiers and/or one of the keywords. In case a ValueExpression is given it has to refer to a property which returns a Collection of String objects. If not given the default value is @this.
  • immediate– It’s of type Boolean and specifies whether inputs are to be processed early in the lifecycle. In case it’s true, behavior events resulting from this behavior are broadcast in the Apply Request Values phase. Alternatively, the events will be broadcast in the Invoke Applications phase.
  • listener– This is the name of the listener method which is called when a javax.faces.event.AjaxBehaviorEvent is broadcast for the listener
  • onevent– This is the name of the JavaScript function that handles user interface events.
  • oneerror-This is the name of the JavaScript function used to handle error conditions.
  • render– It is a Collection that indicates a list of components of components to be rendered on the client. In case of a literal being given, it has to be a space-delimited String of component identifiers and/or one of the keywords. In case of a ValueExpression being given, it has to refer to a property which returns a Collection of String objects.The default value is @none.

In order to activate Ajax functionality, the web application has to create an Ajax request and send it to the server. Then the server processes the request. The attributes of the  f:ajax tag is used to create the Ajax request. We see how to create and send an Ajax request using the attributes mentioned above.

Example 1 : A JSF file with Ajax support

<?xml version="1.0" encoding="UTF-8"?>
<!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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
 <h:body>
<h3>JSF 2.0 + Ajax Hello World Example</h3>
 <h:form>
<h:inputText id="name" value="#{MyBean.name}"></h:inputText>
<h:commandButton value="Welcome Me">
<f:ajax execute="name" render="output" />
</h:commandButton>
 <h2><h:outputText id="output" value="#{MyBean.sayWelcome}
" /></h2>
</h:form>
 </h:body>
</html>
  • In the <f:ajax> tag, execute=”name” – By this assignment, the form component which has id “name” will be sent to the server for processing. In case of multiple components, it is required to separate the ids with the space in between.
  • render=”output”- Subsequent to the Ajax request this will refresh the component which has id “output”. Here after completion of the Ajax request <h:outputText> component will be refreshed.

It will be helpful to know HTML in order to master AJAX in JSF. To advance your knowledge of HTML, go through this tutorial on HTML.

Java Program associated with JSF code

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import java.io.Serializable;
@ManagedBean
@SessionScoped
public class MyBean implements Serializable {
private static final long serialVersionUID = 1L;
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getSayWelcome(){
if("".equals(name) || name ==null){
return "";
}else{
return "Ajax message : Welcome " + name;
}
}
}

When the button is clicked, the component makes an Ajax request and sends the text box value to the server for processing. Next it will refresh the OutputText component and display the value using getSayWelcome() method in the absence of any “page flipping effect“.

Example 2: JSF program to choose colors using AJAX

Java Program associated with JSF code

ManagedBean
public class ColourSelector {
private String colour = "grey";
public void orange() {
colour = "orange";
}
public void green() {
colour = "green";
}
public void black() {
colour = "black";
}
public String getColour() {
return colour;
}
public String getCurrentTime() {
return new SimpleDateFormat("HH:mm:ss").format(new Date());
}
}
( JSF code)
<body>
<h1>Pick A Colour</h1>
<f:ajax render="square">
<h:form>
<h:commandButton value="Orange"
action="#{colourSelector.orange}" />
<h:commandButton value="Black"
action="#{colourSelector.black}" />
<h:commandButton value="Green"
action="#{colourSelector.green}" />
</h:form>
</f:ajax>
<h:form id="square">
<div class="box"/>
<p>(Colour changed at #{colourSelector.currentTime})</p>
</h:form>
<p>(Page loaded at #{colourSelector.currentTime})</p>
</body>

This is an application that enables the user to change the color of a square area using buttons having different color choices. Normally this results in the whole page being reloaded. Here using Ajax when the buttons are pressed, the whole page is not reloaded. Only the area in the form square is updated.

We hope this tutorial gave you an idea of how to create your own Ajax / JSF programs. For some more hands on work you can take up this course which walks you using HTML5, CSS, jQuery and Ajax together in one project.