Project

General

Profile

Usage

This usage guide is an updated version of the grails-gwt-plugin description.

Installation

If you already have a different version of the gwt plugin installed you should first uninstall that:

uninstall-plugin gwt

To install the enhanced version call (please check http://projects.emesit.de/projects/grails-gwt-plugin/files for the latest version of the plugin):

install-plugin 

e.g.:
install-plugin http://projects.emesit.de/attachments/download/2/grails-gwt-0.5.2.e1.zip

To install the latest standard version (non-enhanced):

install-plugin gwt

This will install the plugin in your application and add the following grails commands (listed are only the relevant commands):

  • clean-gwt-modules
  • compile-gwt-modules
  • compile-i18n
  • create-gwt-action
  • create-gwt-event
  • create-gwt-i18n
  • create-gwt-module
  • create-gwt-page
  • generate-gwt-rpc
  • run-gwt-client

Directory structure

When using the grails-gwt-plugin all files needed only by the client, are put in src/gwt. Files which are shared by
client and server must reside in src/java, e.g. the RPC sync and async interface, or any DTO classes.
The hostpage either resides under web-app or somewhere under the views directory or any subdirectory thereof,
depending if the hostpage is used as controller view or not. All compiled gwt files can be found in web-app/gwt//.

Creating a module

grails create-gwt-module

This will

  • create the necessary directory structure - if it doesn't exist yet
  • create the module descriptor .gwt.xml in src/gwt/.../
  • create the EntryPoint class in src/gwt/.../client/

bq. if no directory src/gwt appears after executing that command, remember to refresh your elicpse or sts project.
You also want to include the src/gwt directory in the build path, just right-click on the src/gwt directory and
choose 'Build Path'->'Use as Source Folder'.

Example

The command

grails create-gwt-module org.example.MyApp

will create

  • src/gwt/org/example/MyApp.gwt.xml
  • src/gwt/org/example/client/MyApp.java

Creating a hostpage

Every gwt module needs a hostpage which bootstraps your gwt client. Use the command

grails create-gwt-page

with the following arguments:

  • : a relative path to the hostpage
    ** You can only use a gsp extension, allthough the original plugin documentation states, that either a gsp or html extension can be used. The reason is that in the created hostpage, the gsp taglib function ${resource ...} is used to resolve the location of the module, which has no effect if the extension is html.
    ** If the relative path consists of a single directory and a GSP file name, then it is treated as a controller view (which then resides under the views directory)
    ** otherwise it is treated as a 'normal' page under the web-app directory
  • : the module to create the hostpage for, i.e. the module to bootstrap

Examples

// This will create the view file: grails-app/views/main/index.gsp
// and the script will offer to create the relevant controller if it does not already exist.
grails create-gwt-page main/index.gsp org.example.MyApp

// This will create the file: web-app/MyApp.gsp 
grails create-gwt-page MyApp.gsp org.example.MyApp

Remote Procedure Calls (RPC)

Any serious application will want to contact the server, either to get data from the server or e.g. to save some edited entity.
In GWT you have the possibility to use RPC calls, by creating two interfaces (one synchronous and one asynchronous) and having
an implementation of the synchronous interface on the server side (usually a servlet which extends the google RemoteServiceServlet
and implements the synchronous interface).

With the gwt plugin you have the following options:

  • expose your grails service to gwt
  • implement Action, Response and ActionHandler classes and use the provided GwtActionService/GwtActionServiceAsync in the client

Exposing your grails service to gwt

Lets say you have a grails service class which looks like this:


class MyService {
    List listUsers() {
    }
    
    User saveUser(User user) {
    }
}

If you want this service to be accessible by your gwt clients, just add the expose property:


class MyService {
    static expose = ['gwt:org.example.client']

    List listUsers() {
    }
    
    User saveUser(User user) {
    }
}

Next create the gwt synchronous and asynchronous interface, either manually or by issuing the gwt plugin command

grails generate-gwt-rpc

For our example above, this command will generate the two files:

  • src/java/org/example/client/MyService.java
  • src/java/org/example/client/MyServiceAsync.java

Where the synchronous interface will look like this:


package org.example.client;

import com.google.gwt.user.client.rpc.RemoteService;
import java.util.List;

@RemoteServiceRelativePath("rpc")
public interface MyService extends RemoteService {
    public List listUsers();
    public User saveUser(User user);
}

bq. Only the modified version of the gwt plugin will generate the imports, generic types and the @RemoteServiceRelativePath annotation.

bq. Note that the User class must comply with the rules for gwt client classes, e.g. must be a java class in the src/java directory tree and must only contain gwt serializable classes. Grails domain classes cannot be transferred to the client! Either use the dto plugin or some other vehicle.

bq. Also note that even the modified version of the gwt plugin does not generate meaningful argument names, just arg0, arg1, etc. Allthough this is a feature I would like to implement if I find the time...

In order to call that service, in your client code you must write something similar to the following:


package org.example.client;

import com.google.gwt.core.client.EntryPoint;

/**
 * Entry point classes define onModuleLoad().
 */
public class MyApp implements EntryPoint {
    /**
     * This is the entry point method.
     */
    public void onModuleLoad() {
        // cast is NOT needed
    	MyServiceAsync myService = GWT.create(MyService.class);
        List users = myService.listUsers();
        // ...
    }
}

Using the ActionCommand pattern

http://www.cacoethes.co.uk/blog/groovyandgrails/the-command-pattern-with-the-grails-gwt-plugin

Creating GWT Application Events

Most people which have been doing gwt development since GWT 1.6 came out, might have run across the concept of
application events in gwt (especially in combination with the MVP pattern which google propagates).

The gwt plugin allows you to create a pair of GwtEvent/GwtEventHandler classes, with the command

grails create-gwt-event .

or

grails create-gwt-event

bq. Notice the dot in the first command, which is missing in the second command

Example

To create a UserListEvent and UserListHandler class in the package org.example.client.event call this grails command

grails create-gwt-event org.example event UserList

This will create the two files:

  • src/java/org/example/client/event/UserListEvent.java
  • src/java/org/example/client/event/UserListHandler.java