The last month(s) I have been working on multiple Google Web Toolkit implementations. I must admit that the implementations are not very big. They are mostly small applications I needed for some reason. One of them is a Raffle system, there is one with a large amount of data on a screen that should be editable as well. In this blog item I will share some experiences I have gained using the Google Web Toolkit with maven2, JetBrains IntelliJ. The applications can interact with a standard GWT servlet, or with the springframework and security via spring security (acegi). I also experimented with a nice GUI framework called gwt-ext. Finally, I also used the Google Web Toolkit in a sample we created for spring osgi. So please continue reading, most sources can be found in in my code repository at google.
In this blog item I will mostly look at IntelliJ, I will create new blog items about using eclipse and maven as well.

Step 1 - Creating a project skeleton

If you just want to play around and you have IntelliJ, I recommend to use the new project wizzard from intellij. Just create a new Java Project and select Google Web Toolkit in the desired technologies section. Go to the module settings and point to the right direction of you gwt install. Now you can start adding modules, remote services, etc.

Step 2 - Adding the module and entry point
Start by adding a package, select src and alt+insert. Select package, enter the package name. Then select that package and again alt-insert. Now choose the gwt>gwt module. Give the name you think is right for your project, in my case Raffle. This step generates multiple files:
Raffle.gwt.xml - the configuration file for the module with a reference to the entry point.
Raffle.java - in the client package, this is the entry point for the gwt application.
Raffle.html - html file in the public folder that is called by the browser with a javascript that starts the gwt application.
Raffle.css - stylesheet referenced by the html file that is also in the public folder.

Everthing in the client folder is compiled to JavaScript, be sure there is nog Java 5 features in here, this is not (yet) supported. The public folder is exposed using the webserver as static files. Nothing happens to them. You can put images in here as well. Finally there is a server folder. This is in the end a plain java folder that contains the implementations of remote services. More on that later.

Step 3 - Test the setup we have created
Time to start the test. We need to create a configuration. Press alt+shift+f10 and 'edit configurations'. In the next screen add the + sign to create a new configuration and choose GWT Configuration. Give the configuration a good name. Other than that, the defaults should be fine. Now you can run the application by clicking the green run arrow or shift + f10. You can see the result in the icon on the right.

Step 4 - Adding stuff to the screen.
Step 4.1 - Add the menu
The total screen will consist of two panels, one containing the menu, the other is the content panel in which all menu actions take place.

public void onModuleLoad() {

  ScrollPanel contentContent = new ScrollPanel();

  MenuBar menuBar = createMenuBar(contentContent);

  RootPanel.get().add(menuBar);

  RootPanel.get().add(contentPanel);

}



private MenuBar createMenuBar(final ScrollPanel contentPanel) {

  ...

    menuBar.addItem("List Names", new Command() {

      public void execute() {

        contentPanel.setWidget(createListNames(contentPanel));

      }

    });

  ...

}

private Panel createListNames(final ScrollPanel contentPanel) {

  ...

}

The code shows how to create the MenuBar and how to add an item. This is not a very thorough example and as you can see I did not implement the method createListNames. Before I do this I need to explain remoting which I will do next. The sample up till now does show how to add an a menu and how to add items to the menu. Look at the way to create a command when the menu item is clicked. By using the method setWidget on the content panel we can change the content on the page when clicking a menu item.

Step 4.2 - Doing some remoting
This is the moment Intellij will also help you a lot. Select the package where you stored your client gwt module. alt + insert will popup a menu. Select the Google Web Toolkit > GWT Remote Service. The following file will be generated when you create the RaffleRemoteService:

In the client package
RaffleRemoteService - Interface containing a static internal class App with a utility method getInstance to get a RaffleRemoteServiceAsync. Check the code later on.
RaffleRemoteServiceAsync - Interface that has the same methods as the RaffleRemoteService with one extra parameter of type AsyncCallback.

In the server package
RaffleRemoteServiceImpl that implements RaffleRemoteService and is a subclass of RemoteServiceServlet, a google web toolkit provided servlet. This servlet is also automatically configured in the module configuration file 'Raffle.gwt.xml'. The following lines are added.

 servlet path="/nl.gridshore.samples.gwt.simple.Raffle/RaffleRemoteService"
class="nl.gridshore.samples.gwt.simple.server.RaffleRemoteServiceImpl"/>

Want to see some intellij magic? Let's add a method to the RaffleRemoteService for obtaining a list of names.

As you can see on the image there is an error. Intellij asks you if you want to synchronise the remote service with the asynchronous service. Click ant + enter and the interfaces are in sync again. There is more in the image. Check the return argument ArrayList. This is not a java 5 collection, gwt cannot handle that. But we do need to tell what kind of objects are in the ArrayList. This is why we need the annotation @gwt.typeArgs .

Step 4.3 - Doing some styling
You can add styling via the style sheet. Almost every widget has it's own styling and of course you can add a style name to every widget you create. Some of the basic styles are:

.gwt-Button {}

.gwt-Label {}

.gwt-TextBox {margin-left:20}

.gwt-TextBox-readonly {}



.gwt-MenuBar {}

.gwt-MenuBar .gwt-MenuItem {}

.gwt-MenuBar .gwt-MenuItem-selected {}

That is about it for now, hope this helps, you can extract the important information if you want to use eclipse. Next time I will write something about using maven2 and a special toolkit called gwt-ext. You can find the complete source code online: http://gridshore.googlecode.com/svn/trunk/Raffle/