Google Web ToolkitFaster AJAX than you can write by hand

Adrian Buerki

Centris AG, Switzerland

3580

2

AGENDA

> Overview (10’)

> Architecture (10’)

> Concepts (10’)

> Third party libraries (5’)

> Demo (10’)

> Q & A (5’)

3

AGENDA

> Overview – What GWT promises

– What GWT is

– What GWT is good for

> Architecture

> Concepts

> Third party libraries

> Demo

> Q & A

4

What GWT promises

> You write your front end in the Java programming language and GWT compiles your source into highly optimized JavaScript.

5

What GWT is

> A toolkit for web applicat ion development– Java API

– Tools

> Java2JavaScript compiler– High performance JavaScript

– Browser compatibility

> Community – GWT Discussion Group (> 13 000 members)

6

What GWT is good for

> The developer’s view– Single Language (Java)

– Easy to learn

– Ajax made easy

– Browser independent

> The management’s view– Backed by Google

– Fully Open Source (Apache License v. 2.0)

– Utilize the resources you already have (people and tools)

7

AGENDA

> Overview

> Architecture– Where GWT fits in

– GWT in the Java EE tiers model

– GWT components

> Concepts

> Third party libraries

> Demo

> Q & A

8

Where GWT fits in

> Java EE stack– Web application

– Web 2.0/ Ajax

> Runs on– Servlet Engine

– Major browsers with JavaScript support- IE 6 and 7- Firefox / Mozilla- Safari- Opera

9

GWT in the Java EE tiers model

10

Client tier and web tier separation softens

11

GWT components

12

AGENDA

> Overview

> Architecture

> Concepts– APIs

– Remote Procedure Calls

– Deferred Binding

> Third party libraries

> Demo

> Q & A

13

JRE Emulation Library

> Makes the translation of Java to JavaScript possible

> Only what is available in this library can be translated

> The emulation library contains :

– Parts of java.lang package

– Parts of java.util package

– The java.io.Serializable interface

– Attention with Regular Expressions

– Be careful using floating- point numbers

> In doubt, check: ht tp:/ /code.google.com/ webtoolkit / documentat ion/ jre.html

14

Web UI class library

> API to build complex web- based User Interfaces

> Feels like Swing/ AWT or SWT

> Contains Java widgets and panels– Pre- built components (so called Widgets)

- Buttons, text boxes, menus, dialogs…

– Panels to do the layout- Flow, horizontal, vertical and dock layout- Split panels, tabs and tables

– Addit ional facilit ies- Event handling- Image bundles- Internationalization (I18N)

15

Deferred Binding (1)

> The problem = Your applicat ion runs in JavaScript– No Java Reflect ion and no dynamic class loading

> The solut ion = Deferred binding– Binding occurs at compile- t ime

> The Benefit = Only download what you need– Optimize Download size and startup t ime

> The practice = In your code use– GWT.create(MyClass.class) instead of Class.forName("MyClass")

16

Deferred Binding (2)

17

Client/ Server communication (1)

> The problem = Send data back and forth– Transfer data from JavaScript to some server backend

> The solut ion = Remote Procedure Call– Server- side service is a servlet (Java)

> The Benefit = GWT hides complex ity and handles serializat ion– A call to the server feels like a regular method call– Calls are asynchronous (non- blocking)– Transfer everything that is serializable by Java rules

> The pract ice = Adhere RPC contract– Provide two interfaces and one class (a servlet)– Use Deferred Binding to access your service

18

Client/ Server communication (2)

19

AGENDA

> Overview

> Architecture

> Concepts

> Third party libraries– What are they good for

– Available libraries

– Some useful ones

> Demo

> Q & A

20

Third party libraries

> Missing widgets– Advanced Grids

– Timeline widget

– Google Maps Widget

> Missing funct ionality– Spring integration

– Hibernate integration

– Data Binding

– Google Gears Integration

21

Available third party libraries– http:/ / code.google.com/ p/ google- web- toolkit- incubator

