Intellij IDEA is a popular Java IDE that ships with a plugin to make developing Google Web Toolkit (GWT) applications easier. The name of the plugin is "GWT Studio". See the Resources section at the bottom of this document for a link to a screencast that demonstrates using it.

1. Follow the steps here.
2. Start IDEA.
3. Select Settings...Google Web Toolkit.
4. Press the elipsis button ("...") and select the location where GWT is installed.

For an explanation of the "JavaScript output style" in the dialog box above, see here.

Creating a new project top

Here are the steps to create a new GWT project.

1. Select File...New Project
2. The options presented are fairly self-explanatory and the default settings normally suffice. When prompted for the number of modules, select "single-module project" which is the default. When prompted for the module type, select "Java module" which is the default.
3. In the left-hand project tree, open the folder containing the src folder, right-click that, and select New...Package.
4. Enter a Java package name to be used for source files in the project.
5. In the left-hand project tree, right-click the package folder and select New...Google Web Toolkit...GWT Module.
6. Enter a name for the module.

The result of these actions will be:

• src/client directory created
• src/public directory created
• src/server directory created
• src/client/{module-name}.java entry point created
• src/public/{module-name}.css stylesheet created
• src/public/{module-name}.html created
• src/{module-name}.gwt.xml XML descriptor created
• gwt-user.jar added to Libraries
• Java JARs added to Libraries

Here's the IDEA project tree after creating a project named "GWTHelloWorld", a package named "com.ociweb.gwt", and a GWT module named "Hello".

The generated HTML file will contain an h1 tag that displays the name of the application. Typically you'll want to delete that.

Creating a New Remote Service top

Remote services are implemented as Java servlets. They can be invoked from GWT client-side code as if they were local objects. GWT takes care of serializing data between the client and server side. Non-primitive data types must be from classes that implement com.google.gwt.user.client.rpc.IsSerializable. They must also have a no-arg constructor and get/set methods for fields to be exposed.

To create a new remote service, follow these steps.

1. Right-click the src/client folder and select New...Google Web Toolkit...GWT Remote service.
2. Enter a name for the service.

The result of these actions will be:

• src/client/{service-name}.java synchronous interface created
• src/client/{service-name}Async.java asynchronous interface created
• src/server/{service-name}Impl.java service implementation servlet created
• service implementation servlet registered in XML descriptor ({module-name}.gwt.xml)

Here's the IDEA project tree after creating a remote service named "Greeter".

The synchronous interface will define a static nested class named "App" that simplifies the code required for clients to obtained a configured client-side service proxy. We'll see how to use this later.

Add service methods to the synchronous interface. Warnings will be displayed to indicate that the corresponding methods do not yet exist in the asynchronous interface and the service implementation servlet.

Here's the source window after adding a new method to the synchronous interface "Greeter". Note the light bulb.

• To add missing methods to the synchronous interface, click the warning light bulb and select "Synchronize all methods of {service-name}Async with {service-name}".
• To add missing methods to the service implemenatation servlet, click the warning light bulb and select "Implement method {method-name}".
• If the method has a return type that doesn't implement IsSerializable, click the warning light bulb and select "Inherit {class-name} from IsSerializable". For some reason this option is only displayed after the first two issues are resolved and even then doesn't consistently appear.

To change the name of a service,

1. Select the synchronous interface in the left-hand project tree and do one of the following:
   • select Rename from the Refactor menu
   • press shift-F6
   • right-click the name to display the context sensitive menu and select Refactor...Rename
2. Enter the new name.
3. Press the "Refactor", "Select all", "OK", and "Do Refactor" buttons.

The result of these actions will be:

• src/client/{service-name}.java renamed
• src/client/{service-name}Async.java renamed
• src/server/{service-name}Impl.java renamed
• XML descriptor servlet class references updated

Implementing the GUI top

Modify the entry point .java file (Bar.java in the example above) or other client-side Java classes used by it to add widgets to the RootPanel and register event listeners. For more detail, see the documentation starting here.

To invoke remote services, get an instance of the asynchronous interface as follows and then invoke methods on it.

BazAsync baz = Baz.App.getInstance();

If the client-side Java code refers to a CSS class that is not defined in the CSS stylesheet, IDEA will provide a warning and offer to define it.

Here's the source window after adding a reference to an unknown CSS class "title". Note the light bulb.

To fix this, click the light bulb and select "Create CSS class 'title'" This will add the title class to the CSS stylesheet with no formatting properties and display the newly added class so the formatting properties can be added.

IDEA has smart CSS editing. It flags invalid formatting properties and does completion of property names and values.

Internationalization top

See the notes on GWT internationalization here. Here are the IDEA-specific steps to internationalize strings for a GWT project.

1. In the left-hand project tree, right-click the client directory inside the Java package and select New...Interface.
2. Create an interface named MyConstants.
3. Make the interface extend com.google.gwt.i18n.client.Constants.
4. Click the warning light bulb and select "Inherit module ...".
5. IDEA will add the following line to the XML descriptor.

   <inherits name="com.google.gwt.i18n.I18N"/>

6. In the left-hand project tree, right-click the client directory and select New...File.
7. Name the new file MyConstants.properties.
8. Add properties to be used as label text in the GUI.
9. Click the warning light bulb and select "Create method for property ..." to let IDEA create corresponding methods in the MyConstants interface for each new property.

If Refactor...Rename is used on methods in MyConstants, the corresponding names will be changed in the property file.

Running the Project top

Here are the steps to run the project in "hosted mode".

1. Select "Edit Configurations" from the "Run" menu.
2. Press button to add a configuration.
3. Select "GWT Configuration".
4. Select the GWT module to be run.
5. Press the "OK" button.
6. Press the toolbar button.

Once the application is running in hosted mode, changes to the client-side code can be tested by clicking the button in the hosted mode browser. It is not necessary to save changes in IDEA before doing this. If changes are made to server-side code, it is necessary to quit out of the hosted mode browser and rerun the project from IDEA in order to see the changes.

Debugging top

Here are the steps to debug a GWT application in IDEA.

1. If the GWT hosted mode browser is running, quit out of it.
2. Set one or more breakpoints in client-side or server-side Java code by clicking in the vertical bar to the left of specific lines.
3. Press toolbar button.
4. This should bring up the same configuration that was created earlier to run the project without the debugger.
5. Press the button.
6. The GWT hosted mode browser will launch at the application will stop at the first breakpoint.
7. Continue using the IDEA debugger as you would for non-GWT applications.
8. Quit out of hosted mode before attempting to run the debugger again.

Resources top

• For information about IDEA integration, see the GWT Studio plugin.
• IntelliJ IDEA GWT Studio Plugin screencast demo
• IntelliJ IDEA GWT Studio Plugin documentation and comments

Copyright © 2007 Object Computing, Inc. All rights reserved.