- Download and Install GWT
- Create your first web application
- Run locally in development mode
- Make a few changes
- Compile and run in production mode
- Set up an IDE
- You will need the Java SDK version 1.6 or later. If necessary, download and install the Java SE Development Kit (JDK) for your platform. Mac users, see Apple’s Java developer site to download and install the latest version of the Java Developer Kit available for Mac OS X.
- Apache Ant is also necessary to run command line arguments. If you don’t already have it, install Apache Ant.
If you have problems running Ant on the Mac, try setting the $JDK_HOME environment variable with export JDK_HOME=“/Library/Java/Home”
Download and unzip the GWT SDK. This contains the core libraries, compiler, and development server that you need to write web applications.
See FAQ for system and browser requirements.
On Windows, extract the files from the compressed folder
gwt-2.7.0.zip. On Mac or Linux, you can unpack the package with a command like:
The GWT SDK doesn’t have an installer application. All the files you need to run and use the SDK are located in the extracted directory.
GWT ships with a command line utility called webAppCreator that automatically generates all the files you’ll need in order to start a GWT project. It also generates Eclipse project files and launch config files for easy debugging in GWT’s development mode.
You can create a new demo application in a new MyWebApp directory by running
cd gwt-2.7.0 webAppCreator -out MyWebApp com.mycompany.mywebapp.MyWebApp
- Mac or Linux - you may need to make the script executable:
cd gwt-2.7.0 chmod u+x webAppCreator ./webAppCreator -out MyWebApp com.mycompany.mywebapp.MyWebApp
webAppCreator script will generate a number of files in
MyWebApp/, including some basic “Hello, world” functionality in the class
MyWebApp/src/com/mycompany/mywebapp/client/MyWebApp.java. The script also generates an Ant build script
To run your newly created application in development mode:
cd MyWebApp/ ant devmode
This command starts GWT’s development mode server, a local server used for development and debugging, as follows:
Launch the local server in a browser by either 1) clicking “Launch Default Browser” or 2) clicking “Copy to Clipboard” (to copy its URL), then pasting into Firefox, Internet Explorer, Chrome, or Safari. Since this is your first time hitting the development mode server, it will prompt you to install the GWT Developer Plugin. Follow the instructions in the browser to install the plugin, which may require restarting the browser.
Once the GWT Developer Plugin is installed in your browser, navigate to the URL again and the starter application will load in development mode, as follows:.
The source code for the starter application is in the
MyWebApp/src/ subdirectory, where MyWebApp is the name you gave to the project above. You’ll see two packages,
com/mycompany/mywebapp/client/MyWebApp.java. Line 41 constructs the “Send” button.
final Button sendButton = new Button("Send");
Change the text from “Send” to “Send to Server”.
final Button sendButton = new Button("Send to Server");
Now, save the file and simply click “Refresh” in your browser to see your change. The button should now say “Send to Server” instead of “Send”:
MyWebApp/war/ subdirectory. To see the application, open the file
MyWebApp/war/MyWebApp.html in your web browser. The application should look identical to the development mode above.
MyWebApp/war/ directory from your web servers.
Now that you’ve created your first app, you probably want to do something a bit more interesting. But first, if you normally work with an IDE you’ll want to set up Eclipse to use the GWT SDK:
If you are going to stick with the command line, check out Speed Tracer and then head over to Build a Sample GWT App.