Web 2.0 Development with the Google Web Toolkit

What Is AJAX?

The standard model for Web applications is something like this: you get a screenful of text and fields from a server, you fill in some fields, and when you click a button, the browser sends the data you typed to a server (wait), which processes it (wait), and sends back an answer (wait), which your browser displays, and then the cycle restarts. This is by far the most common way Web applications operate, and you must get used to the delays. Nothing happens immediately, because every answer that needs data from a server requires a round trip.

AJAX (Asynchronous JavaScript And XML) is a technique that lets a Web application communicate in the background (asynchronously) with a Web server to exchange (send or receive) data with it. This does away with the requirement to reload the whole page after every action or user click. Thus, using AJAX increases the level of interaction, does away with waiting for pages to reload and allows for enhanced functionality. A well-programmed application will send requests in the background, as you are doing other things, so you won't have to stare at a blank screen or a turning-hourglass cursor. This is the Asynchronous part of AJAX acronym.

The next part of the AJAX acronym is JavaScript. JavaScript allows a Web page to contain a program, and this program is what allows the Web page to connect to a server as previously described. However, it's not just a question of having JavaScript, but also of how it is implemented in the browser. Both Firefox and Internet Explorer both provide AJAX access, but with some differences, so programmers must take those differences into account when doing the connection. Data is usually retrieved using XMLHttpRequest, but other techniques are possible, such as using iframes.

Finally, the last part of the AJAX acronym is XML. XML is a standard markup language, used for sharing and passing information. As we've seen, the name of the DOM API for making Web service requests is named XMLHttpRequest, and most likely, the original intent was that XML be used as the protocol for exchanging data between browser and server. However, neither the X in AJAX nor the XML in XMLHttpRequest means that you have to use XML; any data protocol at all, including no protocol, can be used.

JSON (JavaScript Object Notation) often is used; it's more lightweight than XML, and as you might guess by its name, is often a better fit for JavaScript. See Figure 3 for some actual JSON code; remember, it's not meant to be clear to humans, but compact and easy to understand for machines.

AJAX comprises basic technologies that have been around for a while now, and the AJAX term itself was created in 2005 by Jesse Garrett. GWT uses AJAX to allow the client program to communicate with the server or execute procedures on it in a fully transparent way. Of course, you also can use AJAX explicitly for any special purposes you might have.

Packages

Using GWT requires learning about several packages. The most important ones are:

You can find information on these and other packages on-line, at google-web-toolkit.googlecode.com/svn/javadoc/1.5/index.html.

Listing 1. Projects must be created by hand, outside Eclipse, and imported into it later.

# cd
# md examplefiles
# cd examplefiles
# ~/bin/gwt/projectCreator -eclipse exampleproject
Created directory ~/examplefiles/src
Created directory ~/examplefiles/test
Created file ~/examplefiles/.project
Created file ~/examplefiles/.classpath

# ~/bin/gwt/applicationCreator -eclipse exampleproject \
       com.kereki.client.example
Created directory ~/examplefiles/src/com/kereki
Created directory ~/examplefiles/src/com/kereki/client
Created directory ~/examplefiles/src/com/kereki/public
Created file ~/examplefiles/src/com/kereki/example.gwt.xml
Created file ~/examplefiles/src/com/kereki/public/example.html
Created file ~/examplefiles/src/com/kereki/client/example.java
Created file ~/examplefiles/example.launch
Created file ~/examplefiles/example-shell
Created file ~/examplefiles/example-compile

The Same Origin Policy

The Same Origin Policy (SOP) is a security restriction, which basically prevents a page loaded from a certain origin to access a page from a different origin. By origin, we mean the trio: protocol + host + port. In http://www.mysite.com:80/some/path/to/a/page, the protocol is http, the host is www.myhost.com, and the port is 80. The SOP would allow access to any document coming from http://www.mysite.com:80, but disallow going to https://www.mysite.com:80/something (different protocol), http://dev.mysite.com:80/something (different host) or http://www.mysite.com:81/something (different port).

Why is this a good idea? Without it, it would be possible for JavaScript from a certain origin to access data from another origin and manipulate it secretly. This would be the ultimate phishing. You could be looking at a legitimate, valid, true page, but it might be monitored by a third party. With SOP in place, you know for certain that whatever you are viewing was sent by the true origin. There can't be any code from other origins.

Of course, for GWT, this is a bit of a bother, because it means that a client application cannot simply connect to any other server or Web service to get data from it. There are (at least) two ways around this: a special, simpler way that allows getting JSON data only or a more complex solution that implies coding a server-side proxy. Your client calls the proxy, and the proxy calls the service. Both solutions are explained in the Google Web Toolkit Applications book (see Resources). In this article, we use the JSON method, and you can find the source code at www.gwtsite.com/code/webservices.

The simple JSON method requires a special callback routine, and this could be a showstopper. However, many sites implement this, including Amazon, Digg, Flickr, GeoNames, Google, Yahoo! and YouTube, and the method is catching on, so it's quite likely you will be able to find an appropriate service.

Listing 2. Source Code for the JSONRequest Class

package com.kereki.client;
public class JSONRequest {
    public static void get(String url,
                           JSONRequestHandler handler) {
        String callbackName = "JSONCallback"+handler.hashCode();
        get(url+callbackName, callbackName, handler);
    }

