GWT. Martin Kluth Universität Osnabrück

Transkript

1 GWT Martin Kluth Universität Osnabrück Google hat durch das Google Web Toolkit (GWT) mitte 2006 ein AJAX-Framework vorgestellt, dass sich grundlegend von anderen, bisher verfügbaren AJAX-Frameworks, unterscheidet. Der bisherige Ansatz war, entweder client-seitig JavaScript-Komponenten anzubieten oder server-seitige Frameworks um AJAX-Funktionalitäten zu erweitern. Google stellt durch das GWT einen weiteren Ansatz vor. Hierbei wird die AJAX-Web-Anwendungen vollständig in Java entwickelt und Teile, die später auf dem Client ausgeführt werden sollen, aus dem Java-Code in JavaScript-Code überführt. Durch die ausschließliche Nutzung von Java, zur Erstellung der Anwendung, ergeben sich Besonderheiten in der Entwicklung, die, neben der allgemeinen Vorstellung des Frameworks, in dieser Seminararbeit vorgestellt werden sollen. Inhaltsverzeichnis 1 Einleitung Grundidee Features Historie Lizenz Verbreitung Das GWT-Framework Warum überhaupt ein Framework Architektur des GWT-Framework JavaScript Remote Procedure Call Widgets Struktur von GWT Anwendungen Programmieren mit dem GWT-Framework Erzeugen eines GWT-Projektes Erzeugen einer GWT-Anwendung Die erzeugte Anwendung Nach der Kompilierung Die Moduldatei Erstellung der Benutzerschnittstelle Erstellung eines Remote Procedure Calls Nutzung des Hosted Mode Vor- und Nachteile im Überblick... 25

2 1 Einleitung 2 1 Einleitung Bei der Erstellung aktueller Web-Anwendungen kommt meist Asynchronous JavaScript and XML (AJAX) zum Einsatz. Es ist das Kernelement der unter dem Schlagwort Web 2.0 bekannt gewordenen Web-Anwendungen, die dem Anwender ähnlichen Komfort bei der Bedienung bieten, wie es bei Desktop-Anwendungen der Fall ist. Hierbei werden bekannte Techniken kombiniert, um flüssige und bequem nutzbare Web-Anwendungen zu erstellen. Beispiele solcher Anwendungen sind Yahoo Mail 1, Google Maps 2 etc. Dem neuen Komfort für die Anwender steht allerdings ein höherer Entwicklungsaufwand gegenüber, der sich besonders in dem gestiegenen Aufwand zur Erzeugung der Benutzungsschnittstelle (GUI) der Web-Anwendung widerspiegelt. Hierbei kommt, bedingt durch AJAX, intensiv JavaScript zum Einsatz. Ein Beispiel ist hier der asynchrone Aufruf von Funktionen, um nur Teile der Web-Anwendung und nicht die gesamte Seite der Anwendung zu aktualisieren. Der Aufruf der Funktion auf dem Server sowie die Verarbeitung der Rückgabe des Servers geschieht hierbei durch JavaScript im Browser des Anwenders sowie durch Manipulation des Document Object Models (DOM). Die Kommunikation erfolgt mittels des Browser-Objekt XMLHttpRequest, um Daten in Form von XML oder JavaScript Object Notation auszutauschen. Die Komplexität der Entwicklung bedingt sich durch verschiedenartige Browser und JavaScript Versionen der Anwender. Im Idealfall sollte die Web-Anwendung für alle möglichen Browser-Versionen, diese bedingen auch meist die JavaScript-Version, nutzbar sein. Um dies zu ermöglichen müssen so genannte Browser-Weichen genutzt werden, welche die Version des genutzten Browsers abfragen und dann den speziell für diesen entwickelten Code ausführen. Im Extremfall kann dies zu einem für jeden Browser individuell angepassten JavaScript-Code führen. Zur Reduktion dieser Komplexität in der Entwicklung wurden daher in der jüngsten Vergangenheit immer mehr AJAX-Frameworks entwickelt. Diese Frameworks bieten dem Entwickler Komponenten, die er nutzen bzw. wieder verwerten kann. Die Komponenten zeichnen sich dadurch aus, dass sie insofern einen Komfort bei der Entwicklung bieten, dass die Implementierung dieses Browser-spezifischen Codes schon in den Komponenten enthalten ist und der Entwickler sich um deren Entwicklung nicht kümmern muss. Bekannte Vertreter solcher Frameworks sind The Yahoo! User Interface Library (YUI) 3, Prototype 4 etc. als client-seitige JavaScript-Bibliotheken. Als Erweiterungen für bestehende server-basierte Web-Frameworks können ASP.NET AJAX 5, OpenLaszlo 6 etc. genannt werden. Bei der Nutzung von client-seitigen JavaScript-Bibliotheken, werden diese in die Seite mit eingebunden und der Entwickler konsumiert bzw. nutzt diese per JavaScript. Im Gegensatz hierzu stehen die Erweiterungen bestehender server-basierter Web-Frameworks, welche die Komponenten, die server-seitig Code erzeugen, um AJAX-Funktionalitäten erweitern. Einen etwas anderen Weg geht hier das Google Web Toolkit (GWT). Die Entwicklung der gesamten Anwendung geschieht mittels Java und Teile des Codes werden durch einen Compiler in JavaScript kompiliert. 1.1 Grundidee Die Grundidee des GWT-Frameworks ist, die gesamte Anwendung in Java zu erstellen, zu debuggen und zu testen. Hierzu kann die potentielle Web-Anwendung in einer virtuellen Java-Maschine ausgeführt werden, dem so genannten Hosted Mode, und in einem Hosted Mode Browser angezeigt werden, der in einem Prozess dieser virtuellen Maschine läuft. In diesem Modus kann die Anwendung mit jeder beliebigen Java-Entwicklungsumgebung gedebuggt werden. Ist das Ergebnis der Entwicklung zufriedenstellend, so kann die Anwendung durch den GWT-Compiler teilweise nach JavaScript kompiliert werden und so in jedem Browser 1 Siehe [Stand: ] 2 Siehe [Stand: ] 3 Siehe [Stand: ] 4 Siehe [Stand: ] 5 Siehe [Stand: ] 6 Siehe [Stand: ]

