High Quality
Open the downloaded document, and select print from the file menu (PDF reader required).
Google Web Toolkit Tutorial - douglasjose.comhttp://douglasjose.com/tech/tutorials/gwt.htm1 of 53/23/2008 14:17
Google Web Toolkit Tutorial
July, 20Learn to write AJAX applications from Java classes, using the new development paradigm introduced by this new Google framework.Recently, the 1.20 version of Google Web Toolkit (GWT) was released. This framework introduces a new AJAX application development paradigm. Is goal is tohide from programmer the JavaScript code implementation, considering this job is repetitive, error-prone and full of tedious tasks, like browser incompatibilityhandling.GWT abstracts JavaScript using a Java class library, where a visual AJAX components (the
widgets
) library is available. These components are well known byGMail and Google Maps users.This tutorial presents how GWT changes the application development paradigm, and brings an implementation sample using the framework.
Java classes advantages
The main feature presented by GWT is the Java class usage to represent AJAX visual components. These classes are converted to JavaScript code by acompiler, distributed inside GWT package.The advantage of using Java code is that it enables the developer to use its preferred Java IDE, once GWT is environment-independent. And when using a JavIDE, you benefit from Java language features, like compiler type checking and editor code completion.
Framework architecture
A model of GWT architecture is presented below.The architecture is split in two big layers. The first one is the libraries layer. This layer has a visual components layer, which represents user interfacecomponents, and a Java emulation library, that contains the implementation of some classes from
java.lang
and
java.util
packages. These two libraries composthe basic infrastructure necessary to represent the AJAX components using Java code. The other layer contains two tools. The first is the Java to JavaScriptcompiler, which is responsible by generate the JavaScript code which represents the visual components. The second tool is a local browser. This browserprevents the developer from converting is Java into JavaScript code every time he wants to do a test. The local browser is able to render the library componentswithout code conversion.
Installation
The first step to use GWT is to download the package from framework site. It's currently available to Windows and Linux. In this tutorial we're going to presentconfiguration instructions to Windows, remembering that the procedures almost the same for Linux. This tutorial was built using GTW version 1.0.20. Thepackage is distributed in a zip file, and its size is 13.9 MB.The installation is very simple: just unzip the distribution package in a local directory. In this directory will be created the GWT libraries and some projectconfiguration utilities.This tutorial will be written using Eclipse WTP. This IDE was choose because GWT brings tools that simplify the project creation step for Eclipse.
Creating a project
So let's start coding. First of all, we're going to create a project and an application. To do that, we'll use two utilities,
applicationCreator
and
projectCreator
. It'snecessary to create a directory where the project files will be placed. Add the GWT directory to the environment variable
PATH
, to make project creation easierand from project's directory, run the command
projectCreator -eclipse TutorialGWT
to create the project, and then, run the command
applicatoinCreator -eclipse TutorialGWT br.com.javamagazine.client.TutorialGWT
The basic Eclipse project structure will be created, with GWT libraries references already configured. At Eclipse, just import the created project (Menu
File>Import>Existing projects into workspace
), and the configurations will be automatically set up. The project structure should be similar to the presented belo
Google Web Toolkit Tutorial - douglasjose.comhttp://douglasjose.com/tech/tutorials/gwt.htm2 of 53/23/2008 14:17
Implementing the sample problem
In this tutorial, the sample problem that we will solve is the creation of an incremental find. The find is incremental because the filter criteria is applied as thecharacters are typed. Firefox users are familiar with this kind of search (just press Control + F to open the Firefox incremental find panel).This tutorial will use a basic text field as filter. As soon as the text field is filled, a list will show only the elements that matches the typed filter. Observe that theused components (text box, list) are common HTML form fields, and there are no web server requests in this sample (although it will probably happen whensolving real problems).Open the
TutorialGWT.html
file and change it as the code below.
1:
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
>
2:<html>3:<head>4:<title>5:Tutorial GWT6:</title>7:<style type="text/css">8:body,td,a,div,.p
{font-family:
arial,sans-serif
}
9:div,td
{color:
#000000
}
10:a
:
link,.w,.w a
:
link
{color:
#0000cc
}
11:a
:
visited
{color:
#551a8b
}
12:a
:
active
{color:
#ff0000
}
13:.list
{width:
100%;
}
14:</style>15: <meta name
=
'gwt:module'content
=
16: 'br.com.javamagazine.TutorialGWT'>
17:</head>18:<body>19:<script language="javascript" src="gwt.js" type=20:"text/javascript">21:</script>22:<!-- OPTIONAL: include this if you want history support -->23:<iframe id
=
"__gwt_historyFrame"style
=
24: "width:0;height:0;border:0"name
=
25: "__gwt_historyFrame"></iframe>
26:<h1>27: Tutorial GWT28:</h1>29:<div id
=
"input"align
=
"center"></div>30: <table align
=
"center">31:<tr>32:<td>33:<table align
=
"center"width
=
"400">34:<tr>35: <td id
=
"label"></td>36:<td id
=
"text"width
=
"100%"></td>37:</tr>38:<tr>39:<td id
=
"list"colspan
=
"2"></td>40: </tr>41:<tr>42:<td id
=
"removeContact"align
=
"center"colspan
=
"2">43:</td>44:</tr>45: </table>46:</td>47:<td>48:<table align
=
"center">49:<tr>50: <td>51: First name :52:</td>53:<td id
=
"firstName"></td>54:</tr>55: <tr>56:<td>
Google Web Toolkit Tutorial - douglasjose.comhttp://douglasjose.com/tech/tutorials/gwt.htm3 of 53/23/2008 14:17
57: Last name :58:</td>59:<td id
=
"lastName"></td>60: </tr>61:<tr>62:<td>63: E-mail:64:</td>65: <td id
=
"email"></td>66:</tr>67:<tr>68:<td colspan
=
"2">69:<div id
=
"insertContact"align
=
"center"></div>70: </td>71:</tr>72:</table>73:</td>74:</tr>75: </table>76:</body>77:</html>78:
You will notice that we made a few changes from the original file generated by GWT. Eight IDs are defined; they represent the places where the components wilbe shown. The CSS style
.list
is defined to place the list properly.Next step is to edit TutorialGWT class that will describe the incremental find behavior. In this sample, a simple contacts catalog was created, where is possible tstore a contact first name, last name and e-mail address, and also remove any previously created contact. The incremental find is useful to filter all previouslyadded contacts. In this class are defined some auxiliary methods to fill the list, to search the list using a filter and to check if a String is contained in other String(
contains
method).This method deserves a special explanation. Although Java API already defines the method
contains
for
java.lang.String
class, we need to redefine it, becauseGWT compiler is not able to translate this method to JavaScript code.The final code for
TutorialGWT
class can be found here
1:
package
br.com.javamagazine.client;2:3:
import
java.util.*;4:
import
com.google.gwt.core.client.EntryPoint;5:
import
com.google.gwt.user.client.ui.*;6:7:/**8:* Entry point classes define<code>onModuleLoad()</code>.
9:*10:*@authorDouglas
11:* @created October 15, 200612:*/13:
public
class
TutorialGWT
implements
EntryPoint
{
14:15:
private
List items
=
new
ArrayList();16://Contém os contatos cadastrados17:18:19:/**20:* Description of the Method21:*/22:
public
void
onModuleLoad()
{
23:24:
final
Label label
=
new
Label("Filtro:");
25:
final
ListBox list
=
new
ListBox();26:
final
TextBox filter
=
new
TextBox();27:
final
TextBox firstName
=
new
TextBox();28:
final
TextBox lastName
=
new
TextBox();29:
final
TextBox email
=
new
TextBox();30:
final
Button insertContact
=
new
Button("Adicionar");
31:
final
Button deleteContact
=
new
Button("Remover");
32:33:// Listener que trata cada caractere digitado no campo de filtro34: filter.addKeyboardListener(35:
new
KeyboardListenerAdapter()
{
36:
public
void
onKeyUp(Widget sender,
char
keyCode,
int
modifiers)
{
37:filterList(list, filter.getText());
38:
}
39:
}
);40:41:// Listener que trata o clique no botão 'Adicionar'42: insertContact.addClickListener(43:
new
ClickListener()
{
44:
public
void
onClick(Widget sender)
{
45: insertContact(list, firstName.getText(), lastName.getText(), email.getText()
46: filter.getText());47: firstName.setText("");
48: lastName.setText("");
49: email.setText("");
50:
}
Add a Comment
venomouslid16left a comment
deleted_fbuser_1301915674left a comment
Kishore Java replied: