Event Based Programming Model With JSF Tag Library

Introduction

JSF provides an event-based programming model similar to Swing or AWT, Events are used as a mechanism for propagating the state change notification between the source object and one or more target object listeners.

There are three types of events supported by JSF:

Value-change events
Action events
Data model events

When components such as buttons and hyperlinks are activated, action events trigger components such as UIInput, UISelectOne, UISelectMany, and UISelectBoolean components generate the value change events when their values are changed. The UIData component triggers the data model event when a new row of a UIData component is selected.

To enable a component to react to action or value change events, the application can use any one of the following techniques.

Implement an event listener class to process the event and register the event on the component. To implement an event listener, a class has to implement either an ActionListener or ValueChangeListener interface. The class should also override the processAction() method for ActionListener interface or valueChangeListener() method for the ValueChangeListener interface.

The following source code demonstrates the use of both listener interfaces,

//Implementing ActionListener
Class Employee extends Object implements ActionListener {
Private Map empMap = null;
Employee()
empMap = new Hashmap();
empMap.put(“1001”, ”AshishB”);
empMap.put(“1002”, ”Ashu”);
empMap.put(“1003”, ”Atul”);
empMap.put(“1004”, ”Manisha”);
}
public void processAction(ActionEvent evt) {
throws AbortProcessingException {
String name = evt.getComponent().getId();
FacesContext contextObj = FacesContext.getCurrentInstance();
}
}
//Implementing ValueChangeListener
class Employee extends Object implements ValueChangeListener {
public void processValueChange(ValueChangeEvent evt) throws AbortProcessingException {
if (name != evt.getnewValue() {
FacesContext contextObj = FaceContext.getCurrentInstance();
}
}

Next, the component should be registered to emit action and value change events The following source code demonstrates this by nesting the event listener tag within the component tag. The value in the type attribute of event listener tag specifies the class name of the event listener implementation.

//registering component with ActionListener
<h:commandLink id=”number” action=”employee”>
<f:actionListener type=”Employee” />
</h:commandLink>
//registering component with ValueChangeListener
<h:inputText id=”name” size=”50” value=”#(employee.name)” required=”true”>
<f:valueChangeListener type=”Employee” />
</h:inputText>

Implement event processing in a backing bean method and refer to this method in a method binding expression of the component.

The backing bean should implement a method that accepts an ActionEvent object or ValueChangeEvent object and return type set to void. This method should be referred using the actionListener or valueChangeListener attribute of the component tag, as shown in the below source code:

//writing a method to handle action event
public void displayName(ActionEvent evt) {
String name = evt.getComponent().getId();
FaceContext contextObj = FaceContext.getCurrentInstance();
}
//referenced a method that handles action event
< h: commandLink id = ”number” action = ”employee” actionListener = ”#(EmployeeBean.displayName)” >
//method to handle value change event
public void select(ValueChangeEvent vcevt) {
//code to handle a value selection event of a list or combobox
}
//referencing a method that handles action event
< h: commandLink id = ”number” action = ”employee” actionListener = ”#(EmployeeBean.select)” >

Validation Model

JSF also supports a validation model, which validates the component’s local data before it updates the business object’s data. JSF provides a set of standard classes and associated tags to developers for validating the component’s data. The three standard validators provided by JSF are Length Validator, Long Range Validator, and Double Range Validator.

When a component is holding a data type that is not supported by standard JSF validators custom validators are created.

Navigation Model

In a web application, moving from screen to screen based on user action is a common requirement JSF supports a Navigation model, which is the form of declaring a set of rules that defines the next view for the user based on his actions. These rules are specified using XML elements in the application’s configuration resource file, often named as faces-config.xml

The following are the benefits of keeping all navigation rules in one configuration file.

Tool-friendliness

The single faces-config.xml file supports various tools that offer visual design for navigation. For example, in the JDeveloper tool, one can define navigation rules just by linking and dragging pages in a visual environment.

Easy change incorporation

Keeping rules in one file makes it simple to incorporate a change. For example, suppose index.jsp page is to be renamed to “catalog.jsp” then rather than changing all old references to this page, one has to simply modify the navigation rule defined in the application’s configuration resource file.

JSF Tag Library

The JSF supports tags for presentation and other core utilities. A tag library is a collection of such tags. Using these tags saves valuable time in development. JSF supports two types of libraries: Core and HTML.

JSF Core Tag Library

The tags specified in JSF’s core tag library perform the core utilities such as validation and conversion.

Following are a few tags described below,

actionListener - It adds an instance of actionListener to a UIComponent specified in the parent tag.
attribute - It adds an attribute to a component specified in the parent tag
convertor - It generates an instance of the class with a specified ID and associates it with the UIComponent defined in the parent tag.
convertDateTime - It adds an instance of DateTimeConverter to a UIComponent specified in the parent tag
convertNumber - It adds an instance of NumberConvertor to a UIComponent specified in the parent tag
validator - It adds a validator to a component
facet - It adds a facet to a component

JSF HTML Tag Library

JSF application uses JSP pages to represent views. JSF provides special useful tags to enhance these views. Each tag gives rise to an associated component. Some of JSF HTML tags are described below,

column - It creates a column in a data table.
commandButton - It creates a submit button.
commandLink - It creates a link
dataTable - It creates a table control
form - It creates a form
inputText - It creates a text input control(single line)
panelGroup - It is used to group other components where the specification requires one child element
selectOneMenu - It creates a single select menu
selectOneRadio - It creates a set of radio buttons.

For example,

Create an HTML page (index.html) that starts a JSF application that accepts and verifies the user name and password on a click of the Submit button.

<html>
<head>
<title> A Simple Java Server Faces Application </title>
</head>
<body>
<font size=’4’> Welcome to a simple JavaServer Faces Application
</font>
<p>
<a href=’faces/index.jsp’> Click here to start the application</a>
</body>
</html>

In this code, when a user clicks on the link, a JSP page is displayed . The JSP page displays a login form that accepts the user name and password from the user. It also validates the user name using the LengthValidator class.

<html>
<head>
<title> A Simple JavaServer Faces Log-in Application</title>
</head>
<body><%@ taglib uri=””/WEB-INF/jsf-html.tld” prefix=”faces” %>
<font size=’4’>Please Enter your User Name and Password</font>
<faces:usefaces>
<faces:form id=”simpleForm” formName=simpleForm”>
<table>
<tr>
<td>Email Id:</td>
<td>
<faces:textentry_Username id=”name”>
<faces:validator className=’javax.faces.validator.Lengthvalidator’ />
<faces:attributename=’javax.faces.validator.LengthValidator.Minimum’ value=’3’ />
</faces:textentry_input>
</td>
<td>
<faces:validation_message componentId=’Username’ />
</td>
</tr>
<tr>
<td> Password :</td>
<td>
<faces:textentry_password=”password” />
</td>
</tr>
</table>
<p>
<faces:command_button id=”submit” commandName=Log In” />
</faces:form>
</faces:usefaces>
</body>
</html>

On a click of the the button, the JSP page is redirected to another page which displays a message "You have successfully logged In", as shown in code below,

<html>
<head>
<title>
A simple JavaServer Faces Application</title>
</head>
<body>
You have Successfully Logged In!!
</body>
</html>

The following file are also required by the JSF application,

faces-config.xml : This is the master configuration file required by all JSF applications. It will contain reference of all included components that form the JSF application.
web.xml : This file contains specific settings for JSF which includes Servlet mapping.

Jar files required in the WEB-INF/lib are,

WEB-INF/lib/commons-beanutils.jar
WEB-INF/lib/commons-collections.jar
WEB-INF/lib/commons-disgester.jar
WEB-INF/lib/commons-logging-api.jar
WEB-INF/lib/jsf-api.jar
WEB-INF/lib/standard.jar

Summary

JSF supports a Navigational model, which is in the form of declaring a set of rules that define the next view for users based on his actions. JSF also supports a validation model, which validates the component’s local data before it updates the business object’s data. JSF provides useful special tags to enhance the views which are implemented as JSP.