Tài liệu GWT in Action doc

www.it-ebooks.info
GWT in Action
www.it-ebooks.info

www.it-ebooks.info
GWT in Action
EASY AJAX WITH THE GOOGLE WEB TOOLKIT
ROBERT HANSON
ADAM TACY
MANNING
Greenwich
(74° w. long.)
www.it-ebooks.info
For online information and ordering of this and other Manning books, please visit
www.manning.com. The publisher offers discounts on this book when ordered in quantity.
For more information, please contact:
Special Sales Department
Manning Publications Co.
Sound View Court 3B fax: (609) 877-8256
Greenwich, CT 06830 email:
©2007 by Manning Publications Co. All rights reserved.
No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in
any form or by means electronic, mechanical, photocopying, or otherwise, without prior written
permission of the publisher.
Many of the designations used by manufacturers and sellers to distinguish their products are
claimed as trademarks. Where those designations appear in the book, and Manning
Publications was aware of a trademark claim, the designations have been printed in initial caps
or all caps.
Recognizing the importance of preserving what has been written, it is Manning’s policy to have
the books we publish printed on acid-free paper, and we exert our best efforts to that end.
Manning Publications Co. Copyeditor: Tiffany Taylor

Sound View Court 3B Typesetters: Gordan Salinovic
Greenwich, CT 06830 Cover designer: Leslie Haimes
ISBN 1-933988-23-1
Printed in the United States of America
12345678910–MAL –13121110090807
www.it-ebooks.info
To my son, David

Thank you for letting me shorten playtime so many times,
so that Daddy could work on his book.
—RH


To my parents

Everything I have achieved is because of something you did for me.
Thank you.
—AT
www.it-ebooks.info
www.it-ebooks.info
vii
brief contents
PART 1GETTING STARTED 1
1
■
Introducing GWT 3
2
■
Creating the default application 38
3

■
Advancing to your own application 64
PART 2BUILDING USER INTERFACES 107
4
■
Working with widgets 109
5
■
Working with panels 157
6
■
Handling events 192
7
■
Creating composite widgets 246
8
■
Building JSNI components 277
9
■
Modularizing an application 317
PART 3ADVANCED TECHNIQUES 345
10
■
Communicating with GWT-RPC 347
11
■
Examining client-side RPC architecture 375
12
■

Classic Ajax and HTML forms 409
www.it-ebooks.info
viii BRIEF CONTENTS
13
■
Achieving interoperability with JSON 442
14
■
Automatically generating new code 471
15
■
Changing applications based on GWT properties 494
PART 4COMPLETING THE UNDERSTANDING 525
16
■
Testing and deploying GWT applications 527
17
■
Peeking into how GWT works 555
www.it-ebooks.info
ix
contents
preface xix
acknowledgments xxi
about this book xxiii
about the title xxx
about the cover illustration xxxi
PART 1GETTING STARTED 1
1
Introducing GWT 3

1.1 A walk through GWT 5
Explaining GWT's Java-to-JavaScript compiler 6
■
Using JSNI
to execute JavaScript from Java 8
■
Accessing the JRE emulation
library 10
■
Understanding GWT's widget and panel
library 12
■
Examining GWT’s internationalization and
configuration tools 14
■
Calling remote procedures with
GWT 16
■
Investigating GWT’s XML parser 20
■
Managing the browser history 21
■
Introducing GWT’s
JUnit integration 22
1.2 GWT vs. other solutions 23
GWT vs. Swing 25
■
GWT vs. Echo2 26
■
GWT vs.

JavaServer Faces 27
■
GWT vs. Ruby on Rails 29
www.it-ebooks.info
x CONTENTS
1.3 Building your first GWT application 30
Building and running an example application 30
Building Tic-Tac-Toe with GWT 32
1.4 Summary 37
2
Creating the default application 38
2.1 The GWT application development lifecycle 39
2.2 Stage 1: Creating a GWT application 44
Creating the project 47
■
Creating an application 50
Setting up internationalization 54
■
Implementing
internationalization 56
■
Creating unit test
cases 57
■
Importing into your IDE 59
2.3 Summary 63
3
Advancing to your own application 64
3.1 Describing the application example 65
3.2 Stage 2: Developing your application 67

