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

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 :

  1. Using a Servlet

  2. 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}}" />



Where to go next?

Some blogs are talking about jMaki stuff as http://blogs.sun.com/jenniferb/ .

Comments:

Hi Patrice, thanks for the info. Is there a way to include a column of links? Also paging would be fantastic.

Posted by Jodda on February 20, 2008 at 03:31 AM CET #

Probably. Please have a look to : https://ajax.dev.java.net/injector.html. Greg Murray should be also a very useful contact.

Posted by Patrice Goutin on February 22, 2008 at 12:54 AM CET #

Post a Comment:
  • HTML Syntax: NOT allowed
About

This blog is about Software How-to & Best Practices

Search

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