Sometime back I spent some time to figure our how to use GWT for one of my projects. Here are some notes from that-

The magic with GWT is that we are provided with a Java to JavaScript Compiler which takes your Java code and creates JavaScript out of it. Additionaly GWT provides us with various libraries to help us develop the web pages and behavior using Java.

The trick here is, that GWT works is two modes. Hosted mode and Web Mode

Hosted Mode: Here, your Java application is working. The GWT browser takes your Java code, interpret it and show it as it would appear in the web page. As we are just running the Java code, this is where we can debug our application just as a java app. And we already know debugging java is much easier than debugging JavaScript, hence life is simple.

Web Mode: When we are done with the Java application creation, we run it on Web Mode. GWT’s Java to JavaScript Compiler gives us JS and HTML pages which we can directly deploy and user need not know how they were created.

Let’s get started

Step 0: Prerequisite

Download GWT from http://code.google.com/webtoolkit/download.html and unzip.
(that’s all)

Step 1: Creation Project:
GWT comes with command line utilities which help us create a project and application

projectCreator -eclipse TestProject

applicationCreator -eclipse TestProject com.test.client.TestApplication

Eclipse keyword in above command shows that I am using eclipse IDE, which has special support with GWT. If you are using some other IDE, just remove this keyword.

Step 2: Copy all the newly created files to a folder. Open Eclipse and import this project

Step 3: Right Click TestApplication.java, RunAS, Run, Java Application, check the main class is shown as com.google.gwt.dev.GWTShell, click run
This will open up GWT development shell and will show you the demo web application. A button you click and get the Welcome Message.

This demo application is running from TestApplication java code. You can get into this file and play around. You will find classes like panels, dialoguebox, buttons etc. You can try and make changes to the web page that is appearing.

Time to convert the Java code to JS and HTML.

Simple-just click TestApplication-compile.cmd. this will create two more folders in project tomcat and www. Tomcat has server related info (web.xml) and www has all the web pages, css, JS etc.

But this example is totally JS. Now how to make our code communicate with Java Code. One simple method is RPC. Here is a simple example in continuation to the prev one. Let’s say the welcome message needs to show name as well for the user. Lets write a backend class which will send this name. Here I will hardcode the name, in real application it can be read from database.

1: Create two interfaces under existing com.test.client package
i. GetNameService

package com.test.client;

import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;

@RemoteServiceRelativePath(“gettingName”)
public interface GetNameService extends RemoteService {
}

GetNameServiceAsync

package com.test.client;
import com.google.gwt.user.client.rpc.AsyncCallback;

public interface GetNameServiceAsync {
void getName(AsyncCallback callback);
}
2: Goto TestApplication.gwt.xml under src->com.test and add this line

<servlet path=”/gettingName” class=”com.test.server.GetNameServiceImpl” />

3: Create a new Package com.test.server and add the server side class

package com.test.server;

import java.io.BufferedReader;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileReader;
import java.io.IOException;
import com.google.gwt.user.server.rpc.RemoteServiceServlet;
import com.test.client.GetNameService;

public class GetNameServiceImpl extends RemoteServiceServlet implements
GetNameService {
public String getName()
{
File afile=new File(“C:\\file.txt”);
String name=””;
System.out.println(“name”);

try {
BufferedReader input = new BufferedReader(new FileReader(afile));
name=input.readLine();
System.out.println(“name now:”+ name);
} catch (FileNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
System.out.println(“return name:”+ name);
return name;
}
}

4: Goto Test Application and Add this method

private void getNameNow() {
// Initialize the service proxy.
if (getNameService == null) {
getNameService = GWT.create(GetNameService.class);
}

// Set up the callback object.
AsyncCallback callback = new AsyncCallback () {
public void onFailure(Throwable caught) {
// TODO: Do something with errors.
}

public void onSuccess(String result) {
name=result;
}
};

// Make the call to the stock price service.
getNameService.getName(callback);
}

}

And change addClickListener to look like
button.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
getNameNow();
dialogBox.setText(“Welcome to GWT! “+name);
dialogBox.center();
dialogBox.show();
}

All set, now run the application again. Change the name in text file and you will see the changed name in your application.