Google Web Toolkit

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

Slide 2: Hello World! Das klassische Codebeispiel     

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

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

Slide 5: 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     

Slide 6: 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     

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

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

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

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

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

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

Slide 13: 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    

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

Slide 15: 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     

Slide 16: 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    

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

Slide 18: 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     

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

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

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

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

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

Slide 24: Remote Procedure Calls emailService Proxy     

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

Slide 26: 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    

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

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

Slide 29: 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     

Slide 30: 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     

Slide 31: Fragen Fragen? 