Loading Your Own Data Into a jMaki Widget

Project jMaki gives you a lot of flexibility with respect to how you populate your widgets with data. Following are the three basic techniques for loading data into your widget:

• Reference a static file that contains the JSON data.

• Use an expression language (EL) expression expression from the tag's value attribute to reference the data from a bean.

• Use the tag's service attribute to reference data served by a JSP page or a servlet.

This section shows you how to use an EL expression from the value attribute to access data from a bean, just as you would with any other JSP tag. Whichever method you choose, you need to be sure that you pass the data in JSON format to the widget because this is what all the jMaki widgets expect. This means that if you have the data in a bean, you need to convert it from a Java object to JSON. jMaki includes the JSON API, which you use to perform the data conversion.

Initializing the Widget With Data

The thisState and thisCity combobox widgets on the index.jsp page use EL expressions to get their initial set of data from StateBean. The following code snippet shows the jsp:useBean and widget tags from this page:

<jsp:useBean id="StateBean" scope="session"
	class="plotCity.StateBean" />
<a:widget id="thisState" name="dojo.combobox" ... 
	value="${StateBean.states}"/>
<a:widget id="thisCity" name="dojo.combobox" ...
	value="${StateBean.cities}" />

As the preceding markup shows, the data comes from the getStates method of StateBean. The useBean tag makes StateBean available to the index.jsp page.

In StateBean, the getStates method converts string arrays from Java code into a single JSON array:

public String getStates() throws JSONException {
	JSONArray statesData = new JSONArray();
	JSONObject stateData = new JSONObject();
	for (int loop = 0; loop < states.length; loop++) {
		stateData.put("label", states[loop]);
		stateData.put("value", stateCodes[loop]);
		statesData.put(stateData);
		stateData = new JSONObject();
	}
	return jmaki.util.JSONUtil.jsonArrayToString(statesData, new StringBuffer());
}

The getStates method uses the JSONArray API to create the following JSON array:

"[
	{label : 'Alaska', value : 'AK'},
	{label : 'Arizona', value : 'AZ'},
	{label : 'California', value : 'CA'},
	{label : 'Oregon', value : 'OR'},
	{label : 'Washington', value : 'WA'}
]"

Using the ${StateBean.states} expression, the combobox widget loads this JSON array.

The getCities method loads all the Alaskan cities into a JSON array because Alaska is the initially selected state.

Both methods call the jsonArrayToString method to convert a JSON array to a string before returning the data back to the page.

It's important to remember that the EL expressions can only be used to initialize the widgets with data. To update the widget's data, such as after a user-initiated event, you need to use the publish/subscribe mechanism, as described in the section, Handling Widget Events.

Updating the Data in a Widget

In the case of the plotCity example, when you use the publish/subscribe system to update the widget's data, you are still using StateBean to get the data, which is stored in the cities.properties file.

Here are the contents of the cities.properties file:

AK=Anchorage,Fairbanks,Juneau,Nome
AZ=Mesa,Phoenix,Scottsdale,Tucson
CA=Los Angeles,Sacramento,San Diego,San Francisco
OR=Bend,Eugene,Portland,Salem
WA=Olympia,Seattle,Spokane,Tacoma

The event handler, as described in the next section, uses Ajax to send the selected state value to the StateBean object's getNewCities method, by way of a servlet. The getNewCities method gets the list of cities for the selected state from the properties file and loads the cities into a JSON array, as shown in the following code:

 
...
cityNames = ResourceBundle.getBundle("plotCity.cities");   
...
public String getNewCities(String state) throws JSONException{
	JSONObject city = new JSONObject();
	JSONArray cities = new JSONArray();
	String[] names = null;
	try {
		names = cityNames.getString(state).split(",");
	} catch(Exception e){
		return null;
	}
	for(int i = 0; i < names.length; i++){
		city.put("label", names[i]);
		city.put("value", names[i]);
		cities.put(city);
		city = new JSONObject();
	}
	jmaki.util.JSONUtil.jsonArrayToString(cities, new StringBuffer());
}

Loading Data Into a Widget in the plotCity Applicationgives step-by-step instructions for implementing plotCity to populate its widgets with data.