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

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 browserCode runs as Java Bytecode → Debugging!

Web Technologies8

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

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

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

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