Sunday, May 30, 2010

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.

Labels: ,

16 Comments:

At June 1, 2010 at 2:09 AM , Blogger johnrellis said...

Good intro... I look forward to the app engine example. We have a couple of apps in production using GWT and Grails and for a Java house it is much better than rolling together html & javascript in gsps. IDEA is awesome for GWT support too!

Hmmm maybe it is time for some GWT blog posts from me?? We are using smart gwt... not a huge fan to be honest!

Thanks for sharing! :)

 
At June 1, 2010 at 4:08 PM , Blogger Geoff Flarity said...

Johnrellis: Do you find the GWT + Grails combo is saving you time? One thing that occured to me as I wrote this is that with GWT, most of the Application logic moves to the client, leaving data services on the back end.

 
At June 2, 2010 at 1:45 AM , Blogger Christophe said...

Is it possible to get this to work in some IDE ?

 
At June 2, 2010 at 2:07 AM , Blogger johnrellis said...

Hey Geoff,

It is entirely possible to basically use Grails as a services provider (JSON, XML, whatever) when using GWT.... this came up on the Grails user list recently but the consensus seemed to be that GWT made it too difficult to transform the JSON into complex data to display... but that is only opinion.

In our projects we use Value Objects or Data Transfer Objects (check out the Grails DTO plugin for info) which can basically see you recreating your domain objects under src/java/com.company.mayapp.client.These are serializable POJO's that both your server and client can see. This can be seen as an extra layer. Additionally there's the idea of ActionHandlers (see gwt plugin 0.5 release notes) that are designed to delegate from your Grails services to info usable by your GWT client in RPC.... be it DTO's or whatever. This can also be seen as another layer. And using these approaches leave a lot of the logic on the server.

Either way has it's positives and negatives... you are either doing most of the work on the server or on the client. So I am not sure if you are gaining too much of a time advantage because you could be just doing in Java on the client what you could be doing in Groovy on the server.

One thing I have found is that I only ever really generate Grails Domains and Services these days... there doesn't seem to be a need for controllers when using GWT. Of course this could all change if you are using Grails as a REST provider or something.

Hope this helps!

@Christophe... we use IDEA for our Grails and GWT dev and it is perfect for the job.

 
At June 2, 2010 at 4:54 AM , Blogger Moni said...

Uhm. Who uses GWT anyways? Are there examples of good, usable GWT web apps out there?

 
At June 2, 2010 at 5:55 AM , Blogger johnrellis said...

@Moni google wave.

 
At June 2, 2010 at 5:59 AM , Blogger Moni said...

This comment has been removed by the author.

 
At June 2, 2010 at 6:00 AM , Blogger Moni said...

Besides Google Wave.

I found this:

Google Web Toolkit Gallery

But really, who uses these apps?

 
At June 2, 2010 at 6:07 AM , Blogger johnrellis said...

@Moni

:)

We have 3 Grails applications in production where their front ends are entirely using GWT but sorry they are on a VPN of course and we only have fragmented screenshots on our website.

It is an awesome framework for creating applications that run in the browser that can have similar levels of functionality to desktop clients.

Give it a try!

John

 
At June 2, 2010 at 6:19 AM , Blogger Moni said...

@johnrellis

Ok cool. Yeah that's what I figured. Most of the apps are probably used only in intranet environments.

I don't doubt that it's a fantastic toolkit to work with. I was just wondering if it was useful from a user perspective.

Seeing as HTML 5 is going to be the next big thing (Netbook/Google TV/iPad) ...

 
At June 2, 2010 at 6:58 AM , Blogger Andreas Steffan said...

I'm just like you also a big believer regarding rapid prototyping and HTML 5.

I have been working with grails but no "real" experience with GWT (beyond quickly trying it out that is).

Watching the part where they introduced the Spring Roo + GWT combo in this years Google I/O keynote really made my heart beat faster. Basic app up and running in less than 200 keystrokes, super fancy scaffolding and app snappy and superfast. I hope this is where the grails + GWT combo is headed.

cheers
Andreas

 
At June 2, 2010 at 7:17 AM , Blogger johnrellis said...

@Andreas

here here!

 
At June 2, 2010 at 5:01 PM , Blogger Geoff Flarity said...

FYI I tried to get the example working under App Engine and I experienced a very unusual bug. It looks like the app engine dev server and is running fine but nothing is listening on port 8080 as the output claims.

 
At June 3, 2010 at 4:30 AM , Blogger Willy said...

That's an awful lot of code at various places for a simple 'Hello world'.

This example illustrates very well that development with GWT isn't exactly rapid development.

GWT makes sense if you need a highly distributed and scalable view layer but I dare say that in most cases you're better with technologies like Prototype or jQuery, even if you have to use a whiff of JavaScript here and there beside your Groovy and Java code.

 
At June 6, 2010 at 6:13 PM , Blogger aprendizbasico said...

In Application.java, at this line import com.google.gwt.core.client.EntryPoint; it gives "package com.google.gwt.core.client does not exist"

Thanks !
Best regards

 
At June 23, 2010 at 2:46 AM , Blogger LearnPHP said...

To learn php,html,javascript,ajax,mysql,jquery with advanced concepts, you can visit http://advancedphptutorial.blogspot.com

 

Post a Comment

Subscribe to Post Comments [Atom]

<< Home