Google Web Toolkit

yompmulligrubsInternet και Εφαρμογές Web

31 Οκτ 2013 (πριν από 3 χρόνια και 9 μήνες)

220 εμφανίσεις

Google Web Toolkit



Steve Wargolet



Abstract


With the advanced web applications of today such as Gmail, Twitter, and Facebook, it has
become harder to create your own web application which lives up to today’s standards.
Google

Web Toolkit (GWT)

is able to make this possible for an average Java developer. GWT
is a
n
open source

web development toolkit used for creating complex dynamic browser
-
based
applications. It allows the developer to code
primarily using
J
ava which is

then

translated into
HTML,
JavaScript
, and AJAX. This means more developers can create web applications even if
they lack knowledge i
n common web development tools and languages.

GWT also offers an
easy to
use designer

to
help
build

the client portion of the

application which means the developer
will not need to learn CSS yet

can

still develop a fully functional and good
-
looking application.





Introduction


In the past
, when there were only static webpages,

if you wanted a client
-
server type application,
it would have
to be desktop
-
based and not web
-
based as the technology had

no
t yet evolved
enough. This meant that not only would

the

client portion have to be downloaded onto each
machine, but anytime

there

was an

update to the client, it would have to be re
-
downloaded by all
users. Soon we were able to
progress past

the static
-
only webpages onto web applications

which
remedied this problem
.
“A web application is an application utilizing web and [web] brows
er
technologies to accomplish one or more tasks over a network, typically through a [web]
browser.”
[1]



With the introduction of
more advanced interactive web
applications

from companies such as
Google
, Yahoo
,

and MSN,

it has
become

harder to develop
a w
eb application

which will live up
to today’s standards. Many modern
web applications

have the feel of desktop applications but
they

are difficult to develop if you don’t have extensive knowledge in AJAX, HTML, CSS,
JavaScript
, or any of the other common
languages/tools used to create a web application. This is
where Google We
b Toolkit

becomes extremely useful.




What is Google Web Toolkit?


GWT is a powerful web application development toolkit which allows developers to create
rich
web applications usin
g primarily Java.
One of GWT’s main features is its ability to
maintain
P a g e

|
2


compatibility

between multiple browsers. After you write your code in Java, GWT will convert
it into
equivalent

standard
-
compliant

JavaScript

and HTML

for each browser
. GWT provides

all
the common User Interface widgets which a web developer might use and there are many
add
-
ons

for GWT which can be downloaded that introduce other widgets if needed. You can even
combine widgets
and panels
to make a more complex widget such as two lis
ts which support
drag and drop, and then you can use this new widget between
across

areas of your application
just like it is one of the default GWT widgets. I was able to accomplish a similar task with a
GWT application I wrote. I extended the GWT
list
box

to support more advanced features such
as tooltips, multiple
selections
, and in
-
place editing. Without GWT, it would have taken quite a
bit of research
and coding effort

to figure out how this could be done with
JavaScript
.



GWT Designer


GWT D
esigner is a powerful and
intuitive

tool which integrates directly into GWT to allow you
to create a GUI for your application without spending a lot of time and effort creating and laying
out the webpage. If you have worked on a webpage before you know ho
w time consuming it can
be to lay out elements on a webpage and make sure they work
across

multiple browsers and scale
correctly when the browser is resized. GWT designer handles all these issues without much
extra work from the developer.
It has a very
user friendly layout
which can be seen in Figure 1
below.



Figure
1
: User Interface View for GWT Designer [2]


P a g e

|
3


The designer offers a ‘Component
Tree’ (1) which shows the hierarchical relationship between
all of the components
in your current GUI design. A ‘Property Pane’ (2) which displays all the
available properties of your selected component. A ‘Palette’ (3) provides the user with quick
access to components, both default,
add
-
ons
, and custom. The ‘Design View’ (4)

shows the
current design for your GUI. You can easily drag components from the ‘Palette’ and drop them
into the design view and the Designer will generate all the necessary code automatically.

Any
needed events can be added by right clicking on a compon
ent and choosing one of many events.

If you would like to modify the GUI code yourself for whatever reason, you can switch to the
‘Source View’ using the tabs at the bottom (5). Once you would like to test your design to see
how it looks and behaves, you
can click the

‘Preview’ button (6). This will bring up a preview
of your current GUI design without having to go through the lengthy compilation process

in
which you can test the layout and resizing of your application,

although it may not behave
the
same

as when you compile it due to information that may be loaded from the server.



Widgets

and Panels


GWT D
esigner
contains all the default widgets
and panels
that are a part of GWT. You can
easily add any of these widgets to a container by using drag
-
and
-
drop, similar to what Microsoft
Visual Studio offers. You can also easily add event handlers and change properties of the
widget.



Panels


