My Thoughts !

[Update - A recent revision of this tutorial is available at here.

This tutorial introduces you to GWT. You can do develop GWT apps without any IDE, but it is really helpful if you use one. I choose Eclipse with a plugin for GWT called Googlipse to walk thru this tutorial. Not because Eclipse & Googlipse are free or because Eclipse is the default Java IDE for many developers, but simply because I'm the creator of the Googlipse plugin :-P

Requirements:

• You need the latest GWT. You can download it at here. Make sure you download the latest version.


• Download and install Eclipse 3.2 with WTP 1.5. You can get it here.


• You need a Java 1.5 VM to run Googlipse. You can get it here.


• Download Googlipse from here and drop in the jar in your eclipse\plugins directory.

Settings:

Before you start, you need to tell Googlipse where you have installed GWT. In Eclipse, select Window -> Preferences -> Googlipse -> Browse. Select the directory where you have installed GWT.

Creating the App:

Create a new Dynamic Web Project. (File-> New -> Project -> Dynamic Web Project)

In the first Wizard page, type "Hello World App" for Project Name and select "Default Googlipse Project" in the Configurations drop down. Click Finish.

With GWT you organize your code as Modules. Modules are typically organized under a package. When you create a module, you will have

• A <module name>.gwt.xml file, where you will have all your configurations of a module


• A folder named "public", where you will have all your html, css, images, etc


• A package named "client", where you will have all the client side code - which will be converted into JavaScript later


• A package named "server", where you will have all the server side code - in form of Servlets

Select File-> New -> Other -> GWT Module

You can select an existing package if you have already created, or create a package where you want to keep your module. Type "MyModule" for Name and click Finish. In the Package Explorer view, you can see that all the necessary code to run a module is created by Googlipse for you. Now you have the basic skeleton of a GWT app, lets run the app in hosted mode.

Running in Hosted Mode:

Googlipse integrates GWT hosted mode into Eclipse in a nice way. Select Run -> Run -> GWT Application. Click the "New Launch Configuration". You can select the project and the module, which you want to run. In the parameters page, you can customize the options passed to GWTShell. Click Run. You should see two windows popping up. One is the GWT Shell and the other is the hosted browser. Click the 'Click Me' button in the browser window, and you can see the "Hello World!" message right next to the button.

Compiling the application to JavaScript:

You can compile the client code into JavaScript, so that you can deploy it on any standard WebServer. Click the "Compile/Browse" button in the hosted mode browser. This will compile create the javascript and other supporting files under the build\gwtOutput directory.

Deploying to an external server:

Open the Servers view (Window -> Show View -> Other View -> Server -> Servers). Configure your favourite WebServer in the view (Right click on the view -> New -> Server) You can configure any server (Weblogic, JBoss, Tomcat, etc) and the configuration depends on the vendor and its not described here. Assuming you have configured a server, say Weblogic 9.0 server. Right click the configured server -> Add and Remove Projects. In the dialog box, move our Hello World App from Available Projects to Configured Projects and click Finish. Now you can start the server and see your application @ http://localhost:7001/Hello_World_App/MyModule.html (The URL varies depending on the server vendor and the server configuration)

Creating a WAR file:

Creating a WAR file for deployment is very simple. Select File -> Export -> WAR file and follow the wizard.

Adding RemoteServices:

What we have done so far is a simple static application. There is no RPC involved. GWT supports a properitary mecahnism thru which the client code and server code communicate. The heart of the RPC is a RemoteService interface. This lies in the client package of the module. The implementation of this interface should be available in the server package. By convention, the class is named as <RemoteService>Impl and Googlipse enforces this. There is another interface called the Async interface. Async interface is based on the RemoteService interface. More details about this interface is available here. We don't have to worry about this interface, because Googlipse create this Async interface for you and will maintain it.

Select File -> New -> Other -> Gwt Remote Interface to create a RemoteInterface. You need to select the module where it will reside and then give the name and uri. Uri is typically where the client will be looking for the the server code. It should be unique within the given application. Click Finish and you see the RemoteService and RemoteServiceAsync are created in the client package and the RemoteServiceImpl is created in the server package. The RemoteService interface also has an inner class Util with one method getInstance. This will be very handy for invoking the service from the client code. We will see this later. Now lets add a method in the interface:

String sayHello() throws Exception;

You can see Googlipse will update the Async interface with this method signature

void sayHello(AsyncCallback callback);

Basically it removes the return type and exceptions and adds the callback parameter at the end of the parameter list.

In the Impl class, implement this method

public String sayHello() throws Exception {
return "Hellooooooo";
}

Invoking RemoteServices:

From the client code, you can use the getInstance method to invoke the RemoteService.

I've modified the MyModule.java to have an RPC call:

button.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
MyServiceAsync instance = MyService.Util.getInstance();
instance.sayHello(new AsyncCallback(){

public void onFailure(Throwable error) {
Window.alert("Error occured:"+error.toString());
}

public void onSuccess(Object retValue) {
Window.alert("Server returned:"+retValue.toString());
}
});
}
});

As you can see, the onFailure method is called whenever there was any problem with the RPC call. If everything goes fine, onSuccess method is called with the return value from the method.

Common problems:

• I installed Googlipse and nothing happened.

There are 2 possible reasons:

1) You are running an Eclipse 3.1 or earlier.

2) You are running Eclipse on a Java 1.4 VM or earlier

• How do I change the URI of the application?

Right click the project -> Properties -> Web Project Settings. Change the Context Root value

• I added the Googlipse facet to an existing Dynamic Web App. Nothing works.

Follow these steps for adding the Googlipse facet to an existing app:

• 
  
  
  
  • First remove the gwt-user.jar from the application build path
  
  
  • Remove gwt-servlet.jar from WEB-INF\lib directory
  
  
  • Add the facet
  
  
  • Open .settings\org.eclipse.wst.common.component file and for every module in your application, add the line
  
  
  • <wb-resource deploy-path="/" source-path="/build/gwtOutput/com.googlipse.testApp.MyModule"/> where com.googlipse.testApp is the package and MyModule is Module name.
  
  
  • Refresh the application.
  
  
  
  

• I upgraded from previous version of Googlipse. I'm getting some errors.

You have to uninstall the Googlipse facet and then follow the above steps to install the facet again.