Implementing internationalization 68
■
Constructing the
application 72
■
Applying styling 83
3.3 Stage 3: Testing and debugging in hosted mode 86
Preparing for hosted mode 86
■
Running the Dashboard in
hosted mode 90
■
Debugging the Dashboard in hosted mode
through Eclipse 92
3.4 Stage 4: Compiling the code 94
Compiling the code/preparing for web mode 95
Viewing the compilation results 97
3.5 Stage 5: Deploying the code 98
Deploying to a web server 98
■
Deploying to a filesystem 99
3.6 Stage 6: Running in web mode 99
3.7 Implementing application logging 100
Logging information on the client-side 100
Logging information on the server-side 103
3.8 Summary 104
www.it-ebooks.info
CONTENTS xi
PART 2BUILDING USER INTERFACES 107
4

Working with widgets 109
4.1 What is a widget? 111
Using widgets as Java objects 112
Considering widgets as DOM elements 113
4.2 The standard GWT widgets 115
Interacting with the basic widgets 118
■
Displaying text on the
application 131
■
Grabbing the user’s interaction using focus
widgets 133
■
Getting user input through text input 139
4.3 Creating new widgets 141
Creating new widgets by manipulating the DOM 142
Creating new widgets by extending existing widgets 146
4.4 Developing the Dashboard’s ToggleMenuItem
widget 150
Building the TwoComponentMenuItem 151
Building the ToggleMenuItem 154
4.5 Summary 155
5
Working with panels 157
5.1 What is a panel? 158
Using panels as Java Objects 159
Considering panels as DOM elements 160
5.2 The standard GWT panels 162
Interacting with simple panels 164
■

Considering more
complex panels 170
■
Considering HTML table-based
panels 178
■
Considering composite panels 181
Splitting panels 182
5.3 Creating new panels 182
Creating a new panel from scratch 183
Creating a new panel by extending an existing panel 186
5.4 Creating the Dashboard panel 187
5.5 Summary 191
www.it-ebooks.info
xii CONTENTS
6
Handling events 192
6.1 Exploring events 193
Identifying event model browser differences 195
Understanding the GWT event model 196
6.2 Listening to events 200
Sinking events 200
■
Managing sunk events with the
onBrowserEvent() method 203
■
Linking sunk events
to the onBrowserEvent() method 207
■
Previewing

events 208
■
Handling events by extending the listener
classes 211
■
Moving events further into your GWT
code 212
■
Preventing default browser event handling 216
6.3 Handling standard browser events 216
Reacting to change 218
■
Clicking around 221
■
Gaining/
Losing focus 222
■
Capturing keyboard inputs 223
Loading images 223
■
Managing mouse
inputs 224
■
Scrolling 224
■
Window resize
events 226
■
Window close events 227
6.4 Handling other event types 231

Handling forms 231
■
Reacting to closing pop-ups 231
■
Tab
events 232
■
Tabling events 234
■
Tree events 235
6.5 Implementing drag-and-drop 236
Implementing the drag part 236
Implementing the drop part 241
6.6 Summary 244
7
Creating composite widgets 246
7.1 What is a composite widget? 247
7.2 Composite widget development steps 248
7.3 Building the editable label 250
Step 1: Identifying the components 251
■
Step 2: Choosing the
panel layout and structure 253
■
Step 3: Implementing the right
GWT Java interfaces 255
■
Step 4: Building the composite
widget 258
■

Step 5: Styling the composite widget 267
7.4 Creating a composite widget from other
composite widgets 269
Creating a slider 270
■
Constructing the ColourPicker composite 273
www.it-ebooks.info
CONTENTS xiii
7.5 Creating the Dashboard composite 274
7.6 Summary 276
8
Building JSNI components 277
8.1 Introducing JavaScript Native Interface (JSNI) 279
Understanding JSNI 281
8.2 Communicating using JSNI 290
Chatting to the browser via GWT Java 291
■
Chatting to the
browser via JavaScript 292
■
Talking to a GWT application via a
JavaScript API 294
■
Talking between GWT applications 296
8.3 Loading a JavaScript library 299
Using HTML to load a JavaScript library 299
Using the module XML to load a JavaScript library 299
8.4 Wrapping a simple JavaScript library 300
Accessing the loaded JavaScript library 302
Using the widget in an application 307

8.5 Wrapping a complex JavaScript library 309
Generating the classes 309
■
Keeping JavaScript objects
as Java objects 310
■
Calling user-defined code from a
library 312
■
Using a complex wrapped widget in
an application 314
8.6 Summary 315
9
Modularizing an application 317
9.1 Creating a modularization structure 318
Modularization in GWT 319
■
Including other
modules in an application 321
■
Setting source and
other resource paths 325
■
Defining an application’s
server resources 326
■
Managing an application’s
GWT properties 327
■
Replacing classes based on

