Ralph Steyer

Google Web Toolkit

Ralph Steyer

Google Web ToolkitAjax-Applikationen mit Java

Ralph SteyerGoogle Web Toolkit - Ajax-Applikationen mit JavaISBN: 978-3-86802-217-9

© 2009 entwickler.pressEin Imprint der Software & Support Verlag GmbH

Bibliografische Information der Deutschen NationalbibliothekDie Deutsche Nationalbibliothek verzeichnet diese Publikation in derDeutschen Nationalbibliografie; detaillierte bibliografische Daten sindim Internet über http://dnb.d-nb.de abrufbar.

Ihr Kontakt zum Verlag und Lektorat:Software & Support Verlag GmbHentwickler.pressGeleitsstraße 1460599 Frankfurt am MainTel: +49(0) 69 63 00 89 - 0Fax: +49(0) 69 63 00 89 - 89lektorat@entwickler-press.dehttp://www.entwickler-press.de

Alle Rechte, auch für Übersetzungen, sind vorbehalten. Reproduktion jeglicher Art (Fotokopie, Nachdruck, Mikrofilm, Erfassung auf elektronischen Datenträgern oder andere Verfahren) nur mit schriftlicher Genehmigung des Verlags. Jegliche Haftung für die Richtigkeit des gesamten Werks kann, trotz sorgfältiger Prüfung durch Autor und Verlag, nicht übernommen werden. Die im Buch genannten Produkte, Waren-zeichen und Firmennamen sind in der Regel durch deren Inhaber geschützt.

Google Web Toolkit 5

Inhaltsverzeichnis

V Vorwort 11

1 Grundlagen 13

1.1 Was versteht man unter Ajax? 14Wie kommt Ajax ins Spiel? 16Die technischen Hintergründe von Ajax 17Der Ablauf einer Ajax-Datenanfrage 18Kennen wir das nicht schon alles? 21Ajax – ist die Welt nun gut? 21

1.2 Was ist das Google Web Toolkit? 22Java für Ajax – das GWT 23Der Aufbau eines typischen GWT-Entwicklungszyklus 24

1.3 Die Vorteile des GWT 24Die GWT-Features 25

2 Download und Installation 27

2.1 Die Voraussetzungen – die Java-Umgebung 27Die Installation der Java-Umgebung 30

2.2 Der Download des GWT 30Voraussetzungen zur erfolgreichen Arbeit mit dem GWT 32

2.3 Die Installation des GWT 33

2.4 Die Bestandteile des GWT-Verzeichnisses 34Der applicationCreator 34Die weiteren Programme 34Die Dokumentation des GWT 35Die Standardbeispiele des GWT 36Die vorgegebenen Beispiele ausführen 36Die Beispiele übersetzen 38Die erweiterten Standardbeispiele 40

3 Die ersten Experimente mit dem GWT 43

3.1 Vorhandene Beispiele erweitern und modifizieren 43Modifikation des Hello-Beispiels 44

3.2 Ein erstes direktes Erstellen einer GWT-Applikation 46Die grundsätzliche Projektstruktur einer GWT-Applikation 46Erstes Erstellen einer eigenen GWT Applikation von Hand 48Das Anpassen der Grundschablone 50

Inhaltsverzeichnis

6

3.3 Erstellen einer eigenen GWT-Applikation mit Eclipse 58Die Installation von Eclipse 58Erstellen einer GWT-Projektgrundstruktur für Eclipse 59Die Projektgrundstruktur in Eclipse importieren 62

4 Die GWT-Module und die Architektur 65

4.1 Die GWT-Architektur 65Die JRE-Emulationsbibliothek 65Die GWT-Klassenreferenz und die GWT-Web-UI-Klassenbibliothek 67

4.2 Module – der Schlüssel zur Konfiguration des GWT 74

4.3 Das XML-Format der Module 77Verfügbare Elemente 77

5 Mit dem GWT HTTP-Anfragen erstellen und verarbeiten 83

5.1 Hintergrundinformationen zu HTTP 83Die HTTP-Header 83Die Meldungen eines Webservers 87Die HTTP-Datenkommunikation direkt beobachten 88

5.2 Das Paket com.google.gwt.http.client 90

5.3 Restriktionen und begleitende Maßnahmen 93Same-Origin Security Policy 93Limitierung der Anfrage 93Notwendige Module 93

5.4 GET-Applikationen zum Zugriff auf HTTP konkret erstellen 94Eine GET-Anfrage ausführen 94Eine POST-Anfrage durchführen 95Praxis mit einem vollständigen Beispiel 97Verwenden von Timeouts bei Anfragen 101Zusammenstellen eines Querystrings 103Ein universeller RequestBuilder 106

5.5 Grundsätzliches Erstellen einer angepassten RequestCallback-Handlerklasse 106

5.6 Die serverseitige Verarbeitung von HTTP-Daten und Java Servlets 108Authentifizierung und Sicherheit 108Verfügbare Objekte und Funktionen 109Java Servlets im GWT verwenden 109

6 Erstellen von Benutzeroberflächen mit dem GWT 121

6.1 Die GWT-Klassen für Benutzerschnittstellen 121Das Paket com.google.gwt.user.client.ui 122

6.2 Grundsätzliches Erstellen einer GUI mit dem GWT 136Strukturieren der Oberfläche – Widgets und Panels 136Widgets erstellen 137

Inhaltsverzeichnis

Google Web Toolkit 7

6.3 Praktische Beispiele für Widgets 137Schaltflächen 137Dialogboxen 142Hyperlink und die Unterstützung der Browserhistorie 147ListBox 150MenuBar 153TabBar 156TextArea 158TextBox und PasswordTextBox 161Tree und TreeItem 162

6.4 Panels 165Hinzufügen von Widgets 165Das Konzept der Java-Layoutmanager versus den

Verhaltensweisen eines Browsers 166FormPanel – das Panel für Webformulare 166DockPanel 174

6.5 Gestalten von Widgets mit Style Sheets 182Die vorgegebenen GWT-Stilnamen 182Komplexere Stile und Namensräume 183Die Zuordnung von CSS-Dateien 183Ein konkretes Beispiel 184

6.6 Events, Listener und Adapter – die Reaktion auf Ereignisse 189Anonyme Ereignisbehandlung 189Verwendung von Listener-Schnittstellen 192Adapterklassen 197

6.7 Erstellen eigener Widgets 200

7 Debuggen einer GWT-Applikation 205

7.1 Die Fehlersuche über den GWT Hosted Web Browser 205

7.2 Debuggen mit Eclipse 206Einen Haltepunkt setzen 207

7.3 Die Debug-Sitzung und die Debug-Perspektive in Eclipse 208Untersuchen von komplexeren Applikationen 210Grundsätzliches zum Debuggen in Eclipse 211Die verschiedenen Debug-Ansichten 212Die Debug-Befehle 214

8 Internationalisierung und Lokalisierung 217

8.1 Definition von Internationalisierung und Lokalisierung 217

8.2 Das Paket com.google.gwt.i18n.client 218Notwendige Moduleinstellungen 218

8.3 Formatieren und Parsen von Datums- und Zeitangaben mit DateTimeFormat 219

Patternzeichen zur Datums- und Zeitangabe 219

Inhaltsverzeichnis

8

8.4 Die Klasse Dictionary und dynamische String-Internationalisierung 221

8.5 Formatieren und Parsen von Zahlen mit der Klasse NumberFormat 223

8.6 Constants und ConstantsWithLookup sowie statische String-Internationalisierung 224

ConstantsWithLookup 227Statische String-Internationalisierung in einem vollständigen Beispiel 227

8.7 Die Schnittstelle Localizable und die Spezifikation einer Sprachumgebung 234

Die Vorgabesprachumgebung 234Hinzufügen von Sprachumgebungen zu einem Modul 234Localizable 235

8.8 Message-Templates und die Schnittstelle Messages 236Verwendung von internationalisierten Meldungen und

Überprüfung zur Kompilierzeit 238

9 JUnit-Testing 241

9.1 Das Ergebnis eines JUnit-Tests 241

9.2 Das Paket com.google.gwt.junit.client 241Die Klassen im Paket 241Die Schnittstellen im Paket 243

9.3 Konkrete Vorgehensweise zum JUnit-Testing unter dem GWT 243Schritt 1: Erstellen eines Testfalls 243Schritt 2: Durchführen des Tests 244JUnit-Tests in Eclipse 245

