Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
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 [email protected]