Using Google Web Toolkit ( GWT ) and NetBeans for Building AJAX ...

unalaskaweepingInternet and Web Development

Jul 19, 2012 (5 years and 1 month ago)

687 views



Using Google Web Toolkit (GWT) and NetBeans for Building AJAX Applications
Sang Shin, sang.shin@sun.com, Sun Microsystems, www.javapassion.com/ajaxcodecamp


This hands-on lab takes you through the basics of using Google Web Toolkit (GWT) for developing AJAX-
based web applications. This document is designed to get you going as quickly as possible. In this hands-
on lab, you will exercise the following features of GWT.
1.How to build GWT-based application using GWT NetBeans IDE plug-in
2.How to build and run sample applications that come with GWT package from Google using NetBeans
IDE
3.How to use GWT widgets
4.How to create and use custom widgets
5.How to perform RPC operation
6.How to fetch data from a server in a form of JSON.
7.How to attach a CSS style to a widget
8.How to call native JavaScript code from Java and vice versa

Expected duration: 300 minutes

Prerequisites
This hands-on lab assumes you have some basic knowledge of, or programming experience with, the
following technologies.

Java programming

If you are new to Java programming, please take free Java Intro Programming online
course.

Java Swing

If you are new to Java Swing programming, please see Swing tutorial

AJAX basics

If you are new to AJAX basics, please see "AJAX Basics" presentation.
Software Needed
Before you begin, you need to install the following software on your computer. The GWT NetBeans IDE
plug-in is included as part of the hands-on lab zip file. The GWT NetBeans IDE plug-in at this point is
still in alpha quality but it provides a good enough template for building and running GWT application
using NetBeans IDE. More functionality is being added to the plug-in. This hands-on lab will be updated
when the new plug-in is available.

Java Standard Development Kit (JDK™) version 5.0 (download) or 6.0 (download)

NetBeans IDE 6.0 (download)

Download either "Web & Java EE" or "All" bundles.

Google Web Toolkit 1.3.3 or after (download) - the current version is 1.4.60 as of Oct. 2007

The name of the file is as following

gwt-windows-1.3.3.zip or gwt-windows-1.4.60.zip (Windows)

gwt-linux-1.3.3.tar.gz or gwt-linux-1.4.60.tar.bz2 (Linux)
Page 1 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/

gwt-mac-1.3.3.tar.gz or gwt-mac-1.4.60.tar.gz (MacOS)

Download the zip file and unzip it in a directory of your choice. The sample applications
shipped with this hands-on lab assume that you have unzipped the file in a root directory of
your system.

For example. for Windows system, the sample applications assume that you
unzipped the gwt-windows-1.3.3.zip file in C:\.

If you unzipped the file in a directory other than the root directory, you will need to
resolve references as described in the document below.

4275_ajaxgwtintro.zip (download)

The zip file contains this document and the lab contents including NetBeans IDE GWT plug-
in.

Download it and unzip in a directory of your choice

OS platforms you can use for this lab

Google Web Toolkit 1.3.3 (the latest version as of May 16th, 2007) supports only the following three OS
platforms.

Windows

Linux

Mac OS

Change Log

Oct. 2nd, 2006: Updated with GWT package beta 1.1.0.

Oct. 7th, 2006: Setting CSS style to a widget exercise is added as Exercise 2.5

Oct. 7th, 2006: Invocation of native JavaScript code and invocation of Java methods and access of
Java fields from native JavaScript code exercise is added as Exercise 10

Oct. 8th, 2006: FireBug debugger plug-in is now included as part of the hands-on lab zip file

Oct. 21st, 2006: Updated with GWT package 1.2.22

May 16th, 2007: Updated with GWT package 1.3.3, with NetBeans Plug-in 1.3.3

May 27th, 2007: GWTJSON project link is fixed

Dec. 6th, 2007: Updated to use GWT package 1.4.60

Dec. 7th, 2007: Updated with NetBeans 6.0, GlassFish V2

March. 4th, 2008: Updated with NetBeans 6.0 screen shots

Things to be done (by Authors of this lab)

Add more exercises from NetBeans tutorials on GWT

Add more exercises based on more GWT samples

Exercises on JUnit, internationalization will be added in the future.

Update the samples source code base from 1.4.6x. For now it is using 1.0 samples code base
except GWTDynaTable project.

Lab Exercises

You would not need an internet connection to this lab once you have downloaded and installed the
software mentioned above.

Exercise 0: Installation and Configuration (5 minutes)

Exercise 1: Build and run HelloWorld sample applications (30 minutes)

Exercise 2: Build and run "Hello" and "Kitchen Sink" sample applications, Add CSS style
(30 minutes)

Exercise 3: Create custom widgets (30 minutes)
Page 2 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/

Exercise 4: Invoke remote service via RPC (30 minutes)

Exercise 5: Build and run "Dynamic Table" sample application (30 minutes)

Exercise 6: Build and run "JSON" sample application (30 minutes)

Exercise 7: Build and run "Mail' sample application (30 minutes)

Exercise 8: Build and run "SimpleXML" sample application (30 minutes)

Exercise 9: Build and run "HistoryExample" sample application (30 minutes)

Exercise 10: JavaScript Native Interface (JSNI) (30 minutes)