property values 332
■
Registering generators in the
XML module file 333
■
Injecting resources into an
application at runtime 334
■
Setting an application's
entry point 337
■
The Dashboard’s
module XML file 337
9.2 Including third-party modules 339
www.it-ebooks.info
xiv CONTENTS
9.3 Packaging your own modules 341
9.4 Creating the Java package structure 343
9.5 Summary 344
PART 3ADVANCED TECHNIQUES 345
10
Communicating with GWT-RPC 347
10.1 Underlying RPC concepts 348
Understanding asynchronous communication 350
■
Restrictions
for communicating with remote servers 351
■
Creating the Server
Status project 353

10.2 Implementing GWT-RPC 356
Understanding serializable data objects 356
■
Defining the GWT-
RPC service 360
■
Preparing the client side of a GWT-RPC
call 366
■
Calling the remote server service 368
10.3 Project summary 370
Project overview 370
■
Server-side service implementation 371
Calling the service from the client 372
10.4 Summary 374
11
Examining client-side RPC architecture 375
11.1 Structuring the client code 376
Encapsulating the Server Status component 376
■
Encapsulating
remote calls in a façade 382
■
Callback routine using the
Command pattern 384
11.2 Examining different polling techniques 392
Understanding polling issues 392
■
Implementing a continuously

updating component 393
■
Emulating server-push by blocking
server threads 398
11.3 Writing custom field serializers 402
Creating a custom field serializer class 403
Implementing custom field serialization 404
11.4 Summary 407
www.it-ebooks.info
CONTENTS xv
12
Classic Ajax and HTML forms 409
12.1 Classic Ajax with RequestBuilder 410
Examining HTTP methods 411
■
Simple RPC with
RequestBuilder 414
■
Using RequestBuilder to load
XML data 417
12.2 Examining FormPanel basics 424
Introducing the FormPanel 425
■
Listening to FormPanel
events 428
■
Altering the FormPanel target 429
■
Using the
various form controls 432

12.3 Summary 439
13
Achieving interoperability with JSON 442
13.1 Introducing JavaScript Object Notation (JSON) 443
Understanding the JSON data format 443
Using JSONParser to parse JSON messages 445
13.2 Examining GWT’s JSON data objects 445
Introducing the JSONValue object 445
■
Examining basic JSON
types 446
■
Storing JSONValue objects in a JSONArray 448
Collecting JSONValue objects in a JSONObject 449
13.3 Creating a search component using JSON 450
Examining the Yahoo Search API 451
■
Implementing the Yahoo
search component 453
■
Sending JSON data to the server 455
Parsing and validating a JSON server response 457
13.4 Implementing a Yahoo Search proxy service 461
Using JSON with Java on the server 461
■
Using JSON with Perl
on the server 465
■
Using JSON with Ruby on the server 467
13.5 Summary 469

14
Automatically generating new code 471
14.1 Generating new types 472
14.2 Investigating GWT generators 473
Basic generator code 476
www.it-ebooks.info
xvi CONTENTS
14.3 Creating a generator for the Dashboard 477
Accessing the input class 478
■
Accessing properties of the
context 479
■
Adding logging to a generator 480
■
Generating
the new type structure 482
■
Creating the new class 484
Using the classes that have been generated 491
14.4 Summary 492
15
Changing applications based on GWT properties 494
15.1 Quick summary of properties 495
15.2 Managing browser differences 496
How GWT manages browser differences 497
■
Building the Flash
widget 498
■

Setting up the property replacement 501
15.3 Supporting internationalization in full 502
Using static-string internationalization 503
Using dynamic string internationalization 516
15.4 Altering the application for the locale 518
Implementing the default component 518
Locale-specific classes 519
15.5 Implementing user-defined properties 520
Defining user-specified properties 521
■
Defining a user-specified
property provider 521
■
Checking the provided property
value 522
■
Building the code 522
15.6 Summary 523
PART 4COMPLETING THE UNDERSTANDING 525
16
Testing and deploying GWT applications 527
16.1 Testing GWT code using JUnit 528
Overview of JUnit for GWT developers 529
■
Creating a new test
case 534
■
Testing asynchronous code 537
16.2 Deploying GWT applications 539
Organizing your project 540

