GWT Intro Lab 1

Hello GWT World

This lab assumes you already have the LDS Tech IDE installed and the Google plugin installed.

Create a GWT project

  1. In the LDS Tech IDE, go to File | New | Java Project.
  2. Give the project a name like "Hello GWT World" and select Finish.
  3. Right click on your newly created project and go to Google | Web Toolkit Settings.... If you do not have the Google option in the popup menu it is because you do not have the Google Plugin installed.
  4. Select the 'Use Google Web Toolkit checkbox and then select Ok.

You now have a Java project that has support for GWT.

Create a module

  1. Right click on your newly created project and go to New | Module.
  2. Use a Package name like "".
  3. Use a Module name: like "HelloWorld".
  4. Select the Finish button.

This will create a new package in your src folder with an XML file in it named something like HelloWorld.gwt.xml. Look at the contents of this file. It will have an entry like <inherits name="" />. This indicates that your module depends on another GWT module called

The root package will have a sub-package in it named client. This is where your GWT source files will go.

Create an entry point

An entry point contains the code that will be executed when your module is loaded from an HTML page. To create an entry point:

  1. Right click on your newly create project and go to New | Entry Point Class.
  2. Use a name like HelloWorld.
  3. Select the Finish button.

This will add an entry in your module's .gwt.xml file that will look something like <entry-point class=""></entry-point>. It will also create the class that implements the interface

Let's add some code to the onModuleLoad() method. For this lab, we'll do something simple like:

public void onModuleLoad() {"Hello GWT World!");

This is the equivalent of alert("Hello GWT World!") in JavaScript.

Create a Web page to load your GWT module

We need some HTML to load our GWT compiled JavaScript. To do create an HTML page:

  1. Right click on your project and go to New | HTML Page.
  2. To the right of the Path: input box, select the Browse... button. There should be only one folder listed in this dialog box named something like Select it and then select the OK button.
  3. Give the page a name like index.html.
  4. Select the Finish button. You will be prompted to create the public folder. Go ahead and do so.

You will now have a simple HTML page. The key point of this web page is the script tag, which when pointed at the correct location, will load a GWT generated JavaScript file which is created when you compile (in the next step).

Modify the script tag's src attribute (which points to src=".nocache.js" by default), to point to src="" (assuming you followed the naming conventions specified).

Based on your browser and locale, this script will select a JavaScript file to download. This second script is optimized for your browser.

Compile your module

Let's see what the GWT artifacts look like by compiling your module. To compile your module:

  1. Right click on your project and go to Google | GWT Compile.
  2. Use the defaults and select Compile.
  3. Be patient, this takes about 21 seconds on my workstation.

Now use the file explorer for your operating system and navigate to your LDS Tech IDE workspace folder and open your project folder. You should see three folders, bin, src, and war. bin is created by Eclipse when it compiles your Java sources. src contains all your source files. war is created by the GWT compiler and contains your compiled GWT module. Open this folder. This folder should contain another folder named something like Open this folder.

To run your GWT code, open the index.html file in your browser.

This page was last modified on 1 November 2010, at 14:05.

Note: Content found in this wiki may not always reflect official Church information. See Terms of Use.