9.4 Erstellen eines JUnit-Tests von Hand 246Ein praktisches Beispiel 248

9.5 Asynchrones Testen 249

10 Remote Procedure Calls – entfernte Aufrufe 251

10.1 Ein GWT-Service versus einem Web Service 252

10.2 Das Paket com.google.gwt.user.client.rpc 252Die Klassen in com.google.gwt.user.client.rpc 253Die Schnittstellen in com.google.gwt.user.client.rpc 253

10.3 Das Paket com.google.gwt.user.server.rpc 254Die Klassen im Paket com.google.gwt.user.server.rpc 255

10.4 Die notwendigen Schritte zum Erstellen einer RPC-Anwendung 256Erstellen der Serviceschnittstelle 256Asynchronous Interfaces 257Die Implementierung des Service 258Der konkrete Aufruf einer entfernten Methode 258

Inhaltsverzeichnis

Google Web Toolkit 9

10.5 Ein vollständiges RPC-Beispiel – ein einfacher Datumsservice 259Die HTML-Host-Datei 259Das GWT-Modul 261Die Serviceschnittstelle 261Die asynchrone Schnittstelle 262Das Servlet 262Die Clientseite 262

10.6 Ein vollständiges RPC-Beispiel – einen Login mit RPC verifizieren 265Die Host-Datei 266Das GWT-Modul 266Die CSS-Datei 267Die Serviceschnittstelle 268Die asynchrone Schnittstelle 269Das Servlet 269Die Clientseite 279

10.7 RPC in Produktion bringen 283

11 XML-Verarbeitung mit dem GWT 285

11.1 Grundsätzliches zu XML und XML-Verarbeitung in Java 285Der Aufbau von XML 285Die XML-Komponenten 286Wohlgeformt und gültig 287Grundsätzliche XML-Verarbeitung mit Java 287

11.2 Das Paket com.google.gwt.xml.client – XML-Verarbeitung beim GWT 289Die Klassen 290Die Schnittstellen 291

11.3 Die konkrete Anwendung im GWT 295Die Erweiterung im GWT-Modul 296Die Java-Datei 296

12 Das JavaScript Native Interface 299

12.1 Zugriff auf den Browser und die Webseite aus JavaScript im JSNI-Umfeld 300

12.2 Einsatz nativer JavaScript-Methoden 300Der JSNI-Kommentarblock 300Der Aufruf von JSNI-Methoden im Java-Code 300

12.3 Aus JavaScript auf Java-Methoden und -Felder zugreifen 302Methodenaufrufe 302Zugriff auf Felder 303Ein vollständiges Beispiel 303

12.4 Objekte in Java und JavaScript benutzen 305JavaScriptObject 305

12.5 JSNI und Ausnahmen 306

Stichwortverzeichnis 307

Google Web Toolkit 11

Vorwort

Herzlich willkommen zur Erstellung von Web- und Ajax-Applikationen mit dem GWT(Google Web Toolkit). Das World Wide Web vollführt gerade mit großer Geschwindig-keit Schritte vom passiven Konsumentennetz hin zum interaktiven Teilnehmernetz.Marketingstrategen gaben dieser Evolution gar einen eigenen Namen: Web 2.0

Der programmiertechnische Kern dieser gesamten Entwicklung nennt sich Ajax1, wasfür Asynchronous JavaScript and XML steht.

Unzählige Ajax-Applikationen sowie Webapplikationen, die sich mehr oder wenigerberechtigt das „Qualitätsmerkmal“ Web 2.0 anheften, überschwemmen nahezu dasInternet wie eine Tsunami-Flutwelle. Und als Erdbeben, das diese Flutwelle ausgelösthat, könnte man Google anführen.

Das soll jetzt aber nicht falsch verstanden werden – weder ist Google der Erfinder vonAjax noch dem Web 2.02. Aber diese Firma ist wohl die treibende Kraft hinter derunglaublichen Popularität beziehungsweise dem Voranschreiten der Entwicklung.Wenn Sie betrachten, welche Projekte Google zurzeit nahezu unablässig im Umfeld vonAjax und dem Web 2.0 etabliert oder zumindest testet, werden Sie fast schwindelig. Siekommen aktuell bei kaum einer Entwicklung an der Front des World Wide Web umGoogle herum. In beinahe unglaublicher Geschwindigkeit stellt Google neue APIs undTools zur Verfügung, die die Entwicklung von Internetapplikationen vorantreiben.

Daher war es auch nur eine Frage der Zeit, wann Google für die Entwicklergemeinde einAPI beziehungsweise Toolkit bereitstellt, mit dem Programmierer bequem und zuverlässigWebapplikationen im Allgemeinen und Ajax-Applikationen im Speziellen erstellen kön-nen. Und damit sind wir beim Google Web Toolkit oder kurz GWT. Und um was geht esdabei? Das GWT erlaubt es im Wesentlichen, Web- beziehungsweise Ajax-Applikationenauf Java-Basis in einer homogenen, sicheren und leistungsfähigen Umgebung zu erstellen.Diese so erstellten Applikationen werden erst nach der Programmierung in einem automa-tischen Prozess in ein webfähiges Konstrukt aus HTML bzw. XHTML, Style Sheets undJavaScript übersetzt, welches dann auf den Client ausgeliefert werden kann.

1 Oder AJAX – lange Zeit wurde der Begriff als Abkürzung vollständig groß geschrieben und auchheute findet man die vollständig groß geschriebene Schreibweise sehr oft. Aber sukzessive setzt sichin diversen Kreisen die Schreibweise Ajax durch.

2 Wobei man sowieso festhalten sollte, dass es das so genannte Web 2.0 technisch gesehen überhauptnicht gibt – darauf gehen wir natürlich genauer ein. Dementsprechend gibt es in dem Sinn keinen„Erfinder“. Und auch für Ajax kann man keinen echten „Erfinder“ anführen, sondern höchstens Per-sonen, die diesen Begriff geprägt haben.

Vorwort

12

Und da das resultierende Konstrukt mit (X)HTML, Style Sheets und JavaScript nur ausflächendeckend nativ im Browser unterstützten Techniken besteht, sind diese Applikati-onen ohne jegliche Form eines Browser-Plug-ins oder zwingende Voraussetzung wieeine bestimmte Technologie auf einem Webserver in der Praxis einzusetzen. Und dieBeschränkung auf etablierte Standardtechniken erhöht die Wahrscheinlichkeit, dassdiese Applikationen in allen relevanten Browsern zuverlässig funktionieren werden.

Es lohnt sich also für Webprogrammierer auf jeden Fall, einem Blick auf das GWT zuwerfen. Und nun wollen wir damit anfangen.

Auf der CD-ROM zum Buch ist das aktuelle Google Web Toolkit 1.4 enthalten, so dass Siegleich loslegen können. Ferner finden Sie auf der Buch-CD ein aktuelles Java-Entwick-lungspaket, das Sie zur Erstellung von GWT-Applikationen benötigen, sowie die Ent-wicklungsumgebung Eclipse in der Version 3.3. Alle Beispiele sind selbstverständlichebenfalls auf der CD enthalten.

Viel Spaß bei diesem Einblick in das Google Web Toolkit wünscht Ihnen

Ralph Steyer

www.rjs.de und www.ajax-net.de

Eppstein, im Sommer 2007

Google Web Toolkit 13

Grundlagen

Ich heiße Sie noch einmal willkommen zur Programmierung für das moderne Web mitdem GWT. Man kann ziemlich deutlich sehen, dass sich das World Wide Web seit etwadem Jahr 2005 im Umbruch befindet. Mehr und mehr entwickelt sich dieses zentraleInformationsmedium der modernen Welt zu einem bidirektionalen Instrument. Stattweniger Informationsanbieter und vieler Informationskonsumenten verschiebt sich dasVerhältnis immer mehr zu aktiven Teilnehmern im Netz. Und damit kann man fastsagen, dass das Internet zu seinen Ursprüngen zurückkehrt.

Denn dieses Verhältnis zwischen Informationskonsumenten und Informationsanbieternwar ganz am Anfang des Internets schon einmal ausgewogener als in den Jahren zwi-schen 1995 und 2005. In den Jahren zuvor konsumierten Anwender oft nicht nur Infor-mationen des Internets. Viele Internet-Nutzer stellten auch Informationen für dieGemeinschaft bereit. Aber gerade in den genannten zehn Jahren war deutlich zu beob-achten, dass immer mehr User nur konsumiert haben.1 Zwar konnte man über diegesamte Geschichte des frei zugänglichen Internets als Anwender aktiv Inhalte der Inter-net-Gemeinschaft zur Verfügung stellen. Das ging schon zu Zeiten des Usenet. Ebensohaben viele Internet-User seit Jahren eine Homepage sowie viele Internetangebote Gäs-tebücher oder Foren. Dennoch waren die meisten Anwender speziell des Webs bis vorkurzem reine Konsumenten. Was sicher auch damit zusammenhing, dass dem Bereitstel-len von Informationen im Netz eine gewisse technische Hürde im Weg stand.

Erst diverse Entwicklungen seit dem besagten Jahr 2005 haben der Masse der Internet-Anwender die Möglichkeit gegeben, bequem und vor allem aktiv in die Gestaltung derInhalte von Webseiten als auch des Aussehens einzugreifen, statt einfach nur passiv zukonsumieren. Und die Versionierung des WWW über das Schlagwort Web 2.0 soll imWesentlichen analog klassischer Versionen bei Programmen und Programmiertechnikenden Evolutionssprung deutlich machen.2

1 Auch hat sich in der Zeit die Ansicht verfestigt, dass es alles umsonst im Internet zu geben hat. OhneGeld oder irgendeine Gegenleistung. Und die meisten Anbieter von Informationen oder Dienstleis-tungen beugten sich dem Druck und machten mit. Und wunderten sich, dass sie irgendwann pleitewaren ;-).

2 Zu der mittlerweile bereits zu hörenden Weiterentwicklung als Version 3 – dem so genannten Web 3.0– möchte ich nicht viel sagen. Diese Bezeichnung ist meines Erachtens nur reines Marketing. EinBuzzword, das kaum einer Beachtung wert ist. Selbstverständlich entwickelt sich das Web immerweiter, aber schon das Web 2.0 kann man rein technisch nicht von der ersten Version des Webs tren-nen. Die Grenze ist fließend und auch mit dem Web 3.0 wird man kaum eine sinnvolle Abgrenzungfassen können. Offiziell geht es bei dieser neuen Version um ein „intelligenter“ werdendes Web.

1 – Grundlagen

14

Unabhängig davon, ob die fließende Weiterentwicklung des World Wide Web einerneuen Bezeichnung bzw. Version bedarf oder nicht, äußert sich der Evolutionssprungdes Webs sowohl über verschiedene neuartige Dienste wie Blogs, Wikis oder interaktiveVideoportale als auch über einige technische Entwicklungen wie eben Ajax.3

Allgemein fasst man unter dem Modewort Web 2.0 also diverse Dinge zusammen: nebender per se dynamischen, mit dem Besucher aktiv Daten austauschenden Welt, wie siebeispielsweise Blogs und Medienportale darstellen, auch beispielsweise so genannteMashups. Unter dem Aufbau eines Mashups versteht man eine Vorgehensweise, bei dereine einfache Integration verschiedener bereits vorhandener Anwendungen und Daten-quellen unter einer neuen Benutzeroberfläche erfolgt, um über die Verbindung dieserDinge einen Nutzwert für den Anwender zu erreichen, der über die Nutzung der einzel-nen Dinge noch nicht besteht.4

Aber auch Social Network Analysis (kurz SNA) ist ein zentraler Bestandteil dessen,wohin sich das Web entwickeln soll. Es geht darum, Informationen und Wissen einerVielzahl von Personen und deren persönlicher Netzwerke zu einem Ganzen zusammen-zufügen und kollektiv zu nutzen.

Was zu dem Begriff der kollektiven Intelligenz als einem weiteren Baustein des Web 2.0überleitet. Das bedeutet die kollektive Entwicklung von Inhalten und geistigen Güterndurch zahlreiche verschiedene Leute, wie es als bedeutendes Referenzprojekt derzeitWikipedia zeigt.

Aber die Definitionen, die sich hinter den einzelnen Schlagworten verbergen, machenauch deutlich, dass die vielen Begriffe, welche rund um das Web 2.0 kreisen, weder ein-deutig zu charakterisieren noch streng voneinander abzugrenzen sind.

1.1 Was versteht man unter Ajax?Bei der Arbeit mit dem GWT geht es im Kern darum, Ajax-Applikationen zu erstellen.Aber was ist eigentlich Ajax? Die ausgeschriebene Form deutet zum Teil schon an, um wases geht: Asynchronous JavaScript and XML. Aber diese ausgeschriebene Form ist auchetwas missverständlich. Denn weder ist offensichtlich klar, was es mit der Asynchronitätauf sich hat, noch hat XML (Extensible Markup Language) die exklusive, herausgehobeneBedeutung, die das Vorkommen in dem ausgeschriebenen Begriff suggeriert.

Aber der Reihe nach. Wenn man sich die Vergangenheit des Internets betrachtet, ist dasJahr 1990 mit der Einführung des World Wide Web unbestritten einer der größten Mei-lensteine gewesen. Mit dem WWW ließen sich Inhalte endlich optisch ansprechend prä-sentieren und vor allem Informationen so miteinander verknüpfen, dass ein Anwenderdiese komfortabel verwenden konnte. Allerdings war das WWW in der ersten Form reinstatisch und das genügte nach einer ersten Sturm-und-Drangphase nicht mehr denAnsprüchen einer zunehmend verwöhnten Anwenderschaft.

3 Was aber streng genommen sogar gar keine neuen Technologien bezeichnet, sondern rein auf Techni-ken des Web 1.0 aufsetzt.

4 Kritiker könnten jetzt sagen, dass Mashups einfach nur geklaute Dinge in neuem Gewand sind. Aberdiese nicht ganz unberechtigte Kritik sollte nicht den Nutzen für den Anwender verdecken.

Was versteht man unter Ajax?

Google Web Toolkit 15

auf Grund der diversen Einschränkungen, die mit dieser ersten statischen Form desWebs verbunden waren, entwickelte sich ab etwa dem Jahr 1995 eine clientseitige Pro-grammiererwelt, die diesen Einschränkungen begegnen sollte. Sukzessive entstandenJavaScript, VBScript, Java-Applets, ActiveX-Controls, Flash und diverse weitere (oft pro-prietäre) Technologien. Allen Technologien auf dem Client war und ist gemeinsam, dasssie Aktivität vom Server auf den Client verlagern und damit die Interaktivität mit demAnwender und die Dynamik einer Webseite fördern sollten.

Verschiedene Probleme mit clientseitiger Technologie führten jedoch bei vielen Anbie-tern von Webinhalten dazu, wieder mehr und mehr Aktivität auf den Server zurückzu-verlagern. Dieses Phänomen kann man ziemlich genau ab etwa dem Jahr 2000 beobach-ten. Proprietäre Standards sowie unsägliche marktpolitische Spielereien vieler Protago-nisten des WWW5 und nicht zuletzt Sicherheitsprobleme einiger Techniken im Clientreduzierten um diese Zeit herum flächendeckend die Akzeptanz von clientseitiger Tech-nologie. Unabhängig davon, ob diese Probleme clientseitiger Programmierung real odernur eingebildet waren – die Akzeptanz in der breiten Anwenderschaft schwand drama-tisch und man konnte als Webentwickler einige Zeit kaum noch auf die Unterstützungclientseitiger Techniken wie JavaScript setzen.

Beobachten Sie nur einmal den aktuellen Stand im WWW. In den letzten Jahren hat sichstill und leise die Hysterie um die Probleme clientseitiger Technologie gelegt. Alle gro-ßen Webseiten setzen gegenwärtig clientseitige Programmierung in Kombination mitserverseitigen Techniken ein. Und was bedeutet das? Die Aufgaben in dem Client-Ser-ver-Betrieb Internet werden schlicht und einfach so verteilt, wie es sinnvoll ist.

Insbesondere wird in der letzten Zeit wieder die Dynamik in vielen Webseiten mit client-seitigen DHTML-Effekten (Dynamic HTML) rund um JavaScript und CSS realisiert.Dies hat massive Konsequenzen für das, was man als Webseitenersteller beziehungs-weise Webseitenprogrammierer bei einem Besucher heutzutage voraussetzen kann.

