Role Of JSF In A UI Framework

Introduction

The evolution of web development began with Servlet technology, which was used to directly generate HTML pages for displaying it on a web browser. Next, came JSP, which is a hybrid between an HTML Page and a Servlet. JSP pages enforced separation of the view and application logic. JSF or Java Server Faces is the current technology used for rapid development of web applications. It is designed to build MVC based web applications.

JSF is a component-based framework. The main components of JSF technology include:

An API for User Interface (UI) Components with a provision for:

State Management
Server-Side Validation
Data Conversion
Page Navigation specification

Standard UI components include:

Input fields
Buttons
Links and others

User input validation through standard and custom build validators:

Error Handling
Java Bean Management
Event Handling
Support for Internationalization

JSF in UI Framework

One common method of web application development is to use JSP and Servlets. These technologies do not provide Java Swing-like components to build dynamic Web applications. The developers often created their own customized mechanisms to store the state of web applications and also they had to code methods to implement event handling. Many Java developers wanted a mechanism that will allow them to perform the following:

Facility to implement custom UI components and add or remove them dynamically.
Provide UI support to various types of clients such as PDA , mobile phones, and so on.
Using a swing-like event model that would trap events fired by components or controls in Web pages.

JSF overcame these deficits and provided a standard set of APIs for satisfying the above-mentioned drawbacks. It provided the new standard that has a powerful mechanism to built interactive web applications. JSF offers pluggable functional components at various UI levels. JSF allows each of its pluggable components a special implementation such that they may provide a connection point between JSF and an external framework on which an earlier application might be based.

JSF Advantages

A rich collection of controls
Support for event-based notification
Support for Internationalization and Localization
Variable representation of UI through the use of renderers
Architecture for processing component data, managing component state, validating user input and handling events

UI Component Model

The user interface of JavaServer Faces applications uses configurable, reusable elements of JavaServer Faces UI components. The UI Component Model of JSF comprises of UI component classes, rendering model, event model, data conversion model, and data validation model as shown in the figure below:

Figure 1: JSF User Interface Model

UI Component Classes

The UI Component classes in JSF are used as building blocks to create simple as well as complex user interface for web applications

JSF specification defines a set of standard UI component classes and behavioral interfaces. These classes and interfaces store the state information about the various JSF controls. Further, they enable maintain references to various objects and handling of events fired by these controls. These classes help the component to rendered in different ways and are derived from UIComponentBase class.

UICommand

The UICommand component represents command components such as buttons and links. These controls perform an action when activated which is achieved through an ActionEvent and ActionListener interface. The representation of a UICommand component can be <h:commandButton> or <h:commandLink>.

<h:commandButton> element represent command buttons such as submit or reset . The syntax for using a <h:commandButton> is shown below:

Syntax

<h:commandButton [id=”<ID>”] [binding=”<ComponentBinding>”] [rendered=”<true|false>”]
[immediate=”<true|false>”]
[image=”<PathOfImage>”]
[type=”<submit|reset>”]
[value=”<Value>”] [actionListener=”<ActionListener>”]
/>

Where,

id: is the component identifier for the current component and it must be unique within the closest parent component.
binding: is the value expression for a backing bean property to which the component is bound to.
renedered: indicates if the component should be rendered or not during the Render Response phase. Its default value is true.
immediate: If this flag is set to true then the moment the component is activated, notifications should be delivered to the listeners and action taken during the same Apply Request Phase rather than in Invoke Application Phase.
image: is a path or URL of an image to be displayed for the action.
value: is the current value of the component.
type: is the type of button to be created. By default, a submit button is created.
actionListener: is the method expression that represents an action listener method to be notified on activation of the component.

UIPanel

This component is used as a layout container component for other components. The <h:panelGrid> is the element that represents a container table or <h:panelGroup>element creates a container to a group of components under one parent.

The syntax for <h:panelGrid> element is:

