Google Web Toolkit Tutorials

Core Widgets and Panels

First of all, what are widgets and what are panels?

Widgets are the UI objects like buttons, labels, text input fields, drop downs, or something more complex like a tree or a calendar. Widgets extend com.google.gwt.user.client.ui.Widget class.

Panels are widgets that can contain other widgets like tables, stacks, tabs, etc. Panels extend com.google.gwt.user.client.ui.Panel class.

Widgets and panels are the basic building blocks of GWT applications.

The best way to get a quick understanding of what GWT can do is to run the Kitchen Sink demo/sample app which is bundled with GWT. To run it you need to go to samples\KitchenSink directory inside the GWT installation and run the KitchenSink-shell script.

Another good place is the Widgets gallery on the GWT web-site. Each widget and panel in that gallery comes with a sample code, Javadoc, CSS info and other useful information.

Lets write a small sample application. To do this we have to start a new project or use the one that we dissected in the previous tutorial.

First of all, let get rid of the code that we don't need. We'll make the HTML file very simple:

<html>
   <head>
     <meta name='gwt:module' content='com.jpavel.gwt.MyApp'>
   </head>
   <body>
      <script language="javascript" src="gwt.js" type="text/javascript"></script>
      <iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
      <div id="gwtContainer"></div>
   </body>
</html>

and our entry point class will look like this:

public class MyApp implements EntryPoint {

    private TextBox textBox;
    private Button button;
    private Label label;

    public void onModuleLoad() {
        DockPanel dockPanel = new DockPanel();
       
        textBox = new TextBox();
        button = new Button("Click Me");
        label = new Label();
       
        dockPanel.add(textBox, DockPanel.NORTH);
        dockPanel.add(button, DockPanel.CENTER);
        dockPanel.add(label, DockPanel.SOUTH);
       
        RootPanel.get("gwtContainer").add(dockPanel);
    }
}

We'll use a DockPanel for layout. We'll add a TextBox, Button and Label widgets to our layout. Already at this point this application is a working piece of code. You can run the GWT shell to see/check how Widgets are going to align to each other on the page. Play around with the DockPanel, try different directions.

Now, lets add some behavior to our app.

        button.addClickListener(new ClickListener() {
            public void onClick(Widget sender) {
                label.setText(textBox.getText());
            }
        });

Buttons exist for people to click on them. In order for a program to be able to intercept clicks buttons expose ClickListener interface, a simplest example of an Observer Pattern.The above code demonstrates how you can attach a click listener to a button. Go ahead add paste this code somewhere after the initialization of the button.

Refresh the screen in the running shell, enter some text into the text box and click the button.

Don't stop here, go through other widgets and panels from the Widgets gallery.

Till next time,

Pavel