Google Web Toolkit Paul Heiniz, Wolfgang Kluth, Jan Marten, Malte Behrendt Web Technologies – Prof. Dr. Ulrik Schroeder – WS 2010/111 The slides are licensed under a Creative Commons Attribution 3.0 License Creative Commons Attribution 3.0 License
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
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
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
Features Features of GWT Many ready-to-use Widgets Composites Web Technologies5
Features Disadvantages of GWT Dependence on Google Learning curve Example applications Orkut Google Wave Google Adwords Web Technologies6
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
In-Browser Development Mode Actual rendering is done in browser Code runs as Java Bytecode → Debugging! Web Technologies8
Java-to-JavaScript Compiler JRE 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
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
Web Technologies11 Design Patterns Challenges when building large scale applications Multiple developers working simultaneously Maintaining legacy functionality Messy code... Solution: separation of concerns (by Design Patterns) For example: Model-View-Controller
Design Pattern: MVP MVP: Structure application into Model: Encompass objects View: UI Components/Layout + UI Event Handling Presenter: Application Logic (AppController: Application Layer Logic) GWT 2.1 offers a MVP Framework Activities (Presenter) Places (UI State) Web Technologies12
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
Summary Web Technologies14
Hands – On - HelloWorld (GWT 1.x) Web Technologies15
Hands – On - HelloWorld (GWT 1.x) Hello World (GWT 1.x) Live Demonstration Show Developer Mode Show result/Hello World Web Technologies16
Hands – On - Hello World (GWT 2.1) Web Technologies17 UI XML-File:
Hands – On - Hello World (GWT 2.1) Web Technologies18 Java-Code:
Hands – On - Hello World (GWT 2.1) Hello World (GWT 2.1) Live Demonstration Result/Hello World Web Technologies19
Hands – On - Hello World (GWT 2.1) Live Demonstration Result/Hello World FieldVerifier Web Technologies20