AJAX + JavaServer Faces: Better Address Entry Forms
By Tor Norbye on May 14, 2005
I mentioned recently that the blueprints project on java.net is posting detailed articles and sample applications for various AJAX strategies. New entries are added regularly.
Well, I've participated too. My first entry shows how you can add some AJAX-style behavior to a JavaServer Faces application.Many webforms, especially those involving online shopping, involve address forms. When you get to fields like states, provinces, and countries, you get these super unwieldy combo boxes or listboxes to pick an alternative from - see listbox image on the right from Amazon.com for example. For U.S. states you're looking at 50 alternatives, which isn't too bad, but country dropdowns usually involve several hundreds alternatives. Hope you brought your scrolling wheel. These pages are also slow to load since the HTML involves hundreds of
<option>tags for the listbox contents.
A dropdown is not a good user interface element if you need to choose an item for a large number of possibilities. Take the city field. What if you wanted to let users pick a city instead of having to type one in? Well, for the U.S. alone the combobox would have over 25,000 entries - this is clearly not practical.
But it's an ideal situation for AJAX:
- The server can easily store all possible cities and quickly provide a small number of completions upon request. Thus, each keystroke in the city field causes a request to provide the ten nearest city names for the given prefix.
- The address form page stays small and lightweight
- The user interface for completion is better than a dropdown for a large dataset like this
An application which does exactly this, using JSF as the application framework (the address stored in a session scope bean, text fields are marked as required, etc) is now available. You can access an intro writeup here . Be sure to click on the link at the bottom of the page to go to the design details document, which describes how everything works. And perhaps most importantly, you can get the code - it's checked into CVS on java.net in the bpcatalog module.
Here's how the form looks in my browser:
One neat thing about using completion like this in an address form is that on the server we know not only the city and state you chose for the city field - we can also look up a zip code for the city too, and when the user clicks on a city in the completion dialog we automatically populate the given selection into the city, state and zip fields all at once! Actually obtaining the U.S. zip code dataset was quite a challenge and would almost be worthy of its own blog entry... When you adapt this technique for international address forms you'll have fun finding global data for this. The country list is especially going to be fun for you given the political nature of the issue - since there are disputes about whether certain territories are their own country!
Please note that this example is a very simple integration of AJAX and JSF; in particular, it's not using any custom JSF components or component renderers. It does however describe a couple of tricks that may be useful to you if you're trying to AJAXify your own JSF applications.
This was checked into CVS several weeks ago. In the weekends since I've been working on a custom JSF component which removes a lot of the complexity from the JSF developer. That's in CVS and works too, but is not fully polished yet. Stay tuned and I'll blog on that when it's fully cooked.
Thanks to Greg Murray for the helpful advice and obviously for the original non-JSF autocomplete blueprints entry, since the code is based heavily on it!