GWT
Google Web Toolkit
Referent: Torben Brodt
Veranstaltung: Fachseminar Webframeworks
Datum: 20.12.2007

Hello World!
Das klassische Codebeispiel


Java, Java, Java!
Programmieren in Java

Ausführen in Java

Testen in Java

Debuggen in Java

Verteilen in JavaScript !


Inhaltsverzeichnis
1. Der GWT Weg
2. Tools
Compiler, Hosted Browser, Framework
●
3. Vorteile des Paradigmas
4. Features + Demo + Coding
5. Fragen

Der GWT Weg
System­Sprache statt Auszeichnungssprache

GWT­ statt Swing­Klassen, aber Handling gleich

Der Code bleibt für Browser und Menschen lesbar

Programmiert wird in Systemsprache, wegen...

der riesigen Toolunterstützung

der Java Spracheigenschaften

Übersichtlichkeit trotz komplexer Systeme


Der GWT Weg
Ergebnis = kein Java, kein Applet, keine VM

einzige Voraussetzung: Browser

anderer Weg für selbes Ergebnis

JavaScript und Java sind zwar syntaktisch ähnlich,

aber bei dem Konzept hätte Google jede andere
Sprache wählen können (siehe Projekt: pyjamas)
Ähnlich Swing, aber kein SWING

Anwendung muss neu erstellt werden


Der Compiler
Code Compiler

erstellt eine statische HTML Datei als Container

pro Browser/Sprachkombination ein JavaScript

compilieren
nur verwendete Frameworkteile werden mitgeliefert


Der Compiler
Bild Compiler – die Problemstellung

herkömmlich führt jedes Bild zu einer HTTP

Abfrage
GET dateiname.png
200 OK

Der Compiler
Bild Compiler – die Lösung

mehrere Bilder werden zu einem ImageBundle

gleiche Dateigröße und dabei weniger HTTP

Requests
GET dateiname.png

Der Compiler
ImageBundles werden als Interfaces geschrieben

Will man Bilder nicht zentral verwalten, fasst man sie

durch ”ableiten” zusammen
Einbinden per HTML oder ImageProto


Der Compiler
ImageBundles werden als Interfaces geschrieben

Will man Bilder nicht zentral verwalten, fasst man sie

durch ”ableiten” zusammen
Einbinden per HTML oder ImageProto


Hosted Mode
Refresh synchronisiert mit Java­Code

Emuliert einen Browser

Oberfläche zum Exportieren in ”Web Mode”


Framework
java.lang und java.util sind nachimplementiert

Bedienelemente (Widgets) sind vorhanden

Vorteil durch Abstraktion

Das Web ist ein schnell mutierendes Umfeld

Viele Problemlösungen will man in 3 Monaten ganz

anders machen
Da man weit weg vom JavaScript Code ist, reicht

eine aktualisierte GWT.jar

Vorteile des Paradigmas
GWT ändert das Paradigma. Erstmals Typisierung

und Möglichkeiten zum Debuggen + Refactoren

Vorteile des Paradigmas
Beliebige Java IDE, da Einbindung per .jar

GWT ist zwar allein zur Frontendprogrammierung..

bringt aber dennoch einen Tomcat Server zur
Abrundung mit
Start per Button

Aktualisieren durch Browser Refresh

Vollständiges Debuggen möglich

Teamaufteilung ist besser möglich


Features
1.Bessere HTTP­Performance durch Verwendung von
ImageBundles und smarter Dateien
2.Programmiersprache für zeitgerechtes Programmieren
3.Gestaltungs­ und Bedienelemente
4.Realisierbare Usability
5.AJAX durch Remote Procedure Calls
6.Internationalisierung
7.Testing und Benchmarking

Gestaltungs­ und Bedienelemente
Panel für Widgets oder weitere Panels

ähnlich AWT/Swing Konzept in Java

TabPanel Horizontal­
SplitPanel

Gestaltungs­ und Bedienelemente
Widgets für Benutzerinteraktionen

Normale Formular­Elemente

Button, RadioButton, CheckBox, TextBox,

PasswordTextBox, TextArea, ListBox
Formularfreie Interaktionselemente

Hyperlink, HTML

Weitere Elemente aus Desktopwelt


Gestaltungs­ und Bedienelemente
Mail­Beispielclient.... erweitert :­)


Realisierbare Usability
Einfache Implementierung von Browserhistory

... und Bookmarkfunktionalität

Realisierbare Usability
Implementierung durch zentralen Controller, der URL

Parameter durchreicht
Implementierung von HistoryListener


Remote Procedure Calls
MailService (Interface)

Beschreibt das tatsächliche Aussehen

Wird vom Backend implementiert


Remote Procedure Calls
MailServiceAsync (Interface)

AJAX Implementierung (typisch void)

Wird vom Frontend implementiert


Remote Procedure Calls
emailService Proxy


Remote Procedure Calls
Backend

implementiert die Methoden von MailService

komplexe Datentypen erlaubt

Frontend Backend

Internationalisierung
Statische VS dynamische Internationalisierung

Statische bevorzugt, da neben Sprache auch

Eigenschaften (Zeit­ und Zahlenformate)
einfacher umgestellt werden können
Auswahl entweder automatisch, über URL oder

per Methodenaufruf

Internationalisierung
Mail.gwt.xml um Sprachmodul erweitern

Klasse implementieren (und instanziieren)

Property­Dateien anlegen

Mailboxes$Language.properties bzw ..._de.properties


Internationalisierung
Beispiel einer Property Datei

compose = Neu
sync = Verschicken/Abrufen!
reply = Antworten
Sprachvariablen austauschen


Wiederverwendung
alter JavaScript Code kann wiederverwendet werden

durch das Schlüsselwort native

Zugriff zurück auf Java durch spezielle Syntax

Arbeit mit window und document über $wnd und $doc


Testing & Benchmarking
JUNIT Integration in GWT über eigene Klasse

asynchrones Testen von Front­ bis Backend

durch Simulation von Verzögerung
Realisierung über versteckten GWT Browser

GUI­Erweiterung für Benchmarking


Fragen
Fragen?
