Grails + GWT = Rock n Roll: Part 1 - exploring a new world

Welcome to wonderful world of Rock n Roll. Rock bands, a lot of times, are frowned upon by most traditional people. Other times they are revered by young rebels. Doesn't matter. The best bands, in the end, only do one thing: Rock n Roll.

But what's it all about? No doubt the music is the main product of this rebel factory. Behind the people with tattoos, earrings and full of torn clothes, sometimes alcoholics and drug addicts, deep down there are musicians that together (and here's the most important: Together) are able to touch the souls hungry for pure and simple rock. Ever heard a good Lynyrd Skynyrd with their 3 guitars, piano, drums, etc? No doubt there is great musicality there. Together they get rock fans astounded even nowadays.

After this metaphorical introduction, I will start today a series of posts about GWT and Grails, two technologies that together, for me, are emerging as the greatest rock band of recent times.

Grails is IMHO simply the best framework for web development in the java platform (at least those I know).

GWT (Google Web Toolkit), on the other hand, I'm just a beginner, or rather curious. To be honest, I have been a little tired of dealing directly with HTML, CSS and Javascript, especially with the rise of Javascript that must be handled when developing AJAX applications. Even using libraries such as jQuery, or Prototype, anyway, it is a lot of JavaScript to handle.

Because of this (and other reasons), I think that GWT can be of great help. One of the major reasons is also the belief that I'm getting that GWT can help a lot on having a decent architecture also in the View layer, not just the model, the controller, the DAO, etc.. If we look at an architecture of a traditional Grails application from the bottom up, we can see that:

• - The DAO is well resolved,
• - Services are there and fulfill their role (transaction control, for example),
• - The Controller also has its role as the boundary between our HTTP world and business rules/logic
• - But then comes the View and we start to lose ouselves and make a mess with HTMLs, CSSs, Styles, JavaScript .js files, inline JavaScript, and so on.

I've been studying a bit of GWT to understand more deeply and I'm starting to believe that it can be used to more easily engineer a decent View layer. For example, you can use an MVP (Model View Presenter) with GWT. Anyone out there can say that you can also do so with JavaScript directly. Yes, you may, but you can't deny that GWT makes things easier. First: It is JAVA! You get tools, refactorings, debugging, and more. You also get the fact that GWT abstracts you from worldly concerns, such as obfuscation and minimization of JavaScript, to say the least. It does this for us.

So that's it guys. Let's start .... I'l write the posts in accordance with the adventure that I am going through. I have never developed a real application with GWT + Grails. So we will do so together. It will be small, but let's go!

To start with, I installed the GWT plugin for Eclipse. Also downloaded the GWT SDK (currently I am using version 2.0.3 of GWT). Download them all here: http://code.google.com/intl/en/webtoolkit/download.html

I did a little experiment with GWT alone, without Grails yet. For this, I created a new GWT project using the Eclipse wizards that the plugin gives me. It creates a project already running from within eclipse, all beautiful. And this new project already has a small sample page, with a modal dialog, an Ajax request and everything. All there for you to begin understanding EntryPoint, GWT Modules, widgets and everything else.

So the first suggestion I give is this: play with the new application generated by the Eclipse plugin.

The first thing I noticed about applications with GWT is that everything is AJAX, I mean asynchronous. All communication with the server is asynchronous. Then I saw that the application generated by the Eclipse plugin has a different layout from a Grails application. So I get the first problem: how to join the two worlds?

Well, in the end, GWT only to generates HTMLs and Javascript. So you can compile your GWT project, get the generated HTML and Javascript, and copy to your Grails project, in web-app folder. Simple as that! But that would not be productive.

So I questioned: how people gather around Grails with GWT? They make a GWT project and another Grails project, and then join the two in some way (with maven for example)? Or they create just one project with it all?

And more... if they are two distinct projects, how to deal with the Same Origin Policy (SOP)?

I saw that there are people who actually use the first solution, and people who use the second. For example, Matt Raible. Since I was developing with AppFuse I'm a fan of his. I learned a lot from the structure that he set for AppFuse.