There are many different panels available to you in GWT which each accomplish a different
layout.
There are more than 15 different panels available to use, each with its own strengths and
weaknesses.

The easiest panel to work with is the Absolute

Panel which
,

just as its name
suggests, places components on the panel absolutely. This means that wherev
er you place a
component, it will stay there. This panel could work for small areas of your web application but
should not be used for the whole application as it does not resize with the browser
;

so if you
make the browser window smaller, it is likely th
at some of the components
will

go out of view.


There
are also Horizontal and V
ertical
P
anel
s
. These two panels are also very easy to use and
will place components vertically or horizontally which make
s

it very easy to make columns or
rows. The problem w
ith these panels is that they use tables to
align the components
. This makes
implementation of things such as scaling easier but makes readability extremely difficult when
looking through the generated HTML
,

especially when there are embedded vertical or
horizontal
panels.

Since these panels use

standard

table elements such as <td> and <tr>, GWT provides the
same properties as tables such as padding and spacing.
GWT
also
offers a
horizontal and
vertical panel which in which the columns and rows can be ad
justed by dragging the edges
,

which are called

Split Panels.



Two

other panels that use tables to
provide a
layout
for
the panel are Grid and Flex Table. Grid
lays out components on the panel in a rectangular grid. The container is divided up into
multipl
e
equal
-
sized rectangles and on
e component
can go into each

rectangle. Flex T
able follows the
P a g e

|
4


same template as grid by splitting up the container into equal
-
sized rectangles, but Flex Table
allows the components to span multiple rectangles
.


If you are used to using

d
ivs


and then styling your web application with CSS, GWT offers the
Flow Panel

which arranges components
in sequential order, wrapping at the edge of the
window
.
So if a component will go off the screen it will put the component

onto the next line. You are
then able to give the flow panel styling just like you would a div. The styling is applied directly
into the design window which also make
s

styling a lot easier.
Due to how the flow panel
arranges components, GWT included
a f
eature

which shows where the component will be
dropped as can be seen in
Figure

2.



Figure
2
: Flow Panel; adding an element


There are many other more specific panels which can be used such as the Dock Panel which lays
out
components in a North
/
South
/East/
West, Center fashion which is great for web applications

that

use a header, footer, or side bar. GWT also offers a Tab Panel as a default panel
,

wh
ich is
extremely useful as writing

your own tabs using
JavaScript

can becom
e difficult. If you need a
nice looking popup which does not interfere with other components, then you can use a Popup
P
anel. If you need a nice sidebar panel to show and hide components based on the header you
click, then a Stack Panel works great.


Go
ogle introduced

all these panels to make your GUI development experience as painless as
possible. With conventional web pages setting up the page with CSS can be very
tedious;

with
GWT designer you can setup the layout of your web application in just a fe
w hours.



Widgets


Widgets are
components of a user interface in which the user can see informati
on or interact
.
GWT provides many useful widgets which make
s

your web application
have the same feel as a
desktop application. The more basic widgets are
text box, button, check box, radio button, and
text area, but GWT also provides many more complex widgets that
could

be used in
any
Web
Application. There is a Password Text Box which visually masks user input to prevent others
from seeing.
A
Date Picker
, which brings up a small calendar and allows the user to easily
switch between months and pick an individual date.

One very useful widget is the Suggest B
ox,
in which displays a pre
-
configured set of items that closely m
atch the users input. Suggest
P a g e

|
5


B
ox
es are extremely common in modern web appl
ications such as search engines,
but are
complex to implement manually.


All of these provided widgets make development of your web application quite a bit easier as a
simple drag and drop will generate much of the necessary code for you for that widget. These
widgets also make your web application feel more desktop
-
like.



Project Structure


The structure of
the

code for your web application is important as it keeps your application
organized and tells GWT where to look for certain aspects of your program. GWT can create the
structure for you automatically if you start with

their default application, otherwise you can
create it yourself. All your production Java code goes under a src directory which is the
n

divided
into three more directories; client, shared, and server. The client directory
contains

code that
runs on the
user’s browser,
the
shared
directory contains

code that both the client and server can
access, and
the
server
directory contains

code that runs only server
-
side. You can further divide
your program into more directories if needed. For testing, you may cr
eate a test directory in
which your JUnit tests will go into.


Once you compile your application, a ‘war’ directory will be created and all your output code
will be put into there. Within this directory you can find all your HTML, CSS, JavaScript, and
jar

files.
An .xml file will also be generated which contains the module definitions for your
project. It specifies the source,
inheritance of basic GWT functionality and any other modules
,
and the entry
-
point for your application.




The ‘Right’ Design
Pattern


When designing your User Interface it is very important to apply the correct design pattern to
create a well
-
layered implementation.
When Smalltalk was introduced in the 80s, the Model
-
View
-
Controller (MVC) patter
n
was

