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 under a Creative Commons Attribution 3.0 License Creative Commons Attribution 3.0 License

2. 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

3. 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

4. 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

5. Features  Features of GWT  Many ready-to-use Widgets  Composites Web Technologies5

6. Features  Disadvantages of GWT  Dependence on Google  Learning curve  Example applications  Orkut  Google Wave  Google Adwords Web Technologies6

7. 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

8. In-Browser Development Mode  Actual rendering is done in browser  Code runs as Java Bytecode → Debugging! Web Technologies8

9. 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

10. 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

11. 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

12. 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

13. 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

14. Summary Web Technologies14

15. Hands – On - HelloWorld (GWT 1.x) Web Technologies15

16. Hands – On - HelloWorld (GWT 1.x)  Hello World (GWT 1.x)  Live Demonstration  Show Developer Mode  Show result/Hello World Web Technologies16

17. Hands – On - Hello World (GWT 2.1) Web Technologies17 UI XML-File:

18. Hands – On - Hello World (GWT 2.1) Web Technologies18 Java-Code:

19. Hands – On - Hello World (GWT 2.1)  Hello World (GWT 2.1)  Live Demonstration  Result/Hello World Web Technologies19

20. Hands – On - Hello World (GWT 2.1)  Live Demonstration  Result/Hello World  FieldVerifier Web Technologies20