/– http:/ / code.google.com/ p/ gwt- maven/– http:/ / code.google.com/ p/ gwitt ir/– http:/ / code.google.com/ p/ gwtx/– http:/ / www.asquare.net / gwttk/– http:/ / www.gwtwindowmanager.org/– http:/ / code.google.com/ p/ xmlrpc- gwt/– http:/ / code.google.com/ p/ rocket- gwt/– http:/ / gwt.bouwkamp.com/– http:/ / jwc.sourceforge.net/ cgi- bin/ bin/ view– http:/ / code.google.com/ p/ gwt- voices/– http:/ / ext js.com/ products/ gxt/– http:/ / gwt- widget.sourceforge.net/– http:/ / code.google.com/ p/ emite/– http:/ / code.google.com/ p/ mogowtools/– http:/ / code.google.com/ p/ gwt- simple- persistence/– http:/ / code.google.com/ p/ htmltemplatewidget/– http:/ / code.google.com/ p/ gwt- rest /– http:/ / code.google.com/ p/ gwt- rolodex/– http:/ / code.google.com/ p/ gdf/– http:/ / hibernate4gwt.sourceforge.net/– http:/ / code.google.com/ p/ gwtgmaps/– http:/ / code.google.com/ p/ gwt- jsviz/– http:/ / code.google.com/ p/ gwt- dnd/– http:/ / code.google.com/ p/ gwt- advanced- table/– http:/ / code.google.com/ p/ gwt- dom/– http:/ / code.google.com/ p/ gchart/

– ht tp:/ / code.google.com/ p/ gwt- spring- hibernate- reference/– ht tp:/ / code.google.com/ p/ dwr4gwt/– ht tp:/ / code.google.com/ p/ gwtx/– ht tp:/ / code.google.com/ p/ gwt- chronoscope/– ht tp:/ / code.google.com/ p/ struts2gwtplugin/– ht tp:/ / code.google.com/ p/ gwt- scheduler/– ht tp:/ / code.google.com/ p/ gwt- pf/– ht tp:/ / code.google.com/ p/ gwtsimilet imeline/– ht tp:/ / code.google.com/ p/ gwt- x tender/– ht tp:/ / code.google.com/ p/ gwt- object- exporter/– ht tp:/ / code.google.com/ p/ gwt- stuff/– ht tp:/ / code.google.com/ p/ geez/– ht tp:/ / code.google.com/ p/ webirc/– ht tp:/ / code.google.com/ p/ gwt lib/– ht tp:/ / code.google.com/ p/ gwtphp/– ht tp:/ / code.google.com/ p/ gwt- model/– ht tp:/ / code.google.com/ p/ gwtdbcomp/– http:/ / code.google.com/ p/ gwt- fx /– ht tp:/ / code.google.com/ p/ gwt- commons- logging/– ht tp:/ / code.google.com/ p/ xmlrpc- gwt/– ht tp:/ / code.google.com/ p/ lotura/– ht tp:/ / gwtiger.org/– ht tp:/ / code.google.com/ p/ gwt- google- apis/– ht tp:/ / code.google.com/ p/ gwtexpress/– ht tp:/ / code.google.com/ p/ gwt- jsonizer/– ht tp:/ / code.google.com/ p/ gwt- s3/– To be continued...

22

GWT- WL/ SL

> One of the first 3rd party libs

> Two parts:– GWT Server Library:

- Server side components- Focus on the Spring integration

– GWT Widget Library:- UI widgets- Client- side utilit ies

> Under the Apache License v2.0

http:/ / gwt- widget.sourceforge.net/

Effects integration

Calculator panel

23

hibernate4gwt

http:/ / hibernate4gwt.sourceforge.net /

> Integrate Hibernate (Java ORM) on the server- side

> Share Hibernate beans between server and client

> Under the Apache License v2.0

24

GWT Window Manager

http:/ / www.gwtwindowmanager.org/

> MDI (Mult iple Document Interface) framework

> Desktop like environment

> Dialog, Frames and task bar

> Different themes

> Under the Apache License v2.0

25

GTX (Ext GWT)

http:/ / ex t js.com/ products/ gxt/

> Wrapper for ExtJS

> Customizable UI widgets