3 1 Einleitung 3 gestartet werden, dem so genannten Web Mode. Google fasst das Hauptziel, die ausschließliche Entwicklung der Web-Anwendung mittels Java, folgendermaßen auf ihrer Webseite zusammen: Google Web Toolkit (GWT) is a Java software development framework that makes writing AJAX applications like Google Maps and Gmail easy for developers who don't speak browser quirks as a second language. 7 Um diese Ziel zu erreichen, stellt das GWT neben einer Sammlung vorgefertigter GUI-Komponenten, so genannte Widgets, auch Lösungen für asynchrone Remote Procedure Calls (RPC), Internationalisierung, Management der Browser-Historie, Browser-Portabilität sowie eine Erweiterung für JUnit-Tests zur Verfügung. Durch diese Bündel an Features muss der Entwickler nicht mehr umständlich JavaScript-Code entwickeln und diesen für jeden Browser testen und debuggen, sondern kann die Vorteile der Java-Entwicklungsumgebungen (IDE) nutzen. Hierzu zählen zum Beispiel das Refactoring und die JUnit-Integration in die IDE. Auch ist die Einstiegshürde für Java-Entwickler niedriger, um AJAX-Web-Anwendungen zu erstellen. Zusammengefasst lassen sich folgende Ziele identifizieren: 1. Erstellung von AJAX-Web-Anwendungen ausschließlich mittels Java. 2. Komfort- und Produktivitätsgewinn bei der Erstellung von AJAX-Web-Anwendungen. 3. Effektive, effiziente und robuste Entwicklung von AJAX-Web-Anwendungen. Da, aufgrund des Ansatzes der Kompilierung von JavaScript- aus Java-Code, client-seitig eine Blackbox existiert, muss theoretisch für jedes Sprachkonstrukt aus Java eine entsprechende Repräsentation in JavaScript existieren. Da JavaScript nicht so mächtig ist wie Java, existiert die Einschränkung, dass nur Sprachkonstrukte aus Java 1.4 zulässig sind. So werden zum Beispiel Schlüsselwörter wie synchronized oder assert ignoriert. Restriktiv ist auch die mögliche Verwendung von Klassen aus der Java-Klassenbibliothek. Die JRE Emulation Library lässt nur eine kleine Auswahl von Klassen aus den Paketen java.lang und java.util zu. Da der Code, der client-seitig ausgeführt werden soll, allerdings meist relativ einfach ist, ist dies keine wirkliche Einschränkung. Größere Operationen wird man auch weiterhin auf dem Server ausführen, wo weiterhin alle Möglichkeiten, die Java bietet, dem Entwickler zur Verfügung stehen. 1.2 Features Im folgenden sollen die Features des GWT-Frameworks kurz skizziert werden, um so einen Überblick über das gesamte Framework zu bieten. 8 Dynamische, wieder verwertbare UI-Komponenten (Widgets) Widgets sind Teilkomponenten der Benutzerschnittstelle (UI). Als einfache Beispiele können hier eine Textbox oder ein Button genannt werden. Weitaus komplexere Widgets sind zum Beispiel eine Rich-Textbox oder eine Komponente, welche eine Geokarte anzeigt. Elementare Widgets werden vom GWT-Framework angeboten und ermöglichen eine ähnliche Programmierung des UI wie mittels Swing 9. Lösung für asynchrone RPC's Remote Procedure Calls sind zentraler Bestandteil jeder AJAX-Web-Anwendungen. Genutzt wird hierzu, wie eingangs beschrieben, das XMLHttpRequest-Object, welches von den einzelnen Browser unterschiedlich genutzt bzw. implementiert ist. Das GWT-Framework bietet eine Abstraktion über die komplexe Entwicklung mit dieser Funktionalität. Nutzung der Browserhistorie In den meisten AJAX-Web-Anwendungen ist es nicht möglich die Browserhistorie, wie zum Beispiel den Back-Button, zu nutzten. Durch Nutzung des GWT-Framework kann diese Funktionalität auch weiter angeboten werden. 7 Siehe [Stand: ] 8 Siehe [Stand: ] 9 Siehe [Stand: ]

