Google Web Toolkit

triangledriprockInternet και Εφαρμογές Web

7 Αυγ 2012 (πριν από 5 χρόνια και 11 μέρες)

784 εμφανίσεις

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