> Theming support (CSS)

> Dual licensed under:

– Commercial License

– GNU GPL license v3

26

gwt- chronoscope

> Time series dataset visualizat ion

> Zoomable

> Keyboard and Mouse control

> Under the LGPL 2.1

> Firefox, Safari and Opera supported

> IE work in progress

http:/ / code.google.com/ p/ gwt- chronoscope/

27

AGENDA

> Overview

> Architecture

> Concepts

> Third party libraries

> Demo– Create project

– Include 3rd party library

– Run and debug

> Q & A

28

Create project for Eclipse> projectCreator [- ant projectName] [- eclipse projectName] [- out dir] [- overwrite]

[- ignore]

> applicationCreator [- eclipse projectName] [- out dir] [- overwrite] [- ignore] className

29

Import project into Eclipse

30

HTML Host Page

01 < html>02 < head> …14 < script type= "text/ javascript" language= "javascript"15 src= "com.jazoon.Demo.nocache.js"> < / script>16 < / head>17 < body> …28 < table>29 < tr>30 < td id= "slot1"> < / td>31 < td id= "slot2"> < / td>32 < / tr>33 < / table>34 < / body>35 < / html>

31

EntryPoint class ...

04 import com.google.gwt.user.client.ui.Button; ...

11 public class Demo implements EntryPoint {1213 public void onModuleLoad() {14 final Button button = new Button("Click me");15 final Label label = new Label(); 16

17 button.addClickListener(new ClickListener() {18 public void onClick(Widget sender) {19 if (label.getText().equals(""))20 label.setText("Hello World!");21 else22 label.setText("");23 }24 });25 RootPanel.get("slot1").add(button);26 RootPanel.get("slot2").add(label);27 }28 }

32

Running the demo project

33

Module XML with 3rd party library

01 < module>0203 < inherits name= 'com.google.gwt.user.User' / >04 < inherits name= 'com.googlecode.gchart.GChart' / >0506 < entry- point class= 'com.jazoon.client.Demo' / >0708 < / module>

34

Use GWT layouts ...

06 import com.google.gwt.user.client.ui.DockPanel; ...

13 public class Demo implements EntryPoint { 14

15 public void onModuleLoad() {16 final DockPanel dockPanel = new DockPanel();17 dockPanel.add(new HTML("< h1> Jazoon Demo< / h1> "), DockPanel.NORTH);18 Button button = new But ton("Calculate");19 dockPanel.add(button, DockPanel.WEST);20 button.addClickListener(new ClickListener() {21 public void onClick(Widget sender) {22 GChart chart = createChart();23 dockPanel.add(chart, DockPanel.CENTER);24 }25 });26 RootPanel.get().add(dockPanel);26 } 28 29 private GChart createChart() { ...

53 }

35

Use the gchart library29 private GChart createChart () {30 GChart chart = new GChart(400, 200);31 chart .setChartTit le("Sine - Cosine");32 chart.addCurve();33 Curve curveSin = chart.getCurve();34 curveSin.setLegendLabel("Sine");35 chart .addCurve();36 Curve curveCos = chart .getCurve();37 curveCos.setLegendLabel("Cosine"); 38

39 for (double i = 0.0; i < = (Math.PI * 2); i + = (Math.PI / 8)) {40 curveSin.addPoint(i, Math.sin(i));41 curveCos.addPoint(i, Math.cos(i));42 } 43

44 curveSin.getSymbol().setFillSpacing(5);45 curveSin.getSymbol().setFillThickness(2);46 curveCos.getSymbol().setFillSpacing(5);47 curveCos.getSymbol().setFillThickness(2);48 chart .update();50 return chart ;51 }

36

Running the gchart project

37

Debugging the gchart project> Set break point and run the hosted mode browser in debug mode

38

AGENDA

> Overview

> Architecture

> Concepts

> Third party libraries

> Demo

> Q & A– Questions

– Answers… If procurable ;- )

39

Q & A

Adrian Buerki http:/ / illfounded.net

Centris AG, Switzerland http:/ / www.centrisag.ch adrian.buerki@centrisag.ch