used. The Model contains all the business logic such as
servlets or anything which runs server
-
side. The Controller handles the communication between
the client and server and can reside either client
-
side or server
-
side depending on the framework.
The

View is the client
-
side portion of the program which is what runs on the
user’s

browser.
Figure 3

(left side)

shows how the Model, View, and Controller relate to each other.


This pattern causes some issues with GWT development though
,

for a couple rea
sons. The
communication about changes between the Model and the View is complicated due to the
server/client separation and testing is more difficult due to the view having to send

queries

to the
model. A better pattern for GWT is the Model
-
View
-
Presente
r pattern
. The model and view
perform the same role but now only

the only way to

have communication between the View and
Model is through
the Presenter. Figure 3 (right side) shows how the Model, View, and Presenter
relate to
each other
.

P a g e

|
6



In the Model
-
View
-
Presenter pattern, the view has no logic at all and only displays widgets and
sends events to the Presenter. Any validation
(
such as making sure a zip code is five digits long
)

will be done in the Presenter. The Presenter is the main difference bet
ween MVP and MVC
patterns. It essentially acts as a bridge between the Model and the View. When the user does
something in the view that triggers an event, the Presenter will communicate with the model and
then update the view depending on how the model
changes.



Figure
3
: Shows relations in MVC (left
)
and

relations in MVP (right) [3]



Remote Procedure Calls


Remote Procedure Calls (RPC) handle the communication between the server and client

over
HTTP
. This allows the
developer to pretty much treat the server and client as being on the same
machine. One major difference with RPCs that many developers aren’t used t
o is that they are
asynchronous. This means

that
a caller can initiate a process and other processes can co
ntinue
even if a response has not been received
. This is very different than what we are used to, since
usually you can make a call and right away return some data and use it.
This means that the user
is able to continue accessing your web application al
though some things may not be loaded. To
handle this, it is best to implement some client side code which temporarily disables the
application until the data has been received from the server.


There are three components needed when defining the RPC int
erface, an interface for the service
which extends Remot
e
Servic
e and lists all the RPC methods

(
This

looks similar to a C++ header
file)
.

Next a
class which extends RemoteServiceServlet

is needed. This class implements the
interface which was created above. Finally an asynchronous interface
which is based on the
original service interface

needs to be defined which will be called from the client
-
side code.

This means that if you need t
o write a new function to retu
rn data to the client, then you wi
ll
P a g e

|
7


need to write code not only
in
your server and client side files, but also the three service files.
This takes quite a bit of extra work that most Java developers are not used to.



Serial
ization


“Serialization is the process of packaging the contents of an object so that it can (be) moved from
one application to another application or stored for later used.”[2]

When an object is transferred
over the network with GWT RPC, it needs to be
serialized. For an object to be serialized, every
parameter and return type
must be
serializable
. For a type to be
serializable

it must

satisfy at
least one of the following requirements.



It is a

primitive
type

(int, char, boolean, etc.) and
the
wrapper object

is
serializable by
default.



It is an array of serializable types



A class is serializable if it meets these three requirements:

o

It implements either Java

Serializable

or GWT
’s

IsSerializable


interface, either
directly, or because it derives from a superclass that does.

o

It

s non
-
final, non
-
transient instance fields are themselves serializable, and

o

It has a default (zero argument) constructor with any access modifier (e.g. private
Foo(){} will
work)

[2]




Browser History


One main problem that GWT encounters is handling when the user uses the ‘Back’ button.
GWT web applications use Ajax to create the page and modify individual elements on the page
instead of refreshing the whole page. This m
akes events update faster but due to the lack of a
URL changing,
if the user hits
back
then he will be taken
back to the previous page
which he was

on before going to the GWT web application.
Fortunately

GWT d
eveloped a way to handle this:

a History class.


The History class manages all the Back and Forward events while being completely transparent
to the user. Whenever the user accesses a different part of the web application the URL will

change slightly. For instance

if your base URL
is
www.mywebapp.com/myapp
, and the user
accesses a registration form the URL would change to
www.mywebapp.com/myapp#registration

in which registration; the string after the hash mark; is a token used to identify that specific
module of your web application
.






Compiler


P a g e

|
8


One of the most advanced features of GWT is its Java
-
to
-
JavaScript compiler. It converts your
Java

code into equivalent JavaScript which can be run on all supported browsers. The compiler
is extremely important because it does several co
de optimizing tasks when it
runs,

which often
times creates better code than what can be hand written by experienced programmers. One
feature of the compiler is the ability to choose one of the three
output styles:

Obfuscated, Pretty,
or Detailed.
Obfusc
ating the code will make the code essentially unreadable

both

for security
purposes and to reduce the size of the JavaScript

