google web toolkit paul heiniz, wolfgang kluth, jan marten, malte behrendt web technologies –...
TRANSCRIPT
![Page 1: Google Web Toolkit Paul Heiniz, Wolfgang Kluth, Jan Marten, Malte Behrendt Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111 The slides are licensed](https://reader035.vdocuments.mx/reader035/viewer/2022062804/56649eb25503460f94bb87cb/html5/thumbnails/1.jpg)
Google Web Toolkit
Paul Heiniz, Wolfgang Kluth, Jan Marten, Malte Behrendt
Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111The slides are licensed under a
Creative Commons Attribution 3.0 License
![Page 2: Google Web Toolkit Paul Heiniz, Wolfgang Kluth, Jan Marten, Malte Behrendt Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111 The slides are licensed](https://reader035.vdocuments.mx/reader035/viewer/2022062804/56649eb25503460f94bb87cb/html5/thumbnails/2.jpg)
Outline Introduction Features of GWT In Browser Development Mode Java-to-JavaScript Compiler Server Communication Model-View-Presenter Design Pattern Hands-on
Hello World (GWT 1.x) Hello World (GWT 2.1) Hello World (GWT 2.1 RPC)
Summary
Web Technologies2
![Page 3: Google Web Toolkit Paul Heiniz, Wolfgang Kluth, Jan Marten, Malte Behrendt Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111 The slides are licensed](https://reader035.vdocuments.mx/reader035/viewer/2022062804/56649eb25503460f94bb87cb/html5/thumbnails/3.jpg)
Introduction What is GWT? Development Toolkit for Browser-based Applications
Application Development in Java Type-Safe Language No memory-leaks Testing with Junit Java-IDEs (Eclipse-Plugin)
Application Deployment in HTML/AJAX Java-to-JavaScript/HTML (AJAX) Compiler
Web Technologies3
![Page 4: Google Web Toolkit Paul Heiniz, Wolfgang Kluth, Jan Marten, Malte Behrendt Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111 The slides are licensed](https://reader035.vdocuments.mx/reader035/viewer/2022062804/56649eb25503460f94bb87cb/html5/thumbnails/4.jpg)
Features Core features of GWT
Java-to-JavaScript/HTML Compiler Highly optimized JavaScript Browser independence/Deferred Binding Easy Internationalization History Support Safe HTML JavaScript Native Interface
UI-Binder Code in Java, Layout in CSS
Developer Mode Local Testing and Debugging Speed Tracer
Web Technologies4
![Page 5: Google Web Toolkit Paul Heiniz, Wolfgang Kluth, Jan Marten, Malte Behrendt Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111 The slides are licensed](https://reader035.vdocuments.mx/reader035/viewer/2022062804/56649eb25503460f94bb87cb/html5/thumbnails/5.jpg)
Features Features of GWT
Many ready-to-use Widgets Composites
Web Technologies5
![Page 6: Google Web Toolkit Paul Heiniz, Wolfgang Kluth, Jan Marten, Malte Behrendt Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111 The slides are licensed](https://reader035.vdocuments.mx/reader035/viewer/2022062804/56649eb25503460f94bb87cb/html5/thumbnails/6.jpg)
Features Disadvantages of GWT
Dependence on Google Learning curve
Example applications Orkut Google Wave Google Adwords
Web Technologies6
![Page 7: Google Web Toolkit Paul Heiniz, Wolfgang Kluth, Jan Marten, Malte Behrendt Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111 The slides are licensed](https://reader035.vdocuments.mx/reader035/viewer/2022062804/56649eb25503460f94bb87cb/html5/thumbnails/7.jpg)
Outline Introduction Features of GWT In Browser Development Mode Java-to-JavaScript Compiler Server Communication Model-View-Presenter Design Pattern Hands-on
Hello World (GWT 1.x) Hello World (GWT 2.1) Hello World (GWT 2.1 RPC)
Summary
Web Technologies7
![Page 8: Google Web Toolkit Paul Heiniz, Wolfgang Kluth, Jan Marten, Malte Behrendt Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111 The slides are licensed](https://reader035.vdocuments.mx/reader035/viewer/2022062804/56649eb25503460f94bb87cb/html5/thumbnails/8.jpg)
In-Browser Development Mode
Actual rendering is done in browserCode runs as Java Bytecode → Debugging!
Web Technologies8
![Page 9: Google Web Toolkit Paul Heiniz, Wolfgang Kluth, Jan Marten, Malte Behrendt Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111 The slides are licensed](https://reader035.vdocuments.mx/reader035/viewer/2022062804/56649eb25503460f94bb87cb/html5/thumbnails/9.jpg)
Java-to-JavaScript CompilerJRE Emulation Library → used for developer mode
Most of java.lang Most of java.util Some java.io, java.sql
Compiler → Generates JavaScript from the Java source code JavaScript in GWT is like bytecode for Java Applications Optimization → often better than hand coding
Dead Code Elimination Constant Folding Copy Propagation String Interning …
Web Technologies9
![Page 10: Google Web Toolkit Paul Heiniz, Wolfgang Kluth, Jan Marten, Malte Behrendt Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111 The slides are licensed](https://reader035.vdocuments.mx/reader035/viewer/2022062804/56649eb25503460f94bb87cb/html5/thumbnails/10.jpg)
Server Communication GWT RPC
Based on/are Java Servlets
Other (HTTP-) RequestBuilder + JSON or XML JSNI Methods Third-Party libraries (e.g. for PHP)
Web Technologies10
![Page 11: Google Web Toolkit Paul Heiniz, Wolfgang Kluth, Jan Marten, Malte Behrendt Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111 The slides are licensed](https://reader035.vdocuments.mx/reader035/viewer/2022062804/56649eb25503460f94bb87cb/html5/thumbnails/11.jpg)
Web Technologies11
Design PatternsChallenges when building large scale applications
Multiple developers working simultaneouslyMaintaining legacy functionalityMessy code...
Solution: separation of concerns (by Design Patterns)
For example: Model-View-Controller
![Page 12: Google Web Toolkit Paul Heiniz, Wolfgang Kluth, Jan Marten, Malte Behrendt Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111 The slides are licensed](https://reader035.vdocuments.mx/reader035/viewer/2022062804/56649eb25503460f94bb87cb/html5/thumbnails/12.jpg)
Design Pattern: MVP
MVP: Structure application intoModel: Encompass objectsView: UI Components/Layout + UI Event HandlingPresenter: Application Logic(AppController: Application Layer Logic)
GWT 2.1 offers a MVP FrameworkActivities (Presenter)Places (UI State)
Web Technologies12
![Page 13: Google Web Toolkit Paul Heiniz, Wolfgang Kluth, Jan Marten, Malte Behrendt Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111 The slides are licensed](https://reader035.vdocuments.mx/reader035/viewer/2022062804/56649eb25503460f94bb87cb/html5/thumbnails/13.jpg)
Outline Introduction Features of GWT In Browser Development Mode Java-to-JavaScript Compiler Server Communication Model-View-Presenter Design Pattern Hands-on
Hello World (GWT 1.x) Hello World (GWT 2.1) Hello World (GWT 2.1 RPC)
Summary
Web Technologies13
![Page 14: Google Web Toolkit Paul Heiniz, Wolfgang Kluth, Jan Marten, Malte Behrendt Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111 The slides are licensed](https://reader035.vdocuments.mx/reader035/viewer/2022062804/56649eb25503460f94bb87cb/html5/thumbnails/14.jpg)
Summary
Web Technologies14
![Page 15: Google Web Toolkit Paul Heiniz, Wolfgang Kluth, Jan Marten, Malte Behrendt Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111 The slides are licensed](https://reader035.vdocuments.mx/reader035/viewer/2022062804/56649eb25503460f94bb87cb/html5/thumbnails/15.jpg)
Hands – On - HelloWorld (GWT 1.x)
Web Technologies15
![Page 16: Google Web Toolkit Paul Heiniz, Wolfgang Kluth, Jan Marten, Malte Behrendt Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111 The slides are licensed](https://reader035.vdocuments.mx/reader035/viewer/2022062804/56649eb25503460f94bb87cb/html5/thumbnails/16.jpg)
Hands – On - HelloWorld (GWT 1.x) Hello World (GWT 1.x)
Live Demonstration Show Developer Mode Show result/Hello World
Web Technologies16
![Page 17: Google Web Toolkit Paul Heiniz, Wolfgang Kluth, Jan Marten, Malte Behrendt Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111 The slides are licensed](https://reader035.vdocuments.mx/reader035/viewer/2022062804/56649eb25503460f94bb87cb/html5/thumbnails/17.jpg)
Hands – On - Hello World (GWT 2.1)
Web Technologies17
UI XML-File:
![Page 18: Google Web Toolkit Paul Heiniz, Wolfgang Kluth, Jan Marten, Malte Behrendt Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111 The slides are licensed](https://reader035.vdocuments.mx/reader035/viewer/2022062804/56649eb25503460f94bb87cb/html5/thumbnails/18.jpg)
Hands – On - Hello World (GWT 2.1)
Web Technologies18
Java-Code:
![Page 19: Google Web Toolkit Paul Heiniz, Wolfgang Kluth, Jan Marten, Malte Behrendt Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111 The slides are licensed](https://reader035.vdocuments.mx/reader035/viewer/2022062804/56649eb25503460f94bb87cb/html5/thumbnails/19.jpg)
Hands – On - Hello World (GWT 2.1) Hello World (GWT 2.1)
Live Demonstration Result/Hello World
Web Technologies19
![Page 20: Google Web Toolkit Paul Heiniz, Wolfgang Kluth, Jan Marten, Malte Behrendt Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111 The slides are licensed](https://reader035.vdocuments.mx/reader035/viewer/2022062804/56649eb25503460f94bb87cb/html5/thumbnails/20.jpg)
Hands – On - Hello World (GWT 2.1)
Live Demonstration Result/Hello World FieldVerifier
Web Technologies20