An Ajax-Mashup Sample Application on Sun Java System Web Server 7.0

 
 
By Tamil Vengan, April 2, 2007  

Ajax is a popular Web 2.0 technology that includes but is not limited to Asynchronous JavaScript and XML: Ajax derives its name from those two entities. A mashup is a Web site or application that combines content from multiple sources. Hosted with this article is a sample application developed with Ajax and a mashup (henceforth, the sample), which you can experiment with or modify. Also, this article shows you how to compile the sample and deploy it on Sun Java System Web Server 7.0 (henceforth, Web Server 7.0), Sun's latest Web server release.

The sample displays the latest news, weather, stock-quote, traffic, and map information; also the results of user-initiated searches for videos, blogs, and photos. Besides Ajax and a mashup, key to the development of the sample are Really Simple Syndication (RSS) software and public Web-service APIs from Google, Yahoo!, Flickr, YouTube, and Upcoming.org. For details of the sample's capabilities, see the appendix, which also includes an 8-minute Flash demo.

You might want to first watch the demo to become acquainted with the application before stepping through the setup, compilation, and deployment procedures.

Notes:

  • The sample runs on the Firefox and Mozilla browsers only.
  • Enable cookies on your browser so that the sample can store and retrieve information


Contents
 
-  Setting Up the Sample
-  Obtaining and Updating License Keys
-  Compiling the Sample
-  Deploying and Running the Sample
-  Appendix: The Sample
-  Conclusion
-  References
 
Setting Up the Sample

First, download and set up the sample:

  1. Create a directory for the sample, say, AJAX_SAMPLE_DIR.

  2. Download and unzip the ajax.zip file to the AJAX_SAMPLE_DIR directory.
Obtaining and Updating License Keys

Now sign up on and obtain license keys from the sites that offer the Web-service APIs:

1 This is a URL-based key. For example, if you designate your sample's URL as http://localhost:84/ajax, request a key for the http://localhost:84.

The process is straightforward and takes only a few minutes.

The license keys that reside in the AJAX_SAMPLE_DIR/docroot/js/setup.js file that you downloaded are for demos only. To run the sample, edit that file and update the license keys, as follows:

API
Variable Whose Value You Replace With That of Your License Key
Yahoo! Developer Network
yahooKey
Google Maps
googleKey
Flickr Search
flickrKey
YouTube Developer
youTubeKey
Upcoming.org
upcomingOrgKey
 
Compiling the Sample

Before compiling the sample, set two environment variables:

  1. Point the JAVA_HOME environment variables to the location of the Java 2 Platform, Standard Edition (J2SE Platform) SDK 1.4 or a later release.

  2. Add JAVA_HOME/bin to the PATH environment variable.

Now compile the sample, AjaxServlet.java. The compilation involves the following JAR files:

  • Servlet classes that are required for compiling AjaxServlet.java, that is, those in Web-Server-install-dir /lib/pwc.jar, where Web-Server-install-dir is the location of Web Server 7.0, for example, /sun/ws7.0.

  • googleapi.jar, rome-0.9.jar, and jdom.jar, all of which reside in the AJAX_SAMPLE_DIR/docroot/WEB-INF/lib directory.

To compile AjaxServlet.java and create the Web archive (WAR) file:

  1. Go to the AJAX_SAMPLE_DIR directory.

  2. Type (all on one line):

    % javac -classpath Web-Server-install-dir /lib/pwc.jar:./docroot/WEB-INF/lib/rome-0.9.jar:
    ./docroot/WEB-INF/lib/googleapi.jar:./docroot/WEB-INF/lib/jdom.jar:. -d ./docroot/WEB-INF/classes AjaxServlet.java

    Note: If you're running Windows, change the classpath separator from : to ;.

    The command copies the compiled class, AjaxServlet.class, to the AJAX_SAMPLE_DIR/docroot/WEB-INF/classes directory.

  3. Type:

    % cd docroot
    % jar cvf ../ajax.war *

    The ajax.war file resides under AJAX_SAMPLE_DIR.
Deploying and Running the Sample

Deploy the ajax.war file from the Web Server 7.0 Administration Console, as follows:

  1. Log in to the Administration Console.

  2. Click the Add Web Application link in the Virtual Server Tasks list.

  3. Specify the location of the ajax.war file and type /ajax for the URI. Click OK.

  4. Apply changes to your Web Server instance: Click the Deployment Pending warning link at the top right corner.