Zwar können auch heutzutage Internetanwender in ihrem Browser clientseitige Techno-logien wie JavaScript deaktivieren. Und manche tun das auch.6 Dann können dieseAnwender aber so gut wie kein populäres Angebot im modernen Web nutzen. Und wel-che Anwender möchten schon auf Dauer auf die Angebote von eBay, Amazon, Yahoo!,Google, Wikipedia, YouTube oder ähnlich populären Seiten verzichten?

Im Umkehrschluss bedeutet dies, dass auch Anbieter von kleineren Webseiten mit einerrelativ hohen Wahrscheinlichkeit bei ihren Besuchern ein Umfeld vorfinden, das denNutzen von clientseitiger Programmierung zulässt. Zumindest mit JavaScript.

5 Stichwort Browserkriege.6 Vielfach in Behörden oder großen Firmen.

1 – Grundlagen

16

1.1.1 Wie kommt Ajax ins Spiel?

Das Internet basiert bezüglich der Übertragung bekanntlich auf TCP/IP. Dies steht fürTransmission Control Protocol / Internet Protocol und bezeichnet ein Transportproto-koll zur paketorientierten Vermittlung von Daten zwischen verschiedenen Netzwerkres-sourcen. Die Daten werden in kleinere Einheiten zerlegt und diese Datenpakete unab-hängig voneinander vom Sender zum Empfänger geschickt. Wenn eine Sendung ausmehreren Paketen besteht, werden diese beim Empfänger wieder zusammengesetzt.

Das Hauptproblem bei dieser Art der Kommunikation ist, dass zwischen Sender undEmpfänger keine dauerhafte Verbindung existiert. Zwar ist es möglich, auf Ebene derDienst- oder Anwendungsprotokolle eine virtuelle Verbindung zwischen Sender undEmpfänger aufrechtzuerhalten, aber allein auf Ebene des Transportprotokolls ist dieseVerbindung nicht gegeben.

Und auch nicht alle Anwendungs- bzw. Dienstprotokolle im Internet arbeiten mit einervirtuellen Verbindung. Insbesondere ist das Anwendungsprotokoll des World Wide Web– HTTP (Hypertext Transfer Protocol) – ein verbindungsloses oder zustandsloses Proto-koll. Mit anderen Worten – bei diesem Protokoll wird beim Datenaustausch auch auf derEbene des Anwendungsprotokolls explizit keine virtuelle Verbindung zwischen demServer und dem Client aufrechterhalten.

Für das WWW ist das unabdingbar, um die verfügbaren Ressourcen vernünftig nutzenzu können. Aber bei dieser Art der zustandslosen Kommunikation kann zum Beispielein Server bei einer Anfrage durch einen Client im Grunde nicht erkennen, ob ein Brow-ser bereits vorher eine Anfrage abgeschickt hat.

Eine drastische Folge ist, dass im klassischen Web ein Browser von einem Webserver beijeder Anforderung von neuen Informationen immer eine vollständige neue Webseitegeschickt bekommt.7 Es ist offensichtlich, dass damit eine Vielzahl unnützer Daten hinund her geschickt werden. Und ebenso offensichtlich ist, dass die Performance bei derÄnderung nur geringer Teile einer Webseite alles andere als gut ist.

Ajax bezeichnet nun vereinfacht gesagt einen Ansatz, bei dem nicht jede Datenanforde-rung eines Webbrowsers das Versenden einer vollständigen neuen Webseite durch denServer notwendig macht. Mit Ajax ist es möglich, nur den Teil einer Webseite vom Serveranzufordern, der auch wirklich ausgetauscht werden muss. Und das sogar auf Wunschasynchron von der offensichtlichen Datenanforderung eines Anwenders über den Brow-ser (also beispielsweise über den Klick auf einen Hyperlink oder der Eingabe einer neuenAdresse im Adressfeld des Browsers).

7 Das muss man eigentlich etwas differenzieren, denn ein Browser kann zum Beispiel per JavaScriptauch eine neue Grafik nachfordern, ohne die Webseite neu zu laden. Aber im Fall einer Webseite oderanderer Textdaten muss eine vollständige Datei angefordert werden, die dann anstelle der bisherangezeigten Datei im Browser angezeigt wird.

Der gesamte Ansatz ist aber im Grunde nichts Neues, denn über die Entwicklung desWebs gab es bereits viele andere Ansätze, um Textinformationen für eine bereits gela-dene Webseite nachzufordern und diese bereitzustellen, ohne die gesamte Webseite neuvom Server zu laden. Aber diese Techniken waren allesamt entweder proprietär8 odermit zahlreichen Nachteilen9 behaftet.

Bei Ajax ist es nun so, dass mittels purer Techniken aus dem Umfeld von DHTML dieneuen Inhalte in den zu aktualisierenden Teil der Webseite befördert und dabei nur dienotwendigen Informationen übertragen werden. Die Teile der Webseite, die nicht erneu-ert werden müssen, können dabei erhalten bleiben.

So offensichtlich die Probleme des klassischen Webs sind, so klar ist der Gewinn, deneine interaktive Webapplikation aus dieser Vorgehensweise zieht. Die zu versendendeDatenmenge ist bei einer Nachforderung von Daten durch einen Webbrowser erheblichreduziert und der Zustand einer Webseite (beispielsweise Benutzereinträge in Formular-feldern) muss nicht reproduziert werden. Vor allen Dingen kann das Antwortverhaltenvon sehr interaktiven Webapplikationen bei der Interaktion mit einem Anwender exorbi-tant beschleunigt werden.

Bei einer Ajax-Applikation kommunizieren dazu nicht nur der Browser und der Web-server direkt miteinander.10 Unabhängig davon können Objekte eines speziellen Typs inder Webseite eigenständig mit dem Server kommunizieren. Quasi am Browser vorbei.Und eben sogar asynchron zu Benutzerverhalten mit den offensichtlichen Datenanforde-rungen wie einem Klick auf einen Link oder das Absenden von Formulardaten. Es gibtalso eine parallele Logik der Datenkommunikation, wenn das gewünscht ist.

1.1.2 Die technischen Hintergründe von Ajax

Bei Ajax handelt es sich um eine Definition von Technologien, die im Grunde ausschließ-lich auf dem Client ausgeführt werden. Man fasst darunter eine Verbindung von HTMLbeziehungsweise XHTML, JavaScript, CSS (Cascading Style Sheets) und einer beliebi-gen Klartextdatenstruktur, die zwischen dem Webserver und dem Webbrowser übertra-gen wird. Diese auszutauschende Klartextdatenstruktur kann XML sein, wie die ausge-schriebene Form des Bezeichners Ajax suggeriert, aber auch reiner Klartext, HTML oderein anderes Format.

Insbesondere kommt bei Ajax oft JSON zum Einsatz, was die Kurzform für JavaScriptObject Notation ist. Es handelt sich dabei um ein maschinenlesbares Klartextformat mitdefinierter Struktur, das nicht nur in Verbindung mit JavaScript, sondern theoretischjeder Programmiersprache eingesetzt werden kann.11

8 Zum Beispiel Java-Applets, Plug-ins für beispielsweise Flash oder ActiveX-Controls.9 Beispielsweise Frames.10 Also das, was klassisch über die Adresszeile des Browsers, einen Hyperlink oder ein Webformular

erfolgt.11 Aktuell gibt es bereits JSON-Implementierungen unter anderem für C, C#, Java, JavaScript, Perl, PHP,

Python, Ruby und Smalltalk. Die enge Fixierung auf JavaScript ist also nicht gegeben, obwohl dieausgeschriebene Form dies suggeriert.

Diese weitgehende Freiheit vom konkreten Klartextformat bei der Datenübertragungwird durch die Bezeichnung Ajax eindeutig verschleiert.12 Und wie bereits gesagt – wirreden bis auf den konkreten Datenaustausch hier bei Ajax ausschließlich von Technolo-gien auf Seiten des Clients.