    public static void get(String url, String callbackName,
                           JSONRequestHandler handler) {
        createCallbackFunction(handler, callbackName);
        addScript(url);
    }

    public static native void addScript(String url) /*-{
        var scr = document.createElement("script");
        scr.setAttribute("language", "JavaScript");
        scr.setAttribute("src", url);
        document.getElementsByTagName("body")[0].appendChild(scr);
    }-*/;

    private native static void createCallbackFunction(
                                   JSONRequestHandler obj,
                                   String callbackName) /*-{
        tmpcallback = function(j) {
            obj.@com.kereki.client.JSONRequestHandler::
                onRequestComplete(
                    Lcom/google/gwt/core/client/JavaScriptObject;)(j);
        };
        eval( "window." + callbackName + "=tmpcallback" );
    }-*/;
}

Note that the last two methods are written in JavaScript instead of Java; the JavaScript code is written inside Java comments. The special @id... syntax inside the JavaScript is used for accessing Java methods and fields from JavaScript. This syntax is translated to the correct JavaScript by GWT when the application is compiled. See the GWT documentation for more information.

Listing 3. Source Code for the JSONRequestHandler Class

package com.kereki.client;
import com.google.gwt.core.client.JavaScriptObject;
public interface JSONRequestHandler {
    public void onRequestComplete(JavaScriptObject json);
}

You can find the code for this listing and the previous one at www.gwtsite.com/code/webservices.

Listing 4. Source Code for the Main Program

package com.kereki.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.user.client.ui.*;
import com.google.gwt.json.client.*;
import com.google.gwt.http.client.URL;
import com.kereki.client.JSONRequest;
import com.kereki.client.JSONRequestHandler;

public class example implements EntryPoint {
    public void onModuleLoad() {
        final TextBox tbSearchFor = new TextBox();

        final TextArea taJsonResult = new TextArea();
        taJsonResult.setCharacterWidth(80);
        taJsonResult.setVisibleLines(20);

        final HorizontalPanel hp1 = new HorizontalPanel();

        Button bGetNews = new Button("Get news!",
            new ClickListener() {
                public void onClick(Widget sender) {
                    JSONRequest.get(
                        "http://search.yahooapis.com/"+
                        "NewsSearchService/V1/newsSearch?"+
                        "appid=YahooDemo&query="+
                        URL.encode(tbSearchFor.getText())+
                        "&results=2&language=en"+
                        "&output=json&callback=",
                        new JSONRequestHandler() {
                            public void onRequestComplete(
                                    JavaScriptObject json) {
                                JSONObject jj= new JSONObject(json);
                                taJsonResult.setText(jj.toString());
                            };
                        }
                    );
                }
            });

        hp1.add(new Label("Search for:"));
        hp1.add(new HTML(" ",true));
        hp1.add(tbSearchFor);
        hp1.add(new HTML(" ",true));
        hp1.add(bGetNews);

        RootPanel.get().add(hp1);
        RootPanel.get().add(new HTML("<br>",true));
        RootPanel.get().add(taJsonResult);
    }
}

The code in Listing 4 shows access to a single service, but it would be easy to connect to several sources at once and produce a mashup of news.

Listing 5. Compiling the Code and Deploying the Files to Your Server

# cd ~/examplefiles/
# sh ./example-compile
Output will be written into ./www/com.kereki.example
Copying all files found on public pathCompilation succeeded
# sudo cp -R ./www/com.kereki.example /srv/www/htdocs/

Resources

Google Web Toolkit Applications by Ryan Dewsbury, Prentice-Hall, 2008.

Google Web Toolkit for AJAX by Bruce Perry, PDF edition, O'Reilly, 2006.

Google Web Toolkit Java AJAX Programming by Prabhakar Chaganti, Packt Publishing, 2007.

Google Web Toolkit Solutions: Cool & Useful Stuff by David Geary and Rob Gordon, PDF edition, Prentice Hall, 2007.

Google Web Toolkit Solutions: More Cool & Useful Stuff by David Geary and Rob Gordon, Prentice Hall, 2007.

Google Web Toolkit—Taking the Pain out of AJAX by Ed Burnett, PDF edition, The Pragmatic Bookshelf, 2007.

GWT in Action: Easy AJAX with the Google Web Toolkit by Robert Hanson and Adam Tacy, Manning, 2007.

AJAX: a New Approach to Web Applications: www.adaptivepath.com/ideas/essays/archives/000385.php

AJAX: Getting Started: developer.mozilla.org/en/docs/AJAX:Getting_Started

AJAX Tutorial: www.xul.fr/en-xml-ajax.html

Apache 2.0 Open Source License: code.google.com/webtoolkit/terms.html

Eclipse: www.eclipse.org

Google Web Toolkit: code.google.com/webtoolkit

GWT4NB, a Plugin for GWT Work with NetBeans: https://gwt4nb.dev.java.net

Java SE (Standard Edition): java.sun.com/javase

Java Development Kit (JDK): java.sun.com/javase/downloads/index.jsp

JSON: www.json.org

JSON: the Fat-Free Alternative to XML: www.json.org/xml.html

NetBeans: www.netbeans.org

Same Origin Policy, from Wikipedia: en.wikipedia.org/wiki/Same_origin_policy

Web 2.0, from Wikipedia: en.wikipedia.org/wiki/Web_2

What Is Web 2.0?, by Tim O'Reilly: www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html

XML: www.xml.org