GWT cookbook

Definitions
GWT
GWT is a toolkit that allows developers to create rich and high performance web applications using
JAVA. GWT translate the JAVA Code to a Javascript or AJAX web code.

GWTDesigner

GWT Designer is an easy GUI designer that makes developers to rapidly create GWT GUI applications
without writing code just with display simple forms.

Recipes
Recipe1: First Application: HelloWorld

Step1: Installation and configuration

In this cookbook, the Eclipse 3.5 will be used. First, we must downloading and installing GWT
with all its supports. From the menu Help/Install New Software
Past this lien http://dl.google.com/eclipse/plugin/3.5 and select the two items and click
Next. Once the gwt plugin has been installed, Google Plugin for Eclipse and GWT Designer
will be automatically installed.

Step2: Create a Hello Application with JAVA Code

Create a new project from File/New/JAVA Project. We must select at the Libraries : Add
External Jars and we choose “gwt-user.jar” downloaded here: http://google-web-
toolkit.googlecode.com/files/gwt-2.1.0.zip

Right Click at the Project and choose Google Web Toolkit/Convert Project into GWT project
Right Click at the Project and choose Google Web Toolkit/GWT Module

This will create a basic web page with GWT.

You can explore the project and inspect the ImageViewer.java. It will be converted to an
HTML page

There is also the html page that will be converted : ImageViewer.html

You can also look design of the page by clicking at “Design” under the code part.

To running Project. Right Click at the project and choose Run As GWT Application. It will
show you a GWT SDK for compiling the code (hosted-mode approach)
And that's all, the application has been deployed and is now running. You can run it at your
default web browser by clicking on “Launch Default Browser” at the GWT SDK.
Recipe 2: GWT features
Step 1 : first page generated

By looking at the first page generated, we can see:

“com.google.gwt.core.client.EntryPoint;” – it’s contains all classes and modules

that we will need.
« public class ImageViewer implements EntryPoint » - An entry point in GWT is
the starting point for a GWT application similar to the main method in a standard Java
program.

« private Button clickMeButton; » - we creat a button named clickMeButton

« rootPanel.add(clickMeButton); » - to show button at the window.

Step 2: other features of GWT

Panel:
Each window must contain some panel where we can put it in some widgets.

 Add a panel:

RootPanel rootPanel = RootPanel.get();

 Add a Widget to Panel with size:

rootPanel.add(MyWidget, 268, 267);

 Show/Hide Widget at Panel:

menuBar.setVisible(true);
menuBar.setVisible(false);

Checkbox:

A standard check box widget.

 To creat a checkbox :

CheckBox checkBox = new CheckBox("Name");

 Size:

checkBox.setSize("158px", "34px");
 TextBox:

A standard single-line text box.

 To creat a TextBox :

TextBox textBox_1 = new TextBox();

 Add a default text:

textBox_1.setText("MyText");
 Add a TextArea:

TextArea textArea = new TextArea();

 Add a password text area:

PasswordTextBox passwordTextBox = new

PasswordTextBox();
 Add a date area:

DateBox dateBox = new DateBox();

Radio Button

A mutually-exclusive selection radio button widget.

RadioButton radioButton = new RadioButton("name");

List Box
A widget that presents a list of choices to the user as a list box.

ListBox listBox = new ListBox();

 Add an item to the list:

listBox.addItem("MyItem");

Label

A widget that contains arbitrary text, not interpreted as HTML

 Add a text Label:

Label label = new Label("Text");

Agenda

 Add a calendar:
 DatePicker datePicker = new DatePicker();

File Upload

 Add a file Button Upload:

FileUpload fileUpload = new FileUpload();

Add a link

A widget that serves as an hyperlink. That is, it is a link to another state of the running
application. It should behave exactly like Hyperlink.

InlineHyperlink inlineHyperlink = new

InlineHyperlink("New inlineHyperlink", false,
"newHistoryToken");

Add an image:

A widget that displays the image at a given URL.

 Image image = new
Image("gwt/standard/images/corner_ie6.png");
 Size:

image.setSize("190px", "100px");

Menu

A standard menu bar widget. A menu bar can contain any number of menu items, each of
which can either fire a Command or open a cascaded menu bar.

 Add a Menu Bar:

MenuBar menuBar = new MenuBar();

 Add a sub Menu:

MenuItem with submenu child.

MenuItem menuItem = new MenuItem("New menu", true,

menuBar_1);
menuBar.addItem(menuItem);