De Cuong Datn

TRNG I HC BCH KHOA H NI
KHOA S PHM K THUT

*
N TT NGHIP I HC
Tn ti: Tm hiu Google Web Toolkit, Google App Engine
v xy dng h thng qun tr ni dung CMS
Sinh vin thc hin : Nguyn Xun Tun.

Gio vin hng dn: Thc s Bch Dip.
H ni 05-2010
LP SPKT TIN - KHOA SPKT TRNG H BCH KHOA H NI

TI LIU:
N TT NGHIP CHUYN NGNH CNG NGH THNG TIN
GVHD:
BCH DIP
PAGE 2
7/26/2014
SVTH:
NGUYN XUN TUN
Li gii thiu
Ngy nay, cng ngh thng tin c nhng bc pht trin mnh m theo c
chiu rng v su. My tnh in t khng cn l mt th phng tin qu him
m ang ngy cng tr thnh mt cng c lm vic v gii tr thng dng ca con
ngi, khng ch cng s m cn ngay c trong gia nh. Cng ngh thng tin
tc ng n mi mt ca i sng x hi. Cng ngh thng tin v ang
em li nhng hiu qu v cng to ln, thay i hn nhng cung cch lm vic
ca nhiu lnh vc, lm gim thi gian v chi ph hot ng ca cc c nhn, t
chc v x hi.
D nhn thy hu ht mi cng ty t nh n ln trn th gii u c website
ring, n gin nht l phc v cho vic cung cp thng tin v cng ty, tin tin
hn mt cht l cung cp mt knh thng tin gia khch hng v cng ty, hay c
bit nhng cng ty cng ngh thng tin hu nh mi hot ng u din ra trn
web. ng trc vai tr ca thng tin hot ng cnh tranh gay gt, cc t chc
v cc doanh nghip u tm mi bin php xy dng hon thin h thng
thng tin ca mnh nhm tin hc ha cc hot ng tc nghip ca n v.
Vit Nam, cc doanh nghip cng ang c nhu cu cp thit l tin hnh
thng mi ha trn Internet nhng do vic t mnh duy tr mt server th ch cc
cng ty tin hc v cc cng ty ln mi c th u t. S ng cc doanh nghip c
website th u b tin ra thu host ca 1 cng ty tin hc vi gi hng thng ty
thuc vo nhu cu. Tuy nhin cht lng khng n nh v gi c cng khng
c ng nht. Hin nay Google c mt host cho php ngi s dng ci t
ng dng web min ph vi dung lng v lu lng kh ln,
Xut pht t nhng nhn xt trn em quyt nh chn ti cho n tt
nghip ca em l: Tm hiu Google Web Toolkit, Google App Engine v xy dng
h thng qun tr ni dung CMS.
Trong qu trnh thc hin n, ti nhn c s gip tn tnh ca cc
ti: Tm hiu Google Web Toolkit, Google App Engine v xy dng h thng qun tr ni dung CMS

TI LIU:
GVHD:
BCH DIP
PAGE 3
7/26/2014
SVTH:
NGUYN XUN TUN
thy c trong khoa Cng Ngh Thng Tin, khoa S Phm K Thut v c bit l
ca c gio hng dn Bch Dip. Em xin chn thnh cm n cc thy, cc c
gip em hon thnh n tt nghip ny.
Vi trnh , kinh nghim v k nng cn hn ch nn n khng trnh khi
nhng thiu st. Em rt mong nhn c s ch bo, gp ca cc thy c gio v
cc bn. Hi vng rng, thng qua n cng vi s ch bo ca cc thy c gio
v cc bn em s hon thin mnh trong cc ng dng android tip sau.

TI LIU:
GVHD:
BCH DIP
PAGE 4
7/26/2014
SVTH:
NGUYN XUN TUN
MC LC
Phn I:
I.
1.
2.
3.
II.
1.
2.
III.
1.
2.
3.
4.
Phn II:
I.
1.
2.
II.
1.
2.
3.
III.
C s l thuyt......................................................................................................................
ng dng web..................................................................................................................................................
nh ngha......................................................................................................................................................
Lch s ng dng............................................................................................................................................
Cng ngh.......................................................................................................................................................
Web 2.0.............................................................................................................................................................
nh ngha:.....................................................................................................................................................
Cng ngh.......................................................................................................................................................
Cc cng ngh s dng....................................................................................................................................
Google Web Toolkit (GWT)...........................................................................................................................
Google Appengine..........................................................................................................................................
M hnh MVP.................................................................................................................................................
Tng quan Framework....................................................................................................................................
Xy dng h thng........................................................................................................
Mc ch v yu cu ca h thng.................................................................................................................
H qun tr ni dung web (CMS)...................................................................................................................
Pht biu yu cu............................................................................................................................................
Phn tch v thit k h thng CMS..............................................................................................................
Biu Use case tng qut.............................................................................................................................
c t cc use case.........................................................................................................................................
Thit k d liu...............................................................................................................................................
Ci t.................................................................................................................Error! Bookmark not defined.

TI LIU:
GVHD:
BCH DIP
PAGE 5
7/26/2014
SVTH:
NGUYN XUN TUN
PH LC
Ph lc 1. Danh mc cc hnh v:
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
Hnh
1 Layout panel_______________________________________________________________2
2 - DockLayoutPanel___________________________________________________________2
3 - SplitLayoutPanel____________________________________________________________2
4 - StackLayoutPanel___________________________________________________________2
5 - TabLayoutPanel_____________________________________________________________2
6 - Button widget______________________________________________________________2
7 - PushButton widget__________________________________________________________2
8 - RadioButton widget_________________________________________________________2
9 - CheckBox widget___________________________________________________________2
10 - DatePicker widget_________________________________________________________2
11 - ToggleButton widget_______________________________________________________2
12 - TextBox widget___________________________________________________________2
13 - PasswordTextBox widget__________________________________________________2
14 - TextArea widget___________________________________________________________2
15 - Hyperlink widget__________________________________________________________2
16 - ListBox widget____________________________________________________________2
17 - MenuBar widget___________________________________________________________2
18 - Tree widget_______________________________________________________________2
19 - SuggestBox widget________________________________________________________2
20 - RichTextArea widget_______________________________________________________2
21 - Table widget______________________________________________________________2
22 - TabBar widget_____________________________________________________________2
23 - DialogBox widget__________________________________________________________2
24 - PopupPanel widget________________________________________________________2
25 - StackPanel and StackLayoutPanel* widget_________________________________2
26 - HorizontalPanel widget____________________________________________________2
27 - VerticalPanel widget_______________________________________________________2
28 - FlowPanel widget__________________________________________________________2
29 - VerticalSplitPanel widget__________________________________________________2
30 - HorizontalSplitPanel_______________________________________________________2
31 - SplitLayoutPanel__________________________________________________________2
32 - DockPanel and DockLayoutPanel__________________________________________2
33 - TabPanel and TabLayoutPanel_____________________________________________2
34 - DisclosurePanel___________________________________________________________2
35 - M hnh GWT RPC_________________________________________________________2
36 - So snh MVC v MVP______________________________________________________2
37 - Use case tng qut________________________________________________________2
38 - Use case qun tr giao din v web_______________________________________2
39 - Layout trang web__________________________________________________________2
40 - Use case qun tr ni dung________________________________________________2
41 - Use case qun tr ngi dng v phn quyn______________________________2
42 - C s d liu lin quan n member_______________________________________2
43 - C s d liu lin quan n layout web____________________________________2
44 - C s d liu lin quan n content________________________________________2
GVHD:
BCH DIP

TI LIU:
PAGE 6
7/26/2014
SVTH:
NGUYN XUN TUN
Ph lc 2. Danh mc t vit tt v t chuyn ngnh:
TT
Tn bng
M t
GWT
Google Web Toolkit
GAE
Google App Engine
CMS
Content Management Systen
MVP
Model View Presenter
MVC
Model View Control
WYSIWYG
What You See Is What You Get
QTVWeb
Qun tr vin giao din web
QTVND
Qun tr vin ni dung
UI
Giao din

TI LIU:
GVHD:
BCH DIP
PAGE 7
7/26/2014
SVTH:
NGUYN XUN TUN
Phn I: C s l thuyt
I. ng dng web
1.
nh ngha
Mt ng dng web hay web application l mt ng dng c th tip cn qua
trnh duyt web(IE, Firefox, Chrome) thng qua mng (internet hay
extranet).
ng dng web s dn tr nn ph bin nh vo im mnh c bn l bn c
th s dng t bt c thit b no c th hin th web ti bt c ni no c kt ni
n my ch web. V c tnh khng phi phn phi v ci t phn mm trn
tng my tnh c nhn nh cc chng trnh truyn thng cho nn lp trnh vin
c th cp nht v bo tr ng dng Web mt cch d dng v lp tc c hiu ng
ngay vi tt c cc ngi s dng. Vi cng ngh tin tin nh hin nay, ng
dng web c th thc hin hu ht ton b cc yu cu t n gin n phc tp
nht. Mt vi v d c th ca cc ng dng web rt pht trin l: web
mail, bn hng trc tuyn, u gi trc tuyn, wiki, din n tho lun, blog,
game, cc ng dng qun l v nhiu chc nng khc.
2.
Lch s ng dng
Trong cc ng dng ch - khch trc y, mi ng dng phi c chng trnh
khch ring ca n v phi c ci t ring r trn mi my tnh c nhn ca

ngi dng. S nng cp phn my ch ca ng dng cn nng cp tt c chng
trnh khch c ci trn mi tnh c nhn ca ngi dng, thm vo l chi
ph h tr dn n vic tn km v thi gian v tin bc.
Khc phc cho nhc im to ln , ng dng web to ra mt lot
cc trang nh dng chun c h tr bi tt c cc trnh duyt ph bin
nh HTML/XHTML. DHTML dng ngn ng chun nh JavaScript thng
c thm vo c thm nhng yu t ng trong giao din ngi dng. Ni
chung, mi trang Web n l c gi ti ngi dng nh mt ti liu n nh,

TI LIU:
GVHD:
BCH DIP
PAGE 8
7/26/2014
SVTH:
NGUYN XUN TUN
nhng th t cc trang c th cung cp cm gic trc quan, khi nhng g ngi

dng nhp vo s c tr v thng tin khc nhau qua thnh phn khung Web.
Trong qu trnh giao dch , trnh duyt Web s thng dch v hin th trang, v
hot ng nh mt trang Web tnh bt k.
3.
Cng ngh
V phn giao din, ng dng web gn nh khng c gii hn no v kh nng
ngi dng. Ngoi nhng thnh phn c bn: Javascript, HTML, DHTML, CSS,
cn c ngn ng m rng v xa b hon ton nhng gii hn v kh nng trn
web nh Flash, JavaApplet, JavaFX, ActiveX, Silverlight v nhng cng ngh
khc. Nhng thnh phn m rng ny hon ton c th v trn mn hnh, chi
nhc, v dng c bn phm v chut, ko th tt c u c th thc hin
c. Nhng lp trnh vin web thng dng script pha ngi dng thm hiu
qu cho cc tnh nng, c bit l to ra mt cm gic giao tip trc quan m
khng cn phi ti trang li (iu m nhiu ngi dng cm thy ngt qung)
(Ajax, WEB 2.0). Nhng cng ngh ngy cng pht trin phi hp Javascript
pha ngi dng vi cng ngh pha my ch nh Jquery, Dojo, ASP.NET Ajax,
Mootools . to ra rt nhiu nhng tri nghim ajax khc nhau. Tuy vy vic s
dng Ajax ang gp phi mt vn ln l rt t framework p ng c kh
nng cho php search engine truyn thng c th nhn din y d liu.
Mt u th c bit na ca vic xy dng ng dng Web l n ch cn h tr
nhng tnh nng chun ca trnh duyt, vy l chng s hot ng nh mong
mun bt k h iu hnh hay phin bn h iu hnh no c ci trn my
khch. Thay v to ra nhng chng trnh khch cho MS Windows, Mac OS
X, GNU/Linux, v nhng h iu hnh khc, nhng ng dng ny c th c vit
ch mt ln v trin khai mi ni. Tuy nhin, s hin thc khng c n nh
ca HTML, CSS, DOM v nhng c tnh trnh duyt khc c th gy ra rc ri
trong vic pht trin v h tr ng dng web. Thm vo , kh nng cho ngi
dng iu chnh nhiu ci t hin th cho trnh duyt ca chng (nh chn kch
thc font, mu sc, v kiu ch, hoc tt tnh nng script) c th can thip vo s

TI LIU:
GVHD:
BCH DIP
PAGE 9
7/26/2014
SVTH:
NGUYN XUN TUN
n nh ca ng dng web.
Mt cch tip cn khc (t ph bin hn) l dng Adobe Flash hoc Java
applet, JavaFX cung cp mt vi hoc tt c cc giao din ngi dng. T khi
phn ln trnh duyt web h tr nhng cng ngh ny (thng thng qua plug-in),
nhng ng dng da trn Flash hay Java c th c hin thc v trin khai d
dng nh nhau. Bi v chng cho php lp trnh vin qun l cht hn giao din,
chng vt qua nhiu vn v cu hnh trnh duyt, mc d s khng tng
thch gia hin thc bng Java hay Flash trn my khch c th to ra s phc tp
khc nhau.
D c nhiu bin th, mt ng dng Web thng thng c cu trc nh mt
ng dng ba lp. dng ph bin nht, mt trnh duyt Web l lp th nht, mt
b my s dng mt vi cng ngh ni dung Web ng (nh ASP, ASP.NET, CGI,
ColdFusion, JSP/Java, PHP, Python, hoc Ruby On Rails) l lp gia, v mt c
s d liu l lp th ba. Trnh duyt s gi yu cu n lp gia, lp gia s phc
v bng cch to ra truy vn v cp nht c s d liu v to ra giao din ngi
dng.
II. Web 2.0

1.
nh ngha
Khi nim Web 2.0 u tin c Dale Dougherty, ph ch tch ca OReilly
Media, a ra ti hi tho Web 2.0 ln th nht do OReilly Media v MediaLive

International t chc vo thng 10/2004. Dougherty khng a ra nh ngha m
ch dng cc v d so snh phn bit Web 1.0 v Web 2.0: "DoubleClick l Web
1.0; Google AdSense l Web 2.0. Ofoto l Web 1.0; Flickr l Web 2.0. Britannica
Online l Web 1.0; Wikipedia l Web 2.0. v.v...". Sau Tim OReilly, ch tch
kim gim c iu hnh OReilly Media, c kt li 7 c tnh ca Web 2.0:
Web c vai tr nn tng, c th chy mi ng dng
Tp hp tr tu cng ng

TI LIU:
GVHD:
BCH DIP
PAGE 10
7/26/2014
SVTH:
NGUYN XUN TUN
D liu c vai tr then cht

Phn mm c cung cp dng dch v web v c cp nht khng
ngng
Pht trin ng dng d dng v nhanh chng
Phn mm c th chy trn nhiu thit b
Giao din ng dng phong ph
Thot u, Web 2.0 c ch trng ti yu t cng ngh, nhn mnh ti vai tr
nn tng ng dng. Nhng n hi tho Web 2.0 ln 2 t chc vo thng 10/2005,
Web 2.0 c nhn mnh n tnh cht su xa hn yu t cng ng.
2.
Cng ngh
Thc t, ng dng trn web l thnh phn rt quan trng ca Web 2.0. Hng
lot cng ngh mi c pht trin nhm lm cho ng dng trn web "mnh" hn,
nhanh hn v d s dng hn, c xem l nn tng ca Web 2.0.
Kin trc cng ngh ca Web 2.0 hin vn ang pht trin nhng c bn bao
gm: phn mm my ch, c ch cung cp ni dung, giao thc truyn thng, trnh
duyt v ng dng.
2.1.
Cung cp ni dung
Bc pht trin u tin v quan trng nht hng n Web 2.0 l c ch
cung cp ni dung, s dng cc giao thc chun ho cho php ngi dng s
dng thng tin theo cch ca mnh (ngha l c kh nng ty bin thng tin). C
nhiu giao thc c pht trin cung cp ni dung nh RSS, RDF v Atom, tt
c u da trn XML. Ngoi ra cn c cc giao thc c bit nh FOAF v XFN
dng m rng tnh nng ca website hay cho php ngi dng tng tc.
2.2.
Dch v web
Cc giao thc truyn thng 2 chiu l mt trong nhng thnh phn then cht
ca kin trc Web 2.0. C hai loi giao thc chnh l REST v SOAP. REST

TI LIU:
GVHD:
BCH DIP
PAGE 11
7/26/2014
SVTH:
NGUYN XUN TUN
(Representation State Transfer) l dng yu cu dch v web m my khch truyn

i trng thi ca tt c giao dch; cn SOAP (Simple Object Access Protocol) th
ph thuc my ch trong vic duy tr thng tin trng thi. Vi c hai loi, dch v
web u c gi qua API. Ngn ng chung ca dch v web l XML, nhng c
th c ngoi l.
Mt v d in hnh ca giao thc truyn thng th h mi l Object Properties
Broadcasting Protocol do Chris Dockree pht trin. Giao thc ny cho php cc
i tng o (tn ti trn web) t bit chng "l g v c th lm g, nh vy c
th t lin lc vi nhau khi cn.
2.3.
Phn mm my ch
Web 2.0 c xy dng trn kin trc web th h trc nhng ch trng hn
n phn mm lm vic "hu trng". C ch cung cp ni dung ch khc

phng thc cp pht ni dung ng (ca Web 1.0) v danh ngha, tuy nhin dch
v web yu cu tin trnh lm vic v d liu cht ch hn.
Cc gii php pht trin theo hng Web 2.0 hin nay c th phn lm 2 loi:
hoc xy dng hu ht tnh nng trn mt nn tng my ch duy nht; hoc xy
dng ng dng "gn thm" cho my ch web, c s dng giao tip API.
III. Cc cng ngh s dng

1.
1.1.
Google Web Toolkit

Gii thiu GWT
GWT l mt framework pht trin web bng ngn ng Java m ngun m
c bt u v qun l bi Google. c nhiu sn phm ca Google c xy

dng bng framework ny nh Google Wave v phin bn mi ca Google
Adwords.
GWT l mt gii php kh ton din cho Java developer xy dng cc ng
dng web 2.0 m khng cn phi bit qu nhiu ngn ng, ng thi li c th
debug li - mt li th rt ln v bn thn Javascript khng c ch debug, khin

TI LIU:
GVHD:
BCH DIP
PAGE 12
7/26/2014
SVTH:
NGUYN XUN TUN
cho rt kh khn xc nh c v tr li trong ng code JS, ...

