Google Web Toolkit Tutorials

Your First GWT Application (dissected)

Have you already installed GWT? No? Not sure how? Read our Getting Started tutorial.

First of all - forget everything you've learned about Web Programming. Well, not everything... just the simplified request-response ideology. If you've ever done any AWT, Swing, SWT, GTK, Windows.Forms or any other desktop UI development that is the ideology you'll need to use with GWT.

Lets look at and go through what was generated for us by the the applicationCreator.

The core part of the GWT module is the descriptor xml file which we can find (in case of our tutorial) at com/jpavel/gwt/MyFirstApp.gwt.xml

<module>
  <!-- Inherit the core Web Toolkit stuff. -->
  <inherits name='com.google.gwt.user.User'/>

  <!-- Specify the app entry point class. -->
  <entry-point class='com.jpavel.gwt.client.MyFirstApp'/>
</module> 

The "entry-point" specifies the entry point to your application, kind of (but not exactly) like a class that contains the main() method.

The "inherits" is used to tell the GWT compiler about other modules you'd like to use in your application. By default only classes under your com.jpavel.gwt.client package are being compiled (translated into JavaScript) but no GWT application can exist without the core set of widgets and libraries which are provided by GWT (com.google.gwt.user.User). If you'll be using third-party or your own widget libraries you'll have to add another <inreits name="com.third.party.widgets.User">. We'll look at creating custom widget libraries in next tutorials.

com.jpavel.gwt.public package contains files that you'll be using exclusively for your GWT application (CSS, image, JavaScript files). Obviously you'll need some sort of HTMLish entry point, we're building a Web Application after all. By default it's going to be com/jpavel/gwt/public/MyFirstApp.html file, but you can rename it, or use a JSP, PHP or whatever you're using.

The HTML/JavaScript code that is required for a GWT application is minimal.

<html>
<head>
  <title>Wrapper HTML for MyFirstApp</title>
  <meta name='gwt:module' content='com.jpavel.gwt.MyFirstApp'>
</head>
<body>
  <script language="javascript" src="gwt.js"></script>
  <iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>

  <h1>MyFirstApp</h1>

  <table align=center>
  <tr>
    <td id="slot1"></td><td id="slot2"></td>
  </tr>
  </table>
</body>
</html> 

The meta tag specifies the GWT module you're going to be using on this page.

Just a thought: is it possible to use multiple GWT modules on one page? Or use non-meta tag method to add GWT module to a page? If anyone knows please let me know.

After the meta tag all you need is just to include gwt.js file and you're set to go. As for the above piece of HTML, it's using some optional features like browser history management. We'll look at history management in future tutorials.

The above HTML also contains a table with two cells named slot1 and slot2. This is where our GWT module is going to be putting its' widgets. Yes, GWT module is not limited to being one big piece of UI.

Now, lets take a look at the module itself (the entry point). It can be found at com/jpavel/gwt/client/MyFirstApp.java:

package com.jpavel.gwt.client;

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

public class MyFirstApp implements EntryPoint {
   public void onModuleLoad() {
      final Button button = new Button("Click me");
      final Label label = new Label();

      button.addClickListener(new ClickListener() {
         public void onClick(Widget sender) {
            if (label.getText().equals(""))
               label.setText("Hello World!");
            else
               label.setText("");
         }
      });

      RootPanel.get("slot1").add(button);
      RootPanel.get("slot2").add(label);
   }
}

First of all, all entry point classes must implement com.google.gwt.core.client.EntryPoint interface. The "main" method of the entry point is onModuleLoad().

There is nothing magical happening in the beginning of the onModuleLoad() method. We define a "click me" button, a label, attach a click listener to that button which on click will toggle the text in the label. At the very bottom we'll find the most important part, embedding of our GWT widgets and panels into the resulting HTML page. To do that we will use com.google.gwt.user.client.ui.RootPanel class which represents the root panel. There can be multiple root panels, in out case there are two of them: slot1 and slot2. We'll use the get() method to access the panels and add our button and label to slot1 and slot2 respectively.

Note: Widgets are the UI objects like buttons, labels, text input fields, drop downs, or something more complex like a tree or a calendar. Panels are widgets that can contain other widgets (tables, stacks, tabs, etc.). Widgets extend com.google.gwt.user.client.ui.Widget class, and panels extend com.google.gwt.user.client.ui.Panel class.

This is how simple the default sample applications is, and this is pretty much as complex as it gets.

In my next tutorial I'll make a quick overview of default widgets and panels you can use in your GWT applications.

Till next time,

Pavel