bpcatalog: BluePrints Solutions Catalog Page 1 of 2

Progress Bar Using JavaServer Faces Component with AJAX

Ed Burns
Status: In Early Access
Problem Description
This solution demonstrates the power of combining AJAX techniques with JavaServer Faces. It leverages some of
the JavaScript code from the Progress Bar solution while delivering a very simple experience to the page author.

How do I create a renderer that generates JavaScript and form elements that sync up?

How do processs AJAX requests using the FacesServlet? How does this work with the faces life-cycle
model?

How do I create a renderer that produces XML responses for AJAX requests and HTML for others?

How does this type of processing effect performace with many small requests?

Solution
JSF and AJAX are a great match because they allow the component developer to provide a fully rich, AJAXian
component, but hide all of the javascript from the page author, as well as removing the need for a separate servlet
that must be configured in the user's web.xml. This solution addresses the "JSF Component that Renders Client-
side AJAX Code and Processes AJAX Request" stragey presented in the Using JSF and AJAX document.

Progress Bar JSF Component that Renders Client-side AJAX Code and Processes AJAX
Request Strategy

This component reduces the semantic burden on the JSF page author to a single simple tag:

<d:progressBar id="progressBar"
value="#{process.percentage}"
interval="#{process.pollingInterval}"
action="complete" />

The intent is to place this tag on a page that should be displayed while a long-running task is processing. When the
task reaches 100%, the action referenced by the action attribute is executed, exactly as one would do with a
<h:commandButton> component. This allows the standard faces navigation rules to dictate where to go when
the task is complete.

All the AJAX interaction client-side JavaScript code for handling XMLHttpRequests and server-side processing
code is included in the component. A developer not familiar with AJAX can readily include AJAX functionality with
minimal configuration. The minimum code the user must write to use the progress bar is a JavaBeans property

https://bpcatalog.dev.java.net/ajax/progress-bar-jsf/index.html 1/25/2008
bpcatalog: BluePrints Solutions Catalog Page 2 of 2

getter on a managed-bean that returns an int between 0 and 100 representing what should be the progress of the
progress bar at the point in time the getter is called. Optionally, you can write a getter that returns the polling
interval in milliseconds, and a Faces action that determines the navigation, though these two attributes can be
hard-coded into the JSP.

References
The following rferences may be useful:

For more information on the design and implementation of a JSF Progress Bar using AJAX see the design
details document.

For more information on general uses JSF and AJAX please Using JSF and AJAX document.

For general information on AJAX, see Introducing AJAX.

© Sun Microsystems 2005. All of the material in The Java BluePrints Solutions Catalog is copyright-protected and may not be
published in other works without express written permission from Sun Microsystems.

https://bpcatalog.dev.java.net/ajax/progress-bar-jsf/index.html 1/25/2008