Trong lp trnh web truyn thng, ngi dng rt nhiu khi phi vit cc on
code khc nhau cho cc trnh duyt khc nhau. Trong khi GWT s lm thay vic
lm vic vi tng trnh duyt mt cho lp trnh vin bng cch s dng DOM
package, tc l ltv s ch tng tc vi DOM package ca GWT thay v phi trc
tip tng tc vi tt c cc trnh duyt. Cc lp Widget ca DOM pakage s gip
cho vic xy dng giao din d dng hn v s lm vic chnh xc trn mi trnh
duyt.
Theo Google th
- GWT l mt Java framework m ngun m cho php bn thot khi ma trn
cc cng ngh vit cc ng dng AJAX qu kh khn v nhiu li. Vi GWT,
bn c th pht trin v kim tra li cc ng dng AJAX bng ngn ng Java, s
dng cc cng c pht trin Java tu theo thch. Khi bn trin khai ng dng ca
mnh, b bin dch ca GWT s dch ng dng Java ca bn sang Javascript v
HTML.
- GWT nhn mnh n tnh ti s dng, nhng gii php hiu qu chng li
nhng thch thc m AJAX gp phi.
Trang ch ca GWT l http://code.google.com/intl/vi-VN/webtoolkit/ bao gm
ton b ti liu v GWT v lin kt n cc cng c cn thit.
Cc thnh phn giao din trong GWT
1.2.
1.2.1.
Cc kiu layout
RootPanel
RootPanel l panel gc, t tt c cc panel khc mi c th thm vo. Hm
RootPanel.get() c mt panel duy nht bao ly th <body>. S dng hm
RootPanel.get(String id) c c mt panel bao ngoi mt phn t bt k trn
trang.

TI LIU:
GVHD:
BCH DIP
PAGE 13
7/26/2014
SVTH:
NGUYN XUN TUN
FlowPanel
FlowPanel l panel n gin nht. N to ra mt th n <div> v c th put
cc th khc vo m khng cn sa i. S dng n trong trng hp bn mun
layout cc phn t HTML con mt cch t nhin.
HTMLPanel
Panel ny cung cp mt cch n gin xc nh mt cu trc HTML, trong
widget s c nhng vo ti cc im c xc nh. Bn c th s dng n
trc tip. Panel ny c s dng ph bin nht trong UiBinder templates.
FormPanel
Khi mun to mt form HTML (v d, i vi tng tc vi cc my ch m
s dng phng thc POST), c th s dng mt FormPanel. Cc widget c
bao bi FormPanel s c bao bi th <form> khi sinh ra HTML.
ScrollPanel
Khi mun to mt vng cun bn trong panel khc, bn nn s dng
ScrollPanel. Panel ny hot ng tt khi phn t c kch thc c nh nhng cc
phn t bn trong li cha r rng.
PopupPanel v DialogBox
S dng hai panel ny to popup v hp thoi. Chng c th chng ln trn
ca s trnh duyt, v c th c xp chng ln nhau.
Grid v FlexTable

TI LIU:
GVHD:
BCH DIP
PAGE 14
7/26/2014
SVTH:
NGUYN XUN TUN
Hai widgets c s dng to ra bng, th HTML <table>, v c th cng

c s dng nh panel, bt k phn t no u c th c b sung vo cc cells
ca bng.
RootLayoutPanel
Panel ny l mt panel gc duy nht, phc v nh mt container gc m tt c
cc tm layout khc phi c nh km. Panel ny k tha lp LayoutPanel, do
bn c th layout s lng phn t bt k.
Bn s dng RootLayoutPanel ph bin nht l s dng nh mt container cho
cc panel khc.
LayoutPanel
Cch b tr ca LayoutPanel l cch b tr thng nht, v thng i theo cc
layout khc c xy dng. Gn ging vi LayoutPanel nht l AbsolutePanel,
nhng n tng qut hn ch n cho php cc phn t bn trong t nh v tr s
dng bng vic s dng cc rng buc ty , nh trong v d sau y:
Hnh 1 Layout panel


TI LIU:
GVHD:
BCH DIP
PAGE 15
7/26/2014
SVTH:
NGUYN XUN TUN
DockLayoutPanel
DockLayoutPanel c mc ch ging vi DockPanel widget, ngoi tr vic n
s dng h thng layout t c iu ny m khng s dng tables, v mt
cch d on c. Bn s thng xuyn s dng xy dng cp ng dng
cu trc, nh trong v d sau y:
Hnh 2 - DockLayoutPanel
Lu rng DockLayoutPanel yu cu s dng cc n v thng nht cho tt c

cc phn t con, quy nh ti contructor. N cng yu cu khai bo kch thc ca
mi phn t con(ngoi tr phn t cui cng - phn t s s dng tt c khng
gian cn li).
SplitLayoutPanel
SplitLayoutPanel rt ging vi DockLayoutPanel (thc t l SplitLayoutPanel
extends DockLayoutPanel), ngoi tr vic n t ng to ra mt ct ko th
splitter gia mi cp widget con. SplitLayoutPanel ch h tr n v pixel. C
th dng thay th cho HorizontalSplitPanel v VerticalSplitPanel.

TI LIU:
GVHD:
BCH DIP
PAGE 16
7/26/2014
SVTH:
NGUYN XUN TUN
Hnh 3 - SplitLayoutPanel
StackLayoutPanel
StackLayoutPanel thay th cho StackPanel. N ch hin th mt widget con ti
mt thi im, v cc tiu ca cc widget con khc. Nhp vo header no
th s hin th c widget .
Hnh 4 - StackLayoutPanel
Lu rng, nh vi DockLayoutPanel, ch c mt loi n v duy nht c


TI LIU:
GVHD:
BCH DIP
PAGE 17
7/26/2014
SVTH:
NGUYN XUN TUN
s dn. Gi tr di cung cp cho cc phng thc add() xc nh kch thc

ca cc tiu . Cn phi c mt kch thc c nh cho tiu .
TabLayoutPanel
Ging vi vic s dng TabPanel, TabLayoutPanel s hin th mt dy nhp
tab. Mi tab l lin kt vi mt widget con, c hin th khi nhn vo tab.
Hnh 5 - TabLayoutPanel
Gi tr di cung cp cho constructor TabLayoutPanel xc nh chiu cao

ca thanh tab, cn phi c cung cp mt cch r rng.
Khi no khng nn s dng layout panel?
Cc bng m t trn l tt nht c s dng xc nh ng dng ca bn
ngoi c cu - c ngha l, cc b phn l nhng "t nht ti liu ging nh".
Bn nn tip tc s dng cc widget c bn v cu trc HTML cho cc b phn
cho m HTML / CSS b tr thut ton hot ng tt. C th, xem xt vic s dng
UiBinder mu trc tip s dng HTML bt c ni no c ngha.
1.2.2.
Cc phn t c bn (widgets)
Bn xy dng giao din ngi dng trong cc ng dng bng cch s dng

TI LIU:
GVHD:
BCH DIP
PAGE 18
7/26/2014
SVTH:
NGUYN XUN TUN
GWT widget c cha trong tm. Widget cho php bn tng tc vi ngi
s dng. Panels kim sot cc v tr ca cc thnh phn giao din ngi dng trn
trang. Widgets v tm lm vic theo cng mt cch trn tt c cc trnh duyt;
bng cch s dng chng, bn loi b s cn thit vit m chuyn bit cho tng
trnh duyt.
Hnh 6 - Button widget
Hnh 7 - PushButton widget
Hnh 8 - RadioButton widget
Hnh 9 - CheckBox widget
Hnh 10 - DatePicker widget

TI LIU:
GVHD:
BCH DIP
PAGE 19
7/26/2014
SVTH:
NGUYN XUN TUN
Hnh 11 - ToggleButton widget
Hnh 12 - TextBox widget
Hnh 13 - PasswordTextBox widget
Hnh 14 - TextArea widget
Hnh 15 - Hyperlink widget
Hnh 16 - ListBox widget

TI LIU:
GVHD:
BCH DIP
PAGE 20
7/26/2014
SVTH:
NGUYN XUN TUN
Hnh 17 - MenuBar widget
Hnh 18 - Tree widget
Hnh 19 - SuggestBox widget
Hnh 20 - RichTextArea widget
Hnh 21 - Table widget

TI LIU:
GVHD:
BCH DIP
PAGE 21
7/26/2014
SVTH:
NGUYN XUN TUN
Hnh 22 - TabBar widget
Hnh 23 - DialogBox widget
Hnh 24 - PopupPanel widget
Hnh 25 - StackPanel and StackLayoutPanel* widget

TI LIU:
GVHD:
BCH DIP
PAGE 22
7/26/2014
SVTH:
NGUYN XUN TUN
Hnh 26 - HorizontalPanel widget
Hnh 27 - VerticalPanel widget
Hnh 28 - FlowPanel widget
Hnh 29 - VerticalSplitPanel widget
Hnh 30 - HorizontalSplitPanel

TI LIU:
GVHD:
BCH DIP
PAGE 23
7/26/2014
SVTH:
NGUYN XUN TUN
Hnh 31 - SplitLayoutPanel
Hnh 32 - DockPanel and DockLayoutPanel
Hnh 33 - TabPanel and TabLayoutPanel
Hnh 34 - DisclosurePanel
1.3.
Xy dng giao din web (S dng xml)

Trung tm ca ng dng GWT l mt trang web. V khi bn lp trnh web th
tt nht bn nn s dng HTML v CSS l cch t nhin nht. UiBinder cho php
bn lm iu : xy dng cc ng dng ca bn nh cc trang HTML vi cc
widget GWT ngay trong trang html (XML).

TI LIU:
GVHD:
BCH DIP
PAGE 24
7/26/2014
SVTH:
NGUYN XUN TUN
Ngoi vic xy dng giao din ngi dng mt cch t nhin v ngn gn
hn khi thc hin iu thng qua code java, UiBinder cng c th lm cho ng
dng ca bn hiu qu hn. Trnh duyt web x l tt hn lc xy dng cu trc
DOM bng vic y chui HTML vo innerHTML hn l vic c gi cc API.
UiBinder cng li dng iu ny, v kt qu l cch d dng nht xy dng
ng dng GWT cng l cch tt nht xy dng web.
UiBinder ...
gip tng tnh dng li v d sa cha - n d dng to giao din ngi
dng t u hoc sao chp / dn qua cc template
lm nh thit k giao din thoi mi hn vi XML, HTML v CSS ch
khng phi l Java m ngun;
cung cp mt s chuyn i dn dn trong qu trnh pht trin t gi
HTML (UIBinder) sang HTML thc, tng tc giao din ngi dng;
khuyn khch mt code HTML sch (mt mu khai bo XML) t hnh vi
ca chng trnh ca n (mt lp Java);
thc hin trit kim tra thi gian bin dch ca cross-references t
ngun Java ti XML v ngc li;
cung cp a ngn ng m hot ng tt vi GWT ca i18n v
khuyn khch s dng hiu qu hn cc ngun ti nguyn ca trnh duyt
bng cch lm cho n thun tin s dng HTML nh hn l cc yu t
nng hn trng lng-widget v cc panel.
Hello world
Di y l mt v d rt n gin ca mt UiBinder mu m khng c cha
cc widget, ch HTML:

