What is JavaServer Faces (JSF)

In this article, I look at JSF 2 and how it fits into the Java EE ecosystem.

When building a web application we provide the end user with a way to interact with our application and this is what JSF provides.

I will introduce you to the MVC design pattern and how to use it and you will discover the Facelets view language and how it is used, how data and events are bound to the context and how this is achieved via expression language.

I will explain how AJAX is natively supported and just how pluggable the eco-system is by looking at alternative templating frameworks such as Primefaces.

Application Structure

Java EE applications are typically layered applications. Well, the layer I about talking about in this article is the presentation layer. The presentation layer is responsible for what your visitors will see when they visit your website.

This is the way users interact with your site and should be as user-friendly as possible. Fortunately, this is not too difficult to achieve with the help of Java EE APIs like JSF. The JSF API includes many conveniences that allow a developer to deliver a high-quality user experience out of the box and with very little design knowledge.

MVC design pattern

Let’s start with a look at the Model View Controller design pattern otherwise known as just MVC.

MVC is an architectural pattern for implementing user interfaces that divide a web application into three logically connected parts. It does this in order to separate the internal representations of data from the manner in which that data is presented.

JSF is really an MVC framework in the classical sense, where the view is built using the Facelets declaration language and the model is represented by the CDI managed beans and the controller is taken care of by the JSF engine itself.

In a later article, I will look a little deeper at CDI managed beans and the role they play.

VIEW: Facelets

Facelets is the view declaration language used to build JSF views and reusable composite components. A view is typically constructed as an XHTML page by combining composite components, Expression Language, and tag libraries.

We won’t go into great detail with regard to tag libraries or the construction of composite components, these are beyond the scope of this course. Nevertheless, we will be looking at how expression language is used to bind CDI beans and to replace values in a view with data from the internal layers of the application.

Composite Components

Composite components are reusable snippets of code that behave in a given way such as an input field that accepts a user’s entry. They can have validators, listeners and other elements attached to them to provide more useful and interactive functionality.

However, Facelets is not the only templating language we have in our toolkit. In fact, there is quite a busy community around third-party component libraries.

Pluggable libraries

Pluggable libraries such as PrimeFaces, Apache MyFaces and ICEFaces all provide composite components that add substantial functionality to a view that enhances the user experience. In fact, we will be using PrimeFaces’s components in the application and we will see examples of this later on in the course.

Navigation

Navigation is made simple by Facelets. You can pass just the view name to the action of a component and the JSF engine takes care of locating and rendering the view.

Here is a code snippet where you can see that the admin dashboard template is passed to the action attribute of the cancel button. This is the template that will be rendered when the button is clicked.

<p:commandButton value="Cancel" action="/admin/dashboard" />

MODEL: Binding

The model part is taken care of by CDI beans and the way they are bound to the view is via expression language. Both the binding of data and events is done this way and we will be seeing plenty of examples of this later on.

Here you can see an example of data binding. What we are doing is binding the name field of the account CDI bean to the context of the page. When it is rendered the value of the name field will be replaced in the view and displayed on the screen to the end user.

Welcome <p>#{account.name}</p>

AJAX and HTML 5

AJAX is fully supported out-of-the-box by using the built-in JavaScript resource library. The f:ajax tag adds AJAX functionality to any UI component without additional coding.

This code snippet shows AJAX triggered for a mouse click event on a submit button.

<h:commandButton id="submit" value="Submit"> 
    <f:ajax event="click" /> 
</h:commandButton>

Now let’s move on to the Facelets declaration language itself. The language syntax is based around the concept of tags, where each tag represents some functionality and by using these tags together you construct your views.

Facelets Declaration Language

HTML tags

The first tags we meet are the HTML tags that represent HTML elements. These are really just syntactic sugar over HTML tags such as input, radio button etc. but provide some cross-browser compatibility. You are not required to use them; so you can just use the normal HTML tags if you prefer.

<h:form>, <h:inputText>, <h:commandButton>, 
<h:selectOneRadio>, <h:inputTextArea>, <h:outputText>, 
<h:commandLink> ...

Facelets Tags

An important feature of the Facelets language is the ability to create templates for reusability and repeatability. We are provided with a selection of tags that allow this to be done in quite a logical fashion, such as the repeat tag that repeats a section code and the define tag that’s start a component definition.

<ui:composition>, <ui:insert>, <ui:repeat>, 
<ui:fragment>, <ui:debug>, <ui:decorate>, 
<ui:param>, <ui:define> ...

Core tags

At the heart of Facelets tags are the core tags. These add more functionality through converters, action listeners, validators and much more. This is where you will find functionality such as AJAX, language resource bundles and so on.

<f:convert>, <f:convertDateTime>, <f:lengthvalidate>, 
<f:ajax>, <f:loadBundle>, <f:selectItem>, <f:actionListener> …

CDI Scopes

And now we come to the concept of a scope. Beans are defined as having a scope. The scope of a bean determines its lifecycle. The scope also determines which clients refer to which instances of the bean. By default, beans are given the scope of dependent.

An instance of a dependent bean is never shared between different clients. It is instantiated when the object it belongs to is created and destroyed when the object it belongs to is destroyed.

New Java EE 7 scopes

In Java EE 7 some new bean scopes were introduced namely @ViewScoped, @FlowScoped and @FlowDefinition.

Briefly, ViewScoped beans share the same lifecycle as the view which initially referenced them. This is particularly useful for views that make use of AJAX. FlowScoped and FlowDefinition are used with Faces Flow which connects logically related pages together and allows the bean’s lifecycle to be defined for that collection of views.

What Next

If you want to learn more about JSF and Java EE why now take my course Learning Java Enterprise Edition. In this course, I teach you the basics of a range of Java EE APIs. If you are really serious and want to give your career a boost the following courses are just what you are looking for:

• learn to develop an online bookshop with JAX-RS,
• learn WebSocket Programming in Java EE and
• become a JSON-Processing master.

Further Reading

Want to learn more about Java EE then these articles should interest you:

• JAX-RS API: an API for the construction of RESTful services
• Design Patterns: Professional Java EE design patterns
• JavaServer Faces: The JSF view language