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.

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