■
Installing RPC servlets 548
16.3 Summary 554
www.it-ebooks.info
CONTENTS xvii
17
Peeking into how GWT works 555
17.1 Examining the compilation process and output 556
Investigating compilation 556
■
Examining the output 559
17.2 The GWT application-loading mechanism 564
Legacy applications 565
■
Standard applications 566
Bootstrapping the standard application 567
Cross-script applications 572
17.3 Compiling Java to JavaScript 573
Exploring the produced JavaScript 573
■
Reviewing
standard Java objects: the vector object 574
■
Exploring
program code as JavaScript 576
■
Understanding the
initialization code segment 578
17.4 Summary 579
index 581

www.it-ebooks.info
www.it-ebooks.info
xix
preface
In the middle of 2005, we noticed that something was different. The Web had
reinvented itself, and terms like Ajax and Web 2.0 were being created to help
define the new technologies and ideas. JavaScript tools like Scriptaculous, Proto-
type, and
DWR were entering the scene, making it much easier to use JavaScript
for interactive interfaces and making Ajax easier to employ. At the same time,
Ajax applications, such as Flickr and Google Mail, were beginning to revolutionize
the way users expected to use the Web.
We experimented with the new JavaScript libraries, but developing applications
seemed more difficult than it needed to be. We also had difficulty seeing how to
effectively manage a project using JavaScript—we were used to the ease of develop-
ment that comes with typed languages, testing, and powerful
IDEs with debugging
capabilities. Sure, you can manage a successful JavaScript project, but the need to
develop and maintain several different versions of code for differing browsers is a
headache. Also, in our experience, it isn’t easy to find enough JavaScript develop-
ers who are aware of the necessary browser issues and nuances and who are also at
a sufficient comfort level with production quality development processes to deliver
a large project (compared to the number of Java programmers).
In May 2006, a news item from the JavaOne conference announced the Goo-
gle Web Toolkit. It was described as a toolkit that let you write client-side code in
Java and compile it to JavaScript. It was like Christmas, and we hurried to down-
load and exploit these new toys.
www.it-ebooks.info
xx PREFACE
We were early adopters, quickly joining in with the rest of the GWT community

in test-driving this new tool. Each day, developers posted to the developers’ list the
source code of widgets they had created. Everyone was trying to show what they
could do and share their code with others. This led Robert to start the
GWT Wid-
get Library project on SourceForge. Before long, we were working together on
the code for Adam’s
EditableLabel
for the GWT Widget Library. We worked well
together, and we shared a huge enthusiasm for this new technology. When Man-
ning asked if we would write a book, we jumped at the chance to share everything
we had learned to date.
To paraphrase the first few paragraphs of this book, instead of taking tools to
the Ajax space, Google has taken Ajax to the tools. We can now use fully fledged
IDEs, and GWT manages all the messing around associated with browser differ-
ences. Just as important is the fact that by using Java and all the normal Java tools
(
IDEs, Ant, Maven, and so on), GWT fits into our development processes as a hand
does into a glove, plus it supports internationalization and unit testing right out of
the box.
Let’s be clear:
GWT won’t solve every problem you have when it comes to creat-
ing Ajax applications, and some elements could be improved (now that it’s open
source, it can only get better). But
GWT takes a massive step toward maturing the
process of creating and maintaining Ajax applications. We finish the book with the
following statement, which sums up our view of
GWT: “…we don’t even want to
think about the amount of effort that would be required to program, let alone
debug, any issues or perform maintenance across six different browsers for an
application such as the Dashboard (developed in this book) directly in JavaScript.”