4 1 Einleitung 4 Hosted-Mode zum debuggen der Anwendung in Java Durch dieses zentrale Feature ist es möglich, die Anwendung in Java zu testen und zu debuggen. Alle gängigen Browser wie der InternetExplorer, Firefox, Safari und Opera werden unterstützt. JUnit-Integration Durch die Junit-Intergration in das GWT-Framework ist es sehr leicht, Unit-Tests der Anwendung in Java zu entwickeln. Auch hierfür kann die gute Integration von Unit-Tests in Entwicklungsumgebungen genutzt werden. Internationalisierung Es wird eine komfortable Unterstützung bei der Internationalisierung der AJAX-Web-Anwendung geboten. Erweiterbar durch eigenen JavaScript-Code (JSNI) Auch wenn durch das GWT im Idealfall kein JavaScript-Code entwickelt werden muss, ist das Framework durch eigenen JavaScript-Code erweiterbar. Hierzu kann das JavaScript Native Interface (JSNI) 10 genutzt werden. Nutzung anderer Java-Frameworks Es können weitere in der Praxis oft eingesetzte Java- und Web-Frameworks sowie Build-Tools genutzt werden. Hierzu zählen zum Beispiel Hibernate 11, Springframework 12, Acegi Security 13, Google Gears 14 sowie Apache Ant 15 und Maven Historie Das GWT-Framework ist noch ein sehr junges Projekt, das in der Version 1.0 zum ersten mal am vorgestellt wurde. Eine Übersicht der Versionen bietet Abbildung 'Historie'. Abbildung: Historie 1.4 Lizenz Das GWT darf für kommerzielle Projekte genutzt werden. Die Java API Libraries (Klassenbibliotheken) sind Open-Source, was bei einigen Problemen sehr hilfreich sein kann, da man sich die genaue Implementierung ansehen kann. Die Entwicklungswerkzeuge Java-to-JavaScript cross-compiler und der Hosted Mode Browser sind kein Open-Source und dürfen nur mit ausdrücklicher Genehmigung durch Google weiter gegeben werden. 10 Siehe [Stand: ] 11 Siehe [Stand: ], [Stand: ] 12 Siehe [Stand: ] 13 Siehe [Stand: ] 14 Siehe [Stand: ] 15 Siehe [Stand: ] 16 Siehe [Stand: ]

5 1 Einleitung 5 In der Praxis dürfte dies kaum zu Problemen führen, da diese Komponenten nur zur Entwicklung genutzt werden müssen. Weit problematischer ist, dass sich Google vorbehält die Lizenzbedingungen in Zukunft jederzeit ändern zu können Verbreitung Aufgrund der kurzen Zeitspanne seit Veröffentlichung der ersten Version des GWT-Frameworks ist die Verbreitung noch nicht sehr hoch (siehe Abbildung 'Umfrage genutzter AJAX-Frameworks'). Etablierte Frameworks wie Prototype können auf eine viel höhere Verbreitung verweisen. Zur Ermittlung der Verbreitung der aufgeführten Frameworks haben sich 865 Personen an einer von Ajaxian.com 18 durchgeführten Umfrage beteiligt. Abbildung: Umfrage genutzter AJAX-Frameworks 19 Werden die Ergebnisse der gleichen Umfrage allerdings nur auf die Programmiersprache Java übertragen, so ergibt sich eine höhere Verbreitung (siehe Abbildung 'Umfrage genutzter AJAX-Frameworks in Java Projekten'). 17 Siehe [Stand: ] 18 Siehe [Stand: ] 19 Siehe [Stand: ]

