GWT Basics
This document goes with the GWTProject sample project.
1. Project Structure
The src folder is where all source code is located. In the project home package there are three
important folders and one configuration file. The three packages are client, server, and public.
The client folder is where all client source code is located. In other words, all Java code that needs
to be translated to Javascript is located in this package and all code is intended to be executed on
the browser.
The server package is where all server side code is located. i.e., all Java code that is intended to be
executed on the server.
The public package is where the homepage, css style sheet and any other static resources of the
project are located.
The configuration file in src is GWTProject.gwt.xml. It is the configuration file for the project. For
example, GWT’s RPC needs to modify this file to match RPC request from client side to RPC
service classes on the server side.
In the client package, you can find a Java class named after the project name. For example, the
sample GWTProject has a class named GWTProject.java. This class contains the entry point to the
Web application, which is analogous to the main() function in C/C++ and Java. The entry point is
an operation, public void onModuleLoad(), in which you set up the GUI of the application and
the system context.
2. GUI Design
At the bottom level of GUI, you want to use panels. Each panel can hold widgets and other panels.
There are two different commonly-used types of panels – HorizontalPanel and VerticalPanel.
HorizontalPanel aligns its elements (widgets and panels) horizontally and VerticalPanel does
vertically.
GWTProject uses two VerticalPanel’s (displayPanel and mainPanel) and one HorizontalPanel
(commandPanel). The displayPanel is used to display search result as a FlexTable and a Button
aligned vertically centered. The commandPanel displays two TextBox’es for the user to enter
student id and course id, and two Button’s for the user to submit either student id or course id.
All the four elements in commandPanel are arranged next to each horizontally. Then the
displayPanel and commandPanel are inserted in mainPanel one below the other vertically.
RootPanel is a static variable referencing the window of the web browser. To display our
mainPanel (and its sub-panels), we need to add mainPanel to the panel embedded in RootPanel:
RootPanel.get().add(mainPanel);
3. Event Handling in GWT
GWT’s GUI employs the event-driven model, as expected. Each button, for example, generates an
event when it is clicked. To handle the event, an event listener can be added to the event handler
queue of the button. Thus, when the event occurs, all registered event handlers are executed.
GWT’s Button generates Click events and a Button’s Click handler must implement GWT’s
ClickListener interface which specifies onClick(Widget sender). The parameter, sender, may be
used to detect which button was clicked if the handler was registered with more than one button.
GWT has many different types of widgets which can generate all different types of events.
For GWTProject, all events are generated from GWT’s Button’s. Following code shows how
Submit Student ID button is programmed.
Button submitSIDButton = new Button(“Submit Student ID”);
submitButton.setWidth(“140px”);
// set the width in pixels
submitButton.addClickListener(new ClickListener() { // add a handler
public void onClick(Widget sender) {
getStudentInfo();
}
In the above example, the handler class is anonymous. For simple handlers anonymous classes are
easy to program and they do not add trivial class names to the name space. However, in many
applications, you may want to design complex handlers and/or use the same handler for multiple
buttons, then you may want to use a regular named class for handlers. Here is a different
implementation of the Submit Student Id button:
class MyButtonListener implements ClickListener {
public void onClick(Widget sender) {
if (sender.getTitle().equals(“SubmitSID”) {
getStudentInfo();
}
else if (sender.getTitle().equals(“someOtherButton”) {
// do something else
}
}
MyButtonListener myButtonListener = new MyButtonListener();
Button submitSIDButton = new Button(“Submit Student ID”);
submitButton.setWidth(“140px”);
submitButton.setTitle(“SubmitSID”);
submitButton.addClickListener(myButtonListener)
Button someButton = new Button(“Submit Something”);
someButton.setWidth(“140px”);
someButton.setTitle(“someOtherButton”);
someButton.addClickListener(myButtonListener)
The above example uses the same listener object to handle Click events from two separate buttons
(submitSIDButton and someButton) and the onClick() operation uses the Title set for each button
to determine from which button the Click event was generated.
4. Updating Displays
Often it is necessary to change the contents of a panel so different data and/or widgets may be
displayed. In GWTProject, the displayPanel needs to display different data based on which button
the user clicked and if a valid result was to be displayed or not. The basic operation of a panel (of
both HorizontalPanel and VeriticalPanel) is:
aPanel.clear();
// remove all contents
aPanel.add(...);
// add all widgets as needed
aPanel.add(...);
aPanel.setHeight(...); // set display dimension
aPanel.setWidth(...);
For GWTProject, the GetCourseCallback class uses the following code to display returned course
info:
public void onSuccess(Course s) {
FlexTable courseList = makeCourseList(s);
Button close = new Button("Close Table");
close.addClickListener(aListener);
displayPanel.clear();
displayPanel.add(courseList);
displayPanel.add(close);
displayPanel.setHeight("300px");
}