AJAX + JavaServer Faces: Better Address Entry Forms

WARNING: This blog entry was imported from my old blog on blogs.sun.com (which used different blogging software), so formatting and links may not be correct.

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
  


• It downgrades gracefully: if the user has disabled JavaScript, they can
  still use the address form - they'll just need to type in the address without
  completion assistance
  

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!