Finally, run the sample: Go to http:// Web-Server-hostname : Web-Server-portnumber /ajax, for example, http://localhost:84/ajax.

Appendix: The Sample

Watch this Flash demo of the sample.

A summary of the capabilities follows.

General UI and Settings
The sample displays a clock and a calendar Calendar image at the top right corner. Note also these highlights:

  • Ajax samples support server interactions for site updates instead of browser refreshes. Whenever a server interaction occurs, the Refresh image Refresh image on the top right corner rotates.

  • Moving the cursor over the title of a window displays the time its content was last updated.

  • The sample performs basic validations, for example, if a keyword search in the Web Search window returns no results, the sample displays a Sorry not found message.

  • You can change the refresh interval for the content in the News, Weather, Stock Quotes, and Traffic windows. Click Setup button in the top left corner for the settings screen. After specifying the interval, click go button. The sample stores the setting as a browser cookie that expires in a year.

News
Note these highlights:

  • BBC World News is the default RSS feed for the News window. To change that default feed to any valid RSS feed, click Setup button and proceed.

  • News parses RSS feeds with the Rome RSS parser and updates the information after an elapsed refresh interval.

    The default refresh interval is 2 minutes.

  • News automatically scrolls through the item links. Moving the cursor over the window stops that scrolling, after which you can click a link of interest.

  • Clicking an item link displays its details in the content window at the bottom.

Weather
Yahoo Weather is the default RSS feed for the Weather window. The sample displays a weather report for the location denoted by a U.S. zip code or address that you entered and updates the information after an elapsed refresh interval.

The default ZIP code is 95014. The default refresh interval is 5 minutes.

Stock
The Yahoo! Stock Quote Service supplies information for the Stock window. Note these highlights:

  • The sample displays a quote for each of the stocks whose symbols you entered and separated with commas. Also, the sample updates the information after an elapsed refresh interval.

    The default stock symbols are SUNW, CSCO, ORCL, GOOG, IBM, HPQ, YHOO, and EBAY. The default refresh interval is 30 seconds.

  • In the display, the stock symbols are live links. Clicking any of them displays its details, such as the 52-week high stock price, in the content window at the bottom.

Traffic
The Yahoo traffic Representational State Transfer (REST) API supplies information for the Traffic window. Note these highlights:

  • The sample displays a traffic report for the location denoted by a U.S. zip code or address that you entered and updates the information after an elapsed refresh interval.

    The default zip code is 95014. The default refresh interval is 5 minutes.

  • Traffic automatically scrolls through the item links. Moving the cursor over the window stops that scrolling, after which you can click a link of interest.

  • Clicking a link displays the relevant map with the traffic information in the content window at the bottom.

Maps
The Google Maps API supplies information for the maps in the content window. Note these highlights:

  1. The sample displays a map of the vicinity of an address after you choose Google Map from the drop-down menu at the top, type the address in the adjacent text field, and click go button or press Tab on your keyboard.

    The search is case-insensitive. Also, no commas are necessary; for example, simply separate the city and state with a space.

  2. Clicking the arrow on the bottom right of the navigation area minimizes the map.

  3. Moving the cursor over any point in the map displays its latitude and longitude.

  4. A blue pushpin points to the location whose address you specified. Moving the cursor over the pushpin displays the address.

Videos
The Google Ajax Search API supplies information for videos in the content window. Note these highlights:

  • The sample displays the results of a video search in the content window after you choose Google Video Search from the drop-down menu at the top, type a keyword in the adjacent text field, and click go button or press Tab on your keyboard.

  • Clicking a thumbnail in the search result plays the video in the content window.

Blogs
Google Ajax Search API also supplies information for the blogs in the content window. Note these highlights:

  • The sample displays the results of a blog search in the content window after you choose Google Blog Search from the drop-down menu at the top, type a keyword in the adjacent text field, and click go button or press Tab on your keyboard.

  • Clicking a thumbnail in the search result displays the blog in the content window.

Photos
The Flickr API supplies information about the photos in the content window. Note these highlights:

  • The sample displays the results of a photo search in the content window after you choose Flickr Photo Search from the drop-down menu at the top, type a keyword in the adjacent text field, and click go button or press Tab on your keyboard.

  • Clicking a thumbnail in the search result displays the image above the content window. Clicking the image closes it. The image automatically disappears after 2 minutes.

  • Selecting Transparent renders the image transparent, thereby making visible the information in the News, Traffic, Weather, and Stock Quotes windows beneath the image.

  • Clicking the Next Next arrow or Previous arrow Previous button retrieves the next or previous set of search results.