Aber in einem Client-Server-System wie dem World Wide Web muss ein Client natürlichmit irgendjemand kommunizieren. Und das ist der Webserver. Was sich jedoch genauauf dem Webserver abspielt, ist aus Sicht von Ajax vollkommen uninteressant. Der Web-server ist für den Client (und damit Ajax) eine Art Blackbox, die irgendwelche Daten lie-fert. Mit anderen Worten – die Kommunikation zwischen dem Webclient und dem Web-server steht im Fokus von Ajax sowie die Verarbeitung und Aufbereitung der Daten imClient.

Und im Client ist der Dreh- und Angelpunkt das bereits beschriebene Objekt zur Kom-munikation, was das klassische Objektmodell von JavaScript erweitert. Auf dieses Kom-munikationsobjekt (XMLHttpRequest, was im Grunde wie ein kleiner Browser im Browserzu verstehen ist – nur ohne optische Repräsentation) greift man bei jeder Ajax-Applika-tion mit JavaScript zu, wenn man Daten asynchron nachfordern will.

1.1.3 Der Ablauf einer Ajax-Datenanfrage

Der grundsätzliche Ablauf einer Kommunikation zwischen dem XMLHttpRequest-Objektund einem Webserver bei einer Ajax-Applikation ist relativ primitiv und dabei imGrunde immer gleich.

In einer Webseite ruft man bei einem Ereignis eine JavaScript-Funktion auf, die die asyn-chrone Datenanforderung regelt. Dieses Ereignis wird als HTML-Eventhandler oderüber JavaScript-Eventhandling implementiert.

So könnte eine entsprechende HTML-Seite aussehen, die Daten bei einem Klick auf eineÜberschrift asynchron nachfordern soll (die Antwort soll in einem <div>-Block unterhalbder Überschrift angezeigt werden):

12 Genau genommen ist es so, dass XML als zu versendendes Datenformat sogar derzeit noch die meis-ten Probleme macht, denn die XML-Verarbeitung in den verschiedenen Browsern unterscheidet sichmassiv. Daraus resultieren teilweise nicht kontrollierbare Konstellationen, weshalb man entwederzwingend die Browserwelten trennen oder auf die Verarbeitung von XML im Client verzichten muss.

<html> <head> <title>Eine einfache Ajax-Applikation</title> <script type="text/javascript" src="ajax1.js"></script> </head> <body> <h1 onClick="sndReq()"> Klicken Sie auf die Überschrift! </h1>

Listing 1.1: Eine sehr einfache HTML-Datei als Basis der Ajax-Applikation

Was versteht man unter Ajax?

Google Web Toolkit 19

Wenn ein Anwender auf die Überschrift klickt, wird die angegebene Funktion (hier mitNamen sndReq()) aufgerufen. Diese Funktion ist – wie die gesamte JavaScript-Funktiona-lität – in der Regel in eine externe JavaScript-Datei ausgelagert. In dieser externen Java-Script-Datei erfolgt im Wesentlichen ...

� das Erzeugen des Kommunikationsobjekts,

� das Generieren einer Anfrage an den Webserver,

� das Binden einer Reaktionsfunktion an den Zeitpunkt, wenn die Antwort des Web-servers eintrifft und

� das tatsächliche Senden der Anfrage.

So könnte eine externe JavaScript-Datei aussehen, die die Antwort für obige HTML-Datei liefert:

<div id="antwort"> </div> </body></html>

function erzeugeXMLHttpRequestObject(){ resObjekt = null; try { resObjekt = new ActiveXObject("Microsoft.XMLHTTP"); } catch(Error){ try { resObjekt = new ActiveXObject("MSXML2.XMLHTTP"); } catch(Error){ try { resObjekt = new XMLHttpRequest(); } catch(Error){ location.href="ohneAJAX.html"; } } } return resObjekt;}

Listing 1.2: Die externe JavaScript-Datei mit der zentralen Funktionalität

Listing 1.1: Eine sehr einfache HTML-Datei als Basis der Ajax-Applikation (Forts.)

1 – Grundlagen

20

Über das XMLHttpRequest-Objekt, das in diesem Beispielskript in der Funktion erzeugeXML-HttpRequestObject() erzeugt wird13, erfolgt der gesamte Datenaustausch, der an dereigentlichen Browser-Server-Kommunikation vorbeigeht.

Das so erzeugte Objekt, das mittlerweile von allen relevanten modernen Browsern unter-stützt wird, stellt eine Reihe an geeigneten Methoden sowie Eigenschaften zur Verfügung.

Zum Generieren einer Datenanforderung gibt es zum Beispiel die Methode open(), dieoben im Beispiel eingesetzt wird. Das Anfordern von Daten erfolgt mit send(). Für dasEntgegennehmen der Daten gibt es den JavaScript-Eventhandler onreadystatechange alsEigenschaft des Kommunikationsobjekts. Dieser ist übrigens derzeit der einzige Event-handler in JavaScript, für den es kein passendes Gegenstück als HTML-Eventhandlergibt. Er wurde explizit zur Unterstützung von Ajax-Applikationen innerhalb von Java-Script eingeführt.

Das Anzeigen der nachgeforderten Daten in der Webseite ist dann reines DHTML underfolgt meist mit einem Zugriff auf einen Bereich der Webseite mittels einer Id (in derRegel über die Methode getElementById()) oder einem der anderen möglichen Wege, mitdenen man per JavaScript auf ein Element der Webseite zugreifen kann.14

Um konkret den Inhalt von diesem Bereich auszutauschen, wird sehr oft innerHTML ver-wendet. Diese Eigenschaft steht über das node-Objekt aus dem DOM (Document ObjectModel) der Webseite zur Verfügung. Diesem so bezeichneten Inhalt eines Bereichs wirdin vielen Fällen der Wert der Eigenschaft responseText des XMLHttpRequest-Objekts zuge-wiesen. Diese enthält die Antwort des Webservers.

function sndReq() { resObjekt.open('get', 'ajax1.php', true); resObjekt.onreadystatechange = handleResponse; resObjekt.send(null);}

function handleResponse() { if(resObjekt.readyState == 4){ document.getElementById("antwort").innerHTML = resObjekt.responseText; }}

resObjekt = erzeugeXMLHttpRequestObject();

13 Über die hier verwendete Ausnahmebehandlung wird eine browserneutrale Erzeugung gewährleistet.14 Beispielsweise Objektfelder, über den Namen eines Elements etc.

Listing 1.2: Die externe JavaScript-Datei mit der zentralen Funktionalität (Forts.)

Was versteht man unter Ajax?

Google Web Toolkit 21

Natürlich gibt es hier aber auch eine große Menge an Feinheiten und Spezialisierung.Wie gesagt insbesondere dann, wenn Daten im XML-Format als Antwort geschickt wer-den, um diese Daten erst im Client gezielt zu verwerten. Hier kommt dann die Eigen-schaft responseXML zum Einsatz, was auch für die Antwort selbst ein Objekt vom Typ nodeliefert (einen XML-Baum).

1.1.4 Kennen wir das nicht schon alles?

Neben dem XMLHttpRequest-Objekt werden rund um Ajax ziemlich offensichtlich nurKerntechnologien eingesetzt, die bereits sehr lange im Web etabliert sind. Und selbst dasoft als neue Entwicklung von Ajax bezeichnete XMLHttpRequest-Objekt geht auf Ansätzevon Microsoft zurück, die bis in das Jahr 1997 zurückreichen.15 So gesehen verbindetAjax ausschließlich Technologien des vorigen Jahrtausends respektive des Web 1.0.

Für Kritiker ist die Sache damit klar. Ajax sei nur ein Marketingbegriff für alte Technolo-gien, deren beste Zeiten lange vorbei wären und die nur noch mal neu aufgekocht wür-den. Die Befürworter hingegen argumentieren genau umgekehrt. Sie sagen, da so gutwie keine neuen Technologien erforderlich sind, ließe sich Ajax ohne größere Problemein bestehenden Umgebungen implementieren und die Beteiligten am Web können sichohne große Schwierigkeiten auf einen Standard einigen.

Und wahrscheinlich haben die Befürworter Recht, wie der Erfolg von Ajax und das teilssehr große Ajax-Engagement vieler Big Player im Web wie Google, Microsoft, Amazonoder Yahoo zeigen. Mit Ajax werden etablierte Techniken einfach, intelligent und stabilkombiniert und Probleme gelöst, für die sich vor Ajax keine allseits akzeptierten Lösun-gen durchsetzen konnten. Ajax ist definitiv nicht die beste aller Lösungen, die sich überdie Jahre gebildet haben, um bei einer Datenanforderung durch den Browser nicht diegesamte Webseite neu laden zu müssen, aber es ist ebenso gewiss der beste Kompromiss,auf den sich alle Beteiligten im WWW einigen konnten.

1.1.5 Ajax – ist die Welt nun gut?

Ajax bringt dem Web also bei interaktiven Angeboten ohne Zweifel viele Vorteile. Aberobwohl bei Ajax im Grunde nur lange etablierte Techniken unter einem gemeinsamenDach zusammenspielen, gibt es unzählige Probleme zu lösen.

Denn weder sind die Browser noch die bisherigen Arbeits- und Denkweisen vonWebapplikationen auf eine Kommunikation zwischen Client und Server an der norma-len Schnittstelle Browser vorbei konzipiert, noch funktioniert das Zusammenspiel derAjax-Kerntechniken wirklich so reibungslos, wie es notwendig wäre.

Auch die unmittelbare Kommunikation zwischen der Client- und Serverseite birgt zahl-reiche Fallen. Wie schon angedeutet, gibt es zahlreiche Probleme bei der Verarbeitungvon XML-Daten im Client. Aber auch bei der Übermittlung von Sonderzeichen zwischenBrowser und Server, der Sicherheit von Ajax-Applikationen, dem Verwalten von Ajax-Sitzungen bei sehr häufigen Anfragen etc. sind zahlreiche Komplikationen zu beobach-

15 Auch wenn erst die neusten Browserversionen die Unterstützung für dieses Objekt flächendeckendimplementiert haben.

1 – Grundlagen

22

ten. Und nicht zuletzt gibt es im Ajax-Umfeld einige ungelöste Fragen bei der Benutzer-führung und auch der automatisierten Verarbeitung der dynamischen Inhalte (von Such-maschinen angefangen bis hin zu Fragen des barrierefreien Webs und Lesegeräten fürBehinderte).

Alles in allem verbirgt sich hinter Ajax trotz der scheinbaren Einfachheit eine Schlangen-grube mit Problemen. Aber alle diese Probleme sind lösbar oder wurden sogar bereits indiversen Workarounds gelöst. Ajax ist auf jeden Fall eine der viel versprechendsten Ent-wicklungen des Webs, die in den letzten Jahren zu beobachten waren. Nun ist es endlichmöglich, mit allseits unterstützten Techniken das träge Verhalten von Webapplikationenbei der Interaktion mit Anwendern abzustellen.

1.2 Was ist das Google Web Toolkit?Wie kommt nun bei Ajax das Google Web Toolkit (GWT) ins Spiel? Nun – das GWTerleichtert wie gesagt erst einmal schlicht und einfach das Erstellen von komplexenWebapplikationen im Allgemeinen und Ajax-Applikationen im Speziellen.16

Es ist im Grunde kein Hexenwerk, mit guten Kenntnissen der Ajax-GrundtechnologienHTML beziehungsweise XHTML, JavaScript, CSS und XML und etwas Kenntnis einerserverseitigen Technologie von Hand eine Web- und auch eine Ajax-Applikation zuerstellen. Allerdings kennen natürlich nicht sämtliche Webseitenersteller bzw. Webent-wickler alle diese Technologien so perfekt wie es notwendig wäre.

Insbesondere der Umgang mit JavaScript ist oft nicht ausreichend vertraut. Es ist etwadefinitiv nicht so, dass beispielsweise ein Java-Entwickler zwangsläufig auch JavaScriptkennt. Gerade JavaScript ist sicher eine der wahrscheinlich am meisten unterschätztenSprachen.

Dabei ist nicht die Sprache an sich hoch kompliziert, aber das unglaublich anfällige Ver-halten gegenüber Randbedingungen bei der Ausführung (konkrete Plattform, Browser,Art und Weise der Einbindung von Skripten und deren Verwendung in der Webseite, dieautomatische Veränderung von Datentypen, die browserabhängige DOM-Manipulationetc.) erfordern im Umgang mit JavaScript ein hohes Maß an Erfahrung und Vorsicht.Und diese Abhängigkeit einer Ajax-Applikation von Randbedingungen endet nicht beiJavaScript, sondern erstreckt sich auch auf HTML beziehungsweise XHTML und StyleSheets und wie gesagt sogar die Art und Weise, wie XML im Client interpretiert wird.

Hinweis

Ich wage zu behaupten, dass in kurzer Zeit fast niemand mehr von Ajax reden wird.Aber nicht, weil Ajax scheitern wird, sondern weil die damit zusammengefasstenMöglichkeiten bei der Erstellung und Programmierung von Webseiten so selbstver-ständlich sein werden, dass man über die mit Ajax speziell herausgehobenen Fea-tures nicht mehr in Form einer eigenständigen Definition reden muss.

16 Es wird meines Erachtens, wie gesagt, über kurz oder lang sowieso kaum noch zu unterscheiden sein,ob man eine Web- oder Ajax-Applikation erstellt.

Was ist das Google Web Toolkit?

Google Web Toolkit 23

Und zudem ist ebenso das konkrete Zusammenspiel dieser ganzen Ajax-Grundtechnolo-gien sowohl fehlerträchtig als auch teilweise recht diffizil. Und dann kommt natürlichauch noch der Server ins Spiel, der Anfragen verarbeiten muss.

Allerdings sind viele der Probleme durch die unterschiedlichen Interpretationen in ver-schiedenen Clientsystemen und nicht zuletzt auch im Zusammenspiel zwischen demServer und dem Client teilweise schon lange bekannt und es gibt oft ausgereifte, standar-disierte Lösungswege und Workarounds.

An dieser Stelle greifen insbesondere so genannte Ajax-Frameworks und -Toolkits ein.Diese können einmal nur aus einfachen Programmbibliotheken mit einigen vorgefertig-ten Funktionen in JavaScript bestehen, aber es kann bei Frameworks respektive Toolkitsauch hingehen bis zu visuellen Entwicklungs-IDEs, um damit Ajax-Applikationen zuerstellen. Insbesondere gestatten manche solcher Hilfsmittel teilweise die Erstellung vonAjax-Applikationen rein auf Serverseite in einer einzigen Technologie. In diesem Fallwird in der Regel die Clientseite für die Ajax-Applikationen generiert und für den Ent-wickler auf Wunsch eine Blackbox dargestellt, deren Aufbau er sich meist gar nicht mehrdirekt ansehen muss und wird. Und genau so etwas haben wir mit dem GWT.

1.2.1 Java für Ajax – das GWT

Das GWT ist ein absolut kostenloses, freies Java Entwicklungs-Framework beziehungs-weise -Toolkit, um Ajax-Applikationen unter Verwendung von Java als Sprache undeinem beliebigen Java-Entwicklungs-Tool zu schreiben und bei Bedarf auch zu debug-gen. Die Erstveröffentlichung war am 17. Mai 2006. Das GWT besitzt eine Reihe vonBefehlszeilen-Tools und lässt sich vor allem auch nahtlos in bestehende Java-IDEs wieEclipse einhängen. Das GWT nutzt zur Erstellungszeit der Ajax-Applikation explizit dieVorteile der Java-Umgebung.

Wenn Sie Ihre Ajax-Applikation später in die Produktion bringen (d.h. wirklich in derPraxis einsetzen) wollen, wird mittels des GWT-Compilers beziehungsweise Java-to-JavaScript-Compilers eine bis dahin reine Java-Applikation in eine äquivalent funktio-nierende Applikation aus JavaScript, CSS und HTML für die Clientseite und damit dieendgültige Ajax-Applikation übersetzt.

Dieser Java-to-JavaScript-Compiler ist das Herz des GWT und läuft auch quasi unsicht-bar im Hintergrund, wenn Sie Ihre GWT-Applikation zu Testzwecken erst einmal im sogenannten Hosted-Modus (das ist ein Java-Umfeld) ausführen.

Der GWT-Compiler unterstützt die zentralen Bestandteile der Sprache Java selbst unddie GWT-Laufzeitbibliothek emuliert nach der Übersetzung im Client einen relevantenTeil der Java-Laufzeitbibliothek.

Hinweis

Beachten Sie, dass einige Teile des GWT längere Zeit als “closed source” zur Verfü-gung gestellt wurden. Mittlerweile ist das GWT allerdings vollständig Open Source.

