[HOWTO] build user interface with GWT

by

Previous Article: [HOWTO] install GWT on Gentoo

hi buddies,

this time we are going to see how we can build a user interface with google web toolkit for our web application.

Elements

We have 2 elements to do that:

  • widgets
  • panels

First, take a look to widget list provided by google for building user interface.
Each widget has a default style but if you want you will change their appearance with CSS.
Moreover, if you have a little patience you can make your personal widgets(just follow this guide).
Another elements used to build UI are panels which are used to lay out (like div elements using html)
the elements of our page, included widgets.

There is 3 type of panel:

  • root panel
  • vertical panel
  • horizontal panel

Panels can be nested within other panels like HTML when using nested div elements or tables.
Generally, vertical panels contains FlexTable,Add Stock panel or Label widget and horizontal Panels contains all other widgets
Root Panel is the dynamic container of your application and it’s on top of GWT container  hierarchy.
There must be a root panel for each GWT application  embedded in your web app.
A root panel works by wrapping one of your page’s element (by default the body element).
We can choose the element passing its name like parameter for the function:

RootPanel.get()             // Default. Wraps the HTML body element.
RootPanel.get("test")       // Wraps any HTML element with an id of "test"

Embedding GWT application

Embedding  GWT applications is really simple,  just include the div you have chosen to be root panel in your html page.

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="StockWatcher.css">
    <title>StockWatcher</title>
    <script type="text/javascript" language="javascript" src="test.nocache.js"></script>
  </head>
  <!--by default-->
  <body>
    <!--if you have called RootPanel.get("test") instead RootPanel.get()-->
    <div id="stockList">...</div>
    .
    .
    .

Implementing elements with Java

From now, we will analyze the google’s main example.

package com.google.gwt.sample.stockwatcher.client;

/*
/////////////////////////////////////////////
MODULES
/////////////////////////////////////////////
*/
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;
/*
/////////////////////////////////////////////
ENTRY POINT
/////////////////////////////////////////////
*/
public class StockWatcher implements EntryPoint {

  private VerticalPanel mainPanel = new VerticalPanel();
  private FlexTable stocksFlexTable = new FlexTable();
  private HorizontalPanel addPanel = new HorizontalPanel();
  private TextBox newSymbolTextBox = new TextBox();
  private Button addStockButton = new Button("Add");
  private Label lastUpdatedLabel = new Label();

  /**
   * Entry point method.
   */
  public void onModuleLoad() {
    // Create table for stock data.
    stocksFlexTable.setText(0, 0, "Symbol");
    stocksFlexTable.setText(0, 1, "Price");
    stocksFlexTable.setText(0, 2, "Change");
    stocksFlexTable.setText(0, 3, "Remove");

    // Assemble Add Stock panel.
    addPanel.add(newSymbolTextBox);
    addPanel.add(addStockButton);

    // Assemble Main panel.
    mainPanel.add(stocksFlexTable);
    mainPanel.add(addPanel);
    mainPanel.add(lastUpdatedLabel);

    // Associate the Main panel with the HTML host page.
    RootPanel.get("stockList").add(mainPanel);

    // Move cursor focus to the input box.
    newSymbolTextBox.setFocus(true);

  }

}

Analyze code together:

  • package instruction indicates that StockWatcher class  belongs to specified package.
  • in the modules section we import modules we need to use,  avoiding compilation error when we use a function not defined in the StockWatcher scope.
  • In the entry point section we inherit entrypoint class to StockWatcher.
    Every application must have at least one Entrypoint inherited class  and its method onModuleload()  is called automatically by loading a module that declares an implementing class as an entry point.
    Moreover, there is many objects instantiated as attribute which represent the elements of the user interface.
  • In the method onModuleLoad(), there is a setting of parameters of UI’s elements (follow comments).

Now, you should make your first simple UI using Java and GWT.

Next time we’ll see how to manage events with GWT.
See you soon!

Link:http://code.google.com/intl/it-IT/webtoolkit/doc/latest/tutorial/buildui.html

Tag: , , , , , ,

Una Risposta to “[HOWTO] build user interface with GWT”

  1. [HOWTO] install GWT on Gentoo « Says:

    […] Following Article: [HOWTO] build user interface with GWT […]

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...


%d blogger cliccano Mi Piace per questo: