GWT Say goodbye to the pains of Ajax

AMInternet and Web Development

Dec 3, 2011 (5 years and 9 months ago)

1,464 views

Google Web Toolkit make Ajax development easier by hiding browser incompatibilities from the programmer and allowing the developer to work in a familiar Java browser-specific dependencies. development environment unify client and server code into a single application written in one language: Java. abstract the browser’s DOM, hiding differences between browsers behind easy to extend object- oriented UI patterns. This helps make code portable over all supported browsers.

Say goodbye to the pains of Ajax
Yibo

DOM

JavaScri
p
t
p

XML

䍓C

䍓C

Standard
b
fdd

Browsers:
b
rowser-speci
f
ic
d
epen
d
encies.

Differences

Complexity

䕸灲敲楥湣E
㨠䵩湥獷敥灥:

䕸灲敲楥湣E
㨠䵩湥獷敥灥:
lblk

Goo
gl
e We
b
Too
lk
it

make Ajax development easier by hiding browser
incompatibilities from the pro
g
rammer and
allowing the developer to work in a familiar Java
dlt it
browser
specific dependencies
d
eve
l
opmen
t
env
i
ronmen
t

unify client and server code into a single
liti itt i l J
browser
-
specific dependencies
.
app
li
ca
ti
on

wr
itt
en
i
n

one
l
an
g
ua
g
e:
J
ava.

abstract the browser’s DOM, hiding differences
b b bhid d bj
b
etween
b
rowsers
b
e
hi
n
d
eas
y
to

exten
d
o
bj
ect-
oriented UI patterns. This helps make code
portable oer all supported browsers
portable o
v
er all supported browsers
.

Write AJAX apps in the Java language, then
compile to optimized JavaScript

Step through live AJAX code with your Java
debu
gg
er
gg

Compile and deploy optimized, cross-
b
r
o
w
se
r
Ja
v
aSc
ri
pt
bose JaaScpt

Before you start coding you need to install

Java, JDK

IDE: Eclipse, NetBeans

GWT

GWT installation

Eas
y
y

No special install is needed

Unzi
p
GWT to
y
our machine
py

Add GWT directory to your system
environment

Windows: Environment Variable Path

*nix: PATH variable

Create a directory

Create a
p
ro
j
ect
pj

projectCreator-eclipse MyProject
Out
p
ut:
p

Created directory c:\gwt-projects\src

Created director
y
c:
\
g
wt-
p
ro
j
ects
\
test
y
\
g
pj
\

Created file c:\gwt-projects\.project

Created file c:
\
g
wt-
p
ro
j
ects
\
.class
p
ath
\
g
pj
\
p

Creatan application

a
pp
licationCreator-ecli
p
se M
y
Pro
j
ect
pp
p
yj
org.freefood.pizza.client.NineInch

Created directory c:\gwt-projects\myproject\src\org\freefood\pizza

䍲敡瑥搠摩牥捴潲礠挺
\
杷g
灲潪散瑳
\
浹灲潪散m
\
獲s
\
潲o
\
晲敥景潤
\
灩空p
\
捬楥湴

䍲敡瑥搠摩牥捴潲礠挺
\
杷g
-
灲潪散瑳
\
浹灲潪散m
\
獲s
\
潲o
\
晲敥景潤
\
灩空p
\
捬楥湴

Created directory c:\gwt-projects\myproject\src\org\freefood\pizza\public

Created file c:\gwt-projects\myproject\src\org\freefood\pizza\NineInch.gwt.xml

Created file c:\gwt-projects\myproject\src\org\freefood\pizza\public\NineInch.ht
l

m
l

Created file c:\gwt-projects\myproject\src\org\freefood\pizza\public\NineInch.cs

s

Created file c:
\
g
wt-
p
ro
j
ects
\
m
yp
ro
j
ect
\
src
\
or
g
\
freefood
\
p
izza
\
client
\
NineInch.
j
a
\
g
pj
\
ypj
\
\
g
\
\
p
\
\
j

va

Created file c:\gwt-projects\myproject\NineInch.launch

Created file c:\gwt-projects\myproject\NineInch-shell.cmd

䍲敡瑥搠晩汥C挺
\
杷g
-
灲潪散瑳
\
浹灲潪散m
\
乩湥䥮捨
-
捯浰楬攮捭c

䍲敡瑥搠晩汥C挺
\
杷g
灲潪散瑳
\
浹灲潪散m
\
乩湥䥮捨
捯浰楬攮捭c
Htd Md (dlt)

H
os
t
e
d M
o
d
e
(d
eve
l
opmen
t)

interacting with your GWT application without it
having been translated into JavaScript
having been translated into JavaScript

Development Shell

呯浣慴⁓敲癥T

呯浣慴⁓敲癥T

