Jennifer's Weblog

Still More Fun with jMaki: Loading data into a Dojo table using JSON APIs

OK, I think I've exhausted the "More Fun with jMaki" moniker. But that doesn't mean I won't write more about jMaki. Upcoming blogs include how to wrap a Dojo widget into a jMaki widget. This time, I'll show how to load your own data into a Dojo table. This blog focusses only on how to convert Java object data into JSON format. It doesn't detail getting the data from a database.

The first thing to determine is what format the data for the Dojo table needs to be. To do this, you look at the widget.json file for the table widget. This file is located in the resources/dojo/table directory of the jMaki samples download. As the default value, it shows the following:

"defaultValue":{
"columns": { "title" : "Title", 
             "author":"Author", 
             "isbn": "ISBN #", 
             "description":"Description"},
"rows":[
 ['JavaScript 101', 'Lu Sckrepter','4412', 'Some long description'],
 ['Ajax with Java', 'Jean Bean','4413', 'Some long description']
 ]
}

In JSON-speak, this means that you have a JSON object (denoted by the outer curly braces) that contains another JSON object representing the columns of the table (denoted by the inner set of curly braces) and an array representing the rows of data (denoted by the square brackets). Inside the rows array is a set of other arrays. Each one of those arrays represents a single row of data.

What you need to do is use the JSON APIs to convert Java object data into this JSON format.

First, I created a Book bean to represent a book. If you are using the Java Persistence API, you could make this an entity class. Here is part of the Book class:

public class Book {

    private int bookId;
    private String title;
    private String firstName;
    private String surname;

    /** Creates a new instance of Book */
    public Book(int bookId, 
                String title, 
                String firstName, 
                String surname) {
        this.bookId = bookId;
        this.title = title;
        this.firstName = firstName;
        this.surname = surname;
    }

    public int getBookId() {
        return bookId;
    }

    public void setBookId(int bookId) {
        this.bookId = bookId;
    }
    ... // other getter and setter methods for the other properties.

Next, I created a class to convert the data to JSON. In this class, I added a method to create some rows of data. This is where you'd normally do your database access:

    public List createBooks() throws Exception {
        ArrayList books = new ArrayList();
        Book book = 
            new Book(201, 
               "My Early Years: Growing up on *7", 
               "Duke", "");
        books.add(book);
        book = 
            new Book(202, 
                "Web Servers for Fun and Proft", 
                "Jeeves", "");
        books.add(book);
        book = 
           new Book(203, 
                "Web Components for Web Developers", 
                "Webster", "Masterson");
        books.add(book);
        return books;
    }

Now comes the method that converts this data into JSON format using the JSON APIs:

    public JSONArray getBookData() throws Exception {
             JSONArray books = new JSONArray();
             JSONArray book = new JSONArray();
             ArrayList bookList = 
                     (ArrayList)createBooks();
             Iterator i = bookList.iterator();
             while(i.hasNext()){
                     Book bookData = (Book)i.next();
                     book.put(bookData.getBookId());
                     book.put(bookData.getTitle());
                     book.put(bookData.getFirstName());
                     book.put(bookData.getSurname());
                     books.put(book);
                     book = new JSONArray();
             }
             return books;
    }

This method uses the JSONArray API to create the rows array that contains an array representing each row of data. I'll explain in a minute why I'm not creating the column data here.

Finally, you refer to the getBookData method from the page using an EL expression:

<jsp:useBean id="appBean" 
                class="overviewApp.ApplicationBean" 
                scope="session"/>
<a:ajax name="dojo.table" 
   value="{columns: {'isbn':'ISBN #',
                      'title':'Title',
                      'firstName':'First Name',
                      'surname':'Last Name'},              
           rows:${appBean.bookData}}"/
>

Notice that I had to manually enter the columns data, but I can reference the rows data in the bean. This is because the JSONObject API uses HashMap under the covers. As you might know, HashMap does not ensure insertion order. Our use case requires it so that the column headings match up with the row data in each column. Therefore, I manually entered the column data into the page. If it were not for this issue, we could create the table as a JSON object in the bean so that the page author could reference the entire table with one EL expression.

Posted at 11:21AM Jan 19, 2007 by jenniferb in Sun  |  Comments[25]

More Fun with jMaki: Getting Data From a Bean

My last blog featured a combobox widget that includes a list of European cities. The service attribute of the ajax tag representing the widget in the page points directly to a JavaScript file that includes the data in a format that JavaScript can evaluate:

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

It is a JavaScript array representing the set of values in the combobox. This array consists of a set of other JavaScript arrays. Each of those JavaScript arrays includes the displayed label and the actual value of an item in the combobox.

OK, but what if you want to get the data from a bean using an EL expression, as you can with most other JSP tags? You can, but you need to add a little bit of code that will convert the object representation of your data into the representation shown above so that JavaScript can evaluate it.

This sounds like a lot of work, but it's really not bad. What I did is I created a bean, added the property to set the city name, and added a small method to build the JavaScript array of the data using JSON, which is a library that converts objects into String representations that JavaScript can evaluate. The JSON APIs are included in jMaki. Let's see how we can use JSON with our example.

Instead of using cities, lets use a set of countries and their country codes as our data instead:

[
	["Japan","JP"],
	["Thailand","TH"],
        ["Uganda", "UG"],
	["Ukraine","UK"],
	["United States of America","USA"]
]

In your bean, you need to import the jMaki libraries and the JSON libraries included in jMaki:

import com.sun.jmaki.*;
import org.json.*;

Then you create your properties to get and set the data:

    public String getCountry () {
        return country;
    }
    
    public void setCountry(String country) {
        this.country = country;
    }
    
    private String[] countries =
        new String[] {
            "Japan", "Thailand", "Uganda", "Ukraine", 
            "United States of America"
        };
   
   private String[] countryCodes =
        new String[] {
            "JP", "TH", "UG", "UR", "USA"
        };

Now, you need to use JSON to convert that data to a form JavaScript can evaluate:

    public JSONArray getCountryService() {
	JSONArray countriesData = new JSONArray();
        JSONArray countryData = new JSONArray();
        for (int loop=0; loop < countries.length; loop++){
		countryData.put(countries[loop]);
		countryData.put(countryCodes[loop]);
		countriesData.put(countryData);
		countryData = new JSONArray();
	}
	return countriesData;
}

In getCountryService, we're looping through the list of countries and country codes and loading each country and its corresponding country code into a separate array. Then we're adding each array to the countriesData array. What this method returns is the array containing the set of arrays of country data that the combobox widget expects.

The last thing to do is to reference the bean from the ajax tag representing the combobox widget:

<jsp:useBean id="appBean" class="combobox.ApplicationBean" scope="session"/>
<a:ajax id="cb1" name="dojo.combobox" selected="${appBean.country}" 
	value="${appBean.countryService}" />

To use the bean that you created in your page, you need to add the jsp:useBean tag, as shown in the preceding code. Then, you can use EL expressions to access the data from the bean. You can access the selected value of the combobox by referencing the country property from the selected attribute. And, you can get the set of data for the combobox by referencing the getCountryService method.

That's all there is to it. Next time, I'll show how to use JSON to load data from a bean into a dojo etable.

Posted at 08:20AM Jan 08, 2007 by jenniferb in Sun  |  Comments[1]

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:

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.

Posted at 12:48AM Jan 04, 2007 by jenniferb in Sun  |  Comments[31]