GWT Quick Start<br />Albert Guo<br />junyuo@gmail.com<br />
Overview<br />Architecture<br />GWT Showcase<br />Documentation<br />Implementation<br />Reference<br />Agenda<br />2<br />
3<br />Overview<br />Java      Javascript compiler (!)<br />Dynamic, reusable UI components<br />Fast, responsive rich int...
Overview – cont.<br />GWT provides a comprehensive set of tools to meet the challenge of developing modern rich Internet a...
Architecture<br />
Architecture –cont.<br />Java Source Code<br />CSS<br />JavaScript<br />GWT Compiler<br />GWT Class Library<br />
Cross browser, cross platform<br />
Who's Using It?<br />
http://ongwt.googlecode.com/svn/trunk/com.google.gwt.sample.showcase.Showcase/Showcase.html<br />Smart GWT showcase – Rich...
10<br />Documentation<br />GWT reference<br />Decent Javadoc<br />Active Forum<br />onGWT.com, GWT Site<br />Books<br />
Implementation<br />11<br />
Environment<br />Mac OS X<br />GWT 2.0.3<br />Eclipse 3.5<br />JDK 6<br />12<br />
Three way to create GWT Application<br />13<br />
Implementation Process<br />14<br />
Implementation Process<br />15<br />
Install the Plugin<br />http://code.google.com/intl/zh-TW/webtoolkit/usingeclipse.html<br />16<br />
Install the Plugin – cont.<br />17<br />
Install the Plugin – cont.<br />18<br />
Install the Plugin – cont.<br />19<br />
Install the Plugin – cont.<br />20<br />
Install the Plugin – cont.<br />Then restart your eclipse…<br />21<br />
Install the Plugin – cont.<br />22<br />
Implementation Process<br />23<br />
Create a GWT Web Application<br />Define your project and <br />package name<br />Click Finish button<br />24<br />
Create a GWT Web Application – cont.<br />Project structure<br />25<br />
Implementation Process<br />26<br />
Run Demo Application<br />Compile GWT project<br />27<br />
Run Demo Application – cont.<br />Run hello_gwt<br />Check Console tab to confirm if the server is ready to use or not<br ...
Run Demo Application – cont.<br />Click Send button<br />Show this popup window<br />29<br />
Implementation Process<br />30<br />
Create a clean HTML page<br />31<br />
Create a clean HTML page – cont.<br />Define file name<br />Click finish button<br />32<br />
Create a clean HTML page – cont.<br />33<br />
Implementation Process<br />34<br />
Start coding<br />35<br />Assign class name<br />Implement EntryPoint interface<br />Click Finish button<br />
36<br />
Start Coding – cont.<br />Modifyconfig file<br />Modify the entry point class<br />37<br />
38<br />Three main files<br />
Implementation Process<br />39<br />
Testing<br />Compile the GWT project<br />Run login.html<br />Click compile button<br />40<br />
Testing – cont.<br />Type in user name with incorrect password, and click Login button<br />41<br />
Testing – cont.<br />Type in user name with correct password, and click Login button<br />42<br />
Testing – cont.<br />Click Reset button to clear data<br />43<br />
http://code.google.com/intl/zh-TW/webtoolkit/usingeclipse.html<br />Beginning Google Web Toolkit From Novice to Profession...
Upcoming SlideShare
Loading in …5
×

GWT Quick Start

4,043 views
3,922 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,043
On SlideShare
0
From Embeds
0
Number of Embeds
970
Actions
Shares
0
Downloads
92
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