TI LIU:
GVHD:
BCH DIP
PAGE 25
7/26/2014
SVTH:
NGUYN XUN TUN


<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
<div>
Hello, <span ui:field='nameSpan'/>.
</div>
</ui:UiBinder>
By gi gi s bn cn phi tc ng: c v vit vn bn trong span (c

nh ngha vi thuc tnh ui: field = 'nameSpan') trn. Bn mun c l mun
vit m Java lm nhng vic nh th, do , UiBinder mu c mt class, cho
php ch s hu lin quan chng trnh truy cp vo giao din cu trc tuyn b
trong bn mu. Ch s hu lp cho mu trn trng nh th ny:
public class HelloWorld extends UIObject { // Could extend Widget instead
interface MyUiBinder extends UiBinder<DivElement, HelloWorld> {}
private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);
@UiField SpanElement nameSpan;
public HelloWorld() {
// createAndBindUi initializes this.nameSpan
setElement(uiBinder.createAndBindUi(this));
}
public void setName(String name) { nameSpan.setInnerText(name); }
}
Chng ta s xem v d sau y chng minh lm th no s dng cc widget

vi UiBinder, nhng v d ny s dng DOM thao tc trc tip:
HelloWorld helloWorld = new HelloWorld();
Document.get().getBody().appendChild(helloWorld.getElement());
helloWorld.setName("World");
UiBinder l cc nh my to ra mt cu trc UI v gn n vo mt class Java

s hu. Cc UiBinder <U, O> giao din tuyn b hai tham s loi:
U l loi widget gc k khai trong tp tin ui.xml
O l loi class c ch s hu @ UiFields s c in vo
(Trong v d ny U l DivElement v O l HelloWorld.)
Bt k i tng k khai trong file ui.xml, bao gm bt k yu t DOM, c th
c to sn cho cc lp Java thng qua cc bin ca mnh s hu tn. y, mt
GVHD:
BCH DIP

TI LIU:
PAGE 26
7/26/2014
SVTH:
NGUYN XUN TUN
<span> yu t trong nh du l c mt ui: bin thit lp thuc tnh nameSpan.

Trong Java code, mt bin c cng tn c nh du bng cc @UiField. Khi
uiBinder.createAndBindUi (this) chy, cc bin ny c khi to vi cc thuc
tnh thch hp ca SpanElement.
Class Java chng ta to ra y c k tha t lp UiObject, nhng n cng
c th c k tha t lp Widget hoc Composite hoc Object.
Widget Hello World
Di y l mt v d v mt UiBinder mu c s dng cc widget:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<g:HTMLPanel>
Hello, <g:ListBox ui:field='listBox' visibleItemCount='1'/>.
</g:HTMLPanel>
</ui:UiBinder>
public class HelloWidgetWorld extends
Composite
MyUiBinder extends UiBinder<Widget,

HelloWidgetWorld> {}
private static MyUiBinder uiBinder =
GWT.create(MyUiBinder.class);
interface
@UiField
ListBox
listBox;
public HelloWidgetWorld(String... names) {

// sets listBox
initWidget(uiBinder.createAndBindUi(this));
for (String name : names) {
listBox.addItem(name);
}
}
}
// Use:
HelloWidgetWorld helloWorld =
new HelloWidgetWorld("able",
"baker", "charlie");
Lu rng chng ta ang s dng cc widget, v cng to ra cc widget. Cc

Widget t to cng c th c thm vo bt k panel no.
GVHD:
BCH DIP

TI LIU:
PAGE 27
7/26/2014
SVTH:
NGUYN XUN TUN
s dng mt b widget trong ui.xml mt tp tin mu, bn cn ch ra

package cha chng vo thuc tnh namespace. l nhng g ang xy ra trong
thuc tnh ca tag <ui:uibinder> element: xmlns: g = "urn: import:
com.google.gwt.user.client.ui
'.
iu
ny
ni
rng
mi
class
trong
com.google.gwt.user.client.ui gi c th c s dng nh mt yu t c tin t g

v mt th tn ph hp vi tn lp Java ca n, ging nh <g:ListBox>.
c bit ch n vic s dng mt HTMLPanel V d. HTMLPanel c th
cha bt k on HTML v widget no, v UiBinder hot ng rt tt vi
HTMLPanel. Ni chung, bt c lc no bn mun s dng ngn ng nh du
HTML bn trong ca mt h thng, bn s cn mt instance ca HTMLPanel
hoc HTML Widget.
S dng Panels
Bt k panel no (trn l thuyt, bt c iu g m impliments giao din
HasWidgets) c th c s dng trong mt tp tin mu, v c th c panel khc
bn trong ca n.
<g:HorizontalPanel>
<g:Label>Keep your ducks</g:Label>
<g:Label>in a row</g:Label>
</g:HorizontalPanel>
</ui:UiBinder>
Mt s widget GWT c bn cn nhng thuc tnh c bit ban u, bn s tm

thy m t trong javadoc ca chng. y l cch s dng DockLayoutPanel:
<g:DockLayoutPanel unit='EM'>
<g:north size='5'>
<g:Label>Top</g:Label>
</g:north>
<g:center>
<g:Label>Body</g:Label>
</g:center>
<g:west size='10'>
<g:HTML>
<ul>
<li>Sidebar</li>
<li>Sidebar</li>
<li>Sidebar</li>

TI LIU:
GVHD:
BCH DIP
PAGE 28
7/26/2014
SVTH:
NGUYN XUN TUN
</ul>
</g:HTML>
</g:west>
</g:DockLayoutPanel>
Cc thnh phn bn trong DockLayoutPanel c khai bo trong cc v tr

khc nhau nh <g:north> v <g:body>. Khng ging nh hu nh mi th khc
m xut hin trong mu, chng khng i din cho cc i tng. Bn khng th
cung cp cho chng thuc tnh ui:Field, bi v s c khng c g t trong field
ny trong lp Java ca bn. y l l do ti sao tn ca chng khng c vit
hoa u tn, cung cp cho bn mt hiu rng l chng khng "Thc s tn
ti".
Mt iu cn ch l chng ta khng th t trc tip HTML vo cc
panel, ngoi tr trong cc widget bit phi lm g vi HTML, c bit l
HTMLPanel, v cc widget impliment giao din HasHTML (v d nh thanh
bn di <g:west>).
Thc th HTML
UiBinder mu l tp tin XML, v XML khng hiu thc th nh . Khi
bn cn cc k t nh vy, bn c th t xc nh chng. Chng ta cung cp mt
b nh ngha rng bn c th chp nhn cc k t c bit bng cch thit lp
DOCTYPE thch hp ca bn:
<Ui DOCTYPE:! UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
X l s kin n gin
Mt trong nhng mc tiu ca UiBinder l gim vic phi code Java trong
vic xy dng giao din. Ngoi ra cn c vic gim code x l cc action, v
d:
public class MyFoo extends Composite {
Button button = new Button();
public MyFoo() {
button.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
handleClick();
}
GVHD:
BCH DIP

TI LIU:
PAGE 29
7/26/2014
SVTH:
NGUYN XUN TUN
});
initWidget(button);
}
void handleClick() {
Window.alert("Hello, AJAX");
}
Trong mt class s hu UiBinder, bn c th s dng @UiHandler lm

c nhng vic nh cc dng code trn lm c.
public class MyFoo extends
@UiField Button button;
Composite
public MyFoo() {
initWidget(button);
}
@UiHandler("button")
void handleClick(ClickEvent e) {
Window.alert("Hello, AJAX");
}
Tuy nhin, c mt gii hn l: ch c th ch s dng @UiHandler vi s kin

nm ra bi cc i tng widget, ch khng DOM thun ty. l <g:Button>,
Khng phi <button>.
Hello Stylish World
Vi th <ui:style>, bn c th nh ngha CSS cho giao din ca bn khi cn
thit.
<ui:style>
.pretty { background-color: Skyblue; }
</ui:style>
<div class='{style.pretty}'>
Hello, <span ui:field='nameSpan'/>.
</div>
</ui:UiBinder>
Mt giao din CssResource c to ra cho bn, cng vi mt ClientBundle.

iu ny c ngha l trnh bin dch s cnh bo bn nu bn nh sai tn lp khi
bn c gng s dng n (v d: (Style.prettty)). Ngoi ra, tn lp CSS ca bn s

TI LIU:
GVHD:
BCH DIP
PAGE 30
7/26/2014
SVTH:
NGUYN XUN TUN
c obfuscated, do bo v n khi b trng vi cc nh ngha CSS khc!

Trong thc t, bn c th tn dng li th ny trong vng mt mu duy nht:
<ui:style>
</ui:style>
<ui:style field='otherStyle'>
.pretty { background-color: Orange; }
</ui:style>
Hello, <span class='{otherStyle.pretty}' ui:field='nameSpan'/>.
</div>
</ui:UiBinder>
Cui cng, bn khng cn phi c CSS bn trong file ui.xml. Hu ht cc d

