Creating a New Web Application & Running and Debugging using GWT & App-engine 

Launching the New Web Application Wizard

To create a new project, click on the  New Web Application Project toolbar button. You can also access this wizard by selecting the Web Application Project item from the drop-down menu associated with the  New toolbar button, or by selecting File > New > Web Application Project.

Creating a Project with the New Web Application Wizard

The New Web Application Project wizard allows you to create a new web application that uses Google Web Toolkit (GWT) and/or Google App Engine:

The wizard allows you to choose a name and root package for the project. The project's name will be used when generating the names of the classes in the sample application. All of the classes will live in a subpackage of the root package.

Note: Using Java keywords as a project name (e.g. "New" and "Class") will result in various build errors. Avoid these where possible.

In the Google SDKs group box, you can choose which SDKs that you'd like to use in your Web Application. See Using SDKs for more details.

In the Identifiers for Google App Engine group box, you can choose to specify an app id or choose to leave the app id field blank. See Setting App ID in New Web Application Project wizards for more details.

Click on the Finish button to create the project.

Generated Project Structure

The sample application generated by the New Web Application Wizard will have a src/ directory for Java source files and a war/ directory for compiled classes, server runtime libraries, static content, and configuration files.

The generated files will differ depending on whether your application is using GWT, App Engine, or both. The sections below highlight the differences between the generated sample for a project named MyTestProject with a root package of com.mytestproject.

If you make a mistake and delete some of the essential resources in the war directory, don't worry! You can easily fix these problems.

GWT

These are the files that are generated for the GWT sample:

MyTestProject
  src/
    com/
      mytestproject/
        MyTestProject.gwt.xml        
        client/
          GreetingService.java
          GreetingServiceAsync.java
          MyTestProject.java      
        server/
          GreetingServiceImpl.java
  war/  
    MyTestProject.css
    MyTestProject.html
    WEB-INF/
      web.xml
      classes/
      lib/
       ...GWT JARs...         

The GWT sample application consists of a simple user interface with a single button. When you press the button, a Remote Procedure Call is performed to get the current time on the server. The results of the call are then displayed in the interface. See GWT's documentation for more information about the project's contents.

App Engine

These are the files that are generated for the App Engine sample:

MyTestProject
  src/
    log4j.properties
    META-INF/
      jdoconfig.xml
    com/
      mytestproject/
        MyTestProjectServlet.java
  war/  
    index.html
    WEB-INF/
      appengine-web.xml
      web.xml
      logging.properties
      classes/
      lib/
       ...App Engine JARs...            

The App Engine sample application consists of a servlet which prints "Hello, World!". The application also has some configuration files for deployment and logging. See App Engine's Getting Started Guide for more information about the project's structure and files.

GWT + App Engine

When using both the GWT and App Engine SDKs, the following sample application is generated:

MyTestProject
  src/
    log4j.properties
    META-INF/
      jdoconfig.xml
    com/
      mytestproject/
        MyTestProject.gwt.xml        
        client/
          GreetingService.java
          GreetingServiceAsync.java
          MyTestProject.java      
        server/
          GreetingServiceImpl.java
  war/  
    MyTestProject.css
    MyTestProject.html
    WEB-INF/
      appengine-web.xml
      web.xml
      logging.properties
      classes/
      lib/
        ...App Engine JARs...    
        ...GWT JARs... 

The GWT + App Engine sample application is similar in functionality to the GWT sample application. The main difference is that the server component is meant to run on App Engine, so the App Engine configuration files are generated as well.

Creating a Launch Configuration

If you created a project using the New Web Application Wizard, a launch configuration will have already been created for you. It can be found by navigating to the Launch Configuration dialog. Select the Run Configurations... item from the drop-down menu associated with the  Run toolbar button:

If you're interested in debugging your application, select the Debug Configurations... item from the drop-down menu associated with the  Debug toolbar button.

Tip: You can also launch your application by right-clicking the project (or an HTML or JSP page within the project) and selecting Run As/Debug As > Web Applicationfrom the context menu.

Now, expand the items underneath the Web Application category. You should see a launch configuration with a name matching your project name. Click on the launch configuration.

Notice that the Web Application launch configuration has the Main, Server, GWT, App Engine, and Arguments tabs. The Main tab allows you to choose the project that is associated with the launch configuration and change the main class for the launch. The Server tab allows you to choose a different port for the built-in server. In general, you'll want to run the built-in server, unless you have a specific server instance that you want to test against.

GWT Settings

The GWT settings tab contains the GWT settings for the launch configuration.

In addition to customizing the log level, you can also tweak the set of Available Modules for the launch. All modules you want to access during the Development Mode launch must be included in this list (excluding any inherited modules). The actual set of modules that will be loaded at startup will be determined by the HTML page you launch with (more on this later).

Additional Arguments

If you need to change settings that are not represented on the Main, Server, GWT, or App Engine tabs, you can switch to the Arguments tab and enter them alongside the computed arguments.

Running the Launch Configuration

To launch the web application, click on the Run button in the lower-right corner of the Run Configurations dialog. You can also run your application via context menu shortcuts. To do this, select either a project, a GWT Module file, or an HTML/JSP page in the project's WAR directory. Then, run the application by navigating to Run As > Web Application. Notice that after you run the launch configuration, it will appear in the Run shortcut list:

GWT and GWT + App Engine Applications

If your project uses GWT, the development mode view will appear shortly after launching the application:

Notice that your launch configuration is listed in the view, along with some suggested URLs to start up your GWT application. Copy the URL for your application into the browser's address bar by selecting the entry and choosing Copy from the context menu. Once you have navigated to the startup URL in your browser, you'll notice that a browser entry will be added to the launch configuration:

After a few seconds, you'll notice that loading messages for the GWT modules in your application will appear in the view, indicating that your GWT Application is starting up. Finally, you'll see your application appear in the browser window.

The development mode view is useful for troubleshooting problems with your GWT application. By turning up the log level for the launch configuration, you can see more detailed information about your application's execution. You can search for text within a log by using the filter text field.

When using the view, don't forget about the view's toolbar, which can be used to switch the layout of the view, terminate a launch, clear terminated launch configurations, and restart the embedded web server. The alternate layout presents the launch configurations and browsers in a tree, with browsers as children of their associated launch configuration.

If your project uses Google App Engine and GWT, the only difference is that the embedded server is actually the Google App Engine development server.

Note: If your application uses GWT and you make change to your code during a debugging session, you may need to click Refresh in your browser or Restart Server in the development mode view. See the GWT documentation on development mode debugging for more details.

App Engine-only Applications

If your application uses App Engine but not GWT, the only indication that the App Engine development server is running will be output in the Console view. App Engine-only launches will not appear in the development mode view. The console output includes the URL of the server, which by default is http://localhost:8888/. You can change the port number via Eclipse's launch configuration dialog by selecting your Web Application launch and editing the Port value on the Main tab.

If you open a web browser and navigate to the server's address you should see a welcome page with links to any servlets defined by the application.