sun.com docs.sun.com My Sun Worldwide Sites

  Previous Contents Next

Accessing an External Service From a Widget

One characteristic of an Ajax-based client is that it cannot make calls to URLs outside of its domain, which means that it cannot access services located on another server. Project jMaki provides a proxy, called the XmlHttpProxy client, that communicates with external services on a widget's behalf.

To access an external service, a widget uses an XmlHttpRequest object to access the service through the XmlHttpProxy client. Project jMaki already includes some code that allows you to access the Yahoo Geocoder service. This service takes a location, such as a city, and returns the coordinates for that location. The code jMaki provides for widgets to use this service includes:

  • Configuration of the service in the centralized xhp.json file.

  • A listener function in system-glue.js that takes the coordinates and maps them into any map widgets on the same page as the widget that provides the location.

  • Declarative registration of the listener function in the system-glue.js file.

The configuration of the Yahoo Geocoder service from the xhp.json file is the following:

{"xhp": {
    "version": "1.1",
    "services": [
        {"id": "yahoogeocoder",
         "url": "http://api.local.yahoo.com/MapsService/V1/geocode",
         "apikey": "appid=jmaki-key",
         "xslStyleSheet": "yahoo-geocoder.xsl",
         "defaultURLParams": "location=santa+clara,+ca"
        },
    ...
]}}

The preceding JSON code configures the Yahoo Geocoder service under the ID yahoogeocoder with the XmlHttpProxy client. The configuration includes the URL to the service, a reference to the API key to use for Yahoo services and widgets, a reference to a stylesheet that styles the data returned from the service, and a default location.

The geocoderListener function in resources/system-glue.js takes the coordinates returned from the service and plots them on the map:

this.geocoderListener = function(coordinates) {
    var keys = jmaki.attributes.keys();
    for (var l = 0; l < keys.length; l++) {
       if (jmaki.widgets.yahoo && jmaki.widgets.yahoo.map &&
            jmaki.widgets.yahoo.map.Widget &&
            jmaki.attributes.get(keys[l])instanceof jmaki.widgets.yahoo.map.Widget ) {
            var _map = jmaki.attributes.get(keys[l]).map;
            var centerPoint = 
                new YGeoPoint(coordinates[0].latitude,coordinates[0].longitude);
            var marker = new YMarker(centerPoint);
            var txt = '<div style="width:160px;height:50px;"><b>' + 
                coordinates[0].address + ' ' + coordinates[0].city + ' ' + 
                coordinates[0].state + '</b></div>';
            marker.addAutoExpand(txt);
            _map.addOverlay(marker);
            _map.drawZoomAndCenter(centerPoint);
        } ...
    }
}

The preceding code checks the jMaki widget attribute map looking for a yahoo map widget. When it finds one, it takes the coordinates and uses the Yahoo API to mark the location on the map. The rest of the function not shown here looks for Google maps in case you are using the Yahoo Geocoder service with a Google map.

The final piece that sets up the Yahoo Geocoder service for use with jMaki widgets is the declarative configuration of the geocoderListener function in system-glue.js:

jmaki.addGlueListener(new RegExp("/jmaki/plotmap$"), 
    "jmaki.listeners.geocoderListener");

The preceding code registers the geocoderListener function in the namespace jmaki.listeners under the topic /jmaki/plotmap. Because the Yahoo Geocoder service is registered with the XmlHttpProxy client and the geocoderListener function is registered with the /jmaki/plotmap topic, you can publish coordinates to the topic and have the geocoderListener function plot them on a map.

Finally, the config.json file includes both the user-modifiable glue.js file and the resources/system-glue.js file, which is not meant to be edited.

{
  "config": {
    "version": ".9",
    "glue" : {
        "includes": ['/glue.js', '/resources/system-glue.js']
    }
  }
}

The comboboxGeocoder.jsp page includes another combobox widget and a Yahoo map widget:

<a:widget name="dojo.combobox" 
          args="{topic:'/dojo/combobox/updateMap'}" 
          value="${appBean.stateData}"/>
