A very simple "Hello World" example

Usually introductory books start with a "Hello World" application - one or two lines of code that print the message "Hello World" to the screen. This makes you familiar with the development environment and demonstrates how to embed your code into the larger class structure.

With GWT it's different. Google's introductory "Hello World" has not two, but more than 200 lines of code.

I believe that a "Hello World" app should demonstrate only the very basic functionality and not confuse with RPC and event handling right away. So in this post I will reduce Google's "Hello World" to the bare minimum in order to demonstrate what the core of a GWT application is.

Create your first application
Follow the instructions on the Google page for building your first web-application with the Eclipse-plugin. Name your project "HelloWorld" and the package "com.example.mywebapp". You end up with a very sophisticated "Hello World" application which we will strip down to something less complex below.

Where is main?
In GWT there is no "main" method. Program execution starts in a method named "onModuleLoad" in the class "HelloWorld". You find this class in the package "com.example.mywebapp.client".

Stripping down "HelloWorld"
Now erase all the content of the "onModuleLoad" method and replace it by the following two lines of code:

public void onModuleLoad() {
        Label label = new Label("Hello World!");
        RootPanel.get().add(label);
}

Right-click on the project-name in Eclipse's Project Explorer window and choose "Run As -> Web Application". Now two new windows open up. One shows the server log, the other one being your "Hosted Mode Browser" (all that will probably change in GWT 2.0). A detailed description of "Hosted Mode" can be found here.

The output of your "Hello World" program is shown on the left side of the Hosted Mode Browser window. You'll notice a lot of other stuff in the browser that seems to stem from a different source. We'll cover that later.



There can be only one webserver running at a time. If your local webserver (jetty) shows up with an error message, you probably already have a hosted mode browser open. In this case just close the window with the error message, switch to the browser and hit "Refresh".

Use GWT with the Eclipse plugin!

GWT can be downloaded as .zip-file or as part of the Eclipse-plugin. I tried both and must say that the Eclipse-plugin is much more convenient to use than the standalone version.

This page provides all the downloadlinks and has instructions on building your first application.

Make sure your books/tutorials are up to date. There are still many books on the market where the first application is created at the command prompt using tools like "applicationCreator" (this is now called "webAppCreator" and it all works completely different). In order to build your first application you better follow the instructions on the webpage mentioned above.

Skills needed to start programming GWT

What is GWT?
The Google Web Toolkit (GWT) is a collection of tools for developing Web-Applications. Your web-browser only talks HTML, JavaScript and CSS. Creating large dynamic applications with these technologies can be a real challenge. With GWT you build your application in Java and "compile" it into JavaScript which can be executed in the browser. If you know Java you can now build large dynamic web applications (almost) without knowing all the AJAX stuff.

Java
GWT apps are developed in Java. It definitely does not require many years of experience as a Java developer to start with GWT. But you should have a basic understanding of the Java-language and know how anonymous inner classes work since all the event handling uses them heavily. Check out this tutorial for more information. If you have some experience developing Swing-applications: perfect. You'll recognize many of these concepts are used in GWT.

Eclipse
Using Eclipse is the most convenient way of developing GWT apps in Windows, OSX or Linux.

With a lot of time you will probably be able to get it running in any other IDE like Netbeans, BlueJ or IntelliJ. And of course you can also use the command-line version with a text editor.

Since most folks at Google seem use Eclipse or BBEdit I think that you are best of by just doing the same in order to run into the least problems.

HTML and CSS
GWT apps are layouted using CSS and ambedded into HTML pages. Therefore you need some basic experience with CSS and HTML to get it running. The standard layout looks like - well - "basic". If you want something more advanced you have to style it yourself with CSS. Unfortunately I have not seen a comprehensive collection of good CSS examples for GWT yet. Drop me a note if you find something.
Firebug can make your life a lot easier finding the problems with CSS.