Wednesday, May 09, 2012

Running GWT 2.4.0 with STS 2.9.1 and Grails 2.0.3

Alright, if you followed all the steps of the previous post, you should be able to see the results of the GWT code execution at the address:
http://localhost:8080/{projectname}/hello.gsp 
As you might have noticed, I previously asked the plugin to compile the GWT code (compile-gwt-modules). That operation takes some seconds as the entire artifact is recompiled (when the application will grow, the compilation can last minutes).  Luckily there is an alternative, the hosted mode. When an application is running in hosted mode, the Java Virtual Machine (JVM) is actually executing the application code as compiled Java bytecode, using GWT plumbing to automate an embedded browser window. This means (1) we don't need to recompile the code as STS is producing the Java bytecode for us incrementally (2) the debugging facilities of your IDE are available to debug both your client-side GWT code and any server-side Java code as well.

First we start the grails application (run-app), second, in the command prompt we type:
run-gwt-client
This last command starts the hosted mode and you should see appearing a window like the one depicted in figure 1. 

Figure 1: hosted mode window.

Now we can 'copy to clipboard' and open that link in a web browser:
http://localhost:8080/GwtTest/hello.gsp?gwt.codesvr=127.0.0.1:9997
The page should appear in the window and the alert 'hello' should display. Now you can verify the usefulness of the hosted mode by updating the alert - in the class HelloApp.java from 'hello' to 'hello me' - and reloading the page. The alert will display the new string without you having to trigger the GWT code compilation manually. And this will result in a huge save of time. (Read more)

Note. Remember that the manual compilation is still necessary prior to deployment as the deployed version of the page will run the compiled JavaScript.


Friday, May 04, 2012

Setting up STS 2.9.1, Grails 2.0.3 and GWT 2.4.0

If you need to integrate Grails and Google Web Toolkit (GWT) here is a list of tips. If you are interested in Grails you might want to consider the SpringSource Tool Suite or briefly STS. I usually install the STS package in a directory which name includes the version of the STS software to make sure multiple versions of the tool can beautifully coexist on the same machine. The tool is currently in version 2.9.1 and, as the previous versions of STS, it offers a good set of features for integrating with Grails. After the installation is completed I suggest to open the Dashboard and select the tab "Extensions". If you have just installed the tool, it should look more or less like in figure 1.

Figure 1: STS 2.9.1 Dashboard right after installation.

As you can easily verify in figure1, I would suggest to pick two extensions in particular: Grails Support and Google Plugin for Eclipse - which now comes with GWT 2.4.0. Select those and proceed with the installation. I don't usually pick the "Grails (current production release)" as I usually download and install Grails separately. The current release version of Grails is 2.0.3 and you should download it and unzip it in a convenient location.

Figure 2: Setting up Grails in STS.

Once the installation is terminated, it is time to configure the plugins. The Grails Support plugin needs to know where the Grails installation is (figure 2). We can now create a new Grails project that I am going to name GwtTest.

Figure 3: Creating a new Grails project in STS 

The creation process should ask you if you want to change the perspective into the Grails perspective offered by STS. Once the project is created it is time to install the GWT Plugin for Grails.

Figure 4: Opening the Grails command prompt

You can perform this operation through the Grails command prompt offered by STS (figure 4) by typing
install-plugin gwt
And the process should complete displaying the details in the console:

Figure 5: Console after installation of the GWT plugin (0.6.1) for Grails
 
Note: Remember also to set up the GWT_HOME that is used for compilation.

We are now ready to create our first GWT module (learn about GWT modules here). Using once again the Grails command prompt offered by STS, we type:
create-gwt-module org.example.HelloApp
Once the process is completed, if you refresh the project, you will be able to notice that a new directory 'src' has appeared in the project explorer.

Figure 6: Project explorer and Console after the creation of the HelloApp GWT module

In order to declare this folder as a source code folder we can right click on the project and select 'Build Path'>'Configure Build Path' dialog. In the tab 'source' we select 'add folder' and we pick the newly created 'src/gwt' folder.

Figure 7: Declaring the GWT folder as a source code folder

We can now create the page hosting the GWT script by typing in the command prompt:
  create-gwt-page hello.gsp org.example.HelloApp
The new page will include the line of code that is performing the actual import of the GWT artifact:
<script src="${resource(dir:'gwt/org.example.HelloApp',
 file:'org.example.HelloApp.nocache.js')}" type="text/javascript">
</script>

We are now going to modify the HelloApp.java file adding Window.alert("hello"); within the method onModuleLoad() so that when the script is loading the alert 'hello' will fire.

We then compile the GWT code by typing in the command prompt:
compile-gwt-modules
And we are potentially ready to go. After running the Grails project - a simple run-app is good enough - and opening the page:
http://localhost:8080/{projectname}/hello.gsp
you will notice that nothing happens. As a matter of fact, if you check out what happens with Firebugs, you will notice that a resource has not been found. Unfortunately, it seems the Grails Resources Plugin, which is installed by default in the project, is not compatible with the Grails GWT Plugin. As suggested in this post we can modify the Config.groovy file to include:
grails.resources.adhoc.excludes = ['**/gwt/**']
When restarting the server, the hello.gsp page should now work and fire the 'hello' alert.