Introduction to Google Web ToolkitIntroduction to Google Web Toolkitpart-1part-1

1

Muhammad “Ghanoz” GhazaliMuhammad “Ghanoz” GhazaliJUG Bandung board memberJUG Bandung board member

2

Who am I?● Muhammad Ghazali a.k.a. Ghanoz● JUG Bandung board member● Mahasiswa “tingkat akhir” Teknik Informatika

Universitas Widyatama● Ketua himpunan mahasiswa teknik informatika

Universitas Widyatama● OSUM leader Universitas Widyatama

3

GWT(Google Web Toolkit)

4

Agenda➔ What is GWT➔ Why GWT➔ GWT can do what➔ Development Workflow➔ Major GWT components➔ GWT app run mode➔ Available widgets➔ GWT plugins for IDEs➔ Getting Started➔ Resources

5

What is GWT

6

Apa itu GWT● Web app framework● toolkit for building and optimizing complex

browser-based applications

7

Why GWT

8

Why GWT➔ GWT handles all cross-browser issues for the

developer.➔ Optimize the JavaScript script downloads based on

user profile➔ Google Web Toolkit is open source software

9

GWT can do what

10

GWT can do what➔ Help you to create an ajax-based web app using Java➔ Avoid you to write a JavaScript code to create a cool web

app➔ Give web app the feel of dektop app

11

Development workflow

12

Development workflow➔ Edit Java code, then view changes immediately without re-

compiling➔ Step through live AJAX code with your Java debugger➔ Compile and deploy optimized, cross-browser JavaScript

13

Major GWT components

14

Major GWT components➔ GWT Java-to-JavaScript Compiler

Java → JavaScript➔ GWT Hosted Web Browser

run and execute app in hosted mode, commonly used for debugging

➔ JRE emulation libraryJavaScript implementations of the commonly used classes in the Java standard class library

➔ GWT Web UI class libraryA set of custom interfaces and classes for creating widgets.

15

GWT app run mode

16

GWT app run mode● Hosted mode

Run as Java bytecode (within JVM). Used for development, supporting hot swapping of code and debugging.

● Web modeThe app run as pure JavaScript and HTML. Used for deployment.

17

Available widgets

18

Available widgets● HTML primitives (Button, Radio Button, Checkbox,

TextBox, PasswordTextBox, TextArea, Hyperlink, ListBox, Table etc.)

● PushButton, ToggleButton● MenuBar● Tree● TabBar● DialogBox●

19

Available widgets● Panels (PopupPanel, StackPanel, HorizontalPanel,

VerticalPanel, FlowPanel, VerticalSplitPanel, HorizontalSplitPanel, DockPanel, TabPanel, DisclosurePanel)

● RichTextArea● SuggestBox (auto-complete)

20

Available widgets

21

Available widgets

22

GWT plugin for IDEs

23

GWT plugin for IDEs● GWT4NB for NetBeans

https://gwt4nb.dev.java.net/● Cypal Studio for GWT

http://code.google.com/p/cypal-studio/● Eclipse

http://code.google.com/eclipse/

24

Getting Started

25

Getting started● Download GWT:

http://code.google.com/webtoolkit/download.html● GWT starting guide

http://code.google.com/webtoolkit/documentation/● GWT tutorial

http://code.google.com/webtoolkit/doc/latest/tutorial/● GWT FAQs

http://code.google.com/support/bin/topic.py?topic=10034

26

Resources

27

Resource● GWT homepage

http://code.google.com/webtoolkit/● GWT starting guide

http://code.google.com/webtoolkit/documentation/● GWT FAQs

http://code.google.com/support/bin/topic.py?topic=10034● GWT official Blog

http://googlewebtoolkit.blogspot.com/

28

Resource● GWT application examples

http://code.google.com/webtoolkit/examples/● GWT 2.0 Developers Guide

http://code.google.com/webtoolkit/doc/latest/DevGuide.html● Coding Basic

http://code.google.com/webtoolkit/doc/latest/DevGuideCodingBasics.html

● GWT official tutorial:http://code.google.com/webtoolkit/doc/latest/tutorial/

29

Questions?

30

Let's keep in touch...

Blog: http://muhammadghazali.web.id/blog

Facebook: Muhammad Ghanoz Ghazali

Twitter: @muhghazali

Plurk: http://plurk.com/muhammadghazali

GoogleTalk: muhammadghazali2480

e-mail:● muhammadghazali@netbeans.org

31

Thank You :)