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.
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