6 1 Einleitung 6 Abbildung: Umfrage genutzter AJAX-Frameworks in Java Projekten 20 Nimmt man weiterhin die Seiten als Anhaltspunkt, die sich mit dem GWT beschäftigen bzw. Widgets anbieten, so kann auch hierdurch auf eine intensive Auseinandersetzung mit dem Framework geschlossen werden. 21 Weiterhin sind seit Februar 2007 vier Bücher über das GWT-Framework veröffentlicht worden und noch zwei weitere bis April 2008 angekündigt. 20 Siehe [Stand: ] 21 Eine Übersicht von Open-Source Widgets bietet: [Stand: ]

7 2 Das GWT-Framework 7 2 Das GWT-Framework Im folgenden soll das GWT-Framework und seine Features beschrieben und einzelnen Problembereichen von AJAX-Web-Anwendungen zugeordnet werden. Hierzu wird zunächst der generelle Einsatz von Frameworks motiviert. Anhand der Vorteile, die sich durch den Einsatz von Frameworks ergeben, können die einzelnen Features in diesem Kontext beschrieben und diskutiert werden. Auf die generelle Beschreibung von Frameworks folgt ein Überblick über die Architektur des GWT-Frameworks sowie eine genauere Beschreibung der Nutzung einzelner Techniken und Features. 2.1 Warum überhaupt ein Framework Der Einsatz von Frameworks ist motiviert durch immer wiederkehrende Aufgaben und Anforderungen an Anwendungen und die daraus resultierende ständige Wiederholung von Entwicklungsaktivitäten. 22 Durch den Einsatz von Frameworks können Rahmenbedingungen der Entwicklung festgelegt werden, als auch Komponenten angeboten werden, die von den Entwicklern genutzt werden können. Es muss hierdurch nicht immer das Rad neu erfunden werden. Die konkrete Implementierung innerhalb der Komponenten muss im Idealfall nicht angepasst werden und die Komponente stellt Funktionen bereit, die der Entwickler nutzen kann, ohne die konkrete Implementierung zu kennen. Als allgemeines und übergeordnetes Ziel aller Frameworks kann die effektive, effiziente und robuste Entwicklung von Anwendungen genannt werden. Man erreicht dieses Ziel durch den Einsatz von Funktionsbibliotheken, die in das Projekt eingebunden werden. Eine Funktionsbibliotheken enthält wiederverwendbaren und intensiv getesteten Code. Ein Beispiel bei einem AJAX-Framework wäre eine Komponente die Geokarten in einem Web-Browser darstellen kann. Die Komponente würde zum Beispiel eine Funktion anbieten, der Geokoordinaten übergeben werden und die diese dann in der Karte darstellt. Die Umrechnung der Geokoordinaten auf einen Punkt in der Karte würde die Komponente übernehmen und wäre für den Entwickler nicht selber zu implementieren. Die Qualität solcher Funktionen wird durch die Herausgeber solcher Frameworks sichergestellt. Man verlangt hierbei, dass nur intensiv getesteter Code durch ein solches Framework ausgeliefert wird. Durch die komplexe Entwicklung von Benutzungsschnittstellen bei AJAX-Web-Anwendungen, zum Beispiel durch das unterschiedliche Verarbeiten von JavaScript der Browser, haben sich in diesem Bereich viele Frameworks entwickelt. Bei den einzelnen Frameworks werden zum Teil sehr unterschiedliche Ansätze gewählt. In diesem Bereich nimmt das GWT-Framework eine Sonderrolle ein, da es durch das vermeiden der JavaScript-Programmierung einen neuen und innovativen Ansatz bietet. 2.2 Architektur des GWT-Framework Die Architektur des GWT-Framework besteht aus vier grundlegenden Komponenten (siehe Abbildung 'Architektur des GWT-Framework'). 22 Motiviert wurde die Wiederverwendbarkeit von Code durch einen Artikel von Ralph E. Johnson & Brian Foote (Designing Reusable Classes, 1988). Der Artikel kann auch unter [Stand: ] gefunden werden.