1 – Grundlagen

24

1.2.2 Der Aufbau eines typischen GWT-Entwicklungszyklus

Werfen wir einen ersten Blick auf das, was uns mit der Programmierung einer GWT-Applikation nun erwartet. Der Aufbau eines typischen Entwicklungszyklus unter demGWT ist meist gleich.

Der erste Schritt bei der Erstellung einer Ajax-Applikation mit dem GWT ist, dass Sieeinen reinen Editor oder auch Ihre favorisierten Java-Tools zum Erstellen bzw. Schreibeneiner Ajax-Applikation verwenden. Zu dem Zeitpunkt arbeiten Sie im Kern mit Java.Dabei verwenden Sie ergänzend zu den „normalen“ Java-Klassen und -Schnittstellenfast immer einige spezielle GWT-Bibliotheken zur Erweiterung der Java-Funktionalität,sofern es notwendig ist. Wenn Sie eine lauffähige Applikation zusammen haben, werdenSie in der Regel die Applikation im Java-Umfeld (im Hosted-Modus) bereits testen.

Im zweiten Schritt verwenden Sie den Java-to-JavaScript-Compiler des GWT, um IhreApplikation in einen Satz aus JavaScript-, CSS- und XHTML- bzw. HTML-Dateien zuübersetzen. Dabei wird eine typische voll funktionale GWT-Applikation etwa 100 KBytean cachebarem JavaScript-Code umfassen, den der Endanwender laden muss, wenn ereine mit dem GWT generierte Anwendung in seinem Browser laufen lassen will. Interak-tive GWT-Applikationen sollen dabei nach eigenen Aussagen von Google mindestensso performant sein wie handgeschriebene Gegenstücke. Dafür sind sie aber meist bedeu-tend besser an unterschiedliche Browsergegebenheiten und Bedingungen auf dem Cli-entrechner angepasst. Die gesamten Ressourcen können dann über einen beliebigenWebserver bereitgestellt werden, wobei Sie natürlich die Verzeichnis- und Bezeichner-strukturen beibehalten müssen, die Ihnen das GWT generiert hat.

Sie werden dann in einem abschließenden Schritt natürlich Tests unter realen Bedingun-gen fahren, um zu sehen, ob Ihre Applikation auch wirklich in jedem Browser funktio-niert, den Sie unterstützen wollen.

1.3 Die Vorteile des GWTEin Toolkit wie das GWT oder ein Framework allgemein bedarf immer einer gewissenEinarbeitung und birgt natürlich immer auch seine eigenen Schwierigkeiten. Dement-sprechend lohnt sich ein Einsatz sicher nicht für einen Webseitenersteller, der nur einoder zwei Dinge wie eine Benutzeranmeldung asynchron gestalten möchte. Vor allem,wenn das Webprojekt bereits in einer bestehenden Entwicklungsumgebung (Webeditor,CMS etc.) erstellt und gepflegt wird. Solch ein Entwickler wird mit einer manuellenErstellung der noch fehlenden Ajax-Routinen sicher besser bedient sein.17

Anders sieht es aus, wenn Sie eine vollkommen neue Applikation erstellen wollen. Ent-scheidende Vorteile der Verwendung des GWT gegenüber einer händischen Erstellungeiner Ajax-Applikation zeigen sich vor allem bei komplexeren Applikationen und liegenzum einen in den konzeptionellen Vorteilen von Java gegenüber JavaScript (feste Daten-typen, ausgefeiltes Speichermanagement, strikte Objektorientierung, ausgefeiltes Excep-

17 Beim Einsatz des GWT speziell ist natürlich zudem auch die Notwendigkeit gegeben, dass man sicheinigermaßen in Java auskennt.

Die Vorteile des GWT

Google Web Toolkit 25

tion-Handling etc.). Und natürlich hat es für geübte Java-Programmierer auch seinenReiz, wenn eine Webapplikation (gleich ob mit oder ohne Ajax) wie eine Desktop-Appli-kation im Java-Umfeld erstellt wird, und man sich nicht mit dem Gemisch aus Java-Script, CSS und HTML herumschlagen muss.

Aus der Verwendung der Sprache Java heraus ergeben sich weitere Vorteile für dasDesign, was in Java viel leichter verständlich als ein solches Konglomerat aus HTML,CSS und JavaScript ist. Vor allem, wenn keine ausführliche Dokumentation zur Verfü-gung steht.

Und man sollte auch nicht außer Acht lassen, dass es für JavaScript nur wenige gute Ent-wicklungsumgebungen gibt. Für Java hingegen gibt es einen großen Fundus an sehr pro-fessionellen Entwicklungstools, die vom Debuggen über das Refactoring bis zur Kom-plettierung von Code alle Möglichkeiten bieten, die man in der professionellenEntwicklung gewohnt ist.

1.3.1 Die GWT-Features

Das GWT selbst erweitert nun die bereits über Java vorhandenen Fähigkeiten um einigeinteressante Features, die auch permanent weiterentwickelt werden. Nachfolgend fin-den Sie einen Stand, der für das GWT 1.4 zum Zeitpunkt der Bucherstellung charakteris-tisch ist.

Es gibt eine Vielzahl an dynamischen, wieder verwendbaren Komponenten zur Gestal-tung von Weboberflächen (Google redet hier von so genannten Widgets, in anderenQuellen – auch bei Google selbst in verschiedenen APIs – taucht dafür auch der BegriffGadget auf). Damit können Sie komplexe Widgets durch die Komposition anderer Wid-gets erstellen. Ein Widget bezeichnet allgemein einen eigenständigen Teil einer grafi-schen Oberfläche, welches eine spezielle (meist kleine) Funktion oder Anzeige als Teileines übergeordneten Konzepts übernimmt. Das Layout solcher Widgets kann automa-tisch über Panels (spezielle Komponenten zur Aufnahme und Anordnung von Widgets)gesteuert und ein Widget kann mit anderen Entwicklern über .jar-Dateien18 ausge-tauscht werden.

Das GWT erleichtert erheblich den Umgang mit RPC (Remote Procedure Call – aufDeutsch bedeutet das „Aufruf einer entfernten Prozedur“), was bei Ajax-Applikationenja der Kern der Sache ist und damit sehr häufig vorkommt. Um zwischen der Webappli-kation und dem Webserver zu kommunizieren, müssen Sie im allgemeinen Fall selbstserialisierbare Java-Klassen für Ihre Anfrage und die Entgegennahme der Antwort defi-nieren. In der Produktion serialisiert das GWT automatisch den Request (die Anfrage)und deserialisiert ebenso automatisch den Response (die Antwort) vom Webserver (vonder Clientseite aus betrachtet). Der RPC-Mechanismus des GWT kann sogar mit poly-morphen Klassenhierarchien umgehen und Sie können Ausnahmen über das gesamteSystem auswerfen.

Das GWT stellt auch eine Lösung für eines der klassischen Ajax-Probleme bereit, das vonAjax-Kritikern immer wieder ins Feld geführt wird. Die asynchrone Datennachforde-

18 Das .jar-Format ist ein Komprimierungsformat für Java-Ressourcen, das kompatibel zu .zip ist.

1 – Grundlagen

26

rung am Browser vorbei hebelt den Mechanismus der ZURÜCK-Schaltfläche des Brow-sers aus. Die Historie des Browsers dokumentiert nur das neue Laden einer Seite, die jabei einer Ajax-Datennachforderung nicht ausgelöst wird. Das GWT löst dieses Problemund andere Aufgaben der Benutzerführung und verwirrt damit den Anwender nichtüber den scheinbar fehlenden Zugriff auf die History.

Eines der größten Probleme unter JavaScript ist sicher, dass es dafür kaum vernünftigeMöglichkeiten zum Debuggen gibt.19 Oft ist man bei der Fehlersuche auf primitive Test-ausgaben im Quellcode angewiesen. Mit dem GWT haben Sie eine vollständige Debug-Umgebung zur Verfügung, in der sie alle Erweiterungen und Vorteile der Fehlersuche inIDEs wie Eclipse verwenden können. Das Google Web Toolkit kann mit nahezu allenpopulären nicht kommerziellen, kommerziellen und Enterprise-Entwicklungsapplikati-onen eingesetzt werden. Und warum ist das überhaupt möglich, wenn doch die Ajax-Applikation im Client auf JavaScript aufsetzt? Zur Laufzeit ist der Code zwar in Java-Script übersetzt, aber zur Entwicklungszeit läuft er in einer Java Virtual Maschine.

