Fun with jMaki: Using the Yahoo Geocoder service with the Dojo Combobox

Those of you who've looked at jMaki have probably seen the document on how to use the XMLHttpProxy to access services from widgets (See https://ajax.dev.java.net/xmlhttpproxy.html). In the document, Greg talks about the Yahoo Geocoder service. He also created a demo that uses the service with a Yahoo map widget.

I wanted to see how easy it would be to use the Geocoder service with the Dojo combobox widget included with jMaki. It turns out that there wasn't much to it.

My example allows a user to select a city from the combobox to see it plotted on the map, as shown in this figure:

Screenshot of application plotting Helsinki

To build this application, I first created my data file, europeCities.js, which contains a list of European cities in a JavaScript file:

[
	["Berlin","Berlin"],
	["Helsinki","Helsinki"],
	["London","London"],
	["Madrid","Madrid"],
	["Paris","Paris"],
	["Rome","Rome"]
]

Next, I created the JSP page that includes the ajax tags that represent the combobox and the map:

<a:ajax id="cb1" name="dojo.combobox" service="europeCities.js" />
<p>
<a:ajax id="map001" 
           name="yahoo.map" 
           args="{zoom:10, 
              centerLat:37.39316, 
              centerLon:-121.947333700, 
              width:350}" />
The cb1 ajax tag represents the combobox. It gets its data from the europeCities.js file. The map001 ajax tag represents the yahoo map and is set to a default set of coordinates.

To get the city that the user selects to be plotted on the map, I first needed a topic listener that takes the value of that city and uses dojo.io.bind to do the following:

  • Create a URL to the service using the selected value.
  • Publish the coordinates that are returned from the service to the /yahoo/geocoder topic.
Here is the listener code, which is located in the web/resources/glue.js file in the jmaki-core distribution:
jmaki.addGlueListener({
       topic: "/dojo/combobox/updateMap", 
       action: "call", 
       target: {object:"jmaki.listeners.ComboboxGeocoder",
       functionName:"updateMapHandler"}});

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

The /yahoo/geocoder topic listener is already included with the jMaki distribution. This listener function plots the coordinates on the map.

To get my new listener to be called when a new value is selected, I needed to add code to dojo combobox widget's component.js file that publishes the selected value and other arguments on the widget tag to the updateMap topic when the combobox experiences a value change:

   this.onChange = function(value){
       if (value == '') return;
       jmaki.publish("/dojo/combobox/updateMap", {wargs: wargs, value: value});
   } 

That's all there is to it.

You can download this application from the jMaki file download page by selecting comboboxGeocoder.war from the list of files.

If you are using a proxy server to server your web requests, you need to specify the proxyHost and proxyPort context parameters in the web.xml file:

  <context-param>
  <param-name>proxyHost</param-name>
  <param-value>myProxy.com</param-value>
  </context-param>
  <context-param>
  <param-name>proxyPort</param-name>
  <param-value>8080</param-value>
  </context-param>

To edit the web.xml file, unpack the WAR file and then re-package it with the jar command after editing the file.

Thanks to Greg Murray for helping me debug the listener code.

Comments:

Post a Comment:
Comments are closed for this entry.
About

jenniferb

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today