n thc t s khai bo CSS ca trong mt file ring bit. Trong v d di y, cc
src gi tr tng i so vi v tr ca ui.xml file.
<ui:style src="MyUi.css" />
<ui:style field='otherStyle' src="MyUiOtherStyle.css">
Hello, <span class='{otherStyle.pretty}' ui:field='nameSpan'/>.
</div>
</ui:UiBinder>
V bn c th thit lp mt style trn widget, khng ch HTML. S dng

styleNames thuc tnh ghi ln bt c iu g CSS to kiu tc ca widget
mc nh (ging nh gi hm setStyleNames() trong code).
<ui:style>
.hot { color: magenta; }
</ui:style>
<g:PushButton styleNames='{style.pretty}'>This button doesn't look
like one</g:PushButton>
<g:PushButton addStyleNames='{style.pretty} {style.hot}'>Push my hot
button!</g:PushButton>
</ui:UiBinder>
Lu rng addStyleNames l s nhiu.

Tc ng vo inline Styles
GVHD:
BCH DIP

TI LIU:
PAGE 31
7/26/2014
SVTH:
NGUYN XUN TUN
Code ca bn s cn truy cp vo t nht mt s cc style mu ca bn s

dng. V d, gi s widget ca bn cn thay i mu sc khi n c kch hot
hay v hiu ha:
<ui:style type='com.my.app.MyFoo.MyStyle'>
.redBox { background-color:pink; border: 1px solid red; }
.enabled { color:black; }
.disabled { color:gray; }
</ui:style>
<div class='{style.redBox} {style.enabled}'>I'm a red box
widget.</div>
</ui:UiBinder>
public class MyFoo extends Widget {
interface MyStyle extends CssResource {
String enabled();
String disabled();
}
@UiField
MyStyle
style;
/ ... /
void setEnabled(boolean enabled) {
getElement().addStyle(enabled ? : style.enabled() :
style.disabled());
getElement().removeStyle(enabled ? : style.disabled() :
style.enabled());
}
}
Cc
<ui:style>
yu
mt
mi
thuc
tnh,
type
'com.my.app.MyFoo.MyStyle'. iu c ngha m n cn thc hin m giao

din (quy nh ti m Java cho cc resource MyFoo) v cung cp hai lp CSS n
gi cho, kch hot.
By gi nhn vo @UiField MyStyle Style; bin trong MyFoo.java. iu ny
cho php truy cp vo m ngun cc CssResource to ra cho cc <ui:style>
khi. Cc setEnabled phng php s dng m lnh vc p dng c kch hot
v phong cch tn tt theo cc ph tng c bt v tt.
S dng cc ti nguyn bn ngoi
GVHD:
BCH DIP

TI LIU:
PAGE 32
7/26/2014
SVTH:
NGUYN XUN TUN
i khi mu ca bn s cn phi lm vic vi style hay khc i tng khc t

bn ngoi ca mu ca bn. S dng cc <ui:with> yu t lm cho chng c
th c truy xut t UiBinder XML.
<ui:with field='res' type='com.my.app.widgets.logoname.Resources'/>
<g:HTMLPanel>
<g:Image resource='{res.logo}'/>
<div class='{res.style.mainBlock}'>
<div class='{res.style.userPictureSprite}'/>
<div>
Well hello there
<span class='{res.style.nameSpan}' ui:field='nameSpan'/>
</div>
</div>
</g:HTMLPanel>
</ui:UiBinder>
/
Resources used by the entire application.
/
public interface Resources extends ClientBundle {
@Source("Style.css")
Style style();
@Source("Logo.jpg")
ImageResource logo();
public interface Style extends

String mainBlock();
String nameSpan();
Sprite userPictureSprite();
}
CssResource
Tag with c thuc tnh type s ch ra class c tr n. Cc class ny s

c khi to bng vic gi n hm GWT.create(Resources.class).
Chia s ti nguyn
Bn c th s dng cc resources theo cch trn nhng vi vic gi nhiu
ln nh vy t cc mu khc nhau s tn rt nhiu ti nguyn h thng. Vy nn
GWT cung cp cho ta 2 kh nng kim sot vic khi to v qun l cc

TI LIU:
GVHD:
BCH DIP
PAGE 33
7/26/2014
SVTH:
NGUYN XUN TUN
resources ny. Bn c th nh du mt nh my cho cc hm thng qua

annotation @UiFactory, hoc bn c th in vo chnh cc bin vi ch thch l
@UiField (provided = true).
y l cch s dng @UiFactory cung cp ti nguyn cn thit cho mu
trong V d trc y.
public class LogoNamePanel extends Composite {
interface MyUiBinder extend UiBinder<Widget,
LogoNamePanel> {}
@UiField SpanElement nameSpan;
final Resources resources;
public LogoNamePanel(Resources resources) {
this.resources = resources;
}
public void setUserName(String userName) {
nameSpan.setInnerText(userName);
}
@UiFactory / this method could be static if you like /
public Resources getResources() {
return resources;
}
}
Bt k field no trong cc mu l cc resources c khi to bi mt