8 2 Das GWT-Framework 8 Abbildung: Architektur des GWT-Framework 23 GWT Java-to-JavaScript Compiler Der GWT Java-to-JavaScript Compiler übersetzt den Java-Code in JavaScript-Code. Er wird genutzt, um die GWT-Anwendung im Web Mode ausführen zu können. Er erstellt für jeden der unterstützten Browser eine HTML-Datei mit Browser-spezifischem JavaScript-Code. GWT Hosted Web Browser Der GWT Hosted Web Browser ermöglicht es, die Anwendung im Hosted Mode zu betreiben. Der Code der Anwendung läuft als Java in der Java Virtual Machine ohne zu JavaScript kompiliert zu sein. JRE emulation library Das GWT enthält JavaScript Implementierungen für die meist genutzten Klassen der Java Standard Class Library. Hierzu gehören die meisten Klassen des Package java.lang sowie eine Untermenge der Klassen des Package java.util. Weitere Klassen, wie zum Beispiel java.io, werden nicht unterstützt. GWT Web UI class library Die GWT Web UI class library ist eine Menge von Interfaces und Klassen, die zur Entwicklung eigener Widgets genutzt werden kann. 2.3 JavaScript JavaScript wird größtenteils durch den GWT Java-to-JavaScript Compiler automatisch erstellt. Der Compiler erzeugt den JavaScript-Code standardmäßig in unleserlicher komprimierter (obfuscated) Form. Hierdurch kann der Code schneller vom Server an den Client übertragen werden. Dies kann jedoch zu Entwicklungszwecken so konfiguriert werden, dass der Code lesbar ist. Die Anwendung kann, falls dies nötig ist, mit handgeschriebenen JavaScript-Code innerhalb von Java gemischt werden. Hierfür muss das JavaScript Native Interface (JSNI) genutzt werden. Allerdings ist die Nutzung von JSNI laut Google zu vermeiden, da die Browser-Portabilität dann vom JavaScript-Code abhängt und der GWT-Compiler weniger Optimierungsmöglichkeiten hat. 2.4 Remote Procedure Call Durch die RPC-Schnittstelle muss sich der Entwickler nicht mehr direkt um die Details der asynchronen Kommunikation mittels HttpXMLRequest oder der Serialisierung von Objekten kümmern. Der in Java-Code 23 Siehe [Stand: ]

9 2 Das GWT-Framework 9 entwickelte RPC-Service muss das RemoteServiceServlet erweitern und die RemoteService Schnittstelle des GWT implementieren. Weiterhin muss eine synchrone und eine asynchrone Schnittstelle mit den vom Service angebotenen Operationen existieren. Die Kommunikation mit dem Service erfolgt dann im Client-Code über die asynchrone Schnittstelle (siehe Abbildung 'Übersicht Remote Procedure Call'). Abbildung: Übersicht Remote Procedure Call 24 Dem Service können sämtliche serialisierbaren Klassen übergeben werden. Benutzerdefinierte Klassen sind serialisierbar, wenn sie die Schnittstelle IsSerializable implementieren und Attribute mit serialisierbaren Typen enthalten. Um Typeinschränkungen zu umgehen, kann auch das Design Pattern des Data Transfer Object (DTO) 25 genutzt werden. Das Datenformat zum Austausch zwischen Client und Server ist weder die Extensible Markup Language (XML) noch die JavaScript Object Notation (JSON). Statt dessen wird ein proprietäres Format verwendet. Allerdings kann dies auch so konfiguriert werden, dass eines der gebräuchlichen Formate genutzt wird. Die Rückgabe der Aufrufe erfolgt über die zwei Funktionen onsuccess() und onfailure(). Der Client kann aufgrund dieser beiden Funktionen unterscheiden, ob der Aufruf funktioniert hat oder nicht. 2.5 Widgets Ein Widget ist im GWT-Framework ein eigenständiger Teil der Benutzerschnittstelle der Anwendung, welches eine spezielle Funktion oder Anzeige als Teil eines übergeordneten Konzepts übernimmt. Diese Komponenten sind wiederverwertbar und können über so genannte Panels, welche auch wiederum Widgets sind, auf der 24 Siehe [Stand: ] 25 Siehe [Stand: ]

10 2 Das GWT-Framework 10 Seite angeordnet werden. Eine kleine Auswahl von Widgets, die durch das GWT mitgeliefert werden, sind in Abbildung 'Widget Beispiele' dargestellt. 26 Abbildung: Widget Beispiele Zu den mitgelieferten Widgets zählen einfache, wie Textboxen oder Button, aber auch komplexere, wie ein Tree- oder RichText-Widget. Durch die standardmäßig mitgelieferten Widgets sollte die Erstellung üblicher AJAX-Web-Anwendungen möglich sein. Das GWT bietet weiterhin die Möglichkeit, selber Widgets zu entwickeln. Diese können getauscht oder vertrieben werden. Jedes eigen entwickelte Widget muss hierzu die Klasse Composite erweitern. Die Klassenstruktur der GWT-Widgets ist in Abbildung 'GWT-Widgets Klassenstruktur' dargestellt. 26 Eine komplette Übersicht findet sich unter [Stand: ]

