Skip to main content

Learning from the BluePrints

Posted by gsporar on August 31, 2005 at 12:22 PM PDT

When I wrote about JavaOne, Day 2 I described a session called "Rich Applications with the J2EE platform and AJAX," which was done by Tor Norbye and Greg Murray. I mentioned that web app. development is not my forte, but I am always looking to learn new things. In particular, AJAX and Java Server Faces (JSF). My intent was to investigate this stuff weeks ago, but other events intervened....

To help me climb the curve, I turned to the Java BluePrints, which are designed to show best practices for a variety of technologies. Luckily, several of the BluePrints are included with the NetBeans Integrated Development Environment (IDE). And just like when there are bug fixes or new features, new versions of the BluePrints catalog are periodically put out on the NetBeans Update Center. They were updated not too long ago, so from within the NetBeans IDE v4.1, I chose Tools > Update Center. On the resulting dialog, I made sure the NetBeans Update Center was selected. When the list of available updates/features was shown, I chose Java BluePrints Solution Catalog, as shown below.

selectbp.png

After the installation, whenever I select File > New Project, the IDE's project wizard shows me an AJAX entry under Java BluePrints Solutions. For my first project, I selected the AJAX autocompletion JSF component project, as shown below.

bp.png

On the next step of the project wizard I specified a directory folder, and then I was done. The IDE created a project named textfield-jsf, as shown below.

tf.png

This project is the Better Address Entry Form that Tor Norbye originally wrote about here. He also has a detailed description of it available here on java.net. Now that he's done all the work, all I had to do was right-click the project and choose Run Project. The IDE did a build, started the app. server, deployed the application, and then started my browser with the application's URL. The page is shown below (click for full size version).


smallApp.png

Now for the fun part: to make some changes. I think I understand AJAX fairly well (the concept is not that complicated, even for me :-) ), but I'm still way down the learning curve on JSF. Nevertheless, I wanted to try enhancing the zip code field of the form, as suggested in the text of the page. It wasn't that difficult to do.

After I read through the code in ApplicationBean.java, it became apparent that a list ordered by zip code was the only major addition needed. That was easy to do, I just added another String[] called sortedZips and in the loop that reads the data file I put entries into sortedZips with the zip code first, followed by the city and state. After the loop ends, I just did a sort on sortedZips (since the data file is ordered by city, not zip). That allowed me to add this method to ApplicationBean.java:

completeZip.png

And then change index.jsp so that the zip code field now looks like this:

zipfield.png

You'll notice references to a couple of JavaScript methods: extractZip() and chooseZip(), which I also had to add. They are very similar to the existing extractCity() and chooseCity() methods.

After making the changes, I re-ran the application and now I have smart auto-completion for the zip code. The drop-down shows the ten best matches:

zip10.png

And after I select a zip code, the city and state are filled in automatically, which is exactly what I wanted.