GWT Quick Start

GWT Quick StartAlbert Guo

junyuo@gmail.com

2

Overview Architecture GWT Showcase Documentation Implementation Reference

Agenda

3

Overview Java Javascript compiler (!)

Dynamic, reusable UI components

Fast, responsive rich interface

Easy on the developer

Apache v2.0 license

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.

Architecture

CSS

GWT Class Library

JavaScriptGWT

Compiler

Java Source Code

Architecture – cont.

Cross browser, cross platform

Who's Using It?

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

10

Documentation GWT reference

Decent Javadoc

Active Forum

onGWT.com, GWT Site

Books

11

Implementation

12

Environment

JDK 6

Eclipse 3.5

GWT 2.0.3

Mac OS X

13

Three way to create GWT Application

14

Implementation Process

15

Implementation Process

16

Install the Plugin

http://code.google.com/intl/zh-TW/webtoolkit/usingeclipse.html

17

Install the Plugin – cont.

18

Install the Plugin – cont.

19

Install the Plugin – cont.

20

Install the Plugin – cont.

21

Install the Plugin – cont.

Then restart your eclipse…

22

Install the Plugin – cont.

23

Implementation Process

24

Create a GWT Web Application

Define your project and package name

Click Finish button

25

Create a GWT Web Application – cont.

Project structure

26

Implementation Process

27

Run Demo Application

Compile GWT project

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

29

Run Demo Application – cont.

Click Send button

Show this popup window

30

Implementation Process

31

Create a clean HTML page

32

Create a clean HTML page – cont.

Define file name

Click finish button

33

Create a clean HTML page – cont.

34

Implementation Process

35

Start coding

Assign class name

Implement EntryPoint interface

Click Finish button

36

37

Start Coding – cont.

Modify config file

Modify the entry point class

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

39

Implementation Process

40

TestingCompile the GWT project

Run login.html

Click compile button

41

Testing – cont.Type in user name with incorrect password, and click Login button

42

Testing – cont.Type in user name with correct password, and click Login button

43

Testing – cont.

Click Reset button to clear data

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