YouTube Video Search
The YouTube REST API supplies information for the YouTube Video search results in the content window. Note these highlights:

  • The sample displays the results of a YouTube video search in the content window after you choose YouTube Video Search from the drop-down menu at the top, type a keyword in the adjacent text field, and click go button or press Tab on your keyboard.

  • Clicking a thumbnail in the search result plays the video above on the left side of the content window.

  • Moving the cursor over a thumbnail displays information about the video clip.

  • Clicking the Next Next arrow or Previous arrow Previous button retrieves the next or previous set of search results.

Web Search
The Google Search API and the Yahoo! Search API together create a mashup for information for the Web search results in the content window. Note these highlights:

  • The sample displays the results of a Google and Yahoo search side by side in the content window after you choose Web Search (Google and Yahoo) from the drop-down menu at the top, type a keyword in the adjacent text field, and click go button or press Tab on your keyboard. The sample also displays the total number of results.

  • Clicking the Next arrow or Previous arrow Previous button retrieves the next or previous set of search results.

Live Traffic
The Google Map API and the Yahoo! Traffic API together create a mashup for live traffic information in the content window. Note these highlights:

  • The sample displays in the content window live traffic information in the vicinity of an address and plot that information on a map after you choose Live Traffic from the drop-down menu at the top, type that address in the adjacent text field, and click go button or press Tab on your keyboard. The sample also displays the total number of results.

  • The sample denotes the severity of the traffic with five severity images: 1, 2, 3, 4, and 5. Moving the cursor over a severity image displays the relevant traffic information.

  • By default, the sample minimizes the navigation map. Clicking the arrow maximizes the map.

  • Tip: Dragging the map to another U.S. location and then clicking the map displays traffic information in the vicinity of the clicked location.

Local Events
The Google Map API and the Upcoming.org API together create a mashup for information on local events in the content window. Note these highlights:

  • The sample displays in the content window a list of local events in the vicinity of an address and plots that information on a map:

    Step 1: Choose Local Events Search (Google Map and Upcoming.org) (Mashup) from the drop-down menu at the top.

    Two text fields are displayed.
    Step 2: Type an address in the left text field and a keyword in the right text field. Click go button or press Tab on your keyboard.

    The red pushpins denote the events. Moving the cursor over a red pushpin displays the relevant information.

    If you leave the right text field empty, the sample retrieves all the event information in the vicinity of that address.

  • A blue pushpin points to the location whose address you typed. Moving the cursor over the pushpin displays that address.

  • By default, the sample minimizes the navigation map. Clicking the arrow maximizes the map.

  • Tip: Dragging the map to another U.S. location and then clicking the map displays event information in the vicinity of the clicked location.

Local Maps
The Google Map API and the Yahoo! Local Search APIs together create a mashup for the information on local maps in the content window. Note these highlights:

  • The sample displays in the content window information of interest in the vicinity of an address—for example, the nearby pizza restaurants—and plots that information on a map:

    Step 1: Choose Local Map Search (Google Map and Yahoo Local Search) (Mashup) from the drop-down menu at the top.

    Two text fields are displayed.
    Step 2: Type an address in the left text field and a keyword (for example, pizza) in the right text field. Click go button or press Tab on your keyboard.

    Red pushpins denote the locations that match the keyword. Moving the cursor over a red pushpin displays the relevant information.

  • A blue pushpin points to the location whose address you typed. Moving the cursor over the pushpin displays the relevant information—address, phone number, and the links for the Web site and driving directions—of the location.

    Clicking the Web-site link takes you to that site. Clicking the link for the driving directions displays them from the address you typed.

  • By default, the sample minimizes the navigation map. Clicking the arrow maximizes the map.

  • Tips:
    • Dragging the map to another U.S. location and then clicking the map displays local search information in the vicinity of the clicked location.

    • Moving the cursor over a red pushpin and clicking the link for driving directions displays them from the clicked location. That is, if you know the map location for the starting point but not its address, you can still obtain the driving directions.
Conclusion

Ajax and mashups enable the creation of versatile and content-rich Web applications. Sun Java System Web Server, with its stability, scalability, and numerous capabilities that facilitate ease of development, is the best platform for developing and deploying such applications.

References
Rate and Review
Tell us what you think of the content of this page.
Excellent   Good   Fair   Poor  
Comments: