Google Web Toolkit says, "Hello, World!" - Part 2

Getting Started

The software required are:

• Java SDK from Sun Java Website
• Eclipse IDE from Eclipse website. If you are confused what to download, get the Eclipse IDE for Java EE developers directly from here.
• Google Web Toolkit from Google Code Website
• Apache Tomcat from Apache Website
• Cypal Studio here

Step 1: Creating Web Application

First step is to create a "Dynamic Web Project" in Eclipse.

Choose Web -> Dynamic Web Project.

Select appropriate Web Server Runtime - the "Target Runtime". [If the only entry that you get is <none>, create a "New..." one. Point it to the Apache Tomcat folder.] From the "Configurations", select "Cypal Studio GWT Project".

Finally, provide a meaningful "Context Root", or leave it as it.

Open the "Project Explorer" view. You should see similar to as shown below.

Step 2: Adding a Module

Our web application is now ready. What we now need is to add the "HelloWorld" module as what we did through the applicationCreator.cmd utility earlier. However, this time we will use the GUI.

We need to add a new "GWT Module" to our application. Follow these steps:

• Add a new item:
  
• Add a new Module:
  
• Give the name of the package as com.edujinilabs.tutorials.gwt.hw (note that there is no 'client' as we had earlier), and the name of the class as HelloWorld.

The module has been added. The following artifacts would have been generated:

• Module definition file: com/edujinilabs/tutorials/gwt/hw/HelloWorld.gwt.xml
• HTML file: com/edujinilabs/tutorials/gwt/hw/public/HelloWorld.html
• Implementation Code: com/edujinilabs/tutorials/gwt/hw/client/HelloWorld.java
• Empty package com.edujinilabs.tutorials.gwt.hw.server

Step 3: Hello World Implementation

We, now, have the skeleton to push in our code. What we shall do is have a simple Button on the click of which we shall show a simple alert. Update the class HelloWorld to the following code:

package com.edujinilabs.tutorials.gwt.hw.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

public class HelloWorld implements EntryPoint
{
    public void onModuleLoad()
    {
        Button helloBtn = new Button();
        helloBtn.setText("Say Hello");

        helloBtn.addClickListener(new ClickListener() {
            public void onClick(Widget sender)
            {
                Window.alert("Hello, World!");
            }
        });

        RootPanel.get().add(helloBtn);
    }
}

Step 4: Launching the Application

We need to configure two things to launch and run the application. First, create a new "Run" configuration. Go to Run -> Run..., and follow these steps:

• Add a new configuration:
  
• Provide a meaningful name to the configuration. Choose the project (if not already chosen) and the module.
  
• Select the "Parameters" tab and configure the memory to be provided on the heap:
  

Click, optionally Apply and then, Run.

Voila! We again the got the Google Web Toolkit Development Shell! Great, isn't it - noting that we did not touch anything outside Eclipse IDE this time.

What next? Click on the button and "Say Hello".

Summary

We can use the Cypal Studio plug-in for Eclipse to ease our life working with GWT. Well, of course, the power lies with GWT.