GWT in IDEA 7 – Hello World Tutorial

I was disappointed to notice that the only good article out there about GWT + IDEA 7 has gone missing. Let me give it a quick stab:

Prerequisites
Make sure to set up Google Web Toolkit.
It may also help to add a path variable in IDEA to point to the installation of Google Web Toolkit.

Step 1: Create Project

  1. Open File, New Project.
  2. Select “Create project from scratch”. Set up a module and a source directory, like you usually would for a Java project.
  3. On the next screen of the wizard, check off “Google Web Toolkit”.
  4. Confirm and create the project.

Step 2: Create GWT module

  1. Create package com.yourcompany.gwt.helloworld in the source directory.
  2. Right-click your package, select New, Google Web Toolkit, GWT module.
  3. Name your module HelloWorld and notice how IDEA creates scaffolding code.
  4. Navigate to your module settings. (Ctrl+Alt+S, 1, “Module” in the list on the left)
  5. Select the GWT facet under the list of facets for your module. (from the tree in the center of the dialog)
  6. In “Path to GWT installation directory”, point to the directory where you extracted GWT.

Step 3: Add a Run target

  1. Open the Run dialog.
  2. Click on the plus sign to add a new configuration.
  3. Select Google Web Toolkit.
  4. In “Html to open”, enter the path to HelloWorld.html.
  5. Test the application.

Step 4: Add functionality to the GWT module

  1. Edit the entry point of the module, the HelloWorld class, located in the com.yourcompany.gwt.helloworld.client package.
  2. In onModuleLoad, enter:

      Label label = new Label("Hello, world!");
      RootPanel.get().add(label);

Step 5: Create web application

The purpose of this step is to enable communication of your GWT application with servlets that must reside in a JEE container.

  1. Open your module settings.
  2. Add the gwt-server.jar library of your GWT installation to the list of libraries used by the IDEA module.
  3. In the module settings, add a Web facet to the module.
  4. Configure the Web facet like you would normally configure Web applications.
  5. Ensure the gwt-server.jar library is configured to be included into /WEB-INF/lib as part of the web module packaging step.
  6. Configure the GWT facet to deploy the files to the Web facet.

Notes
The central points are to create a Web facet and to create and configure a GWT facet.

 

Comments 1

  1. John wrote:

    Thank you for a great tutorial!

    Posted 03 Aug 2008 at 5:57 pm

Post a Comment

You must be logged in to post a comment.