Groovy, Grails and GWT (G3WT) Tutorial

While HTML 5 holds tremendous promise, my days of fiddling with CSS are over. Fortunately GWT offers an alternative to the traditional Web Application paradigm; by cross compiling Java into Javascript you only need one language for both your server and your client. Back to the future.

Being a big believer in rapid prototyping, I'd much prefer having a Groovy -> Javascript compiler. Unfortunately Groovy isn't supported in the Client side GWT code since it's the .java files themselves that get cross compiled , not the bytecode. Still, it is possible to use Groovy ( Grails ) on the server side. using Grails and the GWT plugin. This provides the utility of Grails helper/scaffolding scripts and if you know Groovy it may save you time. Groovy's close coupling with Java also means that we need to not depart to far from the GWT paradigm either.

In order to learn Grails/GWT I decided to create a 'Hello World' application which uses RPC. Here's the step by step instructions I used to make it for those who are curious:

First make sure Groovy, Grails, and GWT are installed. Then we can create our Grails app:

>grails create-app g3wt

Now let's install the gwt plugin:

>cd g3wt

>grails install-plugin gwt

Create a GWT to provide the server side logic:

>grails create-gwt-module g3wt.Application

Create the client facing page which exposes the module we just created:

>grails create-gwt-page main/index.gsp g3wt.Application

It will (may?) prompt to ask if you want to create the main controller. Choose y for yes.

Now, lets git rid of the default grails page in favour of our new gwt page. You can do so by editing grails-app/conf/UrlMappings.groovy. Change "/"(view:"/index") to "/"(view:"/main/index") so that it picks up our newly created gwt page.

Now you're ready to try it. From a terminal the following to start up your development web server:
>grails run-app

Now start up GWT's "Development Mode" tool by running the following in another terminal:
>grails run-gwt-client

Click on the launch default browser button. Your new GWT should open and establish a connection with the Development Mode tool. At this point there's not really much here, so let's add a hello world rpc service.

First we create our Grails service:
> grails create-service Data

Edit the file grails-app/services/g3wt/DataService.groovy. Remove the empty serviceMethod method. Then add the following below "static transactional = true":

static expose = [ 'gwt:g3wt.client' ]

This line tells the grails helper script where to put the Java interfaces for the RPC calls.

Next replace serviceMethod with:

String helloWorld() {
return "Hello, World!"
}

Then we create the required normal and asynchronous interfaces under the src/java directory:
>grails generate-gwt-rpc

That's it for the server side. Now we edit the client scaffolding that was generated for us in

src/gwt/g3wt/client/Application.java.

Add the following import statements:

import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.rpc.ServiceDefTarget;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.Window;

Place the following in the onLoad method:

DataServiceAsync myService = (DataServiceAsync) GWT.create(DataService.class);

ServiceDefTarget endpoint = (ServiceDefTarget) myService;

// Note the URL where the RPC service is located!                                                                   
String moduleRelativeURL = GWT.getModuleBaseURL() + "rpc";
endpoint.setServiceEntryPoint(moduleRelativeURL);

// Call a method on the service!                                                                                    
myService.helloWorld( new AsyncCallback() {
  public void onSuccess(Object result) {
      // It's always safe to downcast to the known return type.                                               
      String resultString = ( String ) result;
      Window.alert( resultString );
  }

  public void onFailure(Throwable caught) {
  }

}
);

There's a lot of GWT magic here. My understanding is that the GWT looks at this entire line when it cross compiles and generates the right javascript object for our rpc calls. Then we can perform an rpc call using anonymous call that implements the AsyncCallback interface.

Run it again:

>grails run-app

Start up GWT's "Development Mode" tool by running the following in another terminal:
>grails run-gwt-client

You should see our "Hello, World!" alert box.

In the next installment I'm going demonstrate how to run our example under Google App Engine.