<a:widget name="yahoo.map" 
          args="{centerLat:37.4041960114344, zoom:14, width:350,
                 centerLon:-122.008194923401}"/>

Notice that the combobox widget's tag subscribes to the topic /dojo/combobox/updateMap. The simplejMaki example registers a listener function for this topic. This function uses the XmlHttpProxy client to pass the location the user selects from the combobox widget to the Yahoo Geocoder service. The following code from glue.js programmatically defines and registers this function:

jmaki.addGlueListener("/dojo/combobox/updateMap", 
    "jmaki.listeners.updateMapHandler");

jmaki.listeners.updateMapHandler = function(args) {
    var location = encodeURIComponent("location=" + args.value);
    dojo.io.bind({
        url: "xhp?id=yahoogeocoder&urlparams=" + location,
        method: "get",
        mimetype: "text/json",
        load: function(type, data){
            jmaki.publish("/jmaki/plotmap", data.coordinates);
        }
    });
}

Because the example is using a Dojo widget (the combobox), the updateMapHandler function can use the Ajax utility functions provided by the Dojo toolkit. The dojo.io.bind function makes XMLHttpRequest calls and handles the responses returned from these requests. In this case, assuming that the user chose Hawaii, the function makes an XmlHttpRequest to the following URL, because the label Hawaii corresponds to the value Honolulu in the data for the widget:

http://localhost:8080/jmaki/xhp?key=yahoogeocoder&urlparams=location=Honolulu

This URL accesses the XmlHttpProxy client, which will in turn access the Yahoo Geocoder service with the given location. The Yahoo Geocoder service returns a response containing the coordinates of the location.

The load attribute of the dojo.io.bind function defines what happens when the response from the XmlHttpRequest object is returned from the service. In this case, the function publishes the coordinates to the /jmaki/plotmap topic. When this happens, the updateMapHandler function plots the coordinates on the Yahoo map widget included in the comboboxGeocoder.jsp page.

Developing a Web Application Using Project jMaki

In this exercise you create the simplejMaki web application using the NetBeans IDE. This application demonstrates how to use a Dojo Fish Eye widget, a Dojo combobox widget, a Yahoo Map widget and a Dojo Table widget. The data used by the widgets is pulled from a JavaBeans component.

Creating a New Web Application Project

After you complete the following task, the IDE creates a web application with the necessary resources. The Web Pages node contains the following items:

  • WEB-INF: This directory contains the project deployment descriptor files.

  • resources node: This node contains the jMaki JavaScript files and component files for using widgets in your application.

  • index.jsp

  • jmaki-standard.css

  • glue.js

The jMaki libraries are added under the project's Libraries node. The IDE opens the index.jsp page in the Source Editor.

Create the simplejMaki Project

  1. Choose File→New Project.
  2. Under Categories, select Web. Under Projects, select Web Application and click Next.
  3. Type simplejMaki for Project Name.
  4. Change the Project Location to any directory on your computer.
  5. Select the Sun Java System Application Server for the server.
  6. Keep the other settings at their default and Click Next.
  7. Select the jMaki Ajax Framework and select the Standard CSS layout.
  8. Click Finish.

Creating the Navigation Using the Fish Eye Widget

When you perform the tasks in this section, you are adding the fish eye widget to the page and setting it up so that you can use it to navigate between the pages of the application.

Adding the Fish Eye Widget to index.jsp

After you perform this task, the IDE adds the custom JSP tag, widget, representing the Dojo Fish Eye widget, to the file. The tag contains default arguments for that widget. The IDE also adds the jMaki tag library declaration to the JSP file.

  1. Open the index.jsp file in the Source Editor, if it is not already open.
  2. Expand the jMaki Dojo node in the Palette and locate the Fish Eye widget.
  3. Select and drag the widget into the leftSidebar element in the Source Editor and delete the default sidebar content.
Previous Contents Next
Company Info Contact Terms of Use Privacy Copyright 1994-2007 Sun Microsystems, Inc.