Shell console

䡯獴敤⁂牯睳敲

䡯獴敤⁂牯睳敲

Two connections between Shell and Browser

1st: htt
p
connection
(
html
,
resources
)
p(,)

2nd: Backdoor connection (route the interaction to Java
code in the shell)

Web Mode (in production)

Release mode

compile Java code into a form that can be run
in
s
i
de a
r
egu
l
a
r
b
r
owse
r
sde a egua bowse

Easy: Compile/Browser button

呲慮獬慴攠捬楥湴⁰慣歡来⁩湴漠䩓

呲慮獬慴攠
.
捬楥湴⁰慣歡来⁩湴漠䩓

Open a browser, and point to the url

Shell serves as a web server
Fl f Wb Md

Fl
ow

o
f W
e
b M
o
d
e

1. The web browser loads MyApp.html.

㈮⁍祁灰⹨瑭氠汯慤猠
潲朮硸砮捬楥湴⹍祁灰⹪y
睩瑨⁡w

㈮⁍祁灰⹨瑭氠汯慤猠
潲朮硸砮捬楥湴⹍祁灰⹪y
睩瑨⁡w
㱳捲楰琾<瑡朠瑯⁧整⁴桥潤畬攠湡浥t

3. JavaScript inside looks at the browser’s userAgent
field to determine what kind of browser the user is
field to determine what kind of browser the user is
running (IE5,6,7, FireFox, Opera, etc.). Then it selects
the correct code (cache file) for that browser type and
redirects the <
iframe
> there
redirects the <
iframe
> there
.

4. The JavaScript equivalent of your onModuleLoad( )
method is executed, and the rest of
y
our a
pp
lication
ypp
goes from there. Manipulations to the browser DOM
are performed with ordinary dynamic HTML calls in
the com
p
iled
J
avaScri
p
t.
pJp

Web Mode ( deployment)

Prett
y
eas
y
: co
py
“www” director
y
to another
yypyy
location

buttons, lists, and tables, you add them to
parents, and you interact with them via
l
l
isteners.

GWT a
pp
will a
pp
ear in a web browser, so
pppp
there has to be an HTML page involved
somewhere.
A GWT dl i llti f lit
id

A GWT
mo
d
u
l
e
i
s

a

co
ll
ec
ti
on

o
f
c
li
en
t
-s
id
e

application code and resources you supply.
<dl>
<
mo
d
u
l
e
>
<!--Inherit the core Web Toolkit stuff. -->
<inherits name=
'
comgooglegwtuserUser
'
/>
<inherits name=
com
.
google
.
gwt
.
user
.
User
/>
<!--Specify the app entry point class. -->
<entry
-
point class
='
comxyzclientMyApp
'
/>
<entry
point class
com
.
xyz
.
client
.
MyApp
/>
</module>

睨敮w瑨攠䡔䵌⁰慧攠楳潡摥t⁇坔潯歳⁵瀠

睨敮w瑨攠䡔䵌⁰慧攠楳潡摥t
,
⁇坔潯歳⁵瀠
瑨攠硭氠晩汥⁴漠来琠瑨攠捬慳猠湡浥Ⱐ慮搠獴慲瑳f
捡汬楮
g
⁣潤攠楮⁴桥
捯洮c
y
種捬楥湴⹍
y
A

捬慳献
g
祹pp

Implements EntryPoint
public class NineInchimplements EntryPoint{

}

GWT lets part of your application run in both
server and client side, with seamless
bh
communication
b
etween t
h
em using Remote
Procedure Calls

Rich Internet Applications

a remote
p
rocedure call is sim
p
l
y
a wa
y
the
ppyy
client can execute some logic on the server and
g
et a result back.
g

GWT RPC

Define a template that describes the call

GWT uses a standard namin
g
convention to
g
connect client and server
NameLocationPurpose
interface Serviceclient and serverDescribes the
service
service
class ServiceImplserverServlet
interface clientLets you call the
ServiceAsyncservice

Server side
public class ServiceImplextends RemoteServiceServlet
implements Service {

}

Client side
ServiceAsyncservice = (ServiceAsync)
GWT.create
(
Service.class
)
;
(
)
AsyncCallbackcallback = new AsyncCallback(){…};
service.invokeService
(
p
arams, callback
)
;
(
p
)

RpcExample.gwt.xml

<!--S
p
ecif
y
the servletclass. -->
py

<servletpath="/services"
c
l
ass
="
co
m
.xy
z
.se
r
ve
r
.
Se
r
v
i
ce
Im
p
l"
/
>
cass
co.xy.seve
.
Sevcep
/

JSNI

JSON

Internationalization

䡩獴潲礠慮搠䉯潫浡牫H

䡩獴潲礠慮搠䉯潫浡牫H