GWT Hello World Example

 

In this tutorial, we will create our first GWT Hello World application using Eclipse and Google Plugin.

1. Technologies

  • GWT SDK 2.6
  • Java JDK 1.7
  • Eclipse 4.4 (luna)

 

2. Installation

–  Java JDK : If you don’t have Java JDK installed, download and install it (link)

–  GWT SDK : download from here (link) and unzip it.

Then open Eclipse and go to [Window> Preferences> Google> Web Toolkit] and click the [add] button.

You must get a window like this :

GWTHelloWorldExample-11

Browse to the unzipped file, select it and make [OK..OK..OK]

–  Google plugin for Eclipse : it adds functionalities to Eclipse for developing GWT applications (link)

In Eclipse, go to [Help > Install New Software] and type https://dl.google.com/eclipse/plugin/4.4

GWT Hello World Example 1

Select [Google Plugin for Eclipse (required)] and install.

The installation will also setup Google Web Toolkit.

 

3. Create a GWT application

In Eclipse toolbar, click the New Web Application Project button :

GWT Hello World Example 2

 

Enter the project name, the package name and click the finish button :

GWT Hello World Example 3

 

4. Project structure

The project is created with a default structure.

After deleting some resources (not needed in this example) we obtain the following structure :

GWT Hello World Example

 

5. HTML host page

The code for our GWT application executes within this HTML page, it is needed to run the application in the browser.

It references the CSS and JS files.

 

We  have added an HTML <div> element to use as placeholder for dynamic elements of the page, in our case, it will be : panels, textbox, button and label.

 

6. GWT module definition

It is an XML file that contains the definition of the GWT application.

 

We have created a new module gwthelloworld that inherits from other GWT modules.

And we have specified the entry point to our application : GwtHelloWorld.

 

7. GWT entry point

It is the entry point class in our GWT application, it is similar to the main class in Java.

To build our UI, we use a horizontal panel (subPanel), enclosed within a vertical panel (mainPanel), then we put a TextBox widget and a Button widget in the subPanel, finally we put the subPanel and a Label widget in the mainPanel.

To generate the dynamic content of our application (mainPanel), we will use the Root panel that wraps the <div /> element in the host page.

We call the Root panel by the id of the <div /> element, then we add the mainPanel to the Root panel

 

 

We have added an event handler to the submitButton to receive click events, the sayHello() method is then executed when the submitButton is clicked.

 

8. Modify CSS

We customize the style of the application with the following content :

GwtHelloWorld.css

 

9. web.xml

Change its content to the following :

 

10. Test It

Right-click on the project and select [ Run As > Web application (GWT Super Dev Mode) ]

GWT Hello World Example 6

 

Go to the browser and type the URL : http://127.0.0.1:8888/GwtHelloWorld.html

After “compiling the project”,  we get :

GWT Hello World Example 4

 

We enter a name and click the submit button.

GWT Hello World Example 5

 

Download source code