Powering the Living Web

Kaazing Blog

Subscribe to Kaazing Blog: eMailAlertsEmail Alerts
Get Kaazing Blog via: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn

Related Topics: RIA Developer's Journal, Java Developer Magazine

RIA & Ajax: Article

Super-Charge JSF AJAX Data Fetch

Harnessing managed beans

Code Sample 1: The Mabon Protocol:


Code Sample 2: String returned after Mabon has evaluated the Mabon Protocol:


During an AJAX request, this URL is sent on the request and intercepted by the FacesLifecycleServlet.

Mabon: Initial Request
The Mabon implementation is designed specifically for AJAX requests and implements a communication channel using JSON syntax. This solution lets AJAX components that use managed beans fetch data and communicate with the server without having to go through a full JSF lifecycle. So how does it work? At application start-up Mabon will add the MabonLifecycle as part of the JSF LifecycleFactory context.

On the initial request, Mabon is just delegating through to the underlying JSF implementation and is active only during the Render Response phase, if needed.

In the Figure 3 sequence diagram, a page that contains a custom AJAX component is executed. To work, the AJAX component has to get data from an underlying backing bean. During encodeBegin(), the AJAX Renderer for that component will use the Mabon protocol - mabon:/ - to write out a target URL that references the backing bean. To get this URL, the Renderer will call the getResourceURL() on the ViewHandler. It will pass a string matching the method binding expression for the backing bean (for example, mabon:/managedBean.getSuggestions). The getResourceURL() method in MabonViewHandler will return a full path - /<context-root>/<mabon-servlet-mapping>/managedBean.getSuggestions - that can be written out to the document.

Mabon: Data Fetch Request
After the page has been rendered to the client, it contains a target URL to the backing bean that's needed by the AJAX component to fetch data (for example, /<context-root>/<mabon mapping>/managedBean.getValidDates). In subsequent AJAX requests, this string will be intercepted by the Mabon implementation and used to invoke the backing bean and return the result to the client (Figure 4).

On submit an AJAX-enabled component creates a new XMLHttpRequest object, which communicates asynchronously with the server to get data from the managed bean. This request is intercepted by the FacesLifecycleServlet, which routes the request through the Mabon Lifecycle instead of the default JSF Lifecycle.

When the FacesLifecycleServlet intercepts the request, the request processing starts by calling each Mabon lifecycle phase in sequence. First, you execute the ApplyRequestValuesPhase, which will decode the request and get the managed bean reference and method arguments needed for the managed bean off the request. Second, you execute the InvokeApplicationPhase that will create a MethodBinding based on the managed bean reference, invoke this MethodBinding passing any arguments, and return the result. Third, the Render-ResponsePhase takes the result and writes it back to the client.

Mabon APIs
The following sections cover the available APIs and how to register Mabon with an application.

Mabon Servlet Configuration
If you're planning to use Mabon for your AJAX-enabled components, you should be aware that it adds an extra step for the application developer using your JSF component library. The application developer needs to add the entry shown in Listing 1 to the Web application configuration file web.xml.

The servlet class net.java.dev.mabon.webapp.Faces-LifecycleServlet and the initialization parameter (for example, net.java.dev.mabon) is part of the Mabon contract. The application developer can decide to set the mapping to the same URL-pattern(s) as defined by default (for example, /mabon/*) or override the default URL mapping in case it's colliding with resources used by the Web application. Mabon automatically consumes this URL mapping change without requiring any code changes.

Mabon JavaScript APIs
The Mabon project provides a convenience JavaScript library that you can use to send your request to the server. The Mabon send() function leverages the Dojo toolkit's bind() function to communicate asynchronously with the server. For more information about the Dojo Toolkit visit the Dojo Web site at http://dojotoolkit.org/.

Listing 2 shows the source of the Mabon JavaScript library.

The Mabon send() function takes one argument - a Map. To call the mabon.send() function from your AJAX implementation, you have to construct the Map using JavaScript Map syntax as shown in the following code:

       { url: targetURL,
       args: [item1, item2],
       callback: callback_function }

The targetURL is the resource URL that's written to the client (for example, /context-root/mabon-servlet-mapping/managedBean.methodName). The targetURL will be intercepted by the FacesLifecycleServlet and deciphered by the Mabon Apply Request Values phase.

Mabon Protocol
Now that you know how to configure Mabon, it's time to look at how you can reference the managed beans needed to fetch data. The Mabon protocol-like syntax is convenient and easy to understand. The syntax starts with mabon:/ followed by the managed bean name and finally the method name, as shown below:

ViewHandler.getResourceURL(context, "mabon:/<managed bean name>.<method>");

The syntax uses a prefix to indicate this is a Mabon-managed request, the managed bean name, and the method needed. This syntax - mabon:/<managed bean><method> - defined by the Mabon contract is used to return a target URL referencing the managed bean.

This article discussed how you can use AJAX to fetch data and leverage the JSF managed bean facility as a data source. It also covered the different XMLHttpRequest response types - responseText and responseXML - that you can use to return the result from the server. We also showed you how to use the eval() function to parse JSON-syntax responses efficiently.

We covered a new Open Source project called Mabon that extends JSF to provide a custom lifecycle that invokes a managed bean method remotely and then transfers the result to the client using JSON syntax.

In our next article in this series of building Rich Internet Components with JavaServer Faces, we're going to look at how we can bring the knowledge from the three previous articles together and create a <jdj:inputSuggest> component that leverages AJAX, Mabon, and Weblets.

. . . 

This article is based on, and contains excerpts from, the book Pro JSF and Ajax: Building Rich Internet Components by Jonas Jacobi and John Fallows, to be published by Apress in February 2006.

More Stories By Kaazing Blog

Kaazing is helping define the future of the event-driven enterprise by accelerating the Web for the Internet of Things.

More Stories By John Fallows

John brings to Kaazing his 17 years’ experience in technology development and software design, and is considered a pioneer in the field of rich and highly interactive user interfaces. As CTO he formulates Kaazing Corporation’s vision of enabling mobile users, marketplaces and machines to connect and communicate in real-time, more reliably and at unprecedented scale. He defines the architecture of the Kaazing product suite and oversees its development. Prior to co-founding Kaazing, John served as Architect for Brane Corporation, a startup company based in Redwood City, California. Before joining Brane, he was a Consulting Member of Technical Staff for Server Technologies at Oracle Corporation. During his last five years at Oracle, he focused on designing, developing, and evolving Oracle ADF Faces to fully integrate Ajax technologies. Originally from Northern Ireland, he received his MA in Computer Science from Cambridge University in the United Kingdom and has written several articles for leading IT magazines such as Java Developer’s Journal, AjaxWorld Magazine, and JavaMagazine (DE), and is a popular speaker at international conferences. He is co-author of the bestselling book Pro JSF and Ajax: Building Rich Internet Components (Apress).

Comments (3)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.