Tutorial: 1 - Getting Started

This tutorial assumes that you have GWT and all its basic prerequisites installed and can create a new GWT application (see Get Started with the GWT SDK at the GWT site). The tutorial will use instructions that reference the Eclipse IDE and the Google Plugin for Eclipse (see Set up Eclipse at the GWT site). If you are not using Eclipse, the exact steps will be different.

Create a New GWT Web Application

First, we need to create a new GWT application. From Eclipse, choose File -> New -> Project.... From the list, choose Google -> Web Application Project and click “Next.”

Give your project a name and a package. The tutorial will assume a project name of “GWTWizardSample” and a package of net.binarymuse.gwt.sample.gwtwizard—if you use a different project name or package, remember to substitute it when you see it in sample code or other places in the tutorial. Choose a GWT SDK from the list and click “Finish.”

Creating a new GWT application

Adding GWT-Wizard to Your Project

Right-click on the GWTWizardSample project in the project or package explorer and choose “Properties.” Choose “Java Build Path” and choose the “Libraries” tab. Add gwt-wizard.jar to the build path using one of the “Add JARs” buttons (“Add External JAR…” if the JAR is not located inside your project directory).

Adding gwt-wizard.jar to the build path

Next, inherit the GWT-Wizard module by placing the following line of code in your module’s .gwt.xml file:

<inherits name='net.binarymuse.gwt.Wizard' />

GWT-Wizard is ready for use! At this point, you should be able to run your project as a GWT web application and get the default GWT application in your development mode browser. However, before we continue, let’s clean up the default GWT web application code.

Trimming the Default GWT Application Code

The GWT application creator generates several more files and classes than we will need for our application. Let’s reduce our code to the bare minimums.

Rewrite the EntryPoint Class

Change GWTWizardSample.java to the following:


1
2
3
4
5
6
7
8
9
10
11
12

  package net.binarymuse.gwt.sample.gwtwizard.client;

import com.google.gwt.core.client.EntryPoint;

public class GWTWizardSample implements EntryPoint {

    @Override
    public void onModuleLoad() {
        // TODO: Implement
    }

}

Remove Unnecessary Files

Remove GreetingService.java, GreetingServiceAsync.java, GreetingServiceImpl.java, and FieldVerifier.java (essentially leaving GWTWizardSample.java as the only Java source file). You may leave the empty packages or remove them, it is up to you—we won’t use them in this tutorial.

Source tree after cleanup

Clean up web.xml

In war/WEB-INF/web.xml, remove the servlet and servlet-mapping defintions, leaving something like the following:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

  <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app
    PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
    "http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>

  <!-- Servlets -->
  <!-- default servlet and servlet-mapping removed -->

  <!-- Default page to serve -->
  <welcome-file-list>
    <welcome-file>GWTWizardSample.html</welcome-file>
  </welcome-file-list>

</web-app>

Clean Up GWTWizardSample.html and GWTWizardSample.css

Modify war/GWTWizardSample.html to remove the extra HTML from the body of the page (only showing the body here for brevity):


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

  <body>

  <!-- OPTIONAL: include this if you want history support -->
  <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'
      style="position:absolute;width:0;height:0;border:0"></iframe>

  <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
  <noscript>
    <div style="width: 22em; position: absolute; left: 50%;
        margin-left: -11em; color: red; background-color: white;
        border: 1px solid red; padding: 4px; font-family: sans-serif">
      Your web browser must have JavaScript enabled
      in order for this application to display correctly.
    </div>
  </noscript>
  <!-- default html removed -->
</body>

Remove the content from war/GWTWizardSample.css so we start with a fresh stylesheet.

At this point, your web application should run without errors (although the page will be blank).

Home
<< Tutorial: 0 – Introduction | Tutorial: 2 – Your Wizard Context >>