Google Web Toolkit Tutorials

Getting Started

Obviously you'll need Java SDK! If you're a Java developer or at least tried Java before you probably already have it installed. So just make sure you have your JAVA_HOME environment variable pointing to a fresh (1.4 or 1.5) Java SDK.

If not, take a hike to http://java.sun.com

1. Install GWT

Download the latest GWT bundle from: http://code.google.com/webtoolkit/download.html

Unzip/untar it into some convenient directory (I keep all Java related stuff at $HOME/Java and I'll assume you do the same).

That's it... installation complete... can't remember anything tricky about this part.

2. Create new Project

First create a New Project in your favorite IDE (I use Eclipse). Just a simple Java project, or a Web Project if you want.

Now, launch some shell (bash/tcsh for *nix, command prompt for Windows, not sure what you do in Mac) and navigate to your project directory. Run this (adjust it to your OS):

$HOME/Java/gwt-$YOUR_OS-$GWT_VERSION/applicationCreator[.bat] com.jpavel.gwt.client.MyFirstApp

Note: your GWT module will be named MyFirstApp. Also, pay attention to word client in package name. It's required by GWT... just a convention.

applicationCreator - is a utility provided by GWT used to generate a simple GWT module stub. It will generate two scripts and a source directory with a simple "sample" application. By default the source directory is "src". If it doesn't match the source directory that was created by your IDE and there is no way you could change it in the IDE follow the following steps:

1. move all files from src directory to your IDEs' source directory

2. edit MyFirstApp-compile and MyFirstApp-shell scripts and change src in -cp parameter to your directory. For example my scripts look like this (red is what you have to change):

#!/bin/sh
APPDIR=`dirname $0`;
java -cp "$APPDIR/src:$APPDIR/bin:~/Java/gwt-linux-1.2.22/gwt-user.jar:
~/Java/gwt-linux-1.2.22/gwt-dev-linux.jar" com.google.gwt.dev.GWTCompiler
-out "$APPDIR/www" "$@" com.jpavel.gwt.MyFirstApp;

Now, in your IDE, refresh your project (if you have to) and you'll see the com.jpavel.gwt.client.MyFirstApp class, an xml file and the html file.

./src/com/jpavel/gwt/client/MyFirstApp.java
./src/com/jpavel/gwt/public/MyFirstApp.html
./src/com/jpavel/gwt/MyFirstApp.gwt.xml
./MyFirstApp-shell
./MyFirstApp-compile

But the com.jpavel.gwt.client.MyFirstApp class shows compilation errors. That's right, you'll need to add $HOME/Java/gwt-$YOUR_OS-$GWT_VERSION/gwt-user.jar file to the classpath. After you do that the com.jpavel.gwt.client.MyFirstApp class should compile properly without errors.

3. Launch/Test your First Application

Now we are ready to actually launch our first application... the most exciting moment, even though we haven't written a single line of code, yet.

There are two way to run your application.

1. Actually compile it and launch the compiled version. To do that you'll just need to go back to your shell (or command prompt) and run the MyFirstApp-compile script. The output will be generated into the www/com.jpavel.gwt.MyFirstApp directory of your project directory. You can navigate in there and launch MyFirstApp.html in the browser. You will be using this method to compile the final integration version. You can change the output directory by modifying the scripts' -out parameter.

2. Use the GWT shell. Go back to your shell (or command prompt) and run the MyFirstApp-shell script. This will launch the GWT shell and the browser which will compile your GWT module on the fly and display it in the embedded browser. You will be using this method most of the time for testing and debugging.

That's it, you got your first GWT application up and running.

Till next time,

Pavel