GWT Quick Start
-
Upload
guo-albert -
Category
Documents
-
view
3.701 -
download
1
Transcript of GWT Quick Start
![Page 2: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/2.jpg)
2
Overview Architecture GWT Showcase Documentation Implementation Reference
Agenda
![Page 3: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/3.jpg)
3
Overview Java Javascript compiler (!)
Dynamic, reusable UI components
Fast, responsive rich interface
Easy on the developer
Apache v2.0 license
![Page 4: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/4.jpg)
4
Overview – cont.
GWT provides a comprehensive set of tools to meet the challenge of developing modern rich Internet applications. From UI components to configuration tools to server communication techniques, GWT’s tools help web apps look, act, and feel more like full-featured desktop apps.
![Page 5: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/5.jpg)
Architecture
![Page 6: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/6.jpg)
CSS
GWT Class Library
JavaScriptGWT
Compiler
Java Source Code
Architecture – cont.
![Page 7: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/7.jpg)
Cross browser, cross platform
![Page 8: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/8.jpg)
Who's Using It?
![Page 9: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/9.jpg)
9
http://ongwt.googlecode.com/svn/trunk/com.google.gwt.sample.showcase.Showcase/Showcase.html
Smart GWT showcase – Rich widgets built using GWT◦ http://www.smartclient.com/smartgwt/showcase/
GWT Showcase
![Page 10: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/10.jpg)
10
Documentation GWT reference
Decent Javadoc
Active Forum
onGWT.com, GWT Site
Books
![Page 11: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/11.jpg)
11
Implementation
![Page 12: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/12.jpg)
12
Environment
JDK 6
Eclipse 3.5
GWT 2.0.3
Mac OS X
![Page 13: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/13.jpg)
13
Three way to create GWT Application
![Page 14: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/14.jpg)
14
Implementation Process
![Page 15: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/15.jpg)
15
Implementation Process
![Page 16: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/16.jpg)
16
Install the Plugin
http://code.google.com/intl/zh-TW/webtoolkit/usingeclipse.html
![Page 17: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/17.jpg)
17
Install the Plugin – cont.
![Page 18: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/18.jpg)
18
Install the Plugin – cont.
![Page 19: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/19.jpg)
19
Install the Plugin – cont.
![Page 20: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/20.jpg)
20
Install the Plugin – cont.
![Page 21: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/21.jpg)
21
Install the Plugin – cont.
Then restart your eclipse…
![Page 22: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/22.jpg)
22
Install the Plugin – cont.
![Page 23: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/23.jpg)
23
Implementation Process
![Page 24: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/24.jpg)
24
Create a GWT Web Application
Define your project and package name
Click Finish button
![Page 25: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/25.jpg)
25
Create a GWT Web Application – cont.
Project structure
![Page 26: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/26.jpg)
26
Implementation Process
![Page 27: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/27.jpg)
27
Run Demo Application
Compile GWT project
![Page 28: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/28.jpg)
28
Run Demo Application – cont.
Run hello_gwt
Check Console tab to confirm if the server is ready to use or not
Click Development Mode tab to copy the testing url
![Page 29: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/29.jpg)
29
Run Demo Application – cont.
Click Send button
Show this popup window
![Page 30: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/30.jpg)
30
Implementation Process
![Page 31: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/31.jpg)
31
Create a clean HTML page
![Page 32: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/32.jpg)
32
Create a clean HTML page – cont.
Define file name
Click finish button
![Page 33: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/33.jpg)
33
Create a clean HTML page – cont.
![Page 34: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/34.jpg)
34
Implementation Process
![Page 35: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/35.jpg)
35
Start coding
Assign class name
Implement EntryPoint interface
Click Finish button
![Page 36: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/36.jpg)
36
![Page 37: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/37.jpg)
37
Start Coding – cont.
Modify config file
Modify the entry point class
![Page 38: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/38.jpg)
38
File Name Purpose
GWT Module File Hello_gwt.gwt.xml Define the project configuration
Entry Point Class Login.java Starting class invoked by the module
Host Page login.html Initial HTML page that loads the module
Three main files
![Page 39: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/39.jpg)
39
Implementation Process
![Page 40: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/40.jpg)
40
TestingCompile the GWT project
Run login.html
Click compile button
![Page 41: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/41.jpg)
41
Testing – cont.Type in user name with incorrect password, and click Login button
![Page 42: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/42.jpg)
42
Testing – cont.Type in user name with correct password, and click Login button
![Page 43: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/43.jpg)
43
Testing – cont.
Click Reset button to clear data
![Page 44: GWT Quick Start](https://reader035.fdocuments.us/reader035/viewer/2022062307/555a7799d8b42a98568b4804/html5/thumbnails/44.jpg)
44
http://code.google.com/intl/zh-TW/webtoolkit/usingeclipse.html
Beginning Google Web Toolkit From Novice to Professional◦ http://apress.com/book/view/9781430210313
GWT :◦ http://code.google.com/webtoolkit/
Forum :◦ http://groups.google.com/group/Google-Web-Toolkit
GWT Blog : ◦ http://googlewebtoolkit.blogspot.com/
Reference