11 2 Das GWT-Framework 11 Abbildung: GWT-Widgets Klassenstruktur 2.6 Struktur von GWT Anwendungen Im folgenden soll die Struktur von GWT-Anwendungen beschrieben werden. Durch den Einsatz des Frameworks wird automatisch eine Struktur erzeugt, welche die einzelnen Schichten der Anwendung in einzelne Packages verteilt. Das GWT-Projekt setzt sich dabei aus einem oder mehrere Module zusammen. Ein Modul besteht dabei aus Client-Code, Server-Code (optional), mindestens einer HTML-Datei sowie ggf. CSS- oder Bild-Dateien. Diese einzelnen Bestandteile des Projektes werden in einzelne Packages verteilt, so dass der Gebrauch sofort ersichtlich ist und die Anwendung klar strukturiert ist. Jedes Modul gliedert sich hierbei in die folgenden Packages: Subpackage 'client' Dieses Package enthält alle Klassen, die nach JavaScript kompiliert werden. Darin befindet sich auch die Einstiegsklasse (Entry-Point) der Anwendung bzw. des Moduls. Subpackage 'public' In diesem Package sind alle statischen Inhalte wie HTML-, Bild- und CSS-Dateien enthalten. Subpackage 'server' Das Subpackage enthält alle Services die für Remote Procedure Calls genutzt werden können. Ein wichtiger Bestandteil jedes GWT-Projektes bzw. jedes Moduls ist die Moduldatei. Sie enthält alle Definitionen die für das Modul nötig sind. Hierzu zählt unter anderem auch die Definition der Einstiegsklasse das verwendete Stylesheet sowie die Definitionen der genutzten Objekte, Services und Widgets. Die Moduldatei bestimmt durch ihre Definitionen maßgeblich die Größe des späteren client-seitigen Codes, da nur die darin definierten Komponenten in JavaScript kompiliert werden. Die Definition erfolgt, wie in fast allen Frameworks üblich, in XML. Jede GWT-Anwendung erbt mindestens von dem Modul User, welches einen Großteil der

12 2 Das GWT-Framework 12 GWT-Funktionalität abdeckt. Möchte man die Anwendung zum Beispiel mit verschiedenen Sprachen ausliefern, so bindet man das Modul I18N mit ein. Die Einstiegsklasse (Entry-Point) unterscheidet sich in sofern von anderen Klassen, als das sie zwingend eine Funktion onmoduleload() enthalten muss, welche beim Start der Anwendung ausgeführt wird.

13 3 Programmieren mit dem GWT-Framework 13 3 Programmieren mit dem GWT-Framework Im folgenden wird die Programmierung mittels des GWT-Framework an einem Beispiel erläutert. Hierzu wird zunächst die Erstellung eines Eclipse-GWT-Projektes gezeigt und hierauf aufbauend die Erstellung der GWT-Anwendung. Für beide Aufgaben bietet das GWT-Framework Skripte an, die in der Standardinstallation enthalten sind. Im darauf folgenden Kapitel wird das Ergebnis des Aufrufs dieser Skripte erläutert. Es folgt weiterhin eine kurze Erläuterung zur Erstellung der Benutzerschnittstelle sowie von Remote Procedure Calls. Dieses Kapitel endet dann mit einer Erläuterung zur Nutzung des Hosted Mode Browsers. Abbildung: Ablauf GWT-Programmierung 27 Der grundsätzliche Ablauf der Programmierung mittels GWT ist in Abbildung 'Ablauf GWT-Programmierung' dargestellt. Der Entwickler programmiert mittels Java zunächst die Benutzerschnittstelle (1. Write) sowie das GWT-Servlet (2. Write). Bei der Programmierung der Benutzerschnittstelle nutzt er Widgets und Panels sowie Teile der Java Runtime Library. Im nächsten Schritt werden die Teile der Benutzerschnittstelle in JavaScript-Code kompiliert (3. Compile) und können dann getestet werden (4. Run/Test). 27 Siehe [Stand: ]