Der Einsatz des GWT sorgt dafür, dass von dem resultierenden Webcode automatischdie wichtigsten Browser vernünftig unterstützt werden. Dies umfasst nach offiziellenVerlautbarungen von Google explizit den Internet Explorer, Firefox, Mozilla, Safari undOpera. Dabei soll die Unterstützung auch dann funktionieren, wenn der Browser sichnicht richtig gegenüber dem Server identifiziert.20 Dieses Faktum kann gar nicht hochgenug eingeschätzt werden, denn auch heute sind die Probleme der unterschiedlichenUnterstützung in verschiedenen Browsern bei Webapplikationen mit ausgeprägtendynamischen und optischen Feinheiten sehr groß.

Das GWT stellt eine Integration von JUnit (automatisiertes Testen) zur Verfügung. Daserlaubt sowohl das Unit-Testing in einem Debugger als auch in einem Browser. Sie kön-nen sogar Unit-Tests mit asynchronen RPCs durchführen.

Das GWT stellt diverse Unterstützung zur Internationalisierung bereit.

Die Klassen des GWT können bei Bedarf auch mit handgeschriebenem JavaScript inner-halb des Java-Quellcodes gemischt werden. Dazu gibt es eine Schnittstelle mit NamenJavaScript Native Interface (JSNI).

Zum Zeitpunkt der Bucherstellung wurde neu ein Google Gears Support angekündigt,der mehr oder weniger einen Prototyp für weitere Unterstützungsmaßnahmen im GWTdarstellt. Das soll die Verwendung der vielen anderen Google APIs in GWT-Applikatio-nen Schritt für Schritt erweitern und erleichtern.

Alles in allem deutet bereits diese Aufzählung der GWT-Features an, dass das Systemeinige interessante Möglichkeiten zum schnellen, sicheren und bequemen Erzeugen vonAjax-Applikationen bietet.

19 Wenige Ausnahmen sind beispielsweise Firefox-Plug-ins wie Venkman oder Firebug, den JavaScript-Debugger von Mircosoft für den Internet Explorer oder eine vollständige Ajax-IDE wie Aptana(basierend auf Eclipse). Aber auch diese Debugger kommen meist nicht an den Standard von Java-Debuggern heran.

20 Viele Browser geben als Kennung beispielsweise den Internet Explorer an. Insbesondere fahren diemeisten Opera-Browser so unter falscher Flagge, um von Browserweichen nicht abgewiesen zu wer-den.

Google Web Toolkit 27

Download und Installation

Bevor Sie mit dem GWT arbeiten können, müssen einige Voraussetzungen auf Ihrer Ent-wicklungsplattform gegeben sein und Sie müssen sich selbstverständlich das Toolkitbesorgen und installieren.

2.1 Die Voraussetzungen – die Java-UmgebungDie wichtigste Voraussetzung betrifft erst einmal Java respektive die damit verbundenenTools und die Laufzeitumgebung. Das GWT selbst ist zum einen im Wesentlichen in Javageschrieben. Deshalb benötigen Sie zum Ausführen der zugehörigen GWT-Tools eineJava-Laufzeitumgebung. Zum anderen verwenden diese GWT-Tools selbst zum Aufbaueiner Ajax-Applikation zum Zeitpunkt der Erstellung aber auch Klassen und Bibliothe-ken des Java-Standardentwicklungspakets. Deshalb benötigen Sie auch dieses.

Zur Erstellung von Applikationen mit dem GWT benötigen Sie also zusätzlich ein aktu-elles Java-Entwicklungspaket (das so genannte Java SE Development Kit oder nur JavaDevelopment Kit – abgekürzt JDK oder auch SDK1 – oder die Java 2 Platform, Stan-dard Edition, v 1.4.2 – J2SE). Das JDK können Sie sich bequem auch von der beiliegen-den Buch-CD herunterladen.

Solch ein System sollten Sie auf jeden Fall zuerst (also vor dem GWT) auf Ihrem Rechnerinstalliert haben. Diese Java-Entwicklungssysteme enthalten neben den eigentlichen Ent-wicklungstools alle eine vollständige Java-Laufzeitumgebung (JRE – Java RuntimeEnvironment) zum Ausführen von Java-Applikationen. Sämtliche Java-Technologienbekommen Sie bei Bedarf unentgeltlich2 von den Java-Seiten von Sun Microsystems (dieFirma hinter Java) unter http://java.sun.com. Es gibt diese für verschiedene Betriebssys-teme, worauf wir gleich noch einmal eingehen.

1 Leider tauchen in diesem Zusammenhang sowohl der Bezeichner JDK als auch der Bezeichner SDKetwas inkonsistent auf. Selbst auf den Java-Seiten von Sun findet man beide Begriffe oft synonym. Ananderen Stellen wird explizit unterschieden. Das hat wohl hauptsächlich historische Gründe, dennam Anfang sprach Sun bei den Java-Entwicklungstools und den damit verbundenen Bibliothekenausschließlich vom JDK. Der Bezeichner SDK ist eigentlich universeller und hat in neueren Versionenvon Java mehr oder weniger schleichend Einzug gehalten.

2 Es ist dennoch ganz interessant, sich einmal die genauen Lizenzbedingungen von Sun durchzusehen.Gegebenenfalls sogar aus verschiedenen Zeitabschnitten, denn hier hat sich über die Zeit viel geän-dert. Obwohl Sun in der letzten Zeit Java zunehmend vollständig freigibt, enthalten die Bedingungendoch so einige Klauseln, die Sun weiterhin die Oberhoheit über Java einräumen. Die gesamte Lizenz-politik von Sun wurde in der Vergangenheit von der Open-Source-Gemeinde oft kritisiert (da keineechte Open-Source-Lizenz wie etwa die GPL), aber eine starke Macht im Hintergrund kann in Bezugauf Standards durchaus auch von Vorteil sein.

2 – Download und Installation

28

Abbildung 2.1: Die Java-Seiten von Sun

Sie sollten bei einer Java-Version, die Sie auf Ihren Rechner installieren, unbedingt daraufachten, dass es sich mindestens um die Version 1.4.2 handelt. Natürlich ist eine möglichstaktuelle Version immer von Vorteil.

Die Voraussetzungen – die Java-Umgebung

Google Web Toolkit 29

Abbildung 2.2: Download des passenden Java SE Development Kit für die verwendete Betriebssystemplattform

2 – Download und Installation

30

2.1.1 Die Installation der Java-Umgebung

Die Installation der Java-Umgebung ist absolut unproblematisch. Sie werden bei allenneueren Java-Versionen von einem typischen Installationsassistenten für Ihr Betriebssys-tem geführt. Dieser richtet alle notwendigen Einstellungen in Ihrem Betriebssystem ein.

Abbildung 2.3: Die Installation des JDK und der JRE ist vollkommen unproblematisch

Anschließend sind auf Ihrem Rechner die passenden Verzeichnisse vorhanden und dieSystemeinstellungen zum Ausführen von Java-Applikationen und den JDK-Tools ange-passt.

2.2 Der Download des GWTWenn nun Java auf Ihrem Rechner installiert ist, ist es Zeit für die Installation des GWT.Dem steht der Download von der beiliegenden Buch-CD oder den Google-Developer-Webseiten unter dem URL http://code.google.com voran. Google stellt darüber nicht nurdas GWT, sondern zahlreiche weitere APIs und Tools bereit.

Sie finden dort beispielsweise das API Google Account Authentication zur Unterstüt-zung von Authentifizierungen, das AdSense API zum Zugriff auf das AdSense-Pro-gramm von Google und das AdWords API zur direkten Interaktion von Programmenmit dem AdWords-Server von Google. Des Weiteren stehen dort verschiedene GoogleAPIs im Umfeld von Feeds zur Verfügung, das Google AJAX Search API zur Program-mierung eines Ajax-basierenden Google-Suchmoduls, um Suchergebnisse in eigenenWebseiten zu verarbeiten, APIs für den Zugriff auf Blogs, GMail, Google Earth, GoogleMaps und Maps for Mobile bis hin zu YouTube und vieles mehr.