JSF Central - AJAX-based Web Development with JSF
JSF Central

 
 Home 
 
 Products 
 
 Articles & Books 
 
 Resources 
AJAX-based Web Development with JSF
 
AJAX-based Web Development with JSF
by Mark Schiefelbein
02 Apr 2007 11:30 EDT

This article shows how you can bring together JSF and AJAX to provide a powerful, well-integrated and standards-based framework for the development of rich web interfaces.


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 user interaction
3. A well-integrated, synchronized state management, which links the view with the model

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

Adaptive Path's Jesse James Garret coined the term AJAX (Asynchronous JavaScript + XML) for a standards-based rich Internet application (RIA) development model. In his article "Ajax: A New Approach to Web Applications," he explains that AJAX solutions contain a client-side engine that renders the user interface and communicates with the server in the XML format. This engine consists of JavaScript functions, resides in the web browser, and does not require a plug-in or user install.

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 model.
  • 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 basis.

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:

  1. A client-side UI component model has been introduced; the Backbase AJAX engine manages the component lifecycle.
  2. The event mechanism has been extended to allow for partial page updates.
  3. 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.



RSS feed(all feeds)

The Editor's Desk
Podcasts
Inside Facelets
In the Trenches

Site version 1.83  Report web site problems

Copyright (C) 2003-2014 Virtua, Inc. All Rights Reserved. Java, JavaServer Faces, and all Java-based marks are trademarks or registered trademarks of Oracle Corporation. in the United States and other countries. Virtua, Inc. is independent of Oracle Corporation. All other trademarks are the sole property of their respective owners.