14 3 Programmieren mit dem GWT-Framework Erzeugen eines GWT-Projektes Die Erzeugung eines Eclipse-GWT-Projektes erfolgt durch den Aufruf des Skriptes projectcreator, wie in Abbildung 'Aufruf projectcreator' dargestellt. Abbildung: Aufruf projectcreator Das Skript liegt im Root-Ordner der GWT-Installation und erzeugt hier, durch die Angabe der Parameter -eclipse, example1 und -out example1, ein Eclipse-Projekt mit dem Namen example1 in dem Ordner example Erzeugen einer GWT-Anwendung Durch den vorherigen Aufruf von projectcreator wurde bisher nur das Projekt erzeugt. Um eine GWT-Anwendung zu erzeugen, kann analog ein weiteres Skript genutzt werden. Abbildung: Aufruf applicationcreator Der Aufruf des Skripts applicationcreator erfolgt in diesem Beispiel mit den Parametern -eclipse, example1, -out example1 sowie de.webpublisching.client.helloworld. Die Bedeutung der ersten drei Parameter ist analog zu den Parametern von projectcreator. Der letzte Parameter gibt den Modulnamen bzw. den Entry-Point der Anwendung an. 3.3 Die erzeugte Anwendung Das Ergebnis durch den Aufruf der beiden Skripte ist in Abbildung 'Ergebnis der Skripte projectcreator und applicationcreator' dargestellt. Es wurde eine vollständig lauffähige GWT-Anwendung erzeugt, welche die Grundstruktur, Packages, benötigte Dateien sowie Abhängigkeiten der GWT-Anwendung hat.

15 3 Programmieren mit dem GWT-Framework 15 Abbildung: Ergebnis der Skripte projectcreator und applicationcreator Erzeugt wurde, neben der Ordnerstruktur, eine HTML-Datei, eine Moduldatei, ein Entry-Point, definiert durch den Modulnamen in applicationcreator, sowie drei Skripte. Das Skript HelloWorld.launch ist ein Eclipse-Script und kann hier zum Aufruf der Anwendung genutzt werden. HelloWorld-compile kompiliert die Anwendung und durch HelloWorld-shell kann diese aufgerufen und im Hosted Mode Browser dargestellt werden. 3.4 Nach der Kompilierung Erfolgt der Aufruf des Skriptes HelloWorld-compile, so ergibt sich das in Abbildung 'Ergebnis des Aufrufs von HelloWorld-compile' dargestellte Ergebnis. Der GWT-Compiler erzeugt für jeden Browser spezifischen JavaScript-Code. Dieser JavaScript-Code korrespondiert mit dem Java-Code der Klasse HelloWorld.java.

16 3 Programmieren mit dem GWT-Framework 16 Abbildung: Ergebnis des Aufrufs von HelloWorld-compile 3.5 Die Moduldatei Zur weiteren Verdeutlichung der Programmierung mittels des GWT-Framework wurde eine Beispielanwendung 28 erzeugt. Diese Anwendung stellt die Seminarteilnehmer in einer Liste dar. Durch Auswahl eines der Teilnehmer, werden in einem unteren Bereich Detailinformationen sowie eine Karte mit einer Visualisierung der Adresse des Teilnehmers dargestellt. (Siehe Abbildung 'Screenshot Teilnehmerliste') 28

17 3 Programmieren mit dem GWT-Framework 17 Abbildung: Screenshot Teilnehmerliste Die zugehörige Moduldatei ist in Listing 'Seminar.gwt.xml (Moduldatei)' dargestellt. Sie besteht aus drei Einträgen. Der erste Eintrag legt fest, dass es sich um ein GWT-Modul handelt und das Modul von dem GWT-Modul com.google.gwt.user.user erbt. Der zweite Eintrag legt den Entry-Point fest und der letzte Eintrag definiert das Stylesheet. 1 <?xml version="1.0" encoding="utf-8"?> 2 3 <module> 4 5 <!-- Inherit the core Web Toolkit stuff. --> 6 <inherits name="com.google.gwt.user.user"/> 7 8 <!-- Specify the app entry point class. --> 9 <entry-point class="de.webpublishing.participants.client.seminar"/> <!-- Unser Stylesheet --> 12 <stylesheet src="seminar.css"/> </module> Listing: Seminar.gwt.xml (Moduldatei) 3.6 Erstellung der Benutzerschnittstelle Zur Programmierung der Benutzerschnittstelle werden, wie oben erwähnt, Widgets und Panels eingesetzt. Über Panels wird die Position der einzelnen Elemente der Seite festgelegt. Das GWT-Framework bietet hierzu ein Menge an Panels an, die in Abbildung 'Panelübersicht' dargestellt ist.

