Eclipse Wiki Weblog

Thursday August 07, 2008

Using the GWT Requestbuilder and the JSON-LIB server side library

The process for working with the GWT Requestbuilder could be divided into a server part for creating the JSON data and a client part to use the JSON data. In this example a GWT Listbox show some "category" entries.

Contents
Server side JSON data Installation Servlet definition GWT client side JSON data JSON module definition A GWT category listbox

Server side JSON data

Installation

download Json-lib and the required dependendies. For this example it's only necessary to additional download:

jakarta commons-lang 2.3
ezmorph 1.0.4

I installed these 3 JARs in my GWT project:

/tomcat/webapps/ROOT/WEB-INF/lib/json-lib-2.2.2-jdk15.jar
/tomcat/webapps/ROOT/WEB-INF/lib/commons-lang-2.3.jar
/tomcat/webapps/ROOT/WEB-INF/lib/ezmorph-1.0.4.jar

And added them to the .classpath file:

<?xml version="1.0" encoding="UTF-8"?>
<classpath>
...
	<classpathentry kind="lib" path="tomcat/webapps/ROOT/WEB-INF/lib/json-lib-2.2.2-jdk15.jar"/>
	<classpathentry kind="lib" path="tomcat/webapps/ROOT/WEB-INF/lib/commons-lang-2.3.jar"/>
	<classpathentry kind="lib" path="tomcat/webapps/ROOT/WEB-INF/lib/ezmorph-1.0.4.jar"/>
	<classpathentry kind="output" path="bin"/>
</classpath>

and also in the gwt-project.launch file.

Servlet definition

Create the JSON data on the server side with the help of the Json-lib:

package org.matheclipse.ajax.server;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

public class JSONCategories extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		JSONArray jsonArray = createCategories();
		
		PrintWriter out = resp.getWriter();
		out.println(jsonArray);
		
	}

	public static JSONArray createCategories() {
		List<String> list = new ArrayList<String>();
		list.add("Algebra");
		list.add("Calculus");
		list.add("Geometry");
		list.add("Finance");
		return JSONArray.fromObject(list);
	}
}

Because the "/categories" url-pattern should be used to get the JSON data from the server, I added the following additional servlet configuration in Tomcat's tomcat/webapps/ROOT/WEB-INF/web.xml configuration file:

<?xml version="1.0" encoding="UTF-8"?>
<web-app>

   <servlet>
		<servlet-name>json</servlet-name>
		<servlet-class>org.matheclipse.ajax.server.JSONCategories</servlet-class>
	</servlet>
	
	<servlet-mapping>
		<servlet-name>json</servlet-name>
		<url-pattern>/categories</url-pattern>
	</servlet-mapping>
...

...
</web-app>

GWT client side JSON data

JSON module definition

Include the JSON module in your module definition like this:

<module>
	<-- <Inherit the core Web Toolkit stuff. -->
	<inherits name="com.google.gwt.core.Core"/>
	<inherits name='com.google.gwt.user.User'/>
	<inherits name='com.google.gwt.json.JSON'/>
...

...
</module>

A GWT category listbox

Extend Listbox like this to show the categories which you request from the JSONCategories servlet.

import com.google.gwt.http.client.Request;
import com.google.gwt.http.client.RequestBuilder;
import com.google.gwt.http.client.RequestCallback;
import com.google.gwt.http.client.Response;
import com.google.gwt.json.client.JSONArray;
import com.google.gwt.json.client.JSONParser;
import com.google.gwt.json.client.JSONString;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.ListBox;

public class CategoriesListbox extends ListBox {

	public CategoriesListbox(boolean isMultipleSelect) {
		super(isMultipleSelect);
		RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, "/categories");
		try {
			builder.setCallback(new RequestCallback() {
				public void onError(Request request, Throwable exception) {
					Window.alert(request.toString());
				}

				public void onResponseReceived(Request request, Response response) {
					if (response.getStatusCode() == 200) {
						JSONArray items = JSONParser.parse(response.getText()).isArray();
						for (int i = 0; i < items.size(); i++) {
							addItem(((JSONString) items.get(i)).stringValue());
						}
						setVisibleItemCount(items.size());
					} else {
						Window.alert(response.getStatusText());
					}
				}
			});
			builder.send();
		} catch (Exception e) {
			Window.alert(e.getMessage());
		}
	}

}