Google Web Toolkit

GWTGoogle 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

nur verwendete Frameworkteile werden mitgeliefert

compilieren

Der Compiler

Bild Compiler – die Problemstellung herkömmlich führt jedes Bild zu einer HTTP 

Abfrage

200 OK

GET dateiname.png

Der Compiler

Bild Compiler – die Lösung mehrere Bilder werden zu einem ImageBundle gleiche Dateigröße und dabei weniger HTTP 

RequestsGET 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

Sprachvariablen austauschen

compose = Neusync = Verschicken/Abrufen!reply = Antworten

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?