GWT Quick Start

  1. 1. GWT Quick Start<br />Albert Guo<br />junyuo@gmail.com<br />
  2. 2. Overview<br />Architecture<br />GWT Showcase<br />Documentation<br />Implementation<br />Reference<br />Agenda<br />2<br />
  3. 3. 3<br />Overview<br />Java Javascript compiler (!)<br />Dynamic, reusable UI components<br />Fast, responsive rich interface<br />Easy on the developer<br />Apache v2.0 license<br />
  4. 4. Overview – cont.<br />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.<br />4<br />
  5. 5. Architecture<br />
  6. 6. Architecture –cont.<br />Java Source Code<br />CSS<br />JavaScript<br />GWT Compiler<br />GWT Class Library<br />
  7. 7. Cross browser, cross platform<br />
  8. 8. Who's Using It?<br />
  9. 9. http://ongwt.googlecode.com/svn/trunk/com.google.gwt.sample.showcase.Showcase/Showcase.html<br />Smart GWT showcase – Rich widgets built using GWT<br />http://www.smartclient.com/smartgwt/showcase/<br />GWT Showcase<br />9<br />
  10. 10. 10<br />Documentation<br />GWT reference<br />Decent Javadoc<br />Active Forum<br />onGWT.com, GWT Site<br />Books<br />
  11. 11. Implementation<br />11<br />
  12. 12. Environment<br />Mac OS X<br />GWT 2.0.3<br />Eclipse 3.5<br />JDK 6<br />12<br />
  13. 13. Three way to create GWT Application<br />13<br />
  14. 14. Implementation Process<br />14<br />
  15. 15. Implementation Process<br />15<br />
  16. 16. Install the Plugin<br />http://code.google.com/intl/zh-TW/webtoolkit/usingeclipse.html<br />16<br />
  17. 17. Install the Plugin – cont.<br />17<br />
  18. 18. Install the Plugin – cont.<br />18<br />
  19. 19. Install the Plugin – cont.<br />19<br />
  20. 20. Install the Plugin – cont.<br />20<br />
  21. 21. Install the Plugin – cont.<br />Then restart your eclipse…<br />21<br />
  22. 22. Install the Plugin – cont.<br />22<br />
  23. 23. Implementation Process<br />23<br />
  24. 24. Create a GWT Web Application<br />Define your project and <br />package name<br />Click Finish button<br />24<br />
  25. 25. Create a GWT Web Application – cont.<br />Project structure<br />25<br />
  26. 26. Implementation Process<br />26<br />
  27. 27. Run Demo Application<br />Compile GWT project<br />27<br />
  28. 28. Run Demo Application – cont.<br />Run hello_gwt<br />Check Console tab to confirm if the server is ready to use or not<br />Click Development Mode tab to copy the testing url<br />28<br />
  29. 29. Run Demo Application – cont.<br />Click Send button<br />Show this popup window<br />29<br />
  30. 30. Implementation Process<br />30<br />
  31. 31. Create a clean HTML page<br />31<br />
  32. 32. Create a clean HTML page – cont.<br />Define file name<br />Click finish button<br />32<br />
  33. 33. Create a clean HTML page – cont.<br />33<br />
  34. 34. Implementation Process<br />34<br />
  35. 35. Start coding<br />35<br />Assign class name<br />Implement EntryPoint interface<br />Click Finish button<br />
  36. 36. 36<br />
  37. 37. Start Coding – cont.<br />Modifyconfig file<br />Modify the entry point class<br />37<br />
  38. 38. 38<br />Three main files<br />
  39. 39. Implementation Process<br />39<br />
  40. 40. Testing<br />Compile the GWT project<br />Run login.html<br />Click compile button<br />40<br />
  41. 41. Testing – cont.<br />Type in user name with incorrect password, and click Login button<br />41<br />
  42. 42. Testing – cont.<br />Type in user name with correct password, and click Login button<br />42<br />
  43. 43. Testing – cont.<br />Click Reset button to clear data<br />43<br />
  44. 44. http://code.google.com/intl/zh-TW/webtoolkit/usingeclipse.html<br />Beginning Google Web Toolkit From Novice to Professional<br />http://apress.com/book/view/9781430210313<br />GWT :<br />http://code.google.com/webtoolkit/<br />Forum :<br />http://groups.google.com/group/Google-Web-Toolkit<br />GWT Blog : <br />http://googlewebtoolkit.blogspot.com/<br />Reference<br />44<br />

×