<h:panelGrid [id=”<ID>”] [binding=”<ComponentBinding>”] [rendered=”<true|false>”] [columns=”<NumberOfColumns>”]
[rowClasses=”<StyleSheet>”] [columnClasses=”<StyleSheet>” ]
[headerClass=”<StyleSheet>”] [footerClass=”<StyleSheet>”]
[captionClass=”<StyleSheet>”] [captionStyle=”<StyleSheet>”] />

Where:

id: is the component identifier for the current component and it must be unique within the closet parent component.
binding: is the value expression for a backing bean property to which the component is bound to.
renedered: indicates if the component should be rendered or not during the Render Response phase and its default value is true.
columns: represents number of columns to render.
rowClasses and columnClasses are comma separated list of CSS classes applied to the rows and columns of the table respectively.
headerClass, footerClass , captionClass : space separated list of CSS style classes applied to header, footer, caption respectively generated for the table.
CaptionStyle: is the CSS style applied when the caption is rendered.

Component Rendering Model

JSF provides component architecture so that the functionality is defined by one set of classes whereas component rendering is defined by another set of classes. The advantages of having such architecture are:

It allows the behavior of a component to be defined once by the component writers but at the same time allows the creation of multiple renderers. Thus the same component can be rendered to the user in the same way or different way.
The appearance of the component on a page can be easily changed by selecting the appropriate tag combination of components and rendered by the application developers and page authors.

A rendered kit defines a set of rendered classes for every UI component. Each Rendered class specifies how the component can be rendered to the output.

Data Conversion Model

The data conversion model contains classes and interfaces that enable conversion of text data present in JSF pages to a primitive data type. Sometimes the programmer would like to convert the components data to a type other than the standard data type or the user might want to format the data. In such cases JSF allows the user to register a Converter implementation on UIOutput components, which allows converting the component’s data between two views.

The following code illustrates the use of a converter for a Celsius to Fahrenheit converter example. The converter will look up the value of temperature in degree and uses it to convert the degrees to Fahrenheit from the domain model unit.

The converter class called CelFahConverter implements the Converter interface.

The three things that have to be performed for creating and using customer converter are:

Create a custom converter class by implementing the Converter interface.

public class celFahConverter implements Converter {
public celFahConverter() {}
public Object getAsObject(FacesContext facesContext, UIComponent uicomponent, String param) {
try {
String cel = param;
float fah = Float.parseFloat(cel);
Float aObject = new Float(fah);
return sObject;
} catch (Exception exception) {
throw new ConverterException(exception);
}
}
public String getAsString(FacesContext facesContext, UIComponent uiComponent, Object obj) {
try {
float fahrenheit = (float)((Float) obj).floatValue();
float fahrenheit1 = (fahrenheit * 9 / 5) + 32;
String str_fah = ””+fahrenheit1;
return str_fah;
} catch (Exception exception) {
Throw new ConverterException(exception);
}
}

<faces-config>
<converter>
<converter-id>celFahConverter</converter-id>
<conveter-class>celFahConverter
</converter-class>
</converter>
</faces-config>

Use the custom converter in the JSP page from where it can be accessed using the <f:converter> tag, as shown in the code below:

<%@page ContentType=”text/html”%><%@page pageEncoding=”UTF-8”%><%@ taglib url=”http://java.sun.com/jsf/html” prefix=”f” %><%@ taglib url=”http://java.sun.com/jsf/html” prefix=”h” %>
<f:view>
<html>
<body>
<h:form>
<b>Please Enter the temperature in Celcius below:</b>
<br>
<h:inputText id=”input_text”>
<f:converter converterId=”celFahConverter” />
</h:inputText>
<h:commandButton value=”Submit” />
</h:form>
</body>
</html>
</f:view>

Summary

JSF is a component-based framework designed to build MVC based web applications. JSF specification defines a set of standard UI components that are used as building blocks to create simple as well as complex User Interfaces for web applications. A rendered kit defines a set of rendered classes for every UI component. Each Rendered class specifies how the component can be rendered to the output. JSF allows the user to register a Converter implementation on UIOutput components, which allows converting the component’s data between two views.