cuc gi n getResources trc hoc s c khi to nu cha to ln no.
Bn cng c th qun l mt cch chi tit hn bng cch s dng annotation
@UiField (provided = true).
public class LogoNamePanel extends Composite {
interface MyUiBinder extends UiBinder<Widget,
LogoNamePanel> {}
@UiField
SpanElement
nameSpan;
@UiField(provided = true)
final Resources resources;

TI LIU:
GVHD:
BCH DIP
PAGE 34
7/26/2014
SVTH:
NGUYN XUN TUN
public LogoNamePanel(Resources resources) {

this.resources = resources;
}
public void setUserName(String userName) {

nameSpan.setInnerText(userName);
}
S dng mt widget m yu cu hm khi to c tham s

Tt c cc widget c nh ngha trong mu s c khi to bi vic gi
hm GWT.create(). Trong phn ln trng hp ny c ngha l chng phi l cc
i tng c th c khi to bng cc hm khi to khng tham s. Tuy nhin,
c mt s cch thc hin khi to nhng i tng m cc hm khi to cn
tham s. Ngoi cc @UiFactory v @UiField (provided = true) ni trn, bn
c th nh du cc widget ca ring bn vi cc ch thch @UiConstructor c
th s dng ti UiBinder XML.
Gi s bn c mt widget hin c nhu cu i s constructor:
public
CricketScores(String...
teamNames) {...}
Bn s dng n trong mt mu:


xmlns:g='urn:import:com.google.gwt.user.client.ui'
xmlns:my='urn:import:com.my.app.widgets' >
<g:HTMLPanel>
<my:WeatherReport ui:field='weather'/>
<my:Stocks ui:field='stocks'/>
<my:CricketScores ui:field='scores' />
</g:HTMLPanel>
</ui:UiBinder>
public class UserDashboard extends Composite {
UserDashboard> {}
public UserDashboard() {

TI LIU:
GVHD:
BCH DIP
PAGE 35
7/26/2014
SVTH:
NGUYN XUN TUN
Mt li xut hin:
[ERROR] com.my.app.widgets.CricketScores has no default (zero args)
constructor. To fix this, you can define a @UiFactory method on the
UiBinder's owner, or annotate a constructor of CricketScores with
@UiConstructor.
khc phc li ny, bn c th s dng annotation @UiFactory nh sau:
UserDashboard>;
private static final MyUiBinder uiBinder =
private final
String[]
teamNames;
public UserDashboard(String... teamNames) {

this.teamNames = teamNames;
}
/ Used by MyUiBinder to instantiate CricketScores /
@UiFactory CricketScores makeCricketScores() { // method name is
insignificant
return new CricketScores(teamNames);
}
}
... Ch thch mt constructor c tham s...

public @UiConstructor CricketScores(String teamNames) {
this(teamNames.split("[, ]+"));
}

<g:HTMLPanel xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'
xmlns:my='urn:import:com.my.app.widgets' >
<my:WeatherReport ui:field='weather'/>
<my:Stocks ui:field='stocks'/>
<my:CricketScores ui:field='scores' teamNames='AUS, SAF, WA, QLD,
VIC'/>
</g:HTMLPanel>

TI LIU:
GVHD:
BCH DIP
PAGE 36
7/26/2014
SVTH:
NGUYN XUN TUN
... Hoc in vo mt field c nh du bng @UiField (provided = true)

UserDashboard>;
private static final MyUiBinder uiBinder =
@UiField(provided=true)
final CricketScores cricketScores; // cannot be private
public UserDashboard(CricketScores cricketScores) {
// DI fans take note!
this.cricketScores = cricketScores;
}
p dng cc XML mu khc nhau cho cng mt widget

C mt yu cu t ra l chng ta i khi cn s dng cc mu UiBinder khc
nhau cho cng mt widget. Vic s dng annotation @UiTemplate s thay th cho
vic s dng cc XML mu mc nh, c th:
public class FooPickerController {
public interface Display {
HasText getTitleField();
SourcesChangeEvents getPickerSelect();
}
public void setDisplay(FooPickerDisplay display) { ... }
public class FooPickerDisplay extends Composite

implements FooPickerController.Display {
@UiTemplate("RedFooPicker.ui.xml")
interface RedBinder extends UiBinder<Widget,
FooPickerDisplay> {}
private static RedBinder redBinder =
GWT.create(RedBinder.class);
@UiTemplate("BlueFooPicker.ui.xml")
interface BlueBinder extends UiBinder<Widget,
FooPickerDisplay> {}
private static BlueBinder blueBinder =

TI LIU:
GVHD:
BCH DIP
PAGE 37
7/26/2014
SVTH:
NGUYN XUN TUN
GWT.create(BlueBinder.class);
HasText titleField;
SourcesChang`eEvents
@UiField
@UiField
pickerSelect;
public HasText getTitleField() {

return titleField;
}
public SourcesChangeEvents getPickerSelect() {
return pickerSelect;
}
FooPickerDisplay(UiBinder<Widget,
FooPickerDisplay> binder) {
protected
public static FooPickerDisplay createRedPicker() {

return new FooPickerDisplay(redBinder);
}
public static FooPickerDisplay createBluePicker() {
return new FooPickerDisplay(blueBinder);
}
}
1.4.
Giao tip vi my ch
Ging vi tt c cc ng dng ch/khch khc, cc ng dng AJAX cn phi
tm v np d liu t my ch. Cc c ch tng tc vi mt my ch qua mng

c gi l RPC. GWT RPC lm cho vic truyn ti ny d dng bng cch
truyn ti cc i tng Java qua li trn HTTP. Khi s dng hiu qu th y s
l cha kha thc hin thnh cng nhng ci tin i vi cc tn ti ca web.
M hnh:

TI LIU:
GVHD:
BCH DIP
PAGE 38
7/26/2014
SVTH:
NGUYN XUN TUN
Hnh 35 - M hnh GWT RPC
Google Appengine
2.
Jetty
2.1.
GAE c mt server ging nh Tomcat, l Jetty. Tuy nhin GAE thay i

v hn ch mt s tnh nng ph hp vi vic pht trin, deploy ng dng trn
GAE.
2.2.
GAE Service
2.2.1.
Google Accounts
ng dng App Engine c th xc thc ngi s dng vi ti khon Google.

Mt ng dng c th pht hin xem ngi dng hin hnh k kt vi mt ti
khon Google cha, v c th chuyn hng ngi dng n ti khon Google
trang ng nhp ng nhp hoc to ti khon mi. Trong khi ngi dng c
ng nhp vo ng dng, cc ng dng c th truy cp a ch email ca ngi
dng. Cc ng dng cng c th pht hin xem ngi s dng hin nay l mt
qun tr vin hay khng, lm cho n d dng thc hin cc khu vc admin.
2.2.2.
Mail
ng dng App Engine c th gi th in t thay mt cho cc qun tr vin


TI LIU:
GVHD:
BCH DIP
PAGE 39
7/26/2014
SVTH:
NGUYN XUN TUN
ca ng dng, v thay mt cho ngi s dng dng Google Accounts. ng dng

cn c th nhn c email ti a ch khc nhau. ng dng gi tin nhn s dng
dch v Mail v nhn tin nhn di dng cc yu cu HTTP c khi xng bi
App Engine v c gi n cc ng dng.
2.2.3.
Blobstore
Cc API Blobstore cho php ng dng ca bn c th lu tr c i tng

d liu ln. Cc d liu blob c to ra bng cch ti ln mt tp tin thng qua
mt yu cu HTTP. Thng thng, cc ng dng ca bn s lm c iu ny
bng vic a ra mt hnh thc vi mt lnh vc ti ln tp tin cho ngi dng,
Blobstore vic to ra mt blob t ni dung ca tp tin v tr v mt tham chiu
n n, c gi l blob key, m bn sau ny c th s dng phc v vic phc
hi file .
2.3.
Storing data
Bigtable l 1 DBMS do Google pht trin v ch c s dng trong ni b
cc sn phm ca Google. Mc tiu chnh l nhm tng cao hiu nng cng nh
khi lng d liu c th lu tr c. GAE cho php chng ta s dng min ph
1GB d liu i vi mi ng dng. GAE cung cp kh nng truy xut c s d
liu qua DataNucleus da trn JDO v JPA c bn.
3.
M hnh MVP
Da theo mt video ca google: GoogleWebToolkitBestPractices trong hi
ngh Google I/O c trnh by vi mt tuyn b hon ton bt ng: l,

rng vic p dng m hnh MVC - L s gip bn c gp rc ri vi mt ng dng
GWT ln.
Thay v MVC, cc Google Adwords mi UI (IIRC) i s dng mt m
hnh MVP (Model-View-Presenter) m c nhiu li th hn MVC: bng cch xy
dng mt ng dng bng cch s dng mt xe but s kin vo knh v x l tt
c cc s kin m bn gim bt ph thuc gia cc m hnh v quan im
(PropertyChangeListeners nhiu, vv), lm cho code n gin, n cng lm cho n

TI LIU:
GVHD:
BCH DIP
PAGE 40
7/26/2014
SVTH:
NGUYN XUN TUN
d dng hn nhiu decouple cc lp v gii thiu th nghim cc i tng

kim tra d dng hn ca cc m.
Hnh 36 - So snh MVC v MVP
Trong lp trnh web vic tch code x l khi h thng giao din l rt cn
thit, to ra kh nng x l c lp cho giao din.
Vic tch ri d liu khi giao din cng s to ra c nhiu giao din khc
nhau cho cc cch th hin khc nhau.
Code x l t trong UI gy kh khn cho vic kim tra v gy phc tp v
trng lp code. Vic kim tra cc UI thng hoc phi chy ng dng th cng
hoc s dng kch bn (script) thc hin vic tng tc t ng ln cc UI, do
s tn nhiu chi ph v thi gian hn kim tra cc x l bn trong thnh
phn ny. Vic tch cc x l ny ra ngoi ra cn tng tnh ti s dng code v d
bo tr hn.
Phng php gii quyt l m hnh MVC (Model-View-Controller) v mt
mu kin trc tha k l MVP.

TI LIU:
GVHD:
BCH DIP
PAGE 41
7/26/2014
SVTH:
NGUYN XUN TUN
M hnh Model-View-Controller chia nh cc thnh phn d liu, th hin

(output) v d liu nhp t ngi dng (input) thnh nhng thnh phn ring bit.
Model cha d liu v cc tnh ton x l logic gii quyt vn m phn
mm hng ti (business logic).
View l thnh phn m nhn vic th hin nhng d liu ca Model. View
bao gm nhng g th hin trn mn hnh nh cc control, form... Trn cng mt
Model, c th c nhiu View.
Controller l thnh phn m nhn vic x l p tr li cc d liu c a
vo t ngi dng nh cc s kin chut, bn phm, cc tng tc ln cc
control... Controller l cu ni gia ngi dng v ng dng.
S ph thuc ca Model vo cc thnh phn khc v ti mt thi im kh xc
nh iu g s xy ra khi c code v vic kim tra cng kh khn hn.
Kin trc MVP da trn t tng c bn ca MVC nhng vi cch tip cn
khc nhm khc phc cc hn ch ca MVC c in.
Cc thnh phn ca MVP
Model cha d liu v cc tnh ton x l logic gii quyt vn m phn
mm hng ti.
View l thnh phn m nhn vic th hin nhng d liu ca Model v l
tng hp ca cc form, control c s dng.
Presenter l thnh phn m nhn cc x l th hin cng nh tng tc n
d liu bn di v c th tng tc thay i View trong qu trnh x l.
Phi hp cc thnh phn
Mu kin trc MVP tng t nh Passive View nhng c b sung rng buc l
Presenter ch c th truy cp n View thng qua interface IView. iu ny gip
Presenter khng ph thuc n ci t c th ca View v c th d dng kim tra
Presenter mt cch c lp.

TI LIU:
GVHD:
BCH DIP
PAGE 42
7/26/2014
SVTH:
NGUYN XUN TUN
Mi quan h gia Presenter v Model l quan h mt chiu (chiu cn li l

gin tip). H qu l chng ta c mt m hnh a lp nh cu trc trn theo
ngha cc thnh phn mt lp ch ph thuc v s dng cc thnh phn lp
ngay bn di n.
Vi MVP, mt View gn lin vi mt interface IView. Khi View c to ra,
n to ra mt i tng private Presenter v gn n vo i tng ny thng qua
IView. Khi mt s kin xy ra, View bt ly v sau kch hot mt phng thc
ca Presenter m sau c th tng tc vi Model. Mt s s kin nh bt u
hin th v ng ca View cng c gi ti Presenter kch hot mt s
phng thc tng ng, iu ny gip cho mt s cng vic nh khi to v gii
phng d liu cho View c d dng hn. Model c t chc b sung mt lp
Service nm bn server tng tc vi Presenter.
4.
Tng quan Framework

Trong n ny, ti s dng mt open source m s dng cc cng ngh trn
l GWT-Platform c ng k trn Google code. Framework ny p dng trit

m hnh MVP bng vic s dng li m hnh GWT-Presenter ng thi v pha
server GAE, framework s dng Google-dispatch mapping cc action gi t
web client thng qua servlet, Objectify-appengine truy xut vo database
BigTable.
Vic xy dng mt chc nng c lm qua cc bc sau, ng vi m hnh
MVP nu trn:
4.1.
Presenter
Bn c th bt u lm vic trn mt Presenter. To MainPagePresenter vi
PresenterImpl <MainPagePresenter.MyView, MainPagePresenter.MyProxy> nh

mt superclass. iu ny c ngha bn phi xc nh cc interface bn trong, c
th MyView v MyProxy:
public interface MyView extends View {}

TI LIU:
GVHD:
BCH DIP
PAGE 43
7/26/2014
SVTH:
NGUYN XUN TUN
public interface MyProxy extends Proxy<MainPagePresenter>, Place {}

To hm khi to vi ch thch @Inject.
Bn cng cn phi xc nh hm revealInParent(). Hm ny s c gi n
khi bn gi n Presenter ny.
public class MainPagePresenter extends
PresenterImpl<MainPagePresenter.MyView, MainPagePresenter.MyProxy> {
public interface MyView extends View {}
public interface MyProxy extends ProxyPlace<MainPagePresenter> {}
@Inject
public MainPagePresenter(EventBus eventBus, MyView view, MyProxy proxy) {
super(eventBus, view, proxy);
}
@Override
protected void revealInParent() {
RevealRootContentEvent.fire( eventBus, this );
}
}
4.2.
View
To mi class MainPageView implements t MainPagePresenter.MyView.
ng k view vi Google-gin bng cch nh du constructor ca n vi ch thch

@Inject.
4.3.
Proxy
y l mt cha kha cho vic dt b im yu ln nht ca AJAX trong vic
giao tip vi trnh duyt, vic s dng nt back m ngi s dng vn quen dng
khi mun quay li trang trc hay hnh ng trc .
To mi class MainPageProxy implements t MainPagePresenter.MyProxy.
Cn nh du construtor vi ch thch @ProxyStandard hoc @ProxyCodeSplit
xc nh xem mun presenter v view s dng cch chia code no. xc nh
v tr ca presenter, trn thanh a ch, ta cn nh du vi annotation @Name
Token(main).

TI LIU:
4.4.
GVHD:
BCH DIP
PAGE 44
7/26/2014
SVTH:
NGUYN XUN TUN
Model
Sau khi c Presenter v view, chng ta cn truyn nhn d liu t server. C
th y chng ta dng Gwt-dispatch, mt servlet lng nghe cc lnh gi t GWT

RPC da trn regex.
Pha server, khi lm vic vi GAE, chng ta c th s dng JDO hoc JPA.
y chng ta s dng JPA kt hp vi mt opensource Objectify-Appengine c
ng k trn Google.

TI LIU:
GVHD:
BCH DIP
PAGE 45
7/26/2014
SVTH:
NGUYN XUN TUN
Phn II:Xy dng h thng

I. Mc ch v yu cu ca h thng
1.
H qun tr ni dung web

H qun tr ni dung, cng c gi l h thng qun l ni dung hay CMS
(Content Management System) l phn mm t chc v to mi trng cng

tc thun li nhm mc ch xy dng mt h thng ti liu v cc loi ni dung
khc mt cch thng nht. Mi y thut ng ny lin kt vi chng trnh qun
l ni dung ca website. Qun l ni dung web (web content management) cng
ng ngha nh vy.
Cc c im c bn ca CMS bao gm:
Qun l menu, link
Qun l ni dung(news, image, video) trc tuyn
Qun l ngi dng
Ch Son tho "Nhn l bit" WYSIWYG
Tm kim v lp ch mc
Lu tr
Ty bin giao din
C kh nng m rng bng cc extensions
2.
Pht biu yu cu
Yu cu xy dng mt h thng qun l ni dung ca mt website.
M t v thnh phn, cu trc mt website:
B cc, ni dung website : Bao gm cc web page, mi trang web gm

TI LIU:
GVHD:
BCH DIP
PAGE 46
7/26/2014
SVTH:
NGUYN XUN TUN
nhiu v tr khc nhau, mi v tr c mt hay nhiu module.

Menu link : qun l menu link cha cc link n cc web page khc nhau
trong cng website hay bn ngoi website.
Qun l thng tin ngi s dng, nhm ngi s dng, nhm quyn, phn
quyn cho cc mc.
Qun l phn m rng, ngn ng, skin, template.
II. Phn tch v thit k h thng CMS

1.
Biu Use case tng qut
Hnh 37 - Use case tng qut

TI LIU:
2.
2.1.
GVHD:
BCH DIP
PAGE 47
7/26/2014
SVTH:
NGUYN XUN TUN
c t cc use case
Qun tr hin th thng tin v giao din
Hnh 38 - Use case qun tr giao din v web

2.1.1.
Qun l trang
Tm tt:
- Qun l trang l use case qun tr vin giao din web c th thm sa
xa, cu hnh cc trang.
Tc nhn:
- Qun tr vin giao din web (QTVWeb)
Lung s kin chnh
- QTVWeb vo chc nng qun l trang web.
- H thng hin th cc trang ang tn ti trong h thng.
- QTVWeb c th chn hoc l to trang mi hoc sa, xa trang c
trc .
- Vic to mi, sa trang lin quan n cc thng tin: tn trang, layout, v

TI LIU:
GVHD:
BCH DIP
PAGE 48
7/26/2014
SVTH:
NGUYN XUN TUN
tr hin th module, regex nhn din module.

2.1.2.
Qun l menu lin kt
Tm tt:
- Cu trc menu l ng v ngi qun tr c th ty bin bng giao din
thm sa xa cc menu v cu trc cc menu. Menu c kiu cha con
nhiu cp.
Tc nhn:
- QTVWeb
Lung s kin chnh
- QTVWeb vo chc nng qun l menu.
- H thng hin th cc menu ang tn ti trong h thng.
- QTVWeb c th chn hoc l to menu mi hoc sa, xa menu c
trc .
- Vic to mi, sa menu lin quan n cc thng tin v menu: tn, nhm
menu, ng link.
2.1.3.
Qun l skin
Tm tt:
- H thng cho php QTVWeb qun l skin cho ton trang web
Tc nhn:
- QTVWeb
Lung s kin chnh
- QTVWeb vo chc nng qun l skin.
- H thng hin th cc skin ang tn ti trong h thng.
- QTVWeb c th chn hoc l upload skin mi hoc sa, xa skin c
trc .

TI LIU:
GVHD:
BCH DIP
PAGE 49
7/26/2014
SVTH:
NGUYN XUN TUN
- Vic to mi, sa skin lin quan n cc thng tin v skin: tn, ng

dn.
2.1.4.
Qun l layout
Tm tt:
- H thng cho php QTVWeb qun l cc layout trang web
Hnh 39 - Layout trang web
- Layout ca trang ch c chia lm 5 phn chnh:

- Header: Cha logo, banner, menu, box ng nhp nhanh, tm kim,
- Left: Cha cc box: Danh mc, tm kim, qung co, thng k lt truy
cp,
- Right: Cha cc box: top rated content, top download, qung co,
- Footer: Cha mt s thng tin v bn quyn website v thng tin v
doanh nghip.
- Body: Cha ni dung chnh ca website.
Tc nhn:
- QTVWeb

TI LIU:
GVHD:
BCH DIP
PAGE 50
7/26/2014
SVTH:
NGUYN XUN TUN
Lung s kin chnh

- QTVWeb vo chc nng qun l layout.
- H thng hin th cc layout ang tn ti trong h thng.
- QTVWeb c th chn hoc l upload layout mi hoc sa, xa layout
c trc .
- Vic to mi, sa layout lin quan n cc thng tin v layout: tn,
ng dn.
2.1.5.
Qun l cc chc nng v cc thnh phn m rng
H cung cp tnh nng mm do cho php ngi qun tr thit lp trng thi
hin th hay khng hin th cc module ln website
2.1.6.
Qun tr cu hnh
H thng c cu hnh thng qua giao din website, cc thng tin cu hnh
c lu trong database, ngi qun tr c th thay i v ty bin, h thng c
c ch t ng np li cc cu hnh ny t database. Cc chc nng c bn:
Cu hnh search engine: Cc tiu ch tm kim, ty bin danh mc tm
kim, kch thc trang, s trang hin th, mc tm kim (trn ton b
database, trn mt s bng),
Ci t, cu hnh logging: Cho php ngi qun tr cu hnh ghi log ra
file, vo database, hay mail, Cu hnh cp log (ERROR, WARNING,
DEBUG,), cu hnh log c th trn cc package.
Khi ng, tm ngng / tip tc chy ton b h thng.
Cho php Tt / Bt mt s chc nng h thng.
Ngi qun tr h thng c kh cu hnh cc thng tin trn mt cch linh
ng trn giao din ca chng trnh.
Mt s cu hnh chn la ban u khng th thay i v nh hng n s
ng b ca h thng (v d: user name hay ch mnh mail)

TI LIU:
2.2.
GVHD:
BCH DIP
PAGE 51
7/26/2014
SVTH:
NGUYN XUN TUN
Qun l ni dung v ch ni dung
Hnh 40 - Use case qun tr ni dung

2.2.1.
Qun l ch ni dung ca mi loi ni dung
Tm tt:
- Chc nng cho php qun l cc loi ni dung khc nhau nh news,
video, image, Trong mi loi ni dung phn chia thnh cc ch
tin cho vic phn loi, sp xp.
Tc nhn:
- Qun tr vin ni dung (QTVND)
Lung s kin chnh
- QTVND vo chc nng qun l ch .
- H thng hin th cc ch ang tn ti trong cc loi ni dung.
- QTVND c th thc hin vic thm sa xa cc ch , loi ni dung.
- QTVND c th nh ngha cc trng ca loi ni dung
- Vic to mi, sa skin lin quan n cc thng tin v loi ni dung: tn,

TI LIU:
GVHD:
BCH DIP
PAGE 52
7/26/2014
SVTH:
NGUYN XUN TUN
loi ni dung cha, cc loi ni dung con...

Cc cng c ca h thng thc hin cc chc nng trn:
Cho php qun l cc nhm ni dung: sa, sp xp hin th.
Cho php qun l ch ca mt nhm ni dung c th: thm, sa, xa v
sp xp hin th.
Mi loi ni dung thuc mt ch , nhm ni dung c th c th c
thm mc nh gi, bnh chn, phn hi qua mail.
Chc nng cho php to mi mt ni dung vi cc tnh nng sau:
Cho php nhn tiu , tm tt v chi tit ni dung.
Cho php upload hnh nh, trailer v cc nh dng file cn thit ca mt
ni dung.
Cho php gn ni dung vo mt ch c th.
Cho php xem th ni dung trc khi cp nht ln h thng.
Cc ni dung c km hnh nh, trailer, s c xem th trn mt trang
ring hoc download trc tip v my tnh.
Bin tp, kim duyt, qun l ni dung
Cc ni dung sau khi c bin son mi s c ngi c thm quyn
thc hin kim duyt v cp nht trng thi public th ni dung s c ng ln
web. Vic bin tp kim duyt qun l ni dung bao gm cc chc nng sau:
Tm kim ni dung theo ngy to, ngi to, ch , trng thi.
Xem trc ni dung trc khi thc hin cp nht trng thi.
Bin son li cc ni dung tng t phn thm mi.
Hy ni dung

TI LIU:

2.2.2.
GVHD:
BCH DIP
PAGE 53
7/26/2014
SVTH:
NGUYN XUN TUN
Xem, bnh chn, bnh lun, nh gi ni dung
Vi mi ni dung khi ti ln h thng s c h thng t ng sinh ra mt

khung tho lun tng ng. Sau khi ng nhp h thng ngi dng c th
tham gia bnh chn, bnh lun v cho im v xp loi cho tng ni dung. Qua
knh ny ngi dng c thm nhiu thng tin hn v ni dung quan tm.
Qun tr ngi dng v phn quyn
2.3.
Hnh 41 - Use case qun tr ngi dng v phn quyn
H thng cung cp h thng qun tr ngi dng thn thin vi cc chc nng
chnh:
Thm sa xa ngi dng
Tm kim ngi dng
Phn nhm ngi dng
Phn quyn cho nhm ngi dng
Phn quyn cho ngi dng

TI LIU:

2.3.1.
GVHD:
BCH DIP
PAGE 54
7/26/2014
SVTH:
NGUYN XUN TUN
Chc nng ng k v qun l profile ca thnh vin
H thng cho php cu hnh xem c cho php ngi dng ng k thnh vin
khi tham quan trang web hay khng. Mi thnh vin c th s dng mt ti
khon duy nht trn ton h thng.
ng k thnh vin mi
Ngi dng khi tham quan trang web c th chn cha nng ng k thnh
vin mt cch d dng, ban u ch c mt s thng tin c bn nh:
Tn ng nhp
Mt khu ng nhp
a ch email
C cu hnh cho php username l mail lun hay khng.
Thnh vin mi ng k cha th s dng ti khon c ngay m cn phi
ch c duyt. (C cu hnh)
Kch hot ti khon
C cc cu hnh cch kch hot ti khon, hoc ko cn kch hot.

Qun tr h thng s xem xt danh sch cc thnh vin mi ng k v gi link
kch hot ti khon cho thnh vin qua email ng k.
H thng cng cung cp c ch kch hot ti khon t ng nhm p ng
c mt lng ln cc thnh vin ng k mi thay cho ngi qun tr.
Gi li mt khu
Trng hp thnh vin qun mt khu c th ly li c mt khu d dng

thng qua chc nng gi li mt khu. Thng tin v mt khu mi s c gi v
email hoc in thoi ca thnh vin.
H thng cng cung cp c ch gi li mt khu t ng.
Chc nng thay i mt khu
Thnh vin c nhu cu i mt khu, c th s dng chc nng thay i mt

khu, yu cu nhp mt khu c.

TI LIU:
GVHD:
BCH DIP
PAGE 55
7/26/2014
SVTH:
NGUYN XUN TUN
Chc nng thay i thng tin c nhn
Mi thnh vin sau khi ng nhp u c trang profile ca mnh, ti y thnh

vin c th thay i thng tin c nhn, s thu bao
Thnh vin c th c nhn ha trang profile ca mnh bng cch chn style
c cung cp sn hoc t edit style cho mnh.
Chc nng ng nhp v ng xut
Chc nng ng nhp, v ng xut c th b cc trn trang ch, hoc trn cc

trang m thnh vin c th tham quan.
2.3.1.
Qun l phn quyn
H thng cho php ngi qun tr phn quyn ngi dng theo cc nhm khc
nhau d qun l cng nh c th gn cho cc nhm ngi dng nhng quyn
hp l.
H thng qun tr website cn c phn cp phn quyn mt cch r rng,
mm do v linh hot, mi mt ngi qun tr c php thc hin mt s chc
nng nht nh thng qua vic gn quyn (Assign) hay hn ch chc nng (Limit).
3.
Thit k d liu
Hnh 42 - C s d liu lin quan n member


TI LIU:
GVHD:
BCH DIP
PAGE 56
7/26/2014
SVTH:
NGUYN XUN TUN
Hnh 43 - C s d liu lin quan n layout web
Hnh 44 - C s d liu lin quan n content

TI LIU:
GVHD:
BCH DIP
PAGE 57
7/26/2014
SVTH:
NGUYN XUN TUN
Kt lun
Do thi gian c hn v m m qu nhiu th nn sn phm t ra ban u ca
em i vi n l cha hon chnh, tuy nhin qua n ny em vn t c
mt s nhng thnh qu nht nh trong vic hc tp v nghin cu, sn phm c
hi vng p dng thc t cao.
Qua qu trnh thc hin n, em hc hi c rt nhiu kin thc b ch
v cch thc gii quyt mt bi ton c th, v kh nng tm hiu cng ngh, c
bit l vic cng c cc kin thc v cc mn hc chuyn ngnh, c th:
Kin thc v cng ngh: vic s dng ngn ng lp trnh Java cho vic lp
trnh web. Tip cn cc sn phm opensource ca Google. Cc k nng lp
trnh.
Kin thc v Phn tch v thit k h thng: l qu trnh tip cn mt
bi ton, k nng kho st hin trng v xc lp bi ton, k nng phn tch
h thng v chc nng, d liu, k nng thit k h thng
Ti liu tham kho

[1] Wikipedia v ng dng web
[2] Web 2.0 khng ch l cng ngh Bo PC World.
[3] Google web toolkit website
[4] Google app engine website
[5] Gwt-platform website
[6] Objectify-appengine website
[7] Wikipedia v CMS

De Cuong Datn

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

De Cuong Datn

Uploaded by

Copyright:

Available Formats

TRNG I HC BCH KHOA H NI

KHOA S PHM K THUT

Sinh vin thc hin : Nguyn Xun Tun.

LP SPKT TIN - KHOA SPKT TRNG H BCH KHOA H NI

N TT NGHIP CHUYN NGNH CNG NGH THNG TIN

LP SPKT TIN - KHOA SPKT TRNG H BCH KHOA H NI

N TT NGHIP CHUYN NGNH CNG NGH THNG TIN

LP SPKT TIN - KHOA SPKT TRNG H BCH KHOA H NI

N TT NGHIP CHUYN NGNH CNG NGH THNG TIN

LP SPKT TIN - KHOA SPKT TRNG H BCH KHOA H NI

N TT NGHIP CHUYN NGNH CNG NGH THNG TIN

LP SPKT TIN - KHOA SPKT TRNG H BCH KHOA H NI

N TT NGHIP CHUYN NGNH CNG NGH THNG TIN

Ph lc 2. Danh mc t vit tt v t chuyn ngnh:

Google Web Toolkit

Google App Engine

Content Management Systen

Model View Presenter

Model View Control

What You See Is What You Get

Qun tr vin giao din web

Qun tr vin ni dung

LP SPKT TIN - KHOA SPKT TRNG H BCH KHOA H NI

N TT NGHIP CHUYN NGNH CNG NGH THNG TIN

khch ring ca n v phi c ci t ring r trn mi my tnh c nhn ca

LP SPKT TIN - KHOA SPKT TRNG H BCH KHOA H NI

N TT NGHIP CHUYN NGNH CNG NGH THNG TIN

nhng th t cc trang c th cung cp cm gic trc quan, khi nhng g ngi

LP SPKT TIN - KHOA SPKT TRNG H BCH KHOA H NI

N TT NGHIP CHUYN NGNH CNG NGH THNG TIN

II. Web 2.0

Media, a ra ti hi tho Web 2.0 ln th nht do OReilly Media v MediaLive

LP SPKT TIN - KHOA SPKT TRNG H BCH KHOA H NI

N TT NGHIP CHUYN NGNH CNG NGH THNG TIN

D liu c vai tr then cht

LP SPKT TIN - KHOA SPKT TRNG H BCH KHOA H NI

N TT NGHIP CHUYN NGNH CNG NGH THNG TIN

(Representation State Transfer) l dng yu cu dch v web m my khch truyn

n phn mm lm vic "hu trng". C ch cung cp ni dung ch khc

III. Cc cng ngh s dng

Google Web Toolkit

c bt u v qun l bi Google. c nhiu sn phm ca Google c xy

LP SPKT TIN - KHOA SPKT TRNG H BCH KHOA H NI

N TT NGHIP CHUYN NGNH CNG NGH THNG TIN

cho rt kh khn xc nh c v tr li trong ng code JS, ...

Cc thnh phn giao din trong GWT

LP SPKT TIN - KHOA SPKT TRNG H BCH KHOA H NI

N TT NGHIP CHUYN NGNH CNG NGH THNG TIN

LP SPKT TIN - KHOA SPKT TRNG H BCH KHOA H NI

N TT NGHIP CHUYN NGNH CNG NGH THNG TIN

Hai widgets c s dng to ra bng, th HTML <table>, v c th cng

Hnh 1 Layout panel

LP SPKT TIN - KHOA SPKT TRNG H BCH KHOA H NI

N TT NGHIP CHUYN NGNH CNG NGH THNG TIN

Lu rng DockLayoutPanel yu cu s dng cc n v thng nht cho tt c

LP SPKT TIN - KHOA SPKT TRNG H BCH KHOA H NI

N TT NGHIP CHUYN NGNH CNG NGH THNG TIN

Lu rng, nh vi DockLayoutPanel, ch c mt loi n v duy nht c

LP SPKT TIN - KHOA SPKT TRNG H BCH KHOA H NI

N TT NGHIP CHUYN NGNH CNG NGH THNG TIN

s dn. Gi tr di cung cp cho cc phng thc add() xc nh kch thc

Gi tr di cung cp cho constructor TabLayoutPanel xc nh chiu cao

LP SPKT TIN - KHOA SPKT TRNG H BCH KHOA H NI

N TT NGHIP CHUYN NGNH CNG NGH THNG TIN