GWT has proven to be a viable alternative to pure JavaScript development.
Each major release of GWT brings new features; and month after month new
applications are being released by eager developers. We hope that through this
book, we can share our enthusiasm for
GWT and make it easier for you to get the
most out of this technology.
www.it-ebooks.info
xxi
acknowledgments
Although there are only two names on the cover, writing and producing this book
has been a tremendous undertaking by a large cast. We couldn’t have written this
book without them.
We would like to begin our thanks with Michael Stephens from Manning for
getting this project started. We want to thank him for his honesty about how much
work this book would really be, and for his guidance and encouragement along
the way to get us through it. We couldn’t have done this book without you.
We wish to thank Manning’s publisher, Marjan Bace, for green-lighting the
project and heading up a great team at Manning. Our thanks also go out to the
entire Manning team for helping us turn our rough ideas into a finished work
that goes far beyond what we could have accomplished on our own. This includes
the fantastic work done by Olivia DiFeterici, Gabriel Dobrescu, Christina Downs,
Leslie Haimes, Cynthia Kane, Dottie Marsico, Mary Piergies, Gordan Salinovic,
Maureen Spencer, Tiffany Taylor, Karen Tegtmeyer, Ron Tomich, and Megan
Yockey. Thanks to all of you for being part of the team.
We also want to thank Phil Hanna, our technical editor. Phil is an accom-
plished author with several books under his belt, so we were elated when he
joined the team.
We need to thank each and every reviewer for their comments. All of them
spent their free time to help us with our project, and for that we are grateful. Spe-

cial thanks to Julian Seidenberg, Mike Buksas, Denis Kurilenko, Bernard Farrell,
Deepak Vohra, Carlo Bottiglieri, Scott Stirling, Goldy Luka, Jeff Cunningham,
www.it-ebooks.info
xxii ACKNOWLEDGMENTS
Eric Raymond, Andrew Grothe, Noel Rappin, Christopher Haupt, Benjamin Gor-
lick, Aleksey Nudelman, and Ernest Friedman-Hill.
Last, and perhaps the most important contributor to this book, is everyone
from the
GWT community. This book was in no small part guided by your ques-
tions and discussions on the
GWT developers’ forum. This includes not only GWT
users, but also the entire GWT team at Google. Thank you all.
www.it-ebooks.info
xxiii
about this book
The Google Web Toolkit (GWT) slashes through the issues that surround multi-
browser Ajax development. It moves the development lifecycle into the type-safe
language of Java while retaining the capability to access JavaScript and third-party
libraries.
GWT offers the opportunity to develop your Ajax application once for
use in multiple browsers and configurations.

GWT in Action aims to give you a solid foundation for developing GWT applica-
tions. It puts all the tools and development tasks into the context of typical appli-
cation development, ensuring that you can understand and avoid the problems
faced in
GWT development. Throughout the book, the development of a Dash-
board application, together with various component applications for the Dash-
board, provides the mechanism we use to explain
GWT concepts.

We start by providing a solid background on the basics, looking at the tools
that are used and where they’re used in a typical development lifecycle. Then, we
consider widgets, panels, and events, discussing those provided by
GWT and how
to create your own (leaning heavily on our experience from developing compo-
nents for the
GWT Widget Library).
Additionally, we tackle some of
GWT’s more advanced aspects that are not cur-
rently documented in other publications, such as the following:
www.it-ebooks.info
xxiv ABOUT THIS BOOK
■
Writing code that handles internalization and browser differences:
Why send
IE and Firefox markup for Flash movies when you can send just
the appropriate one? And, how can you change the way applications work
based on locale as well as changing whole components of your application?
■
Driving alternatives in application functionality through GWT properties:
The Dashboard example comes in two flavors: Internet and intranet ver-
sions. Which one is shown to the user is driven by user-defined properties
that you’ll define and manage.
■
Harnessing the powerful GWT generator concept:
You’ll learn to introspect classes and tags in comments at compile time to
produce new Java classes.
■
Describing the development of composite objects:
You’ll see how to build the

EditableLabel
we built for the GWT Widget
Library. You’ll also construct new composite widgets using other composite
widgets—for example, building a complex color picker widget from a num-
ber of
GWT slider widgets. Finally, you’ll learn how to apply CSS consistently
to components.
■
Integrating with JavaScript through the JavaScript Native Interface (JSNI):
We’ll discuss interapplication communication via JavaScript. You’ll build
wrappers to simple and complex third-party JavaScript libraries (such as the
Google Ajax Search component found in the
GWT Widget Library).
Any substantial application requires server-side components, and many books can
tell you about all the server-side development techniques (Java, PHP, and so on)
for which
GWT is highly flexible and which it can plug into. Our approach in GWT
in Action is to concentrate several chapters on ensuring you get a thorough under-
standing of
GWT’s client-server communication techniques; for example:
■
JSON processing using proxy servers (the Yahoo Search component)
■
GWT-RPC: the technique, the problem, and the solutions (see the Server
Status component)
■
XML processing (used in the menu for the complete Dashboard applica-
tion)
■
Form handling, including uploading files

■
Using traditional Ajax communication
www.it-ebooks.info