JSF introduced a strong standard into the world of Java-based web application
frameworks. It streamlined the development of web user interfaces, which was
certainly welcome to counter the multitude of existing Java web user interface
frameworks. Meanwhile, AJAX is revolutionizing web interfaces by introducing
advanced user interface (UI) features to the browser client in a standards-based
way. Web developers have been waiting for a long time for the ability to build
interfaces in the browser that approach the richness of fat client interfaces.
The good news is that JSF and AJAX are highly complimentary. When combined they provide developers with a complete client- and server-side technology set for building highly interactive and standards-based web applications.
There are the three key features that enable you to build rich web interfaces
with JSF and AJAX:
1. A formal model of rich UI components, which are the visual building blocks
of the user interface
2. A fine-grained, events-based navigation mechanism, which manages the end
3. A well-integrated, synchronized state management, which links the view with
In this article, I will first discuss the three key features and then I will
show them in action by providing code samples from the Java EE "ajaxified" Duke's
Bookstore as a case study.
Web Development with AJAX and JSF
JSF is a good fit with AJAX, namely because of JSF's component model and navigation
/ event system that provides integration with Java server-side back-ends for
the AJAX client-side technology. With AJAX, part of the UI controller has been
shifted to the client. Since JSF is a server-side UI framework, it is used as
the link between the AJAX client and the Java servers-side application. The
following key features of JSF are relevant in evaluating its fit with AJAX:
- UI component model: Traditional web interfaces are limited
in widgets and interactivity. Early web presentation frameworks such as Struts,
for example, do not have a proper component model. There is only a limited
set of form controls. The interface needs to be built up from these simple
controls and HTML tags. AJAX interfaces introduce rich user interface widgets
and behaviors. They go far beyond simple form controls; they provide the interface
developer with advanced UI patterns. AJAX interfaces also provide more interactivity
and higher responsiveness by handling presentation logic client-side. Handling
this interactivity requires a formal component model. The component model
needs to be provided by JSF on the server and the AJAX framework on the client.
- Navigation and events: Traditional web interfaces are based
on the multipage model. Every time a user clicks a link, a request is sent
to the server and a complete new page is loaded and rendered by the browser.
The overhead of page reloading is high, and sometimes the users may even lose
context. By contrast, AJAX interfaces can refresh parts of the interfaces
without a page reload. This requires a mechanism that supports more fine-grained
navigation. The request part of fine-grained navigation is handled by the
JSF event model, which is integrated with its UI component model. The response
part that is necessary to handle partial page updates has to be handled by
the AJAX framework and should be well-integrated with the client-side component
- State management: Traditional web interfaces are controlled
entirely from the server. For maximum interactivity, AJAX interfaces are partially
controlled by the AJAX framework on the client. Since interaction can now
be handled client-side or server-side, it is necessary to manage the state
both on the client and the server, and be able to synchronize the two states.
This requires an integrated client / server state management, which will be
achieved by synchronizing the Ajax client with the JSF server on a per component
Case Study: Backbase - AJAX JSF Edition
Backbase is a leading provider of AJAX-based Rich Internet Application (RIA)
software and solutions. Backbase software provides a comprehensive AJAX development
framework that is based on open standards. It is easy to learn and integrates
seamlessly into existing IT environments.
In this case study, I will use an AJAX version of Duke's bookstore built with
and running on the Backbase - AJAX JSF Edition.
Introducing the Backbase - AJAX JSF Edition
The Backbase-AJAX JSF Edition provides a comprehensive AJAX development framework
to create rich web interfaces for Java applications. It extends JSF and turns
it into a powerful AJAX presentation framework by adding rendering capabilities
to the client-side Backbase AJAX engine. Unlike traditional JSF, it incorporates
an intelligent AJAX client so that it can be used both server and client side.
Developers will be able to leverage all the advantages of JSF while being able
to create rich, interactive AJAX interfaces. As shown in Figure 1, its architecture
consists of four key components:
- The Backbase AJAX Engine that runs inside the browser and manages client-side user interaction
- The Backbase JSF Runtime that runs in the Java application server and links the AJAX client with the Java application back end
- Out-of-the-box UI components that developers use to quickly assemble web interfaces
- The AJAX/JSF editor, an Eclipse plug-in for integrated development, deployment, testing, and debugging
Figure 1. The four key components of the Backbase JSF Edition. (Figure © Backbase)
Duke's Bookstore: the AJAX version
The example application of this article is an Ajax version of Duke's bookstore, a well-known Java EE sample application with a rich and interactive front end. Figure 2 shows the application interface.
Figure 2. The interface of the ajaxified Duke's Bookstore.
The design is based on panels. The top panel is a hierarchical navigation. In the middle is a datagrid that presents the book in the chosen category. The details of the selected book are shown at the bottom. The shopping cart is on the right.
The original interface is a multi-page design; each of the main areas described
above is presented on a separate page. The store user navigates between the
pages using links and the back and forward logic. Each page is built using JSP.
In the AJAX version, the interaction model is changed to a Single Page Interface (SPI); that is, instead of reloading entire pages, only parts of an already loaded page are changed. This leads to a highly responsive user experience. The changes are straightforward because the interface architecture can remain largely unchanged. The different parts of the interface are still JSP files. However, instead of generating pages, JSP simply generates subviews.
The data layer makes use of the Amazon.com E-commerce web service to retrieve
book data, including title, description, and price.
Figure 3 shows how the JSF architecture has been extended to allow for a rich and highly interactive AJAX client-side:
- A client-side UI component model has been introduced; the Backbase AJAX engine manages the component lifecycle.
- The event mechanism has been extended to allow for partial page updates.
- Client- and server-side states are synchronized by mutual updates of the client- and server-side component trees.
Figure 3. JSF/AJAX request-response life-cycle.