18 3 Programmieren mit dem GWT-Framework 18 Abbildung: Panelübersicht Die Definition und Anordnung der Panels erfolgt im Entry-Point in der Methode onmoduleload(). Die einzelnen Panels werden dem immer zur Verfügung stehenden RootPanel hinzugefügt. Das RootPanel ist in Abbildung 'Panelübersicht in der Anwendung' als blaues Viereck dargestellt. In der Beispielanwendung wird diesem Panel zunächst ein VerticalPanel hinzugefügt (rotes Rechteck), welches alle seine Widgets und Panel untereinander anordnet. Diesem VerticalPanel wird dann zunächst das Widget ParticipantsList hinzugefügt, daher erscheint es im oberen Bereich der Anwendung, und dann ein HorizontalPanel (grünes Rechteck). Diese HorizontalPanel ordnet alle seine Elemente nebeneinander an. Diesem Panel wird daraufhin das Widget ParticipantDetail und Map hinzugefügt.

19 3 Programmieren mit dem GWT-Framework 19 Abbildung: Panelübersicht in der Anwendung Die komplette Methode onmoduleload() im Entry-Point ist im Listing 'Seminar.java (Entry-Point)' dargestellt. 1 package de.webpublishing.participants.client; 2 3 public class Seminar implements EntryPoint, WindowResizeListener { 4 5 /** 6 * Beim laden der EntryPoint, wird automatisch 7 * die Methode aufgerufen. 8 * Sie initialisiert alle Panels und Widgets. 9 */ 10 public void onmoduleload() { singleton = this; // Detailbereich initialisieren 15 participantdetail = new ParticipantDetail(); // Karte initialisieren 18 participantmap = new Map("600", "600"); 19 participantmap.setstylename("map"); // ParticipantsList nutzt Seminar.get() in seinem Konstruktor, 22 // daher nach 'singleton' initialisieren. 23 participantslist = new ParticipantsList(); // toppanel die Liste der Teilnehmer hinzufuegen 26 windowpanel.add(participantslist); 27 windowpanel.add(bottompanel); // bottompanel Detail und Karte hinzufuegen 30 bottompanel.add(participantdetail); 31 bottompanel.add(participantmap); RootPanel.get().add(windowPanel); // Listener einhaengen, so dass Veraenderungen des Fensters 36 // abgefangen werden. 37 Window.addWindowResizeListener(this);

20 3 Programmieren mit dem GWT-Framework // Weitere Kleinigkeiten 40 Window.enableScrolling(false); 41 Window.setMargin("0px"); DeferredCommand.addCommand(new Command() { 44 public void execute() { 45 onwindowresized(window.getclientwidth(), Window 46.getClientHeight()); 47 } 48 }); onwindowresized(window.getclientwidth(), Window.getClientHeight()); } 53 } Listing: Seminar.java (Entry-Point) Das Map-Widget 29 stellt in sofern eine Besonderheit dar, als das es kein vom GWT-Framework bereitgestelltes Widget ist. Die anderen beiden Widgets sind nur Kombinationen aus Widgets, die vom GWT-Framework angeboten werden. Möchte man das Widget nutzen, so müssen einige Einstellungen vorgenommen werden. Zum einen muss die Moduldatei (Siehe Listing 'Seminar.gwt.xml (Moduldatei mit Map-Widget)') auch von dem Google Map Widget erben und es muss, dies ist allerdings eine Besonderheit dieses speziellen Widgets, in der HTML-Seite (Siehe Listing 'Seminar.html') ein JavaScript-Eintrag erfolgen. 1 <?xml version="1.0" encoding="utf-8"?> 2 3 <module> 4 5 <!-- Inherit the core Web Toolkit stuff. --> 6 <inherits name="com.google.gwt.user.user"/> 7 <inherits name="com.mapitz.gwt.googlemaps.googlemaps"/> 8 9 <!-- Specify the app entry point class. --> 10 <entry-point class="de.webpublishing.participants.client.seminar"/> <!-- Unser Stylesheet --> 13 <stylesheet src="seminar.css"/> </module> Listing: Seminar.gwt.xml (Moduldatei mit Map-Widget) 1 <html xmlns=" xmlns:v="urn:schemas-microsoft-com:vml"> 2 <head> 3 4 <!-- --> 5 <!-- Any title is fine --> 6 <!-- --> 7 <title>wrapper HTML for Seminar</title> 8 9 <!-- --> 10 <!-- Use normal html, such as style --> 11 <!-- --> 12 <style> 13 body,td,a,div,.p{font-family:arial,sans-serif} 14 div,td{color:#000000} 15 a:link,.w,.w a:link{color:#0000cc} 16 a:visited{color:#551a8b} 17 a:active{color:#ff0000} 18 </style> Das Google Maps Widget kann unter heruntergeladen werden. [Stand: ]