Journal 4: Building an Ajax Application with Components

Ajax is one of those technologies that — when you first see it in operation — opens your eyes to many new possibilities. It did so for me. It expands on the usually HTTP-request dialog that goes on with Web browsing, and adds a new level of dynamic momentum to Websites.

Google offers several great examples of it in operation. One such site is Google Suggest. Notice as you start entering characters in the Google search box, suggestions are being fed back to you as you type. This is Ajax in operation; data is being exchanged (via XML) asynchronously between you and the Google Web server through a particular object, XMLHttpRequest.

It is a powerful technology because the whole page does not need to be reloaded every time data changes, and only the data you require is being transferred. Besides typing letters, other kinds of events can trigger the exchange of data, such as mouse clicks, a document being loaded, or change of focus, etc.

A great article on SDN that introduces Ajax, and also demonstrates how to build a similar application with a dictionary Web service that is included as apart of the Sun Java Studio Creator, is titled Using an Ajax Text Completion Component. Find this, and other articles and tutorials on AJAX, here.

As I mentioned in the last article, components are a powerful part of the Java Studio Creator IDE. I got to see their power by using and configuring the Calendar components in my last journal entry. Now I'll leverage the ability to import components and install a set of prefabricated Ajax components that lets me do some very neat things.

I'll focus the remainder of this discussion on just one of the BluePrints Sample Ajax Components which comes with Creator. I'll need to visit the Update Center to download and install these components (I'll discuss more about the Update Center below).

Sun has produced a set of reference applications (that include use of these Ajax components) that demonstrate best practice programming across all of their development tools: NetBeans, Java Studio Enterprise, Sun Studio, and Java Studio Creator. These can be very detailed, such as the Adventure Builder reference application that demonstrates a wide spectrum of J2EE technology. The Web component of Adventure Builder was also ported to Java Studio Creator, to demonstrate how one would go about producing the same application using the IDE. This article is called Using Adventure Builder as a Guide to Building a Web Application in the Java Studio Creator IDE. These reference applications and components are what Sun calls BluePrints. You may see them referenced often as you explore the SDN.

Here are the BluePrints Sample Ajax components that are available through the Creator Update Center:

• Auto-Complete Text Field—With this component, I can build an application that uses Google Suggest to populate my forms as I type.

  See Installing and Using BluePrints Sample Ajax Components in Sun Java Studio Creator 2 for a fairly sophisticated implementation of this component that includes database integration.

• Progress Bar—This component will poll a server for the state of an operation and report back to the client. A graphical progress bar then displays showing the percent of operation that is complete. It's a great addition to any application where a page may take some time to complete: credit card processing, photo uploading, etc.


• Map Viewer—This component uses Google local to generate maps. I'll configure it below.


• Select Value Text Field—This is another cool component that builds a drop down box on the fly, based on what you type into a text box.


• Rich Text Area Editor—I tend to build a lot of Hotmail-like Text Area boxes into my applications, allowing clients to apply formatting, such as bold, italics, bullets, and so forth. This component will simplify building such a feature. (Currently, it is best to use Firefox when working with this component because of problems displaying the toolbar correctly in Internet Explorer and Safari browser.)


• Buy Now Button—This component will generate a button that initiates a single-order PayPal transaction and posts payment information to the PayPal web site.


• Rating—A component that presents a row of stars indicating a rating assigned to an item. When the user assigns a new rating to an item, an Ajax request transmits the rating to the server.

Installing the Ajax components requires that I go through the process of updating the IDE through the Update Center off of the Tools menu, and then import the components with the Component Library Manager. See the SDN article: Downloading and Importing the Ajax Components Into the IDE for detailed instructions on installing the Ajax components.

It's a good idea to connect to the Update Center often so you can get new samples, fixes, and other updates, automatically. More information, including instructions on using the Update Center is available here.

Figure 1 — Downloading the Ajax Component Library via the Update Center. (Click to enlarge)

The Component Library Manager is great to explore. It allows me to import the components I downloaded, and choose which components appear on the Palette. Once the Ajax components are imported (I followed the instructions in the article I reference above), they appear under the BluePrints (Ajax) Components node. This is also the name of the folder that they are listed under in my palette.

To access the Component Manager, I right click on one of the headings (such as Standard) in the Palette and choose Manage Component Libraries. Or I can select Component Library Manager off of the Tools menu.

Figure 2 — The Component Library Manager (Click to enlarge)

Notice in the Component Library manage — in the left column — that components have both a "design time" and a "run time" jar associated with them. The .jar includes all the classes that make up the component, and it defines the behavior each component exhibits at both design time and at run time. This means that, as I design with components, the behavior the components exhibit on the Visual Editor is defined here. Then once deployed, the components will demonstrate "run time" behavior as defined in a separate set of jar's (or all behavior may be included in the same jar, but still separate classes).

After importing the Ajax components, I now have a new component category in my Palette window: BluePrints Ajax Components. I will use the Map Viewer component to configure the Google Map viewer.

Building the Google Map Viewer application is very simple. You can follow along as I build the application:

Obtain a License Key from Google

Google requires that I obtain a license key to access their mapping data. To obtain a Google Maps API key, I go to: http://www.google.com/apis/maps/

To obtain this key I first create a Google account, or log into my existing one. I need to then agree to their terms and provide the URL where my application will reside. Since I am deploying locally, and I will name my application GoogleMaps, I will provide the following URL:

        http://localhost:28080/GoogleMaps/

Google then provides me with an API key which is good for the particular deployment I specified above.

Build the Application

Building this application is about as easy as it gets.

1. I created a new Web application, naming it GoogleMaps.
2. I drag the Map Viewer component that I imported earlier onto my design canvas. This component is located in the BluePrints Ajax Components category in my Palette window.
3. I click on the component in my design canvas and then notice the attributes associated with it in the Properties window.
4. I click on [...] next to the key attribute and copy my API key into the Value Box window.

I can also further configure attributes, such as choosing whether to include map controls, and add style to the component if I wish.

My application is shown in Figure 3.

 

Figure 3 — I build my application and insert the Google API key. (Click to enlarge)

 

As a side note, I can go to the Java ServerPage (I click on the JSP tab above the design canvas), and see that Creator added the map component into my application as follows:

Code Sample 1:

<bp:mapViewer binding="#{Page1.mapViewer1}"center="#{Page1.mapViewer1_center}" id="mapViewer1" key="…my key…" style="position: absolute; left: 96px; top: 168px; height: 300px; width: 500px" zoomLevel="4"/>

I can also go to the PageBean (I click on the Java tab above the design canvas) and see that Creator added the following import packages into my application:

Code Sample 2:

import com.sun.j2ee.blueprints.ui.mapviewer.MapComponent;
import com.sun.j2ee.blueprints.ui.mapviewer.MapPoint;

I'm glad I didn't have to figure out how to code this!

Deploy the Application

To deploy my application, I'll right-click on my project name (GoogleMaps) in the Projects window and choose Run Project (see Figure 4). I could have also chosen Run Main Project from the Run drop-down menu, but I find I use the Projects window most often because it gives me more options, especially as I have multiple applications open at once.

As an example, it lets me choose which application to deploy when I have several open in the Projects window, and also lets me build an application and save its "war" to my computer, or deploy my application directly to a public application server. I'll discuss building and deploying to application servers in a later article.

 

Figure 4 — Running my project by using the Projects window

 

So my project then deploys and runs in a browser window. I can move around the map with its controls, and see that data is being passed to my application without requiring screen refreshes. My browser is in an ongoing dialog with the Google server and receiving images and XML files via Ajax technology.

For a more detailed discussion on using this Ajax component to access Google maps, please visit Using the Ajax Map Viewer Component. This article demonstrates how I can further develop an application with an address entry form. The application then builds maps based on this address with property markers and call-out areas. It is amazing how quickly I can built this application with the use of this AJAX component.

 

Figure 5 — Google Maps runs as an Ajax application (Click to enlarge)

Conclusion

Producing applications with Ajax components has been a lot of fun, and it has very much opened my eyes to new possibilities. There is nothing like the feel of programming with the power of a component that does a tremendous amount of functionality — especially when that functionality was not available to me before.

I've struggled over many pre-Ajax hours to try to get a "progress bar" working — for example, to keep my clients from refreshing a page, or closing a perfectly good session for fear that it crashed. Plus, I never could get it working right to begin with, given the limitations of trying this through HTTP requests. So here comes Ajax to the rescue, and Java Studio Creator has succeeded in bringing me right into the core of this technology with minimal effort.

What I really like is that I've been able to quickly build these Ajax applications, without needing to know a whole lot about the specifics in this technology. Yet nothing prevents me from looking behind the scenes, so once I've got my application going, I can look more deeply into what makes it tick. Not a bad way to learn!

Next Time: Consuming Web Services with Java Studio Creator

In the next installment of the Learning Curve journals, I will explore another exciting technology, Web services, and build an application that consumes Web services.

More Developer Resources

or more tech tips, articles, forums, tutorials, and other expert advice for developers, visit the Java Studio Creator developer resources on the /jscreator/.

Rate and Review Tell us what you think of the content of this page. Excellent   Good   Fair   Poor   Comments: If you would like a reply to your comment, please submit your email address: Note: We may not respond to all submitted comments.