Ajax Frameworks 3827327288, 9783827327284 [PDF]

Zitiervorschau

---

AJAX Frameworks

Open Source Software wird gegenüber kommerziellen Lösungen immer wichtiger. Addison-Wesley trägt dieser Entwicklung Rechnung mit den Büchern der Open Source Library. Administratoren, Entwickler und User erhalten hier professionelles Know-how, um freie Software effizient einzusetzen. Behandelt werden sowohl Themen wie Betriebssysteme, Netzwerke und Sicherheit als auch Programmierung. Eine Auswahl aus unserem Programm: Dieses Buch bietet eine praktische Einführung in die Arbeit mit Eclipse und zeigt zunächst, wie man mit Eclipse eigene Applikationen schnell und effizient erstellen kann. Darüber hinaus führt Sie dieses Buch systematisch in die UML ein und weist dementsprechend eine durchgängige UML-Notation auf. Ebenso erfahren Sie alles Grundlegende über Java und die erweiterten Konzepte dieser Programmiersprache. Das Buch wendet sich an sämtliche Java-Programmierer – vom Studierenden bis hin zum Profi –, die Eclipse und dessen Plug-ins einsetzen möchten. Kenntnisse in Java und in der objektorientierten Programmierung werden hierfür vorausgesetzt.

Eclipse in der Java-Entwicklung Patrick Kiwitter 336 Seiten Euro 34,95 (D), 36,00 (A) ISBN 978-3-8273-2490-0

Der erste und kleinere Teil des Buches ist ein Ajax-Crashkurs – hier frischen Sie Ihr Wissen zu Prototype, JSON, XML, XSLT sowie objektorientiertem JavaScript auf und lernen die AjaxToolkits Dojo, Prototype, jQuery und DWR kennen. Im zweiten Teil zeigen Ihnen die Autoren Best Practices zu Ereignisbehandlung, Eingabevalidierung, Drag & Drop, Zustandsverwaltung, komplexen Navigationslösungen und zur Behebung von Latenzproblemen. Sie setzen Dojo, Prototype, jQuery und DWR und die offenen Web-APIs von Yahoo!, Google und Flickr im Zuge einzelner Beispielprojekte ein und nutzen das Gelernte schließlich für die Entwicklung einer komplexen Mashup-Anwendung.

Ajax in practice Dave Crane, Bear Bibeault, Jord Sonneveld 552 Seiten 49,95 (D), 51,40 (A) ISBN 978-3-8273-2596-9

Ralph Steyer

AJAX Frameworks RIAs mit Dojo & Co

An imprint of Pearson Education München • Boston • San Francisco • Harlow, England Don Mills, Ontario • Sydney • Mexico City Madrid • Amsterdam

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

Die Informationen in diesem Produkt werden ohne Rücksicht auf einen eventuellen Patentschutz veröffentlicht. Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt. Bei der Zusammenstellung von Texten und Abbildungen wurde mit größter Sorgfalt vorgegangen. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Verlag, Herausgeber und Autoren können für fehlerhafte Angaben und deren Folgen weder eine juristische Verantwortung noch irgendeine Haftung übernehmen. Für Verbesserungsvorschläge und Hinweise auf Fehler sind Verlag und Herausgeber dankbar. Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Die gewerbliche Nutzung der in diesem Produkt gezeigten Modelle und Arbeiten ist nicht zulässig.

Fast alle Hardware- und Softwarebezeichnungen und weitere Stichworte und sonstige Angaben, die in diesem Buch verwendet werden, sind als eingetragene Marken geschützt. Da es nicht möglich ist, in allen Fällen zeitnah zu ermitteln, ob ein Markenschutz besteht, wird das ® Symbol in diesem Buch nicht verwendet.

Umwelthinweis: Dieses Produkt wurde auf chlorfrei gebleichtem Papier gedruckt. Um Rohstoffe zu sparen, haben wir auf Folienverpackung verzichtet.

10 9 8 7 6 5 4 3 2 1 10 09 08

ISBN 978-3-8273-2728-4

© 2008 by Addison-Wesley Verlag, ein Imprint der Pearson Education Deutschland GmbH Martin-Kollar-Straße 10–12, D-81829 München/Germany Alle Rechte vorbehalten Einbandgestaltung: Marco Lindenbeck, webwo GmbH ([email protected]) Lektorat: Brigitte Alexandra Bauer-Schiewek, [email protected] Korrektorat: Petra Kienle Fachlektorat: Dirk Louis Herstellung: Monika Weiher, [email protected] Satz: Reemers Publishing Services GmbH, Krefeld (www.reemers.de) Druck: Bosch Druck, Ergolding Printed in Germany

Inhaltsübersicht Vorwort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13

1

Einleitung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

17

2

Die Welt von AJAX – zentrale Grundlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

43

3

Das YUI – Yahoo User Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

97

4

Das Dojo-Toolkit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161

5

Prototype + Scriptaculous . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261

A

Anhang . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323 Stichwortverzeichnis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353

Inhaltsverzeichnis 1

Vorwort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13

Einleitung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

17

1.1 Was behandelt dieses Buch? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 1.1.1

Das YUI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

19

1.1.2

Das Dojo Toolkit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

19

1.1.3

Prototype + Scriptaculous . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

19

1.1.4

Weitere Frameworks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

20

1.2 Schreibkonventionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 1.3 Wer ich bin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 1.4 Wer sind Sie? – der Versuch einer Zielgruppendefinition . . . . . . . . . . . . 24 1.4.1

Für wen lohnen sich eigentlich AJAX-Frameworks? . . . . . . . . . . . . . . . .

25

1.4.2

Wie sieht also die Zielgruppe des Buchs aus? . . . . . . . . . . . . . . . . . . . .

25

1.5 Was benötigen Sie? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 1.5.1

Hardware und Betriebssystem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

26

1.5.2

Die Frameworks bzw. Toolkits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

1.5.3

Die Browser-Armada . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

1.5.4

Betriebssysteme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

30

1.5.5

Der Webserver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

33

1.5.6

Die Entwicklungstools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

35

1.5.7

Firefox zur IDE für die Webentwicklung ausbauen . . . . . . . . . . . . . . . . .

35

1.5.8

Aptana . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

39

1.6 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 2

Die Welt von AJAX – zentrale Grundlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 2.1 Das WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 2.1.1

Clientseitige Webprogrammierung als erste Optimierung . . . . . . . . . .

45

2.1.2

Rückverlagerung auf den Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

46

2.1.3

Der Status quo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

46

2.1.4

Das Konzept von AJAX und das Web 2.0 . . . . . . . . . . . . . . . . . . . . . . . . .

47

2.2 Die Kerntechniken von AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 2.2.1

HTML und XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

50

2.2.2

Das Prinzip der Fehlertoleranz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

51

2.2.3

JavaScript & Co . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

53

2.2.4

DOM und der Zugriff auf Elemente einer Webseite . . . . . . . . . . . . . . . .

54

Inhaltsverzeichnis

2.2.5

Stylesheets und DHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

57

2.2.6

XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

59

2.2.7

JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

66

2.3 Come together right now – AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 2.3.1

Datenübertragung per HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

69

2.3.2

Details zum XMLHttpRequest-Objekt . . . . . . . . . . . . . . . . . . . . . . . . . . . .

75

2.3.3

Exemplarischer Ablauf einer AJAX-Anfrage . . . . . . . . . . . . . . . . . . . . . . .

81

2.3.4

Praktische AJAX-Beispiele – von Hand . . . . . . . . . . . . . . . . . . . . . . . . . . .

81

2.4 Wie positionieren sich AJAX-Frameworks und Toolkits? . . . . . . . . . . . . . 88 2.4.1

Lösung klassischer AJAX-Probleme . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

89

2.4.2

AJAX-Frameworks und -Toolkits – nur Mogelpackungen? . . . . . . . . . . .

93

2.4.3

Welche Ansätze gibt es für Frameworks und Toolkits und wie geht man damit als Entwickler um? . . . . . . . . . . . . . . . . . . . . . . . . . .

94

2.5 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 3

Das YUI – Yahoo User Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 3.1 Was ist das YUI? – ein Überblick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 3.1.1

Die offiziell unterstützten Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

98

3.2 Die YUI-Webseite und der Download . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 3.3 Die Bestandteile des YUI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 3.3.1

Die Struktur der YUI-Bibliothek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

3.4 Die konkrete Anwendung des YUI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 3.4.1

Wie gehen Sie beim Einstieg am besten vor? . . . . . . . . . . . . . . . . . . . . . 106

3.5 First contact – die DOM Collection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 3.5.1

Die Einbindung der DOM Collection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

3.5.2

Die Anwendung der DOM Collection . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

3.5.3

Ein erstes Beispiel mit der DOM Collection . . . . . . . . . . . . . . . . . . . . . . . 112

3.6 Das Event Utility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 3.6.1

Die Einbindung der Event und Custom Event Utilities . . . . . . . . . . . . . . 117

3.6.2

Die Anwendung der Event und Custom Event Utilities . . . . . . . . . . . . . . 118

3.6.3

Ein vollständiges Beispiel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

3.6.4

Wozu das Event Utility? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

3.7 Die Möglichkeiten der YUI Library Utilities . . . . . . . . . . . . . . . . . . . . . . . . 123 3.7.1

Drag&Drop mit dem YUI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

3.7.2

Anpassen des Originalbeispiels für eigene Zwecke . . . . . . . . . . . . . . . . 124

3.8 Der Connection Manager und die AJAX-Funktionalität des YUI . . . . . . . . 131 3.8.1

8

Die Einbindung der notwendigen Ressourcen . . . . . . . . . . . . . . . . . . . . . 131

Inhaltsverzeichnis

3.8.2

Die Initiierung einer asynchronen Transaktion unter Verwendung des Connection Manager . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

3.8.3

Asynchrone Transaktionen und das Callback-Objekt . . . . . . . . . . . . . . . 133

3.9 Das JSON Utility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 3.9.1

Das JSON Utility verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

3.9.2

Anwenden des JSON Utility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

3.9.3

Ein vollständiges AJAX-Beispiel mit JSON . . . . . . . . . . . . . . . . . . . . . . . . 141

3.9.4

Verwandeln von JavaScript-Daten in einen JSON-String . . . . . . . . . . . . 144

3.10 Eine Übersicht über wichtige Komponenten des YUI Library Control/Widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 3.11 Kontrollieren, Überwachen und Optimieren Ihrer YUI-RIA . . . . . . . . . . . 147 3.11.1

Der YUI Compressor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148

3.11.2

Der YUI Configurator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149

3.11.3

Kontrolle und Überwachung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150

3.11.4

Der LogReader . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152

3.12 Die –debug-Versionen der YUI-Komponenten . . . . . . . . . . . . . . . . . . . . . 159 3.13 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 4

Das Dojo-Toolkit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 4.1 Was ist das Dojo Toolkit? – ein Überblick . . . . . . . . . . . . . . . . . . . . . . . . . 161 4.1.1

Die Build Tools und das Paketsystem . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

4.1.2

Die drei Säulen von Dojo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

4.2 Die offiziell unterstützten Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164 4.3 How do I get this? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164 4.3.1

Download des Dojo Toolkits oder direkte Einbindung aus dem Internet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165

4.3.2

Extrahieren = Installieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170

4.3.3

Die Datei dojo.js – die Verwaltungszentrale . . . . . . . . . . . . . . . . . . . . . . 171

4.3.4

Konfiguration von Dojo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172

4.3.5

Test the West – die Datei runTests.html . . . . . . . . . . . . . . . . . . . . . . . . . 173

4.4 Der Einstieg ins Geschäft . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 4.5 Das Grundgerüst einer Dojo-Applikation . . . . . . . . . . . . . . . . . . . . . . . . . 178 4.6 Die require()-Methode und das Dojo-Paketsystem . . . . . . . . . . . . . . . . . 179 4.6.1

Namensräume . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180

4.6.2

Die Liste der verfügbaren Widgets und der zugehörigen Module sowie die API-Dokumentation . . . . . . . . . . . . . . . . . . . . . . . . . . 183

4.6.3

Schutz des DOM – die Methode dojo.addOnLoad() . . . . . . . . . . . . . . . . 184

9

Inhaltsverzeichnis

4.7 Der Dojo-Typ und das gerenderte Widget . . . . . . . . . . . . . . . . . . . . . . . . 185 4.7.1

Das Basiselement für dojoType . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187

4.8 Ein erstes Beispiel mit Dojo-Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 4.9 Das Dijit – Dojo Widget Library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 4.9.1

Ein genauerer Blick auf das Dijit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192

4.9.2

Eine Übersicht zu Dijit-Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194

4.9.3

Ein paar weitere Dijit-Widgets in vollständigen Beispielen . . . . . . . . . . 195

4.10 Die Verbindung zwischen einem Ereignis und dem Widget – das Dojo-Eventsystem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198 4.10.1

Innere Ereignisbehandlung mit dem Dojo-Eventsystem . . . . . . . . . . . . . 199

4.10.2 Dojo-Ereignisse verbinden – dojo.connect() . . . . . . . . . . . . . . . . . . . . . . 199 4.10.3 Mehrere Ereignisse verknüpfen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203

4.11 Layout mit dem Dijit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 4.11.1

HTML und Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

4.11.2

Das Dijit-Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209

4.11.3

Die prinzipielle konzeptionelle Erstellung eines Dijit-Layouts . . . . . . . . 211

4.11.4

Ein vollständiges Beispiel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212

4.11.5

Ein weiteres Beispiel zum Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216

4.12 AJAX und Daten vom Server lesen – XHR . . . . . . . . . . . . . . . . . . . . . . . . . 219 4.12.1

Die Callback-Funktion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220

4.12.2 Die Fehlerfunktion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 4.12.3 Eine gemeinsame Behandlungsfunktion . . . . . . . . . . . . . . . . . . . . . . . . . 221 4.12.4 Mit handleAs unterschiedlich die Antwort interpretieren . . . . . . . . . . . . 221 4.12.5 Ein vollständiges Beispiel mit einer AJAX-Anfrage . . . . . . . . . . . . . . . . . 222 4.12.6 Weitere AJAX-Beispiele – Daten zum Server senden . . . . . . . . . . . . . . . . 227 4.12.7 Synchrone Ausführung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233

4.13 DOM-Abfragen mit dojo.query() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 4.13.1

Zugriff auf ein DOM-Element über die ID . . . . . . . . . . . . . . . . . . . . . . . . . 234

4.13.2 Zugriff auf DOM-Elemente über die CSS-Klasse . . . . . . . . . . . . . . . . . . . 235 4.13.3 Ereignisse in Verbindung mit dojo.query() . . . . . . . . . . . . . . . . . . . . . . . 236

4.14 Animationen mit Dojo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241 4.14.1

Ein Grundgerüst . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241

4.14.2 Die Klasse dojo._Animation und die play()-Methode . . . . . . . . . . . . . . . 242 4.14.3 Basisanimationen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242 4.14.4 dojo.fx zur Ergänzung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246 4.14.5 Kombination mit anderen Multimedia-Techniken . . . . . . . . . . . . . . . . . . 251

10

Inhaltsverzeichnis

4.14.6 Animationsereignisse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 4.14.7 Animationen in Verbindung mit dojo.query() . . . . . . . . . . . . . . . . . . . . . 257

4.15 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259 5

Prototype + Scriptaculous . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 5.1 Download und Verwendung von Prototype . . . . . . . . . . . . . . . . . . . . . . . 262 5.1.1

Die unterstützten Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263

5.1.2

Der Einstieg . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263

5.2 Shortcuts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 5.2.1

$( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

5.2.2

$$() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267

5.2.3

$F( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270

5.2.4

$A() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272

5.2.5

$H . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272

5.2.6

$R( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272

5.2.7

$w( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273

5.2.8

Try.these( ) – Ausnahmebehandlung mit Prototype . . . . . . . . . . . . . . . . 274

5.2.9

document.getElementsByClassName( ) . . . . . . . . . . . . . . . . . . . . . . . . . . 274

5.3 Prototype und AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 5.3.1

AJAX-Objekte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275

5.4 Class zum Erstellen von Klassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280 5.4.1

create( ) und addMethods( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280

5.4.2

$super( ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281

5.4.3

Die Vererbungskette im Prototyping . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281

5.4.4

Ein Beispiel mit create( ) und addMethods( ) . . . . . . . . . . . . . . . . . . . . . 282

5.5 Date . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286 5.6 Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286 5.6.1

Verketten von DOM-Methoden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286

5.6.2

Element als Konstruktor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291

5.6.3

Die Methoden zum DOM-Zugriff und Element.Methods . . . . . . . . . . . . 291

5.6.4

Methoden in der Praxis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295

5.7 Scriptaculous . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308 5.7.1

Download und Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308

5.7.2

Grundlegende Anwendung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309

5.7.3

Effekte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310

5.7.4

Formular- und AJAX-Elemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313

5.7.5

Drag&Drop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317

5.8 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322 11

Inhaltsverzeichnis

A

Anhang . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323 A.1 Quellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323 A.2 Die Buch-CD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324 A.3 Grundlagen zum Internet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324 A.3.1

Das Client-Server-Prinzip und TCP/IP – die Übertragungsbasis . . . . . . 324

A.3.2

Verbindungsorientierte Datenkommunikation . . . . . . . . . . . . . . . . . . . . 325

A.3.3

Zustandslose Datenkommunikation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325

A.4 HTML und XHTML – grundlegende Details . . . . . . . . . . . . . . . . . . . . . . . . 326 A.4.1

Steueranweisungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326

A.4.2

Parameter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327

A.4.3

HTML-Eventhandler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328

A.4.4

Strukturierung einer Webseite mit HTML . . . . . . . . . . . . . . . . . . . . . . . . . 328

A.4.5

Das W3C und die verschiedenen Versionen von HTML und XHTML . . . 329

A.5 Die Gültigkeit von Webseiten testen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331 A.6 Die Einbindung von JavaScript in Webseiten . . . . . . . . . . . . . . . . . . . . . . 334 A.7 Ein paar Ausführungen zur JavaScript-Syntax . . . . . . . . . . . . . . . . . . . . . 338 A.8 Objekte in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341 A.8.1

Verfügbare DOM-Objekte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342

A.9 Die Verwendung von Stylesheets in einer Webseite . . . . . . . . . . . . . . . . 343 A.9.1

Kaskadierung von Regeln . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345

A.9.2

Die konkrete Syntax von CSS-Deklarationen . . . . . . . . . . . . . . . . . . . . . . 346

A.10 Die Syntax eines XML-Dokuments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346 A.10.1

Namensräume . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347

A.10.2 Gültige XML-Dokumente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347

A.11 Add-ons für Firefox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348 A.12 Die Meldungen eines Webservers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350 Stichwortverzeichnis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353

12

Vorwort Unendliche Weiten. Dies sind die Abenteuer des Raumschiffs Ajaxprise. Wir schreiben das Jahr 2008. Ich sitze mal wieder in Dänemark in einer Campinghütte, warte auf besseres Wetter zum Paragliden an der Düne und kämpfe mit meinem Vorwort. Die Zukunft war gestern. Niemand kann mehr bezweifeln, dass das Internet im Allgemeinen und das World Wide Web (WWW) im Besonderen ein zentraler Teil des modernen Lebens geworden sind. Was sich Sience-Fiction-Autoren vor 30 Jahren erträumt haben, hat die Wirklichkeit überholt, zumindest teilweise1. Selbstredend gibt es schon seit Jahren klassische Internetapplikationen wie OnlineShops, Webportale, Informationsdienste etc. Spätestens, seit jedoch sogenannte RIAs (Rich Internet Applications) Anwendern im Rahmen von Webseiten immer weitergehende (reichhaltige) und oft jetzt erst richtig nützliche Funktionalitäten bereitstellen, verdrängen Webapplikationen sogar mehr und mehr die klassischen DesktopAnwendungen. Seien es Routenplaner inklusive interaktiver Satellitenkarten, Kalender, Adressbücher, Enzyklopädien, Speicherplatz für Dokumente bis hin zu vollständigen Office-Anwendungen im Rahmen eines Browsers. Permanent entstehen immer mehr solcher Webapplikationen, die dem sogenannten Web 2.0 respektive dessen schon propagierten Nachfolger Web 3.0 zuzuordnen sind. Blogs2, Wikis samt zahlreichen Angeboten, die unter dem Schlagwort der sogenannten Kollektiven Intelligenz geführt werden3, Mashups4, Social Network Analysis5, Portale etc. zählen zu diesem Bereich, der sich meist durch eine hohe Interaktion mit dem Besucher und einen fließenden Übergang zwischen Informationsanbieter und Informationskonsumenten auszeichnet. Alle diese modernen Angebote des World Wide Web machen das Medium zum Schweizer Taschenmesser der modernen Informationsgesellschaft. Letztendlich bleibt das WWW technisch gesehen aber auch bei RIAs immer noch ein Client-Server-System, das bei der Protokollebene auf sehr alten (oder – positiv formuliert – etablierten) Standards aufbaut und auf der Clientplattform mit erheblichen 1

Gut – die aktuellen Raumschiffe sind derzeit noch ein bisschen von der Warp-Geschwindigkeit entfernt und auch das Beamen ist etwas aufwändig, aber das wird schon. Die Aliens unter uns sollten dem Homo Sapiens einfach etwas mehr unter die Arme greifen ;-). 2 Online-Tagebücher einzelner Personen. 3 Das bedeutet die gemeinsame Entwicklung von Inhalten und geistigen Gütern durch verschiedene Personen, die oft einfach nur ein gemeinsames Interesse haben. 4 Die einfache Integration und Komposition verschiedener schon vorhandener Anwendungen und Datenquellen unter einer neuen Benutzeroberfläche. 5 Kurz SNA – das Nutzen von Informationen und Wissen einer Vielzahl von Personen und deren persönlicher Netzwerke.

Vorwort

Restriktionen leben muss. Die Anwender im WWW verwenden derzeit zu nahezu 100% einen klassischen Webbrowser. Und in diesem Webbrowser steht schlicht und einfach nur eine gewisse Anzahl an Technologien zur Umsetzung von Funktionalitäten bereit, die zudem noch sehr beschränkt in der Leistung sind. Als da wären natürlich HTML (Hyper Text Markup Language) respektive dessen neuerer Ableger XHTML (extensible Hyper Text Markup Language) als Seitenbeschreibungssprache für Webseiten, die die Grundstruktur einer RIA festlegen. Dazu kommen CSS (Cascading Style Sheets) zur Gestaltung des Layouts einer Webseite und JavaScript zur Programmierung von Logik im Client. Mit Einschränkungen kann man auch für moderne Browser die Unterstützung für XML (eXensible Markup Language) voraussetzen. Aber das war es! Zumindest wenn man die meisten Anwender im Web auch erreichen will. Natürlich gab und gibt es im WWW zusätzlich proprietäre Techniken, die diesen engen Fundus an clientseitigen Webtechnologien in einem Browser um isolierte Funktionalitäten erweitern – seien es Java-Applets, ActiveX-Controls, PDF-Dateien, Flash etc. Aber diese proprietäre Techniken setzen – auch wenn sich einige als Quasistandard recht hoher Verbreitung erfreuen – bei einem Anwender immer eine bestimmte Plattformstruktur bzw. das Vorhandensein gewisser ergänzender Programme voraus. Und damit schränken Sie bei einem Einsatz natürlich die potenzielle Zielgruppe teilweise erheblich ein. Auf der anderen Seite zeigen neue proprietäre Entwicklungen wie AIR von Adobe, Silverlight von Microsoft oder JavaFX von Sun Wege auf, in einem Webclient erheblich mehr Möglichkeiten bereitzustellen, teilweise sogar bei einer Webapplikation die Begrenzungen des Webbrowsers zu verlassen und Desktopapplikationen immer mehr mit Netzwerkapplikationen zu verschmelzen. Aber diese Technologien stehen noch ziemlich am Anfang und kranken hinsichtlich einer Webalternative wie alle proprietären Entwicklungen natürlich auch daran, dass beim Anwender eine entsprechende Umgebung zur Ausführung zwingend vorausgesetzt wird. RIAs, die sich auf die »klassischen« DHTML6-Bestandteile HTML, CSS und JavaScript beschränken, werden hingegen bei nahezu jedem Anwender funktionieren7. Nun leiden allerdings diese klassischen Webangebote darunter, dass man zum Austausch von Text8 die ganze bereits im Browser vorhandene Webseite austauschen muss. Es ist offensichtlich, dass damit eine riesige Menge an überflüssigen Daten zwischen dem Webserver und dem Webclient ausgetauscht werden müssen und eine Applikation extrem träge werden kann. 6 7

8

14

Dynamic HTML. Einmal von den Anwendern abgesehen, die seit 10–15 Jahren keine Neuerungen ihrer EDV vorgenommen haben, und denjenigen, die grundsätzlich jede aktive Technologie in ihrem Browser deaktivieren (müssen). Das Austauschen von Grafiken ist schon lange kein Problem. Das kann man bereits seit Jahren mit JavaScript sehr einfach vornehmen.

Vorwort

Was bereits im Browser vorhanden ist, muss ja im Grunde nicht erneut vom Webserver angefordert werden. Zwar kann man schon geraume Zeit durch einige »Taschenspielertricks« wie das lokale Cachen von Daten auf der Client-Plattform, das Nachladen über (versteckte) Frames etc. dem Problem teilweise begegnen, aber dennoch bedeutet jede Anforderung eines Webbrowsers an einen Webserver das Nachladen einer vollständigen neuen Webseite. Und hier hat erst AJAX9 (Asynchronous JavaScript and XML) die Revolution herbeigeführt. Damit ist es möglich, eben nur die Texte einer Webseite auszutauschen, die tatsächlich neu vom Webserver angefordert werden müssen – und das mit nur einer kleinen Erweiterung des DHTML-Triumvirats, die mittlerweile in allen modernen Browsern unterstützt wird. Die bereits geladene Webseite bleibt bei einer Datennachforderung per AJAX im Browser vorhanden und mittels DHTML wird gezielt an einer bestimmten Stelle in der Webseite ein Austausch bestehenden Inhalts durch die neu nachgeladene Information vorgenommen. Dabei kann die nachgeladene Information entweder aus Klartext (inklusive HTML-Fragmenten) oder auch strukturiertem XML oder JSON (JavaScript Object Notation) bestehen. Nun ist das grundsätzliche Erstellen von AJAX-Applikationen zwar nicht sonderlich schwierig, wenn man die Grundlagentechniken HTML bzw. XHTML und JavaScript beherrscht und sich zumindest etwas mit XML und CSS auskennt. Nicht wenige Entwickler von mächtigen Programmierwelten wie C/C++, .NET oder Java schauen sogar etwas verächtlich auf scheinbar sehr einfache Technologien wie HTML, JavaScript oder Stylesheets herab. In der Tat können sich weder der Umfang noch die Komplexität dieser klassischen clientseitigen Webtechnologien mit Programmiertechniken aus dem Desktop- beziehungsweise Netzwerk- oder Großrechnerumfeld messen. Aber das ist nur die eine Seite der Medaille. Das Zusammenspiel dieser – einzeln gesehen – in der Tat recht einfachen Webtechnologien im Client kann äußerst diffizil sein, was nicht zuletzt ein Resultat der Browser-Kriege des letzten Jahrtausends ist. Und zudem erzwingt die sehr eingeschränkte Leistungsfähigkeit von JavaScript oft eine nicht ganz triviale Programmierung von Strukturen, die in leistungsfähigeren (insbesondere objektorientierten) Programmiertechniken auf dem Silbertablett serviert werden. So gesehen kann sich die Erstellung einer interaktiven Benutzeroberfläche für das Web heutzutage durchaus mit der Komplexität der Erstellung einer GUI für eine Desktopapplikation messen. Deshalb bringt die Erstellung von AJAX-Applikationen ein hohes Maß an Tests und Anpassung an verschiedene Webbrowser und Plattformen mit sich. An den unterschiedlichsten Stellen warten tückische Fallstricke. Und natürlich ist die manuelle Erstellung von komplexen DHTML-Aktionen wie Drag&Drop oder animierten Menüs nicht jedermanns Sache, zumal Ihnen sicher auch die oft extrem diffizilen Abhängigkeiten von den verschiedenen Browsern und Betriebssystemplattformen bekannt sind. 9

In der Literatur hat sich teilweise auch die Schreibweise Ajax (also mit Kleinbuchstaben) etabliert.

15

Vorwort

Sogenannte Frameworks und Toolkits für AJAX bzw. JavaScript versprechen nun für viele Aufgabenstellungen und Probleme im Umfeld von AJAX und DHTML Abhilfe. Sie stellen vielfach vor allem JavaScript-Funktionsbibliotheken mit getesteten und hochfunktionellen Lösungen bereit, damit Sie nicht jedes Mal das Rad neu erfinden und vor allem dessen einwandfreie Funktionalität umfangreich testen müssen. Dazu gibt es gelegentlich auch spezielle Tools und Programme, die eine Arbeit mit diesen Bibliotheken unterstützen oder gar erst möglich machen. Wir werden uns in diesem Buch nun einigen populären und leistungsfähigen AJAXFrameworks widmen und schauen, wie Sie diese einsetzen können, um Ihre AJAXApplikationen zu verbessern bzw. die Erstellung zu vereinfachen. Für diesen Einstieg in die Welt der AJAX-RIAs wünsche ich Ihnen viel Spaß und viel Erfolg.

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

16

1

Einleitung

RIAs1 mit oder auch ohne den Einsatz von AJAX2 revolutionieren gerade die gesamte Computerlandschaft. Natürlich das WWW selbst, aber ebenso wird die Bedeutung von klassischen Desktopapplikationen neu positioniert und nicht zuletzt das Anwenderverhalten verändert. RIAs bieten auf der einen Seite – etwas schwammig3 formuliert – reichhaltigere Möglichkeiten als klassische Webapplikationen und sind auf der anderen Seite von der Bedienung teilweise fast gar nicht von klassischen Desktop- und Netzwerkapplikationen zu unterscheiden. Dazu sind sie in vielen Fällen auch von der reinen Optik her sehr anspruchsvoll und multimedial gestaltet, so dass sie sich optisch kaum noch von diesen Desktop- und Netzwerkapplikationen unterscheiden. Nun kann man diese modernen RIAs in Form von AJAX-Applikationen mit einem ausreichenden Wissen in den Grundlagentechniken HTML bzw. XHTML, JavaScript, CSS und gegebenenfalls noch XML bzw. JSON durchaus »von Hand« erstellen – das ist in vielen Fällen gar nicht der schlechteste Weg –, aber eben auch mithilfe von Frameworks und Toolkits. Und wir wollen uns in diesem Buch dem Erstellen von genau solchen RIAs mit AJAX und entsprechenden Frameworks widmen. Denn RIAs auf Basis von AJAX sind derzeit schlicht und einfach das Maß aller Dinge.4 Hinweis Was genau ein Framework ist und wie es sich von dem Begriff Toolkit unterscheidet, ist nicht standardisiert. Und sowohl eine verbindliche Definition als auch eine Abgrenzung sind gar nicht so einfach. Allgemein versteht man jedoch unter einem Framework ein Programmiergerüst, das bestimmte Funktionalitäten bereits bereitstellt. Ein Framework ist selbst jedoch noch kein fertiges Programm, sondern stellt den Rahmen (Frame) zur Verfügung, innerhalb dessen ein oder mehrere Programmierer eine Anwendung erstellen. Ein Framework beinhaltet in der Regel eine Bibliothek mit nützlichen vorgegebenen Codestrukturen, legt aber – im Gegensatz zu einer reinen Bibliothek – auch eine gewisse Verhaltensweise bei der Verwendung fest. 1 2 3 4

RIA – Rich Internet Application. AJAX – Asynchronous JavaScript and XML. Aber eigentlich sauber übersetzt. Wenngleich meines Erachtens RIAs auf Basis von JavaFX, AIR oder Silverlight eine große Zukunft haben. Solche RIAs werden in Zukunft wahrscheinlich mehr und mehr als vollständige Thin Clients konzipiert, die gänzlich auf einen Webbrowser verzichten. Derzeit sind aber solche Thin Clients für das Web noch nicht etabliert.

1 Einleitung

Bei einem Toolkit steht dagegen mehr die Sammlung an Programmen (Tools) im Fokus, die aber durchaus auch auf spezifischen Bibliotheken aufsetzen können.5 Oft stellt ein AJAX- oder Web-Toolkit (oder auch ein Framework – das ist wie gesagt schwer genau zu trennen) sogenannte Widgets bzw. Komponenten zur Verfügung. Dabei handelt es sich in der Regel um Elemente, aus denen eine grafische Benutzerschnittstelle (UI – User Interface oder GUI – Graphical User Interface) zusammengesetzt wird. Mit HTML bzw. XHTML kann man zwar problemlos einfache Elemente wie Schaltflächen, Texteingabefelder, Labels, Überschriften, Formulare oder Tabellen generieren. Aber es gibt insbesondere im Bereich von Desktopapplikationen komplexere UI-Elemente, die ohne den Einsatz von CSS und/oder JavaScript bzw. zusätzlichen Bibliotheken nicht von einem Browser unterstützt werden, beispielsweise Eingabefelder zur qualifizierten Datums- und Zeiteingabe, Eingabedialoge für Farben, Editoren für Rich Text, Baumstrukturen, Menüs, sortierbare Tabellen. Mit Widgets werden solche komplexeren UI-Elemente RIAs auf einfache Weise verfügbar gemacht.

1.1

Was behandelt dieses Buch?

Das vorliegende Buch soll Ihnen den Einstieg in die Webprogrammierung mit verschiedenen populären und ausgereiften AJAX-Frameworks bzw. -Toolkits ermöglichen, die im Wesentlichen im Kern als clientseitige JavaScript-Bibliotheken aufgebaut sind. 5 Sie haben dabei auf der einen Seite ein Einsteigerbuch vorliegen, das zwar nicht ganz bei null beginnen wird, aber auch nicht Freaks und Programmierprofis als Leser im Visier hat. Insbesondere wird keine große Erfahrung mit AJAX oder einem Framework oder Toolkit vorausgesetzt. Auf der anderen Seite sollte ein Leser jedoch schon Erfahrung in Webtechnologien haben, was ich gleich bei der Definition der Zielgruppe noch etwas genauer ausführen möchte. Das Buch selbst ist in vier Teile unterteilt und die einzelnen Kapitel sind im Wesentlichen gleich aufgebaut. Einer kurzen Einleitung folgen die detaillierten Kapitelthemen und das Kapitel wird mit einer Zusammenfassung abgeschlossen. Der erste Teil des Buchs, zu dem dieses Kapitel auch zählt, behandelt Grundlagen und Voraussetzungen. In dem Kapitel nach dieser Einleitung erfahren Sie zuerst, wozu AJAX eigentlich da ist und wie AJAX im gesamten Webumfeld positioniert wird. Welche Gründe gibt es für AJAX und dessen Erfolg? Warum und wie löst AJAX Probleme der konventionellen Webprogrammierung? Insbesondere in Hinsicht auf RIAs. Und mit welchen Techniken werden AJAX-Applikationen erstellt? Es geht also um die Grundlagen, die Sie auf jeden Fall kennen müssen. 5

18

Beispielsweise beim GWT (Google Web Toolkit).

1.1 Was behandelt dieses Buch?

In den folgenden Kapiteln wird dann der Umgang mit verschiedenen AJAX-Frameworks behandelt. Dabei sollten Sie beachten, dass die behandelten Frameworks und Toolkits oft ähnliche Probleme lösen und Features bereitstellen. Das wiederum macht den Aufbau der jeweiligen Abschnitte bzw. Kapitel etwas diffizil. Auf der einen Seite kann man nicht bei jedem Framework und Toolkit solche Informationen ausführlich wiederholen, die bereits in einem vorherigen Kapitel ausgeführt wurden. Auf der anderen Seite werden manche Leser vermutlich nicht alle Frameworks und Toolkits gleich wichtig empfinden und möglicherweise ein Kapitel zu einem spezifischen Framework oder Toolkit auslassen. Ich werde versuchen, dennoch ohne große Redundanzen auszukommen und gegebenenfalls einen Verweis an eine andere Stelle im Buch setzen.

1.1.1

Das YUI

In Teil 2 des Buchs widmen wir uns dem YUI (http://developer.yahoo.com/yui/). Das Yahoo User Interface bezeichnet eine populäre und sehr performante JavaScript- und CSS-Bibliothek für webbasierte Benutzerschnittstellen mit vielen mächtigen Features, einer hervorragenden Dokumentation und vielen Beispielen, die leicht für eigene Zwecke angepasst und eingesetzt werden können.

1.1.2

Das Dojo Toolkit

Danach besprechen wir das Dojo Toolkit (http://dojotoolkit.org/), das von der Dojo Foundation vorangetrieben wird. Die Ausführungen zu Dojo werden den umfangreichsten Part im Buch einnehmen. Mit anderen Worten – Dojo wird am ausführlichsten von den vorgestellten Toolkits und Frameworks behandelt. Auch hierbei handelt es sich wie beim YUI um ein modular aufgebautes clientseitiges AJAX-Toolkit bzw. -Framework auf Basis von JavaScript. Dessen Highlights sind eine große Anzahl an vorgefertigten Widgets und eindrucksvolle DHTML-Effekte.

1.1.3

Prototype + Scriptaculous

Mit Prototype (http://www.prototypejs.org/) schauen wir uns dann in Teil 4 ein Framework an, dessen Bibliotheken mehr oder weniger die gleiche Funktionalität wie Dojo Core bieten. Der wesentliche Unterschied besteht darin, dass Dojo eine konservativere Philosophie bezüglich globaler Namensräume verfolgt, während hier die kurze Benennung von häufig verwendeten Funktionen im Vordergrund steht. Das Framework, das nicht von einer Foundation oder Firma organisiert wird, verfügt ebenfalls über eine sehr gute Dokumentation und eine rege Community und lässt sich sehr gut mit Ruby On Rails und einigen anderen Frameworks kombinieren. Das Framework ist Basis vieler Ergänzungen, die zum Beispiel Widgets direkt auf Prototype aufsetzen, etwa Scriptaculous oder auch script.aculo.us (http://script.aculo.us/). Scriptaculous selbst stellt einige Controls wie Autovervollständigung, Sliders etc. zur Verfügung, ist aber kein vollständiges Widget-Toolkit. Insbesondere können Widgets nicht

19

1 Einleitung

auf einfache Weise erstellt werden. Für das Kernsystem von Prototype+Scriptaculous gibt es viele ergänzende Bibliotheken, die aber nicht mit den Kernbibliotheken ausgeliefert werden. Es gibt hier auch kein Paket- oder Build-System. Während wir beim YUI und Dojo stark die Widgets und die Erstellung von Oberflächen fokussieren, werden wir uns bei Prototype im Wesentlichen auf den Kern beschränken, obwohl Scriptaculous als Ergänzung auf mehreren Seiten behandelt wird.

1.1.4

Weitere Frameworks

Es gibt natürlich noch zahlreiche weitere AJAX-Frameworks und -Toolkits, die eine verwandte Philosophie wie die hier behandelten Frameworks bzw. Toolkits verfolgen und ähnliche Möglichkeiten bereitstellen.  Beispielsweise JQuery (http://jquery.com/). Dieses recht minimalistische System fo-

kussiert sich primär auf die Operation auf vorhandenen DOM-Strukturen. JQuery stellt dazu eine Abfragesprache zur Verfügung, die eine Mischung aus XPath und CSS darstellt. Auf den resultierenden Objekten kann man mit diversen Optionen und Operationen agieren. Der Kern von JQuery ist sehr kompakt, aber es gibt diverse ergänzende Bibliotheken von Drittanbietern.  Auch EXT (http://extjs.com/) ist sehr interessant. Dies bezeichnet eine Komponen-

tenbibliothek wie Dijit in Dojo mit einer Vielzahl an sehr guten Widgets. EXT kann optional sogar auf anderen Frameworks und Toolkits wie YUI oder JQuery aufsetzen.  Es lohnt sich auch durchaus, einen Blick auf MochiKit (http://mochikit.com/) zu wer-

fen. MochiKit ist ein hochwertiges JavaScript-Toolkit, das sehr guten und performanten Code generiert. Aber im Gegensatz zu beispielsweise Dojo gibt es weder Widget-System noch Komponentensatz. Allerdings werden diverse Codestrukturen von MochiKit und Dojo unter der CLA-Lizenz geteilt.  Bei dem freien, modularen und objektorientierten JavaScript- bzw. AJAX-Frame-

work MooTools (http://mootools.net/) besteht – wie bei den meisten JavaScriptBibliotheken – ein Schwerpunkt auf der Erstellung von erweiterbarem und browserübergreifendem Code. Das äußerst schlanke MooTools enthält eine breite Unterstützung von Selektoren, einen kompletten iFrame-Support, Generics für die Anbindung von Prototype-Funktionen an Objekte und einen konsistenten ClassKonstruktor.  Auch von großen Firmen und Projekten im Webumfeld werden AJAX-Applika-

tionen mehr und mehr unterstützt. Unter Schirmherrschaft der Eclipse-Foundation sollen dazu drei Projekte die Entwicklung von AJAX-Applikationen vereinfachen. Dabei soll im Wesentlichen die JavaScript-Unterstützung verbessert werden. Mit der Rich Ajax Platform soll Programmierern ein einheitliches Modell zur Erstellung von AJAX-Komponenten bereitstehen. Das Projekt baut auf der bestehenden Rich Client Platform von Eclipse auf. Das zweite Projekt hat für Eclipse eine neue Version des Ajax Toolkit Framework entwickelt und auch neben Linux und Windows für Mac

20

1.2 Schreibkonventionen

OS verfügbar gemacht. Zudem hat Eclipse den Code des Dynamic Languages Toolkit Project veröffentlicht, um die Programmierung mit Python, Ruby und Tcl in Eclipse zu vereinfachen. IBM stellt neue AJAX-Tools als Open Source zur Verfügung. IBM will damit das Ajax Technology Framework (ATF) der Eclipse Foundation in Sachen AJAX unterstützen. Selbst diese Auswahl weiterer Frameworks und Toolkits ist nur ein Schlaglicht. So gesehen könnten wir noch zahlreiche weitere Frameworks und Toolkits sowohl kurz vorstellen als auch natürlich intensiver betrachten. Aber wir müssen uns in dem Buch natürlich beschränken, um die behandelten Frameworks und Toolkits in ausreichender Tiefe ansprechen zu können. Beachten Sie, dass Sie in diesem Buch trotzdem im Wesentlichen einen (vertieften) Überblick über die grundsätzliche Funktionsweise der jeweils vorgestellten Frameworks und Toolkits erhalten. Es ist jedoch weder machbar noch sinnvoll, sämtliche Möglichkeiten eines einzelnen Toolkits vollkommen zu beschreiben (insbesondere jede einzelne Komponente, wenn ein Framework oder Toolkit solche bereitstellt). Zum einen ist das nicht notwendig, denn die Frameworks und Toolkits sind sehr konsistent aufgebaut. Das bedeutet, wenn Sie einige zentrale Aktionen mit einem Framework oder Toolkit ausgeführt und verstanden haben, können Sie sich in andere Möglichkeiten mit diesen Frameworks beziehungsweise Toolkits aufgrund der begleitenden Dokumentationen und Beispiele leicht selbst einarbeiten. Zum anderen ist die Entwicklung der AJAX-Frameworks und Toolkits derart dynamisch, dass fast wöchentlich neue Funktionalitäten, Komponenten, Widgets etc. hinzukommen. Daher kann ein Buch naturgemäß niemals auf dem aktuellen neuesten Stand sein, sondern nur die generelle Arbeit mit einem Framework oder Toolkit anhand ausgewählter Beispiele zeigen beziehungsweise die grundlegende Anwendung von einem Framework oder Toolkit demonstrieren. Hinweis Im Buch arbeiten wir zur Verdeutlichung natürlich immer wieder mit Codebeispielen. Ich empfehle zwar ausdrücklich, dass Sie die Codebeispiele vollständig selbst abtippen (und natürlich auch bei Bedarf modifizieren und damit experimentieren). Aber natürlich finden Sie die Listings auch auf der Buch CD.

1.2

Schreibkonventionen

In diesem Buch werden verschiedene Schreibkonventionen eingehalten, die Ihnen helfen sollen, die Übersicht zu bewahren. Wichtige Begriffe werden hervorgehoben. Vor allem sollten Sie erkennen können, ob es sich um normalen Text oder Programmcode handelt. Ebenso werden Tasten ((Alt), (Strg) oder (Shift)), BEFEHLE und noch einige weitere Besonderheiten gekennzeichnet. Diese Formatierungen werden konse-

21

1 Einleitung

quent verwendet. Und ebenso werden Sie in dem Buch Bereiche vorfinden, die über die Markierung mit verschiedenen Symbolen besondere Aufmerksamkeit erzeugen sollen. Hinweis Das ist ein besonderer Hinweis, den Sie an der Stelle beachten sollten.

Tipp Das ist ein Tipp, der Ratschläge oder besondere Tricks zu einer jeweiligen Situation zeigt.

Achtung Hier droht Gefahr.

Eine besondere Bemerkung soll noch zu Quelltextpassagen von vollständigen Listings erfolgen. Bei allen vollständigen Listings sowie einigen größeren Quellcodefragmenten werden Sie eine Nummerierung der Quelltextzeile finden. Diese gehört natürlich nicht zum eigentlichen Quelltext und soll nur die Orientierung für Sie erleichtern, eine neue Zeile im Quelltext verdeutlichen und in meinen Erklärungen zu Quelltexten einen verständlichen Bezug herstellen.

22

1.3 Wer ich bin

6

Achtung In seltenen Fällen kann es aus drucktechnischen Gründen notwendig sein, eine Quelltextzeile auf mehrere Buchzeilen zu verteilen.6 In diesem Fall zeigen Ihnen die Nummerierungen der Quellcodezeilen an, welche Passagen im Editor noch in eine Zeile zu notieren sind. Solange Sie dort keine neuen Zeilennummern finden, müssen Sie im Editor alles noch in eine Zeile schreiben.

1.3

Wer ich bin

Ich möchte mich zu Beginn des Buchs in diesem einleitenden Kapitel kurz vorstellen. Mein Name ist Ralph Steyer.7 Ich habe an der Universität in Frankfurt/Main Mathematik studiert (Diplom) und danach einige Jahre bei einer großen Versicherung im Rhein-Main-Gebiet als Programmierer und konzeptioneller Projektmitarbeiter gearbeitet. Dort habe ich als Schwerpunkt DOS-Programmierung mit Turbo Pascal betrieben, aber auch mit C und C++ in verschiedenen Projekten programmiert. Etwa ein Jahr war ich neben der Programmierung mit der fachlichen Datenbankkonzeption für eine Großrechnerdatenbank unter MVS beschäftigt. Seit 1995 verdiene ich meinen Lebensunterhalt als Freelancer, wobei ich permanent zwischen der Arbeit als Fachautor, Fachjournalist, EDV-Dozent und Programmierer beziehungsweise Projektleiter wechsle. Das macht aus meiner Sicht einen guten Mix aus, bewahrt vor Langeweile und hält mich sowohl in der Praxis als auch am Puls der Entwicklung. Insbesondere habe ich sowohl das Vergnügen als auch die Last, mich permanent über neue Entwicklungen in der EDV auf dem Laufenden zu halten, denn die Halbwertszeit von Computerwissen ist ziemlich kurz. Dementsprechend ist mein Job zwar anstrengend, aber vor allem immer wieder spannend. Mit den verschiedenen Techniken im AJAX-Umfeld befasse ich mich schon recht lange. Bereits 1996 ist mein erstes Buch zu HTML erschienen, dem mittlerweile zahlreiche Bücher und einige Video-Trainings zu JavaScript, CSS, XML sowie Java und JavaFX, PHP und noch einigen anderen Programmier- und Webtechnologien gefolgt sind. Mit dem Begriff AJAX als solches habe ich mich erstmals 2005 im Rahmen eines ersten Buchs zu diesem Thema intensiv beschäftigt und dabei schnell erkannt, dass es eigentlich nur eine Bezeichnung für die Zusammenfassung verschiedener Technologien ist, mit denen ich mich bereits seit zehn Jahren auseinandersetze.8 In der Zwischenzeit habe ich noch einige weitere Bücher sowie ein Video-Training zu AJAX pro6 7 8

In manchen Listings lassen sich längere Passagen nicht auf mehrere Zeilen im Editor aufteilen – etwa bei Internetadressen. Was Sie auch auf dem Buchcover sehen könnten ;-). Ich fand das damals echt nett, dass sich da jemand mein Tätigkeitsprofil angesehen und dem einen knalligen Namen gegeben hatte. Später hat man mir dann gesagt, dass ich dabei überhaupt keine Rolle gespielt habe – das war wiederum frustrierend ;-).

23

1 Einleitung

duziert, zahlreiche AJAX-Schulungen gehalten, auf verschiedenen Kongressen zu AJAX referiert und auch schon zu zwei AJAX-Frameworks9 (GWT10 und Atlas11) sowie einigen Google Web-APIs Bücher geschrieben. Tipp Unter http://rjs.de finden Sie meine Homepage und unter http://rjsedv. blogspot.com meinen Blog. Daneben betreue ich ein Portal zu AJAX unter http://www.ajax-net.de und unter http://www.javafx.cc eine Seite zu JavaFX.

Ja – und dann gibt es mich natürlich auch noch jenseits der Computerwelt. Ich lebe im Rhein-Main-Gebiet, habe Zwillinge im Grundschulalter und mein eines großes Hobby kann man ganz pauschal mit Sport bezeichnen – von Leichtathletik über Rasenkraftsport, Mountainbiken, Motorradfahren bis zum Gleitschirmfliegen. Und dann mache ich noch Musik in einer Rockband (Saxophon).

1.4

Wer sind Sie? – der Versuch einer Zielgruppendefinition

Sie haben in unserer Partnerschaft den Vorteil, dass Sie nun etwas von mir wissen. Ich kenne Sie natürlich nicht. Und die privaten sowie beruflichen Details differieren mit absoluter Sicherheit. Aber ich habe eine gewisse Vorstellung, wer sich warum mit AJAX respektive AJAX-Frameworks beschäftigen wird und dieses Buch lesen könnte. Ich denke, Sie haben bereits Webseiten erstellt und auch schon in irgendeiner Form programmiert. Sollten Sie damit noch keine Erfahrung haben, wird das Buch wohl zu mühselig für Sie. Ich vermute weiter, Sie sind irgendwann den Einschränkungen einer statischen HTML-Seite überdrüssig geworden und Sie haben auch bereits erste Erfahrungen mit dynamischen Webseiten. Und Sie haben wahrscheinlich schon Anwendungen gesehen oder davon gehört, die ein Antwortverhalten quasi wie Desktopanwendungen aufweisen. Schlagworte wie das Web 2.0 oder Interaktives Web sind Ihnen bekannt oder machen Sie neugierig. Und ich vermute, Sie wollen den Zug erwischen, der in die RIA-Zukunft des WWW fährt.

9

Beide sind aber explizit nicht als clientseitige JavaScript-Bibliotheken konzipiert, wie es die Frameworks und Toolkits sind, die dieses Buch behandelt. 10 Das Google Web Toolkit ist ein Framework von Sun, bei dem zur Erstellungszeit einer RIA unmittelbar auf Serverseite im Java-Umfeld gearbeitet wird. Erst zum Veröffentlichen der Applikation wird der Java-Code in ein Gemisch aus HTML, JavaScript und CSS übersetzt, das dann der endgültigen RIA entspricht. 11 Atlas ist der frühere Name des AJAX-Frameworks von Microsoft im .NET-Umfeld. Mittlerweile nennt Microsoft das Framework ASP.NET AJAX.

24

1.4 Wer sind Sie? – der Versuch einer Zielgruppendefinition

Können Sie bereits AJAX programmieren? Ich meine von Hand? Da bin ich mir nicht sicher. Die Antwort auf diese Frage geht einher mit einer anderen Frage.

1.4.1

Für wen lohnen sich eigentlich AJAX-Frameworks?

Wie gesagt, AJAX-Applikationen kann man durchaus von Hand erzeugen, gänzlich ohne den Einsatz von Frameworks. Der Aufwand eines AJAX-Frameworks lohnt sich beileibe nicht für jeden. Beim Einsatz eines Frameworks begeben Sie sich natürlich teilweise auch in erhebliche Abhängigkeit von einem Hersteller respektive einem Projekt. Und um ein AJAX-Framework nutzen zu können, müssen Sie auf jeden Fall die Idee und Arbeitsweise von AJAX verstanden haben und alle Grundtechnologien zumindest im Ansatz begreifen. Das gilt insbesondere für die Frameworks, die in diesem Buch besprochen werden und als reine JavaScript-Funktionsbibliotheken konzipiert sind. Dazu kommt noch, dass auch in umfangreichen Frameworks ziemlich sicher genau das Problem nicht gelöst wird, das Sie eigentlich interessiert – frei nach Murphy ;-). In jedem Fall erfordert der Einsatz von AJAX-Frameworks die Einarbeitung in die jeweiligen Funktionsbibliotheken und Arbeitsweisen eines Frameworks. Diese Mühe lohnt sich bei kleineren Webpräsenzen mit wenigen asynchronen Datenanforderungen kaum. Auf der anderen Seite werden Sie nach der Mühsal der Einarbeitung und der Aufgabe der vollständigen Kontrolle über Ihren Quellcode Ihre AJAX-Applikationen mit einem Framework viel effektiver, effizienter, reichhaltiger und robuster entwickeln können. Das wirkt sich besonders bei großen Webangeboten mit umfangreichen asynchronen Datenanforderungen aus. Als Faustformel kann gelten: Je größer die Webpräsenz und – in Bezug auf AJAX – je mehr asynchrone Datenaustausche Sie benötigen, desto sinnvoller ist der Einsatz eines Frameworks – insbesondere, wenn Sie mit Problemen konfrontiert werden, deren manuelle Umgehung aufwändig ist. Nun aber zurück zur eingangs schon gestellten Frage – beherrschen Sie bereits AJAX und die damit verbundenen Grundlagentechnologien? Ich denke, das kann man mit einem klaren Jein beantworten. Mit anderen Worten – ein Teil der Leserschaft wird bereits fit darin sein, der andere Teil noch nicht. Dieser sollte sich allerdings parallel zum Einarbeiten in AJAX-Frameworks über dieses Buch die notwendigen Grundlagentechniken darauf schaffen.

1.4.2

Wie sieht also die Zielgruppe des Buchs aus?

Basierend auf den bisherigen Ausführungen lässt sich die Zielgruppe recht klar eingrenzen. Das Buch wendet sich im Wesentlichen an Webseitenersteller, Webdesigner und Webprogrammierer, die bereits zumindest etwas Erfahrung mit (X)HTML, CSS und JavaScript und vielleicht auch XML haben. Insbesondere das YUI und Dojo las-

25

1 Einleitung

sen sich auch schon ohne tiefergehende Kenntnisse in den genannten Techniken effektiv nutzen, während Prototype eher die sattelfeste Beherrschung der Techniken voraussetzt. Was in dem Buch nicht als Grundlagen von Ihnen als Leser erwartet wird, ist, dass Sie in der Programmierung spezieller AJAX-Techniken geübt sind. Ebenso werden keine Kenntnisse in serverseitiger Programmierung vorausgesetzt. Hinweis Um dieser etwas heterogenen Zielgruppe Rechnung zu tragen, beschäftigt sich das folgende Grundlagenkapitel kompakt mit allen relevanten Dingen, die Sie rund um AJAX kennen müssen, um AJAX Frameworks sinnvoll anwenden zu können. Dazu finden Sie im Anhang diversere Ergänzungen zu den einzelnen Grundlagentechniken.

1.5

Was benötigen Sie?

Beschäftigen wir uns nun ein wenig mit dem, was Sie für den nachfolgenden Umgang mit dem Buch und die Arbeit mit AJAX-Frameworks als Voraussetzungen haben sollten. Insbesondere auf die nachfolgend beschriebene Software werden wir gelegentlich zurückkommen.

1.5.1

Hardware und Betriebssystem

Wenn Sie sich für die Programmierung auf einen reinen Texteditor beschränken wollen, werden an Ihren Computer keine besonderen Anforderungen gestellt. Ich möchte Ihnen im Rahmen des Buchs allerdings einige Tools empfehlen, deren Anforderungen an die Hardware nicht ganz genügsam sind. Es wäre also nicht schlecht, wenn Ihre Hardware halbwegs auf einem vernünftigen Stand ist.12 Und selbstverständlich benötigen Sie einen Internetzugang. Empfehlenswerte Betriebssysteme sind alle grafischen Systeme wie Linux, Windows oder MacOS. Das spielt – wie meist im Web – in der Regel keine Rolle. Es sollte sich jedoch um ein halbwegs aktuelles Betriebssystem handeln. Ich persönlich arbeite am liebsten mit Linux, aber ich kann auch mit Windows leben und hoffe, dass ich bald meinen Plan umsetze, mir endlich einmal einen Mac zuzulegen.

12 Also ein Mehrkernprozessor und 2 oder mehr Gigabyte RAM.

26

1.5 Was benötigen Sie?

1.5.2

Die Frameworks bzw. Toolkits

Sie benötigen natürlich für das Nachvollziehen der Ausführungen die jeweiligen AJAX-Frameworks bzw. -Toolkits. Wir werden bei den Kapiteln zu den konkreten Frameworks genauer besprechen, wie Sie diese erhalten beziehungsweise verwenden können. Tipp Die zum Zeitpunkt der Bucherstellung aktuellen Versionen der behandelten Frameworks und Toolkits finden Sie auch auf der BuchCD. Dennoch wird es sinnvoll sein, im Internet zu überprüfen, ob es mittlerweile neuere Versionen gibt.

1.5.3

Die Browser-Armada

Was Sie zwingend brauchen werden, ist natürlich ein Webbrowser, der AJAX unterstützt.13 Dies sind derzeit unter anderem alle Browser, die zum Microsoft Internet Explorer ab der Version 4.014 (eingeschränkt) oder besser höher kompatibel sind, Opera 7.6 und höher, für Linux-Anwender neuere Versionen des Konqueror, auf einer aktuellen Gecko-Engine basierende Browser wie Firefox, Mozilla oder Netscape ab der Version 7.1 und für Apple-Anwender Safari 1.2 und höher. Sie sollten nun als Webseitenersteller (natürlich auch für RIAs) auf jeden Fall mehrere Browser zur Verfügung haben. Denn leider gilt auch unter AJAX sowie den entsprechenden Frameworks, dass man Webapplikationen unbedingt in allen relevanten Browsern testen muss. Sie können ja schon bei einer etwas anspruchsvolleren normalen Webapplikation niemals sicher sein, wie diese in verschiedenen Browsern aussieht. Es gibt auch heutzutage zahlreiche Sonderfälle, die Sie testen müssen. Und in der Regel wissen Sie nicht, mit welchen Browsern Ihre Besucher auf Ihren Webseiten vorbeikommen. Für einen effektiven Test sind sowohl Browser von verschiedenen Herstellern notwendig als auch verschiedene Versionen eines Browsers. Gerade mehrere Versionen eines Browsers können sich im Verhalten auch massiv unterscheiden. Daher gehören ältere sowie die derzeit topaktuellen Browser für Webdesigner und Webprogrammierer zur Pflichtausstattung.

13 Sie müssen Ihre Beispiele ja ausprobieren können. 14 In der Tat war der Internet Explorer der erste Browser, der mehr oder weniger AJAX unterstützt hat. Das liegt daran, dass die entscheidenden Parts von AJAX im Grunde von Microsoft erfunden wurden. Darauf kommen wir im folgenden Grundlagenkapitel zurück.

27

1 Einleitung

Achtung Beachten Sie, dass die vorausgesetzten Browser Versionen für die meisten mächtigen Frameworks und Toolkits sehr hoch sind. Genau aus dem Grund sollten Sie aber auch ältere Versionen zur Verfügung haben, um zu testen, wie Ihre Seite bei Besuchern mit solchen Browsern aussehen wird.

15

Hinweis Der kommende Internet Explorer 8.0 ist wieder so ein Fall, bei dem eine Inkompatibilität mit den Vorgängerversionen nach ersten Tests von Betaversionen vorprogrammiert (bzw. sogar gewünscht) ist. In der Vergangenheit hat Microsoft unbestritten keinen großen Wert auf die Einhaltung von Webstandards gelegt. Aber der Internet Explorer 8 soll nun die offiziellen Webstandards besser als seine Vorgänger unterstützen. Dies betrifft u.a. RSS-Funktionen, die CSS-Implementierung, DOM und die AJAX-Unterstützung. Nun besteht aber ein Problem. Was soll der Internet Explorer mit Seiten machen, die für die nicht standardkonformen Vorgängerversionen optimiert wurden? Diese würden im neuen standardkonformen Internet Explorer 8 nicht mehr korrekt angezeigt. Die Lösung ist zwar nicht elegant, aber wohl unumgänglich. Der Internet Explorer 8 wird gleich drei Darstellungsmodi beherrschen. Es gibt einmal den neuen Modus, in dem sich der neue Browser tatsächlich an Webstandards halten soll.15 Und dann gibt es einen Modus, in dem der Browser weiter wie die Vorgängerversionen mit Webseiten umgeht. Zu diesem zum Internet Explorer 7 kompatiblen Modus muss man den Internet Explorer 8 aber wahrscheinlich erst durch Einfügen eines neuen Meta-Tags in den Kopfbereich der Website zwingen, wobei der IE 8 in der Betaversion einen eingebauten Schalter zur Emulation des IE7-Verhaltens besitzt. Neben diesen beiden Modi gibt es weiterhin den »Quirks Mode« für explizit nicht standardkonforme Webseiten.

15 Erste Experimente mit der Betaversion und standardkonformen Webseiten zeigen jedoch massive Abweichungen zur Interpretation in wirklich standardkonformen Browsern wie Opera oder Firefox sowie Vorgängerversionen. Der Umstieg auf echte Standardkonformität scheint schwer zu sein ;-).

28

1.5 Was benötigen Sie?

Abbildung 1.1: Der IE 8 Nun gibt es unter Anwendern den verbreiteten Irrglauben, dass man nur einen Browser auf einem Computer bzw. unter einem Betriebssystem installieren kann. Das ist natürlich nicht so. Sie können parallel beliebig viele Browser auf einem einzigen Computer installieren und auch parallel ausführen. Dabei können Sie meist sogar verschiedene Versionen des gleichen Browsers auf einem Rechner verwenden. Nur beim Internet Explorer geht das dummerweise nicht bzw. nicht so einfach. Hier kollidieren mehrere Versionen des Internet Explorer auf einem Rechner, da dieser sich tief im Betriebssystem verankert. Hinweis Angeblich bedeutet die parallele Installation von mehreren Versionen des Internet Explorer ein Sicherheitsrisiko. Dies habe ich so zumindest als Verlautbarung des Pressesprechers von Microsoft in einem Forum gelesen. Ehrlich gesagt halte ich es persönlich für eine Bankrotterklärung, wenn aus so einer elementaren Anforderung ein Sicherheitsrisiko resultiert. Um mehrere Versionen des Internet Explorer verwenden zu können, benötigen Sie also in der Regel mehrere Windows-Installationen – entweder auf verschiedenen Computern oder als parallele Betriebssysteminstallationen.

29

1 Einleitung

16

Tipp Oder aber Sie greifen auf spezielle Tools zu, die eine solche Parallelinstallation mit etwas Aufwand gestatten. Ein solches Programm finden Sie unter http://tredosoft.com/Multiple_IE. Es nennt sich Multiple IE Installer. Aber sogar von Microsoft selbst gibt es ein entsprechendes kostenloses Tool mit Namen Internet Explorer 6 Application Compatibility VPC Image16, das die Parallelinstallation des IE in verschiedenen Versionen gestattet. Dabei läuft zum Beispiel der Internet Explorer 7 direkt auf dem System, während das Image den IE 6 auf dem Rechner emuliert.

1.5.4

Betriebssysteme

Idealerweise haben Sie zum Testen Ihrer Applikationen mehrere Betriebssysteme zur Verfügung. Natürlich ist Windows das Referenzsystem schlechthin. Die meisten Anwender im Web verwenden dieses System – ohne Wenn und Aber. Jedoch sollten Sie als Testsystem auf jeden Fall auch Linux verwenden. Erstens hat es eine durchaus relevante Verbreitung und zweitens ist es interessant zu sehen, wie sich verschiedene Webapplikationen unter verschiedenen Betriebssystemen verhalten. 1718

Tipp Nun brauchen Sie keine Angst zu haben, dass Sie als WindowsAnwender parallel zu Ihrem Betriebssystem ein weiteres Betriebssystem installieren oder sich gar einen neuen Rechner kaufen müssen, wenn Sie Linux als Testsystem verwenden wollen. Es gibt ausgezeichnete sogenannte Live-CDs bzw. Live-DVDs17, von denen Sie Linux direkt starten können, ohne dass auf Ihrer Festplatte irgendeine Änderung durchgeführt wird. Eine ganz hervorragende Live-Distribution ist Knoppix, das auf Debian basiert und Sie sich ohne Schwierigkeiten18 aus dem Internet laden (http://www.knoppix.org/) und auf CD oder DVD brennen können. Alternativ können Sie es immer wieder über diverse Computerzeitschriften beziehen, bei denen diese Distribution regelmäßig beigelegt wird. Die Knoppix-CD enthält u.a. den Konqueror als Webbrowser sowie einige weitere Browser, deren Gegenstück Sie unter Windows oder MacOS wahrscheinlich kennen, die sich aber in Feinheiten durchaus von diesen Versionen unterscheiden können. 16 Oder auch nur Internet Explorer Application Compatibility VPC Image oder abgekürzt VPC – http://www.microsoft.com/downloads/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413 c8ef&DisplayLang=en. 17 Oder auch Live-Distributionen genannt. 18 Und natürlich kostenlos.

30

1.5 Was benötigen Sie?

Abbildung 1.2: Die Homepage des Knoppix-Projekts Sehr wichtig ist natürlich auch MacOS. Aber hier besteht leider das Problem, dass man zu einer Verwendung explizit den passenden Rechner benötigt. 19

Tipp Für Leser mit ausreichend leistungsfähiger Hardware könnte es äußerst interessant sein, sich eine sogenannte Virtualisierungslösung (VM – Virtual Machine) wie VMWare (http://www.vmware.com/de), Virtual PC von Microsoft (http://www.microsoft.com/germany/windows/virtualpc/) oder auch VirtualBox19 (http://www.virtualbox.org/) anzusehen. Diese sind – zumindest für den privaten Gebrauch – kostenlos und simulieren innerhalb eines Betriebssystems ein anderes Betriebssystem. Sie können damit beispielsweise innerhalb von Windows ein Linux-System starten und umgekehrt oder Sie können dann zum Beispiel unter einer Windows-Installation in einem weiteren, parallel laufenden Windows auch eine andere Version des Internet Explorer installieren (das oben angesprochene VPC Image basiert auf einer VM auf Basis von Virtual PC). Und nicht zuletzt ist es in Bezug auf AJAX sehr interessant, dass das sogenannte Gastsystem (das System, welches in der VM läuft) als Server oder Client fungieren kann und Sie damit zwei vollkommen getrennte Systeme zur Verfügung haben, um eine Client-Server-Beziehung wie in der Realität auszuprobieren. 19 VirtualBox wurde unlängst von Sun aufgekauft.

31

1 Einleitung

Abbildung 1.3: Knoppix in einer VM (VirtualBox) unter Windows

Abbildung 1.4: Selbst Vista und XP können parallel unter Linux gestartet werden, wenn die Hardware das hergibt.

32

1.5 Was benötigen Sie?

1.5.5

Der Webserver

Letztlich basiert der gesamte »Trick« von AJAX ja darauf, dass von einem Browser aus Daten von einem Webserver angefordert werden. Deshalb ist es für die praktische Ausführung und damit auch das Testen von solchen Applikationen unabdingbar, dass Sie Zugang zu einem Webserver im Internet haben und dort Programme oder Skripte ausführen können. Das wird letztendlich auch für ein AJAX-Projekt in der Praxis notwendig sein. Allerdings ist es in der Praxis ebenso unüblich, schon bei der Entwicklung einer Webapplikation direkt auf einem Webserver im Internet zu arbeiten. Vor allem, wenn Sie nur Dinge testen wollen. Sie sollten sich also eine Testumgebung mit einem Webserver auf einem lokalen Rechner oder in einem lokalen Netzwerk schaffen. Gerade Linux-Distributionen beinhalten fast immer bereits ein oder mehrere Webserver. Damit sind Sie natürlich auf der sicheren Seite. Aber auch wenn Sie keinen Webserver automatisch zur Verfügung haben oder sich die Sache nur möglichst einfach machen wollen, bietet sich ein Rundum-Sorglos-Paket wie XAMPP an, das Sie einfach für verschiedene Betriebssysteme aus dem Internet laden können (unter http://www.apachefriends.org/de/).

Abbildung 1.5: Die Homepage von Apache Friends – dem Projekt hinter XAMPP Dieses Paket bezeichnet eine Sammlung von Programmen mit dem Webserver Apache im Zentrum, der durch das Datenbankmanagementsystem MySQL (inklusive phpMyAdmin zur Administration des Datenbankmanagementsystems) und PHP-Unterstützung sowie einige weitere Webtechnologien ergänzt wird. Sie brauchen dieses Paket mit einem einfachen Assistenten nur zu installieren und schon haben Sie einen voll funktionstüchtigen Webserver in einer Grundkonfiguration zur Verfügung.

33

1 Einleitung

Achtung Beachten Sie aber, dass diese Pakete in der Grundeinstellung ausschließlich für lokale Testzwecke konfiguriert sind. Um die Sache möglichst einfach zu halten, sind sämtliche Sicherheitseinstellungen extrem niedrig eingestellt.

Sobald die Installation von XAMPP fertig ist, können Sie entweder Apache manuell starten oder aber auch so einrichten, dass Apache als Dienst bzw. Prozess in Ihrem Betriebssystem integriert und sogar automatisch beim Start des Rechners aufgerufen werden kann. XAMPP stellt zur Verwaltung ein komfortables und sehr einfach anzuwendendes Kontrollprogramm zur Verfügung.

Abbildung 1.6: Das XAMPP Control Panel Achtung Beachten Sie, dass bei Pfadangaben unter Apache in der Regel Großund Kleinschreibung relevant ist. Dies betrifft auf jeden Fall alle Apache, die unter Linux bzw. Unix laufen. Und dies wird in der Praxis bei den meisten Providern der Fall sein. Am besten benennen Sie alle Verzeichnisse und Dateien konsequent klein.

34

1.5 Was benötigen Sie?

1.5.6

Die Entwicklungstools

Sie werden als Rückgrat einer RIA auf Basis von AJAX wie bei jeder Webseite immer ein HTML- bzw. XHTML-Gerüst verwenden. Zur Erstellung des HTML-Quelltextes sowie sämtlicher anderer verwendeten Techniken bei AJAX-Anwendungen im Allgemeinen genügt als Minimalausstattung bereits ein reiner Klartexteditor, wie er bereits bei jedem Betriebssystem mitgeliefert wird. Für Masochisten20 kann das beispielsweise der extrem einfache Notepad unter Windows sein. Oder KEdit unter Linux. In der Praxis und insbesondere im Umgang mit AJAX und AJAX-Frameworks verwenden Sie jedoch meist mächtigere Programmierwerkzeuge, die Sie bei der Erstellung und Analyse des Quelltextes unterstützen. Solche Programme kennen einige Bestandteile einer Programmier- oder Beschreibungssprache (etwa HTML, CSS oder JavaScript) und unterstützen einfache und teilweise auch komplexere Standardvorgänge, beispielsweise das Maskieren (die kodierte Darstellung) von Sonderzeichen, das Einfügen von Quellcodeschablonen oder die bessere Übersichtlichkeit durch farbliche Kennzeichnung von bekannten Befehlen. Einige Editoren bieten einem Programmierer die Befehle einer verwendeten Sprache auch direkt an – etwa durch Menüs oder Symbolleisten, wo der Anwender diese auswählen kann (auch mit der Maus). Ein weiteres Feature, das einige Programme bieten, ist die Bereitstellung von verschiedenen Ansichten eines Dokuments. Das ist insbesondere bei reinen HTML-Editoren oft zu finden. Dort kann man in vielen Fällen zwischen der Vorschau einer Webseite (also wie sie in einem Browser aussehen wird), einem grafischen Erstellungsmodus und vor allem einer Ansicht des eigentlichen HTML-Codes hin- und herschalten. Alle diese Features erleichtern sowohl die Erstellung von Webseiten als auch von AJAX-Applikationen.

1.5.7

Firefox zur IDE für die Webentwicklung ausbauen

Firefox ist nicht nur einer der populärsten und besten Webbrowser. Es gibt mittlerweile für Firefox bzw. dessen Verwandte zahlreiche Erweiterungen (sogenannte Add-ons), die für die Webentwicklung sehr sinnvoll sind.21 Damit können Sie Firefox (oder auch teilweise seine Verwandten) fast zu einer IDE für die Webentwicklung ausbauen, wenn man den Editor zur Erzeugung des Quellcodes einmal außen vor lässt. Auch interagieren einige AJAX-Toolkits und -Frameworks unmittelbar mit verschiedenen Firefox-Add-ons (und oft auch mit Standardkomponenten von Firefox wie der Konsolenebene).

20 ;-). 21 Für keinen anderen Browser haben Sie derzeit eine so aktive Community, die immer wieder neue Add-ons entwickelt.

35

1 Einleitung

Hinweis Eine IDE (Integrated Development Enviroment – auf Deutsch »Integrierte Entwicklungsumgebung«) bezeichnet eine Programmierumgebung mit verschiedenen Features wie beispielsweise einer Vorschau, der grafischen Erstellung von Quellcodestrukturen, diverser Fehlersuchmöglichkeiten. Das bedeutet, unter einer Oberfläche beziehungsweise im Rahmen eines Programms werden verschiedene Tools für die unterschiedlichen Aspekte bei der Entwicklung einer Applikation zusammengefasst. Der Entwickler kann über diese zentrale Oberfläche alle oder zumindest die wichtigsten Dinge machen, die bei der Entwicklung notwendig sind. Um die volle Funktionalität von Firefox nutzen zu können, sollten Sie Firefox (auf den wir uns hier beschränken – Analoges gilt aber auch für seine Verwandten) erst einmal auf eine besondere Art und Weise installieren. Sie dürfen – zumindest bei einigen Varianten von Firefox – nicht die Standardinstallation wählen, sondern sollten eine benutzerdefinierte Installation durchführen. Tipp Sollten Sie Firefox schon mit dem Standardverfahren installiert haben, installieren Sie ihn einfach noch einmal benutzerdefiniert neu in das gleiche Verzeichnis. Eventuelle Einstellungen, Lesezeichen etc. bleiben dabei erhalten.

Der entscheidende Grund ist, dass Sie erst dann in einigen Firefox-Versionen in einem Dialog spezielle Komponenten für die Webentwicklung auswählen können, auf denen auch einige Erweiterungen explizit aufsetzen und die Ihnen andernfalls nicht zur Verfügung stehen. Insbesondere können Sie bei der benutzerdefinierten Installation den sogenannten DOM Inspector auswählen, wenn Ihnen dieser noch nicht zur Verfügung steht. Dieser ist ein hervorragendes Hilfsmittel, um unter anderem die Bestandteile einer Webseite oder auch eines XML-Dokuments in Form einer baumartig aufgebauten Objektstruktur zu analysieren (dem sogenannten DOM, auf den wir noch sehr ausführlich in dem Buch zu sprechen kommen). Zudem gibt er zahlreiche Informationen über Stylesheets in einer Webseite. Sie finden ihn, wenn Sie ihn in der benutzerdefinierten Installation ausgewählt haben, im Menü EXTRAS.

36

1.5 Was benötigen Sie?

Abbildung 1.7: Der DOM Inspector hilft bei der Analyse einer Webseite.

Die prinzipielle Installation von Erweiterungen (Add-ons) für Firefox Mithilfe der Add-ons können Sie Firefox zu einer Zentrale der Webentwicklung aufbauen. Der mit Abstand einfachste Weg zur Installation einer Firefox-Erweiterung ist, dass Sie auf die Download-Seite des Mozilla-Projekts (https://addons.mozilla.org/) gehen, in dem Suchdialog den Namen des gewünschten Add-on eingeben und dann den Installations-Hyperlink für Ihren Browser anklicken. Auch über ein Menü von Firefox kommen Sie zu der Webseite für die Installation der Add-ons. Wählen Sie dazu einfach EXTRAS/ERWEITERUNGEN oder EXTRAS/ADD ONS. Im folgenden Dialog, der Ihnen alle bereits installierten Add-ons anzeigt, finden Sie unten rechts den Befehl ERWEITERUNGEN HERUNTERLADEN. Dieser öffnet ein neues Browser-Fenster mit der Download-Seite des Mozilla-Projekts. Die interessanteste Kategorie in der Download-Seite des Mozilla-Projekts dürfte für unser Thema Webentwicklung sein. Es lohnt sich sicher, in einer ruhigen Minute alle verfügbaren Add-ons durchzublättern. Sie werden sicherlich einige echte Perlen finden.

37

1 Einleitung

Abbildung 1.8: Die Add-ons-Seite für Firefox mit komfortablen Suchmöglichkeiten

Abbildung 1.9: Über den Link unten gelangen Sie auch zur Webseite, über die sich Erweiterungen von Firefox finden und installieren lassen.

38

1.5 Was benötigen Sie?

Hinweis Im Anhang finden Sie einige interessante Add-ons für Firefox beschrieben. Was Sie auf jeden Fall installieren sollten, ist das Add-on Firebug. Das ist mehr oder weniger das Schweizer Taschenmesser für die Webentwicklung.

1.5.8

Aptana

Aus verschiedenen Gründen soll im Rahmen dieses Buchs eine kostenlose IDE zur Entwicklung von Webapplikationen besonders hervorgehoben werden – Aptana (http://aptana.com/)!

Abbildung 1.10: Die Homepage des Aptana-Projekts

39

1 Einleitung

Aptana22 basiert unmittelbar auf einer anderen IDE – Eclipse (http://www.eclipse.org). Eclipse steht unter der EPL23, ist selbst in Java geschrieben und benötigt von daher zum Ausführen eine passende Java-Laufzeitumgebung. Es handelt sich um eine modulare, plattformunabhängige Entwicklungsumgebung, die ursprünglich von IBM entwickelt wurde und die es für verschiedene Betriebssysteme gibt. Obwohl Eclipse auch auf den Schwerpunkt der Entwicklung von Java-Applikationen ausgerichtet ist, kann die IDE mithilfe unzähliger Plug-ins für nahezu alle Programmiertechniken, Designtechniken wie UML sowie Dokumentenbeschreibungstechnologien wie HTML oder XML verwendet werden24 – oder eben mit einer spezialisierten Erweiterung davon wie Aptana. Aptana kann sowohl als Teil einer vorhandenen Eclipse-Umgebung (als Plug-in) installiert werden wie auch als eigenständige Applikation, die funktional die gleichen Möglichkeiten in Hinsicht auf Webprogrammierung bereitstellt, die Eclipse mit Aptana-Plug-in auch bietet.25

Abbildung 1.11: Aptana gibt es für Windows, Mac, Linux und als Eclipse-Plug-in. Die Aptana-IDE bietet einen Quellcodeeditor und unterstützt mit zahlreichen Features direkt JavaScript, HTML und CSS sowie den Zugriff auf das DOM-Objektmodell und auch AJAX selbst. Dabei versucht die Code-Assist-Funktion, verschiedene Benutzereingaben in Form einer Autovervollständigung zu ergänzen und Syntax wird durch Syntaxhighlighting (farbliche Kennung von Schlüsselbegriffen und Syntaxstrukturen) hervorgehoben. Besonders interessant ist aber die Möglichkeit, die Eigenschaften und Methoden von Objekten angezeigt zu bekommen. Das Programm bietet sogar einen Debugger für JavaScript. Und Aptana beinhaltet zudem einen eigenen kleinen Webserver, über den Sie eine AJAX-Applikation ohne die Installation eines eigenständigen Webservers testen können. 22 Bzw. vollständig Aptana Studio. 23 Eclipse Public License (EPL) ist eine Open Source-Softwarelizenz. 24 Allerdings ist Eclipse durch die Mächtigkeit nicht ganz einfach im Umgang. Und wegen der Java-Basis muss die Hardware auch entsprechend gut bei Kräften sein. Dennoch lohnt sich eine Beschäftigung mit dieser IDE in sehr vielen Fällen. 25 Ich habe sowohl mit dem Eclipse-Plug-in als auch der eigenständigen Version experimentiert und bin persönlich mit der eigenständigen Version zufriedener. Die Varianten des Plug-ins, die ich ausprobiert habe, waren etwas instabil. Allerdings hatte es sich dabei um Betaversionen gehandelt.

40

1.6 Zusammenfassung

Für das Thema AJAX-Frameworks ist es jetzt besonders interessant, dass Aptana eine ganze Reihe von Frameworks, die wir in dem Buch behandeln, direkt unterstützt beziehungsweise gleich mitliefert, beispielsweise Dojo, Prototype, Rico oder YUI.

Abbildung 1.12: Aptana gestattet den Import und die Verwaltung von JavaScript-basierenden AJAX-Frameworks. Darauf werden wir natürlich explizit zurückkommen, wobei wir die Frameworks und Toolkits unabhängig vom Aptana-Assistenten einsetzen.

1.6

Zusammenfassung

Sie haben in diesem einleitenden Kapitel erfahren, wer Sie durch das Buch führt, um was es in dem Buch geht und an wen es sich wendet, sowie wie das Buch aufgebaut ist. Dazu wurden alle wichtigen Voraussetzungen besprochen, damit Sie erfolgreich die Erstellung von RIAs auf Basis von AJAX und AJAX-Frameworks angehen können. Und das ist nun das Thema der nächsten Kapitel.

41

2

Die Welt von AJAX – zentrale Grundlagen

Viele Frameworks und Toolkits für AJAX1 und die Erstellung von Webapplikationen im Allgemeinen sind als reine JavaScript-Erweiterungen für den Browser konzipiert – also JavaScript-Bibliotheken mit diversen nützlichen Funktionen, die wir in diesem Buch in den Fokus stellen. Andere Frameworks laufen auf dem Webserver und arbeiten dort mit Programmiersprachen wie PHP, ASP.Net, Java oder Python. Die eigentliche Oberfläche der Webapplikation, wie sie der Besucher in seinem Client letztendlich sieht, wird – quasi unsichtbar für den Programmierer – auf dem Server generiert und dann zum Client geschickt. Weitere Frameworks gestatten selbst die visuelle Erstellung von den Oberflächenparts einer Web- bzw. AJAX-Applikation (sogenannte Web-Controls oder auch Komponenten bzw. Widgets) mit dem Zuordnen von spezifischen Events zu bestimmten Komponenten des Web-Interface, wenn ein Framework eine grafische Entwicklungsumgebung (IDE) mitbringt oder sich darin integrieren lässt. In diesem Kapitel wollen wir uns mit den Grundlagen zu den zentralen Technologien rund um AJAX beschäftigen. Ich möchte noch einmal eindringlich davor warnen, zu glauben, dass AJAX-Frameworks und -Toolkits2 ohne elementare Grundlagenkenntnisse der Basistechnologien sinnvoll und effektiv angewendet werden können. So wie Marketingaussagen vieler Softwareproduzenten das Gefühl suggerieren sollen, dass die Erstellung von Webseiten beispielsweise mit ihrem ach so guten WYSIWYG3-Editor vollkommen ohne HTML-Kenntnisse funktioniert, so scheinen einige Ausführungen rund um AJAX-Frameworks und -Toolkits den Eindruck vermitteln zu wollen, dass man bloß ein solches System anwenden muss und schon hat man wie von Zauberhand eine RIA. Aber dem ist nicht so. Never ever! Es ist unabdingbar, dass Sie sich richtig gut mit HTML und möglichst auch XHTML und vor allen Dingen JavaScript auskennen und zumindest grundlegende Kenntnisse im Aufbau von TCP/IP, HTTP samt den Details zum Datenaustausch mit AJAX und CSS haben. Und dazu sollten Sie wie gesagt auch ganz grob wissen, was es mit XML und JSON auf sich hat. Und genau dieses doch recht umfangreiche Wissen – zumindest die Grundlagen – soll dieses einleitende Kapitel vermitteln. 1 2 3

Bzw. die Bibliotheken von Toolkits. Insbesondere solche, die explizit als JavaScript-Bibliotheken konzipiert sind. What you see is what you get.

2 Die Welt von AJAX – zentrale Grundlagen

2.1

Das WWW

Das WWW entstand im Jahr 1989 im Kernforschungszentrum CERN in der Nähe von Genf. Das WWW sollte die Bedienung des bis dato rein kommandozeilenbasierenden Internets erheblich vereinfachen. Kern des neuen Dienstes wurden das Dienstprotokoll HTTP, die Dokumentenbeschreibungssprache HTML sowie die Programmtypen Webserver und Webbrowser. Hinweis Im Anhang finden Sie ein paar grundlegende Informationen zu den technischen Grundlagen des Internets selbst (Client-Server-Prinzip, TCP/IP, verbindungsorientierte versus zustandsloser Datenkommunikation).

Nun ist das Internet ein Client-Server-System, bei dem jede Aktion aus einem Zyklus »Anfordern einer Leistung – Bereitstellen der Leistung« besteht. Im Fall des WWW ist das der Zyklus »Anfordern einer Webseite oder Datei, die in der Webseite verwendet wird4 – Senden der Webseite oder Datei«. Sobald die angeforderte Datei im Client angekommen ist, kann sie verwendet werden. Konkret bedeutet das, dass im Web so gut wie immer ein Browser eine neue Webseite anfordert und eventuell darin referenzierte externe Ressourcen wie Grafiken nachgefordert werden, die dann zusammen mit der Webseite im Browser dargestellt werden. In der Anfangsphase des Webs war so ein Anfordern einer Webseite durch einen Client und deren Darstellung nach Erhalt der Antwort vollkommen ausreichend. Aber bereits nach wenigen Jahren genügten vielen Leuten rein statische Webseiten nicht mehr. Insbesondere die mangelnden Möglichkeiten der Interaktion mit einem Betrachter einer Webseite stellten ein Dilemma dar. Das Problem war zum damaligen Zeitpunkt nicht, dass jede Eingabe einer neuen Webadresse in der Adresszeile des Browsers oder der Klick auf einen Hyperlink mit einer Verknüpfung zu einer anderen Webseite eine Webseite notwendig machte. Der Anwender will ja in so einem Fall bewusst eine neue Information haben, die bis dato noch nicht auf seinem Rechner verfügbar ist. Aber auch jede beliebige andere Anwenderaktion, auf die reagiert werden muss, ergab zu dieser Zeit eine Anforderung an einen Server, eine neue Webseite zu schicken und gegebenenfalls vorher schon gewisse Operationen wie Plausibilisierungen vorzunehmen. Betrachten wir folgende Situation: Ein Anwender soll in einem Webformular seine Zahl eingeben. Er gibt aber einen Buchstaben ein. Alleine die primitive Plausibilisierung dieser Eingabe erforderte das Versenden der kompletten Formulareingaben an den Webserver und die Rücksendung einer

4

44

Zum Beispiel eine Grafik.

2.1 Das WWW

vollständigen neuen Webseite, in der zu einer Fehlermeldung zudem alle anderen bisherigen Eingaben des Anwenders erhalten bleiben sollten, sofern diese korrekt sind. Allgemein stellt jede Reaktion auf eine Anwenderaktion einen solchen Zyklus aus der Übermittelung von Formulardaten an einen Webserver, Verarbeitung auf dem Webserver und der Sendung einer vollständigen Webseite als Antwort dar. Aufgrund der Tatsache, dass Daten unter Umständen mehrfach um die Erde kreisen und ein Webserver also bei jeder Anfrage durch einen Nutzer eine vollständig neue Webseite erzeugen und übermitteln muss, ist das Verhalten einer typischen Webapplikation sehr träge und zudem sehr belastend für den Webserver sowie die Kommunikationswege.

2.1.1

Clientseitige Webprogrammierung als erste Optimierung

Um der mangelnden Performance von Webapplikationen bei gleichzeitiger Belastung der Kommunikationswege und des Servers sowie dem Brachliegen der Clientressourcen zu begegnen, entstanden etwa 1995 clientseitige Programmiertechniken. Auf der einen Seite waren es Skriptsprachen wie JavaScript oder VBScript, die im Webbrowser ausgeführt werden. Auf der anderen Seite entwickelten verschiedene Firmen Möglichkeiten, vollständige Programme in eine Webseite zu implementieren – etwa in Form von Java-Applets oder ActiveX-Controls. Die Hauptfunktion von allen clientseitigen Programmiertechniken war eine Verlagerung von der Funktionalität vom Server auf den Client, die dort bereits erledigt werden kann. Denken wir noch einmal an Daten, die auf dem Client in einem Webformular erfasst werden. Wenn dort ein Anwender wie gesagt statt Zahlen Buchstaben einträgt, werden die fehlerhaften Daten – unter Umständen rund um die Welt – zum Server geschickt und dann die banale Fehlermeldung als Antwort zurück zum Client geschickt. Mit clientseitiger Programmierung ist es möglich, dass der Fehler bereits beim Client bemerkt wird und die Daten überhaupt nicht zum Server gesendet werden müssen. Clientseitige Skripte und Programme in Webseiten erlauben es einem Webbrowser, selbst auf eine intelligente Weise mit Situationen umzugehen, die sonst ein Programm auf dem Webserver oder eine Aktion durch den Anwender erforderlich machen. Wesentlicher Effekt ist damit eine Beschleunigung vieler Vorgänge, da der Browser keine Anfrage an den Server schicken und die Antwort nicht abwarten muss. Hinweis Wenn schon damals die Marketingleute das Internet entdeckt hätten, wäre der Begriff Web 2.0 hier schon angebracht gewesen. Und er hätte meiner Meinung nach viel besser gepasst als heute.

45

2 Die Welt von AJAX – zentrale Grundlagen

Probleme bei clientseitiger Programmierung Über clientseitige Programmiertechniken ließen sich natürlich nicht alle Aufgaben auf einen Client verlagern. Alle Aktivitäten mit zentraler Datenhaltung müssen zum Beispiel zwingend auf dem Server erledigt werden. Ebenso sollten sicherheitsrelevante Dinge wie die Überprüfung von Zugangsdaten nicht im Client stattfinden. Dummerweise hat der Einsatz von clientseitiger Programmierung aber noch weitere gravierende Nachteile. Es muss vor allen Dingen gewährleistet sein, dass das Skript oder Programm im Rahmen einer Webseite beim Client auch ausgeführt werden kann. Und das hat sich bei clientseitiger Programmierung als riesiges Problem erwiesen. Wegen unterschiedlichster Gründe bekam clientseitige Programmierung insbesondere ab etwa dem Jahr 2000 immer mehr Probleme. Einige clientseitige Programmiertechniken erwiesen sich als gravierend unsicher. Deshalb wurde von vielen Leuten eine Art Sippenhaft für clientseitige Programmierung und Clienttechniken im Allgemeinen gefordert (auch für weitgehend ungefährliche Techniken wie JavaScript). Ein weiteres Problem clientseitiger Programmierung bestand darin, dass es einige proprietäre Standards gab, die nicht in allen Webbrowsern implementiert wurden, und einige Techniken durch marktpolitische Spielchen großer Softwarefirmen unter die Räder kamen.

2.1.2

Rückverlagerung auf den Server

Die verschiedenen Probleme bei clientseitiger Programmierung bewirkten etwa ab dem Jahr 2000 die zunehmende Rückverlagerung von Aktivität auf den Webserver, obwohl im Client viele dieser Aufgaben bereits gelöst werden konnten. Aufgrund dieser Situation im Web kann man rückblickend beobachten, dass das Web ab dem Jahr 2000 für einige Zeit auf das Niveau zurückgefallen war, das es bereits vor 1995 hatte.

2.1.3

Der Status quo

Mittlerweile ist die Hysterie bezüglich der Gefahren clientseitiger Programmierung abgeklungen und clientseitige Programmierung erobert sich den Teil an Aktivität im Web zurück, der sinnvollerweise schon im Client erledigt werden sollte. Zwar ist als einziger Vertreter der clientseitigen Zunft nur noch JavaScript übrig geblieben, aber der wird mittlerweile wieder flächendeckend eingesetzt. Schauen Sie sich heute einmal populäre Webseiten im Internet an. Keine einzige der heutzutage angesagten Webseiten kommt ohne clientseitige Programmierung mit JavaScript daher. Und fast alle Anwender im Web haben JavaScript im Browser aktiviert. Denn kaum ein Anwender möchte auf den Nutzen populärer Webangebote wie Google, Amazon, eBay, Wikipedia oder Yahoo verzichten. Als Ersteller von Webangeboten können Sie im Umkehrschluss also JavaScript samt zusammenhängenden Techniken heutzutage wieder bei den meisten Clients voraussetzen.

46

2.1 Das WWW

2.1.4

Das Konzept von AJAX und das Web 2.0

Nun reden wir in diesem Buch ja über AJAX-Frameworks und -Toolkits. Was bezeichnet denn AJAX konkret und woher kommt der Begriff? Ein Problem von HTTP ist weder durch einseitige Programmierung auf Server oder Client noch einer Arbeitsteilung zu lösen: die Notwendigkeit, bei der Reaktion auf eine Anfrage nach neuen Daten durch einen Webbrowser an einen Webserver immer eine vollständige Webseite als Antwort zu senden. Und hier kommt AJAX ins Spiel! AJAX beschreibt im engeren Sinne nur eine sukzessive immer weiter standardisierte Vorgehensweise, wie man eine Reaktion einer Webapplikation in (nahezu) Echtzeit gewährleisten kann, obwohl neue Daten vom Webserver angefordert werden. Statt einer vollständigen Webseite wird eine AJAX-Datenanfrage dazu führen, dass nur die neuen Daten vom Webserver geschickt und diese dann in die bereits beim Client geladene Webseite »eingebaut« werden. Vereinfacht gesagt, werden Daten5 bei der Verwendung von AJAX also erst dann vom Webserver angefordert, wenn sie benötigt werden, dann für JavaScript6 verfügbar gemacht und anschließend in die bestehende Webseite eingebaut. Dabei wird in der Regel die normale Interaktion des Benutzers mit der Webapplikation nicht durch das Laden einer neuen Webseite unterbrochen. Das Laden erfolgt bei Bedarf asynchron zur Interaktion, die der Benutzer wahrnimmt, was einen weiteren Teil des Namens erklärt. Diese asynchrone Kommunikation kann und wird im Extremfall so weit gehen, dass ein Anwender in einem Webformular über ein Eingabefeld ein Zeichen auf der Tastatur eingibt und direkt nach Eingabe des Zeichens bereits eine ergänzende Information vom Server nachgeladen wird. So etwas kennen Anwender bereits von vielen Desktop-Anwendungen mit Suchfunktionen. Aber im Web ist diese komfortable Unterstützung des Anwenders bisher daran gescheitert, dass immer eine vollständige Webseite ausgetauscht werden musste.

AJAX – eine Ansammlung von Totgesagten Nun bezeichnet AJAX ganz konkret im Wesentlichen Technologien, die schon lange im Web etabliert sind und vielfach von sogenannten Experten schon totgesagt wurden7 – beginnend bei HTML und HTTP über JavaScript und CSS bis hin zu XML. Auch die asynchrone Nachforderung von Daten, die in eine Webseite integriert werden sollen, gibt es schon seit ungefähr 1998. Allgemein wurde dieses Verfahren zur asynchronen Nachforderung von Daten per HTTP, die in einen HTML-Kontext eingebaut werden sollten, früher mit dem Begriff XMLHttpRequest beschrieben.8 Die ersten Techniken zur clientseitigen Anforderung 5 6 7 8

Entweder einfacher Klartext oder strukturierter Klartext wie bei JSON oder XML, wobei Letzteres zur Namensgebung von AJAX entscheidend beiträgt. Daher das JavaScript in »Asynchronous JavaScript and XML«. Und wie so oft – Totgesagte leben länger! Dieser Bezeichner findet sich heute als Name für das Kommunikationsobjekt wieder.

47

2 Die Welt von AJAX – zentrale Grundlagen

von Daten auf diese Weise per HTTP gehen auf das Outlook Web Access Team von Microsoft zurück und wurden in den Microsoft Exchange Server als auch den Internet Explorer integriert. Später folgten weitere isolierte Anwendungen, die sich aber nicht flächendeckend durchsetzen konnten. Der Zusammenschluss dieser also schon einige Zeit bekannten, aber teilweise noch nicht lange standardisierten Techniken, unter dem Begriff AJAX ist relativ neu. Wem genau die Erfindung dieses Begriffs zuzuordnen ist, ist nicht eindeutig. Allerdings hat ihn ein Mitarbeiter der Agentur Adaptive Path mit Namen Jesse James Garrett in seinem Essay »Ajax: A New Approach to Web Applications« maßgeblich geprägt und bekannt gemacht.

Abbildung 2.1: Der berühmte Beitrag von Jesse James Garrett, der zum Begriff AJAX führte

48

2.1 Das WWW

Und da das Schlagwort AJAX unmittelbar mit dem Begriff Web 2.0 einhergeht, muss natürlich auch Tim O’Reilly erwähnt werden, der mit seinem Artikel »What is Web 2.0« im September 2005 dieses zweite bekannte Buzzword erstmals geprägt und den Boom initiiert hat.

Abbildung 2.2: Der Begriff Web 2.0 – die Urzelle Richtig populär begann AJAX als Begriff zu werden, als Google das Verfahren immer mehr für einige bekannte Anwendungen wie beispielsweise Google Groups, Google Maps, Gmail und Google Suggest verwendete und die AJAX-Unterstützung in der Gecko-Engine, auf der viele wichtige Browser basieren, erheblich weiterentwickelt wurde.

49

2 Die Welt von AJAX – zentrale Grundlagen

Abbildung 2.3: Google suggest ist eine der ersten »echten« AJAX-Applikationen mit RIACharakter.

2.2

Die Kerntechniken von AJAX

Wir werfen nun einen genaueren Blick auf alle relevanten Techniken, die bei AJAX eine Rolle spielen. Sie werden beim Einsatz von Frameworks und Toolkits unweigerlich damit in direkte Berührung kommen – teils direkt, teils auch indirekt.

2.2.1

HTML und XHTML

Im Kern jeder RIA bzw. AJAX-Applikation steht ohne wenn und aber HTML oder XHTML – genau wie bei jeder »klassischen« Webapplikation. Bei HTML handelt es sich um eine Weiterentwicklung der von IBM entwickelten und in der ISO-Norm 8779:1986 festgeschriebenen Sprache SGML (Structured Generalized Markup Language) mit einem festgelegten Satz von Anweisungen, mit der die logischen Strukturen eines Textdokuments beschrieben werden.

50

2.2 Die Kerntechniken von AJAX

Zu einer so beschriebenen logischen Dokumentenstruktur gehören Texte, Überschriften und Bilder, aber auch Verweise, Kapitel, Unterkapitel, Absätze, Aufzählungen, Tabellen, Formatvorlagen, Skripte, Referenzen auf multimediale Elemente (Grafik, Sound, Video usw.) gehören dazu. Die Einbindung von externen Ressourcen erfolgt als Referenz auf eine entsprechende Datei in Form eines URL. HTML-Dateien bestehen – wie nahezu alle interpretierten Formate im Web – aus reinem Klartext. Dies bewirkt die Plattformunabhängigkeit von Webseiten. Plattformabhängig ist immer nur die Software zum Interpretieren der HTML-Dateien (der Browser). Hinweis Kenntnisse zu HTML und XHTML werden in diesem Buch weitgehend vorausgesetzt. Im Anhang finden Sie dennoch einige Ausführungen zu grundlegenden Details. Sollten auch diese Ihnen zu knapp sein, finden Sie eine Vielzahl an guten Lehrbüchern und Dokumentationen speziell zu HTML. Sogar im Internet gibt es frei verfügbare Quellen.

2.2.2

Das Prinzip der Fehlertoleranz

Nun werden auch Dokumentenbeschreibungssprachen wie HTML über die Zeit immer weiterentwickelt. Es gibt dementsprechend eine Vielzahl von Browser-Varianten und ältere Browser kennen nicht die Befehle neuerer Sprachversionen, da zu deren Entstehungszeit die entsprechenden Befehle noch nicht vorhanden waren. Und selbst aktuelle Browser kennen oft nicht jeden Befehl im Sprachumfang der gesamten HTML-Familie – insbesondere, wenn es sich um eine Sonderanweisung irgendeines Browser-Herstellers handelt. Kurz gefasst – es gibt also Befehle, die der eine Browser kennt, der andere jedoch nicht. Hinweis Sinngemäß lassen sich diese Ausführungen auch auf andere Webtechnologien wie Stylesheets ausdehnen.

Was soll nun aber geschehen, wenn ein Browser eine Webseite mit einer Anweisung lädt, die er nicht versteht. Abstürzen? Oder eine Fehlermeldung bringen, mit der üblicherweise kein Anwender etwas anfangen kann? Es gibt noch eine dritte Lösung – ignorieren. Das mag zwar erst einmal nicht gerade positiv erscheinen, ist aber – zumindest bei der Beschreibung von Dokumenten – immer noch die beste der drei

51

2 Die Welt von AJAX – zentrale Grundlagen

Varianten. Das Ignorieren von unbekannten Anweisungen durch den Browser basiert auf dem Prinzip der Fehlertoleranz, welches zu den fundamentalen Verhaltensweisen von Browsern bei der Verarbeitung von HTML (und auch Stylesheets) gehört. Das Prinzip der Fehlertoleranz veranlasst Programme zur Auswertung von HTMLDokumenten, bei der Interpretation so fehlertolerant wie irgend möglich zu sein. Der äußerst positive Effekt ist, dass dann auch syntaktisch unkorrekte Dokumente so weit wie möglich ausgewertet werden können. So weit Browser korrekte Anweisungen vorfinden, werden diese Anweisungen ausgeführt. Falsche oder unvollständige Anweisungen werden ganz einfach ignoriert.9 Im ungünstigsten Fall bleibt reiner, unformatierter Text übrig und damit die eigentliche Information weitgehend erhalten. Das Prinzip der Fehlertoleranz ist unumgängliche Voraussetzung dafür, dass immer neue HTML-Anweisungen oder neue Technologien, die über Webseiten mit speziellen HTML-Anweisungen referenziert werden, im WWW eingeführt werden können und dennoch die älteren Browser beim Laden solcher Webseiten nicht »abschmieren«.10 Was sie nicht kennen, wird einfach ignoriert. Der Rest wird dargestellt. Eine Abwärtskompatibilität der HTML-Dokumente ist also immer sichergestellt, auch wenn signifikante Informationen beim Anzeigen teilweise verloren gehen können. Und das Prinzip der Fehlertoleranz sorgt ebenso dafür, dass fehlende Elemente in einer HTML-Seite quasi automatisch vom Browser im Hintergrund ergänzt werden, wenn die Ergänzung eindeutig möglich ist. So können Sie beim Erstellen einer Webseite im Grunde sogar auf das Grundgerüst verzichten. Es würde vom Browser quasi »hinzugedacht«. Hinweis Das Prinzip der Fehlertoleranz vereinfacht die Bereitstellung von Informationen erheblich und hat in der Anfangszeit ohne Zweifel erst den Erfolg des Webs ermöglicht. Allerdings verlieren solche nur lose reglementierten Klartextdokumente die Möglichkeit, zuverlässig von automatischen Analysesystemen (etwa Suchmaschinen oder Lesegeräten von Sehbehinderten) ausgewertet zu werden. Und natürlich geht ein Stück Information verloren, wenn es keine Eindeutigkeit von Strukturen gibt.

9

Wobei „syntaktisch unkorrekt“ dennoch voraussetzt, dass ein Browser diese „Fehler“ in gewisser Weise „erwartet“ und damit umgehen kann. 10 Im Gegensatz zu einer geschlossenen Nutzergruppe können Sie den Teilnehmern im Internet ja nicht so einfach mitteilen, dass es einen neuen Standard gibt und alle Teilnehmer zu dessen korrekter Verarbeitung auf ein neues Programm umzusteigen haben.

52

2.2 Die Kerntechniken von AJAX

2.2.3

JavaScript & Co

Eine der wichtigsten Erweiterungen von HTML sind Skriptsprachen. Bei den Skriptsprachen handelt es sich wie bei HTML um Interpretersprachen – nur eben nicht zur Beschreibung einer Dokumentenstruktur, sondern zur Programmierung. Es gab in der Geschichte des WWW nun diverse Skriptsprachen auf der Clientseite. Aber heutzutage sind eigentlich nur drei noch zu erwähnende Vertreter für die Steuerung und Programmierung eines Webbrowsers übrig geblieben. Das sind JavaScript, JScript und VBScript. VBScript wurde von Microsoft aus Visual Basic für das Web extrahiert und ist weitgehend auf die WINTEL-Plattform (Windows-Betriebssystem + INTEL-basierende Prozessoren) beschränkt. In der Praxis spielt VBScript im Web auf Clientseite11 heutzutage jedoch so gut wie keine Rolle mehr, denn die fehlende Unterstützung in allen relevanten Browsern außer dem Internet Explorer sowie gravierende Sicherheitsmängel haben nie zu einer wirklichen Akzeptanz geführt. Auf Clientseite programmiert man im Web heutzutage fast ausschließlich mit JavaScript respektive dessen weitgehend kompatiblem Microsoft-Clone JScript12, wenn man von isolierten und auf ein bestimmtes System beschränkten Lösungen absieht.13

Was ist JavaScript? Bei JavaScript handelt es sich um eine Skriptsprache mit einer Syntax, die von C stammt und die syntaktisch eine parallele Entwicklung wie Java genommen hat. Entwickelt wurde JavaScript im Wesentlichen in einer Kooperation von Netscape und Sun (dem Erfinder von Java). Hinweis Trotz der Ähnlichkeit des Namens und der teilweise gemeinsamen Wurzeln haben Java und JavaScript außer großen Teilen der Syntax wenig gemein. Insbesondere weichen das Konzept und die Zielrichtung vollkommen voneinander ab.

Bei JavaScript handelt es sich im Detail um eine plattformunabhängige, offene, (einigermaßen)14 leistungsfähige, einfach zu erlernende, fast überall im Internet unter11 Sowohl auf Seiten von Microsoft-Webservern als auch im Desktop-Bereich unter Windows hingegen hat VBScript auch heute noch eine gewisse Bedeutung. 12 JScript werden wir in der Folge nicht mehr ausdrücklich erwähnen. 13 Beispielsweise ActionScript für Flash oder echte Programme, die in Webseiten eingefügt werden und beim Anwender meist eine ganze Reihe von Voraussetzungen bezüglich der Plattform und der Umgebung erfordern. 14 Da muss man realistisch bleiben.

53

2 Die Welt von AJAX – zentrale Grundlagen

stützte und in Klartext notierte Skriptsprache zur Programmierung von Webseiten bzw. deren einbindenden Programmen. Skriptsprachen sind in der Regel von relativ einfacher Struktur15 und müssen als Interpretersprachen natürlich in irgendeinen Interpreter implementiert werden – natürlich auch im Web. Dabei ist es egal, ob es sich um serverseitige oder clientseitige Skriptsprachen handelt.16 Das ist beispielsweise über einen skriptfähigen Browser gewährleistet, wenn man ein Webskript in ein HTML-Gerüst einbindet, aber auch bei diversen Webservern. JavaScript ist so als eine unmittelbare Ergänzung und Erweiterung zu HTML zu sehen und nur als eingebundener Bestandteil eines HTML-Gerüsts zu verwenden. Webskripte werden als Klartext in eine Webseite direkt notiert oder hinzugebunden und zur Laufzeit interpretiert. Es gibt verschiedene Techniken, wie Skripte mit einer Webseite verbunden werden können. Hinweis Wichtige Details zur Einbindung von JavaScript in Webseiten finden Sie im Anhang. Ebenso finden Sie dort einige wichtige grundlegende Ausführungen zur JavaScript-Syntax, sofern Sie mit der Programmierung in JavaScript nicht vertraut sind.

2.2.4

DOM und der Zugriff auf Elemente einer Webseite

Es wird oft vorkommen, dass Sie in JavaScript selbst Objekte erzeugen oder Klassenelemente verwenden. So gut wie immer werden Sie in JavaScript-Codes Objekte nutzen, die Ihnen automatisch vom Browser zur Verfügung gestellt werden. Und diese Objekte basieren auf einem Objektmodell, das nicht zu JavaScript oder auch (X)HTML zählt, sondern die Strukturen von weitgehend beliebigen baumartig aufgebauten Dokumenten beschreibt – das DOM-Konzept (Document Object Model). Diese Objektbibliothek kann mittels diverser Techniken genutzt werden, sowohl aus Programmier- und Skriptsprachen als auch aus Anwendungen heraus. Dem Zugriff auf eine Webseite unter diesem Objektgesichtspunkt liegt mit DOM ein Konzept zugrunde, das sowohl eine plattform- als auch eine programmiersprachenübergreifende Schnittstelle bezeichnet.

15 Meist viel einfacher als vollständige Programmiersprachen. 16 Das im Internet praktizierte Client-Server-Prinzip erlaubt bei einer komplexeren Applikation – insbesondere einer RIA – die Aufteilung von Funktionalität auf beide beteiligten Partner. Sowohl der Client als auch der Server können diverse Funktionalitäten durchführen. Und auf beiden Seiten kommen Skripte zum Einsatz.

54

2.2 Die Kerntechniken von AJAX

In diesem Konzept wird eine (X)HTML-Seite (oder allgemein ein baumartig aufgebautes Dokument, z.B. auch ein XML-Dokument) nicht als statisch aufgebaute, fertige und nicht unterscheidbare Einheit, sondern als differenzierbare Struktur betrachtet, deren einzelne Bestandteile Programmen und Skripten dynamisch zugänglich sind. Dieser Ansatz ermöglicht die individuelle Behandlung von Bestandteilen einer Webseite auch dann, wenn die Webseite bereits in den Browser geladen ist – und zwar eine Behandlung, die weit über die einfache Interpretation durch den Browser beim Laden eines Dokuments von oben nach unten hinausgeht. Das DOM-Konzept beinhaltet verschiedene Teilaspekte. Es veranlasst beispielsweise einen Browser, eine (X)HTML-Seite zwar wie eine gewöhnliche Textdatei zu lesen und entsprechende (X)HTML-Anweisungen auszuführen. Darüber hinaus wird der Browser jedoch beim Laden der Webseite alle ihm im Rahmen des Konzepts bekannten und einzeln identifizierbaren Elemente einer Webseite bezüglich ihres Typs, ihrer relevanten Eigenschaften und ihrer Position innerhalb der Webseite indizieren. Dies ist eine Art Baum im Hauptspeicher des Rechners, der beim Laden der Webseite aufgebaut und beim Verlassen der Seite wieder gelöscht wird. Ähnliche Elemente werden dabei bei der Indizierung vom Browser gemeinsam in einem Feld verwaltet. Auf diese Weise hat der Browser nach dem Laden der Webseite genaue Kenntnis über alle relevanten Daten sämtlicher eigenständig für ihn ansprechbaren Elemente in der Webseite. Welche das jedoch sind und was er damit anstellen kann, das kann sich je nach Browser erheblich unterscheiden. Jedes ansprechbare Element (etwa ein bestimmtes (X)HTML-Tag) kann bei Bedarf auch während der Lebenszeit der Webseite aktualisiert werden – etwa wenn mittels eines Skripts die Position eines Elements in der Webseite verändert oder über Stylesheets nach dem vollständigen Laden der Webseite das Layout eines Elements dynamisch verändert wird. Viele Objekte im DOM-Konzept sind in Form einer Objekthierarchie verfügbar. Wenn ein Objekt einem anderen untergeordnet ist, notiert man das in der DOT-Notation, indem man erst den Namen des oberen Objekts und dann den des darunter angesiedelten Objekts notiert. Wenn man beispielsweise eine Webseite nimmt, ist sie über das Objekt document aus JavaScript heraus verfügbar. Da sich die Webseite in einem Browser-Fenster befindet und dieses als window ansprechbar ist, erfolgt der Zugriff über window.document. Ein Formular in einer Webseite ist über ein document untergeordnetes Objekt (oder genauer einem Datenfeld aus Objekten – ein sogenanntes Objektfeld) mit Namen forms und einem Index verfügbar. Beispiel: Listing 2.1: Das erste Formular in einer Webseite window.document.forms[0]

55

2 Die Welt von AJAX – zentrale Grundlagen

Über diese streng entlang der Verschachtelung der Objekte orientierte Zugriffsmöglichkeit auf DOM-Objekte hinaus gibt es weitere syntaktische Wege, die aber letztendlich alle das gleiche Objekt referenzieren und unabhängig von der Art des Zugriffs immer die gleichen Eigenschaften und Methoden bereitstellen. So gibt es zum Zugriff die Methoden getElementById(), getElementsByTagName() und getElementsByName() sowie die direkte Angabe des Namens. Wenn Sie für den Zugriff die Methode getElementsByName() (oder direkt den Namen) verwenden, müssen Sie den Namen des Elements (in der Regel als (X)HTML-Parameter bzw. -Attribut beim Tag notiert) als String-Parameter angeben (natürlich funktioniert diese Methode nicht, wenn ein Element keinen Namen hat). Allerdings müssen Sie zum Zugriff auf ein konkretes Element noch einen Index angeben, da die Methode getElementsByName() ein Array als Rückgabewert liefert. Beispiel: Listing 2.2: Beispiel für den Zugriff auf ein Element über den Namen document.getElementsByName("abc")[0]

Hinweis Ein name-Parameter in einer Webseite muss nicht eindeutig sein. So können durchaus mehrere Formularfelder in einer Webseite den gleichen Namen haben, wenn sie sich in verschiedenen Formularen befinden. Und durch das extrem fehlertolerante Verhalten der Browser können sogar Elemente den gleichen Namen haben, wenn sie sich im gleichen Namensraum befinden. Dann ist jedoch wegen der Mehrdeutigkeit ein Zugriff über den Namen diffizil (und vor allen Dingen browserabhängig). Sollte für ein Element im (X)HTML-Tag ein id-Attribut spezifiziert sein, können Sie mit getElementById() darauf zugreifen. Sie geben als String-Parameter einfach die ID an. Beispiel: Listing 2.3: Beispiel für einen Zugriff über die ID document.getElementById("user")

Wenn Sie auf ein Element einer Webseite über getElementsByTagName() zugreifen, geben Sie als String-Parameter einfach das Tag an. Allerdings müssen Sie noch einen Index angeben, da auch diese Methode ein Array als Rückgabewert liefert.

56

2.2 Die Kerntechniken von AJAX

Beispiel: Listing 2.4: Beispiel für einen Zugriff über die ID document.getElementsByTagName("h1")[3]

Textinhalt von DOM-Objekten ansprechen Bei AJAX wollen Sie in der Regel Textinhalte in einer Webseite austauschen, ohne die Webseite neu zu laden oder neu aufzubauen. Sie können dazu bei einem Element in der Webseite, das einen Text als Inhalt hat, diesen per JavaScript ansprechen und austauschen. Besonders wichtig ist im Zusammenhang mit der Datennachforderung per AJAX die Eigenschaft innerHTML. Als Alternative steht innerText zur Verfügung. Der Unterschied zwischen innerHTML und innerText ist recht gering. Sowohl über innerHTML als auch innerText haben Sie Zugang zum Inhalt eines HTML-Elements. Wenn Sie beim dynamischen Ändern des gespeicherten Inhalts bei innerHTML jedoch HTMLTags notieren, werden diese bei der Aktualisierung des Elementinhalts interpretiert. Das ist offiziell bei innerText nicht der Fall. Allerdings wirkt sich das bei vielen Browsern nicht aus. Wenn Sie HTML-Tags senden, werden sie bei beiden Eigenschaften interpretiert. Auch sonst sind diverse Probleme im Zusammenhang mit innerText bekannt, weshalb man in der Praxis fast ausschließlich innerHTML verwendet. Hinweis Im Anhang finden Sie eine Aufstellung der wichtigsten verfügbaren DOM-Objekte. Diese können Sie unmittelbar mit JavaScript aus einem Browser heraus verwenden.

2.2.5

Stylesheets und DHTML

Bei AJAX ist es ein zentraler Aspekt, dass eine Webseite verändert wird, nachdem sie im Browser geladen wurde. Und das ist im Grunde genau die Definition von DHTML. Wobei DHTML oft auch als die Verbindung von HTML bzw. XHTML, JavaScript und Stylesheets bezeichnet wird. Und auch damit haben wir einen zentralen Part von AJAX beschrieben. Formatvorlagen bzw. Stylesheets bestehen – wie HTML – aus reinem Klartext, der Regeln zur Formatierung von Elementen beschreibt. Moderne Webseiten reduzieren die Bedeutung von HTML und XHTML fast vollständig auf die reine Strukturierung der Seite, während das Layout gänzlich Stylesheets übertragen wird.

57

2 Die Welt von AJAX – zentrale Grundlagen

Hinweis Bei moderner Textauszeichnung von Webseiten greift man auf Regeln zurück, die schon ganz am Anfang des WWW eingeführt wurden, dann aber lange als rückständig galten. Am Anfang hat man im WWW zur Textauszeichnung meist sogenannte logische Beschreibungsanweisungen verwendet. Logische Hervorhebungen von Texten waren bei nichtgrafischen Oberflächen und darunter laufenden Browsern notwendig, da diese fette und kursive Zeichen nicht anzeigen konnten. Bei logischen Befehlen zur Textformatierung entscheidet der Browser, wie ein Text hervorgehoben wird. Im Zusammenhang mit CSS schätzt man, dass diese Auszeichnungen keine feste optische HTML-Eigenwirkung haben. Stylesheets stellen einmal den – mehr oder weniger erfolgreich umgesetzten – Versuch dar, den unterschiedlichen Interpretationen von Webseiten auf verschiedenen Plattformen einen Riegel vorzuschieben. Über Stylesheets können Sie in Formatregeln das Layout von Webseiten viel genauer als mit HTML festgelegen. Aber dies ist im Grunde nur ein Nebenprodukt. Stylesheets eröffnen die Möglichkeit, das Vermischen von Gestaltungsbefehlen und Informationsträgern aufzuheben. Es kann eine klare Trennung von Struktur und Layout erreicht werden. Und Sie können mittels JavaScript und Stylesheets eben auch gezielt Layout- oder Positionseigenschaften eines Elements der Webseite verändern, nachdem sie bereits in den Browser geladen wurde.

CSS – die Standardsprache des Webs Stylesheets bezeichnen keine eigene Sprache, sondern nur ein Konzept. Und es gibt nicht nur eine einzige Stylesheet-Sprache, sondern diverse Ansätze bzw. verschiedene Sprachen. Die genauen Regeln und die syntaktischen Elemente für die Stylesheets werden je nach verwendeter Sprache etwas differieren, aber oft ähnlich aussehen. Im Web kommen derzeit hauptsächlich die sogenannten CSS (Cascading Style Sheets) zum Einsatz. Allgemein liegen bei einer Anwendung von Stylesheets Daten in einer Rohform oder einer nicht gewünschten Darstellungsweise vor, die auf spezifische Weise verändert werden soll. Die Darstellung der Daten erfolgt dann in einer anderen Form, wobei die Informationen selbst meist erhalten bleiben. Unter Umständen werden allerdings im Ausgabedokument Daten der Quelle unterdrückt und/oder durch Zusatzdaten ergänzt. Die Beschreibung der Transformation bzw. Formatierung erfolgt in der Regel in Form einer externen Datei, kann aber auch in einigen Situationen direkt in die Datei mit den Daten notiert werden (etwa eine Webseite). Stylesheets geben vorhandenen Informationen also einfach ein neues Aussehen. Dazu werden die Daten und die Formatierungsinformationen von einem interpretierenden System zu einer neuen Darstellung verarbeitet.

58

2.2 Die Kerntechniken von AJAX

Stilregeln können in Webseiten im Grunde auf beliebige HTML- beziehungsweise XHTML-Elemente angewendet werden. Es gibt jedoch einige Elemente, die sich besonders nachdrücklich für die Anwendung von Stylesheets eignen und manchmal sogar ihren einzigen Nutzen daraus beziehen, dass sie mit Stylesheets formatiert werden. Hinweis Im Anhang finden Sie verschiedene ergänzende Ausführungen zu CSS sowie Angaben, wie Sie Stylesheets in einer Webseite einbinden und verwenden können.

2.2.6

XML

In den letzten Jahren gewann XML (Extensible Markup Language) mehr und mehr an Bedeutung – im allgemeinen Datenaustausch, im Datenbankumfeld, zur Konfiguration von Programmen, zur Speicherung von Programmeinstellungen, aber auch im Rahmen des WWW. Viele Sprachen rund um das WWW sind aus XML entwickelt worden und jeder moderne Browser kann direkt XML-Daten anzeigen. Wenn Sie die XML-Daten dann auch noch mit Stylesheets formatieren, kann XML sogar wie gewöhnliches HTML zum Aufbau einer Webseite verwendet werden, obgleich dies beileibe nicht die Hauptaufgabe von XML darstellt und in der Praxis derzeit so kaum gemacht wird. Und XML ist natürlich im Zusammenhang mit AJAX immens wichtig. Hier scheint ja das X in der Abkürzung AJAX eine zwingende Verbindung zu XML zu bedeuten. Zwar ist das explizit nicht der Fall,17 denn durch die sehr unterschiedliche Behandlung von XML durch verschiedene Browser ist es derzeit oft besser, zum Client statt XML bereits aufbereitete (X)HTML-Fragmente, JSON oder Klartext zu schicken. Das ändert nichts daran, dass die Möglichkeiten von XML natürlich viele Perspektiven im Client eröffnen, die bei einer zuverlässigen Unterstützung in kommenden BrowserGenerationen immer wichtiger werden. Mit anderen Worten – XML ist nicht zwingend, aber sehr oft sinnvoll und zukunftsorientiert. Dies betrifft sowohl das Format für die Daten, die zwischen Server und Client ausgetauscht werden, als auch die Navigation auf den Daten im Client.

Die Struktur von XML-Dokumenten XML-Dokumente sind im Grunde reiner Klartext, der mit jedem Klartexteditor erstellt werden kann. Sie liegen aber immer in Form einer Baumstruktur vor und müssen strengen Regeln genügen. 17 Sie müssen kein XML zum Datenaustausch bei einer AJAX-Applikation verwenden.

59

2 Die Welt von AJAX – zentrale Grundlagen

Tipp Für die Erstellung von XML-Dokumenten bieten sich XML-Editoren an. Auch für Eclipse gibt es diverse Plug-ins zum Umgang mit XML.

Abbildung 2.4: Ein XML-Dokument in einem XML-Editor – hier ein Eclipse-Plug-in Auf einem XML-Baum ist eine Navigation zu den einzelnen Zweigen des Baums möglich. Dabei ist XML im Grunde wie HTML oder XHTML erst einmal nur eine Auszeichnungssprache (Markup Language), um über die Textinformation hinaus eine Struktur der Information zu bieten. Die in einem Dokument enthaltenen Informationen werden dazu durch Tags strukturiert, die wie in HTML auch unter XML in spitzen Klammern notiert werden.

60

2.2 Die Kerntechniken von AJAX

XML-Elemente Sogenannte Komponenten bilden die Bausteine eines XML-Dokuments. Die Grundstruktur eines XML-Dokuments besteht dabei aus Elementen, die – sofern sie nicht eingeschränkt werden – selbst Unterelemente enthalten können und die wichtigste Form von Komponenten darstellen. Elemente selbst sind so aufgebaut, wie man es im Wesentlichen von HTML kennt. Es gibt wie dort ein Anfangs-Tag und ein Ende-Tag, das hinter einem Slash den Bezeichner wiederholt – es sei denn, ein Tag wird als leeres Element gekennzeichnet. Die Elemente in XML sind im Gegensatz zu HTML oder XHTML aber nicht vorgegeben. Es gibt keinen vorgefertigten, beschränkten Sprachschatz an Elementen. Mit anderen Worten – es gibt keine vorgegebenen XML-Tags in dem Sinne, wie die meisten Anwender HTML-Tags kennen. Es existieren also keine Tags wie oder mit einer festen Bedeutung. Beispiel: Listing 2.5: Schema eines XML-Elements ...

Eventuell im Anfangs-Tag notierte Attribute werden auf keinen Fall im Ende-Tag wiederholt. Im Inneren des Elements kann – sofern nicht besondere Regeln vorgegeben sind – beliebiger Inhalt notiert werden. Das können weitere Elemente oder Text sein. Auch gemischte Formen sind erlaubt. XML erlaubt die Deklaration von leeren Elementen. Diese werden meist in Verbindung mit Attributen verwendet. Ein leeres Element wird mit einem Slash am Ende gekennzeichnet. Beispiel: Listing 2.6: Ein leeres Element

Zwischen dem Slash und dem Bezeichner darf ein Leerzeichen notiert werden. Diese Schreibweise wird sogar vom W3C empfohlen. Alternativ können Sie auch direkt nach dem Beginn-Tag das Ende-Tag notieren. Dabei darf aber nicht einmal ein Leerzeichen im Container stehen. Listing 2.7: Eine alternative Schreibweise für ein leeres Element

61

2 Die Welt von AJAX – zentrale Grundlagen

Hier wäre ein Beispiel einer vollständigen XML-Datei (trainings.xml): Listing 2.8: Eine vollständige XML-Datei 01 02 03 04 JavaScript - Video-Training 05 Einstieg für Anspruchsvolle 06 März 2007 07 http://www.video2brain.com/de/products-109.htm 08 DVD 09 10 11 JavaFX - Video-Training 12 Einstieg in JavaFX und JavaFX Script 13 April 2008 14 http://www.video2brain.com/de/products-223.htm 15 DVD 16 17 18 HTML und CSS - Online-Training 19

20 Mai 2008 21

22 Online 23 24 25 JavaScript - Online-Training 26

27 Mai 2008 28

29 Online 30 31 32 AJAX - Video-Training 33

34 Juni 2008 35

36 DVD 37 38 39 Eclipse - Video-Training 40

41 Juli 2008 42

43 DVD 44 45

62

2.2 Die Kerntechniken von AJAX

Im Gegensatz zu HTML oder XHTML, die auch über eine solche Semantik verfügen und neben jedem Tag auch dessen Bedeutung beschreiben, besteht XML lediglich aus einer Beschreibung der Syntax für Elemente und Strukturen. Damit ist XML freilich beliebig erweiterbar. Die XML-Spezifikation beschreibt lediglich, nach welchen Regeln Sie Elemente zu definieren haben. Die Festlegung der Elemente machen Sie selbst. Daher kann ein Leser oder Parser (zum Beispiel ein Webbrowser) die Bedeutung eines Elements aber auch nicht aus dem Kontext oder einer vorgegebenen Liste erschließen. Für einen konkreten Anwendungsfall (die Interpretation eines XMLDokuments) müssen sämtliche relevanten Details spezifiziert werden. Dies betrifft insbesondere die Festlegung der Strukturelemente und ihre Anordnung innerhalb des Dokumentenbaums. Im Gegensatz zu HTML ist XML syntaktisch eine sehr strenge Sprache, bei der es kein Prinzip der Fehlertoleranz gibt. Die XML-Spezifikation ist streng formal und lässt keine Ausnahmen und unklaren Strukturen zu. Dadurch ist XML jedoch einfach und automatisiert zu validieren. XML beschreibt nur wenige einfache, aber eben sehr strenge und absolut eindeutige Regeln, nach denen ein Dokument zusammengesetzt sein kann. Auch die Zielrichtung von XML und HTML beziehungsweise XHTML ist unterschiedlich. HTML und XHTML sind auf das Design von Webseiten hin optimiert, während ein zentraler Aspekt von XML die Trennung von Daten und ihrer Darstellung ist. Und nicht zuletzt kann man mit XML eine neue Sprache definieren. Diese muss dann alle Regeln einhalten, die für XML gelten. Eine solche Sprache definieren Sie, indem Sie Elemente einführen und eine Grammatik festlegen, wie diese Elemente zu verwenden sind. Genau so ist beispielsweise XHTML entstanden.

Die Anzeige von XML-Dokumenten Natürlich können Sie ein XML-Dokument in jedem Klartexteditor ansehen,18 aber eine interpretierte Darstellung der Struktur ist meist aussagekräftiger. Für so eine strukturelle Anzeige von XML-Dokumenten können Sie nahezu jeden neueren Webbrowser verwenden. Die meisten modernen Browser stellen die Struktur einer XMLDatei in Form eines Baums dar. Dabei erfolgt die Darstellung der verschiedenen Ebenen im Elementbaum entweder kollabiert (mit einem Pluszeichen, das dem Element vorangestellt ist) oder expandiert (mit einem Minuszeichen).

18 Damit kann es ja auch erstellt werden.

63

2 Die Welt von AJAX – zentrale Grundlagen

Abbildung 2.5: Darstellung einer XML-Datei in einem Browser

64

2.2 Die Kerntechniken von AJAX

Das Plus- und das Minuszeichen im Rahmen der Webseite sind sensitiv. Das bedeutet, wenn Sie es anklicken, wird der Zustand umgeschaltet. Ein kollabiertes Element wird expandiert und ein expandiertes Element kollabiert.

Abbildung 2.6: Außer dem Wurzelelement ist der Baum kollabiert. Die optische Darstellung der Baumstruktur wird mittels innerer Standard-CSS vom jeweiligen Webbrowser umgesetzt. Hinweis Sie können mit dem Firefox-Add-on Firebug sehr gut die Umsetzung der optischen Darstellung einer XML-Seite in eine Darstellung aus HTML und CSS erkennen.

Hinweis Sofern explizit eine Stylesheet-Datei mit dem XML-Dokument verknüpft ist, kann auch eine andere Darstellung der XML-Datei erfolgen. Dann wird von den meisten Browsern keine Baumdarstellung mehr gewählt.

65

2 Die Welt von AJAX – zentrale Grundlagen

Abbildung 2.7: Firebug zeigt, was wirklich hinter der optischen Darstellung der XML-Datei im Browser steckt. Tipp Im Anhang finden Sie noch einige ergänzende Ausführungen zur Syntax von XML.

2.2.7

JSON

Für den Datenaustausch in AJAX setzt sich mehr und mehr ein Datenformat mit Namen JSON (JavaScript Object Notation) als Alternative zu Klartext respektive HTML, was dann im Client nur noch dargestellt wird, oder XML, was Sie im Client weiterverarbeiten können, durch. JSON ist ein maschinenlesbares Klartextformat, das recht neu ist und trotz des Token JavaScript im Namen keinesfalls auf JavaScript beschränkt ist. Das Format ist zwar als Untermenge von JavaScript entwickelt wor-

66

2.2 Die Kerntechniken von AJAX

den, aber die vorhandenen Strukturen findet man so auch in Java und damit eigentlich in allen C-basierten Sprachen. Und es gibt zahlreiche Sprachenimplementierungen zur Verarbeitung von JSON. JSON ist zwar bedeutend weniger flexibel als etwa XML, aber damit viel kompakter und leichter sowie zuverlässiger zu verarbeiten. Mit JSON steht Ihnen eine Alternative zur Verfügung, die einerseits eine Struktur in das Übertragungsformat packt, andererseits aber einfacher wie XML ist und vor allen Dingen in verschiedenen Webbrowsern viel konsistenter verarbeitet wird. JSON beinhaltet direkte Datenstrukturen bzw. Datentypen (Objekte, Arrays, Zeichenketten, Zahlen, die booleschen Werte true und false sowie den Wert null), die verschachtelt und beliebig durch Leerzeichen und andere Whitespace-Zeichen strukturiert werden können. Das Konzept von JSON baut im Kern auf zwei zentralen Strukturen auf:  Name/Wert-Paare. Solche Kombinationen findet man in fast allen modernen

Skript- und Programmiersprachen. Sie werden dann meist als Objekt (object), Satz (record), Struktur (struct), Wörterbuch bzw. Verzeichnis (dictionary), Hash-Tabelle (hash table), Schlüsselliste (keyed list) oder als ein assoziatives Array (associative array) implementiert. Oft findet man auch mehrere solcher Konstrukte in einer Sprache.  Geordnete Werteliste. Auch solche Listen findet man in den meisten gängigen

Sprachen. Die Implementierung erfolgt je nach Programmiersprache über Arrays (array), Vektoren (vector), Listen (list), Sequenzen (sequence) oder mehrere solcher Strukturen. Beim Grundkonzept von JSON handelt es sich also um die Beschreibung von universellen Datenstrukturen, die von so gut wie allen modernen Programmiersprachen in der einen oder anderen Form unterstützt werden. Mit JSON steht damit ein Datenformat zum Austausch zwischen Programmiersprachen zur Verfügung, das auf diesen Strukturen aufbaut und insbesondere von diversen Programmiersprachen unmittelbar verarbeitet werden kann. Es ist mehr als naheliegend, sich beim Datenaustausch per AJAX auf so eine universelle Struktur zu verlassen, wenn man Logik rein über das Datenformat zum Client übermitteln möchte. Die konkrete Syntax von Formatdefinitionen ist in JSON an JavaScript angelehnt, wobei es keine Bezeichner für Objekte oder Datenfelder gibt.19  Eine Objektdefinition beginnt mit der geschweiften Klammer { und endet mit der geschweiften Klammer }. So ein Objektblock kann eine durch Kommas separierte,

ungeordnete Liste von Eigenschaften enthalten.  Eine Eigenschaft wiederum besteht aus einem Schlüssel und einem Wert. Beide

werden durch einen Doppelpunkt getrennt. Der Schlüssel ist dabei eine Zeichenkette und der zugehörige Wert ist ein beliebiger Datentyp (ein Objekt, ein Array, eine Zeichenkette, eine Zahl oder einer der Ausdrücke true, false oder null). 19 Wie bei anonymen Klassen in Java.

67

2 Die Welt von AJAX – zentrale Grundlagen

 Ein Array in JSON beginnt mit der eckigen Klammer [ und endet mit der eckigen Klammer ]. Auch ein Array kann eine durch Kommata separierte, hier aber geord-

nete, Liste von Werten enthalten.  Eine Zeichenkette in JSON beginnt und endet wie üblich mit den doppelten Anführungszeichen ". Sie kann beliebige Unicode-Zeichen und Escape-Sequenzen enthal-

ten. Eine Zeichenkette in JSON ist einer Zeichenkette in C oder Java sehr ähnlich.  Eine Zahl ist einfach eine Folge der Ziffern 0–9. Dabei kann man Vorzeichen und Dezimalpunkte sowie einen Exponenten über e oder E verwenden. Auch eine Zahl in

JSON ist einer Zahl in C oder Java ähnlich. Es gibt aber einen wesentlichen Unterschied. In JSON kann keine oktale oder hexadezimale Darstellung verwendet werden.  Ein boolescher Wert wird wie üblich durch die Ausdrücke true bzw. false reprä-

sentiert. Nachfolgend finden Sie ein Beispiel für ein vollständiges JSON-Dokument: Listing 2.9: Ein vollständiges Dokument im JSON-Format 01 { 02 "Name" : "Steyer", 03 "Vornamen" : { 04 "VName1" : "Ralph", 05 "VName2" : "Jürgen", 06 "VName3" : null 07 }, 08 "Webseiten" : [ 09 "www.rjs.de", 10 "rjsedv.blogspot.com", 11 "haudichraus.blogspot.com", 12 "www.ajax-net.de", 13 "www.javafx.cc", 14 "www.safety-first.de.vu " 15 ] 16 }

Das Schöne an JSON ist, dass die Sprache wirklich einfach ist. Mit Ausnahme weniger Details zur Kodierung ist mit dem oben Gesagten bereits die gesamte Sprache beschrieben. Weitere Informationen finden Sie bei Bedarf unter http://json.org/json-de.html. Hinweis Wir werden im nächsten Abschnitt die Verarbeitung von JSON im Browser an Hand einer vollständigen AJAX-Anfrage sehen.

68

2.3 Come together right now – AJAX

2.3

Come together right now – AJAX

Schauen wir uns nun an, wie die bisher besprochenen Grundlagentechnologien im Rahmen von AJAX zusammenspielen. Dazu müssen wir zuerst noch einen genaueren Blick auf das Dienstprotokoll HTTP (HyperText Transfer Protocol) werfen, über das im WWW grundsätzlich die Kommunikation zwischen einem Webbrowser und einem Webserver erfolgt. Es ist schnell, einfach und zuverlässig. Auf der anderen Seite ist HTTP jedoch zustandslos, was die Verfolgung von Sitzungen und die ressourcenschonende Nachforderung von Daten erschwert.

2.3.1

Datenübertragung per HTTP

Sowohl beim -Tag eines Webformulars in HTML bzw. XHTML und dem dort vorkommenden method-Parameter als auch direkt unter AJAX legen Sie für die Datenübertragung per HTTP die genaue Art und Weise fest, wie die eingegebenen Daten zum Server gelangen und dort zu behandeln sind. Dabei wird gewöhnlich einer von den nachfolgenden zwei20 Werten verwendet:  GET  POST

Diese beiden Angaben spezifizieren unterschiedliche Möglichkeiten, mit HTTP Daten vom Client zum Server zu schicken. HTTP ist wie gesagt ein zustandsloses und transaktionsorientiertes Protokoll. Das bedeutet, zu jeder Anfrage eines Clients (der sogenannte Request) wird vom Empfänger (dem Webserver) genau eine Antwort (englisch: Response) generiert. Ein solcher HTTP-Request wird zum Beispiel von einem Webbrowser generiert, wenn Anwender einen URL in die Adresszeile des Browsers eingegeben oder auf einen Hyperlink in der Webseite geklickt haben. Ist die Anfrage erfolgreich, dann enthält die Antwort des Servers die angefragte Ressource zur Darstellung. Bei einer klassischen Webseite ohne Anwenderinteraktion ist der Frage-Antwort-Zyklus damit beendet. Ein solcher Zyklus läuft aber ebenso ab, wenn Benutzereingaben in einem HTMLFormular durch den Client abgeschickt werden oder auch per AJAX Daten vom Server angefordert werden. Und das soll dann ja im Fall von AJAX möglicherweise unbemerkt vom Anwender erfolgen.

20 Es gibt noch weitere Methoden, die aber in AJAX nur eine geringe bis gar keine Rolle spielen.

69

2 Die Welt von AJAX – zentrale Grundlagen

Hinweis Die sogenannten HTTP-Header (HTTP Request Header für die Anfrage und HTTP Response Header für die Antwort) werden dabei in Environment-Variablen (Umgebungsvariablen) auf dem Server übertragen. Diese Header-Informationen bestehen aus reinem Klartext.

Bevor die Daten vom Client an den Webserver gesendet werden, werden sie zunächst vom Browser zu einer einzigen Zeichenkette verpackt. Und die Art und Weise der weiteren Behandlung kann durch die Angabe von GET oder POST21 gesteuert werden. Bei der GET-Methode werden die Daten vor dem Versenden zusammen an das Ziel der Datenübertragung (den URL) angehängt, wobei die Daten durch ein ? von dem ursprünglichen URL abgetrennt werden. Diesen entstehenden Pseudo-URL sieht ein Anwender nach dem Abschicken eines Formulars im Adressfeld des Browsers.

Abbildung 2.8: Den Pseudo-URL kann man beim Versenden von Daten mit der GET-Methode in der Adresszeile des Browsers sehen. Tipp So einen Pseudo-URL können Sie natürlich auch manuell im Adressfeld des Browsers eingeben oder in einem Hyperlink aufrufen.

Bei POST werden die Daten in einem HTTP-Header-Feld versendet. Unabhängig22 von der verwendeten Versandmethode wertet das empfangende Programm beziehungsweise Skript auf dem Server den Inhalt dieser Umgebungsvariablen aus, wobei einige Arbeit zu leisten ist.

21 Und wie gesagt noch einigen weiteren Werten, die wir hier nicht verfolgen, da sie für AJAX nicht von Bedeutung sind. 22 Wenngleich meist mit verschiedenen serverseitigen Techniken. PHP verwendet neben einer universellen Technik zur Entgegennahme etwa $_POST zur gezielten (und ausschließlichen) Verarbeitung von POST-Anfragen und entsprechend $_GET für GET-Anfragen.

70

2.3 Come together right now – AJAX

Die URL-Kodierung Der Pseudo-URL mit der Übergabe von Werten an ein Skript beziehungsweise Programm beinhaltet die Zeichen der Benutzereingabe nicht unverändert. Bei der Generierung der Pseudo-URLs wird in der Regel der Prozess der URL-Kodierung durchlaufen, was beim Versenden von Formulardaten automatisch erfolgt. Diese URL-Kodierung erfolgt hauptsächlich, damit bei der Übertragung von Sonderzeichen über das Internet/Intranet keine Probleme entstehen. Dabei werden alle Leerzeichen in dem String, der aus den Benutzereingaben zusammengesetzt wird, durch Pluszeichen ersetzt. Zusätzlich werden sämtliche reservierte Zeichen, die ein Benutzer beispielsweise im Formular eingegeben hat (etwa das Gleichheitszeichen und natürlich auch das Pluszeichen oder das kaufmännische Und), in hexadezimale Äquivalente konvertiert. Ein so konvertiertes Zeichen wird jeweils mit dem Prozentzeichen eingeleitet. Danach folgt der Hexadezimalcode. Hinweis In dem String des Pseudo-URL können also weder das Gleichheitszeichen, das Prozentzeichen, das Fragezeichen, das Pluszeichen noch das kaufmännische Und (Ampersand) durch Benutzereingaben vorkommen. Aber auch zahlreiche andere Zeichen wie deutsche Umlaute oder das ß werden verschlüsselt.

Wenn die Daten an ein auswertendes Skript beziehungsweise Programm auf dem Server übermittelt werden, kommen alle Daten als ein Satz von Name-Wert-Paaren an. Der Name repräsentiert eine Variable, die beispielsweise über ein entsprechendes Tag in der HTML-Seite festgelegt wurde. Die Werte sind das, was die Variable für einen Wert an den Server übermitteln soll. Das kann z.B. eine Anwendereingabe sein. Dieser Satz von Name-Wert-Paaren wird in einem Teilstring der URLs übermittelt, den ein Webskript wieder auflösen muss. Ein solcher String ist ungefähr so aufgebaut: Listing 2.10: Der Teilstring mit zwei Wertepaaren user=admin&passwort=geheim

Der String mit den Wertepaaren muss vom auswertenden Skript beziehungsweise Programm beim kaufmännischen UND (&) sowie dem Gleichheitszeichen (=) in einzelne Stücke zerlegt werden. Die entstandenen Teilstücke müssen dann noch dekodiert werden.

71

2 Die Welt von AJAX – zentrale Grundlagen

Achtung Beim manuellen Versenden von Daten per AJAX wird die URLKodierung vom Browser respektive dem AJAX-Kommunikationsobjekt nicht automatisch durchgeführt. Sie müssen sie von Hand erledigen. Hier erleichtern AJAX-Frameworks die Arbeit erheblich, denn es gibt teilweise – eigentlich kaum zu erwartende – Probleme bei der Kodierung und Dekodierung, wenn bestimmte Webbrowser und Webserver miteinander Daten austauschen und Sie manuelle Kodierungen vornehmen. So bequem GET ist – in vielen Fällen kann es angebracht sein, auf POST zurückzugreifen. Die Länge des Pseudo-URL ist beschränkt und natürlich möchte man nicht immer die übertragenen Werte für jedermann sichtbar in der Adresszeile des Browsers anzeigen. Wenn Sie beim Versenden von Daten die Methode POST verwenden, werden die zu verschickenden Daten in eine Umgebungsvariable gepackt, die im HTTP-Rumpf versteckt ist. Für eine AJAX-Anfrage verwendet man dennoch meistens GET, denn hier ist in der Adresszeile des Browsers grundsätzlich nichts zu sehen ist (die Kommunikation läuft ja explizit am Browser vorbei) und die Menge der ausgetauschten Daten ist pro Anfrage fast immer sehr, sehr klein.23

HTTP-Interna Derzeit gibt es von HTTP zwei Versionen – HTTP/1.0 und HTTP/1.1. Wesentlicher Unterschied ist, dass bei HTTP/1.1 bei Bedarf im Gegensatz zur Version 1.0 mehrere Anfragen und Antworten in einer einzigen TCP-Verbindung gesendet und abgebrochene Übertragungen fortgesetzt werden können. Zudem lassen sich Dateien vom Client zum Server übertragen oder dort auch löschen. Für die konkrete Arbeit mit AJAX ist das allerdings meist irrelevant. Hinweis HTTP arbeitet normalerweise auf dem Standard-Port 80.

23 Oft sogar nur ein Zeichen (etwa bei Google suggest und verwandten Angeboten). Man kann bei einer AJAX-Anfrage zwar theoretisch auch große Datenmengen zum Server schicken, aber dann hebelt man den eigentlichen Sinn von AJAX aus und sollte besser eine klassische Datenanfrage zum Server schicken.

72

2.3 Come together right now – AJAX

Bei einem typischen HTTP-Request durch einen Client besteht die gesamte Anfrage ausschließlich aus dem HTTP-Header. Schauen wir uns so einen typischen HTTPRequest exemplarisch an: Listing 2.11: Ein HTTP-Request an Google mit einer Suchanfrage 01 http://www.google.de/search? hl=de&client=firefox-a&rls=org.mozilla%3Ade%3Aofficial&hs=WMn& q=ralph+steyer&btnG=Suche&meta= 02 03 GET /search? hl=de&client=firefox-a&rls=org.mozilla%3Ade%3Aofficial&hs=WMn& q=ralph+steyer&btnG=Suche&meta= HTTP/1.1 04 Host: www.google.de 05 User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.8.1.14) Gecko/20080404 Firefox/2.0.0.14 06 Accept: text/xml,application/xml,application/xhtml+xml, text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5 07 Accept-Language: de-de,de;q=0.8,en-us;q=0.5,en;q=0.3 08 Accept-Encoding: gzip,deflate 09 Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 10 Keep-Alive: 300 11 Connection: keep-alive 12 Referer: http://www.google.de/search? q=ralph+steyer&ie=utf-8&oe=utf-8&aq=t& rls=org.mozilla:de:official&client=firefox-a 13 Cookie: SS=Q0=cmFscGggc3RleWVy; PREF=ID=963386b28a21f438:TM=1208512520: LM=1208512520:S=agQkQca7ypGmdKYF

Deutlich sind in Zeile 1 ein URL und in Zeile 3 die Methode der Datenanforderung (hier GET) und die Protokollversion (hier HTTP 1.1) zu erkennen. Auf die Startzeile des Requests folgen eine Reihe von Feldern in mehr oder weniger beliebiger Reihenfolge, die die Anfrage genauer beschreiben. Jedes Header-Feld besteht aus einem Namen und einem Wert. Das Wertepaar wird durch einen Doppelpunkt voneinander getrennt. Die Werte gleichnamiger Header-Felder können in einem Header zusammengefasst werden, indem sie mit einem Komma getrennt werden. Tipp Zur Auswertung der HTTP-Header bieten sich sogenannte Sniffer an. Für Firefox gibt es zum Beispiel ein entsprechendes Plug-in mit Namen HTTP Live Headers, das ganz hervorragende Dienste leistet.

73

2 Die Welt von AJAX – zentrale Grundlagen

Bei der Antwort des Webservers (der HTTP-Response) wird neben den HeaderInformationen, die wie die vom Request aussehen und oftmals gleich benutzt werden, der tatsächliche Inhalt als Nutzlast transportiert. Das sind dann Teile der Datei, die ein Client vom Webserver angefordert hat. Tipp Im Anhang finden Sie eine Tabelle mit den Meldungen eines Webservers.

2425

Tipp Wenn Sie mit einem lokalen Webserver arbeiten,24 steht Ihnen dieser nach dem Start über die Angabe von localhost zur Verfügung, wenn Sie ihn auf dem gleichen Rechner laufen lassen wie Ihren Webbrowser. Diese Angabe localhost ist ein Alias für den aktuellen Rechner. Sie nennt man auch die Loopback-Adresse. Damit können Sie auf Ihren eigenen Rechner so zugreifen, als würden Sie dies über ein Netzwerk tun. Sie benötigen dazu nicht einmal eine Netzwerkkarte. Als IPAdresse für Loopback steht die 127.0.0.1 (oder genauer eigentlich alle IP-Nummern, die mit 127.0.0 beginnen) zur Verfügung. Das Bereitstellen von Daten über den Webserver erfolgt bei allen Webservern über ein spezielles Verzeichnis.25 Dieses ist das Wurzelverzeichnis aller Zugriffe über den Webserver. Oder mit anderen Worten: Wenn ein Anwender die Adresse des Webservers ohne weitere Verzeichnis- oder Dateiangaben angibt, bekommt er den Inhalt dieses Verzeichnisses beziehungsweise die Default-Datei darin angezeigt. Wurzelverzeichnis eines Webservers bedeutet aber auch, dass sämtliche Verzeichnisangaben beim Zugriff aus einem Browser auf einem Host ab diesem Verzeichnis aus gesehen werden. Der Webserver darf in der Regel keinesfalls Zugang zu Verzeichnisstrukturen bieten, die nicht innerhalb des Wurzelverzeichnisses liegen.

24 Was für einen Test von AJAX-Applikationen ja fast unumgänglich ist. 25 Unter Apache in der Regel über das Unterverzeichnis htdocs.

74

2.3 Come together right now – AJAX

2.3.2

Details zum XMLHttpRequest-Objekt

AJAX hätte im Grunde als eine Erweiterung des JavaScript-Objektmodells eingeführt werden können. Mit so einer banalen Marketingstrategie wäre meiner Meinung nach das Konzept zwar niemals so erfolgreich wie mit dem Buzzword AJAX geworden. Aber rein vom Konzept her könnte man AJAX so beschreiben. Moderne Browser bieten nun mit dem als Erweiterung aufgenommenen Objekt XMLHttpRequest eine eingebaute Schnittstelle zur Kontrolle von HTTP-Transaktionen aus clientseitigen Programmiersprachen (hauptsächlich JavaScript), die unabhängig von der »normalen« Datenanforderung des Webbrowsers ablaufen. Diese XMLHttpRequest-Objekte sind damit unmittelbar am internen Aufbau von HTTP orientiert und bilden das Rückgrat jeder AJAX-Anfrage. Und sie werden in allen Frameworks und Toolkits, die sich mit dem Titel AJAX schmücken, in irgendeiner Form zur Verfügung gestellt. Für die asynchrone Kommunikation zwischen Browser und Webserver erlaubt das Objekt mit Funktionsreferenzen die Registrierung von sogenannten Callback-Funktionen, die bei jeder Änderung des Transaktionszustands ausgewertet werden. Zudem kann über ein XMLHttpRequest-Objekt auf alle HTTP-Header-Felder sowohl von einer AJAX-Anfrage als auch von einer AJAX-Antwort zugegriffen werden.

Ein XMLHttpRequest-Objekt erzeugen Um mit einem XMLHttpRequest-Objekt arbeiten zu können, muss dieses entsprechend der Regel der eingesetzten Programmiersprache erzeugt werden. Dies erfolgt in JavaScript über den Einsatz einer passenden Konstruktormethode. Ein Objekt vom Typ XMLHttpRequest stellt dann alle relevanten Methoden und Eigenschaften zur asynchronen Kommunikation per AJAX bereit. Dabei können auf Basis der üblichen Übertragungsmethoden (in der Praxis POST bzw. meistens GET) Daten verschickt und Antworten empfangen sowie der Request-Header gesetzt und ausgewertet werden. Beachten Sie, dass mit AJAX-Anfragen aus Sicherheitsgründen in der Regel nur Daten von der gleichen Domain angefordert werden dürfen, von der die anfordernde Webseite stammt. Das ist ein oft zu findendes Sandkastenprinzip (Sandbox). Nun kann man mit JavaScript innerhalb eines Browsers ein Objekt vom Typ XMLHttpRequest auf verschiedene Arten erzeugen. Es gibt einmal den Weg über die

Erzeugung eines ActiveX-Objekts. Das macht Microsoft im Rahmen der älteren Internet Explorer so. Und hier gibt es auch keine Alternative. Beispiel: Listing 2.12: Ein Beispiel für das Erzeugen eines XMLHttpRequest-Objekts für den Internet Explorer mit dem ActiveXObject-Konstruktor resObjekt = new ActiveXObject("MSXML2.XMLHTTP");

75

2 Die Welt von AJAX – zentrale Grundlagen

Leider gibt es hierbei aber verschiedene Werte für den Parameter des Konstruktors, die je nach zugrunde liegender Plattform ausgewählt werden müssen. Und bekanntlich unterstützt aus Sicherheitsgründen sowieso kein anderer Browser als der Internet Explorer ActiveX. Deshalb muss in diesen Fällen die Erstellung über eine andere Syntax erfolgen, die mittlerweile aber auch neuere Versionen vom Internet Explorer alternativ unterstützen. Beispiel: Listing 2.13: Erzeugen eines XMLHttpRequest-Objekts für alle anderen Browser mit einem anderen Konstruktor resObjekt = new XMLHttpRequest();

Eine automatische Unterscheidung zwischen den verschiedenen Wegen zur Erzeugung des Kommunikationsobjekts kann man in einem Skript nun mehr schlecht als recht mit einer sogenannten Browser-Weiche lösen, die verschiedene Browser automatisch trennt. Nur sind Browser-Weichen zum einen ziemlich unzuverlässig und zum anderen recht komplex, wenn man viele Details26 in Kombination überprüfen will oder muss. Definitiv eleganter und auch praxistauglicher ist der Aufbau einer universellen Vorgehensweise zum Erzeugen eines Objekts vom Typ XMLHttpRequest über eine Ausnahmebehandlung (Exceptionhandling). Dies bedeutet die Verwendung eines universellen Konzepts, das es gestattet, mit diversen Situationen umzugehen, die den normalen Ablauf eines Skripts oder Programms stören. Dies sind keine Fehler im eigentlichen Sinne, sondern allgemein Situationen zur Laufzeit eines Programms oder Skripts, die eine unmittelbare Reaktion erzwingen. Andernfalls kann das Programm/Skript nicht sinnvoll weiter ausgeführt werden und muss in der Regel beendet werden. Unter Umständen helfen aber geeignete und standardisiert vorzubereitende Gegenmaßnahmen, um das Skript oder Programm am Leben zu halten und sinnvoll weiter abarbeiten zu können! Und genau hier greift die Ausnahmebehandlung ein. Grundsätzlich setzt eine Ausnahmebehandlung auf einem Mitteilungsobjekt auf, das vom Laufzeitsystem von JavaScript bei Bedarf automatisch generiert wird und sowohl den normalen Skriptablauf unterbricht als auch Informationen über die aktuelle Störung enthält. Der ausführende Interpreter wird zudem veranlasst, nach einer geeigneten Behandlungsstruktur zu suchen.

26 Browser-Typ, Browser-Version, Betriebssystem etc.

76

2.3 Come together right now – AJAX

Hinweis Das Konzept der Ausnahmebehandlung wurde in JavaScript in der Version 1.4 respektive 1.5 eingeführt. Alle modernen Browser unterstützen es mittlerweile, auf jeden Fall diejenigen Browser, die für die Frameworks und Toolkits in diesem Buch vorausgesetzt werden.

Wenn eine Ausnahme in Ihrem JavaScript aufgetreten ist, müssen Sie also darauf reagieren. Das nennt man das Auffangen der Ausnahme. Um nun eine in einer Sprache wie Java, C# oder auch JavaScript ausgeworfene Ausnahme behandeln zu können, umgibt man den Aufruf einer Methode oder Struktur, die möglicherweise eine Ausnahme auswirft, mit einer try-catch-Struktur. Das sieht schematisch wie folgt aus:27 Listing 2.14: Das Schema einer abgefangenen potenziellen Ausnahme try{ [kritische Anweisung] } catch ([Ausdruck]) { [Maßnahmen für den Ausnahmefall] }

Der Ausdruck in den Klammern des catch-Zweigs ist der Bezeichner für das konkrete Fehlerobjekt. Im catch-Zweig selbst stehen innerhalb geschweifter Klammern einfach die Anweisungen, die beim Auftreten der Ausnahme durchgeführt werden sollen. Wenn ein Problem auftauchen sollte (sprich, es wird eine Ausnahme ausgeworfen), wird dieses sofort entsprechend im passenden catch-Block gehandhabt und alle nachfolgenden Schritte in diesem try-Block werden nicht mehr durchgeführt. Wenn also eine der Anweisungen innerhalb des try-Blocks ein Problem erzeugt, wird dieses durch die passenden catch-Anweisungen aufgefangen und entsprechend behandelt (sofern die catch-Anweisung dafür die passende Behandlung enthält). Werden hingegen alle Anweisungen in dem try-Block ohne Probleme abgearbeitet, wird der catchBlock übersprungen. Was Sie nun im catch-Teil konkret tun, ist nicht weiter festgelegt. Sie können jede Ihnen sinnvoll erscheinende Maßnahme ergreifen, die das Skript folgerichtig weiterlaufen lässt. Oft ist das eine Fehlermeldung mit anschließendem Rücksprung zu der Situation, die sich mit der ausgelösten Ausnahme sinnvoll umgehen lässt – etwa im Fall einer Benutzereingabe ein Fokussieren des kritischen Eingabefelds. Oder aber Sie können einen alternativen Weg zur Durchführung einer Aktion probieren, wenn der 27 Alle potenziell kritischen Anweisungen stehen bei dieser Konstruktion im try-Zweig.

77

2 Die Welt von AJAX – zentrale Grundlagen

erste Weg gescheitert ist. In letzterem Fall werden Sie oft auch try-catch-Strukturen verschachteln. Und genau mit so einem Konzept werden wir einfach versuchen, die möglichen Konstruktoranwendungen zur Erzeugung eines XMLHttpRequest-Objekts nacheinander auszuführen. Der Trick beruht darauf, dass eine Erzeugung entweder klappen kann oder eine Ausnahme ausgeworfen wird, die wir auffangen. Die Ausnahme an sich ist uninteressant, aber im zugehörigen catch-Teil probieren wir einfach die nächste Variante. So werden im Fall eines Scheiterns der Objekterzeugung sukzessive alle anderen möglichen Varianten zur Erzeugung ausprobiert. Beachten Sie die nachfolgende JavaScript-Funktion, die in einer externen JavaScriptDatei (ajax1.js) definiert sein soll: Listing 2.15: Die universelle Erzeugung eines XMLHttpRequest-Objekts 01 function erzXMLHttpRequestObject(){ 02 var resObjekt = null; 03 try { 04 resObjekt = new ActiveXObject("Microsoft.XMLHTTP"); 05 } 06 catch(Error){ 07 try { 08 resObjekt = new ActiveXObject("MSXML2.XMLHTTP"); 09 } 10 catch(Error){ 11 try { 12 resObjekt = new XMLHttpRequest(); 13 } 14 catch(Error){ 15 alert( 16 "Erzeugung des XMLHttpRequest-Objekts gescheitert"); 17 } 18 } 19 } 20 return resObjekt; 21 }

Die Funktion erzXMLHttpRequestObject() legt zuerst eine lokale Variable resObjekt an (Zeile 2). Diese wird eine Referenz auf das XMLHttpRequest-Objekt aufnehmen und als Rückgabewert der Funktion dienen. Am Anfang hat sie den Wert null. Damit wird sie von JavaScript implizit den Datentyp Object erhalten. In der vierten Zeile versuchen wir innerhalb eines try-Blocks das erste Mal, ein XMLHttpRequest-Objekt zu erzeugen. Es ist im Grunde vollkommen ohne Belang, welche der zur Verfügung stehenden Varianten wir zuerst probieren. Hier wird mit resObjekt = new ActiveXObject("Microsoft.XMLHTTP"); zuerst versucht, das Objekt mit dem älteren XML-Parser von Microsoft zu erzeugen.

78

2.3 Come together right now – AJAX

Hat dies funktioniert, wird der nachfolgende catch-Block komplett übersprungen und mit return resObjekt; in Zeile 20 das XMLHttpRequest-Objekt an den Aufrufer der Funktion zurückgegeben. Geht der erste Versuch zur Erzeugung des XMLHttpRequest-Objekts jedoch schief, wird eine Ausnahme ausgeworfen und der Programmfluss macht mit der ersten Anweisung im ersten catch-Block (Zeile 7) weiter. Hier finden Sie eine weitere try-catchStruktur, die in den äußeren catch-Block geschachtelt ist. Wir versuchen dort dann in Zeile 8, das Objekt mit der neueren Version des XML-Parsers von Microsoft zu erzeugen (resObjekt = new ActiveXObject("MSXML2.XMLHTTP");). Auch hier gilt wieder: Hat dies funktioniert, wird der nachfolgende catch-Block komplett übersprungen und in Zeile 20 mit return resObjekt; das XMLHttpRequest-Objekt zurückgegeben. Ist auch der zweite Versuch gescheitert, springt der Programmfluss in den zweiten catch-Block in Zeile 10 und fährt mit dem dritten Versuch fort, das Objekt zu erzeugen, dieses Mal mit new XMLHttpRequest(); (Zeile 12).

Nun ist die weitere Abfolge eine Frage der Programmlogik. In unserem Fall packen wir auch den dritten Versuch in ein try-catch-Konstrukt. Das ist im Grunde nicht notwendig, denn wenn auch der dritte Versuch scheitert, sollte das Skript zum Nachladen von Daten per AJAX beendet werden. Eine nicht aufgefangene Ausnahme würde genau das bewirken. Wir gehen jedoch etwas eleganter vor. Im Erfolgsfall gilt wieder, dass wie gewünscht das Objekt zurückgegeben wird. Bei Misserfolg wird dem Besucher eine Fehlermeldung angezeigt und dann von der Funktion der Wert null zurückgegeben (das ist der Initialisierungswert – dieser wurde nicht verändert, wenn das Skript bis zu dieser Stelle kommt). Diesen kann der Aufrufer der Funktion bei Bedarf verwerten.

Die Methoden eines XMLHTTPRequest-Objekts Ein Objekt vom Typ XMLHttpRequest stellt einige wichtige Methoden bereit. Nachfolgend finden Sie die Methoden eines XMLHttpRequest-Objekts:  Die Methode abort() stoppt die aktuelle Serveranfrage.  Mit getAllResponseHeaders() erhalten Sie als Rückgabe die vom Server gesendeten

Header-Felder als String.  Die Methode getResponseHeader("headerLabel") gibt das als Parameter benannte

Header-Feld als String zurück.  Die Methode open("method", "URL"[, asyncFlag[, "userName"[, "password"]]]) ist eine

der wichtigsten Methoden. Darüber legen Sie die Verbindungsdaten zu einem Webserver fest. Dabei werden mindestens zwei Parameter angegeben – die Methode und der URL. Der URL ist der relative oder absolute Pfad zum Serverskript, wobei gegebenenfalls (bei GET) der Querystring angefügt und ein Pseudo-URL verwendet wird. Das dritte Argument gibt an, ob eine Anfrage synchron (false)

79

2 Die Welt von AJAX – zentrale Grundlagen

oder asynchron (true) verarbeitet wird. Sofern eine synchrone Verarbeitung festgelegt wird, wird der folgende Versand der Daten mit der send()-Methode die Ausführung des Skripts so lange blockieren, bis die Antwort des Servers vollständig empfangen wurde. In diesem Fall kann die Antwort des Servers im unmittelbar folgenden Schritt des Skripts verarbeitet werden. Beim asynchronen Anfordern von Daten wird das blockierende Warten des Browsers auf die Antwort vermieden. Das Skript läuft dann nach dem Absenden des Requests einfach weiter. Wenn Sie eine solche asynchrone Anfrageform wählen, wird man in der Regel eine Callback-Funktion definieren, die immer dann aufgerufen wird, wenn sich der Bearbeitungszustand der Transaktion ändert. Der optionale Parameter userName ist ein gegebenenfalls benötigter Benutzername für eine Ressource auf dem Server und password entsprechend das Passwort.  Die Methode send(content) wird zum Abschicken einer Anfrage verwendet. Sie wird nach dem Aufruf der open()-Methode aufgerufen. Der Parameter content ist entweder null (bei GET) oder ein Querystring bei POST.  Mit der Methode setRequestHeader("label", "value") können individuelle Header-

Felder gesetzt werden.  Über setMimeType("mimetype") erfolgt das Setzen des MIME-Typs der angeforderten Daten (Response). Der Parameter mimetype ist die übliche Angabe eines MIME-Typs als String (z.B. "text/xml" oder "text/html"). Die Methode wird aber von einigen

Browsern nicht unterstützt.

Die Eigenschaften eines XMLHTTPRequest-Objekts Ein XMLHttpRequest-Objekt besitzt neben den Methoden eine Reihe von Eigenschaften, die für jede AJAX-Applikation benötigt werden:  Die Eigenschaft onreadystatechange28 ist ein Eventhandler, der jedes Mal aufgerufen wird, wenn sich der Verbindungsstatus (readyState) eines XMLHttpRequest-Objekts

ändert. Man registriert bei diesem Eventhandler in der Regel eine Funktionsreferenz auf eine Callback-Funktion.  Die Eigenschaft readyState enthält den aktuellen Verbindungsstatus einer Transaktion. Mögliche Werte sind 0 bzw. UNINITIALlZED29, 1 bzw. LOADING30, 2 bzw. LOADED31, 3 bzw. INTERACTIVE32 und vor allen Dingen 4 bzw. COMPLETED33.  Die Eigenschaft responseText enthält die vom Server gesendeten Daten als Text. 28 Dieser Eventhandler ist extra für AJAX eingeführt worden. Es gibt hierfür kein Gegenstück als HTML-Eventhandler. 29 Das Objekt wurde noch nicht initialisiert. 30 Das XMLHttpRequest-Objekt wurde erstellt und initialisiert, aber es wurde noch keine Anfrage mit send() gesendet. 31 Die Anfrage wurde gesendet und der Antwort-Header sowie der Antwortstatus können ausgewertet werden. 32 Die Daten vom Server treffen gerade ein. 33 Die Kommunikation mit dem Server ist abgeschlossen und alle Daten sind angekommen.

80

2.3 Come together right now – AJAX

 Die Eigenschaft responseXML enthält die vom Server gesendeten Daten als XML-Da-

ten (also als Baum, auf dem man navigieren kann). Wenn die Daten nicht in XMLForm gesendet worden sind, enthält responseXML den Wert null.  Die Eigenschaft status enthält den HTTP-Status der Verbindung als Zahl.  Die Eigenschaft statusText enthält den HTTP-Status als Textmeldung, sofern eine

solche übermittelt wurde.

2.3.3

Exemplarischer Ablauf einer AJAX-Anfrage

Besprechen wir in einer Zusammenfassung die Regeln, wie jede AJAX-Applikation vom System her arbeitet. Eine AJAX-Anfrage kann sich zwar in diversen Details unterscheiden und von einem Framework oder Toolkit verborgen werden, folgt aber in der Regel immer dem gleichen Schema: 1. Zuerst wird ein Objekt vom Typ XMLHttpRequest erzeugt, über das die Kommunikation laufen soll. 2. Eine Callback-Funktion wird beim XMLHttpRequest-Objekt als Funktionsreferenz registriert. Diese wird dann bei jeder Zustandsänderung der Transaktion aufgerufen. Die angegebene Funktion wird fortan für jede Statusänderung des XMLHttpRequest-Objekts aufgerufen. Dabei gibt das Feld readyState des XMLHttpRequestObjekts Aufschluss über den aktuellen Status der Transaktion beim Aufruf dieser Callback-Funktion. So lassen sich einzelne Phasen der Datenübertragung unterscheiden. Der wichtigste Fall ist hier das Erreichen des Status COMPLETED mit dem Statuscode 4. Nur dieser Status wird in den verschiedenen Browsern einheitlich gehandhabt. Deshalb werden fast alle AJAX-Anwendungen darauf prüfen. 3. Die Verbindung wird geöffnet, indem die open()-Methode des XMLHttpRequestObjekts aufgerufen wird. Das ist aber noch nicht die konkrete Anfrage. Deshalb ist es auch unerheblich, ob Schritt 2 und 3 vertauscht werden. 4. Die AJAX-Anfrage an den Webserver wird mit der send()-Methode abgeschickt. 5. Die Antwort des Webservers wird verwertet. Dazu kann die Statusänderung eines XMLHttpRequest-Objekts explizit genutzt werden.

2.3.4

Praktische AJAX-Beispiele – von Hand

Wir erstellen nun zwei praktische AJAX-Beispiele von Hand, also von Grund auf mit allen notwendigen Strukturen und explizit ohne die Hinzunahme eines Frameworks.

Klartext vom Server anfordern In unserem ersten AJAX-Beispiel wollen wir einfach Klartext vom Server anfordern. Der Anwender soll beim Überstreichen eines Bilds in einer Webseite eine Zusatzinformation in der Webseite angezeigt bekommen. Dabei wird für jedes Bild einfach eine eigene Textdatei mit spezifischen Informationen vom Server geladen und in einem individuellen Bereich der Webseite angezeigt, ohne die Webseite neu zu laden.

81

2 Die Welt von AJAX – zentrale Grundlagen

Hier ist die HTML-Datei, die dem Beispiel zugrunde liegen soll (ajax1.html): Listing 2.16: Die HTML-Datei für das AJAX-Beispiel 01 03 04 05

07 Beispiel AJAX 1 08

09 10 11 Beispiel AJAX 1 12

13 14 15 16 17 18 50 51 52

Bild	Info
19 2.3 Come together right now – AJAX 46	47 49

53 54

Das Beispiel arbeitet mit einer einfachen Tabelle, bei der in der linken Spalte jeweils ein Bild angezeigt wird. Die rechte Spalte soll die Zusatzinformation anzeigen, wenn ein Anwender mit dem Mauszeiger das Bild überstreicht.

Abbildung 2.9: Zusatzinformationen zu einem Bild werden dynamisch per AJAX nachgeladen.

83

2 Die Welt von AJAX – zentrale Grundlagen

Bei jedem Bild sind zwei Eventhandler notiert. Wenn der Anwender mit dem Mauszeiger den Bereich eines Bilds überstreicht (onmouseover), wird die Funktion sndReq() mit einem spezifischen Wert für einen Parameter aufgerufen. Diese Funktion wird die AJAX-Anfrage auslösen und in der Spalte neben dem jeweiligen Bild eine Zusatzinformation anzeigen. Beim Verlassen des Bildbereichs durch den Mauszeiger (onmouseout) wird eine weitere Funktion loesch() aufgerufen. Diese leert den Bereich der jeweiligen Zelle neben dem Bild. Auch die Steuerung, welche Zelle zu löschen ist, erfolgt über einen Parameter. Der Parameter entspricht exakt dem Wert der ID der jeweiligen Zelle. Die Referenz auf die externe JavaScript-Datei sehen Sie in Zeile 8. Hier sehen Sie den Aufbau dieser JavaScript-Datei ajax.js: Listing 2.17: Die externe JavaScript-Datei 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

84

var id = null; function erzXMLHttpRequestObject(){ var resObjekt = null; try { resObjekt = new ActiveXObject("Microsoft.XMLHTTP"); } catch(Error){ try { resObjekt = new ActiveXObject("MSXML2.XMLHTTP"); } catch(Error){ try { resObjekt = new XMLHttpRequest(); } catch(Error){ alert( "Erzeugung des XMLHttpRequest-Objekts gescheitert"); } } } return resObjekt; } function sndReq(i) { id=i; resObjekt.open('get', id + 'info.txt',true); resObjekt.onreadystatechange = handleResponse; resObjekt.send(null); } function handleResponse() { if(resObjekt.readyState == 4){ document.getElementById(id).innerHTML = resObjekt.responseText;

2.3 Come together right now – AJAX

34 35 36 37 38 39

} } function loesch(id){ document.getElementById(id).innerHTML = ""; } resObjekt=erzXMLHttpRequestObject();

Die globale Variable id in Zeile 1 wird zur Steuerung des Bereichs verwendet, in dem die angeforderte Textdatei angezeigt werden soll. Von Zeile 2 bis 23 finden Sie die Funktion erzXMLHttpRequestObject() zur Erzeugung eines XMLHTTPRequest-Objekts, wie wir es besprochen haben. Die Funktion wird in Zeile 39 aufgerufen. Die Funktion sndReq() von Zeile 24 bis 29 verwendet einen Parameter und weist dessen Wert der globalen Variable id zu. Anschließend sehen Sie eine typische AJAXAnfrage. Dabei wird der Name der angeforderten Textdatei dynamisch aus dem Übergabewert und einer festen Kennung generiert. In der Funktion handleResponse() von Zeile 30 bis Zeile 35 erfolgt die Entgegennahme der Antwort des Servers. Wenn die Antwort vollständig ist, wird die Antwort des Servers (das ist jeweils eine der besagten Textdateien) in die jeweilige Tabellenzelle geschrieben. Die Funktion loesch() von Zeile 36 bis 38 löscht den Inhalt der jeweilige Tabellenzelle. Hinweis Die jeweils angeforderten Textdateien sind reiner Klartext und brauchen hier nicht weiter behandelt zu werden. Natürlich können Sie hier auch serverseitige Skripte aufrufen.

JSON-Daten im Client verarbeiten Die Verarbeitung von JSON im Browser ist recht einfach, wenn man das Konzept von DOM, XML und des node-Objekts verstanden hat. Es handelt sich ja im Grunde bei JSON um eine Vereinfachung dieser Konzepte. Da JSON aber sicher nicht allen Lesern vertraut ist, möchte ich an dieser Stelle dennoch als zweites Beispiel zur manuellen Erstellung einer AJAX-Applikation eine vollständige Anwendung erstellen, die JSON-Daten vom Server anfordert und in die Webseite einbaut. Nachfolgend sehen Sie ein schematisches Beispiel für ein JSON-Objekt, das auf dem Client deklarativ per JavaScript erzeugt wird.

85

2 Die Welt von AJAX – zentrale Grundlagen

Beispiel: Listing 2.18: Eine deklarative Erzeugung eines JSON-Objekts per JavaScript var meinJSONObjekt1 = {"bindings": [ {"kennzeichen": "O", "gebiet": "Diplomatisches Corps"}, {"kennzeichen": "A", "gebiet": "Augsburg (Bayern)"}, {"kennzeichen": "AA", "gebiet": "Aalen Ostalbkreis (BaWü)"} ]};

Angenommen, Sie erhalten nun vom Server aufgrund einer AJAX-Anfrage einen Klartext, der nach dem JSON-Format aufgebaut ist (also etwa den Wert der obigen Zuweisung als Inhalt). Dann verwenden Sie zum Beispiel die JavaScript-Standardfunktion eval(), um daraus ein JavaScript-Objekt aufzubauen, mit dem Sie dann arbeiten können. Und dieses resultierende Objekt erlaubt alsdann über eine Array-Syntax oder getElementById() den gezielten Zugang zu den einzelnen Werten in der JSON-Struktur, beispielsweise so, wie Sie im nachfolgenden Beispiel erkennen können, wenn die Datenübertragung ein Format hat, wie oben als Clientbeispiel vorgestellt. Dabei verwenden wir eine Webseite mit einer Schaltfläche, die bei einem Klick eine AJAX-Anfrage auslöst (ajax2.html): Listing 2.19: Eine einfache Webseite dient als Basis für die AJAX-Anfrage.



Beispiel AJAX 2

Beispiel AJAX 2 - JSON-Verwertung Klick



Die JavaScript-Datei ajax2.js ist bis auf die Funktion handleResponse() fast identisch mit der Datei ajax1.js:34 Listing 2.20: Die entscheidenden Stellen in der JavaScript-Datei 01 function erzXMLHttpRequestObject(){ ... 21 }

34 Aus dem Grund wird auf wiederholende Passagen im Druck verzichtet.

86

2.3 Come together right now – AJAX

22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

function sndReq() { resObjekt.open('get', 'json.txt',true); resObjekt.onreadystatechange = handleResponse; resObjekt.send(null); } function handleResponse() { var text="" + ""; document.getElementById("ergeb").style.visibility = "visible"; if(resObjekt.readyState == 4){ meinJSONObjekt = eval( "(" + resObjekt.responseText + ")" ); for(i=0;i < meinJSONObjekt.bindings.length;i++) { text += ""; } document.getElementById("ergeb").innerHTML = text; } } resObjekt=erzXMLHttpRequestObject();

Abbildung 2.10: Die Webseite vor der Datenanforderung mit AJAX In der Funktion sndReq() wird nun die Textdatei json.txt aufgerufen, die oben beschriebenen Inhalt hat.

87

2 Die Welt von AJAX – zentrale Grundlagen

Die Funktion handleResponse() verwendet in Zeile 32 die Funktion eval(), um darüber ein JSON-Objekt mit Array-Struktur aufzubauen. Dieses kann dann in einer forSchleife durchlaufen werden. Wir bauen hier konkret eine Tabelle auf, die in den -Container mit der ID ergeb geschrieben wird. Hinweis Die JavaScript-Funktion eval() gilt bei einigen Aktionen als unsicher. Verschiedene AJAX-Frameworks und -Toolkits stellen deshalb Alternativen zur Verfügung.

Abbildung 2.11: Die Webseite nach der AJAX-Anfrage mit den aufbereiteten JSON-Daten

2.4

Wie positionieren sich AJAX-Frameworks und Toolkits?

Wie Sie gerade gesehen haben, lassen sich AJAX-Applikationen nach recht klaren Regeln auch von Hand erstellen. In diesem Buch geht es aber im Schwerpunkt um die Erstellung von RIAs auf Basis von AJAX, aber unter Zuhilfenahme eines passenden Frameworks. Wozu braucht man überhaupt noch Frameworks und Toolkits?

88

2.4 Wie positionieren sich AJAX-Frameworks und Toolkits?

2.4.1

Lösung klassischer AJAX-Probleme

Ein Teil der Antwort erschließt sich aus der Beschreibung einiger Probleme, die sich im Zusammenhang mit AJAX-Applikationen ergeben. Dabei sollen in diesem Zusammenhang nicht die allgemeinen Problematiken bezüglich der notwendigen Voraussetzungen beim Client35 betrachtet werden, sondern solche Probleme, die mit einem gewissen Aufwand rein über intelligente Programmierung und die Anwendung der klassischen Webtechnologien im AJAX-Umfeld sinnvoll zu lösen sind. Hinweis Ein ganz banaler Vorteil von Frameworks und Toolkits gegenüber dem händischen Erstellen einer AJAX-RIA ergibt sich durch die bereits investierte Manpower, die in den meisten Projekten steckt. Frameworks und Toolkits werden oft von mehreren Leuten oder gar ganzen Firmen über Jahre vorangetrieben. Damit wird in die Entwicklung meist sehr viel Arbeit und Gehirnschmalz investiert. Diesen Aufwand kann ein einzelner Programmierer (oder auch eine kleinere Gruppe von Leuten) bei einer manuell erstellten AJAXApplikation niemals leisten.

Benutzerführung Frameworks und Toolkits helfen bei der bequemen Interaktion mit Besuchern einer Webapplikation. So ist beispielsweise die Benutzerführung bei AJAX-Applikationen eine vollkommen andere als bei herkömmlichen Webapplikationen. Was soll denn konkret in einer AJAX-RIA passieren, wenn Daten im Hintergrund nachgeladen werden? Soll der Anwender das überhaupt mitbekommen? Etwa über das Anzeigen einer Eieruhr? Oder ist genau das ein Fehler bei einer AJAX-Applikation? Sollen AJAX-Applikationen die Daten nicht unbemerkt vom Anwender in die Webseite integrieren? Aber dann sollten Sie beachten, dass in einem Netzwerk wie dem Internet eine verlässliche und schnelle Antwortzeit von neu angeforderten Daten nicht garantiert werden kann. Wie dann die Webapplikation dem Anwender dies deutlich machen soll, ist nicht trivial zu entscheiden – und auch nicht unbedingt trivial zu programmieren. Aber es kommt bezüglich der Benutzerführung in Hinsicht auf das Antwortverhalten des Servers sogar auch umgekehrt. Es gibt Untersuchungen, wonach Anwender zu schnell nachgeladene Daten gar nicht wahrnehmen, oder genauer – die Veränderungen der Webseite. Es hat sich über die Jahre eine Erwartungshaltung bei Anwendern aufgebaut, dass neue Informationen im Web einfach eine gewisse Zeit brauchen. Sind die Informationen zu schnell da, scheinen manche Anwender es nicht zu glauben. In der 35 Wenn ein Anwender JavaScript deaktiviert hat, wenn Sicherheitseinstellungen die Kommunikation blockieren, wenn der Browser zu alt ist oder die Unterstützung des XMLHttpRequestObjekts nicht gegeben ist, ... .

89

2 Die Welt von AJAX – zentrale Grundlagen

Tat gibt es AJAX-Applikationen, die deshalb die Zeiten zum Anzeigen von Informationen künstlich verzögern. AJAX-Frameworks können eine vernünftige Benutzerführung sowohl vereinheitlichen als auch die Programmierung erheblich vereinfachen. Und diese bequeme Benutzerführung ist nicht auf AJAX beschränkt, sondern vereinfacht auch die Erstellung von »normalen« Webapplikationen.

Probleme der Browser mit AJAX-Anfragen Dann gilt es bei AJAX-Applikationen zu beachten, dass Browser nicht für die asynchrone Datenanforderung konstruiert wurden, sondern dafür im Grunde nur um ein API-Objekt erweitert wurden. Dies bewirkt verschiedene mehr oder weniger große Probleme der Browser mit AJAX-Anfragen, die die bereits ohne AJAX vorhandenen Probleme mit verschiedenen Browsern noch verschlimmern. Eines der bekanntesten Probleme in diesem Umfeld ist, dass AJAX-Anfragen die (æ)-Schaltfläche im Browser (die Historie) nicht im gewohnten Verhalten verfügbar machen – zumindest nicht in dem Sinn, wie es der Anwender erwartet. Wenn normalerweise ein Anwender eine Webseite aufruft und dann die (æ)-Schaltfläche des Browsers anklickt, kommt er zur zuletzt angezeigten Seite zurück. Genaugenommen bedeutet das, dass der vorherige Zustand der Applikationen wieder angezeigt wird. Dem Anwender kann es im Grunde vollkommen egal sein, ob er eine vorher geladene Seite angezeigt bekommt oder die gleiche Seite ein anderes Aussehen hat, wie es bei AJAX-Applikationen der Fall wäre. AJAX-Applikationen können die (æ)-Schaltfläche nicht nutzen, denn der Browser speichert nur alle vorher vom Browser auf konventionelle Weise angeforderten vollständigen Webseiten. Die meisten Frameworks im Umfeld von AJAX haben aber auf die eine oder andere Weise hierfür eine Kompensation geschaffen. Das GWT (Google Web Toolkit) arbeitet zum Beispiel mit einem verstecken Inline-Frame und speichert dort unsichtbar die verschiedenen Zustände ab. Eine weitere Funktionalität des Browsers, die durch AJAX ausgehebelt wird und eine ähnliche Ursache hat, ist das Speichern von Lesezeichen beziehungsweise Favoriten. Auch diese können nur für tatsächlich über den Browser angeforderte neue Webseiten gesetzt werden.

Maschinelle Verarbeitung von dynamischen Informationen und das barrierefreie Web Ein weiteres Problem von dynamisch per AJAX nachgeladenen Daten besteht im Zusammenhang mit Suchmaschinen bzw. allgemein der maschinellen Verwertung von Informationen in einer Webseite. Suchmaschinen haben grundsätzlich erhebliche Probleme, wenn sie dynamisch erstellte Seiten indizieren sollen. Bereits bei konventionellen Webapplikationen, bei denen die Seiten auf dem Server dynamisch zusammengesetzt werden, haben Suchmaschinen so ihre Probleme – oder auch bei Webseiten, die im Client durch JavaScript teilweise dynamisch geschrieben werden.

90

2.4 Wie positionieren sich AJAX-Frameworks und Toolkits?

Diese Probleme werden bei dynamisch generierten Webseiten, von denen nur Teile durch nachgeforderte Daten vom Server dynamisch neu aufgebaut werden, noch erheblich größer. Die maschinelle Verarbeitung von Informationen beinhaltet aber noch mehr Facetten. Im gleichen Zusammenhang ist auch das Thema barrierefreies Web zu sehen. Lesegeräte haben schon heute mit einigen Formen von Webseiten ihre Probleme, beispielsweise mit Webseiten, die Frames benutzen. Ersteller von AJAXApplikationen müssen sicherstellen, dass diese auch behindertengerecht sind. Bezüglich der maschinellen Verarbeitung und barrierefreien Aufbereitung von AJAX-RIAs gibt es offensichtlich eine ganze Reihe von Aufgaben zu lösen. Und diese Lösungen sind in guten Frameworks bereits implementiert.

Das Zusammenspiel zwischen Client und Server Die wohl aber umfangreichste Aufgabe beim Entwickeln einer AJAX-Applikationen dürfte darin bestehen, das extrem komplexe Zusammenspiel zwischen Client und Server in den Griff zu bekommen – und das mit ziemlich oft ablaufenden Kommunikationszyklen. Dies kann zu diversen Problemen führen. So kommt es leicht zu einer erheblichen Belastung der Serverseite. Denken Sie beispielsweise an Google suggest. Das Projekt ist niemals in die echte Produktion gegangen, sondern verbleibt seit Jahren auf der »Spielwiese« für neue Technologien. Nur sicher nicht deshalb, weil das Projekt nicht ausgereift ist. Es ist immerhin die wohl erste echte AJAX-Applikation von Google, wurde sehr lange entwickelt und ist absolut zuverlässig und stabil.

Abbildung 2.12: Google suggest verbleibt auch nach Jahren auf der Spielwiese.

91

2 Die Welt von AJAX – zentrale Grundlagen

Aber was passiert bei Google suggest? Auf jeden Tastendruck des Anwenders werden Daten nachgefordert. Und dies ist selbst bei den gigantischen Ressourcen von Google eine erhebliche Belastung sowohl für den antwortenden Webserver als auch die nachgeschaltete Datenbank und natürlich auch die Kommunikationswege. Diese Belastung scheint selbst Google zu scheuen. Mit AJAX besteht ebenso das Risiko, dass man – wie in der Vergangenheit – Clientressourcen brachliegen lässt und Serverressourcen und Kommunikationswege übermäßig beansprucht. Aber wenn man dahingegen Geschäftslogik in den Client verlagert, hat man in gewisser Weise die Pest mit Cholera vertauscht. Denn man steigert unter Umständen die Komplexität der Clientseite erheblich und muss mit zahlreichen Problemen dort kämpfen, beginnend bei der weder sonderlich leistungsfähigen noch besonders sicheren Skriptsprache JavaScript über die teilweise mangelhafte Unterstützung von CSS in verschiedenen Browsern bis hin zur unterschiedlichen Interpretation von HTML-Anweisungen und sogar Problemen mit DOM und der XML-Verarbeitung im Client. An den unterschiedlichsten Stellen warten tückische Fallstricke, was nicht zuletzt für AJAX-Applikationen einen hohen Umfang an Tests und Anpassung an verschiedene Webbrowser und Plattformen mit sich bringt – besonders da bei einer AJAX-Applikation eben immer mehrere Stellen beteiligt sind. Vergegenwärtigen wir uns noch einmal den Aufbau einer AJAX-RIA. Eine AJAXAnfrage baut auf einem (hoffentlich) fehlerfreien HTML- bzw. XHTML-Gerüst auf und führt im Client ein Browser-Skript aus. Dieses verwendet das XMLHttpRequestObjekt, um mit dem Webserver zu kommunizieren. Auf dem Webserver werden Daten bereitgestellt, die entweder statisch verfügbar sind oder erst mit einer geeigneten serverseitigen Programmiertechnik erstellt werden – und dies eventuell unter Zuhilfenahme einer nachgeschalteten Applikation wie einem Datenbanksystem. Wenn die Daten vom Webserver dann zum Client geschickt wurden, kommt erneut das XMLHttpRequest-Objekt zum Einsatz und zum Schluss wieder ein clientseitiges Skript, um die Daten in die Webseite zu befördern. Es kann im Fehlerfall sehr mühsam sein, herauszufinden, wo genau ein Fehler auftritt. Ausgereifte AJAX-Frameworks haben dieses komplexe Zusammenspiel getestet und verbergen potenzielle Fehlerstellen vor dem Programmierer. Bei vielen Frameworks wird als ein Highlight genau dieses reibungslose Zusammenspiel zwischen der serverseitigen und der clientseitigen Welt gewährleistet.

Das Rad – muss es wirklich immer wieder neu erfunden werden? Im Rahmen einer jeden AJAX-RIA werden bestimmte Aufgaben immer wieder zu lösen sein. Sehr bequem ist es dabei vor allem, wenn etwas verzwicktere Probleme der AJAX-Technologie bereits mit vernünftigen Bibliotheken gelöst werden. Natürlich kann man das manuell mit JavaScript, HTML etc. von Hand lösen, aber dazu muss man teils recht trickreich programmieren, nur um etwas zu erreichen, was es schon gibt.

92

2.4 Wie positionieren sich AJAX-Frameworks und Toolkits?

Das Look&Feel – die Optik einer RIA wird immer wichtiger Anwender haben sich an gewisse Optiken und Verhaltensweisen von Applikationen gewöhnt, seien es aufwändige multimediale Gestaltungen, Aktionen wie Drag&Drop etc. Konventionelle Webapplikationen konnten hierin niemals Desktopapplikationen das Wasser reichen. RIAs ändern das gerade. Eine gute RIA lässt sich im Look&Feel kaum noch von einer Desktopapplikation unterscheiden. Aber um so ein Look&Feel mit den einfachen Mitteln im Webbrowser zu erstellen, bedarf es einer erheblichen Anstrengung. AJAX-Frameworks zeigen hier ihre Stärken mit vorbereiteten Funktionalitäten und Widgets, die insbesondere im Bereich der GUIBildung erheblich zur Verbreitung von Frameworks und Toolkits beigetragen haben. Es ist deshalb deutlich zu erkennen, dass Toolkits und Frameworks immer populärer werden, die diese Erstellung von Weboberflächen vereinfachen. Die Vorteile bestehen im Wesentlichen darin, dass immer wiederkehrende Strukturen wie Schaltflächen oder Menüs oder auch Animationen und Slideshows für Bilder in Form von Komponenten bzw. Widgets verfügbar gemacht werden können. Und diese werden in der Regel auch in den meisten relevanten Browsern funktionieren, was von unschätzbarem Wert gegenüber einer manuell gestrickten Lösung ist. Ebenso lassen sich mit Frameworks und Toolkits Webseiten zuverlässig strukturieren. Insbesondere die Unterstützung über verschiedene Plattformen hinweg (nicht nur der konkrete Browser samt der konkreten Browser-Version, sondern auch das Betriebssystem und die Bildschirmauflösung) rechtfertigt bereits den Einsatz solcher Toolkits oder Frameworks. Aber auch Abläufe der Oberflächenlogik wie die Überprüfung von Formulareingaben auf Clientseite lassen sich durch standardisierte Schablonen vereinfachen.

2.4.2

AJAX-Frameworks und -Toolkits – nur Mogelpackungen?

Wenn Sie sich Frameworks und Toolkits genauer ansehen, die sich mit AJAX als Qualitätsmerkmal schmücken, werden Sie grundsätzlich sehr schnell erkennen, dass die Funktionalität von AJAX meist nur eine untergeordnete, scheinbar sogar nebensächliche Rolle spielt. Fassen wir jedoch noch einmal die wesentlichen Punkte für eine AJAX-Datenanforderung zusammen: 1. Ein Objekt vom Typ XMLHttpRequest wird erzeugt. 2. Eine Callback-Funktion wird beim XMLHttpRequest-Objekt als Funktionsreferenz registriert. Diese reagiert auf Antworten des Servers. 3. Die Verbindung wird geöffnet. 4. Die AJAX-Anfrage an den Webserver wird abgeschickt. 5. Die Antwort des Webservers wird verwertet. Wollen Sie ehrlich gesagt um diese fünf Punkte herum ein komplettes Framework oder Toolkit stricken? Das wäre doch ziemlich mit Kanonen auf Spatzen geschossen – selbst wenn man die Lösung der oben beschriebenen Probleme der asynchronen

93

2 Die Welt von AJAX – zentrale Grundlagen

Kommunikation mit einschließt. Mit anderen Worten – auch wenn auf einem Framework oder Toolkit AJAX drauf steht, macht der Kern der eigentlichen AJAX-Datentransaktion nur einen minimalen Bruchteil dessen aus, was so ein Framework oder Toolkit leisten wird. Haben wir es deshalb bei den Frameworks und Toolkits in diesem Buch36 mit Etikettenschwindel, mit Mogelpackungen zu tun?

Ajax statt AJAX Ich denke nicht! Es kommt nur darauf an, wie man AJAX eigentlich wirklich definiert. Ursprünglich verbarg sich hinter der Abkürzung AJAX alleine die Art und Weise, wie Client und Server miteinander kommunizieren. Die Beschränkung auf die reine Datentransaktion, auf die wir uns bisher auch streng bezogen haben, wird für die Beschreibung einer RIA auf Basis von AJAX mehr und mehr aufgegeben. Nicht zuletzt soll auch die immer öfter zu findende Schreibweise Ajax diese erweiterte Sicht deutlich machen. Inzwischen steht Ajax für die gesamte Breite an technischen Möglichkeiten, um Webapplikationen mit Desktop-Feeling zu versehen. Eigentlich bezeichnet eine AjaxApplikation37 also eine moderne Webapplikation, eine RIA auf Basis von JavaScript im Allgemeinen und AJAX im Speziellen, die erweiterte Funktionalität bereitstellt und dazu bei Bedarf Daten vom Server in eine bestehende Seite integriert. Aber diese Integration ist nicht der Dreh- und Angelpunkt der reichhaltigeren Möglichkeiten. Und so gesehen muss auch die reine AJAX-Datentransaktion als nur ein – zwar zentraler, aber kleiner – Teil eines AJAX-Frameworks oder -Toolkits angesehen werden. Aber nichtsdestotrotz – natürlich muss diese Funktionalität von einem Framework oder Toolkit abgedeckt werden, das unter der Bezeichnung AJAX antritt.

2.4.3

Welche Ansätze gibt es für Frameworks und Toolkits und wie geht man damit als Entwickler um?

Wir haben es schon einmal angedeutet – es existieren verschiedene Ansätze für Frameworks und Toolkits samt den unterstützenden Tools und Bibliotheken. Es gibt einmal Toolkits und Frameworks, die zum Erstellungszeitpunkt von AJAX- bzw. interaktiven Webapplikationen im Allgemeinen den direkten Kontakt mit HTML, JavaScript und Stylesheets komplett vermeiden, so wie beispielsweise das GWT (Google Web Toolkit), mit dem man komplett mit Java eine Applikation erstellt und später erst in die tatsächlichen Clienttechnologien überführt. Ebenso kapseln serverseitige PHP-, Perl- oder Ruby-Frameworks (AjaxAC, Cajax, Cpaint, Xajax, XOAD, Sajax, Ruby on Rails) insbesondere AJAX-Aufrufe in Objekte und vereinfachen dadurch die Interaktion mit dem Anwender. Diese Toolkits und Frameworks nehmen Webseitenerstellern immens viel Arbeit ab, erfordern aber natürlich Know-how in den zugrunde liegenden Programmiertechniken und entziehen zudem vollständig die Kontrolle über den letztendlich zum Besucher geschickten Code. Ebenso macht man sich mit dem Einsatz von solchen generierenden Systemen sehr stark abhängig 36 Und auch anderen, die sich mit AJAX schmücken und hier nicht behandelt werden. 37 Wir werden aber im Buch im Folgenden konsequent bei der Schreibweise AJAX bleiben.

94

2.4 Wie positionieren sich AJAX-Frameworks und Toolkits?

von einer vernünftigen Pflege und Weiterentwicklung des dahinterstehenden Projekts respektive der verantwortlichen Firma. Auf der anderen Seite stehen solche Toolkits und Frameworks, die als reine Bibliotheken für (X)HTML, JavaScript und/oder CSS zu verstehen sind und oft zu programmierende Clientstrukturen in Form von vorgefertigten Funktionen sowie Klassen und Objekten bereitstellen – beispielsweise Mochi Kit, das sehr populäre Prototype, YUI oder Dojo. Um diese Frameworks wollen wir uns wie gesagt in diesem Buch kümmern. Solche Toolkits und Frameworks erhalten dem Webseitenersteller eine weitgehende Kontrolle über seinen Quellcode und bewirken nur eine recht geringe Abhängigkeit. Dafür benötigt man in der Regel aber ausreichende Kenntnisse in (X)HTML, JavaScript und CSS als Grundlagen, denn man arbeitet direkt in diesem Umfeld. Tipp Sie können durchaus Frameworks und Toolkits miteinander kombinieren. Gerade Prototype wird gerne in Verbindung mit anderen Frameworks und Toolkits verwendet, die teilweise sogar darauf aufbauen. Erst einmal spricht auch nicht viel dagegen, dass Sie einen Teil Ihrer Webapplikation mit dem einen Framework oder Toolkit erstellen und einen anderen Teil mit einem anderen. Nur ist dieses Zusammenspiel meist nicht aufeinander abgestimmt und es kann zu diversen Problemen kommen. Sie müssen auf jeden Fall testen, ob die Geschichte passt. Und Sie sollten auch nicht vergessen, dass eine solche heterogene Zusammenstellung von Ressourcen meist viel aufwändiger ist, als wenn Sie alles aus einer Hand bekommen. Ich würde deshalb nur dann eine parallele Verwendung empfehlen, wenn Ihr Standard-Framework oder -Toolkit eine bestimmte Funktionalität nicht enthält und ein anderes Framework oder Toolkit genau diese Ihnen bequem bereitstellt. 38

Hinweis Ein großer Nachteil vieler Toolkits und Frameworks im Web-Umfeld ist, dass neue Versionen derzeit oftmals in elementaren Bestandteilen gegenüber Vorgängerversionen differieren. Viele Weiterentwicklungen sind nicht abwärtskompatibel. Wenn Sie also auf eine neue Version umsteigen, kann es sein, dass Sie teilweise erhebliche Anpassungen in Ihrem Quellcode vornehmen müssen. Ebenso werden Dokumentationen und auch Literatur38 zu einer Vorgängerversion möglicherweise nicht mehr in allen Bereichen zu verwenden sein. Sie müssen bei einem Upgrade auf eine neuere Version unbedingt die Begleitinformationen studieren. 38 Leider ;-(. Aber ich bemühe mich, die Ausführungen im Buch so zu halten, dass das Buch möglichst auch mit Nachfolgeversionen der Toolkits und Frameworks zu verwenden ist, die dem Buch zugrunde liegen.

95

2 Die Welt von AJAX – zentrale Grundlagen

2.5

Zusammenfassung

Sie haben in diesem Kapitel die Geschichte und die Bedeutung sowie die zentralen Grundlagen von AJAX und Web 2.0 kennengelernt. Die Anwendung von AJAXFrameworks und -Toolkits39 basiert auf elementaren Grundlagenkenntnissen in diesem Umfeld. Dabei haben wir HTML und XHTML sowie JavaScript, DOM und CSS nur kurz gestreift, da eine gewisse Erfahrung damit (oder eine parallele Einarbeitung mit anderen Quellen) zum erfolgreichen Umgang mit dem Buch vorausgesetzt werden muss. Dagegen haben wir uns in dem Kapitel recht intensiv mit XML und JSON auseinandergesetzt. Dazu haben Sie detaillierte Informationen über den Datenaustausch mit AJAX erhalten. Mit einigen exemplarischen AJAX-Applikationen, die wir von Grund auf von Hand erzeugt haben, sollten Sie nun ein Verständnis für die Funktion von AJAX-Applikationen haben und sehen, welche Vorteile eine RIA auf dieser Basis einem Anwender bieten kann. Zum Abschluss des Kapitels haben Sie Argumente kennengelernt, die für den Einsatz von AJAX-Frameworks und -Toolkits sprechen, und gesehen, wie sich verschiedene Frameworks und Toolkits positionieren.

39 Insbesondere solche, die explizit als JavaScript-Bibliotheken konzipiert sind.

96

3

Das YUI – Yahoo User Interface

In diesem Kapitel wollen wir uns dem YUI (Yahoo User Interface), dem ersten AJAXFramework bzw. -Toolkit in diesem Buch, genauer widmen. Dieses YUI bezeichnet eine populäre JavaScript- und CSS-Bibliothek für webbasierte Benutzerschnittstellen, die Yahoo!1 als Open Source (unter der BSD-Lizenz – http://developer.yahoo.com/yui/ license.html) herausgibt. Das YUI wurde in einer ersten Version 2006 veröffentlicht und hat sich nach und nach eine rege Community erarbeitet, die unablässig Erweiterungen entwickelt und bestehende Probleme beseitigt. Mit den enthaltenen Komponenten (Widgets) lassen sich insbesondere auf komfortable Weise Webapplikationen mit ereignisgesteuerter Interaktion unter Verwendung von AJAX entwickeln. Und bereits die ersten Folgeversionen der Startvariante zeigten bei YUI die Tendenz, dass sich die Bibliothek schnell weg von einer ursprünglich recht einfachen Utility-Sammlung mehr und mehr zu einem schwergewichtigen JavaScript- und CSS-Framework mit diversen Entwicklungsfeatures entwickelt. Die dem Buch zugrunde liegende Version 2.5.1 bestätigt diese Tendenz. Ein Anwender erhält mehr oder weniger für jeden denkbaren Wunsch an die Gestaltung einer RIA-Oberfläche einen passenden Lösungsvorschlag über YUI, der einfach und komfortabel an eigene Bedürfnisse angepasst werden kann. Und Entwickler können zudem mittels diverser Features die Effektivität und Funktionalität ihrer Webapplikationen testen und verbessern.

3.1

Was ist das YUI? – ein Überblick

Schauen wir uns zuerst das YUI in einem kleinen Überblick an. Konkret versteht Yahoo! das YUI als einen Satz von Utilities und Steuerelementen, die selbst in HTML und vor allen Dingen JavaScript und CSS geschrieben sind und vollständig transparent im Quellcode nachvollzogen und angepasst werden können. Ähnlich wie einige andere mächtige JavaScript-Frameworks hat Yahoo! mit dem YUI über zusätzliche Konstruktionen auch die Möglichkeit für eine OOP2 samt Klassen, Konstruktoren, indirekten Eigenschaftszugriffen über Getter und Setter und Vererbung auf Basis von JavaScript nachgebildet, was JavaScript in seiner Grundform nicht bietet. Der Fokus für die Anwendung des YUI ist dennoch die einfache Erstellung von RIAs unter Verwendung der üblichen Webtechniken wie DOM-Scripting, DHTML und AJAX. Die YUI-Bibliothek enthält zudem verschiedene mächtige CSS-Kernressourcen. 1

2

Es ist wohl offensichtlich, dass dieser Pionier des WWW hinter dem System steht. Und Yahoo! behält sich eine gewisse Kontrolle über das YUI vor, was das YUI von vollkommen freien Open Source-Projekten unterscheidet. Objektorientierte Programmierung.

3 Das YUI – Yahoo User Interface

Die YUI-Komponenten umfassen mittlerweile neben elementaren Kernkomponenten wie Schaltflächen, Eingabefeldern, Kalender, Animationen oder Menüs auch richtig schwergewichtige Komponenten wie einen Rich-Text-Editor, Cross-BrowserSupport, ein vierschichtiges CSS-System, ein YUILoader-Utility, ein ImageLoader, ein Color Picker Control und sogar diverse Test- und Entwicklungsfeatures wie ein YUI Test Utility, worüber ein (eingeschränktes) Unit-Testing-Framework in YUI zur Verfügung steht. Dieser schon sehr große Umfang an Komponenten und Features wurde in neueren Versionen um weitere Widgets wie beispielsweise eine SelectorKomponente, Charts, Profiler, Script/CSS Get und vor allen Dingen den immer wichtiger werdenden JSON-Support erweitert. Ein wesentliches Highlight des YUI gegenüber diversen wichtigen Konkurrenzbibliotheken ist die Modularität. Beim YUI braucht ein Webseitenersteller für seine RIA nur das aus der gesamten Bibliothek wirklich zu nehmen, was er auch konkret nutzen möchte. Das bedeutet nichts anderes, als dass bei einem Besucher nur der Teil des YUI auch geladen werden muss, der wirklich benötigt wird. Das beschleunigt natürlich das Laden sowie den Aufbau einer Webseite und ist bei einigen anderen Toolkits/Frameworks nicht so elegant gelöst. Das YUI ist also hochperformant und richtet sich bezüglich des Zusammenspiels mit der Serverseite stark auf PHP aus. Das bedeutet keinesfalls, dass man bei der Serverseite auf PHP beschränkt ist. Aber gerade die Anforderungen von PHP-Entwicklern an bestimmte clientseitige Strukturen werden besonders stark unterstützt.3 Hinweis Da das YUI von Yahoo! entworfen wurde, ist es natürlich auch stark an den Bedürfnissen von Yahoo!-Webapplikationen orientiert. Diese decken sich aber weitgehend mit den Anforderungen aller modernen Webapplikationen. Von daher muss das auf keinen Fall ein Nachteil sein.

3.1.1

Die offiziell unterstützten Browser

Weniger gut ist, dass das YUI explizit nur sogenannte A-Klasse-Browser unterstützt. Aber damit steht das YUI nicht allein da. Wie Yahoo! in seinen FAQ zum YUI ausdrücklich (und vollkommen richtig) betont, gibt es überhaupt keine leistungsfähige Bibliothek für JavaScript oder CSS, die in jedem Browser funktioniert. Die folgende offizielle Auswahl für die Version 2.5.1 ist dennoch etwas sehr eingeschränkt, da ein wesentliches Argument für die Verwendung eines Frameworks oder Toolkits ja explizit die Arbeitserleichterung bei der Anpassung an die verschiedenen Plattformen ist.

3

98

Wobei wir das in diesem Buch nicht weiter berücksichtigen – wir bleiben vollkommen neutral von der Serverseite.

3.2 Die YUI-Webseite und der Download

Win 98

Win 2000

IE 7.0

Win XP

Win Vista

Volle Unterstützung

Volle Unterstützung

IE 6.0

Volle Unterstützung

Volle Unterstützung

Volle Unterstützung

Firefox 2.+

Volle Unterstützung

Volle Unterstützung

Volle Unterstützung

Opera 9.+

Volle Unterstützung

Volle Unterstützung

Volle Unterstützung

Safari 3.0+

Volle Unterstützung

Mac 10.4

Mac 10.5

Volle Unterstützung

Volle Unterstützung

Volle Unterstützung

Volle Unterstützung

Volle Unterstützung

Volle Unterstützung

Tabelle 3.1: Die offiziell vollkommen unterstützten Plattformen im YUI 2.5.1 Besonders negativ fällt auf, dass Linux (geschweige denn ein Linux-Browser wie der Konqueror) überhaupt nicht erwähnt wird und die Versionsnummern der unterstützten Browser doch sehr hoch sind (insbesondere bei Opera und Safari). Allerdings funktionieren diverse Teile des YUI auch in nicht ausdrücklich als A-Klasse-Browser bezeichneten Webbrowsern (auch unter Linux) und für kommende RIAs wird man über kurz oder lang bei einem Besucher einfach eine gewisse Ausstattung voraussetzen müssen.

3.2

Die YUI-Webseite und der Download

Die Webseite http://developer.yahoo.com/yui/ ist – insbesondere für den Einstieg – die zentrale Anlaufstelle für alle Fragen zum YUI. Hier finden Sie neben FAQs und diversen Informationen insbesondere den direkten Download-Link (http://developer.yahoo.com/yui/download/) für die gesamte Bibliothek bzw. den Verweis auf die Sourceforge-Projektseite, worüber das YUI ausgeliefert bzw. verteilt wird. Daneben gibt es unter http://developer.yahoo.com/yui/docs/ eine sehr gute API-Dokumentation und unter http://developer.yahoo.com/yui/examples/ zahlreiche Beispiele.4

4

In der Version 2.5.1 sind es etwa 275.

99

3 Das YUI – Yahoo User Interface

Abbildung 3.1: Die Projektseite des YUI 5

Hinweis Mit dem Download der jeweils aktuellen YUI-Version (ein ZIPArchiv) erhalten Sie neben der eigentlichen Bibliothek auch die vollständige API-Dokumentation samt den Beispielen. Wir werden im Buch sehr eng mit der offiziellen YUI-Dokumentation5 interagieren und häufiger darauf verweisen.

3.3

Die Bestandteile des YUI

Wenn Sie in der lokalen Version das YUI-Archiv öffnen, finden Sie darin neben der Bibliothek, der Dokumentation und den Beispielen auch einen Ordner mit Namen build. Dieser enthält die Quellcodes (im Wesentlichen JavaScript- und CSS-Dateien) und Ressourcen (Bilder etc.) der einzelnen Komponenten bzw. Widgets des YUI. 5

Sie gefällt mir wirklich außerordenlich gut.

100

3.3 Die Bestandteile des YUI

Abbildung 3.2: Der Ordner build enthält die Komponenten des YUI.

101

3 Das YUI – Yahoo User Interface

3.3.1

Die Struktur der YUI-Bibliothek

Die YUI-Bibliothek selbst teilt sich grundsätzlich in verschiedene Bestandteile auf.

Die Utilities und Komponenten  Unter dem Begriff YUI Core finden Sie das YAHOO Global Object. Dieses stellt

die Basisvoraussetzung für alle YUI-Komponenten zur Verfügung.6 Dazu sind unter YUI Core eine DOM Collection (nützliche Methoden für die Interaktion mit dem DOM) und ein Event Utility (Event Normalization und Tools) zum Umgang mit Ereignissen zu finden.

 Die YUI Library Utilities entwickeln sich aktuell rasant und umfassen mittlerweile

auch diverse Features. Sie finden dort u.a. Utilities für Animationen, die BrowserHistory, Drag and Drop, JSON, verschiedene Loader und einen Connection Manager, der insbesondere für AJAX interessant ist.  Unter der Kategorie YUI Library Controls/Widgets sind die wesentlichen Kernkom-

ponenten für die Erstellung einer GUI für Ihre RIA zu finden, beispielsweise Buttons, Menüs, Kalender, Farbwahlkomponenten, Container (Module, Overlay, Panel, Tooltip, Dialog, SimpleDialog), Baum- und Registeransichten, aber auch mächtigere Komponenten wie der relativ neue Rich Text Editor und eine Slider-Komponente.  Die YUI Developer Tools enthalten Utilities bzw. ganze Frameworks zur Analyse

Ihrer RIA sowie zum Protokollieren und zum Testen (JUnit bzw. nUnit) von JavaScript-Lösungen. Sie finden derzeit dort ein Logger Control, einen Profiler samt ProfilerViewer Control und das YUI Test Utility. Hinweis Die Anzahl der Controls und Widgets des YUI sowie der Utilities wird permanent erweitert und verschiedene Controls und Widgets sowie Utilities bzw. Tools werden natürlich auch weiterentwickelt. So werden Sie in der Dokumentation des YUI bzw. auf den Webseiten von Yahoo! oft einen Hinweis finden, dass sich eine spezifische YUI-Komponente noch im Betastadium befindet. Solch ein Betastadium bedeutet aber nicht unbedingt, dass sich eine Komponente nicht schon in Produktion verwenden lässt oder dass sie unzuverlässig ist. Solch eine Kennzeichnung bedeutet nur, dass Yahoo! auf Feedback der Community über diese Komponente und deren API hofft, bevor der Zustand endgültig festgeschrieben wird. Die Kennzeichnung bedeutet weiter, dass es explizit zu erwarten ist, dass es noch Modifikationen im API geben wird, die möglicherweise nicht rückwärts kompatibel sind. Wenn Sie also eine Betakomponente in Ihr Projekt einbauen, müssen Sie möglicherweise in zukünftigen YUI-Releases einige Anpassungen in Ihrer Implementierung vornehmen, wenn Sie auf die neue Version der Komponente zugreifen wollen. 6

So ein oberstes Objekt findet man in den meisten APIs in der OOP.

102

3.3 Die Bestandteile des YUI

Zusätzlich zur Kennzeichnung einer Komponente als Betaversion gibt es eine Kennzeichnung von Komponenten als experimental. Eine solche Komponente ist noch nicht vollständig ausgetestet. Sie sollte nicht in kritischen Projekten eingesetzt werden, sondern dient im Wesentlichen dem Experimentieren durch die Community, die Yahoo! dann Feedback geben sollte.

Die CSS-Bibliotheken Von besonderer Bedeutung beim YUI sind auch die YUI Library CSS Tools, die wir aber aufgrund der äußerst einfachen Anwendung hier nur ganz kurz anreißen wollen. Diese Tools sind nicht zuletzt bei mehrspaltigen CSS-Designs zur Verhinderung umherspringender -Container in verschiedenen Browsern und Auflösungen von großem Nutzen. So gibt es mit der Bibliothek reset.css ein nützliches Feature, um alle browsereigenen Einstellungen zurückzusetzen. Das Resultat ist, dass kein HTMLElement mehr störende Eigenwirkungen wie individuelle Margins, Paddings etc. hat. Mit der Bibliothek font.css und zugehörigen Dateien werden alle Schriften auf Standardwerte eingestellt und base.css stellt für die wichtigsten Elemente gewisse Grundformatierungen her. Das sorgt dafür, dass diese Elemente für alle relevanten Browser alle auf konsistente Werte gesetzt sind, die überall dann gleich aussehen. Das Highlight des CSS-Pakets aber ist die Bibliothek grid.css. Mit der nur ca. 4 Kbyte großen Datei lässt sich das Layout einer Webseite beliebig in Spalten und Zeilen aufteilen. Man kann damit fast beliebig geschachtelte Layouts erstellen, die mit einem minimalen Aufwand an HTML-Tags auskommen und trotzdem barrierefrei sind. Wer schon einmal manuell versucht hat, ein solches Layout plattformneutral für alle wichtigen Browser aufzubauen, wird zu schätzen wissen, was dieses Paket an Nutzen bringen kann. Während die anderen drei CSS-Bibliotheken im Wesentlichen nur als externe Dateien in Ihre Webseite eingebunden werden, muss man bei der Verwendung der YUI Grids CSS doch ein paar Dinge machen, bevor das Layout so aussieht, wie Sie es brauchen. Aber das Verfahren ist wie schon angedeutet denkbar einfach. Am besten schauen Sie zuerst unter http://developer.yahoo.com/yui/grids/, welche Möglichkeiten Sie im Einzelnen haben. Insbesondere die Templates und vorgegebenen Beispiele und Grids sollten für die meisten denkbaren Layouts Ihrer Webseite bereits vollauf genügen. Die Anwendung besteht in der Regel darin, die vorgegebenen -Container mit den spezifischen IDs zu kopieren und darum eine Webseite zu bauen, deren Inhalte sich auf diese -Container verteilen. Die genaue Vorgehensweise ist bei jedem Template oder Beispiel genau erklärt und sollte mit etwas Kenntnissen in HTML und CSS ohne Probleme umzusetzen sein.

103

3 Das YUI – Yahoo User Interface

Abbildung 3.3: Ein Template im YUI Grids CSS wurde ausgewählt. Hinweis Über diese Bibliotheken hinaus gibt es im YUI diverse nützliche Tools, die das YUI zu einem echten Framework aufwerten. Wir werden diese Tools wie den YUI Compressor, das Logger Control oder den Log Reader im Laufe des Buchs kennenlernen.

104

3.4 Die konkrete Anwendung des YUI

Abbildung 3.4: Das Aussehen einer Seite, die auf so einem Template basiert, können Sie sich in einem separaten Fenster anzeigen lassen.

3.4

Die konkrete Anwendung des YUI

Wenn Sie Ihre RIA unter Verwendung des YUI erweitern oder von Grund auf neu erstellen wollen, können Sie im Grunde immer gleich vorgehen.7 Die konkrete Anwendung des YUI basiert auf  der Einbindung der notwendigen Ressourcen in die zugrunde liegende Webseite

(entweder aus einer eigenen Quelle oder direkt von den Webseiten von Yahoo!),  der Erzeugung einer gewünschten Komponente bzw. eines Utilities,  der Definition einer JavaScript-Funktion bzw. -Funktionalität auf Basis des YUI

und 7

Ich setze eine vernünftige Konzeption und Planung des gesamten Projekts natürlich voraus und möchte auch davon ausgehen, dass die Struktur der Website samt den gesamten HTMLSeiten bereits steht bzw. hier nicht berücksichtigt wird.

105

3 Das YUI – Yahoo User Interface

 der Verbindung zwischen der Komponente und der passenden Funktion bzw.

Funktionalität. Gegebenenfalls protokollieren und analysieren Sie zur Entwicklungszeit noch die Funktionalität der Komponente bzw. der gesamten Webseite und/oder optimieren im Anschluss die RIA.

3.4.1

Wie gehen Sie beim Einstieg am besten vor?

Am einfachsten lernt man meines Erachtens den Umgang mit YUI, indem man sukzessive einige der beigefügten YUI-Beispiele direkt ausprobiert, anschließend den Quellcode analysiert und dann modifiziert. Es wird aber auch für die konkrete Anwendung in der Praxis bei fast allen Komponenten und Widgets des YUI am Anfang die sinnvollste Vorgehensweise sein, dass Sie ein bestehendes Beispiel als Grundlage nehmen und für eigene Zwecke anpassen. Die grundsätzliche Vorgehensweise ist auch dabei eigentlich immer gleich. Daher sind diese Ausführungen unabhängig von dem konkreten Beispiel zu sehen – sie beschreiben eine universelle Herangehensweise, um eine bestimmte Komponente für eigene Zwecke zu verwenden.

Abbildung 3.5: Ein Beispiel für Drag&Drop

106

3.4 Die konkrete Anwendung des YUI

1. Zuerst suchen Sie über die Webseite des YUI eine Komponente bzw. Funktionalität, die für Ihre Aufgabenstellung am besten passen könnte oder die Sie allgemein interessiert. Zum Beispiel finden Sie diese auf der linken Seite unter der Kategorie YUI Components. Achtung Beachten Sie, dass die Entwicklung des YUI (wie die meisten Frameworks und Toolkits im AJAX-Umfeld) sehr dynamisch ist. So können laufend auch zu jeder Komponente Beispiele hinzukommen oder auch wieder entfernt werden. Auch kann sich der Aufbau der YUIWebseite natürlich immer wieder ändern.

2. Dann analysieren Sie deren Verhaltensweise und Funktionalität. Am einfachsten sollte das mit einem der vorhandenen Standardbeispiele funktionieren, das Sie einfach ausprobieren – entweder über Ihre lokale Installation des YUI oder direkt über die Webseiten von Yahoo!.

Abbildung 3.6: Die Beispiele auf den YUI-Seiten sind voll funktional.

107

3 Das YUI – Yahoo User Interface

3. Anschließend passen Sie mit der Dokumentation und den Beschreibungen bei dem Beispiel den Beispielcode – den Sie meist sogar direkt aus den Yahoo!-Seiten kopieren können – für Ihre Zwecke an.

Abbildung 3.7: In den Quelltexten finden Sie die Details, wie die Beispiele funktionieren. Hinweis Diese Schrittfolge wollen wir nachfolgend selbstredend noch mit konkreten Beispielen durchspielen.

Yahoo! selbst regt in der Anleitung zum YUI das Herantasten an das Toolkit über eine fünfstufige Vorgehensweise an: 4. Yahoo! empfiehlt für den ersten Kontakt mit dem YUI ausdrücklich eine Beschäftigung mit der DOM Collection und der Event Utility-Sammlung. Event und DOM sind – wie schon erwähnt – Teil des YUI Core (zusammen mit dem YAHOO Global Object) und stellen die wichtigsten Grundlagen für JavaScript-Entwickler bereit, die das YUI verwenden wollen. Sobald Sie diese fundamentalen Techniken angesehen und verstanden haben, empfiehlt Yahoo!, sich mit erweiterten Utilities wie Drag&Drop, Animation oder UI-Controls wie Button, Calendar und TabView zu beschäftigen und die verfügbaren Beispiele zu modifizieren. Und sofern Sie an den CSS-Komponenten des YUI interessiert sind, sollten Sie sich die Beispiele für

108

3.5 First contact – die DOM Collection

Reset, Base, Fonts und Grids (in dieser Reihenfolge) ansehen.8 Sie finden also in den Standardbeispielen des YUI sowohl einfache Beispiele, die sich exzellent für erste Experimente eignen, als auch komplexere. Und insbesondere mit den Utilities zu Drag&Drop, AJAX, JSON etc. wird es auch für erfahrene JavaScript-Programmierer interessant. Und auf diese Auswahl an erweiterten Möglichkeiten wollen wir im Folgenden nach der grundsätzlichen Beschäftigung mit der DOM Collection und der Event-Utility-Sammlung samt Beispielen ebenfalls eingehen. 5. Beachten Sie, dass es für jede Komponente des YUI eine vollständige Benutzungsanleitung auf der entsprechenden Webseite gibt. Und dazu erhalten Sie natürlich noch eine hervorragende und durchsuchbare API-Dokumentation. Dies ist eine ideale Quelle für die Anwendung einer spezifischen Komponente. 6. Es gibt für jede Komponente sogenannte Spickzettel (cheat sheets), die über die verschiedenen Webseiten verfügbar sowie als kompletter Satz herunterzuladen sind. Diese beschreiben eine einfache Schrittfolge, wie Sie die Komponente verwenden und anpassen können. 7. Experimentieren Sie mit der Erstellung Ihrer eigenen Webseiten unter Verwendung des YUI. Sie können YUI-Skripte und CSS-Dateien respektive die zugehörigen Bibliotheken sowohl aus Ihrer lokalen YUI-Installation (aus dem Verzeichnis build) als auch direkt von den Servern von Yahoo! einbinden. Wenn Sie die Module nicht manuell einbinden wollen, unterstützt Sie das YUI Loader Utility dabei als ein clientseitiges Ladepaket, das dynamisch aufgrund der Verwendung im Quellcode alle benötigten YUI-Ressourcen liefert. Dabei ist es vollkommen gleichgültig, ob Sie die Ressourcen von Ihren eigenen Servern oder Servern von Yahoo! laden.9 8. Und last but not least bietet es sich natürlich an, ein Mitglied der YUI-Community zu werden (http://developer.yahoo.com/community/). Dort finden Sie neben einem Blog (YUIBlog) u.a. ein Forum sowie in die Tiefe gehende Artikel, Videos und andere Inhalte über das YUI.

3.5

First contact – die DOM Collection

Wenn man sich heutzutage moderne Webseiten ansieht, zeigen diese allesamt ein dynamisches Verhalten. Dies gilt natürlich insbesondere für RIAs. So ein dynamisches Verhalten wird im Wesentlichen über die Manipulation des DOM erreicht – entweder aufgrund eines Ereignisses oder nach einem vorgegebenen Algorithmus. Objekte dieser DOM-Struktur stellen diverse Eigenschaften wie style oder innerHTML 8 9

Darauf gehen wir wie gesagt nur am Rande ein, weil die Anwendung wirklich sehr einfach ist. Die Anwendung des YUI Loader Utilities ist ziemlich einfach, da Sie für alle Ressourcen des YUI eine passende Skriptpassage in der Dokumentation finden, die Sie eigentlich nur in Ihre Webseiten kopieren müssen. Und wenn Sie nicht über die Anpassung dieser Beispiele gehen ist das Einzige, was Sie wissen müssen, der Name des interessierenden YUI Moduls. Und diese Informationen finden Sie unter http://developer.yahoo.com/yui/yuiloader/.

109

3 Das YUI – Yahoo User Interface

zur Verfügung, über die man via JavaScript das Aussehen und die Inhalte von Bestandteilen der Webseite ändern kann. So gesehen könnte das Leben eines Webentwicklers sehr einfach sein – wenn es nicht die teilweise extrem unterschiedlichen Verhaltensweisen verschiedener Browser gäbe sowie den gelegentlich doch recht umständlichen Zugang zum DOM. Die DOM Collection des YUI verspricht die Bereitstellung einer Familie an einfach anzuwendenden Methoden, um den Zugang zum DOM sowohl zu erleichtern als auch konsistent in allen unterstützten Browsern zu gewährleisten. Die Möglichkeiten umfassen allgemeines DOM-Skripting inklusive der Positionierung von Elementen und der browser-neutralen Verwaltung von CSS-Stilregeln.

3.5.1

Die Einbindung der DOM Collection

Zur Verwendung der DOM Collection binden Sie einfach die nachfolgenden Quelldateien über das script-Tag in Ihrer Webseite ein: Listing 3.1: Die Referenzen auf die externen JavaScript-Dateien, die direkt von den Seiten von Yahoo! aus dem Internet eingebunden werden

Sie sparen beim Laden der YUI-Ressourcen von den Yahoo!-Seiten natürlich Kapazität auf Ihrem eigenen Webserversystem. Dabei ist weniger der Speicherplatz als nennenswerte Ersparnis zu sehen als das eingesparte Datenvolumen. Und unter Umständen bewirkt das Laden von den Yahoo!-Servern sogar eine Steigerung der Performance Ihrer Applikation. Yahoo! verwendet zur Bereitstellung der YUI-Ressourcen ein schnelles und leistungsfähiges CDN. Hinweis CDN steht für Content Distribution Network oder Content Delivery Network und bezeichnet ein Netz lokal verteilter und über das Internet verbundener Server, mit dem größere Mengen an Inhalt möglichst ökonomisch und schnell ausgeliefert werden.

Natürlich können Sie auch auf Ihre lokale Kopie auf dem eigenen Webserver verweisen. Dann verwenden Sie entweder den absoluten URL zu Ihrem Webserver oder einen relativen URL ab dem Verzeichnis build.

110

3.5 First contact – die DOM Collection

Achtung Sie sollten bei der Einbindung von externen JavaScript-Dateien des YUI die vorgegebene Reihenfolge unbedingt einhalten. Mit der ersten Referenz http://yui.yahooapis.com/2.5.1/build/yahoo/yahoo-min.js verweisen Sie auf das YAHOO Global Object. Darüber stehen Ihnen Namensräume, Utilities für JavaScript samt diverser Erweiterungen, Filter, Protokollmöglichkeiten etc. zur Verfügung. Diese Basis des gesamten YUI-Konzepts muss erst einmal dem Browser zur Verfügung stehen, bevor die eigentlich gewünschten Komponentenstrukturen verarbeitet werden können. Dies gilt für diverse Anwendungen des YUI (aber nicht alle – beachten Sie immer die Dokumentation). YAHOO.util.Dom ist eine Klasse, die Sie nicht explizit instanzieren müssen. Sie können

also einfach über die Klasse auf die benötigten Methoden zugreifen10 (z.B. YAHOO.util.Dom.getXY("myElementId") oder YAHOO.util.Dom.getStyle("myElementId")). Tipp Wenn Sie mit dem YUI und der DOM Collection in der Praxis eine Gestaltung vornehmen, sollten Sie eine Einbindung der CSS-Bibliothek reset.css erwägen, um vorher alle browsereigenen Einstellungen zurückzusetzen. Und natürlich auch die anderen CSS-Bibliotheken berücksichtigen, wenn Sie ein komplexes Layout zuverlässig gestalten wollen. Wir werden das im Buch aber nicht machen.

3.5.2

Die Anwendung der DOM Collection

Über die DOM Collection können Sie beispielsweise die Positionierung von HTMLElementen konsistent und einfach vornehmen. Dazu gibt es entsprechend der modernen objektorientierten Programmierung Getter- und Setter-Methoden zum Zugriff auf Koordinatenangaben.11 Diese Methoden vereinfachen den doch manuell sehr diffizilen und stark von der Position eines HTML-Elements abhängenden Zugriff erheblich. Über die Positionsmethoden setXY(), getXY(), setX() und so weiter erhalten Sie einen sicheren und in allen unterstützten Browsern funktionierenden Zugriff auf die Position. Das folgende Codefragment verwendet die Methode getXY(), um ein Array mit der Xund Y-Koordinate des HTML-Elements mit der ID meinEle zurückzugeben. Umgekehrt kann man mit der Methode setXY() über ein Koordinatenarray ein Element positionieren. Listing 3.2: Zugriff auf Koordinaten im YUI var pos = YAHOO.util.Dom.getXY('meinEle'); YAHOO.util.Dom.setXY('meinEle', pos); 10 Mit anderen Worten – es handelt sich um Klassenmethoden. 11 Solche Getter und Setter finden Sie auch an anderen Stellen im YUI konsequent umgesetzt.

111

3 Das YUI – Yahoo User Interface

Der Zugriff auf die weiteren CSS-Eigenschaften eines Elements erfolgt über die Methoden getStyle() zum Abfragen und setStyle() zum Setzen der Werte.12 Damit haben Sie einen indirekten, gekapselten Zugriff auf die Eigenschaft style eines DOMObjekts zur Verfügung. In dem nachfolgenden Codefragment sehen Sie, wie Sie über die Methode setStyle() die Transparenz zweier HTML-Elemente mit der ID meinEle sowie der ID meinEle2 auf den Wert 0.5 festlegen und die Transparenz des Elements mit der ID meinEle3 über die Methode getStyle() abfragen. Listing 3.3: Zugriff auf die style-Eigenschaft YAHOO.util.Dom.setStyle(['meinEle', 'meinEle2'], 'opacity', 0.5); var opacity = YAHOO.util.Dom.getStyle('meinEle3', 'opacity');

Sie können mit setStyle() natürlich alle üblichen CSS-Werte für die Eigenschaft style angeben.

3.5.3

Ein erstes Beispiel mit der DOM Collection

Schauen wir uns als erstes Beispiel für das YUI ein vollständiges Listing zur Arbeit mit der DOM Collection an (yiu_dom_collection.html): Listing 3.4: Zwei Elemente in einer Webseite werden mit der DOM Collection manipuliert. 01 03 04 05

07 YUI Dom Collection 08

13

16 17 18 Die YUI Dom Collection 19

12 Das Setzen der Werte kann für mehrere Elemente gleichzeitig erfolgen, indem Sie als ersten Parameter ein Array mit IDs angeben.

112

3.5 First contact – die DOM Collection

20 21 27

Sie sehen in diesem Beispiel eine einfache Webseite. Es gibt eine Überschrift mit einer ID (Zeile 18) sowie ein Bild, das ebenso über eine ID verfügt (Zeile 19). In dem Skript werden mit getXY() die Koordinaten des Bilds abgefragt (Zeile 22) und die Überschrift in Zeile 23 mit setXY() so positioniert, dass diese über dem Bild liegt. In Zeile 24 werden zudem mit der Methode setStyle() die Transparenz der Überschrift auf den Wert 0.3 und in Zeile 25 die Schriftfarbe auf Rot festgelegt.

Abbildung 3.8: So sieht die Seite aus, wenn die CSS-Eigenschaften nicht über das YUI manipuliert wurden.

113

3 Das YUI – Yahoo User Interface

Abbildung 3.9: Das formatierte Aussehen der Webseite Achtung Ihnen sollte in dem Beispiel auffallen, dass der Skriptcontainer mit dem Zugriff auf die Elemente in der Webseite am Ende notiert wurde. Dies ist nicht unkritisch. Oder um es etwas genauer zu sagen – Sie sollten so eigentlich nicht arbeiten, wenn Sie sich an die offiziellen Regeln des W3C halten wollen. Aber auch das YUI kann die bekannten Probleme verschiedener Browser beim Aufbau des DOM nicht mir nichts dir nichts beseitigen. Das bedeutet, wenn sich ein Element in einer Webseite befindet und vorher im Quelltext bereits mit einem JavaScript auf die DOM-Repräsentation des Elements zugegriffen wird, wurde von den meisten Browsern dieses Element im DOM noch gar nicht angelegt. Und das bedeutet, der Zugriff per

114

3.5 First contact – die DOM Collection

JavaScript auf eine Objektrepräsentation dieses Elements greift ins Leere. Die einzig mögliche Kompensierung für dieses Problem besteht bei händischer Programmierung, dass der Skriptzugriff erst dann erfolgt, wenn das Element in den DOM gerendert wurde. Und dies erreicht man nur dann zuverlässig für alle relevanten Browser, wenn der Skriptcontainer in der Webseite nach dem Element notiert wird, am besten ganz am Ende einer Webseite. Und dies ist nach den offiziellen Regeln des W3C nicht gewünscht. Dennoch – entweder Sie ignorieren die Theoretiker des W3C oder Sie kämpfen gegen Windmühlen. Oder aber, Sie verwenden eine Technik des YUI, die Handler deferral genannt wird und zu einem der interessanten Features des YUI zählt (siehe Seite 121). Die DOM Collection stellt noch ein paar weitere Features zur Verfügung. Ein Ansichtsfenster ist zum Beispiel die sichtbare Breite und Höhe eines Dokuments. Mithilfe der DOM Collection können Sie über die Methoden getViewportWidth() und getViewportHeight() diese Werte ermitteln.

Verwaltung von Klassennamen im YUI Wie Sie mit etwas CSS-Background wissen, gibt es in CSS Klassen, die bestimmten Elementen in der Webseite zugeordnet werden können. Spannend an der DOM Collection ist, dass es eine gewisse Anzahl an Methoden gibt, um darüber dynamisch Klassennamen zu verwalten. Diese ergänzen die normalen DOM-Methoden und umfassen die nachfolgenden Methoden:  Die Methode getElementsByClassName(className, tagName, rootNode) liefert ein Array

mit Elementen, denen der angegebene Klassennamen zugeordnet ist. Die optionalen Parameter tagName und/oder rootNode können eine Einschränkung auf einen bestimmten Tag oder Wurzelknoten festlegen.  Mit der Methode hasClass(element, className) können Sie testen, ob ein Element

einen ganz bestimmten Klassennamen zugeordnet hat.  Über die Methode addClass(element, className) ordnen Sie den angegebenen Klassennamen einem Element zu und mit der Methode removeClass(element, className)

entfernen Sie den Klassennamen von einem Element.  Mithilfe der Methode replaceClass(element, oldClassName, newClassName) können Sie

auf einfache Weise einen vorhandenen Klassennamen durch einen anderen Klassennamen für das angegebene Element ersetzen.

115

3 Das YUI – Yahoo User Interface

3.6

Das Event Utility

Die Ereignisbehandlung in verschiedenen Browsern ist schlicht und einfach eine wahnsinnig aufwändige Sache. Leider Gottes unterscheiden sich nämlich die Ereignismodelle verschiedener Browser teilweise erheblich. Und sie sind in vielen Fällen inkompatibel.13 Das YUI Event Utility unterstützt die einfache und vor allen Dingen zuverlässige Erstellung von ereignisgesteuerten Webapplikationen über eine einfache Schnittstelle für den Zugriff auf DOM-Events und die Untersuchungen der Eigenschaften des event-Objekts eines Browsers. Das Event Utility-Package stellt u.a. die folgenden Features zur Verfügung:  Eine flexible Methode, um einen Eventhandler an ein Element oder auch mehrere

Elemente anzuhängen. Diese Basisanwendung wird sicher eine der wichtigsten Vorgehensweise für eine ereignisgestützte YUI-RIA darstellen.  Die automatische Verschiebung (bzw. den Aufschub) von Handler-Anhängen für

Elemente, die gerade nicht verfügbar sind. Das kann beim Laden einer Webseite notwendig sein, wenn der HTML-Code zum Aufbau des DOM-Objekts noch nicht verfügbar ist und dennoch ein Handler an ein Objekt gebunden werden soll. Dazu gibt es die Fähigkeit zum automatischen Ausführen von Funktionen, sobald ein DOM-Element entdeckt wird.  Eine automatische Korrektur des Geltungsbereichs sowie eine optionale Geltungs-

bereichszuweisung für eine Ereignisbehandlung. So eine Korrektur macht das teils extrem abweichende Verhalten verschiedener Browser beim Eventhandling leider notwendig. Eventhandler, die beispielsweise der attachEvent()-Methode des Internet Explorer übergeben werden, werden im Geltungsbereich des DOM-Objekts window ausgeführt. Daher verweist die Variable this in Ihrer Callback-Referenz auf das window-Objekt, wenn Sie damit arbeiten wollen oder müssen. Dies ist auch nach offizieller Aussage von Yahoo! nicht sonderlich nützlich, was sich auch mit meinen14 eigenen Erfahrungen deckt. Noch schlimmer wiegt jedoch die Tatsache, dass das Eventobjekt im Internet Explorer keinen verlässlichen Weg zur Identifizierung des Elements bietet, bei dem das Ereignis registriert war. Standardkonforme Browser hingegen stellen diese Information über die Eigenschaft currentTarget zur Verfügung, die der Internet Explorer bis heute nicht unterstützt. Das Event Utility kompensiert diese und noch einige andere Probleme und vereinheitlicht damit die Ereignisbehandlung.

13 Im Grunde gibt es bei standardkonformen Browsern wenige Probleme. Nur ist der Internet Explorer in einigen Versionen eben nicht standardkonform. Sie finden immer wieder in der Dokumentation des YUI Hinweise darauf, dass das YUI diverse Bugs im Internet Explorer kompensiert. Sicher muss man bei diesen Hinweisen aber auch berücksichtigen, dass Yahoo! gewisse marktpolitische Interessen in Bezug auf Microsoft hat. 14 unwesentlichen ;-).

116

3.6 Das Event Utility

 Das Event Utility sorgt für die automatische Abstraktion des event-Objekts eines

spezifischen Browsers. Diese Abstraktion werden sicherlich alle Programmierer schätzen, die sich bisher bei manueller Ereignisbehandlung mit der Verwertung des Ereignisobjekts mit Browser-Weichen herumschlagen mussten.  Sie haben zudem die Fähigkeit, ein beliebiges Objekt einzubinden, das mit dem Er-

eignis zum Handler gesendet wird.  Weiter stehen Ihnen Hilfsmethoden zum Zugriff auf Eigenschaften eines Ereignis-

ses zur Verfügung, die für die Browser-Abstraktion benötigt werden.  Das Event Utility sorgt für eine automatische Bereinigung von Listenern.

Hinweis Das Event Utility-Package enthält das CustomEvent-Objekt für die Erstellung individuell angepasster eigener Ereignisse. Solche angepassten Ereignisse erlauben Ihnen die »Veröffentlichung« von individuell festgelegten interessanten Momenten oder Ereignissen in Ihrem eigenen Code. Somit können andere Komponenten in Ihrer Seite solche Ereignisse in gewisser Weise »abonnieren« und dann auf sie reagieren. Wir werden darauf allerdings nur peripher eingehen.

3.6.1

Die Einbindung der Event und Custom Event Utilities

Zur Verwendung der Event und Custom Event Utilities binden Sie wie bei der DOM Collection nach dem YAHOO Global Object einfach die notwendigen externen JavaScript-Dateien über das script-Tag in Ihrer Webseite ein: Listing 3.5: Die Referenzen auf die Event und Custom Event Utilities

Tipp Natürlich können Sie – wie bei allen Bibliotheken des YUI – wieder auf Ihre lokale Kopie auf dem eigenen Webserver verweisen.

Die Komponenten von Event und Custom Event sind über YAHOO.util.Event und YAHOO.util.CustomEvent definiert.

117

3 Das YUI – Yahoo User Interface

3.6.2

Die Anwendung der Event und Custom Event Utilities

Das Ereigniskonzept des YUI basiert selbstverständlich auf einigen Basisereignissen, die Sie eigentlich grundsätzlich benötigen. Die Reaktion auf diese Basic Events erfolgt einfach über das Anhängen eines Eventhandlers an den DOM, indem Sie Ihren Eventhandler definieren und den Eventhandler an das Event Utility weiterreichen.

Die Methode addListener() Dabei geben Sie zum Beispiel eine Referenz auf das Ereignis an, auf das sie hören, und das Element, an welches Sie den Handler binden wollen. Das kann so aussehen, wie es das nachfolgende Codefragment zeigt: Listing 3.6: Die Reaktion auf einen Klick bei einem bestimmten Element var oElement = document.getElementById("meinEle"); function fktCallback(e) { alert("Warum hast du geklickt?"); } YAHOO.util.Event.addListener(oElement, "click", fktCallback);

Sie sehen hier die Definition für die Reaktion auf das Anklicken eines spezifischen Elements mit der ID meinEle. Die Referenz auf dieses Element wird als erster Parameter der Methode addListener() übergeben, die über YAHOO.util.Event zur Verfügung gestellt wird, um ein Reaktionsobjekt an ein DOM-Element zu binden. Diese Methode addListener() spezifiziert als zweiten Parameter einen Bezeichner für das konkrete Ereignis als String. Der dritte Parameter ist die Referenz auf eine Callback-Funktion. Diese wird damit immer dann aufgerufen, wenn das angegebene Ereignis auftritt. Sie können auch eine alternative Version verwenden, die wie folgt aussieht: Listing 3.7: Eine Alternativnotation function fktCallback(e) { alert("Warum hast du geklickt?"); } YAHOO.util.Event.addListener("meinEle", "click", fktCallback);

Auf den ersten Blick ist kaum ein Unterschied zu sehen. Es gibt ihn aber dennoch. Und er ist entscheidend. In diesem zweiten Fall erfolgt die Identifizierung des Elements in der Methode addListener() direkt über dessen HTML-ID ("meinEle") als String, anstatt als ersten Parameter eine Variable weiterzureichen, die auf das Elementobjekt verweist. Dies hat weitreichende Konsequenzen, was wir noch behandeln werden (siehe Seite 121).

118

3.6 Das Event Utility

Um einem Eventhandler mehrere Elemente anzuhängen, können Sie so vorgehen, wie es im folgenden Codefragment gezeigt wird: Listing 3.8: Mehrere Elemente reagieren auf einen Klick. // Ein Array mit Objektreferenzen, Element-IDs oder beidem var ids = ["el1", "el2", "el3"]; function fktCallback(e) { alert(this.id); } YAHOO.util.Event.addListener(ids, "click", fktCallback);

3.6.3

Ein vollständiges Beispiel

Schauen wir uns nun als zweites Beispiel für die Arbeit mit dem YUI ein weiteres vollständiges Listing an, das den Einsatz dieser Basisereignisse demonstriert (eventklick.html): Listing 3.9: Der Umgang mit Basisereignissen im YUI 01 03 04 05

07 YUI - Event Utility 08

13

16 17 18 Event Utility 19

20

21

22

23 24 32

Abbildung 3.10: Auf das erste Bild wurde geklickt. Die Webseite enthält neben einer Überschrift drei sensitive Bilder mit einer spezifischen ID, die jeweils auf einen Klick reagieren (über den Eventhandler click) und die referenzierte Funktion aufrufen. In dieser Funktion wird über die Eigenschaft innerHTML der Inhalt eines Ausgabebereichs in der Webseite geändert. Diesen Ausgabebereich kann man über die ID und die Methode getElementById() ansprechen (Zeile 27).

3.6.4

Wozu das Event Utility?

Sie haben nun gesehen, wie zumindest die Basisereignisse im YUI über das Event Utility verwaltet werden können. Was ist aber nun der Unterschied oder gar Vorteil des Event Utility gegenüber einer manuellen Ereignisbehandlung? Natürlich ist da einmal die einheitliche Schnittstelle zu sehen, die die unterschiedlichen Ereignismodelle in verschiedenen Browsern weitestgehend abschirmt. Aber das bedeutet nicht, dass nun alles gut ist. Als ich mich in das YUI eingearbeitet habe, habe ich in den offiziellen Seiten von Yahoo! zum YUI einen deutlich hervorgehobenen Hinweis entdeckt, der mich geradezu frohlocken ließ. Ich wurde in meinen Schulungen zur Webprogrammierung schon oft gefragt, wo es denn eine verbindliche Liste mit bestimmten Verhaltensweisen (Unterstützung von Stylesheets, Reaktion auf Ereignisse, ...) der wichtigsten relevanten Browser gäbe. Auch habe ich gelegentlich solche Leserbriefe bekommen mit entsprechenden Anfragen.15 Und nun habe ich in den Yahoo!-Seiten den Hinweis gefunden, dass es auch nach dem Kenntnisstand von Yahoo! keine zuverlässige Liste mit DOM-Events gibt, die anzeigt, in welchen Browsern welches

15 Ich hatte zwischenzeitlich richtig ein schlechtes Gewissen bekommen, dass ich keine solche Liste kannte und immer wieder darauf verwiesen habe, dass man immer für alle relevanten Browser testen muss.

120

3.6 Das Event Utility

Ereignis wirklich unterstützt wird.16 Das Event Utility führt auch keinerlei Beschränkungen für die Ereignisse ein, für die Sie Handler anhängen können. Das Event Utility wird stupide versuchen, einen Listener für jedes angegebene Ereignis anzuhängen. Es ist nach der deutlichen Aussage von Yahoo! in der reinen Verantwortung eines Entwicklers, zu überprüfen, ob diese Konstruktion dann in allen relevanten Browsern funktioniert, für die ein Entwickler seine Webseiten konstruiert. So gesehen ist die vereinheitlichte Schnittstelle schon ganz nett, aber es gibt noch ein wirkliches Highlight. Der wesentliche Vorteil des Event Utility gegenüber der manuellen Ereignisbehandlung liegt nämlich woanders.

Handler deferral Wie oben beschrieben gibt es Probleme in verschiedenen (wenn nicht fast allen) Browsern, wenn man versucht, auf ein DOM-Element zuzugreifen und dieses vom Browser noch nicht über das Rendern der Webseite angelegt wurde. Das Event Utility kann versuchen, ein DOM-Element über dessen ID zu finden. Wird das Element gefunden – wunderbar, aber das ist nicht das Bemerkenswerte. Der Vorteil zeigt sich im Fehlerfall. Schlägt diese Suche nach dem Element durch das Event Utility fehl, wird die Suche nach dem Element nach etwa 15 Sekunden fortgesetzt, nachdem die Webseite geladen wurde. Genau genommen wird das Event Utility periodisch nach einem Element suchen, bis das Ereignis window.onload ausgelöst wurde.17 Dies kann in vielen Fällen das Problem mit dem fehlerhaften Zugriff auf ein DOM-Element lösen. Achtung Dieses sogenannte Handler deferral (Aufschub oder Verschiebung) funktioniert aber nur, wenn Handler über eine Element-ID angehängt werden; wenn Sie den Handler an eine DOM-Objektreferenz hängen, wird es nicht funktionieren.

Reaktion auf Verfügbarkeit – onAvailable() und onContentReady() Dieses Problem mit der Verfügbarkeit bestimmter Funktionalitäten beziehungsweise Objekte in einer Webapplikation ist ein wirkliches Dilemma, das noch erheblich weiter reicht. Das YUI kompensiert jedoch auch viele dieser weiteren Probleme durch einige interessante Methoden.

16 Und das gilt übertragen auch für viele andere Verhaltensweisen von Browsern. 17 Also im Grunde die ganze Zeit, solange die Webseite im Browser angezeigt wird.

121

3 Das YUI – Yahoo User Interface

So gibt es beispielsweise die Methode onAvailable(). Darüber können Sie eine Funktion definieren, die unmittelbar dann ausgeführt wird, wenn ein Element im DOM entdeckt wird. Hinweis Yahoo weist allerdings ausdrücklich daraufhin, dass dies kein Ersatz für die Definition eines Handlers von einem Element ist. Diese Methode soll im Wesentlichen beim Ladeprozess einer Seite eingesetzt werden.

Es gibt drei Argumente für die Methode. Das erste Argument ist die ID des Elements, das zweite ein Eventhandler und Argument 3 ist eine Referenz auf die CallbackFunktion. Beispiel (verfuegbar.html): Listing 3.10: Reaktion auf die Verfügbarkeit von einem Element ... 17 27 28

29 30

Der Beginn des Listings entspricht den letzten Beispielen und ist deshalb nicht abgedruckt. In Zeile 19 und 20 sehen Sie die Methode onAvailable(). Die Methode onContentReady() wird mit genau der gleichen Syntax wie die Methode onAvailable() angewendet. Der einzige wirkliche Unterschied zwischen den Methoden ist, dass die Methode onContentReady() wartet, bis sowohl das Zielelement als auch

dessen nächstes Geschwisterelement18 im DOM geladen sind. Dies garantiert, dass der Inhalt des Zielelements (der direkte Nachfolgeknoten) vollständig geladen wurde. Wenn die Methode onContentReady() überhaupt kein Geschwisterelement entdeckt, wird das Ereignis window.load abgefeuert. 18 Diese Bezeichnung stammt aus dem XML-Umfeld.

122

3.7 Die Möglichkeiten der YUI Library Utilities

Abbildung 3.11: Das Bild ist verfügbar und eine Funktion wird ausgelöst.

onDOMReady() In die gleiche Richtung zielt auch die Methode onDOMReady(). Damit können Sie eine Funktion ausführen, sobald der DOM in einem »brauchbaren« Zustand ist. Das bedeutet, er wird vom YUI-System als strukturell komplett angesehen. Dies kompensiert nach den Aussagen von Yahoo! im Wesentlichen Bugs im Internet Explorer, aufgrund deren Skripte Fehler melden können, wenn der DOM vom Browser in einem unvollständigen Zustand aufgebaut wurde. Hinweis Darüber hinaus bietet das Event Utility natürlich noch einige weitere Möglichkeiten wie das Entfernen von Ereignissen über YAHOO.util. Event.removeListener(), das Abfragen von allen angehängten Listenern über YAHOO.util.Event.getListeners(), das Entfernen von allen angehängten Listenern über YAHOO.util.Event.purgeElement() oder das Definieren von angepassten Ereignissen. Dafür sei aber auf die hervorragende Dokumentation und die Beispiele des YUI verwiesen.

3.7

Die Möglichkeiten der YUI Library Utilities

Die YUI Library Utilities stellen eine extrem umfangreiche und mächtige Funktionalität zur Verfügung. In der Version 2.5.1 des YUI umfasst dies nach der Dokumentation des YUI folgende Features, die aber derzeit zu einem recht großen Teil noch als beta gekennzeichnet sind:  Animation Utility  Browser History Manager  Connection Manager (für XHR/AJAX)  Cookie Utility

123

3 Das YUI – Yahoo User Interface

 DataSource Utility  Drag and Drop Utility  Element Utility  Get Utility (dynamisches Laden von Skripten und CSS)  ImageLoader Utility  JSON Utility  Resize Utility  Selector Utility  YUI Loader Utility

Angesichts der Vielzahl der Möglichkeiten müssen wir uns bei den begrenzten Seiten des Buchs natürlich beschränken und exemplarisch ein paar ausgewählte Utilities herausgreifen. Konkret werden wir uns um Drag&Drop, AJAX mit dem Connection Manager und JSON kümmern.

3.7.1

Drag&Drop mit dem YUI

Drag&Drop ist in »normalen« Webseiten selten üblich. In Desktopapplikationen und damit auch RIAs hingegen ein »Must have« für bestimmte Situationen. Über den URL Hier finden Sie Beispiele zur Anwendung von Drag&Drop. Als konkretes Beispiel zur Demonstration der Möglichkeiten des Drag and Drop Utility wählen wir Basic Drag and Drop aus. Dieses Beispiel soll die Basisapplikation sein, die wir analysieren und anpassen wollen. Zuerst sehen wir uns an, wie das Originalbeispiel aussieht und was man damit machen kann. Sie sehen bei diesem Originalbeispiel drei farbige Rechtecke (jeweils div-Container mit CSS-Formatierung), die Sie per Drag&Drop beliebig in der Webseite verschieben können.

3.7.2

Anpassen des Originalbeispiels für eigene Zwecke

Wir wollen nun auf das Originalbeispiel aufbauend eine eigene Drag&Drop-Applikation erstellen. Die Vorgehensweise ist wie gesagt exemplarisch für fast alle Utilities und Komponenten im YUI. Unterhalb der Beispielapplikation sehen Sie bei den meisten Beispielen des YUI in der Webseite von Yahoo die entscheidenden Quelltextpassagen – in diesem Fall die drei -Container und eine JavaScript-Funktion. Diese können Sie natürlich direkt aus dem Anzeigebereich herauskopieren oder im Quelltext der Seite suchen, kopieren und in einer eigenen Applikation verwenden. Aber wir wollen noch etwas anders – und meines Erachtens auch einfacher bzw. strukturierter – vorgehen.

124

3.7 Die Möglichkeiten der YUI Library Utilities

Abbildung 3.12: Das Originalaussehen der Drag&Drop-Beispielapplikation

Abbildung 3.13: Die Rechtecke wurden mit Drag&Drop zusammengeschoben.

125

3 Das YUI – Yahoo User Interface

Wenn Sie in der Webseite den Link YUI DRAG AND DROP suchen und anklicken,19 sehen Sie in der folgenden Webseite eine vollständige Anleitung, wie Sie die Drag&DropFunktionalität der Applikation in einem eigenen Beispiel verwenden können. Im konkreten Beispiel finden Sie als Bezug zum YUI zwei Referenzen auf externe JavaScript-Dateien des YUI, die Sie in Ihre Seite einzubinden haben. Wir haben das ja schon in den bisherigen Beispielen gesehen. An diesen Stellen werden Sie in der Regel gegenüber der Vorgabe von Yahoo! nichts ändern müssen. Listing 3.11: Die Referenzen auf die notwendigen externen JavaScript-Dateien

Um nun ein einfaches Drag&Drop für ein beliebiges DOM-Element zu ermöglichen, erstellen Sie in einem 12

22 28

127

3 Das YUI – Yahoo User Interface

Abbildung 3.14: Die Originalanordnung

Abbildung 3.15: Die Bilder wurden verschoben.

128

3.7 Die Möglichkeiten der YUI Library Utilities

Drag&Drop ist sicher eine der interessantesten und wichtigsten Erweiterungen einer klassischen Webapplikation um RIA-Funktionalität. Wir wollen deshalb in den folgenden Abschnitten noch einige weitere interessante Features und Anwendungen von Drag&Drop im YUI besprechen.

Visuelle Anzeige eines Stellvertreterelements Bei vielen Implementierungen von Drag&Drop gibt es Probleme mit der visuellen Verschiebung von Elementen. Ein Element bleibt quasi nicht am Mauszeiger kleben, wenn es verschoben wird. Es hängt irgendwie hinterher. Oft passiert dies, weil ein Element zu groß ist und daher während der Verschiebeaktion vom Browser nicht zeitnah gerendert werden kann. Um dieses Problem zu lösen, kann man ein Stellvertreterelement (Proxy-Element) verwenden. Dessen optische Präsentation ist bedeutend kleiner als die des Originals. Daher kann dieses leichter und schneller vom Browser auf der Oberfläche gerendert werden. Das Drag and Drop Utility im YUI macht es extrem einfach, so einen Effekt zu nutzen. Sie müssen nichts weiter tun, als eine Instanz von YAHOO.util.DDProxy anstelle von YAHOO.util.DD zu erzeugen (yui1_2.html): Listing 3.14: Zwei Elemente werden bei der Verschiebung visuell über ein Stellvertreterelement repräsentiert. var dd1 = new YAHOO.util.DDProxy("b1"); var dd2 = new YAHOO.util.DDProxy("b2");

Abbildung 3.16: Bei der Verschiebung des Bilds können Sie deutlich den skizzierten Rahmen als Stellvertreterelement erkennen.

129

3 Das YUI – Yahoo User Interface

Mit einem Objekt vom Typ YAHOO.util.DDTarget können Sie ein Element auch als Ziel einer Drag&Drop-Aktion festlegen, wobei dieses Element dann selbst nicht verschoben werden kann.

Der Drag and Drop Manager Drag&Drop-Operationen innerhalb einer Webseite werden im YUI über den Drag and Drop Manager verwaltet. Dieses Objekt steht über YAHOO.util.DragDropMgr oder einen kürzeren Alias YAHOO.util.DDM zur Verfügung. Dieser Drag and Drop Manager kontrolliert eine ganze Reihe von Schlüsseleinstellungen, die Sie möglicherweise bei der Konfiguration Ihrer Drag&Drop-Interaktionen interessieren könnten, zum Beispiel die verstrichene Zeit, die festgelegt, wann ein mousedown-Event zu einem dragEvent wird. Dies wird via YAHOO.util.DragDropMgr konfiguriert. Listing 3.15: Festlegen der Verzögerung //setzt die Verzögerung auf 1200 Millisekunden YAHOO.util.DragDropMgr.clickTimeThresh = 1200;

Darüber hinaus gibt es eine sehr große Anzahl an Konfigurationsmöglichkeiten über YAHOO.util.DragDropMgr. Dies ist in der API-Dokumentation für dieses Objekt ausführlich beschrieben.

Interaktionsgruppen Jedes Drag&Drop-Objekt gehört zu einer oder mehreren Interaktionsgruppen. Drag&Drop-Events werden unter YUI nur dann abgefeuert, wenn das verschobene Element mit anderen Objekten interagiert, die mit diesem eine gemeinsame Gruppenmitgliedschaft teilen. Ein Objekt wird einer Interaktionsgruppe zugewiesen, indem als zweiter Parameter beim Konstruktor eine Gruppe angegeben wird. Wenn in dem Konstruktor eines Objekts keine Gruppe spezifiziert wird, gehört das Objekt immer zur Defaultgruppe. Über addToGroup() können auch nachträglich Elemente einer Gruppe hinzugefügt werden. Natürlich können auch Elemente wieder aus einer Gruppe entfernt werden (mit removeFromGroup()). Listing 3.16: Der Einsatz von Gruppen // keine Gruppe wird angegeben - dd0 gehört zur Defaultgruppe var dd0 = new YAHOO.util.DD("element0"); // dd1 ist Mitglied von group1 var dd1 = new YAHOO.util.DD("element1", "group1"); // dd2 ist Mitglied von group2 var dd2 = new YAHOO.util.DD("element2", "group2"); // dd3 ist Mitglied von group1 var dd3 = new YAHOO.util.DD("element3", "group1"); // dd3 wird zusätzlich group2 hinzugefügt und damit Mitglied

130

3.8 Der Connection Manager und die AJAX-Funktionalität des YUI

// von beiden Gruppen dd3.addToGroup("group2"); // das Elemente dd1 Wert aus der Gruppe group1 entfernt dd1.removeFromGroup("group1");

Reaktion auf bestimmte Ereignisse In vielen RIAs genügt es nicht, wenn man einfach ein Objekt in einer Webseite verschiebbar macht. In den meisten Fällen muss man in Abhängigkeit von gewissen Ereignissen bei der Drag&Drop-Aktion bestimmten Code schreiben, der mit interessierenden Momenten in der Aktion korrespondiert. So müssen Sie beispielsweise darauf reagieren, wenn das Verschiebereignis startet, wenn das verschobene Objekt den Bereich eines anderen Objekts erreicht, wenn das verschobene Objekt losgelassen wird und so fort. Das Drag and Drop Utility stellt quasi in Kooperation mit dem Event Utility verschiedene Möglichkeiten bereit, die Ereignisse während aller potenziellen interessanten Momente der Interaktion abfeuern.

3.8

Der Connection Manager und die AJAX-Funktionalität des YUI

Das YUI nennt sich ja explizit ein Toolkit für die Entwicklung von AJAX-Applikationen. Wie schon in Kapitel 2 ausgeführt, spielt bei AJAX-Frameworks und Toolkits die Funktionalität von AJAX in Bezug auf die reine Datennachforderung oft nur eine scheinbar untergeordnete, eher nebensächliche Rolle. Diese reine AJAXDatentransaktion ist dennoch ein kleiner, aber zentraler Teil eines AJAX-Frameworks oder -Toolkits. Im YUI stellt der Connection Manager das Utility zur Verfügung, über das Sie in Webseiten einen HTTP-Request über eine einfache Schnittstelle zum XMLHttpRequest-Objekt weiterreichen können sowie die Antwort zur Verfügung gestellt bekommen. Der Connection Manager stellt eine Browser-übergreifende Instanzierung des XMLHttpRequest-Objekts zur Verfügung, verwaltet die Antwort des Servers und verwendet ein Callback-Pattern zur Verarbeitung der Antwort des Servers.

3.8.1

Die Einbindung der notwendigen Ressourcen

Zur Verwendung des Connection Managers müssen Sie wie üblich die notwendigen externen JavaScript-Dateien in Ihre Webseite einbinden. Listing 3.17: Die Einbindung des Connection Manager für die Verwaltung von AJAX-Datentransaktionen

131

3 Das YUI – Yahoo User Interface





AJAX mit dem YUI

Kennzeichen	Gebiet
" + meinJSONObjekt.bindings[i].kennzeichen + "	" + meinJSONObjekt.bindings[i].gebiet + "

58 59 60

Bild	Info
135 3 Das YUI – Yahoo User Interface 57

61 62 106

136

3.8 Der Connection Manager und die AJAX-Funktionalität des YUI

Abbildung 3.17: Beim ersten Bild werden verschiedene Informationen aus der Serverantwort angezeigt. Die grundsätzliche Funktionalität dieses Beispiels ist in Kapitel 2 ja schon geschrieben worden. Der gravierende Unterschied zur ersten Version besteht darin, dass in diesem Fall explizit statt einer händischen Programmierung die Handler-Struktur und das Callback-Objekt aus dem YUI benutzt werden. In den Zeilen 65 bis 78 sehen Sie die Definition des Handlers für den Erfolgsfall. Über die lokale Variable o haben Sie Zugang zur Antwort des Servers. Sie repräsentiert damit das AJAX-Kommunikationsobjekt vom Typ XMLHttpRequest. Sofern eine Antwort des Servers eingetroffen ist, erfolgt in der Funktion das Zusammensetzen einer Ausgabe aus der Serverantwort samt verschiedenen Header-Feldern.

137

3 Das YUI – Yahoo User Interface

Vollkommen analog ist der Handler für den Fehlerfall in den Zeilen 80 bis 87 aufgebaut. Nur wird die generierte Antwort hier nicht ausgegeben. Das sei Ihnen selbst überlassen. Sie kann entweder als Fehlermeldung angezeigt22 oder auch mit den Mitteln des YUI protokolliert23 werden. Die Definition des Callback-Objekts sehen Sie in den Zeilen 90 bis 93. Hier werden an die Member success und failure über Funktionsreferenzen die entsprechenden Funktionen gebunden. In den Zeilen 95 bis 100 sehen Sie die Definition der Funktion, die bei den jeweiligen Bildern über den Eventhandler onMouseOver aufgerufen wird. Die entscheidende Stelle ist die Zeile 99. Hier erfolgt die Initiierung einer asynchronen Transaktion unter Verwendung des Connection Manager Utility.

Überschreiben des Caching Bei AJAX-Anfragen gibt es grundsätzlich ein großes Problem in Bezug auf das Zwischenspeichern (Caching) von Daten bei einer GET-Anfrage. Es kommt leider nicht selten vor, dass Daten bei einer AJAX-Anfrage vom Server nicht neu angefordert werden, obwohl es notwendig wäre. Der Browser holt die Daten einfach aus dem lokalen Zwischenspeicher (Cache). Tipp Bei einer händischen Programmierung hängt man als Workaround zur Vermeidung des Caching-Problems zum Beispiel einfach an den Querystring einen zufälligen Wert oder einen Timestamp an. Dieser wird mit JavaScript generiert und muss im Grunde weder auf dem Server noch im Client später weiterverwertet werden. Er soll dem Browser bloß suggerieren, dass Daten neu geladen werden müssen. Der Connection Manager des YUI kann nun automatisch einen Timestamp-Parameter an den Querystring eines HTTP-GET-Request anfügen und damit dieses zwischenspeichernde Verhalten des Browsers überschreiben. Um das zu erreichen, müssen Sie das Callback-Objekt über eine weitere Eigenschaft cache entsprechend konfigurieren. Hinweis Sie erhalten bei so einer Maßnahme ein Schlüssel/Wert-Paar rnd=timestamp als Erweiterung im Querystring. Dies kann unter Umständen gewisse Nebeneffekte auslösen, die Sie berücksichtigen und testen müssen.

22 Im folgenden Beispiel werden wir das aber exemplarisch vorführen. 23 Auch darauf gehen wir in dem Kapitel noch ein.

138

3.9 Das JSON Utility

Listing 3.22: Das Zwischenspeichern wird ausgeschaltet. var callback = { cache:false }

Das Callback-Objekt und der Datei-Upload Wenn Sie Dateien unter Verwendung von YAHOO.util.Connect.setForm zum Webserver übertragen, wird das Callback-Objekt an Stelle der Member success oder failure einen upload-Handler benötigen. Dieser sieht schematisch so aus: Listing 3.23: Der Upload von Dateien var callback = { upload: function(o) { /* Der Code des Upload-Handlers */ }, argument: [argument1, argument2, argument3] }

Das Callback-Objekt und ein Timeout Für jede Transaktion können Sie einen Timeout definieren. Dazu gibt es die Eigenschaft timeout, für die Sie in Millisekunden angeben können, wie lange maximal bis zum Erfolgsfall gewartet wird. Schematisch sieht das so aus: Listing 3.24: Angabe eines Timeout var callback = { success: function(o) { /* Handlercode im Erfolgsfall */ }, failure: function(o) { /* Handlercode im Fall eines Fehlers*/ }, timeout: 5000, argument: [argument1, argument2, argument3] }

3.9

Das JSON Utility

In den direkten Zusammenhang mit AJAX fällt natürlich auch JSON (JavaScript Object Notation).24 Das JSON Utility ist eine YUI-Implementation für die Unterstüt24 Was in Kapitel 2 ja genauer ausgeführt wird.

139

3 Das YUI – Yahoo User Interface

zung von Daten im JSON-Format über JavaScript. Dazu stellt das JSON Utility Methoden bereit, die die Konvertierung JSON-to-String und String-to-JSON sowie eine Validierung ermöglichen.

3.9.1

Das JSON Utility verwenden

Um das JSON Utility in Ihrer Webseite einzusetzen, binden Sie wie üblich die notwendigen Ressourcen in die Webseite ein. Listing 3.25: Die Einbindung der Ressourcen für das JSON Utility

Die Klasse YAHOO.lang.JSON muss nicht explizit instanziert werden. Die Methoden darin sind also Klassenmethoden, die Sie direkt verwenden können.

3.9.2

Anwenden des JSON Utility

Das JSON Utility erweitert YAHOO.lang um zwei Klassenmethoden zur Transformation von Daten aus dem JSON-Format in einen String und zurück. Zur Transformation eines JSON-Strings in ein Array mit den einzelnen Daten verwenden Sie die Methode YAHOO.lang.JSON.parse(). Dieser übergeben Sie den JSONString als Parameter. Optional können Sie als zweites Argument die Referenz auf eine Filter- oder Formatfunktion angeben. Das ganze Verfahren sieht dann so aus, wie das skizzierte Beispiellisting verdeutlicht: Listing 3.26: Parsen eines JSON-Strings var jsonString = '{"id":1234,"preis":24.5,"aufLager":true }'; // Parsing von JSON-Strings kann eine Ausnahme vom Typ // SyntaxError auswerfen. Deshalb sollte das Parsen in einen // try-catch-Block eingeschlossen werden try { var prod = YAHOO.lang.JSON.parse(jsonString); } catch (e) { alert("Fehler"); } // Verwerten der Daten if (prod.aufLager != true) { alert("Produkt nicht vorhanden"); }

140

3.9 Das JSON Utility

Hinweis Grundsätzlich kann man aus einem String im JSON-Format auch mittels der JavaScript-Funktion eval() die Werte extrahieren. Diese Funktion gilt jedoch als nicht sonderlich sicher und Yahoo! weist explizit daraufhin, dass man stattdessen beim Einsatz des YUI unbedingt YAHOO.lang.JSON.parse() verwenden sollte.

3.9.3

Ein vollständiges AJAX-Beispiel mit JSON

Für ein vollständiges praktisches Beispiel zur Verarbeitung von JSON bietet sich der Umbau unseres zweiten AJAX-Exempels aus Kapitel 2 an. Auch hier haben wir per AJAX Daten vom Server angefordert, diese im JSON-Format vom Server erhalten und auf dem Client strukturiert ausgewertet. Dabei kam die JavaScript-Funktion eval() beim Aufbau eines JSON-Objekts zum Einsatz. In der folgenden Modifikation dieses Beispiels wollen wir einmal die AJAX-Anfrage über das YUI durchführen und zudem die Methode parse() zum Evaluieren der JSON-Struktur verwenden (ajaxyuijson.html): Listing 3.27: Eine AJAX-Applikation mit JSON-Verwertung 01 03 04 05

07 Beispiel AJAX und JSON mit dem YUI 08

13

16



151

3 Das YUI – Yahoo User Interface

3.11.4

Der LogReader

Damit Sie Nachrichten des Logger auf dem Bildschirm sehen können, müssen Sie eine Instanz der Klasse YAHOO.widget.LogReader erstellen: Listing 3.30: Erstellen eines Log Reader

Sie können einen LogReader auch einem spezifischen HTML-Element anhängen, indem Sie die ID des Elements dem Konstruktor des Logger übergeben: Listing 3.31: Die ID des Elements wird dem Konstruktor übergeben.

Ebenso funktioniert es, dass Sie einen LogReader an ein spezifisches HTML-Element anhängen, indem Sie eine Elementreferenz im Konstruktor des Logger angeben: Listing 3.32: Die Variante mit der Elementereferenz

Achtung Beachten Sie auch hier bei der Elementreferenz wieder die bereits erwähnten üblichen Probleme, wenn sich ein Element in einer Webseite befindet und vorher im Quelltext bereits mit einem JavaScript auf die DOM-Repräsentation des Elements zugegriffen wird. Aber auch sonst kann es unter gewissen Konstellationen zu dem Problem kommen, dass bei einer Protokollierung ein Objekt noch nicht erzeugt wurde. Es kann – je nach Aufbau Ihrer Webseite – also notwendig sein, dass Sie den gesamten Logger-Code ans Ende der Webseite verlagern. Das müssen Sie gegebenenfalls ausprobieren.

152

3.11 Kontrollieren, Überwachen und Optimieren Ihrer YUI-RIA

Schreiben der Protokollnachrichten Um eine Protokollnachricht zu erzeugen, verwenden Sie die Funktion YAHOO.log(), die Teil des Yahoo Global Object ist: Listing 3.33: Eine Nachricht wird erstellt – hier etwa die Meldung eines Webservers im Fehlerfall bei einer AJAX-Anfrage.

Um die Nachrichten einer Kategorie zuzuordnen, geben Sie als zweiten Parameter eine solche an. Listing 3.34: Protokollnachrichten einer Kategorie zuordnen

Konkrete Anwendung des Logger YAHOO.widget.Logger ist eine Klasse, die hereinkommende Nachrichten verwaltet und sie für die Ausgabe in Instanzen des LogReader verfügbar macht.

Tipp Indem Sie die Eigenschaft maxStackEntries des Logger spezifizieren, können Sie die Anzahl der Protokollnachrichten festlegen, die der Logger verwalten wird. Bei Erreichen des Limits wird die älteste Nachricht beseitigt (first in first out).

Einige Browser habe eine globale Methode console.log() implementiert, die Ihnen ganz verschiedene Dienste anbieten kann. So kann beispielsweise die FireBug-Erweiterung des Firefox oder die Safari JavaScript-Konsole verwendet werden, um Protokollnachrichten für die Methode console.log() in den Browser-spezifischen Komponenten anzuzeigen. In der Grundeinstellung verwendet der YUI Logger diese Methode nicht, aber Sie können dieses Feature über den Aufruf YAHOO.widget.Logger.enableBrowserConsole() aktivieren. Mit YAHOO.widget.Logger.disableBrowserConsole() deaktivieren Sie das Feature wieder. Über YAHOO.widget.Logger.reset() können Sie alle Protokollnachrichten löschen.

153

3 Das YUI – Yahoo User Interface

Mithilfe der Klasse YAHOO.widget.LogReader erstellen Sie nun ein Standalone-UI-Control in Ihrer Webseite. Darüber können Sie auf einfache Weise Nachrichten des Logger anzeigen. Die Sichtbarkeit des LogReader-UI-Control kann über die Methoden show() und hide() gesteuert werden. In der Grundeinstellung ist der LogReader sichtbar. Tipp Die erweiterten Möglichkeiten eines LogReader gestatten u.a. das Filtern von Meldungen sowie die Steuerung der Berichterstattung. Ebenso ist eine individuelle optische Gestaltung über CSS möglich. Im Zusammenhang mit dem Erstellen von Protokollnachrichten gibt es darüber hinaus noch diverse weitere Einstellungsmöglichkeiten, für die auf die Dokumentation verwiesen sei.

Ein praktisches Beispiel – Protokollieren einer AJAX-Anfrage Schauen wir uns ein vollständiges Beispiel zum Protokollieren einer AJAX-Anfrage an. Wir bauen einen Logger in das Beispiel zum Anfordern und Verarbeiten von JSON-Daten per AJAX auf Seite 141 ein und verwerten die Protokollnachrichten (ajaxyuijson_logger.html): Listing 3.35: Die Schritte der AJAX-Kommunikation werden protokolliert. 01 03 04 05

07 Beispiel AJAX und JSON sowie dem Logger 08 mit dem YUI 09

12

15

20

21



Protokollierte JSON-Verwertung mit AJAX und dem YUI Klick

09

14

08

11

21

27 28 29 Die erste Applikation mit Dojo und 30 verschiedenen Widgets 31 Ein Textbereich 32

34 Zwei ToggleButton 35 Mit div 36

37 Mit Button 38

39 Ein Eingabefeld für eine validierte Zeiteingabe

188

4.8 Ein erstes Beispiel mit Dojo-Widgets

40

41 42

In Zeile 15 sehen Sie das Laden des Dojo-Codes für das Modul, das eine mehrzeilige Texteingabe zur Verfügung stellt: dojo.require("dijit.form.Textarea");

Die Besonderheit dieser speziellen Variante einer Texteingabekomponente, die in den Zeilen 32 und 33 über in den Körper der Webseite integriert wird, ist, dass sich der Textbereich dynamisch an die eingegebene Textmenge anpasst und mit wachsender Textmenge vergrößert wird. Löscht ein Besucher der Webseite vorher eingegebenen Text, wird der Bereich auch gegebenenfalls wieder verkleinert.

Abbildung 4.17: Verschiedene Widgets, die in HTML und CSS gerendert wurden

Abbildung 4.18: Der Textbereich hat sich dynamisch an die Textmenge angepasst.

189

4 Das Dojo-Toolkit

Die beiden Schaltflächen in der Webseite werden über das Modul dijit.form.Button, das in Zeile 17 (dojo.require("dijit.form.Button");) geladen wird, sowie die Einfügungen in Zeile 35 bis 38 realisiert. Beachten Sie, dass das »Träger«-Tag in dem konkreten Beispiel einmal ein und einmal ein ist:18 Mit div Mit Button

Spannend ist auch das Modul dijit.form.TimeTextBox, das in Zeile 19 über dojo.require("dijit.form.TimeTextBox"); geladen wird. Hierbei handelt es sich um ein Modul für eine plausibilisierte Zeiteingabe mit einer Vorgabeliste für verschiedene Zeitwerte. Das bedeutet, dass der Anwender bei einem Klick auf die Komponente in der Webseite auf der einen Seite eine Auswahlliste erhält, aus der über einen Klick eine Zeitangabe in das Textfeld übernommen werden kann.

Abbildung 4.19: Das Eingabefeld zur Zeiteingabe mit einer Auswahlliste

18 Das erfolgt hier nur zu Demonstrationszwecken. In der Praxis sollte man das selbstredend konsistent halten.

190

4.9 Das Dijit – Dojo Widget Library

Auf der anderen Seite wird auch eine Validierung der direkt eingetragenen Eingaben vorgenommen. Wenn der Anwender eine unplausible Zeiteingabe tätigt, erhält er eine vordefinierte Fehlermeldung, die zudem lokalisiert ist.

Abbildung 4.20: Die Uhrzeit ist wohl nicht ganz richtig. Dieser Fehlerzustand kann auch in verbundenen Skriptschritten verwertet werden.

4.9

Das Dijit – Dojo Widget Library

Wie Sie in den ersten Beispielen und Experimenten mit Dojo gesehen haben, wurden für Bestandteile einer Weboberfläche mit dem Dojo Toolkit Widget-Module aus dem Dijit eingebunden und als Dojo-Typ bei einem HTML-Element verwendet. Hinter dem Begriff Dijit versteckt sich wie schon erwähnt ein Widget-System, das unmittelbar auf dem puren Dojo aufsetzt. Die Hauptanwendung liegt darin, dass Sie mit nur ganz wenig (oder sogar ganz ohne) JavaScript und CSS komplexe und leistungsfähige grafische Oberflächen für das Web 2.0 erstellen können. Sie können Dijit auf zwei Arten einsetzen: 1. Deklarativ unter Verwendung spezieller Attribute innerhalb von regulären HTML-Tags 2. Programmiertechnisch mittels JavaScript Auf beide Arten haben Sie letztendlich jedoch dieselben Optionen zur Verfügung. Dijit ist als Bundle mit seinem eigenen Theme (Tundra) zu verstehen, das eine Reihe von üblichen Designs und Farbschemata für alle Widgets mitbringt und für ein konsistentes Look&Feel sorgt. Neben Tundra gibt es noch weitere Standardthemes wie Soria oder Noir. Diese Formatierungen können natürlich auch angepasst werden. Das gesamte Dijit ist so konzipiert, dass es global zugänglich ist – unabhängig von der Sprache und dem kulturellen Hintergrund. Es gibt Sprachübersetzungen, bidirektionale text- und kulturabhängige Repräsentationen von Dingen wie Zahlen oder dem Datum. All diese Dinge sind bereits in den Dojo-Widgets integriert. Die gesamte Interaktion mit dem Server ist vollkommen neutral von lokalen Einstellungen. Alle Widgets können zudem vom Anwender mit der Tastatur bedient werden und verwenden das Dijit-Standardtheme, das sowohl auf einen kontrastreichen Modus als auch für Screenreader optimiert ist. Diese Features sind so umgesetzt, dass alle Anwender gleich behandelt werden, soweit es möglich ist.

191

4 Das Dojo-Toolkit

4.9.1

Ein genauerer Blick auf das Dijit

Jede Dijit-Komponente verfügt über gewisse Interaktionspunkte, über die Sie die Komponente für Ihre Applikation anpassen können:  Unter einem Attribut versteht man im Sinn des Dijit ein Datenelement zur Kontrolle

der Anzeige und des Verhaltens einer Dijit-Komponente. Achtung, Attribute können ausschließlich zur Erstellungszeit gesetzt werden! Das bedeutet, Sie können sie im Deklarations-Tag setzen oder im Aufruf new dijit.___() verwenden. Danach sind sie jedoch nicht mehr direkt zugänglich. Aber einige Attribute können über Methodenaufrufe geändert werden. Diese Methoden sind in der Regel auch recht konsistent benannt – meist als Setter in der klassischen Form setAttributeName().  Unter einer Methode im Sinn des Dijit ist eine Funktion zur verstehen, um eine be-

stimmte Funktionalität eines Steuerelements aufzurufen. So kann der Anwender zum Beispiel in einem Objekt vom Typ NumberSpinner die dort verfügbaren Schaltflächen UP und DOWN anklicken, um eine Zahl zu verändern. Aber Sie können auch aus dem Skript heraus die Methode adjust() aufrufen, um das Gleiche zu erreichen.  Ein Erweiterungspunkt (extension point) ist eine spezielle Funktion, um ein bestimmtes Verhalten zu überschreiben. Zum Beispiel verfügt ValidationTextBox über einen Erweiterungspunkt isValid(). Wenn Sie in einer Validierung nun beispielsweise reguläre Ausdrücke benötigen, können Sie eine neue Subklasse von ValidationTextBox erzeugen und Ihre eigene isValid()-Funktion darüber bereitstellen.

Gemeinsame Attribute Es gibt eine Reihe von Attributen im Dijit, die nahezu in jedem Widget vorkommen. Diese ergänzen die normalen HTML-Attribute, die mehr oder weniger unverändert an das Widget weitergereicht werden. Attribut

Typ oder Wert

Default

Beschreibung

domNode

Node

Keiner

Hier handelt es sich um die visuelle Repräsentation eines Widgets! Andere DOM-Knoten können anderen Attributen zugewiesen werden (in der Regel durch dojoAttachPoint() des Template-Systems), aber das domNode-Attribut ist der ToplevelKnoten in einer grafischen Widget-Oberfläche. In Widgets, die nicht templatebasierend sind, ist das identisch mit srcNodeRef.

id

String

Keiner

Eine eindeutige Stringkennung eines Widgets, die vom Anwender oder dem System zugewiesen werden kann. Sofern ein Anwender eine nicht eindeutige ID verwendet, wird diese ignoriert und stattdessen eine systemgenerierte ID verwendet.

Tabelle 4.2: Gemeinsame Attribute von Dijit-Widgets

192

4.9 Das Dijit – Dojo Widget Library

Attribut

Typ oder Wert

Default

Beschreibung

lang

String

djConfig.locale

Der Wert dieses Attributs überschreibt die seitenweite Einstellung, um im Rahmen des Widgets eine andere Spracheinstellung zu verwenden. Der Wert muss aus den Sprachen in djConfig.extraLocale stammen. Es ist auf jeden Fall zu empfehlen, die Grundeinstellung einer Webseite so auszuwählen, dass sie mit einer einzelnen Einstellung oder der Grundeinstellung lokalisiert werden kann. Die Anwendung dieses Attributs ist typischerweise beschränkt auf Demonstrationszwecke oder mehrsprachige Seiten.

oder der Vorgabewert, der vom Objekt navigator weitergereicht wird

layoutAlign

String

srcNodeRef Node

Dieses Attribut ist beschränkt auf Dijit-Komponenten aus dem Bereich dijit.layout.LayoutContainer. LayoutContainer ab. Die möglichen Werte sind left, right, bottom, top und client. Der LayoutContainer nimmt die enthaltenen Kindelemente, die als left / top / bottom / right markiert sind, und ordnet sie entlang den Ecken einer Box an. Anschließend wird das Kind verwendet, das als client markiert ist. Dieses wird im verbleibenden Platz in der Mitte angeordnet.

Die Vorgabe hängt vom

Der DOM-Knoten, Hierbei handelt es sich um ein Attribut, das nur zu lesen ist. In Widgets, die auf einem Template basieder das dojoTypeAttribut besitzt ren, wird dieser Knoten gewöhnlich nicht erscheinen, sondern von einem ausgefüllten Template ersetzt.

Tabelle 4.2: Gemeinsame Attribute von Dijit-Widgets (Forts.)

Methoden versus Erweiterungspunkte Sowohl Methoden als auch Erweiterungspunkte sind im Grunde reine JavaScriptFunktionen. Der einzige Unterschied dazwischen ist semantisch. Im Dojo wird der Bezeichner Methode für solche Funktionen verwendet, die normalerweise ein Programmierer aufruft. Der Bezeichner Erweiterungspunkt steht hingegen für Funktionen, die normalerweise eine Dijit-Komponente aufruft. Rein technisch gibt es aber keinen Grund für eine Unterscheidung und Sie können auch einen Erweiterungspunkt direkt aufrufen oder eine Methode überschreiben (allerdings macht dies in der Regel keinen Sinn).

Weitere Möglichkeiten mit dem Dijit Es gibt noch eine Reihe von weiteren interessanten Möglichkeiten, was Sie mit dem Dijit machen können, die ich aber hier nur kurz vorstellen werde:  Sie können den Stil individueller Komponenten ändern, ebenso von einer Dijit-

Klasse, oder gar ein eigenes Theme für alle Dijit-Komponenten kreieren.

193

4 Das Dojo-Toolkit

 Sie können alle Dijit-Komponenten sowohl programmiertechnisch als auch dekla-

rativ über ein Markup erstellen. Alle Attribute, Methoden und Erweiterungspunkte sind über JavaScript zugänglich.  Sie können Subklassen von vorhandenen Dijit-Klassen erstellen oder auch eine

Klasse von Grund auf erstellen.

4.9.2

Eine Übersicht zu Dijit-Widgets

Nachfolgend sehen Sie eine kurze Auflistung der verfügbaren Widgets im Dijit. Die Namen der Widgets sind in der Regel sprechend oder mit einigen Grundkenntnissen der Webseitenerstellung leicht zu erahnen. Für eine genaue Beschreibung sei sowohl wegen des Umfangs als auch aus Gründen der Aktualität generell auf die offizielle Dokumentation (insbesondere das Book of Dojo) verwiesen. Einige der Widgets werden allerdings in den folgenden praktischen Beispielen vorgeführt.  CheckBox  ComboBox  CurrencyTextBox  DateTextBox  FilteringSelect  InlineEditBox  NumberSpinner  NumberTextBox  Slider  Textarea  TextBox  TimeTextBox  ValidationTextBox  AccordionContainer  BorderContainer (neu in der Version 1.1)  ContentPane  LayoutContainer (in der Version 1.1 als deprecated erklärt)  SplitContainer (in der Version 1.1 als deprecated erklärt)  StackContainer  TabContainer  Button  ComboButton  DropDownButton

194

4.9 Das Dijit – Dojo Widget Library

 Menu  Toolbar  Dialog  TooltipDialog  ProgressBar  TitlePane  Tooltip  ColorPalette  Editor  Grid (1.0)  InlineEditBox 0.9 – 1.0  Tree

4.9.3

Ein paar weitere Dijit-Widgets in vollständigen Beispielen

Wie versprochen schauen wir uns noch ein paar weitere Dijit-Widgets in vollständigen Beispielen an, um die wesentliche Anwendung mit dem Dojo Toolkit im Allgemeinen und dem Dijit im Speziellen zu vertiefen.

Ein Popup-Menü Das nachfolgende Listing zeigt ein Popup-Menü. Wenn der Anwender mit der rechten Maustaste in die Webseite klickt, wird es angezeigt (dijit1.html): Listing 4.11: Ein Popup-Menü mit dem Dijit 01 03 04 05

07 Menues mit Dijit 08

12

15

19 20 21 Ein Popup-Menü 22

23

25 Aktiviere Item 28

29 Submenü 30

31 Submenü 1 34 Submenü 2 37

38

39

40 41

Sie können in Zeile 17 erkennen, dass das Popup-Menü auf dem Modul dijit.Menu aufbaut. In der Webseite selbst sehen Sie verschachtelte DIV-Container, über die das PopupMenü samt seinen Einträgen realisiert wird. Die Einträge sind jeweils vom Typ dijit.MenuItem, wie Sie beispielsweise in Zeile 31 sehen können.

Abbildung 4.21: Das aktivierte Menü Im Beispiel sehen Sie auch eine Reaktion auf einen Klick auf den Menüeintrag. Sie finden bei den Menüeinträgen den HTML-Eventhandler onClick. Über diesen wird mit innerHTML der Inhalt des Containers mit der ID ausgabe (dieser ist in Zeile 22 definiert) geändert.

196

4.9 Das Dijit – Dojo Widget Library

Abbildung 4.22: Auf einen Klick wurde eine Aktion ausgeführt.

Ein Rich Text Editor Das nachfolgende Beispiel zeigt ein sehr leistungsfähiges und mächtiges Widget des Dijit – einen Rich Text Editor. Sie werden sehen, dass das Listing dennoch außergewöhnlich kompakt und klein ist und Sie diese sehr leistungsfähige Komponente auf einfachste Weise in Ihrer Webseite einbauen können (dijit2.html): Listing 4.12: Ein Editor in der Webseite 01 03 04 05

07 Editor Demo 08

12

15

19 20 21

22

24

25

26 27

197

4 Das Dojo-Toolkit

Abbildung 4.23: Mit dem Editor des Dijit stehen Ihnen in Ihrer Webseite die wichtigsten Möglichkeiten einer Textverarbeitung zur Verfügung. Das ganze Hexenwerk zur Verwendung dieses Editors besteht im Grunde nur aus zwei Quellcodezeilen: 1. In Zeile 17 erfolgt mit dojo.require("dijit.Editor"); die Einbindung des notwendigen Moduls. 2. In Zeile 22 und 23 sehen Sie mit das HTML-Tag, das den vollständigen Editor abbildet. Diesen werden Sie in der Regel in ein Formular einschließen. Der Editor beherrscht die üblichen Möglichkeiten einer einfachen Textverarbeitung wie das Ausrichten von Text, die Zeichenformatierung wie fett oder kursiv, Aufzählungen und die Verwendung der Zwischenablage.

4.10

Die Verbindung zwischen einem Ereignis und dem Widget – das Dojo-Eventsystem

Viele Widgets in einer GUI sind in Verbindung mit bestimmten Ereignissen zu sehen, selbstredend auch im Dojo. So ist die natürliche Verwendung einer Schaltfläche selbstverständlich, dass ein Anwender darauf klickt und über den Klick irgendeine Aktivität ausgelöst wird. In der Regel setzt man dieses Eventhandling in HTML oder in JavaScript über die Verwendung eines Eventhandlers um (im Fall eines Klicks auf eine Schaltfläche beispielsweise onclick, was wir bereits in dem Abschnitt gemacht haben). Zudem gibt es im Rahmen von JavaScript noch ein Ereignisobjekt, das Sie verwerten können. Im Grunde ist die Ereignisbehandlung im Rahmen einer Webseite also klar beschrieben und auch relativ einfach – wenn da nicht die extremen browserspezifischen Unterschiede wären. Über Dojo gibt es jedoch einen effizienten Mechanismus, der die Ereignisbehandlung weiter vereinfacht, sie konsistent hält und vor allen Dingen die browserspezifischen Unterschiede verbirgt – das Dojo-Eventsystem!

198

4.10 Die Verbindung zwischen einem Ereignis und dem Widget – das Dojo-Eventsystem

4.10.1

Innere Ereignisbehandlung mit dem Dojo-Eventsystem

Mittels des Dojo-Eventsystems können Sie ein Ereignis an ein Widget wie einen Button einfach über das

Dieses Eventsystem sieht sehr ungewöhnlich aus, wenn man sich bisher nur mit klassischem JavaScript beschäftigt hat. Aber solch ein inneres Eventhandling kennt man in dieser Form aus anderen Programmiersprachen wie beispielsweise Java schon lange. Der Reaktionsmechanismus wird quasi in das Element gekapselt. Und Sie können mit dem Dojo-Eventsystem die volle Leistungsfähigkeit der DOM Level 2-Events innerhalb des Skripts verwenden. Das bedeutet, Sie können Zusatztasten wie (ª) oder (Ctrl) identifizieren und Sie bekommen alle Arten von Ereigniseigenschaften und Bubble-Events19 durch den gesamten HTML-Baum zur Verfügung gestellt. Sofern Sie sich jemals bereits mit erweiterter Ereignisbehandlung und vor allen Dingen Ereignissen aus dem DOM Level 2 beschäftigt haben, sind Ihnen die zahlreichen Probleme mit den abweichenden Syntaxstrukturen des Internet Explorers und standardkonformen Browsern wie Firefox sicher bekannt. Im Ereigniskonzept von Dojo funktionieren die gleichen Funktionen in jedem unterstützten Browser! Diese Arbeitserleichterung, die sich auch viele andere Frameworks und Toolkits auf die Fahne schreiben, ist kaum hoch genug einzuschätzen.

4.10.2

Dojo-Ereignisse verbinden – dojo.connect()

In Dojo wird der Begriff Ereignis weiter gefasst, als nur auf beliebige Aktionen der Benutzer zu reagieren. Jeder Funktions- oder Methodenaufruf in JavaScript ist für das Dojo-System ein Ereignis. Das hat zur Folge, dass Sie auf jedes Ereignis und solch einen Aufruf reagieren können. Sie müssen nur Dojo mitteilen, was genau als Reaktion erfolgen soll. Dazu verwendet man in der Regel die Methode dojo.connect().

19 Weiterreichen von Ereignissen über eine Hierarchie.

199

4 Das Dojo-Toolkit

Damit kann man festlegen, welche Funktionalität im Fall eines bestimmten Ereignisses aufgerufen werden soll. Das Verfahren verdeutlicht folgendes Beispiel (dojo_event1.html): Listing 4.14: Anwendung von dojo.connect() 01 03 04 05 Zugriff auf Ereignisse mit dojo.connect() 06

07

10

18 19 20

21 Anwendung von dojo.connect() - Klick mich an 22 23

In der Methode dojo.addOnLoad() definieren Sie eine innere Funktion, in der in Zeile 13 mit dojo.connect() der Klick auf eine Überschrift der Ordnung 1 (die Selektion erfolgt über die ID) mit dem Ausführen einer weiteren inneren Funktion verbunden wird.

Abbildung 4.24: Das Aussehen der Webseite direkt nach dem Laden

200

4.10 Die Verbindung zwischen einem Ereignis und dem Widget – das Dojo-Eventsystem

Diese Funktion erweitert den Inhalt der Überschrift bei jedem Klick um ein *.

Abbildung 4.25: Der Anwender hat mehrfach auf die Überschrift geklickt.

Eine Toolbar mit Ereignisbehandlung über connect() Anknüpfend an die bisherigen Überlegungen sehen Sie als weiteres Beispiel eine Toolbar, die mit dem Dijit-Widget dijit.Toolbar umgesetzt wird und eine Reaktion zeigt. Die Reaktion auf einen Anwenderklick erledigt wie eben connect() (dijit3.html): Listing 4.15: Eine Toolbar mit Reaktion auf einen Anwenderklick 01 02 04 05 Eine Toolbar 06

10

13

40 41 42

43 Cut 46 Copy 49 Paste 52

53 54 Bold 57

58 Eine Toolbar 59

60 61

In Zeile 16 wird mit dojo.require("dijit.Toolbar"); das Modul für die Toolbar eingebunden. Die nachfolgenden Funktionen ändern den Inhalt eines DIV-Containers und sind nicht weiter kompliziert oder Dojo-spezifisch. Sie werden allerdings mit dojo.connect() aufgerufen, so etwa in Zeile 30 und 31 mit dojo.connect(dojo.byId("toolbar1.bold"),"onclick", fett);. Die Toolbar selbst arbeitet mit verschachtelten DIV-Containern. In Zeile 42 sehen Sie mit den Beginn des äußersten Containers. Die Schaltflächen in der Toolbar sind vom Typ dijit.form.Button. Das Attribut iconClass spezifiziert über den Wert dijitEditorIcon und eine genaue Bezeichnung des gewünschten Symbols wie beispielsweise dijitEditorIconCut das exakte Aussehen einer Schaltfläche in der Toolbar.

202

4.10 Die Verbindung zwischen einem Ereignis und dem Widget – das Dojo-Eventsystem

Abbildung 4.26: Eine Toolbar Beispiel: Cut

4.10.3

Mehrere Ereignisse verknüpfen

Im Ereigniskonzept von Dojo können Sie auch mehrere Ereignisse miteinander verknüpfen. Betrachten Sie das nachfolgende Listing (dojo_event2.html): Listing 4.16: Verknüpfte Ereignisse 01 03 04 05 Verknüpfen von Ereignissen mit dojo.connect() 06

07

10

24 25 26 Verknüpfen von Ereignissen 27

28 Klick mich 29

30 31

In dem Beispiel verwenden wir eine Schaltfläche, deren Modul in Zeile 11 geladen wird. Die zwei Funktionen klickButton() und folgeFkt() erweitern jeweils den Inhalt eines Elements in der Webseite (ein DIV-Container), das über eine ID ausgabe angesprochen werden kann. Das machen wir jeweils mit dojo.byId(). Nach der Initialisierung des Dojo-Systems werden in der Methode addOnLoad() zwei Ereignisverknüpfungen vorgenommen. Zuerst wird das Ereignis onclick verwendet, um darüber mit einer Funktionsreferenz die Funktion klickButton() aufzurufen. Die folgende zweite Verknüpfung sorgt dafür, dass nach dem Aufruf dieser Funktion die Funktion folgeFkt() aufgerufen wird. Der Schlüssel für die Auslösung des Folgeereignisses ist der erste Parameter, der wieder als Referenz auf die zuerst aufgerufene Funktion verweist. Tipp Mit diesem Verknüpfen von Ereignissen lassen sich die sonst oft notwendigen gegenseitigen Abhängigkeiten zwischen Widgets und dem JavaScript-Code erheblich reduzieren. Damit wird die Wartbarkeit des Quellcodes erheblich verbessert.

204

4.10 Die Verbindung zwischen einem Ereignis und dem Widget – das Dojo-Eventsystem

Abbildung 4.27: Zuerst das erste und dann das zweite Ereignis

Verknüpfen mit JavaScript-Objekten Die Zielfunktionen von solchen Funktionsreferenzen müssen keine global verfügbaren Funktionen sein. Es kann auch ein beliebiges JavaScript-Objekt und dessen Methode angegeben werden, die dann im gleichen Gültigkeitsbereich ausgeführt wird. Dies ist vor allen Dingen dann nützlich, wenn Sie Klassen im Dijit deklarieren oder Animationen erstellen. Betrachten Sie das nachfolgende einfache Objekt mit einigen Basismethoden und wie sie interagieren (dojo_event3.html): Listing 4.17: Methoden verketten 01 03 04 05 Verknüpfen von Ereignissen mit dojo.connect() 06

07

10

Verknüpfen von Ereignissen mit Objekten

Klick mich



In dem Beispiel werden zwei einfache Objekte erzeugt. Die Definition des ersten Objekts sehen Sie in den Zeilen 13 bis 20. Darin werden zwei Methoden definiert, die beide nichts Weiteres tun, als den Inhalt eines DIV-Containers mit einer spezifischen Textausgabe zu erweitern. Das zweite Objekt, das Sie in Zeile 22 bis 26 finden, definiert eine weitere Methode mit gleicher Funktionalität, nur einem anderen Text als Ausgabe.

206

4.11 Layout mit dem Dijit

Auch in diesem Beispiel verwenden wir wieder eine Schaltfläche, um eine Kette von Ereignissen auszulösen. In dojo.addOnLoad() sehen Sie in Zeile 29 die Verknüpfung mit dem Klick auf die Schaltfläche. In Zeile 31 erfolgt dann der Aufruf der ersten Methode obj1.methodeObj1_1(). Das Ausführen der zweiten Methode aus dem ersten Objekt sollte dann erfolgen, nachdem die erste Methode aus dem ersten Objekt ausgeführt wurde. In Zeile 35 sehen Sie mit der Anweisung dojo.connect(obj1, "methodeObj1_1", obj1, "methodeObj1_2"); die entsprechende Verknüpfung. Und nachdem die zweite Methode im ersten Objekt ausgeführt wurde, soll die Methode vom zweiten Objekt ausgeführt werden. In Zeile 40 sehen Sie mit dojo.connect(obj1, "methodeObj1_2", obj2, "methodeObj2_1"); die notwendige Anweisung, die diese Kette spezifiziert.

Abbildung 4.28: Verkettung von Objektmethoden Wenn Sie die Schaltfläche anklicken, werden Sie an der Ausgabe erkennen, dass die Methodenaufrufe genau in der spezifizierten Reihenfolge ausgeführt werden.

4.11

Layout mit dem Dijit

Kommen wir noch einmal explizit auf das Dijit zurück, genau genommen auf die grundsätzliche Gestaltung einer Web-GUI. Wer sich mit der Gestaltung des Layouts bei Webseiten auskennt, weiß ein Lied von den vielen Problemen bei der Darstellung in verschiedenen Browsern zu singen – gerade dann, wenn man bei aufwändigeren Layouts barrierefrei arbeiten will oder muss und auf Tabellen verzichtet. Herumspringende DIVs, verschiedene Abstände zwischen Elementen und ähnliche Knack-

207

4 Das Dojo-Toolkit

nüsse erfreuen die Webgemeinde seit Generationen. Moderne Toolkits und Frameworks für das Web versprechen eine Lösung dieser fürchterlich aufwändigen Fuddelei an einzelnen Pixeln samt der Anpassung an unterschiedliche Browser. Dazu kommen gestiegene Erwartungen der Anwender an das Aussehen und die Funktionalität einer Web-GUI, die durch aufwändige CSS-Formatierungen und DHTML-Programmierung umgesetzt werden muss. Aber auch die in der Vergangenheit meist sinnvolle Anpassung einer Webseite an den verfügbaren Anzeigebereich im Browser erweist sich bei modernen RIAs als nicht mehr zeitgemäß. Kurz gefasst hält stattdessen auch im Web mehr und mehr ein Look&Feel Einzug, wie man es von Desktopapplikationen gewohnt ist. Der Schlüssel zu so einer Gestaltung einer modernen Web-GUI ist im Dojo Toolkit das Dijit und dort konkret der Bereich der Layout-Widgets.

4.11.1

HTML und Layouts

Betrachten wir noch einmal geschwind die klassische Gestaltung eine Web-GUI mit HTML. Eine Webseite ist üblicherweise in mehrere Segmente mit unterschiedlichen Inhalten aufgeteilt.20 Ein typisches reines HTML-Layout gestaltet dazu in der Webseite die Container für Inhalte genauso groß, wie der enthaltene Inhalt es jeweils erfordert. Überschreitet ein Container daraufhin jedoch den maximal im Anzeigebereich des Browsers verfügbaren Platz, werden im Browser-Fenster in der Regel Bildlaufleisten angezeigt, die bei Verringerung des Inhalts oder Vergrößerung des Browser-Anzeigebereichs wieder verschwinden können. Diese Art des Bildschirmaufbaus beziehungsweise der Verwaltung von Inhalten auf dem Bildschirm entspricht nicht der Vorgehensweise bei einer Desktopapplikation. Hier hat man in der Regel feste Größen für die einzelnen Segmente einer Applikation. Füllt ein Inhalt ein Segment nicht aus, bleibt einfach der Platz leer. Und wenn in einem Segment einer Applikation der Inhalt den dafür vorgegebenen Platz überschreitet, wird man in der Regel bei dem Segment Bildlaufleisten sehen, nicht an der gesamten umgebenden Applikation. Wenn Sie so ein Layout in einer Webapplikation erreichen wollen, müssen Sie entweder auf Tabellen (was in der Regel nicht barrierefrei und meist auch nicht vollständig befriedigend ist) oder gar Frames (vollkommen out) zurückgreifen. Oder Sie müssen mit CSS Container in der Webseite wie DIV-Bereiche in der Größe und Position festlegen. Aber dies ist wie gesagt nicht ganz so einfach, da in verschiedenen Browsern erhebliche Abweichungen vorkommen können. Das Dijit kompensiert diese BrowserAbweichungen durch getestete CSS-Vorlagen und soll damit auf einfache Weise die Erstellung von komplexen Layouts gestatten, die das Look&Feel der RIA dem einer Desktopapplikation sehr ähnlich machen können.

20 Die ganz alten Layouts aus der Steinzeit des Webs mit einem reinen Auflisten von Inhalten von oben noch unten sollen nicht mehr berücksichtigt werden.

208

4.11 Layout mit dem Dijit

Achtung In der Tat vereinfachen die Layout-Widgets die Erstellung anspruchsvoller Weboberflächen. Aber Sie müssen insbesondere beim Verschachteln von Layout-Widgets größte Sorgfalt walten lassen. Insbesondere müssen Sie beachten, welche Argumente bei einem Träger-Tag wie und auf was wirken. Gerade Layout-Widgets werden im Browser letztendlich in ein extrem komplexes Gemisch aus HTML, CSS und JavaScript gerendert. Den resultierenden Quellcode, den der Browser tatsächlich verarbeitet, werden Sie im Problemfall kaum nutzen können, um eine Problemstelle zu lokalisieren. Nehmen Sie am besten die offiziellen Beispielcodes im Dojo Book als Basis für Ihr Grundlayout. Aber selbst diese werden – trotz reinem Copy&Paste – in einigen Browsern nicht korrekt gerendert. Bei komplexen Layouts besteht derzeit in der diesem Buch zugrunde liegenden Version von Dojo immer noch Optimierungsbedarf.

4.11.2

Das Dijit-Layout

Das Dojo respektive das Dijit verfügt über eine gewisse Anzahl an Layout-Widgets, die in einer Hierarchie kombiniert werden können. Jedes Layout-Widget enthält eine Liste mit anderen Layout-Widgets, mit Ausnahme der Blattknoten in der Hierarchie, was typischerweise Objekte vom Typ ContentPane sind. Ein ContentPane enthält in der Regel reines HTML. Vom Konzept her handelt es sich also beim Layoutkonzept von Dojo respektive dem Dijit um einen Satz aus DIV-Containern, die in gewisser Weise ineinander verschachtelt werden. Dabei werden im Dijit konkret drei grundsätzlich zu unterscheidende Typen an Elementen verwendet: 1. Der erste Typ steht für Container, die ihre Kinder nebeneinander oder untereinander darstellen. Beim Typ eins handelt es sich entweder um einen LayoutContainer bzw. BorderContainer oder einen SplitContainer. Der neu im Dojo 1.1 eingeführte BorderContainer unterteilt ein Segment in top/left/bottom/right/center-Sektionen mit optionalen Splitter-Controls, damit der Anwender die Dimensionen anpassen kann. Er ersetzt offiziell den in der Version 1.1 als deprecated erklärten LayoutContainer, obwohl man auch diesen natürlich noch nehmen kann und er eine ähnliche Funktionalität zur Verfügung stellt. Ein LayoutContainer oder BorderContainer wird immer dann benutzt, wenn man mit Elementen konstanter Größe arbeitet. Dementsprechend macht hierfür oft auch die Festlegung einer absoluten Größe Sinn. Ein SplitContainer teilt die Kindknoten in Sektionen auf, wobei der Anwender die Größe jeder Sektion anpassen kann. Dabei bedeutet die Verkleinerung der einen Sektion die gleichzeitige Vergrößerung der anderen Bereiche. Beachten Sie jedoch, dass auch der SplitContainer in der Version 1.1 als deprecated erklärt wurde und in

209

4 Das Dojo-Toolkit

diversen Zusammenhängen (insbesondere bei komplexeren verschachtelten Layouts) Probleme in manchen Browsern machen kann. 2. Dann gibt es Container, die jeweils nur genau einen Kindknoten anzeigen. Zu diesem Typ 2 gehören zum Beispiel ein AccordionContainer, TabContainer oder StackContainer. In der Grundfunktionalität machen alle drei das Gleiche, aber das Aussehen unterscheidet sich. Bei einem AccordionContainer werden Inhalte in den darin enthaltenen Widgets vom Typ AccordionPane über eine horizontal ablaufende Animation sichtbar oder unsichtbar, indem ein Anwender in die Titelzeile des Pane oder auf ein Symbol rechts oben klickt.21 Damit kann immer nur genau ein Pane aus diesem Container vollständig angezeigt werden.22 Ein StackContainer ist die Basisklasse für TabContainer und AccordionContainer, aber er erlaubt die anwenderdefinierte Anzeige, welches Pane zu sehen ist. Ein TabContainer zeigt Kindknoten so an, dass ein Anwender eine Registerlasche sieht, die er anklicken kann, um ein Pane in den Vordergrund zu bekommen. 3. Die Blattknoten mit den konkreten Inhalten stehen für den dritten Typ. Typ drei ist oft ein ContentPane, aber im Grunde kann es jedes beliebige Widget sein. Tipp Zum Anpassen an den Anzeigebereich des Browsers sollte bei den meisten Layout-Widgets die Größe über CSS absolut oder mit 100% spezifiziert werden. Beispiel: Listing 4.18: Angabe von 100% des verfügbaren Platzes, wenn mainDiv den äußersten DIV-Container spezifiziert body, #mainDiv { width: 100%; height: 100%; border: 0; padding: 0; margin: 0; }

Beachten Sie jedoch, dass eine Hundertprozentangabe für die Höhe oder Breite mit Angaben zum Padding, Margin oder einem Rahmen kollidieren kann. Sie sollten am besten bei einem äußeren LayoutWidget auf diese Abstandsangaben verzichten. Stattdessen sollten solche Attribute wie padding, border und margin bei Bedarf nur bei Elementen innerhalb des äußeren Layoutcontainers gesetzt werden. 21 Wenn Sie sich das nicht vorstellen können, schauen Sie sich einfach schon mal die entsprechenden Beispiele auf der Buch-CD oder von Dojo selbst einmal an. 22 Für diese Art von Komponenten wurden von manchen Leuten auch ganz witzige Beschreibungen im Deutschen eingeführt. Im Umfeld von Dreamweaver redet man bei solchen Komponenten z.B. von Akkordeon-Bereichen oder auch reduzierbaren Paletten. Mir ist allerdings nicht ganz klar, ob diese Begriffe wirklich offizieller Standard sind oder nur hilflose Versuche, englische Fachbegriffe ins Deutsche zu übertragen. Zumindest beschreiben diese Bezeichnungen das Verhalten der Komponenten recht anschaulich.

210

4.11 Layout mit dem Dijit

4.11.3

Die prinzipielle konzeptionelle Erstellung eines Dijit-Layouts

Um nun so ein Dijit-Layout in der Praxis zu erstellen, werden Sie entsprechend dem von Ihnen gewünschten Layout den Bildschirm in verschiedene Bestandteile aufteilen. Dazu können Sie beispielsweise so vorgehen:  Zuerst entwerfen Sie das Layout für den Elternknoten. Er wird auch als Erstes er-

stellt und stellt den Rahmen für die gesamte Web-GUI (unter Umständen gibt es jedoch außerhalb noch reine HTML-Strukturen).  Dann fügen Sie dem Elternknoten alle direkten Kindelemente hinzu, die die grobe

Unterteilung festlegen.  Anschließend fügen Sie deren Kindelemente hinzu usw. Die Blattknoten enthalten

dann den konkreten Inhalt. Hinweis Noch eine Bemerkung zu einem Startaufruf zum Generieren der Oberfläche aus JavaScript heraus: Wenn Sie Widgets programmiertechnisch erstellen, können Sie im Grunde gar nicht anders als wie folgt vorgehen: Sie sollten auf jeden Fall zuerst den Elternknoten erstellen, dann die Kindknoten und dann deren Kindknoten usw. Erst zum Abschluss sollten Sie die Methode startup() zum konkreten Rendern der Widgets und zum Aufbau des DOM aufrufen. Die Methode startup() wird einmal auf dem Topelement in der Hierarchie aufgerufen, wenn die gesamt Hierarchie eingerichtet und alle Elemente eingefügt sind. So könnte das Ganze für ein komplexes Layout aussehen: 1. Aufteilen des Bildschirms in zwei horizontale Segmente, die vom Anwender in der Größe verändert werden können. 2. Oben könnte beispielsweise eine Toolbar angeordnet sein und das untere Segment könnte einen AccordionContainer enthalten. 3. Das untere Segment könnte dann in AccordionPane-Felder für verschiedene Inhalte aufgeteilt werden. Mit den Regeln und den besprochenen Layout-Widgets des Dijit im Hintergrund könnte das Beispiellayout so aussehen: LayoutContainer SplitContainer Toolbar AccordionContainer AccordionPane 1 AccordionPane 2 AccordionPane 3

211

4 Das Dojo-Toolkit

Von diesem konzeptionellen Layout der Beispielapplikation ist es nur ein kleiner Schritt zu einer Dijit-Struktur. So könnte der resultierende äußere Rahmen aussehen: Listing 4.19: Die äußere Struktur für ein Dijit-Layout

...

...



4.11.4

Ein vollständiges Beispiel

Entsprechend dieses Gerüsts wollen wir ein vollständiges Beispiel ansehen (dijitlayout.html): Listing 4.20: Ein verschachteltes Layout mit dem Dijit 01 02 04 05 Ein Dijit-Layout 06

10

13

21

212

4.11 Layout mit dem Dijit

22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70

Ein Dijit-Layout

Cut Copy Paste Bold

Willkommen bei RJS Schulung, Beratung, Programmierung,Publikation und Fachübersetzung rund um Computer und Internet

Impressum Ralph Steyer
www.rjs.de
Inhaltlich Verantwortlicher der Website gemäßPara. 10 Absatz 3 MDStV

Kontakt

Nehmen SIE Kontakt mit UNS auf Sie erreichen uns per E-Mail, Fax, Telefon oder dem nachfolgenden Kontaktformular.

213

4 Das Dojo-Toolkit

71

72

73 74

Wenn Sie das Beispiel in einem Browser ansehen, erkennen Sie oben eine HTMLÜberschrift und darunter einen umrandeten Bereich.

Abbildung 4.29: Die Webseite wurde aufgebaut. Die Toolbar befindet sich dabei im oberen Segment eines SplitContainer. Im unteren Segment sehen Sie ein Widget vom Typ AccordionContainer, das drei Widgets vom Typ AccordionPane mit reinem HTML als Inhalt enthält. Davon ist immer nur eines sichtbar. Von den anderen beiden sehen Sie nur die Titelzeile.

214

4.11 Layout mit dem Dijit

Sie können nun die horizontale Aufteilung zwischen den beiden Segmenten mit der Maus verändern.23 Ebenso können Sie abwechselnd jedes der drei Panes im unteren Bereich in den Vordergrund holen und anzeigen.

Abbildung 4.30: Das obere Segment wurde vergrößert und unten wurde ein anderes Pane ausgewählt.

23 Unabhängig davon, ob das für eine Toolbar wirklich sinnvoll ist – es soll nur als Beispiel dienen. Aber man könnte die Toolbar natürlich bei einer Vergrößerung des Bereichs um Schaltflächen erweitern.

215

4 Das Dojo-Toolkit

Hinweis Die layoutAlign-Argumente von Kindknoten beziehen sich immer auf den Elternknoten, während die anderen Argumente vom Kindknoten verarbeitet werden.

4.11.5

Ein weiteres Beispiel zum Layout

Schauen wir uns noch ein weiteres Beispiel zum Layout an, dessen Aufbau im Quelltext umfangreich kommentiert ist. Das Beispiel ist als eine Art Template zu sehen, das zum Beispiel dynamisch per AJAX Daten vom Server anfordert und in bestimmten Bereichen der Webseite dann anzeigt24 (dijitlayout2.html): Listing 4.21: Ein weiteres Dijit-Layout 01 03 04 05

07 Ein Dijit-Layout 08

24











von Ralph Steyer





08

11

14

20 21 22 AJAX mit Dojo 23 24

Wie Sie sehen, werden die Dojo-Ressourcen in dem Listing aus dem Internet eingebunden. Dazu finden Sie eine Überschrift und das war es bis hier hin.

223

4 Das Dojo-Toolkit

Laden eines Button-Widgets Wir wollen nun aus dem großen Fundus der Widgets von Dojo eine Schaltfläche – ein Button-Widget – erstellen, das wir oben bereits verwendet haben. Dieses Widget kann drei visuelle Status annehmen, die von der aktuellen Mausaktion des Anwenders über der visuellen Repräsentation des Widgets abhängen (mouseOut, mouseOver und mouseDown). Über dojo.require() instruieren wir wieder das Paketsystem von Dojo, das ButtonWidget zu laden. Listing 4.28: Laden des Button-Widgets dojo.require("dijit.form.Button");

Die Schaltfläche in der Webseite Im Körper der Webseite notieren Sie wie im ersten Beispiel als reinen HTML-Code folgende Zeile: Listing 4.29: Ein Dojo-Button AJAXDatenanforderung

Beachten Sie in dem HTML-Element wieder das proprietäre dojoType-Attribut. Dieses Attribut ist wie erwähnt der Schlüssel, über den Dojo steuert, wie mit dem Element umgegangen werden muss, wenn die Seite geladen wird.

Die Verbindung zwischen einem Ereignis und dem Button-Widget Verbinden wir nun den Klick auf die Schaltfläche mit dem Widget über das DojoEventsystem mit einer AJAX-Anfrage über dojo.xhrGet(): Listing 4.30: Anhängen eines Ereignisses an ein Widget