Google Web Toolkit

triangledriprockInternet and Web Development

Aug 7, 2012 (5 years and 11 months ago)

904 views

Google Web Toolkit
Faster 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 t oolkit for web applicat ion development

Java API

Tools
>
Java2JavaScript compiler

High performance JavaScript

Browser compatibility
>
Communit y


GWT Discussion Group (> 13 000 members)

6
What GWT is good for
>
The developer’s view

Single Language (Java)

Easy to learn

Aj ax 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 st ack

Web application

Web 2.0/Aj ax
>
Runs on

Servlet Engine

Maj or 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 t p://
code.google.com/webt oolkit/document at ion/j re.ht ml

14
Web UI class library
>
API t o build complex web- based User
Int erfaces
>
Feels like Swing/AWT or SWT
>
Cont ains Java widget s 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

Additional facilities
- Event handling
- Image bundles
- Internationalization (I18N)

15
Deferred Binding (1)
>
The problem = Your application runs in JavaScript

No Java Reflect ion and no dynamic class loading
>
The solution = Deferred binding

Binding occurs at compile- t ime
>
The Benefit = Only download what you need

Opt imize Download size and st art up 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 dat a back and fort h

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 complexit y 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 cont ract

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 widget s

Advanced Grids

Timeline widget

Google Maps Widget
>
Missing funct ionalit y

Spring integration

Hibernate integration

Data Binding

Google Gears Integration

21
Available third party libraries

htt p://code.google.com/p/google- web- toolkit- incubat or
/

htt p://code.google.com/p/gwt - maven/

htt p://code.google.com/p/gwittir/

htt p://code.google.com/p/gwt x/

htt p://www.asquare.net/gwttk/

htt p://www.gwtwindowmanager.org/

htt p://code.google.com/p/xmlrpc- gwt/

htt p://code.google.com/p/rocket - gwt/

htt p://gwt.bouwkamp.com/

htt p://j wc.sourceforge.net/cgi- bin/bin/view

htt p://code.google.com/p/gwt - voices/

htt p://ext j s.com/products/gxt/

htt p://gwt- widget.sourceforge.net/

htt p://code.google.com/p/emite/

htt p://code.google.com/p/mogowtools/

htt p://code.google.com/p/gwt - simple- persistence/

htt p://code.google.com/p/ht mltemplatewidget/

htt p://code.google.com/p/gwt - rest/

htt p://code.google.com/p/gwt - rolodex/

htt p://code.google.com/p/gdf/

htt p://hibernate4gwt.sourceforge.net/

htt p://code.google.com/p/gwt gmaps/

htt p://code.google.com/p/gwt - j sviz/

htt p://code.google.com/p/gwt - dnd/

htt p://code.google.com/p/gwt - advanced- table/

htt p://code.google.com/p/gwt - dom/

htt p://code.google.com/p/gchart/

ht tp://code.google.com/p/gwt - spring- hibernat e- reference/

ht tp://code.google.com/p/dwr4gwt/

ht tp://code.google.com/p/gwt x/

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/gwt similetimeline/

ht tp://code.google.com/p/gwt - xtender/

ht tp://code.google.com/p/gwt - obj ect- 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/gwt php/

ht tp://code.google.com/p/gwt - model/

ht tp://code.google.com/p/gwt dbcomp/

ht tp://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/gwt express/

ht tp://code.google.com/p/gwt - j sonizer/

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 utilities
>
Under the Apache License v2.0
ht t p://gwt - widget.sourceforge.net
/
Effects integration
Calculator
panel

23
hibernate4gwt
ht t p://hibernat e4gwt.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
ht t p://
www.gwt windowmanager.org
/
>
MDI (Multiple Document
Interface) framework
>
Desktop like environment
>
Dialog, Frames and task
bar
>
Different themes
>
Under the Apache License
v2.0

25
GTX (Ext GWT)
ht t p://
ext j s.com/product s/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
visualization
>
Zoomable
>
Keyboard and Mouse
control
>
Under the LGPL 2.1
>
Firefox, Safari and
Opera supported
>
IE work in progress
ht t p://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
>
proj ectCreator [- ant proj ectName] [- eclipse proj ectName] [- 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.But t on;

...
11
public class Demo implement s
EntryPoint
{
12
13
public void
onModuleLoad()
{
14
final But t on but t on = new But t on("Click me");
15
final Label label = new Label();

16
17
but t on.addClickList ener(new ClickList ener() {
18
public void onClick(Widget sender) {
19
if (label.get Text ().equals(""))
20
label.set Text ("Hello World!");
21
else
22
label.set Text ("");
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>
02
03

<inherits name='com.google.gwt.user.User' />
04

<inherits name='com.googlecode.gchart.GChart' />
05
06

<entry- point class='com.jazoon.client.Demo' />
07
08
</module>

34
Use GWT layouts

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

...
13
public class Demo implement s Ent ryPoint {

14
15
public void onModuleLoad() {
16
final DockPanel dockPanel = new
DockPanel
();
17
dockPanel.add(new HTML("< h1>Jazoon Demo</h1>"), DockPanel.NORTH)
;
18
But t on but t on = new But t on("Calculat e");
19
dockPanel.add(but t on, DockPanel.WEST);
20
but t on.addClickList ener(new ClickList ener() {
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
privat e GChart
createChart()
{

...
53
}

35
Use the gchart library
29
privat e GChart creat eChart () {
30
GChart chart = new GChart(400, 200);
31
chart.set Chart Tit le("Sine - Cosine");
32
chart.addCurve();
33
Curve curveSin = chart.getCurve();
34
curveSin.set LegendLabel("Sine");
35
chart.addCurve();
36
Curve curveCos = chart.get Curve();
37
curveCos.set LegendLabel("Cosine");

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

43
44
curveSin.get Symbol().set FillSpacing(5);
45
curveSin.get Symbol().set FillThickness(2);
46
curveCos.get Symbol().set FillSpacing(5);
47
curveCos.get Symbol().set FillThickness(2);
48
chart.updat e();
50
ret urn 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@cent risag.ch