which needs to be downloaded.

It does this by
removing all unnecessary white

spaces and making all variable names

as short as possible. This
allows the JavaScript code, which is client
-
side code, to be sent to the client faster.

Pretty creates
output

which is readable to a human, and Detailed expands upon Pretty with more detail such as
more verbose variable names.




Optimizations


Some of the more significant optimizations that GWT does are Dead Code Elimination, Constant
Folding
, Copy Propagation, String Interning, and Code In
-
lining.




Dead Code Elimination:

Eliminates code from the output that is never called. This
means, if you write
five

functions and only call three

of them, then the compiler will
ignore the other two unused
functions
.
One benefit of this is that you can write stub
functions
for later u
se and you don’t have to worry about it being generated into excess
JavaScript code.

It will even remove whole classes if the class is not used.




Constant Folding:

If a value of an expression can be figured out at compile time, then
the compiler will calculate the result and will use the value directly instead of the
expression. If you write code to bring up an alert window to say ‘Hello World’ using
concatenation

such as Window.alert(“Hello ” + “World”), the compiler will do the
concatenation at compile time and produce the following JavaScript code,
$wnd.alert(“Hello World”).

[3]




Copy

Propagation
:
If a variable is calculated during compile time using Constant
Fo
lding and that variable is used later on to calculate another variable, then that second
variable will be calculated at compile time also and substitute the value directly. For
instance, if constant folding figured out that x = 20 and later on you have y
= x + 10, then
‘y’ will be substituted with 30.




String Interning:

Saves memory and increases performance by replacing multiple
references of string literals with global references.




Code In
-
Lining:

If a called method is relatively short, it will replac
e the method call
with the actual method.


These are just five of the many
optimizations

the GWT does to try and speed up your JavaScript
code.

Since GWT does many optimizations which rely on looking at the application as a whole,
the compiler must compile the whole application every time to properly optimize. This can be
P a g e

|
9


frustrating as the compilation process can become quite long depending on

the size of your
application.
I have had compilations take upwards of one a
nd a half minutes, which can quickly
add up if you are testing a lot of small changes.


Debugging and Testing Your Application


An important part of the GWT development lifecycle
is creating a good set of unit test cases.
With GWT you can use the JUnit testing framework to test your application as they have
integrated it well into GWT. GWT has created a special JUnit test case called GWTTestCase
which acts similar to a normal JUn
it test but will launch an instance of GWTs browser which
emulates your application during test execution.


If you need to debug your program, you can use the same formal methods that have been used in
the past such as using breakpoints. If you are using

eclipse as your IDE then when you set a
breakpoint and debug the program, the perspective will be changed to a debug mode, allowing
you to step through and step over just like a normal Java application. This means you can debug
your program as if the web

application was a normal application, although it doesn’t seem to
work very well across the RPC calls. There is also a window to allow you to check variables and
the
ir

current value to verify it is correct. When correcting a bug, GWT offers a mode calle
d
‘Hosted Mode’ which allows you to make a change and refresh the browser
to view the fix
. This
cuts out a long compilation process.



Deploying Your GWT Application


When deploying your GWT web application, a few more steps can be taken to try to speed

up
the application even more. Large amounts of JavaScript will be generated with large
applications, all of which is usually downloaded when the user visits your page. This can cause
significant slowdowns in the application. GWT tries to remedy this b
y introducing Code
Splitting. This allows you to download only what is needed and then get other parts as needed.
This isn’t something GWT does automatically, so this means that some code needs to be written
to handle what code should be downloaded and w
hen. All that is needed is a small bit of code
shown in Figure 4.


P a g e

|
10



Figure
4
:
Code Splitting Example [2
]

Now instead of having a call to Window.alert, there is a call to GWT.runAsync which downloads
the necessary code when the but
ton click even happe
ns. These runAsync calls can be very useful
for events such as tab clicks or switching between pages as there is a lot more code which is
downloaded than a simple Window.alert.

In the end this will speed up the application overall as
the user will only need to download what is needed.



References


[1] Remick, J. (2011, January 30).
What is a web app? Here’s our definition
. Retrieved from
http://web.appstrom.net/general/opini
on/what
-
is
-
a
-
web
-
app
-
heres
-
our
-
definition/


[2] Google. (2011)
Google Web Toolkit.

Retrieved from http://code.google.com/webtoolkit/


[3] Kereki, K.F. (2011).
Essential GWT building for the web with Google Web Toolkit 2.0

Boston, MA : Perason Education, I
nc.


[4] Gupta, I. (2009).
Accelerated GWT, building enterprise Google Web Toolkit applications.
Berkeley, CA : Apress.


[5] Chaganti, R (2007).
Google Web Toolkit: GWT Java Ajax programming.

Birmingham, UK :
Packt Pub. Ltd.