Communicating Comboboxes with jMaki, Part 2

For my previous blog entry, I explained how to create a jMaki application that causes a user action on one combobox widget to change the values displayed in another combobox widget. My example allowed a user to select a state in one combobox in order to make the other combobox load the names of a set of cities contained in the chosen state.

In this blog entry, I'll show how you can make this application a little more practical by adding a map widget so that when the user selects a city from the second combobox, the application will plot that city on the map, as this screen shot shows:

So, here's what you do:

  1. Perform the steps outlined in my previous entry, Simple Communicating Comboboxes in a jMaki Application
  2. Drag a Google map widget onto the JSP page, right after the second combobox widget.
  3. Add a publish property to the second combobox, and give it the topic /cities, as shown here:
    <a:widget
            name="dojo.combobox"
            publish="/cities"
            subscribe="/cb"
            value="${StateBean.cities}"  />
    
    Now, when the user selects a city from this combobox, the selected value is published to the /cities topic.
  4. Add the following function to the end of the glue.js file:
     jmaki.subscribe("/cities/onSelect", function(item) {
      var location = item.value;
      var encodedLocation = encodeURIComponent("location=" + location);
      // jmaki.xhp is provided as part of jmaki and maps to the XMLHttpProxy
      var url = jmaki.xhp + "?id=yahoogeocoder&urlparams=" + encodedLocation;
      jmaki.doAjax({url: url, callback : function(req) {
        if (req.responseText.length > 0) {
          // convert the response to an object
          var response = eval("(" + req.responseText + ")");
          var coordinates = response.coordinates;
          v = {results:coordinates};
          jmaki.publish("/jmaki/plotmap", coordinates);
        } else {
          jmaki.log("Failed to get coordinates for " + location );
        }
      }
      });
    });
    
    This function subscribes to the /cities/onSelect topic. In the previous step, you made it so the second combobox widget publishes its value to the /cities topic. Recall from the previous blog entry that a combobox widget always publishes its selected value to the global onSelect topic and to the onSelect sub-topic of a developer-defined parent topic. In this case, you've specified that this combobox widget publish its value to the parent topic, /cities, and therefore, the value is published to /cities/onSelect.

    The subscribe function gets the selected city name from the item variable that is passed to it. The function takes the city name, encodes it, and uses Ajax to pass it to the Yahoo geocoder service by way of the XMLHttpProxy client. The Yahoo geocoder service returns the coordinates of the location to the XMLHttpProxy client, which returns it to the subscribe function.

    When the subscribe function receives the coordinates, it publishes them to the /jmaki/plotMap topic, which is a standard jMaki topic to which all the jMaki map widgets subscribe. Now, the map widget you added to your application displays the city the user selects from the cities combobox.

We're not done yet, however. When you start testing out the application, you'll notice something wrong. If you start from Alaska and work your way down, everything will seem fine until you try to plot Scottsdale. You'll discover that the Yahoo geocoder service sends the coordinates of Scottsdale, Alabama instead of those of Scottsdale, Arizona because you did not specify which Scottsdale you wanted. So, we need to do a couple more things to get this application working correctly:
  1. First, you'll need to add an ID for the combobox that displays the state names because the subscribe function will need to get this widget's value:
    <a:widget id="thisState" name="dojo.combobox" publish="/cb/getState" value="${StateBean.states}" />
    Notice that I've given this widget the ID, thisState
  2. Now, you need to add a couple lines to the subscribe function that get the selected state name and add it to the city name:
    jmaki.subscribe("/cities/onSelect", function(item) { var city = item.value; var state = jmaki.attributes.get('thisState').getValue(); var location = city + ", " + state; // the rest of the function stays the same ... });
    First I added a line that gets the value of the widget called thisState. After that, I added another line that creates a location specifying both the city name and the state name so that the Yahoo geocoder service knows exactly which city I want.
Now when you try to plot Scottsdale, you will see Scottsdale, AZ, not Scottsdale, AL.
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