java marcher

« Using jMaki widgets... | Main | How-to develop/test/... »

Dealing with « back-end » data with jMaki widgets : Loading data into a Dojo table using JSON APIs through a servlet or a SessionBean

Tuesday Jan 23, 2007

The jMaki project gives you a simple way to add virtually any AJAX-enabled widget to a web application by enabling you to wrap the widget as either a JSP tag handler or a JavaServer Faces component.

Preparing a JES-Portal Development Workshop for a customer, I have to find out how to deal with a jMaki Dojo table widgets.

In this note, I want to investigate 2 approaches to achieve the dynamic loading of data returned by a data provider to a jMaki Dojo table :

Using a Servlet
Using a Bean

The screenshots of these jMaki Dojo table look like the following:

Dynamic loading for jMaki Dojo table with Servlet based data provider

This is a 2 steps development :

- Step 1 : Create a Servlet to gain access to your data and create a JSON string to be returned to the jMaki Dojo table widget

The processRequest method looks like the following.

protected void processRequest(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html;charset=UTF-8");

// Get the list of books available

Vector listBooks = this.getBooks();

PrintWriter out = response.getWriter();

out.println("{");

out.println("'columns': { 'title' : 'Title', 'author':'Author', 'isbn': 'ISBN #', 'description':'Description', 'price':'Price'},");

out.println("'rows':[");

// Build the JSON string

for (int i=0; i < listBooks.size() ; i++ ){

Book abook = (Book)listBooks.elementAt(i);

out.println("['" + abook.getTitle() + " ', '"

+ abook.getAuthor() + " ', '"

+ abook.getIsbn() + " ', '"

+ abook.getDescription() + " ', '"

+ abook.getPrice() + "'],");

}

out.println("]");

out.println("}");

out.close();

}

- Step 2 : The last thing to do is to reference this servlet from the ajax tag representing the is to jMaki Dojo table :

<h1>Table dynamically loaded from a Servlet</h1>

<a:ajax name="dojo.table" service="myservlet" />

Dynamic loading for jMaki Dojo table with Bean based data provider

This is also a 2 steps development :

- Step 1 : Create a bean to gain access to your data and create a JSON string to be returned to the jMaki Dojo table widget

My ApplicationBean looks like the following :

package mysrc;

* ApplicationBean.java

* Created on January 10, 2007, 3:40 PM

import java.beans.*;

import java.io.Serializable;

import com.sun.jmaki.*;

import org.json.*;

/**

* @author pg100451

public class ApplicationBean extends Object implements Serializable {

public static final String PROP_SAMPLE_PROPERTY = "sampleProperty";

private String sampleProperty;

private PropertyChangeSupport propertySupport;

public ApplicationBean() {

propertySupport = new PropertyChangeSupport(this);

}

public String getSampleProperty() {

return sampleProperty;

}

public void setSampleProperty(String value) {

String oldValue = sampleProperty;

sampleProperty = value;

propertySupport.firePropertyChange(PROP_SAMPLE_PROPERTY, oldValue, sampleProperty);

}

public void addPropertyChangeListener(PropertyChangeListener listener) {

propertySupport.addPropertyChangeListener(listener);

}

public void removePropertyChangeListener(PropertyChangeListener listener) {

propertySupport.removePropertyChangeListener(listener);

}

private String[] titles = new String[] {"titre1","titre2","titre3","titre4" };

private String[] authors = new String[] {"authors1","authors2","authors3","authors4" };

private String[] isbns = new String[] {"isbn1","isbn2","isbn3","isbn4" };

private String[] descriptions = new String[] {"description1","description2","description3","description4" };

private String[] prices = new String[] {"price1","price2","price3","price4" };

public JSONArray getBooks() {

JSONArray booksData = new JSONArray();

JSONArray itemData = new JSONArray();

for (int loop=0; loop < titles.length; loop++ ){

itemData.put(titles[loop]);

itemData.put(authors[loop]);

itemData.put(isbns[loop]);

itemData.put(descriptions[loop]);

itemData.put(prices[loop]);

booksData.put(itemData);

itemData = new JSONArray();

}

return booksData;

}

- Step 2 : The last thing to do is to reference this servlet from the ajax tag representing the is to jMaki Dojo table :

<h1>Table dynamically loaded from a Bean</h1>

<jsp:useBean id="appBean" class="mysrc.ApplicationBean" scope="session"/>

<a:ajax id="table2" name="dojo.table" value="{columns: { 'title' : 'Title', 'author':'Author', 'isbn': 'ISBN #', 'description':'Description', 'price':'Price'}, rows:${appBean.books}}" />