And Matt uses the first solution? He has two applications: one GWT and one Grails. Then, in development environment he has two apps running simultaneously. And he deals with SPO through a smart GWT proxy. The proxy receives requests form GWT client, forwards it to the Grails application, get back the response from it, and forward the same to the browser that has the GWT client. Very crazy, but it works. (at least this is what I understood he is doing)

In production environment he actually puts them together. He has a smart Maven that does all this for him automatically, generating a single WAR that has the Grails and GWT client applications together. Then the SPO problem disappears.

The other alternative is to gather everything together from scratch in a single application. To facilitate this, Peter Ledbrook created the GWT plugin for Grails (do not be fooled by this page. The plugin is now in version 0.5 and supports GWT 2.0).

I, for now, will follow this simpler path (always like the simplicity): I'll use the GWT plugin for Grails.It seems so simple now ...... but I got a couple of weeks to reach this conclusion. And so far I wanted to understand why Matt Raible does not use the plugin. Maybe it is bad for some reason. If so, I have not yet discovered the badness.

So my friend, here are the initial steps:

• - Installing the SDK GWT
• - Create the environment variable GWT_HOME pointing to the root of the GWT SDK
• - Install the Eclipse plugin for GWT
• - Create a simple application using the GWT plugin for eclipse.
• - Open the application in the browser using the URL displayed by Eclipse (with gwt.codesrv parameter in the URL - this parameter is what allows you to change the Java code and refresh your browser to see the change there immediately).
• - Ensure that the GWT browser plugin is installed (it will popup asking you to be installed).
• - Run this application and play around with different layouts GWT.

That's it. Now that you played with GWT a bit, let's join the two (GWT + Grails):

• - Create a new Grails application with the command grails create-app rockgwt
• - Go into it (cd rockgwt)
• - Install the GWT Grails plugin (using the grails install-plugin gwt). I'm using Grails 1.2.x and grails-gwt plugin 0.5
• - Create a GWT Module with the command plugin grails create-gwt-module com.rockgwt.RockNRoll
• - Create a host page for your GWT Module. I did this by creating a controller and one grails page, index.gsp, for this controller. This page is the one that will host GWT:
• 1) grails create-controller com.rockgwt.controller.Principal
• 2) grails create-gwt-page main / index.gsp com.rockgwt.RockNRoll (when this command asks you if you want to create the Controller, say no, because you just created it in the previous step --- I think the plugin does not recognize the Controller created inside apackage, whatever).
• - Compile your module with the command grails compile-gwt-modules (it takes a little bit)
• - Run the Development Mode with the command grails run-gwt-client Note that it will open the application window of GWT Development Mode
• - Open another Terminal, go to your project rockgwt and run grails application (that's right, you have two things running: the grails run-app , and grails run-gwt-client).
• - Open the browser and go to the Home of your GWT + Grails application : http://localhost:8080/rockgwt?gwt.codesvr=127.0.0.1:9997
• - To guarantee success, simply click the Launch Default Browser in the Development Mode window.
• - The address you want to access in the end will be your main controller:
  http://localhost:8080/rockgwt/principal/index?gwt.codesvr=127.0.0.1:9997
• - Be sure to put this crazy parameter. It is responsible for allowing you to change the Java code and give a refresh on the browser to see the changes immediately.

Now, open your class RockNRoll and leave it like this:

(this class is in your project rockgwt in src/gwt/com/rockgwt/client)

package com.rockgwt.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.RootPanel;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class RockNRoll implements EntryPoint {
/**
* This is the entry point method.
*/
public void onModuleLoad() {

final Button sendButton = new Button("Rock n Roll");

RootPanel.get().add(sendButton);
}
}

Refresh your browser.

UPDATE (3/8/2010):
- Just to complete....... in order to use Eclipse, click the right button of the mouse on top of src/gwt and select Build Path> Use the Source Folder
- And finally right click the mouse on the project rockgwt and select the Google> Webtoolkit Settings, inside the wizard that opens, select the first checkbox that appears at the top:"Use Google Web Toolkit." So you have everything you need in the classpath of the application in Eclipse.

Tks