Homework Exercise (for people who are taking Sang Shin's "AJAX online course")


Exercise 0: Installation and Configuration
In this exercise, you are going to install GWT NetBeans plug-in to the NetBeans IDE.
1.Install GWT NetBeans Plug-in to the NetBeans IDE

(0.1) Install GWT NetBeans Plug-in to the NetBeans IDE 6.0

Page 3 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/

Page 4 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/

Exercise 1: Build and run a simple HelloWorld application
In this exercise, you are going to build a simple HelloWorld GWT application using NetBeans. You
will also configure the Google Web Toolkit installation directory to the NetBeans IDE, which you have
to do only once.
1.Create a GWT Web Application project
2.Add another button to the GWT Application

(1.1) Create a GWT Web Application project
0. Start NetBeans IDE if you have not done so yet.
1. Create a GWT NetBeans project.

Select File->New Project (Ctrl+Shift+N).

Observe that the New Project dialog box appears.

Under Choose Project pane, select Web under Categories and Web Application under
Projects.

Click Next. (Figure-1.10 below)
Page 5 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-1.10: Create a new Web application project

Observe the Name and Location pane appears.

For the Project Name field, enter whatever project name you want. We will use
GWTApplication as project name.

For the Project Location field, enter whatever directory you want to use for maintaining the
project information. You can just take the default value, which is your home directory. In
this example, we use C:\mygwtprograms.

Click Next.
<>
Page 6 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-1.11: Specify Project Name

2. Choose Google Web Toolkit as a Framework to use and specify the GWT installation directory.

The first time you are creating a GWT project, NetBeans IDE asks for the location of Google Web
Toolkit(GWT) package you have downloaded and unzipped as mentioned above under
Software required section.

Choose Google Web Toolkit under Frameworks section.

For the GWT Installation Folder, click Browse and browse down to the directory in which
GWT files are located.

Click Finish. (Figure-1.11.1 below.)
Page 7 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-1.11.1: GWT Configuration

Observe that the GWTApplication project node appears under Projects tab window of
NetBeans. The IDE-generated Main.gwt.xml is shown in the source editor. (Figure-1.12
below)
Page 8 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-1.12: GWTApplication project
3. Build and run the application.

Right click GWTApplication project node and selectRun.

Observe that the web page gets displayed.

Click GWT page link.(Figure-1.14 below)
Page 9 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-1.13: First page

Observe that there is Click me! button and Hello, GWT!!! Message is displayed right
underneath it. (Figure-1.14 below)

Press Click me! button and observe that Hello, GWT!!! message disappears.
Page 10 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-1.14: Display
return to the top of
exercise
(1.2) Add another button to the GWT Application

1. Open the MainEntryPoint.java file under GWTApplication->Source Packages-
>org.yournamehere.client as shown in Code-1.20 below. Pay special attention to the bold-fonted
part.

/*
* MainEntryPoint.java
*
* Created on May 18, 2007, 5:31 PM
*
* To change this template, choose Tools | Template Manager
* and open the template in the editor.
*/

Page 11 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Code-1.20: Main.java which contains a button

2. Modify the MainEntryPoint.java file as shown in Code-1.21 below to add the 2nd button. The
code fragments that need to be added are highlighted in bold and blue-colored font.

package org.yournamehere.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;

/**
*
* @author sang
*/
public class MainEntryPoint implements EntryPoint {

/** Creates a new instance of MainEntryPoint */
public MainEntryPoint() {
}

/**
* The entry point method, called automatically by loading a module
* that declares an implementing class as an entry-point
*/
public void onModuleLoad() {
final Label label = new Label("Hello, GWT!!!");
final Button button = new Button("Click me!");

button.addClickListener(new ClickListener(){
public void onClick(Widget w) {
label.setVisible(!label.isVisible());
}
});

RootPanel.get().add(button);
RootPanel.get().add(label);
}

}
package org.yournamehere.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
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;

/**
*
* @author sang
*/
public class MainEntryPoint implements EntryPoint {

Page 12 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Code-1.21: The 2nd button is added

3. Build and run the project.

Right click GWTApplication project node and select Run.

Click GWT page link.

Observe that the 2nd button is displayed.

Click the 2nd button button. (Figure-1.22 below)
/** Creates a new instance of MainEntryPoint */
public MainEntryPoint() {
}

/**
* The entry point method, called automatically by loading a module
* that declares an implementing class as an entry-point
*/
public void onModuleLoad() {
final Label label = new Label("Hello, GWT!!!");
final Button button = new Button("Click me!");

button.addClickListener(new ClickListener(){
public void onClick(Widget w) {
label.setVisible(!label.isVisible());
}
});

Button button2 = new Button("I am the 2nd button. Click me!");

button2.addClickListener(new ClickListener(){
public void onClick(Widget w) {
Window.alert("Life is worth living.. with Passion!");
}
});

RootPanel.get().add(button);
RootPanel.get().add(button2);
RootPanel.get().add(label);
}

}
Page 13 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-1.22: The 2nd button is displayed.

Observe that an alert message is displayed. (Figure-1.23 below)


Figure-1.23: Alert message from the 2nd button event handler

return to the top of
exercise

Page 14 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
(1.3) Debugging


Page 15 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/

Page 16 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/

Page 17 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/

Page 18 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/

Page 19 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/

Page 20 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/




Summary
In this exercise, you learned how to build and run a HelloWorld GWT application using NetBeans.
return to the
top
Page 21 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/


Exercise 2: Build and run GWT sample applications "Hello" and "Kitchen Sink",
Add CSS Style
In this exercise, you are going to build and run two sample applications - "Hello" and "Kitchen
Sink" using NetBeans IDE. Both applications come with the GWT package. These are the same
sample applications you can run and build using command line shell commands that come with GWT
package. You have to do the Exercise 1 first so that the location of the GWT is correctly configured
to the NetBeans IDE.
1.Build and run "Hello" sample application
2.Build and run "Kitchen Sink" sample application
3.Modify Buttons.java (of the "Kitchen Sink" sample application)
4.Modify Menus.java (of the "Kitchen Sink" sample application)
5.Modify Trees.java (of the "Kitchen Sink" sample application)
6.Change CSS style

(2.1) Build and run "Hello" sample application
In this step, you are going to build and run "Hello" sample application using NetBeans. The
application is already provided as "ready-to-build" NetBeans project called GWTHello
as part of
hands-on lab zip file. This application works pretty much the same as the GWTApplication you built
in Exercise 1.
0. Start NetBeans IDE if you have not done so yet.
1. Open GWTHello NetBeans project.

Select File->Open Project (Ctrl+Shift+O). The Open Project dialog box appears.

Browse down to <LAB_UNZIPPED_DIRECTORY>/ajaxgwtintro/samples/<OS> directory.

Windows: If you unzipped the 4275_ajaxgwtintro.zip file under C:\ directory under
Windows, the directory to which you want to browse down should be
C:\ajaxgwtintro\samples\Windows.

Linux: If you unzipped the 4275_ajaxgwtintro.zip file under $HOME directory under Linux,
the directory to which you want to browse down should be
$HOME\ajaxgwtintro\samples\Linux.

MacOS: If you unzipped the 4275_ajaxgwtintro.zip file under $HOME directory under
Linux, the directory to which you want to browse down should be
$HOME\ajaxgwtintro\samples\MacOS.

Select GWTHello. (Figure-2.10 below)

Click Open Project Folder. (Figure-2.10 below)
Page 22 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-2.10: Open GWTHello NetBeans project
3. Build and run GWTHello NetBeans project.

Right click GWTHello project node and select Run.

Click GWT page link.

Click Click me button

Observe Hello, AJAX message gets displayed. (Figure-2.12 below)
Page 23 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-2.12: Application is opened in a browser

4. Add another button to the GWTHello application.

Modify Hello.java under GWTHello->Source Packages-
>com.google.gwt.sample.hello.client as shown in Code-2.15 below. (Make sure you
modify Hello.java in the GWTHello project not the MainEntryPoint.java in the
GWTApplication project in Exercise 1.) This modification is to add another button. The code
fragments that need to be added are highlighed in bold and blue-colored font.
/*
* Copyright 2006 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy of
* the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
Page 24 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Code-2.15: Add another button

5. Build and run the project.

Right click GWTHello project node and select Run.

Click GWT page link.

Press Click me and Click me 2 buttons and see if they behave as expected.

* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*/
package com.google.gwt.sample.hello.client;

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

public class Hello implements EntryPoint {

public void onModuleLoad() {
Button b = new Button("Click me", new ClickListener() {
public void onClick(Widget sender) {
Window.alert("Hello, AJAX");
}
});

RootPanel.get().add(b);

// Create a new button along with event listener.
// The event listener has listener method called onClick().

Button c = new Button("Click me 2", new ClickListener() {
public void onClick(Widget sender) {
Window.alert("Hello, AJAX2");
}
});

RootPanel.get().add(c);
}

}
Page 25 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-2.16: Modified GWTHello application in hosted mode.

5. [For your own exercise] Add your own button - you can name it as Click me 3 - to the
application.

return to the top of
exercise


(2.2) Build and run "Kitchen Sink" sample application using NetBeans - Modify Buttons.java
In this step, you are going to build and run "Kitchen Sink" sample application using NetBeans and
then modify Buttons.java to add your own buttons. The application is already provided as "ready-
to-build" NetBeans project called GWTKitchenSink as part of hands-on lab zip file.
0. Start NetBeans IDE if you have not done so yet.
1. Open GWTKitchenSink NetBeans project.

Select File->Open Project (Ctrl+Shift+O). The Open Project dialog box appears.
Page 26 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/

Browse down to <LAB_UNZIPPED_DIRECTORY>/ajaxgwtintro/samples/<OS> directory.

Select GWTKitchenSink.

Click Open Project Folder.

Observe that the GWTKitchenSink project node appears under Projects tab window
2. Resolve references (as described above) if you experience reference problems.
3. Build and run GWTKitchenSink project.

Right click GWTKitchenSink project node and select Run.

Observe the starting page gets displayed.

Click "Click me to get to the GWT Page" link.

Observe the KitchenSink page gets displayed. (Figure-2.22 below)
Figure-2.22: GWTKitchenSink page

4. Check each of the widgets in the left starting from Buttons. Play around with them. (Figure-2.23
below)

Page 27 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-2.23: Buttons

5. Try the following:

Menus

Images

Layouts

Lists

Popups

Tables

Text

Trees
6. For Frames, click Back and Forward buttons and see if they are working as expected. (Figure-
2.24 below)

Page 28 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-2.24: Try Back and Forward buttons.

return to the top of
exercise

(2.3) Modify Buttons.java

1. Modify Buttons.java under GWTKitchenSink->com.google.gwt.sample.kitchensink.client
as shown in Code-2.30 below. The bold-fonted comments are added to aid your understanding -
you will not see them in the actual code. The new code fragments that need to be added are
highlighted in bold and blue-colored font. The new code is to add another menu bar called "Life"
with its own menu items.

/*
* Copyright 2006 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy of
* the License at
*
Page 29 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*/
package com.google.gwt.sample.kitchensink.client;

import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.RadioButton;
import com.google.gwt.user.client.ui.VerticalPanel;

/**
* Demonstrates the various button widgets.
*/
public class Buttons extends Sink {

public static SinkInfo init() {
return new SinkInfo("Buttons",
"GWT supports all the myriad types of buttons that exist in HTML. "
+ "Here are a few for your viewing pleasure.") {
public Sink createInstance() {
return new Buttons();
}
};
}

// Create button and checkbox objects
private Button disabledButton = new Button("Disabled Button");
private CheckBox disabledCheck = new CheckBox("Disabled Check");
private Button normalButton = new Button("Normal Button");
private Button myOwnButton = new Button("My Own Button");
private CheckBox normalCheck = new CheckBox("Normal Check");

// Create a vertical panel
private VerticalPanel panel = new VerticalPanel();

// Create radio buttons
private RadioButton radio0 = new RadioButton("group0", "Choice 0");
private RadioButton radio1 = new RadioButton("group0", "Choice 1");
private RadioButton radio2 = new RadioButton("group0", "Choice 2 (Disabled)");
private RadioButton radio3 = new RadioButton("group0", "Choice 3");
private RadioButton radio4 = new RadioButton("group0", "Choice 4");

// Constructor of the Buttons class
public Buttons() {
HorizontalPanel hp;

// Create a horizontal panel object and add buttons to it.
// Also add the horizontal panel object to the vertical panel.
panel.add(hp = new HorizontalPanel());
hp.setSpacing(8);
hp.add(normalButton);
hp.add(disabledButton);
hp.add(myOwnButton);

Page 30 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Code-2.30: Modified Buttons.java

2. Build and run the project.

Right click GWTKitchenSink project node and select Run.

Click "Click me to get to the GWT Page" link.

Click Buttons link on the left. You should see the figure as shown in Figure-2.31 below.

// Create a horizontal panel object and add checkboxes to it.
// Also add the horizontal panel object to the vertical panel.
panel.add(hp = new HorizontalPanel());
hp.setSpacing(8);
hp.add(normalCheck);
hp.add(disabledCheck);

// Create a horizontal panel object and add radion buttons to it.
// Also add the horizontal panel object to the vertical panel.
panel.add(hp = new HorizontalPanel());
hp.setSpacing(8);
hp.add(radio0);
hp.add(radio1);
hp.add(radio2);
hp.add(radio3);
hp.add(radio4);

// Set the disabled flags to widget objects
disabledButton.setEnabled(false);
disabledCheck.setEnabled(false);
radio2.setEnabled(false);

panel.setSpacing(8);
setWidget(panel);
}

public void onShow() {
}
}
Page 31 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-2.31: Add your own buttons

3. Add another panel to the GWTKitchenSink application.

Modify Buttons.java under GWTKitchenSink-
>com.google.gwt.sample.kitchensink.client as shown in Code-2.32 below. The
modification is to add your own panel. The code fragment that needs to be added are
highlighed in bold and blue-colored font.
/*
* Copyright 2006 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy of
* the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
Page 32 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*/
package com.google.gwt.sample.kitchensink.client;

import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.RadioButton;
import com.google.gwt.user.client.ui.VerticalPanel;

/**
* Demonstrates the various button widgets.
*/
public class Buttons extends Sink {

public static SinkInfo init() {
return new SinkInfo("Buttons",
"GWT supports all the myriad types of buttons that exist in HTML. "
+ "Here are a few for your viewing pleasure.") {
public Sink createInstance() {
return new Buttons();
}
};
}

// Create button and checkbox objects
private Button disabledButton = new Button("Disabled Button");
private CheckBox disabledCheck = new CheckBox("Disabled Check");
private Button normalButton = new Button("Normal Button");
private Button myOwnButton = new Button("My Own Button");
private CheckBox normalCheck = new CheckBox("Normal Check");

// Create a vertical panel
private VerticalPanel panel = new VerticalPanel();

// Create radio buttons
private RadioButton radio0 = new RadioButton("group0", "Choice 0");
private RadioButton radio1 = new RadioButton("group0", "Choice 1");
private RadioButton radio2 = new RadioButton("group0", "Choice 2 (Disabled)");
private RadioButton radio3 = new RadioButton("group0", "Choice 3");
private RadioButton radio4 = new RadioButton("group0", "Choice 4");

// Constructor of the Buttons class
public Buttons() {
HorizontalPanel hp;

// Create a horizontal panel object and add buttons to it.
// Also add the horizontal panel object to the vertical panel.
panel.add(hp = new HorizontalPanel());
hp.setSpacing(8);
hp.add(normalButton);
hp.add(disabledButton);
hp.add(myOwnButton);

// Create a horizontal panel object and add checkboxes to it.
// Also add the horizontal panel object to the vertical panel.
Page 33 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Code-2.32: Add another panel

4. Build and run the project.

Right click GWTKitchenSink project node and select Run.

Click "Click me to get to the GWT Page" link.

Click Buttons link on the left. You should see the figure as shown in Figure-2.33 below.
panel.add(hp = new HorizontalPanel());
hp.setSpacing(8);
hp.add(normalCheck);
hp.add(disabledCheck);

// Create a horizontal panel object and add radion buttons to it.
// Also add the horizontal panel object to the vertical panel.
panel.add(hp = new HorizontalPanel());
hp.setSpacing(8);
hp.add(radio0);
hp.add(radio1);
hp.add(radio2);
hp.add(radio3);
hp.add(radio4);

// Add my own panel
panel.add(hp = new HorizontalPanel());
hp.setSpacing(8);
hp.add(normalButton);
hp.add(normalCheck);
hp.add(radio0);

// Set the disabled flags to widget objects
disabledButton.setEnabled(false);
disabledCheck.setEnabled(false);
radio2.setEnabled(false);

panel.setSpacing(8);
setWidget(panel);
}

public void onShow() {
}
}
Page 34 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-2.33: Result of running the modified application

return to the top of
exercise


(2.4) Modify Menus.java

1. Modify Menus.java under GWTKitchenSink->com.google.gwt.sample.kitchensink.client as
shown in Code-2.40 below. The bold-fonted comments are added to aid your understanding - you
will not see them in the actual code. The new code fragments that need to be added are highlighted
in bold and blue-colored font. The new code is to add another menu bar called "Life" with its own
menu items.

/*
* Copyright 2006 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy of
Page 35 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
* the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*/
package com.google.gwt.sample.kitchensink.client;

import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.MenuBar;
import com.google.gwt.user.client.ui.MenuItem;

/**
* Demonstrates {@link com.google.gwt.user.client.ui.MenuBar} and
* {@link com.google.gwt.user.client.ui.MenuItem}.
*/
public class Menus extends Sink implements Command {

public static SinkInfo init() {
return new SinkInfo("Menus",
"The GWT <code>MenuBar</code> class makes it easy to build menus, "
+ "including cascading sub-menus.") {
public Sink createInstance() {
return new Menus();
}
};
}

// Create empty master MenuBar object
private MenuBar menu = new MenuBar();

public Menus() {

// Create a sub-sub-menu bar and add items to the sub-sub-menu bar
MenuBar subMenu = new MenuBar(true);
subMenu.addItem("<code>Code</code>", true, this);
subMenu.addItem("<strike>Strikethrough</strike>", true, this);
subMenu.addItem("<u>Underlined</u>", true, this);

// Create a new sub-menu bar and add items to it
MenuBar menu0 = new MenuBar(true);
menu0.addItem("<b>Bold</b>", true, this);
menu0.addItem("<i>Italicized</i>", true, this);
menu0.addItem("More &#187;", true, subMenu);

// Create a new sub-menu bar and add items to it
MenuBar menu1 = new MenuBar(true);
menu1.addItem("<font color='#FF0000'><b>Apple</b></font>", true, this);
menu1.addItem("<font color='#FFFF00'><b>Banana</b></font>", true, this);
menu1.addItem("<font color='#FFFFFF'><b>Coconut</b></font>", true, this);
menu1.addItem("<font color='#8B4513'><b>Donut</b></font>", true, this);

// Create a new sub-menu bar and add items to it
MenuBar menu2 = new MenuBar(true);
menu2.addItem("Bling", this);
Page 36 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Code-2.40: Add your own menu bar

2. Build and run the project.

Right click GWTKitchenSink project node and select Run.

Click "Click me to get to the GWT Page" link.

Click Menus link on the left. You should see the figure as shown in Figure-2.41 below.
menu2.addItem("Ginormous", this);
menu2.addItem("<code>w00t!</code>", true, this);

// Create a new sub-menu bar and add items to it
MenuBar menu3 = new MenuBar(true);
menu3.addItem("Life is good!", this);
menu3.addItem("Life is OK!", this);
menu3.addItem("Life sucks!", this);

// Add sub-menu bar's to the master menu bar
menu.addItem(new MenuItem("Style", menu0));
menu.addItem(new MenuItem("Fruit", menu1));
menu.addItem(new MenuItem("Term", menu2));
menu.addItem(new MenuItem("Life", menu3));

menu.setWidth("100%");

setWidget(menu);
}

public void execute() {
Window.alert("Thank you for selecting a menu item.");
}

public void onShow() {
}
}

Page 37 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-2.41: New menubar is displayed


return to the top of
exercise


(2.5) Modify Trees.java

1. Modify Trees.java under GWTKitchenSink->com.google.gwt.sample.kitchensink.client as
shown in Code-2.50 below. The bold-fonted comments are added to aid your understanding - you
will not see them in the actual code. The new code fragments that need to be added are highlighted
in bold and blue-colored font.

private static Proto[] fProto = new Proto[]{
new Proto("Beethoven", new Proto[]{
new Proto("Concertos", new Proto[]{
new Proto("No. 1 - C"), new Proto("No. 2 - B-Flat Major"),
new Proto("No. 3 - C Minor"), new Proto("No. 4 - G Major"),
Page 38 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Code-2.50: Modified Trees.java

2. Build and run the project.

Right click GWTKitchenSink project node and select Run.

Click "Click me to get to the GWT Page" link.

Click Trees link on the left. You should see the figure as shown in Figure-2.51 below.
new Proto("No. 5 - E-Flat Major"),}),
new Proto("Quartets", new Proto[]{
new Proto("Six String Quartets"), new Proto("Three String Quartets"),
new Proto("Grosse Fugue for String Quartets"),}),
new Proto("Sonatas", new Proto[]{
new Proto("Sonata in A Minor"), new Proto("Sonata in F Major"),}),
new Proto("Symphonies", new Proto[]{
new Proto("No. 1 - C Major"), new Proto("No. 2 - D Major"),
new Proto("No. 3 - E-Flat Major"), new Proto("No. 4 - B-Flat Major"),
new Proto("No. 5 - C Minor"), new Proto("No. 6 - F Major"),
new Proto("No. 7 - A Major"), new Proto("No. 8 - F Major"),
new Proto("No. 9 - D Minor"),}),}),
new Proto("Sang Shin", new Proto[]{
new Proto("Rock and Roll", new Proto[]{
new Proto("Love me tender"), new Proto("Let it Be"),
new Proto("Hey Jude"),}),
new Proto("Country music", new Proto[]{
new Proto("Lost Highway"), new Proto("Six Days on the Road"),
new Proto("Wide Open Road"),}),
new Proto("Tango", new Proto[]{
new Proto("Jealousy"), new Proto("Tango of Roses"),}),
new Proto("Hip Hop", new Proto[]{
new Proto("No. 1 - C Major"), new Proto("No. 2 - D Major"),
new Proto("No. 9 - D Minor"),}),}),
new Proto("Brahms", new Proto[]{
new Proto("Concertos", new Proto[]{
new Proto("Violin Concerto"), new Proto("Double Concerto - A Minor"),
new Proto("Piano Concerto No. 1 - D Minor"),
new Proto("Piano Concerto No. 2 - B-Flat Major"),}),
new Proto("Quartets", new Proto[]{
new Proto("Piano Quartet No. 1 - G Minor"),
new Proto("Piano Quartet No. 2 - A Major"),
new Proto("Piano Quartet No. 3 - C Minor"),
new Proto("String Quartet No. 3 - B-Flat Minor"),}),
new Proto("Sonatas", new Proto[]{
new Proto("Two Sonatas for Clarinet - F Minor"),
new Proto("Two Sonatas for Clarinet - E-Flat Major"),}),
new Proto("Symphonies", new Proto[]{
new Proto("No. 1 - C Minor"), new Proto("No. 2 - D Minor"),
new Proto("No. 3 - F Major"), new Proto("No. 4 - E Minor"),}),}),
new Proto("Mozart", new Proto[]{new Proto("Concertos", new Proto[]{
new Proto("Piano Concerto No. 12"), new Proto("Piano Concerto No. 17"),
new Proto("Clarinet Concerto"), new Proto("Violin Concerto No. 5"),
new Proto("Violin Concerto No. 4"),}),}),};

Page 39 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-2.51: Newly added Tree nodes

return to the top of
exercise

(2.6) Change the CSS style

In this step, you are going to learn how to create and use CSS style.

0. Open KitchenSink.css file under GWTKitchenSink->Source Packages-
>com.google.gwt.sample.kitchensink.public directory.

Page 40 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/

1. Create a new style .ks-List .ks-SinkItem-selected-myown in the KitchenSink.css file as
shown in Code-2.60 below. You might want to add it after .ks-List .ks-SinkItem-selected which
starts from line number around 203.

.ks-List .ks-SinkItem-selected {
background-color: #C3D9FF;
Page 41 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Code-2.60: Modify the attributes of the .ks-List .ks-SinkItem-selected

2. Modify setSinkSelection method (starting from line number 59) of the SinkList.java under
GWTKitchenSink->Source Packages->com.google.gwt.sample.kitchensink.client to use the
newly created style as shown in Code-2.61 below. The code fragments that need to changed are
highlighted in bold and blue-colored font.

Code-2.61: Use new style

3. Build and run the project.

Right click GWTKitchenSink project node and select Run.

Click "Click me to get to the GWT Page" link.

Observe that the selection on the left - Buttons is selected in the example below - is now
bold and italisized font. The background color is also set differently. (Figure-2.62 below)
}

/* -------------- This is my own ------ */
.ks-List .ks-SinkItem-selected-myown {
background-color: #EEFFEE;
font-weight: bold;
font-style: italic;
}
public void setSinkSelection(String name) {
if (selectedSink != -1)
list.getWidget(selectedSink).removeStyleName("ks-SinkItem-selected-myown");

for (int i = 0; i < sinks.size(); ++i) {
SinkInfo info = (SinkInfo) sinks.get(i);
if (info.getName().equals(name)) {
selectedSink = i;
list.getWidget(selectedSink).addStyleName("ks-SinkItem-selected-myown");
return;
}
}
}
Page 42 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-2.62: Different style is used

return to the top of
exercise

Summary

In this exercise, you have built two GWT sample applications - "Hello" and "Kitchen Sink" - using
NetBeans IDE. You have learned how to use various widgets that are provided as part of GWT
package. You also learned how to set a style to a widget.

Return to the
top


Exercise 3: Create custom widgets

In this exercise, you are going to create a simple custom widget using Composite class first. A
Composite widget is a type of widget that can wrap another widget, hiding the wrapped widget's
methods. When added to a panel, a composite behaves exactly as if the widget it wraps had been
added. The composite is useful for creating a single widget out of an aggregate of multiple other
widgets contained in a single panel. You will also create another custom widget by extending the
Page 43 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
first custom widget.
1.Create a new GWT project
2.Create a custom widget called OptionalTextBox
3.Build and run the application

(3.1) Create a new GWT project

0. Start NetBeans IDE if you have not done so yet.
1. Select File->New Project (Ctrl+Shift+N). The New Project dialog box appears.
2. Under Choose Project pane, select Web under Categories and Web Application under
Projects. Click Next. The New Project dialog box appears.

GW
3. In the Project Name field, type in GWTCompositeExample.
4. Click Next. (Figure-3.10 below)

Page 44 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-3.10: Create a new project called GWTComposteExample

5. Observe that Frameworks pane appears.
6. Select Google Web Toolkit.
7. For GWT Module field, type in my.company.Main. (Or you can just use the default value.)
8. Click Finish.

Page 45 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/

9. Observe that GWTCompositeExample project node appears.

return to the top of
exercise


(3.2) Create a custom widget called "OptionalTextBox"

This example is based on the code in the JavaDoc of Composite class in Google Web Toolkit
website - please read it before you proceed with this step.

1. Replace IDE generated MainEntryPoint.java under GWTCompositeExample->Source
Packages->my.company.client with the code shown in Code-3.20 below.

This code creates a custom widget called OptionalTextBox extending Composite class. The
OptionalTextBox widget lets to you type something in the text field when you enabled it. When it
is not enabled, it will disable the typing. You can copy and paste the code from Code-3.20 below.

package my.company.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.Composite;
Page 46 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;

/**
*
* @author sang
*/
public class MainEntryPoint implements EntryPoint {

/** Creates a new instance of MainEntryPoint */
public MainEntryPoint() {
}

/**
* A composite of a TextBox and a CheckBox that optionally enables it.
*/
public static class OptionalTextBox extends Composite implements
ClickListener {

private TextBox textBox = new TextBox();
private CheckBox checkBox = new CheckBox();

/**
* Constructs an OptionalTextBox with the given caption on the check.
*
* @param caption the caption to be displayed with the check box
*/
public OptionalTextBox(String caption) {
// Place the check above the text box using a vertical panel.
VerticalPanel panel = new VerticalPanel();
panel.add(checkBox);
panel.add(textBox);

// Set the check box's caption, and check it by default.
checkBox.setText(caption);
checkBox.setChecked(true);
checkBox.addClickListener(this);

// All composites must call initWidget() in their constructors.
initWidget(panel);

// Give the overall composite a style name.
setStyleName("example-OptionalCheckBox");
}

public void onClick(Widget sender) {
if (sender == checkBox) {
// When the check box is clicked, update the text box's enabled state.
textBox.setEnabled(checkBox.isChecked());
}
}

/**
* Sets the caption associated with the check box.
*
* @param caption the check box's caption
*/
public void setCaption(String caption) {
Page 47 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Code-3.20: Modified MainEntryPoint.java

return to the top of
exercise


(3.3) Build and run the application

1. Right click GWTCompositeExample project node and select Run.
2. Click GWT page.
3. Since the Check this to enable me checkbox is checked, you can type in the text field. Type
some string as shown in Figure-3.30 below.

// Note how we use the use composition of the contained widgets to provide
// only the methods that we want to.
checkBox.setText(caption);
}

/**
* Gets the caption associated with the check box.
*
* @return the check box's caption
*/
public String getCaption() {
return checkBox.getText();
}
}

public void onModuleLoad() {
// Create an optional text box and add it to the root panel.
OptionalTextBox otb = new OptionalTextBox("Check this to enable me");
RootPanel.get().add(otb);
}

}
Page 48 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-3.30: OptionalTextBox widget in action

4. Now uncheck the Check this to enable me checkbox. Now you should notice that the
characters you previously typed in are grayed out and you cannot type in any characters. (Figure-
3.31 below)

Page 49 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-3.31: OptionalTextBox widget in action

return to the top of
exercise



Summary

In this exercise, you have created and used two custom widgets. You have created the first custom
widget by extending Composite class. You have created the second custom widget by extending the
first widget.


return to the
top


Exercise 4: Invoke remote service via RPC
Page 50 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/

In this exercise, you are also going to build an application that uses RPC for communicating with the
server in asynchronous fashion. There are both server and client code. Before you do this exercise,
it is recommended - but not required - you read through description of Remote Procedure Call
feature of GWT.
1.Create a new NetBeans project
2.Create a sample RPC code using NetBeans GWT plug-in's wizard
3.Look under the hoold of the codes that are generated
4.Look web.xml file that is modified
5.Modify client code, ManinEntryPoint.java, to invoke remote service
6.Build and run the application
7.Debug server side code
8.Debug client side code
(4.1) Create a new GWT NetBeans project

1. Create GWTHelloRPC project.

Select File->New Project (Ctrl+Shift+N).

Observe that the New Project dialog box appears.

Under Choose Project pane, select Web under Categories and Web Application under
Projects.

Click Next.

Observe the Name and Location pane appears.

For the Project Name field, type in whatever project name you want. We will use the default
GWTHelloRPC as project name. (Figure-4.10 below)
Page 51 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-4.10: Create GWTHelloRPC project

2. Choose Google Web Toolkit as a Framework.

Choose Google Web Toolkit under Frameworks section.

Make sure the GWT Installation Folder points to the directory where you installed GWT.

For GWT Module field, type in my.company.Main. (Figure-4.11 below)
Page 52 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-4.11: Select Google Web Toolkit as a framework

return to the top of exercise


(4.2) Create a sample RPC code

In this step, you are going to create a RPC project using NetBeans GWT plug-in's RPC wizard.

1. Right click GWTHelloRPC projecyt node and select New->File/Folder. (Figure-4.21 below)

Page 53 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-4.21: Create File/Folder

2. Choose Google Web Toolkit under Categories and GWT RPC Service under File Types.
(Figure-4.22 below)

Page 54 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-4.22: Create GWT RPC Service

3. For the Service Name field, just leave the default value - GWTService - or type in whatever
Service name of your choice. In this example, we are going to use the default name.
4. Check Create Usage Example Class check box. The IDE will generate example RPC code.
5. Click Finish. (Figure-4.23 below)

Page 55 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-4.23: Check Create Usage Example Class.

return to the top of exercise


(4.3) Look under the hood of the codes that were generated

The wizard generates the following source files. In this step, you will study these source files.

Under my.company.client package

GWTService.java - this is Service interface

GWTServiceAsync.java - this is asynchronous Service interface

GWTServiceUsageExample.java - this is example code that invokes a method of the
service

Under my.company.server package

GWTServiceImpl - this is the implementation of the Service interface
The wizard also modifies web.xml file.

1. Open GWTService.java and study the code. Bold-fonted comments are added to aid your
understanding. These comments are not present in the actual code that are generated by the IDE.
(Code-4.31 below)

package my.company.client;
import com.google.gwt.user.client.rpc.RemoteService;

Page 56 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Code-4.31: GWTService.java

2. Open GWTServiceAsync.java and study the code. Bold-fonted comments are added to aid your
understanding. (Code-4.32 below)

Code-4.32: GWTServiceAsync.java

3. Open GWTServiceImpl.java and study the code. Bold-fonted comments are added to aid your
understanding. (Code-4.33 below)

Code-4.33: GWTServiceImpl.java

4. Open GWTServiceUsageExample.java and study the code by paying special attention to bold-
fonted comments. (Code-4.34 below)

// Service interface, which has a single method called myMethod.
public interface GWTService extends RemoteService{
public String myMethod(String s);
}
package my.company.client;
import com.google.gwt.user.client.rpc.AsyncCallback;

// Asynchronous Service interface. Note that a AsynchCallBack
// object needs to be passed as a parameter.
public interface GWTServiceAsync {
public void myMethod(String s, AsyncCallback callback);
}
package my.company.server;
import com.google.gwt.user.server.rpc.RemoteServiceServlet;
import my.company.client.GWTService;

// Service implementation, which provides the implementation of
// GWTService service interface.
public class GWTServiceImpl extends RemoteServiceServlet implements
GWTService {

public String myMethod(String s) {
// Do something interesting with 's' here on the server.
return "Server says: " + s;
}
}
package my.company.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.rpc.ServiceDefTarget;
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.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;

public class GWTServiceUsageExample extends VerticalPanel {
private Label lblServerReply = new Label();
private TextBox txtUserInput = new TextBox();
private Button btnSend = new Button("Send to server");

Page 57 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Code-4.34: GWTServiceUsageExample.java

return to the top of exercise



(4.4) Look under the hood of the web.xml file

1. Open web.xml under GWTHelloRPC->Configuration Files and study the changes that has
been made by the IDE by paying special attention to the bold-fonted part. (Code-4.40 below)

public GWTServiceUsageExample() {
add(new Label("Input your text: "));
add(txtUserInput);
add(btnSend);
add(lblServerReply);

// Create an asynchronous callback to handle the result.
// The AynchCallBack object has to provide implementation
// of onSuccess() and onFailure() metods.
final AsyncCallback callback = new AsyncCallback() {
public void onSuccess(Object result) {
lblServerReply.setText((String)result);
}

public void onFailure(Throwable caught) {
lblServerReply.setText("Communication failed");
}
};

// Listen for the button clicks. When "Send to server"
// button is pressed, the RPC operation occurs.
btnSend.addClickListener(new ClickListener(){
public void onClick(Widget w) {
// Make remote call. Control flow will continue immediately and later
// 'callback' will be invoked when the RPC completes.
getService().myMethod(txtUserInput.getText(), callback);
}
});
}

public static GWTServiceAsync getService(){
// Create the client proxy. Note that although you are creating the
// service interface proper, you cast the result to the asynchronous
// version of
// the interface. The cast is always safe because the generated proxy
// implements the asynchronous interface automatically.
GWTServiceAsync service = (GWTServiceAsync) GWT.create(GWTService.class);
// Specify the URL at which our service implementation is running.
// Note that the target URL must reside on the same domain and port from
// which the host page was served.
//
ServiceDefTarget endpoint = (ServiceDefTarget) service;
String moduleRelativeURL = GWT.getModuleBaseURL() + "gwtservice";
endpoint.setServiceEntryPoint(moduleRelativeURL);
return service;
}
}
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
Page 58 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Code-4.40: Modified web.xml

return to the top of exercise



(4.5) Modify MainEntryPoint.java

Now in this step, you are going to modify MainEntryPoint.java so that you can test the RPC
operation.

1. Modify MainEntryPoint.java under GWTHelloRPC->Source Packages->my.company.client
as shown in Code-4.51 below. The modification is to use and display GWTServiceUsageExample
object in the RootPanel so that you can test the code.

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-
app_2_4.xsd">
<servlet>
<servlet-name>GWTService</servlet-name>
<servlet-class>my.company.server.GWTServiceImpl</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>GWTService</servlet-name>
<url-pattern>/my.company.Main/gwtservice</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>
index.jsp
</welcome-file>
</welcome-file-list>
</web-app>
package my.company.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;

/**
*
* @author sang
*/
public class MainEntryPoint implements EntryPoint {

/** Creates a new instance of MainEntryPoint */
public MainEntryPoint() {
}

/**
* The entry point method, called automatically by loading a module
* that declares an implementing class as an entry-point
*/
Page 59 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Code-4.51: Modified MainEntryPoint.java

return to the top of exercise



(4.6) Build and run the application

1. Build and run the project.

Right click GWTHelloRPC project node and select Run.

Click GWT page link.

Type in whatever into the input text field. In this example. "Passion!" was typed in.

Click Send to server button. (Figure-4.60 below) This will send the typed string to the
server using RPC.
public void onModuleLoad() {
final Label label = new Label("Hello, GWT!!!");
final Button button = new Button("Click me!");

// The GWTServiceUsageExample is a VerticalPanel object, the constructor of
// which performs RPC operation with the server.
GWTServiceUsageExample rpcCallingPanel = new GWTServiceUsageExample();

button.addClickListener(new ClickListener(){
public void onClick(Widget w) {
label.setVisible(!label.isVisible());
}
});

RootPanel.get().add(button);
RootPanel.get().add(label);

// Add the GWTServiceUsageExample to the panel
// so that you can test it.
RootPanel.get().add(rpcCallingPanel);
}

}
Page 60 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-4.60: Enter value into the input text field

Press F12 key to display the Firebug console.

Observe the data that was returned from the Server - "Server says: Passion!". (Figure-4.61
below)
Note: For information on how to install Firebug debugger, please see here. For information on how
to use Firebug debugger, please see here.

Page 61 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-4.61: Display the data that was returned from the server

return to the top of exercise



(4.7) Debugging the server side code

One of the benefits of using GWT is you can do all the debugging in both server and client side code
in Java technology. In this step, you are going to use debugging facility of the NetBeans IDE to
debug the server side code. In the next step, you are going to debug the client side code.

1. Right click GWTHelloRPC project node and select Set Main Project. (If you want to debug a
NetBeans project, you have to set it as a Main project.)

2. Make a breakpoint in the GWTServiceImpl.java as shown in Figure-4.70 below. This is to make
sure the server side logic is working as expected. In order to make a breakpoint, click on the gray
vertical bar of the line you want to make a breakpoint.
Page 62 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/

Figure-4.70: Make a breakpoint

3. Select Run from the menu-bar and select Debug Main Project to start the debugging. (Figure-
4.71 below) The application gets started in debugging mode.

Page 63 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-4.71: Debug Main Project

4. Observe that the two windows are being displayed - one is titled as Google Web Toolkit
Development Shell and the other is titled as JSP Page. At this time, the application is now being
run in hosted mode (as opposed to web mode).

Page 64 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-4.72: Google Web Toolkit Development Shell

Page 65 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-4.73: JSP page

5. Click GWT page link.
6. Type in some message - Life is good! in this example - into the text field. (Figure-4.74 below)
7. Click Send to server button.

Page 66 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-4.74: Send data to the server in debugging mode

8. You should hit the breakpoint now. The color of the breakpoint line is changed to light green. If
Debugging window is not displayed, select Window from menu bar and select Debugging->Local
variables. You should see the string that is passed as a parameter as shown in Figure-4.72 below.
In this example, the "Life is good!" is the string value that is passed to the myMethod() method.

Page 67 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-4.72: Observe the break point is hit and local variable

9. Select Run from the menu-bar and select Finish Debugging Session (or press Shift+F5).
10. Remove the breakpoint by clicking on the gray bar of the line.

return to the top of exercise



(4.8) Debug client side code

1. Make a breakpoint in the GWTServiceUsageExample.java as shown in Figure-4.80 below. The
line to make a breakpoint is lblServerReply.setText((String)result); on line number 41.
Page 68 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/

Figure-4.80: Make a breakpoint in client code

2. Select Run from the menu-bar and select Debug Main Project to start the debugging. (Figure-
4.71 below) The application gets started in debugging mode.
3. Observe that the two windows are being displayed - one is titled as Google Web Toolkit
Development Shell and the other is titled as JSP Page. At this time, the application is now being
run in hosted mode (as opposed to web mode).
4. Click GWT page link.
5. Type in some message - Life is really good! - into the text field.
7. Click Send to server button.
8. You should hit the breakpoint now. The color of the breakpoint line is changed to light green. You
Page 69 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
should see the string that is returned from the server as shown in Figure-4.81 below. In this
example, the "Server says" Life is really good!" is the string value that was returned from the server.


Figure-4.81: Server returns the value

9. Select Run from the menu-bar and select Finish Debugging Session (or press Shift+F5).
10. Remove the breakpoint by clicking on the gray bar of the line.

return to the top of exercise



Page 70 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Summary

In this exercise, you have exercised the capability of RPC of GWT.


Return to the
top



Exercise 5: Build and run "Dynamic Table" sample application
In this exercise, you are going to build and run "Dynamic Table" sample application, which comes
with Google Web Toolkit package using NetBeans iDE. This sample application uses Remote
Procedure Calls (RPC) feature of GWT. It also creates and uses two custom widgets.
1.Build and run "Dynamic Table" sample application
2.Look under the hood of the "Dynamic Table" sample application - RPC part of the
code

(5.1) Build and run "Dynamic Table" sample application
0. Start NetBeans IDE if you have not done so yet.
1. Open GWTDynaTable project.

Select File->Open Project (Ctrl+Shift+O). The Open Project dialog box appears.

Browse down to <LAB_UNZIPPED_DIRECTORY>/ajaxgwtintro/samples/<OS> directory.

Select GWTDynaTable.

Click Open Project Folder. (Figure-2.x below) The GWTDynaTable project node appears under
Projects tab window
2. Resolve references (as described above) if you experience reference problems.
3. Run GWTDynaTable project..

Right click GWTDynaTable project node and select Run.

Click Click me to go to GWT page link.

Observe the star page of the application. (Figure-5.10 below)
Page 71 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-5.10: Result of running "Dynamic Table" sample application

Uncheck Sunday, Monday, and Tuesday check boxes on the right.

Observe that the contents are redisplayed accordingly.
Page 72 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Figure-5.11: Redisplayed schedule

return to the top of exercise


(5.2) Look under the hood of the "Dynamic Table" sample application - RPC part of the code

In this step, you will look into RPC part of the application. First let's look at the service interface files
- SchoolCalendarService.java and SchoolCalendarServicAsync.java.

1. Double-click SchoolCalendarService.java under GWTDynaTable->Source Packages-
>com.google.gwt.sample.dynatable.client to open it in the source editor. Comments, which are
highlighted with bold font, are added to aid your understanding. (Code-5.20 below)

/*
* Copyright 2006 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy of
* the License at
*
Page 73 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
Code-5.20: SchoolCalendarService.java

2. Double-click SchoolCalendarServiceAsync.java under GWTDynaTable->Source Packages-
>com.google.gwt.sample.dynatable.client to open it in the source editor. Comments, which are
highlighted with bold font, are added to aid your understanding. (Code-5.21 below)

Code-5.21: SchoolCalendarServiceAsync.java

Now let's take a look at the server implementation class.

3. Double-click SchoolCalendarServiceImpl.java under GWTDynaTable->Source Packages-
>com.google.gwt.sample.dynatable.server to open it in the source editor. Comments, which
are highlighted with bold font, are added to aid your understanding. (Code-5.22 below)

* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*/
package com.google.gwt.sample.dynatable.client;

import com.google.gwt.user.client.rpc.RemoteService;

// Service interface. It has one method called getPeople.
public interface SchoolCalendarService extends RemoteService {

Person[] getPeople(int startIndex, int maxCount);

}
/*
* Copyright 2006 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy of
* the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*/
package com.google.gwt.sample.dynatable.client;

import com.google.gwt.user.client.rpc.AsyncCallback;

// Asynchronous service interface. It has AsyncCallback object as a parameter.
public interface SchoolCalendarServiceAsync {

void getPeople(int startIndex, int maxCount, AsyncCallback callback);

}
/*
Page 74 of 103LAB-4275: Using Goolgle Web Toolkit for Building AJAX Applications
3/22/2008htt
p
://www.
j
ava
p
assion.com/handsonlabs/a
j
ax
g
wtintro
/
* Copyright 2006 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy of
* the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*/
package com.google.gwt.sample.dynatable.server;

import com.google.gwt.sample.dynatable.client.Person;
import com.google.gwt.sample.dynatable.client.Professor;
import com.google.gwt.sample.dynatable.client.Schedule;
import com.google.gwt.sample.dynatable.client.SchoolCalendarService;
import com.google.gwt.sample.dynatable.client.Student;
import com.google.gwt.sample.dynatable.client.TimeSlot;
import com.google.gwt.user.server.rpc.RemoteServiceServlet;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.Random;

// This is service implementation on the server side. The service implementation
// has to extends "RemoteServiceServlet" class and implements service interface.
public class SchoolCalendarServiceImpl extends RemoteServiceServlet implements
SchoolCalendarService {

private static final String[] FIRST_NAMES = new String[]{
"Inman", "Sally", "Omar", "Teddy", "Jimmy", "Cathy", "Barney", "Fred",
"Eddie", "Carlos"};

private static final String[] LAST_NAMES = new String[]{
"Smith", "Jones", "Epps", "Gibbs", "Webber", "Blum", "Mendez", "Crutcher",
"Needler", "Wilson", "Chase", "Edelstein"};

private static final String[] SUBJECTS = new String[]{
"Chemistry", "Phrenology", "Geometry", "Underwater Basket Weaving",
"Basketball", "Computer Science", "Statistics", "Materials Engineering",
"English Literature", "Geology"};

private static final Person[] NO_PEOPLE = new Person[0];

public SchoolCalendarServiceImpl() {
generateRandomPeople();
}

// This method implements a method defined in the service interface.
// This method returns an array of Person objects.
public Person[] getPeople(int startIndex, int maxCount) {