Be dynamic! RichClient-Funktionalitäten mit dem Google Web Toolkit DOAG Konferenz 16. 18.11.2010, Nürnberg Julian Gärtner info@ordix.de www.ordix.de
Heutiges Ziel Einordnen von GWT in die Welt der Rich Internet Applications Aufbau und Funktionsweise Konkrete Anwendungsszenarien Aber: Kein Quellkode Be dynamic! RichClient-Funktionalitäten mit dem Google Web Toolkit 2 / 32
Agenda Web-Applikationen Das Google Web Toolkit Asynchrone Kommunikation Model View Controller Pattern Aufgabenstellung im konkreten Projekt Fazit Be dynamic! RichClient-Funktionalitäten mit dem Google Web Toolkit 3 / 32
Web-Applikationen Anforderungen Web-Applikationen versuchen native Desktop-Anwendungen zu ersetzen und stoßen mit ihrem klassischen Response/Request-Verhalten an technische Grenzen Steigende Nachfrage nach RichClient-Funktionalitäten Mischung aus Desktop- und Web-Anwendungen Verbindung der Flexibilität von Web-Anwendungen mit dem Komfort von Desktop-Applikationen Anwendungsbereiche und Plattformen Aktuell: Internetapplikationen in Desktop- und Mobil-Browsern Zukünftig Betrieb auf: Heimkinokomponenten, Spielekonsolen und Set-Top-Boxen Mobilen Endgeräten Be dynamic! RichClient-Funktionalitäten mit dem Google Web Toolkit 4 / 32
Web-Applikationen Richness Technische Lösungen zur Umsetzung von RichClient-Funktionen im Browser Applets/Plugins => Installierte Browser-Plugins JavaScript als Alternative, um ohne Installation von Plugins RIA-Funktionalitäten anzubieten Technologien für RichClient-Funktionalitäten (im Browser) JSF + a4j JSF+ Be dynamic! RichClient-Funktionalitäten mit dem Google Web Toolkit 5 / 32
Web-Applikationen RIA: Einordnung Pluginbasierend HTMLbasierend JSF JSF+ a4j JSF+ HTML 5 Klassische Web-Entwicklung Rich Internet Application Be dynamic! RichClient-Funktionalitäten mit dem Google Web Toolkit 6 / 32
Agenda Web-Applikationen Das Google Web Toolkit Asynchrone Kommunikation Model View Controller Pattern Aufgabenstellung im konkreten Projekt Fazit Be dynamic! RichClient-Funktionalitäten mit dem Google Web Toolkit 7 / 32
Das Google Web Toolkit Klassische Web-Entwicklung Be dynamic! RichClient-Funktionalitäten mit dem Google Web Toolkit 8 / 32
Das Google Web Toolkit Vielseitiger Werkzeugkoffer Be dynamic! RichClient-Funktionalitäten mit dem Google Web Toolkit 9 / 32
Das Google Web Toolkit Grundlagen Ermöglicht die Erstellung von moderne, hochdynamische Webseiten mit asynchroner Kommunikation (AJAX) Der Entwickler benutzt dabei fast ausschließlich Java und benötigt nur ein Minimum an Know-how im Bereich HTML und JavaScript Jede GWT-Applikation besteht lediglich aus einer einzelnen HTML-Seite JavaScript-Code verarbeitet Ergebnisse aus Benutzerinteraktion und Serverkommunikation durch Manipulation des Document Object Models (DOM) im Browser Be dynamic! RichClient-Funktionalitäten mit dem Google Web Toolkit 10 / 32
Das Google Web Toolkit Von Java zu Java Script Für die Ausführung einer Rich Internet Applikation in einem Browser OHNE Plugins wird zwangsläufig JavaScript benötigt Entwicklung größerer Programme mit JavaScript-Anteil komplex inkompatible JS-Implementierungen unterschiedliche Datenmodelle und Darstellungen in verschiedenen Browsern Komplexe Entwicklung und hoher Aufwand Be dynamic! RichClient-Funktionalitäten mit dem Google Web Toolkit 11 / 32
Das Google Web Toolkit Von Java zu Java Script JAVA Quellcode- Programmierung JavaScript Browserspezifisches JavaScript Lauffähig auf allen Browsern Be dynamic! RichClient-Funktionalitäten mit dem Google Web Toolkit 12 / 32
Das Google Web Toolkit Von Java zu Java Script GWT-Compiler übernimmt die Übersetzung von Java zu JavaScript / HTML und generiert den für jeden Browser spezialisierten und optimierten Code Aufruf der GWT-Seite: Universaler JavaScript-Code analysiert und identifiziert Browser, um browserspezifischen Code nachzuladen Generierung jeweils einer optimierten JS-Datei für jeden unterstützen Browser JS-Code standardmäßig maschinenoptimiert => PRETTY-Modus erzeugt lesbaren JS-Code Exponentiell steigende Anzahl von Kompilierungen bei Internationalisierung und Multi-Browser-Unterstützung GWT-Eclipse-Plugin: Breakpoints im Java-Code erlauben Frontend-JS- Debugging Be dynamic! RichClient-Funktionalitäten mit dem Google Web Toolkit 13 / 32
Das Google Web Toolkit UI >> Panels VerticalPanel PopupPanel TabPanel FlowPanel HorizontalPanel DisclosurePanel Be dynamic! RichClient-Funktionalitäten mit dem Google Web Toolkit 14 / 32
Das Google Web Toolkit UI >> Widgets Be dynamic! RichClient-Funktionalitäten mit dem Google Web Toolkit 15 / 32
Das Google Web Toolkit UIObject-Klassenhierarchie TabBar TabPanel UIObject SuggestBox Composite FileUpload Hidden Widget Hyperlink Image Label FocusWidget MenuBar TextBoxBase SimplePanel Panel ComplexPanel DisclosurePanel ListBox ButtonBase HTMLTable???? My Widget Be dynamic! RichClient-Funktionalitäten mit dem Google Web Toolkit 16 / 32
Agenda Web-Applikationen Das Google Web Toolkit Asynchrone Kommunikation Model View Controller Pattern Aufgabenstellung im konkreten Projekt Fazit Be dynamic! RichClient-Funktionalitäten mit dem Google Web Toolkit 17 / 32
Asynchrone Kommunikation Client/Server Die ausschließlich asynchrone Kommunikation mit dem Server ist ein zentraler Aspekt bei der Entwicklung von GWT-Applikationen Notwendigen Klassen zur Kommunikation von Client und Server werden von der GWT-API geliefert GWT-Client fordert Daten vom Server mittels eines Remote Procedure Calls (RPC) an Serverseitige Funktionalität als Servlet implementiert Erleichterte Integration in anderer Frameworks (z.b. Seam) Daten müssen serialisierbar sein, neben primitiven Datentypen können auch andere Strukturen (darunter Arrays) übermittelt werden Be dynamic! RichClient-Funktionalitäten mit dem Google Web Toolkit 18 / 32
Asynchrone Kommunikation Client Clientseitig ist ein Callback-Mechanismus notwendig, der die angeforderten Daten beim Eintreffen weiterverarbeitet Das Observer-Pattern spielt in diesem Zusammenhang in jeder GWT-Anwendung eine zentrale Rolle Auch die internen clientseitigen Ereignisse wie Mausklicks, Tastatureingaben oder Timersignale werden asynchron geliefert und müssen über entsprechende Handler verarbeitet werden Ohne einen strukturierten Plan zur Behandlung der Kommunikationsabläufe droht schnell ein nicht beherrschbares Chaos Achtung! JavaScript => Single Threaded Be dynamic! RichClient-Funktionalitäten mit dem Google Web Toolkit 19 / 32
Agenda Web-Applikationen Das Google Web Toolkit Asynchrone Kommunikation Model View Controller Pattern Aufgabenstellung im konkreten Projekt Fazit Be dynamic! RichClient-Funktionalitäten mit dem Google Web Toolkit 20 / 32
Model View Controller Pattern Grundlagen Ziel ist die Trennung von Haltung und Darstellung der Daten Abhängigkeiten sollen reduziert, ein hoher Wiederverwendungsgrad erreicht und eine gute Erweiterbarkeit sichergestellt werden Modell: Repräsentiert den Zustand der Daten View: Ist für die Darstellung zuständig Controller: Bindeglied zwischen Modell und View, benachrichtigt die View sobald die Daten an der Oberfläche aktualisiert werden müssen Be dynamic! RichClient-Funktionalitäten mit dem Google Web Toolkit 21 / 32