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 <medium>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 <medium>DVD 16 17 18 HTML und CSS - Online-Training 19 20 Mai 2008 21 22 <medium>Online 23 24 25 JavaScript - Online-Training 26 27 Mai 2008 28 29 <medium>Online 30 31 32 AJAX - Video-Training 33 34 Juni 2008 35 36 <medium>DVD 37 38 39 Eclipse - Video-Training 40 41 Juli 2008 42 43 <medium>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 <meta http-equiv="Content-Type" 06 content="text/html; charset=iso-8859-1" /> 07 08 <script src="ajax1.js" type="text/javascript"> 09 10 11

Beispiel AJAX 1

12 13 14 15 16 17 18 23 24 25 30 31 32 37 38 39 44 45

82

/>

/>

/>

/>

2.3 Come together right now – AJAX

46 50 51 52

Bild	Info
19 22
26 29
33 36
40 43
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. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script src="ajax2.js" type="text/javascript">

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 <script src="http://yui.yahooapis.com/2.5.1/build/yahoo/yahoo-min.js"> <script src="http://yui.yahooapis.com/2.5.1/build/dom/dom-min.js">

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 <meta http-equiv="Content-Type" 06 content="text/html; charset=iso-8859-1" /> 07 08 09 <script src= 10 "http://yui.yahooapis.com/2.5.1/build/yahoo/yahoo-min.js"> 11 12 13 <script src= 14 "http://yui.yahooapis.com/2.5.1/build/dom/dom-min.js"> 15 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 <script type="text/javascript"> 22 var pos = YAHOO.util.Dom.getXY('meinEle2'); 23 YAHOO.util.Dom.setXY('meinEle', pos); 24 YAHOO.util.Dom.setStyle('meinEle', 'opacity', 0.3); 25 YAHOO.util.Dom.setStyle('meinEle', 'color', 'red'); 26 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 <script src="http://yui.yahooapis.com/2.5.1/build/yahoo/yahoo-min.js"> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/event/event-min.js" >

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 <meta http-equiv="Content-Type" 06 content="text/html; charset=iso-8859-1" /> 07 08 09 <script src= 10 "http://yui.yahooapis.com/2.5.1/build/yahoo/yahoo-min.js"> 11 12 13 <script type="text/javascript" src= 14 "http://yui.yahooapis.com/2.5.1/build/event/event-min.js" > 15 16 17 18

Event Utility

19 20 21 22

23 24 <script type="text/javascript"> 25 var ids = ["el1", "el2", "el3"]; 26 function fktCallback(e) { 27 document.getElementById("ausgabe").innerHTML = 28 "

Klick auf Element " + this.id + "

";

119

3 Das YUI – Yahoo User Interface

29 } 30 YAHOO.util.Event.addListener(ids, "click", fktCallback); 31 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 <script type="text/javascript"> 18 function TestObj(id) { 19 YAHOO.util.Event.onAvailable( 20 id, this.handleOnAvailable, this); 21 } 22 TestObj.prototype.handleOnAvailable = function(me) { 23 alert(this.id + " ist verfuegbar"); 24 } 25 var obj = new TestObj("el1"); 26 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 <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/ yahoo-dom-event/yahoo-dom-event.js" > <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/ dragdrop/dragdrop-min.js" >

Um nun ein einfaches Drag&Drop für ein beliebiges DOM-Element zu ermöglichen, erstellen Sie in einem <script>-Container in Ihrer Webseite eine neue Instanz der Klasse YAHOO.util.DD. Deren Konstruktor erhält die HTML-ID von einem Element, das Sie verschiebbar machen wollen. Alternativ können Sie auch eine Referenz auf das Element angeben. Diese Referenz erhalten Sie im YUI über die Klasse YAHOO.util.Dom und deren Klassenmethode get(). Im nachfolgenden Codefragment sehen Sie, wie eine neue Instanz von YAHOO.util.DD für ein Element mit der ID element1 erzeugt wird und dieses anschließend per Drag&Drop verschoben werden kann. Ebenso sehen Sie die alternative Möglichkeit mit der Elementreferenz für ein Element mit der ID element2. Listing 3.12: Zugriff auf ein Element var dd1 = new YAHOO.util.DD("element1"); // Alternative Verwendung von einer Referenz auf ein Element var el=YAHOO.util.Dom.get("element2"); var dd2 = new YAHOO.util.DD(el);

Achtung Die Verwendung einer Referenz auf ein Element über YAHOO.util. Dom.get() ist nicht unkritisch. Wie so oft kann der Zugriff per JavaScript auf eine Objektrepräsentation eines Elements ins Leere greifen, wenn das Objekt noch nicht im DOM verfügbar ist. Entweder kompensieren Sie das mit den verschiedenen YUI-Konstruktionen, die im letzten Abschnitt beschrieben wurden. Oder der Skriptcontainer wird in der Webseite nach dem Element notiert, am besten ganz am Ende einer Webseite. 19 Bzw. in anderen Beispielen einen ähnlich benannten Link.

126

3.7 Die Möglichkeiten der YUI Library Utilities

Hinweis Die Umsetzung der Verschiebung eines Elements im YUI-Konzept basiert ausschließlich auf der Manipulation der Stylesheets des Elements. Dazu wird mit JavaScript die Eigenschaft style dynamisch verändert. Das bedeutet, dass die aktuelle Repräsentation im DOM unverändert bleibt. Dieses Verhalten können Sie hervorragend in der Firefox-Erweiterung Firebug beobachten. Schauen wir uns nun ein vollständiges Listing für ein angepasstes Beispiel an, bei dem zwei Grafiken in einer Webseite vom Anwender verschoben werden können (yui1_1.html): Listing 3.13: Drag&Drop von zwei Grafiken 01 03 04 05 <meta http-equiv="Content-Type" 06 content="text/html; charset=iso-8859-1" /> 07 08 09 10 <script type="text/javascript" 11 src="http://yui.yahooapis.com/2.5.1/build/ yahoo-dom-event/yahoo-dom-event.js" > 12 13 <script type="text/javascript" 14 src="http://yui.yahooapis.com/2.5.1/build/ dragdrop/dragdrop-min.js" > 15 16 17 18 19 20 22 <script type="text/javascript"> 23 var dd1 = new YAHOO.util.DD("b1"); 24 // Alternative Verwendung von einer Referenz auf ein Element 25 var el=YAHOO.util.Dom.get("b2"); 26 var dd2 = new YAHOO.util.DD(el); 27 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 <script src="http://yui.yahooapis.com/2.5.1/build/yahoo/yahoo-min.js">

131

3 Das YUI – Yahoo User Interface

<script src="http://yui.yahooapis.com/2.5.1/build/event/event-min.js"> <script src="http://yui.yahooapis.com/2.5.1/build/connection/connectionmin.js">

3.8.2

Die Initiierung einer asynchronen Transaktion unter Verwendung des Connection Manager

Das nachfolgende Codefragment zeigt ein Beispiel für eine einfache Initiierung einer asynchronen Transaktion unter Verwendung des Connection Manager Utility. Listing 3.18: So einfach kann es gehen. <script> var transaction = YAHOO.util.Connect.asyncRequest( 'GET', sUrl, callback, null);

Die Methode YAHOO.util.Connect.asyncRequest() initiiert eine asynchrone Transaktion unter Verwendung des XMLHttpRequest-Objekts und gibt eine Referenz auf diese Transaktion zurück. Das erste Argument spezifiziert die HTTP-Methode. Das zweite Argument ist ein qualifizierter URL und das dritte Argument eine Referenz auf ein definiertes Callback-Objekt oder ein dort notiertes Inline-Objekt, das die Antwort des Servers behandelt. Das vierte Argument benötigt man bei der Methode POST zur Angabe einer Nachricht bei der Transaktion. Im Fall von GET20 steht dort null oder es bleibt weg. Eine solche Initiierung einer asynchronen Transaktion unter Verwendung des Connection Manager Utility wird – wie auch bei einer händischen Erstellung einer AJAXAnfrage – üblicherweise in eine Funktion zum Auslösen der AJAX-Anfrage eingebaut, die in der Webseite über einen Eventhandler ausgelöst wird. Listing 3.19: Auslösen der AJAX-Anfrage function sndReq(i){ var sUrl = 'meinPHPSkript.php'; var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback); }

20 Was der Regelfall AJAX-Transaktionen ist.

132

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

3.8.3

Asynchrone Transaktionen und das Callback-Objekt

In einer asynchronen Transaktion erstellen Sie so gut wie immer ein CallbackObjekt, um mit der Antwort des Servers und den assoziierten Daten umgehen zu können. Wenn Sie nur die Daten interessieren und nicht die eigentliche Antwort des Servers, können Sie zwar dieses Objekt vernachlässigen, aber in der Regel interessieren Sie drei Member in Ihrem Callback-Objekt, die jedoch allesamt optional sind:  success: Im Fall einer gültigen HTTP-Response durch den Server wird mittels die-

ses Members eine Funktion aufgerufen.  failure: Sie können auch auf eine Fehlermeldung des Servers reagieren (etwa

HTTP 404 – file not found) und eine entsprechende Fehlerfunktion aufrufen.  argument: Dieser Member steht für ein Objekt, ein String, eine Zahl oder ein Array

mit Daten, das Ihre Funktion im Erfolgs- oder Fehlerfall benötigt, um erfolgreich die Antwort des Servers zu verarbeiten. Beim Abgleich einer Transaktion wird der Connection Manager den HTTP-Code evaluieren, den er durch den Server erhalten hat. Damit kann bestimmt werden, ob die Anfrage erfolgreich war oder nicht. In Abhängigkeit davon wird der passende Callback-Handler (success oder failure) aufgerufen. Hier sehen Sie ein Beispiel für ein Callback-Objekt, das für die Member success und failure Inline-Funktionen definiert. Natürlich können Sie auch Funktionsreferenzen auf externe definierte Funktionen hier hinschreiben, was wir im nachfolgenden vollständigen AJAX-Beispiel machen wollen. Die Eigenschaft argument zeigt, wie man mehrere Werte zum Callback als Array weiterreicht.21 Listing 3.20: Die Konstruktion eines Callback-Objekts, bei dem mehrere Argumente übergeben werden var callback = { success: function(o) { /* Handlercode im Erfolgsfall */ }, failure: function(o) { /* Handlercode im Fall eines Fehlers*/ }, argument: [argument1, argument2, argument3] }

Der Erfolgsfall – success Im Fall einer erfolgreichen AJAX-Anfrage enthält das Antwortobjekt des Servers diverse Eigenschaften, die an den success-Handler des Callback-Objekts weitergereicht werden. Diese entsprechen sowohl in der Funktion als auch der Bezeichnung 21 Das Array kann natürlich auch als Variable verfügbar sein.

133

3 Das YUI – Yahoo User Interface

im Wesentlichen den HTTP-Header-Feldern, die ein typischer Webserver bei einer Anfrage durch einen Webbrowser sendet: Eigenschaft

Beschreibung

tId

Eine eindeutige, inkrementelle ID für die Transaktion

status

Der HTTP-Statuscode

statusText

Die Meldung, die dem HTTP-Status zugeordnet ist

getResponseHeader[label]

Ein String mit dem Wert des spezifizierten Header-Labels

getAllResponseHeaders

Ein String mit allen HTTP-Headern. Jedes Label/Wert-Paar wird durch "\n" getrennt.

responseText

Die Antwort des Servers als String

responseXML

Die Antwort des Servers als XML-Baum

argument

Die vom Anwender definierten Argumente aus dem CallbackObjekt

Tabelle 3.2: Die Eigenschaften im Erfolgsfall

Der Fehlerfall – failure Wenn der Server auf eine AJAX-Anfrage mit einem Fehler reagiert, versucht der Connection Manager, so viel wie möglich Informationen an den failure-Handler des Callback-Objekts weiterzureichen. Die Eigenschaften dieses Antwortobjekts sind identisch mit denen im Erfolgsfall. Der Connection Manager reicht alle Werte weiter, die sinnvoll im Fehlerfall verwertet werden können.

Ein vollständiges Beispiel für eine AJAX-Anfrage mit dem YUI Um ein vollständiges Beispiel für eine AJAX-Anfrage mit dem YUI zu sehen, modifizieren wir das erste AJAX Beispiel aus Kapitel 2. In diesem Beispiel waren in einer Tabelle mehrere Bilder zu sehen, bei deren Überstreichen mit dem Mauszeiger eine Zusatzinformation in der Webseite jeweils neben dem Bild angezeigt wurde. Dieses Verhalten werden wir mit dem YUI nachbilden und zudem einige Statusinformationen der Transaktionen ausgeben. So soll die neue Webapplikation aussehen (ajaxyui.html): Listing 3.21: Ein vollständiges Beispiel für eine AJAX-Anfrage mit dem YUI 01 03 04 05 <meta http-equiv="Content-Type" 06 content="text/html; charset=iso-8859-1" /> 07

134

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

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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

<script src= "http://yui.yahooapis.com/2.5.1/build/yahoo/yahoo-min.js"> <script src= "http://yui.yahooapis.com/2.5.1/build/event/event-min.js"> <script src= "http://yui.yahooapis.com/2.5.1/build/ connection/connection-min.js">

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 <script> 63 var id = null; // globale Variable zur Steuerung der Augabe 64 // Handler für den Erfolgsfall 65 var handleSuccess = function(o){ 66 if(o.responseText !== undefined){ 67 // Zusammensetzen einer Ausgabe aus der Serverantwort 68 // samt Header-Feldern 69 var antwort = "

"; 70 antwort = "
1. Transaktions-ID: " + o.tId + "
"; 71 antwort += "
2. HTTP-Status: " + o.status + "
"; 72 antwort += "
3. Statustext: " + o.statusText + "
"; 73 antwort += "
4. Antwort des Servers: " + 74 o.responseText + "

"; 75 // Ausgabe in Webseite 76 document.getElementById(id).innerHTML = antwort; 77 } 78 } 79 // Handler für den Fehlerfall 80 var handleFailure = function(o){ 81 if(o.responseText !== undefined){ 82 var antwort = "

"; 83 antwort = "
1. Transaktions-ID: " + o.tId + "
"; 84 antwort += "
2. HTTP-Status: " + o.status + "
"; 85 antwort += "
3. Statustext: " + o.statusText 86 + "

"; 87 } 88 } 89 // Callback-Objekt 90 var callback = { 91 success:handleSuccess, 92 failure:handleFailure 93 }; 94 // Funktion zum Auslösen der AJAX-Anfrage 95 function sndReq(i){ 96 id=i; 97 var sUrl = id + 'info.txt'; 98 var request = 99 YAHOO.util.Connect.asyncRequest('GET', sUrl, callback); 100 } 101 // Löschen des Anzeigebereichs 102 function loesch(id){ 103 document.getElementById(id).innerHTML = ""; 104 } 105 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 <script src="http://yui.yahooapis.com/2.5.1/build/yahoo/yahoo-min.js"> <script src="http://yui.yahooapis.com/2.5.1/build/json/json-min.js">

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 <meta http-equiv="Content-Type" 06 content="text/html; charset=iso-8859-1" /> 07 08 09 <script src= 10 "http://yui.yahooapis.com/2.5.1/build/yahoo/yahoo-min.js"> 11 12 13 <script src= 14 "http://yui.yahooapis.com/2.5.1/build/event/event-min.js"> 15 16 17 <script src="http://yui.yahooapis.com/2.5.1/ build/connection/connection-min.js"> 18 <script src="http://yui.yahooapis.com/2.5.1/build/ json/json-min.js"> 19 20 21

JSON-Verwertung mit AJAX und dem YUI

22 Klick

141

3 Das YUI – Yahoo User Interface

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 71

142

<script> // Handler für den Erfolgsfall var handleSuccess = function(o){ if(o.responseText !== undefined){ // Zusammensetzen einer Ausgabe aus der Serverantwort // im JSON-Format var text="" + ""; // Die JSON-Datei, wie sie vom Server geliefert wird var jsonString = o.responseText; // Parsing von JSON-Strings kann eine Ausnahme // vom Typ SyntaxError auswerfen. Deshalb wird das Parsen // in einen try-catch-Block eingeschlossen try { var meinJSONObjekt = YAHOO.lang.JSON.parse(jsonString); } catch (e) { alert("Fehler"); } // Verwerten der Daten for(i=0;i <meinJSONObjekt.bindings.length;i++) { text += ""; } // Ausgabe in Webseite document.getElementById("ergeb").innerHTML = text; } } // Handler für den Fehlerfall var handleFailure = function(o){ if(o.responseText !== undefined){ // Ausgabe des Fehlertextes vom Server document.getElementById("ergeb").innerHTML = o.status + ": " + o.statusText; } } // Callback-Objekt var callback = { success:handleSuccess, failure:handleFailure }; // Funktion zum Auslösen der AJAX-Anfrage function sndReq(){ var sUrl = 'json.txt'; var request =

3.9 Das JSON Utility

72 YAHOO.util.Connect.asyncRequest('GET', sUrl, callback); 73 } 74 75

Abbildung 3.18: Die JSON-Daten wurden nach der AJAX-Anforderung qualifiziert im Client verarbeitet. Im Beispiel sehen Sie im Wesentlichen eine Überschrift und eine Schaltfläche, über die bei einem Klick eine AJAX-Anfrage ausgelöst wird (Zeile 22). In Zeile 23 sehen Sie die Definition eines Ausgabebereichs für die Antwort des Servers. In den Zeilen 27 bis 54 finden Sie die Definition der Handler-Funktion für den Erfolgsfall, wie es im YUI in Verbindung mit dem Connection Manager vorgesehen ist. Im Wesentlichen wird diese Funktion aus der gesendeten JSON-Datei einer Tabelle aufgebaut, wie wir es in Kapitel 2 schon besprochen haben. Die entscheidenden Neuerungen sehen Sie in den Zeilen 34 bis 43. Hier sehen Sie die Evaluierung der Array-Struktur aus der JSON-Datei, wie sie vom Server geliefert wird. Von besonderer Bedeutung ist Zeile 39: var meinJSONObjekt = YAHOO.lang.JSON.parse(jsonString);

Das Verwerten der resultierenden Daten erfolgt analog der ersten Version des Beispiels aus Kapitel zwei.

143

3 Das YUI – Yahoo User Interface

In diesem Beispiel ist auch die Handler-Funktion für den Fehlerfall so weit ausprogrammiert, dass es im Fehlerfall eine Meldung in der Webseite gibt. Diese Ausgabe sehen Sie in Zeile 59 und 60. Der Rest des Listings entspricht im Wesentlichen dem AJAX-Beispiel auf Seite 134.

Abbildung 3.19: Im Fehlerfall wird eine Standardmeldung des Webservers in der Webseite angezeigt.

3.9.4

Verwandeln von JavaScript-Daten in einen JSON-String

Zum Umwandeln eines JavaScript-Objekts oder eines passend strukturierten Werts in einen JSON-String übergeben Sie das Objekt oder den Wert an die Methode YAHOO.lang.JSON.stringify() und verwerten den zurückgegebenen String. Falls das schief geht, erhalten Sie den Wert null. Listing 3.28: Umwandlung in einen JSON-String var meineDaten = { mannschaft : [ { name: "Felix",alter: 8}, { name: "Florian", alter:8 } ] }; var jsonStr = YAHOO.lang.JSON.stringify(meineDaten);

144

3.10 Eine Übersicht über wichtige Komponenten des YUI Library Control/Widget

3.10

Eine Übersicht über wichtige Komponenten des YUI Library Control/Widget

Bei derzeit bereits nahezu 300 Komponenten beziehungsweise Widgets des YUI25 ist es natürlich vollkommen unmöglich, dass wir uns mit allen diesen Elementen beschäftigen. Das ist auch insbesondere bei den Komponenten des YUI Library Control/Widget nicht notwendig. Wie Sie bereits im ersten praktischen Beispiel gesehen haben, werden auch die anderen Komponenten des YUI sich weitgehend gleich verwenden lassen. Das YUI ist strukturell sehr konsistent aufgebaut. In diesem Abschnitt wollen wir deshalb nur eine kleine Übersicht über die Komponenten geben und punktuell einzelne Komponenten des Bereichs YUI Library Controls/Widgets als Beispiele herausgreifen. Konkret finden Sie in diesem Bereich in der Version 2.5.1 folgende Bereiche für Controls bzw. Widgets:  AutoComplete  Button  Calendar  Charts  Color Picker  Container (inklusive Module, Overlay, Panel, Tooltip, Dialog, SimpleDialog)  DataTable  ImageCropper  Layout Manager  Menu  Rich Text Editor  Slider  TabView  TreeView  Uploader

Von diesen Hauptkategorien kommen Sie in der Regel in die verschiedensten Unterkategorien mit verschiedenen Ausprägungen. So gibt es beispielsweise für Schaltflächen die folgenden Ausprägungen:  Push Button  Link Button 25 Mit steigender Tendenz.

145

3 Das YUI – Yahoo User Interface

 Submit Button  Reset  Checkbox Button  Radio Button  Menu Button  Split Button

Dazu kommen noch diverse Kombinationen mit anderen Controls bzw. Widgets.

Abbildung 3.20: Ein Menu Button mit einer Kalenderkomponente Hinweis Die Anwendung jeder einzelnen Komponente ist – wie schon mehrfach erwähnt – in der Dokumentation des YUI hervorragend beschrieben und deshalb sparen wir uns in diesem Buch die konkrete Behandlung, wie Sie ein bestimmtes Control oder Widget in Ihre Webseite integrieren. Das Verfahren entspricht den bisher schon behandelten Schritten und ist in der Regel sogar viel einfacher. Selbst recht komplexe Widgets wie ein Rich Text Editor lassen sich meist fast ohne Änderungen durch Kopieren aus der eigenständigen Darstellung einer einzelnen Komponente in die eigene Webseite einbauen.

146

3.11 Kontrollieren, Überwachen und Optimieren Ihrer YUI-RIA

Abbildung 3.21: Ein Rich Text Editor zum Verarbeiten von Quellcode – hier wird der Quelltext der eigenen Datei angezeigt, den Sie nur für Ihre eigene Webseite kopieren brauchen.

3.11

Kontrollieren, Überwachen und Optimieren Ihrer YUI-RIA

Unter dem YUI muss man sich mittlerweile viel mehr vorstellen als nur eine Sammlung von Utilities und Widgets. Das YUI stellt neben den Komponenten zur Gestaltung einer GUI für den Besucher einer Webseite auch diverse Mechanismen bereit, mit denen Sie bei der Entwicklung Ihre Webapplikation kontrollieren, überwachen und optimieren können. Die Entwickler-Tools in der Kategorie YUI Developer Tools und einige weitere Tools erleichtern Ihnen diese Schritte auf vielfältige Weise.

147

3 Das YUI – Yahoo User Interface

3.11.1

Der YUI Compressor

Ein sehr nützliches Tool des YUI ist der YUI Compressor (http://developer.yahoo. com/yui/compressor/). Dies ist eine Erzeugerkomponente zum Minimieren der JavaScript- und CSS-Dateien sowie einiger weiteren Maßnahmen wie HTTP-Kompression. Damit kann man das Ladeverhalten einer RIA effektiv und einfach optimieren. Zudem wird Ihre Applikation nicht mehr so leicht zu lesen sein, was in Bezug auf geistiges Eigentum sicher auch nicht uninteressant ist.26

Abbildung 3.22: Der YUI Compressor steht über den Browser zur Verfügung. Der YUI Compressor, den Sie sich auf Ihren Rechner laden müssen, ist in Java geschrieben und benötigt daher natürlich eine Java-Laufzeitumgebung. Deren Version muss höher als 1.4 sein. Sie rufen das Tool dann einfach über den Java-Interpreter aus einer Konsole auf. Die genaue Syntax zum Aufruf finden Sie in der Dokumentation.

26 Zumindest werden Laien nicht mehr ganz so einfach Ihre Ideen und Entwürfe einfach kopieren und für eigene Zwecke verwenden können.

148

3.11 Kontrollieren, Überwachen und Optimieren Ihrer YUI-RIA

3.11.2

Der YUI Configurator

In jedem Fall sollten Sie sich auch einmal den online verfügbaren YUI Configurator (http://developer.yahoo.com/yui/articles/hosting/#configure) ansehen, wenn Sie die YUIRessourcen für Ihre RIA zusammenstellen. Dieses Tool stellt einen sehr bequemen und zuverlässigen Weg dar, um eine optimierte Liste von Skripten und CSS-Dateien aus dem YUI-API zu kalkulieren, die Sie für Ihre spezielle Implementierung benötigen. Diese Liste bauen Sie dann per Copy&Paste einfach in Ihre Webseite ein. In den Dokumentationen zu fast allen YUI-Komponenten und -Utilities wird auch auf den YUI Configurator und dessen Vorteile in Hinsicht auf Bequemlichkeit und optimale Verwendung der YUI-Ressourcen verwiesen.

Abbildung 3.23: Mit dem YUI Configurator können Sie eine optimierte Liste an Ressourcen generieren. Um den YUI Configurator einzusetzen, brauchen Sie in der Webseite bloß die gewünschten Utilities, Widgets, Tools, Packages etc. anzuklicken und im Listenfeld unter dem Auswahl-Button tauchen alle Referenzen auf, die Sie benötigen. Diese müssen Sie nur in Ihre Webseite kopieren.

149

3 Das YUI – Yahoo User Interface

3.11.3

Kontrolle und Überwachung

Das YUI stellt neben den Komponenten zur Gestaltung einer GUI für den Besucher einer Webseite sowie zur Optimierung der RIA auch diverse Mechanismen bereit, mit denen Sie als Entwickler bei der Entwicklung Ihre Webapplikation kontrollieren und überwachen können.

Das Logger Control Wenn Sie sich die offiziellen YUI-Seiten für ein Beispiel ansehen, finden Sie am rechten Rand der Webseite meist einen Link, über den Sie die Seite mit aktiviertem Protokollmodul (Logger Control) neu laden können. In Abbildung 3.24 sehen Sie beispielsweise genau, was jede Drag&Drop-Aktion in dem auf Seite 106 besprochenen offiziellen YUI-Beispiel zum Thema Drag&Drop bewirkt.

Abbildung 3.24: Protokollieren mit dem Logger Control

150

3.11 Kontrollieren, Überwachen und Optimieren Ihrer YUI-RIA

Allgemein stellt das Logger Control einen einfachen Weg zur Verfügung, um mit meist nur einer einzigen Zeile Quellcode Protokollnachrichten zu lesen oder zu schreiben. Tipp Mittels dieses Control können Sie vor allen Dingen die Arbeitsweise jeder Komponente der YUI-Bibliothek analysieren.

Das Logger Control stellt eine einfache Nachrichtenschnittstelle zur Verfügung, über die Sie Protokollmeldungen auf Ihrem Bildschirm filtern, pausieren, neu starten und löschen können. Und das Control arbeitet auch mit der FireBug-Erweiterung von Firefox zusammen sowie mit der JavaScript-Console des Safari-Webbrowsers. Das Logger Control unterstützt die Anpassung von Protokollmeldungen sowie die Bildung von Kategorien und Filtern. Und natürlich können – ausreichende JavaScript-Kenntnisse vorausgesetzt – Programmierer den Logger erweitern, um so ihre eigenen Implementationen zu erstellen, die für spezielle Situationen optimiert sind.

Anwenden des Logger Control in einer eigenen Applikation Um die Logger-Komponente in Ihrer eigenen Applikation verwenden zu können, binden Sie zuerst die folgenden notwendigen YUI-Dateien mit dem <script>-Tag in Ihre Webseite ein: Listing 3.29: Die notwendigen Ressourcen für die Logger-Komponente <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/ yahoo-dom-event/yahoo-dom-event.js"> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/ logger/logger-min.js">

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 <script type="text/javascript"> var myLogReader = new YAHOO.widget.LogReader();

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.

<script type="text/javascript"> var myLogReader = new YAHOO.widget.LogReader("myLogger");

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 <script type="text/javascript"> var myContainer = document.body.appendChild(document.createElement("div")); var myLogReader = new YAHOO.widget.LogReader(myContainer);

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. <script type="text/javascript"> // Zuweisung der Defaultkategorie "info" und Defaultquelle // "global" YAHOO.log("Meine Protokollnachricht: " + o.statusText);

Um die Nachrichten einer Kategorie zuzuordnen, geben Sie als zweiten Parameter eine solche an. Listing 3.34: Protokollnachrichten einer Kategorie zuordnen <script type="text/javascript"> // Zuweisung der Kategorie "source" mit einem vordefinierten Stil YAHOO.log("Meine Protokollnachricht", "warn");

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 <meta http-equiv="Content-Type" 06 content="text/html; charset=iso-8859-1" /> 07 09 10 11 12 <script type="text/javascript" src= 13 "http://yui.yahooapis.com/2.5.1/build/yahoo/yahoo-min.js"> 14 15 16 <script type="text/javascript" src= 17 "http://yui.yahooapis.com/2.5.1/build/event/event-min.js"> 18 19 20 <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/ connection/connection-min.js"> 21 <script type="text/javascript"

154

3.11 Kontrollieren, Überwachen und Optimieren Ihrer YUI-RIA

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

src="http://yui.yahooapis.com/2.5.1/build/ json/json-min.js"> <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/ yahoo-dom-event/yahoo-dom-event.js"> <script type="text/javascript" src= "http://yui.yahooapis.com/2.5.1/build/logger/logger-min.js">

Protokollierte JSON-Verwertung mit AJAX und dem YUI

Klick

<script> // Handler für den Erfolgsfall var handleSuccess = function(o){ // Protokollmeldung wird erstellt YAHOO.log("Handler Erfolgsfall aufgerufen: " + o.tId); if(o.responseText !== undefined){ // Zusammensetzen einer Ausgabe aus der Serverantwort // im JSON-Format var text="

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

" + ""; // Die JSON-Datei, wie sie vom Server geliefert wird var jsonString = o.responseText; // Parsing von JSON-Strings kann eine Ausnahme // vom Typ SyntaxError auswerfen. Deshalb wird das Parsen // in einen try-catch-Block eingeschlossen try { var meinJSONObjekt = YAHOO.lang.JSON.parse(jsonString); } catch (e) { alert("Fehler"); } // Verwerten der Daten for(i=0;i <meinJSONObjekt.bindings.length;i++) { text += ""; }

155

3 Das YUI – Yahoo User Interface

67 // Ausgabe in Webseite 68 document.getElementById("ergeb").innerHTML = text; 69 } 70 } 71 // Handler für den Fehlerfall 72 var handleFailure = function(o){ 73 // Fehler protokolliert 74 YAHOO.log("Handler Fehlerfall aufgerufen: " + o.tId); 75 if(o.responseText !== undefined){ 76 // Ausgabe des Fehlertextes vom Server 77 document.getElementById("ergeb").innerHTML = 78 o.status + ": " + o.statusText; 79 } 80 } 81 // Callback-Objekt 82 var callback = { 83 success:handleSuccess, 84 failure:handleFailure 85 }; 86 // Funktion zum Auslösen der AJAX-Anfrage 87 function sndReq(){ 88 var sUrl = 'json.txt'; 89 var request = 90 YAHOO.util.Connect.asyncRequest('GET', sUrl, callback); 91 // Aufruf der AJAX-Anfrage wird protokolliert 92 YAHOO.log("AJAX-Anfrage weggeschickt:" + request.tId); 93 } 94 // Erzeugen LogReader und Anzeige in Div-Element mit der 95 // ID myLogger 96 var myLogReader = 97 new YAHOO.widget.LogReader("myLogger"); 98 99

Dieses Beispiel unterscheidet sich bezüglich AJAX und JSON funktional überhaupt nicht von dem Beispiel auf Seite 141. Per AJAX werden über das YUI JSON-Daten angefordert und in die Webseite eingebaut. Allerdings protokollieren wir dieses Mal wie gesagt die entscheidenden Schritte und geben die Protokollmeldungen direkt in einem LogReader in der Webseite aus. Der LogReader lässt sich genauso konfigurieren, wie Sie es in den Standardbeispielen des YUI sehen. Sie können die Kategorien auswählen, die protokolliert werden, die Aufzeichnung pausieren lassen, die Meldungen löschen und den Bereich des LogReader kollabieren und wieder expandieren. In Zeile 10 finden Sie eine Verlinkung mit einer externen CSS-Datei, die das Layout des Logger gestaltet. Natürlich sind auch die notwendigen JavaScript-Bibliotheken für den Logger eingebunden (Zeile 26 bis 28).

156

3.11 Kontrollieren, Überwachen und Optimieren Ihrer YUI-RIA

Abbildung 3.25: Die Applikation nach dem Laden, aber vor der ersten AJAX-Anfrage

Abbildung 3.26: Die Logger Console lässt sich kollabieren und expandieren. In den Zeilen 35 bis 37 ist ein Anzeigebereich für den Logger in der Seite vorgesehen. Dieser wird zur optischen Hervorhebung mit internen CSS-Formatierungen positioniert und gestaltet:

157

3 Das YUI – Yahoo User Interface

Im Laufe des folgenden JavaScripts finden Sie verschiedene Stellen, an denen Meldungen dem Logger hinzugefügt werden. In Zeile 43 wird eine Protokollmeldung erstellt, wenn der Handler für den Erfolgsfall aufgerufen wird: YAHOO.log("Handler Erfolgsfall aufgerufen: " + o.tId);

Vollkommen analog arbeiten wir in Zeile 74 für den Handler im Fehlerfall. Und ebenso protokollieren wir das Auslösen der AJAX-Anfrage. Diese Anweisung sehen Sie in Zeile 92: YAHOO.log("AJAX-Anfrage weggeschickt:" + request.tId);

In den Zeilen 96 und 97 wird ein LogReader erzeugt und dem vorgesehenen Anzeigebereich zugeordnet. Der LogReader wird in diesem Fall nicht weiter konfiguriert.

Abbildung 3.27: Die Applikation nach der ersten AJAX-Datenanfrage

158

3.12 Die –debug-Versionen der YUI-Komponenten

3.12

Die –debug-Versionen der YUI-Komponenten

Im Zusammenhang mit der Optimierung und Fehlersuche in Ihrer RIA ist es auch interessant, dass für jede JavaScript-Datei einer Komponente auch eine –debug-Version existiert. Diese Version enthält zusätzlichen Code, der bestimmte Ausgaben für das YUI Logger Control generiert. Diese Nachrichten enthalten erweiterte Informationen über alle interessanten Momente, die während einer Interaktion mit einer Komponente auftreten können. Um dieses Feature nutzen zu können, verwenden Sie die Debug-Versionen einer Datei in Ihrer Seite27 und binden Sie das YUI Logger Control ein. Dabei müssen Sie eine Instanz eines LogReader erstellen, damit Sie Ihre Nachrichten auf dem Bildschirm sehen können. Achtung Beachten Sie, dass die Debug-Versionen nicht auf den Server von Yahoo! gehostet werden, sondern sich nur in den Download-Files befinden. Sie müssen also für eine Anwendung auf Ihre eigenen Webserver-Ressourcen zugreifen.

3.13

Zusammenfassung

Sie haben in diesem Kapitel den Umgang mit dem YUI kennengelernt. Wenn man sich den Quellcode der einzelnen YUI-Komponenten ansieht, erkennt man sowohl recht triviale Kernkomponenten wie die einfachen Event- und DOM-Utilities als auch Animationen, deren händische Erstellung einen halbwegs fitten JavaScript-Programmierer kaum fordern. Aber bereits Drag&Drop-Features und vor allem wirklich komplexe Konstruktionen, die insbesondere seit der Version 2.3 als Neuerungen hinzukamen, stellen andere Möglichkeiten bereit. Hier spart man sich in der Tat erheblich Arbeit. Und die CSS-Bibliothek ist wirklich Gold wert. Und nicht zuletzt die zahlreichen Tools und Utilities des YUI sind absolut mächtig und nützlich. Dennoch ist das YUI recht einfach anzuwenden, da es sehr konsistent aufgebaut und sehr gut dokumentiert ist.

27 Beachten Sie, dass Sie damit die Performance natürlich gewaltig reduzieren können.

159

4

Das Dojo-Toolkit

In diesem Kapitel beschäftigen wir uns sehr ausführlich mit dem Dojo-Toolkit. Dabei handelt es sich um ein weiteres modular aufgebautes clientseitiges AJAX-Toolkit bzw. -Framework auf Basis von JavaScript, das von der Dojo Foundation und einer großen freien Community vorangetrieben wird. Natürlich stellt auch dieses Toolkit ausgefeilte Unterstützung für die asynchrone Kommunikation zwischen Client und Server zur Verfügung, die diese Kommunikation kapselt und damit vereinfachen soll. Immerhin nennt sich Dojo ja ausdrücklich ein AJAX-Toolkit. Das eigentliche Highlight im Dojo Toolkit ist aber die große Anzahl an vorgefertigten Widgets, die deklarativ verwendet werden können, um daraus anspruchsvolle Oberflächen von Webapplikationen auf einfache Weise zusammenzubauen und dabei möglichst übersichtliche HTML-Seiten zu erstellen. Hinzu kommen eine ausgefeilte Infrastruktur des Toolkits sowie eine umfangreiche Sammlung an vorgefertigten JavaScript-Funktionen für eindrucksvolle DHTML-Effekte bzw. Animationen. Die modulare Struktur des Toolkits sorgt nicht nur für eine gute Übersicht, sondern vermeidet auch Namenskonflikte, die bei einer Bibliothek dieser Größe unvermeidbar wären.

4.1

Was ist das Dojo Toolkit? – ein Überblick

Die Geschichte von Dojo reicht bis ins Jahr 2004 zurück. Ein Entwickler namens Alex Russell initiierte ein Projekt zur Weiterentwicklung von DHTML, aus dem die Dojo Foundation1 und das Dojo Toolkit hervorgingen. Hinweis Das Dojo Toolkit wird als Open Source unter zwei freien Lizenzen bereitgestellt. Es gibt einmal die Academic Free License v2.1 (AFL), die auch einen weitgehend unbeschränkten kommerziellen Einsatz gestattet. Das Dojo Toolkit kann aber auch alternativ mit der strengeren BSD-Lizenz verwendet werden.

1

Dieser gehören mittlerweile viele Big Player im Internet wie IBM, AOL, Sun, SitePen, Bloglines, Google oder Nexaweb an.

4 Das Dojo-Toolkit

Die aktuelle Version des Dojo Toolkit steht mittlerweile für ein sehr performantes und in sich geschlossenes System aus RIA-Komponenten, das im Gegensatz zu einigen anderen Konzepten keine Zusammenstellung aus verschiedenen Quellen für ein komplettes Framework benötigt. Das hat einige Vorteile. Im Konzept von Dojo kann jede Komponente aus einem vertrauenswürdigen Satz an qualitativ hochwertigen Erstellungsblöcken gebildet werden, die über eine integrierte Infrastruktur und einen großen Bereich an optionalen Modulen aus einer Hand bereitgestellt werden. Dies gewährleistet ein optimales Zusammenspiel der einzelnen Komponenten. Gerade die Infrastruktur für die Internationalisierung und Zugänglichkeit sowie eine Fokussierung auf hohe Qualität und Konsistenz der Komponenten zeichnen das Dojo Toolkit aus. Die Komponenten arbeiten allesamt reibungslos zusammen und das gesamte System ist durch seine strikte modulare Trennung vollständig über CSS anzupassen. Die Komponenten werden allesamt rein auf Clientseite realisiert und hängen in keiner Weise von spezifischen serverseitigen Bindungen ab. Auch das gewährleistet eine optimale Einsatzfähigkeit in verschiedenen Umfeldern.

4.1.1

Die Build Tools und das Paketsystem

Im Dojo Toolkit gibt es zur Erstellung einer Webapplikation sogenannte Build Tools samt einem Paketsystem mit Namensräumen. Darüber lassen sich skalierbare und flexible UI-Projekte auf einfache Weise verwalten und gegebenenfalls ohne wesentliche Veränderungen im Quellcode anpassen. Das Build-System erlaubt es, die einzelnen Funktionsmodule in einer einzigen JavaScript-Datei zusammenzufassen. Dadurch ist unter anderem auch sichergestellt, dass von dem Besucher einer DojoWebseite nur die wirklich benötigten Bestandteile des Toolkits in den Browser geladen werden und auch nur eine Datei mit den Funktionalitäten des Toolkits vom Server geladen werden muss. Auf diese Weise lässt sich nicht zuletzt die Performance von Webapplikationen erheblich optimieren.

4.1.2

Die drei Säulen von Dojo

Das Dojo Toolkit selbst spaltet sich in drei wesentliche Bestandteile auf:  Unter dem Begriff Dojo Core oder kurz Dojo finden Sie die Kernfunktionalitäten

des Toolkits in Form einer sehr kompakten Bibliothek. Die Features umfassen die Unterstützung für AJAX, Ereignisse, Verpacken von Dateien, CSS-basierende Abfragen, grundlegende Animationstechniken, JSON, Sprachutilities etc. Diese Bibliothek ist trotz des Leistungsumfangs aktuell nur etwa 24 Kbyte groß (gezippt) und die Basis der beiden anderen Säulen. Dojo Core können Sie jedoch auch ohne die anderen beiden Säulen verwenden.  Das Dijit setzt unmittelbar auf dem Dojo Core auf und enthält eine Vielzahl an an-

passbaren, Template-gestützten Widgets, die sowohl lokalisierbar2 als auch

2

Das bedeutet, sowohl an verschiedene Sprachen anzupassen als auch kulturelle Eigenheiten wie Zahlenformate oder Währungssymbole.

162

4.1 Was ist das Dojo Toolkit? – ein Überblick

barrierefrei sind. Dieser Teil des Toolkits realisiert im Wesentlichen die Elemente einer Web-GUI bis hin zur eindrucksvollen Optik der meisten Dojo-Referenzanwendungen, wird aber von einigen Browsern nicht vollständig unterstützt – obwohl diese oftmals zumindest die Kernfunktionalitäten des Toolkits supporten. Sie finden in diesem Bereich ebenfalls sehr ausgefeilte externe Stylesheet-Dateien (sogenannte Themes bzw. Themen), die Sie natürlich auch für Ihre eigenen Webseiten hervorragend anwenden können.3

Abbildung 4.1: Mächtige CSS-Themes im Dijit-Bereich  Teil 3 des Toolkits nennt sich DojoX. Dahinter verbergen sich besonders originelle

und innovative Codestrukturen und Widgets als Erweiterungen der Kernfunktionalitäten. Damit können Sie u.a. Ihre Daten mit Tabellen und Charts visualisieren, Ihre Applikationen offline verfügbar machen oder beispielsweise auch browserübergreifene Vektorgrafiken erstellen. Auch dieser Bereich ist in einigen Browsern nur teilweise verfügbar.

3

So gesehen können Sie einen Teil des Dijit auch ohne Dojo Core verwenden. Sie könnten im Extremfall für eine Anwendung sogar gänzlich auf die JavaScript-Funktionalität des DojoToolkits verzichten und nur die CSS-Funktionalität verwenden. Aber das ist eigentlich nicht der Sinn des Ganzen.

163

4 Das Dojo-Toolkit

Hinweis Wir fokussieren uns in diesem Buch deutlich auf Dojo Core und das Dijit. DojoX wird auch behandelt, aber nicht vollständig. Zum einen baut DojoX explizit auf den anderen beiden Säulen auf, zum anderen sind diverse Bestandteile davon noch experimentell und nicht zuletzt ist DojoX durch die recht komplexe Zusammenfügung verschiedener Dojo-Techniken für den Einstieg in das Toolkit eher ungeeignet. Es taugt also weniger zum Lernen denn zur Verbesserung der eigenen Webpage über Module, die Sie mehr oder weniger unverändert in Ihrer Webseite einbauen. Das soll Sie natürlich nicht daran hindern, sich tiefer mit DojoX zu beschäftigen, wenn Sie die Grundlagen des Toolkits verstanden haben.

4.2

Die offiziell unterstützten Browser

Wie alle leistungsfähigen Frameworks und Toolkits unterstützt Dojo explizit eine Reihe von Browsern vollständig. In nicht explizit genannten Browsern kann Dojo zudem (teilweise) funktionieren, aber das wird nicht garantiert. Offiziell werden die folgenden Browser unterstützt:  Safari 3.0.x sowie teilweise 2.0  Opera 9.0+, wobei aktuell nur Dojo Core offiziell vollständig funktioniert. Das Dijit

arbeitet aktuell im Opera nicht vollkommen korrekt.4

 Internet Explorer 6.0+  Firefox 1.5+/Mozilla  Konqueror 3.5+

Wie Sie sehen, werden – wie bei allen leistungsfähigen Toolkits und Frameworks im Webumfeld – sehr hohe Browser-Versionen vorausgesetzt.

4.3

How do I get this?

Nun stellt sich die Frage, wie Sie an das Dojo Toolkit herankommen? Die Homepage des Dojo-Projekts finden Sie unter http://dojotoolkit.org/. Hier finden Sie neben dem eigentlichen Toolkit diverse eindrucksvolle Live-Beispiele zum Testen und vor allen Dingen eine qualitativ sehr hochwertige Dokumentation.

4

Was mich persönlich ziemlich ärgert, da Opera mein favorisierter Browser ist. Nutzen Sie auf jeden Fall Opera einmal als Testbrowser für Ihre Dijit-Applikationen.

164

4.3 How do I get this?

Abbildung 4.2: Die Homepage des Dojo-Projekts

4.3.1

Download des Dojo Toolkits oder direkte Einbindung aus dem Internet

Um das Dojo Toolkit in eigenen Projekten zu verwenden, können Sie es entweder auf Ihren lokalen Rechner beziehungsweise Ihren eigenen Webserver laden und installieren oder direkt die Ressourcen aus dem Internet in ihren jeweiligen Webseiten einbinden.5 Tipp Wenn Sie an den aktuellsten experimentellen Builds interessiert sind, steht Ihnen auch ein sogenanntes Subversion Code Repository zur Verfügung. Darauf gehen wir aber nicht weiter ein.

5

Dies ist vollkommen analog zu den Möglichkeiten im YUI sowie vielen weiteren modernen Toolkits und Frameworks für Webapplikationen.

165

4 Das Dojo-Toolkit

Die Verwendung von Dojo über CDN Wenn Sie auf Ihrem Webserver Dojo nicht installieren wollen, können Sie Dojo über das <script>-Tag direkt von den AOL-CDN-Servern (Content Distribution Network oder Content Delivery Network) einbinden6 – etwa den folgenden URL für die Version 1.1.1, wobei die Versionsnummer im URL eindeutig widergespiegelt wird und für andere Versionen anzupassen ist: http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js Die Datei steuert das Paketsystem von Dojo, welches das Laden von allen anderen Ressourcen und Modulen des Dojo Toolkits verwaltet, sobald diese Datei in die Webseite geladen wurde.

Abbildung 4.3: Der Inhalt der JavaScript-Datei dojo.xd.js

6

Dort wird die offizielle Version von Dojo gehostet.

166

4.3 How do I get this?

Tipp Sie können sich den Inhalt der Datei natürlich in jedem Webbrowser ansehen. Sie werden eine recht komplexe JavaScript-Datei sehen, die kaum lesbar ist. Sie ist aber ein gutes Beispiel dafür, wie man JavaScript-Code in Bezug auf die Dateigröße optimieren kann.

Der Download zur Bereitstellung auf dem eigenen Rechner bzw. Webserver Für den Download des jeweils neuesten Release des Dojo Toolkit wählen Sie am einfachsten den Link DOWNLOAD NOW! auf der Einstiegsseite des Projekts. Sie kommen hierüber zur Seite http://dojotoolkit.org/downloads. Dort finden Sie einen großen, freundlichen Button zum Download und Sie können sofort das aktuelle stabile Release als Archiv auf Ihrer Festplatte speichern.

Abbildung 4.4: Ein Klick und es geht los.

167

4 Das Dojo-Toolkit

Der Download anderer Versionen des Dojo Toolkit erfolgt über http://download.dojotoolkit.org/ respektive den Link ALL RELEASES rechts oben in der Webseite.

Abbildung 4.5: Alle verfügbaren Versionen vom Dojo Toolkit Sie können aber auch direkt den URL http://download.dojotoolkit.org/current-stable/ verwenden. Die damit zu sehende Infrastruktur zum Download ist nicht ganz so einfach und komfortabel, sondern Sie kommen über den Link an eine einfache Webseite7 mit der direkten Anzeige der Dateinamen für eine größere Anzahl an verfügbaren Versionen. Allerdings ohne irgendwelche Erklärungen auf der Seite und Sie müssen sich aufgrund der Namenslogik für die richtige Version entscheiden. Natürlich finden Sie in der Dokumentation und anderen Seiten des Projekts Beschreibungen, für was welcher Dateiname steht.

7

Sie erinnert an einen schmucklosen FTP-Download, aber es handelt sich um einen HTTPDownload, wie Sie leicht am URL in der Adresszeile des Browsers erkennen können.

168

4.3 How do I get this?

Abbildung 4.6: Richtig komfortabel und übersichtlich ist der Zugang zum DownloadBereich des Dojo Toolkits nicht. Das Standardrelease, auf das wir uns in diesem Buch beziehen werden und das standardmäßig zur Verfügung gestellt wird, ist ein etwa 5 Megabyte großes Archiv mit der Bezeichnung dojo-release-#.#.#. Dieses gibt es als tar.gz- oder zip-Datei. Die Archive mit der zusätzlichen Erweiterung -src im Namensstamm zeigen an, dass es sich um ein Source-Release handelt. Diese Releases enthalten alle Tests und Utilities zum Erstellen Ihres eigenen, angepassten Dojo.8

8

Darauf werden wir nicht weiter eingehen.

169

4 Das Dojo-Toolkit

Tipp Beachten Sie auch das Dojo Book, eine frei verfügbare Sammlung an Anleitungen und Tutorien, die Ihnen über die Online-Dokumentation direkt im Browser zur Verfügung steht. Hier finden Sie weitere Wege beschrieben, um an die Sourcen von Dojo zu kommen, und ebenso Ausführungen, was es mit den verschiedenen Releases des Toolkits auf sich hat.

Hinweis Dem Buch liegt die Version 1.1.1 des Dojo Toolkits zugrunde.

4.3.2

Extrahieren = Installieren

Im Grunde ist die »Installation« des Dojo Toolkits auf Ihrem lokalen Rechner bzw. Ihrem Webserver nichts weiter als ein Extrahieren des Archivs. Da es sich bei Dojo um ein clientseitiges Toolkit bzw. Framework handelt, werden die meisten Funktionalitäten von Dojo auch über ein beliebiges Verzeichnis auf Ihrem Dateisystem funktionieren, wenn Sie auf Ressourcen mit dem file-Protokoll zugreifen.9 Allerdings sollten Sie Dojo dennoch direkt in das über http zugängliche Webverzeichnis Ihres Webservers entpacken, um insbesondere in Bezug auf die AJAX-Entwicklung bzw. die allgemeine Kommunikation mit dem Server gleich die notwendigen Voraussetzungen zu schaffen.

Abbildung 4.7: Diese Struktur sollte nach der Extraktion im Webverzeichnis Ihres Webservers vorliegen.

9

Also ohne eine Anfrage an einen Webserver.

170

4.3 How do I get this?

1011

Tipp Man sollte grundsätzlich alle Webseiten10 über einen HTTP-Aufruf testen. Das bedeutet, man ruft die Seite über einen Webserver auf. Es kann selbstverständlich ein lokaler Webserver sein (localhost bzw. 127.0.0.1), aber die Verwendung von HTTP zur Kommunikation mit dem Webserver ist wichtig. Bei einer ganz einfachen HTML-Seite ohne irgendwelche externen Ressourcen und programmiertechnischen Funktionalitäten mag ein direktes Laden in den Browser über das Dateisystem noch angehen. Aber bereits bei der Verwendung externer Ressourcen wie Grafiken, externe Stylesheets-Dateien oder externe JavaScript-Dateien simuliert so ein Vorgang schon nicht mehr die Realität im Web (und sei es nur die Beachtung der korrekten Verwendung der Dateinamen und -erweiterungen bezüglich Groß- und Kleinschreibung) – von AJAX und ähnlichen Aktivitäten mit Anfragen an einen Webserver ganz zu schweigen. Aber auch in Bezug auf clientseitige Programmierung mit JavaScript ist es sehr sinnvoll, über einen Webserver zu arbeiten. Sie sparen sich in vielen Fällen überflüssige Sicherheitsmeldungen von restriktiv eingestellten Webbrowsern, die beim lokalen Laden von einem JavaScript über file Sicherheitswarnungen anzeigen und die Ausführung blockieren11.

4.3.3

Die Datei dojo.js – die Verwaltungszentrale

Das Wichtigste, was Sie über das lokale Setup des Dojo Toolkits auf Ihren eigenen Systemen wissen müssen, ist, wo sich Ihre Kopie der Datei dojo.js12 befindet. Das Paketsystem von Dojo verwaltet – wie auch im Fall der Datei dojo.xd.js beim Einbinden von den offiziellen CDN-Servern – das Laden aller anderen Ressourcen und Module des Toolkits, sobald diese Datei in die Webseite geladen wurde. Das Laden der Basisdatei des Dojo Toolkits in einer Webseite erfolgt also schematisch so: Listing 4.1: Schema zum Laden der Basisdatei des Dojo Toolkits <script type="text/javascript" src="[URL zur Datei]/dojo.js" djConfig="parseOnLoad:[true|false], isDebug:[true|false]">

Das bedeutet also, dass Sie diese Zeile zum Einbinden der externen JavaScript-Datei in allen Ihren Webseiten notieren müssen, in denen Sie auf das Dojo Toolkit zugreifen wollen. 10 Nicht nur solche, die mit dem Dojo Toolkit arbeiten. 11 Zum Beispiel ist der lokale Webserver in der Regel im Internet Explorer in der sicheren Zone angesiedelt, während ein direktes Laden vom Dateisystem als Laden aus einer unsicheren Zone interpretiert wird. 12 Deren Aufbau entspricht im Wesentlichen der Datei dojo.xd.js, die Sie zum Laden der DojoRessourcen von den AOL-CDN-Servern einbinden können.

171

4 Das Dojo-Toolkit

Abbildung 4.8: Standardmäßig ist die Datei dojo.js neben diversen anderen JavaScript-Dateien im Unterverzeichnis dojo zu finden.

4.3.4

Konfiguration von Dojo

Nun gibt es in der Zeile zum Laden der Datei dojo.js einen ungewöhnlichen Parameter im Skript-Tag – jdConfig –, der Ihnen sicher aufgefallen ist. Dieser zählt nicht zum Standard von HTML. Er ist proprietär und dient der Konfiguration des Dojo Toolkits. Das Dojo Toolkit verfügt über einen Mechanismus, um verschiedene Konfigurationsoptionen zur Laufzeit zu setzen. Die beiden wichtigsten sind parseOnLoad zum Umschalten des Parsen von Widgets und eingebettetem Code beim Seitenladen sowie isDebug, worüber man verschiedene Debug-Informationen ein- und ausstellt. Aber Sie können hier auch beispielsweise Einstellungen für die JSON-Verarbeitung vornehmen. Am bequemsten ist es, wenn Sie die Optionen direkt im <script>-Tag setzen. Alternativ kann man aber auch in einem JavaScript eine globale djConfig-Variable setzen, bevor die Datei dojo.js geladen wird: Listing 4.2: Setzen der djConfig-Variable – hier wird die Datei dojo.js im Debug-Modus geladen und der Parser beim Laden ausgeführt. <script type="text/javascript"> var djConfig = { isDebug:true, parseOnLoad:true }; <script type="text/javascript" src="dojo-release-1.1.1/dojo/dojo.js">

172

4.3 How do I get this?

Achtung Sie sehen hier bei der djConfig-Variable eine deklarative Einführung samt Wertzuweisung, die Sie in Dojo an den verschiedensten Stellen verwenden werden. Die Eigenschaften (englisch »properties«) im Inneren der geschweiften Klammern werden dabei immer mit Kommas getrennt. Beachten Sie, dass hinter der letzten Zuweisung eines Werts zu einer Eigenschaft kein Komma stehen darf! Nach der offiziellen Dokumentation von Dojo stürzt sonst der Internet Explorer in verschiedenen Situationen ab, obwohl es syntaktisch vollkommen korrekt ist.

4.3.5

Test the West – die Datei runTests.html

Sie können die erfolgreiche Bereitstellung von Dojo auf Ihrem eigenen Webserver/Rechner ganz einfach testen, indem Sie in Ihrem Webbrowser die Datei runTests.html ausführen. Sie finden diese im Verzeichnis dojo/tests/.

Abbildung 4.9: Der erfolgreiche Test

173

4 Das Dojo-Toolkit

Dabei können Sie diese Datei entweder direkt über den Dateimanager Ihres Betriebssystems aufrufen13 oder aber Sie gehen über Ihren Webserver mit dem vollständigen URL zu dieser Datei. Beispielsweise: http://localhost/dojo-release-1.1.1/dojo/tests/runTests.html Sie können verschiedene Dijit-Testseiten14 unter /dijit/tests/ auch direkt aufrufen. Hinweis Beim Testlauf von Dojo sind einige kleinere Probleme bekannt, die aber nicht sonderlich schwerwiegend sind und sich nicht auf die Praxis auswirken. Wenn Sie den Testlauf im Browser über http auf dem lokalen Webserver (also localhost) aufrufen, hängt sich gelegentlich der Browser auf. Das muss nicht bedeuten, dass Dojo nicht erfolgreich installiert wurde und auf dem System nicht zur Verfügung steht. Rufen Sie den Test entweder über den Dateimanager Ihres Betriebssystems (also mit dem Protokoll file) oder von einem anderen Rechner Ihres Netzwerks auf. Wenn er dann funktioniert, brauchen Sie sich sowieso keine Gedanken zu machen. Es ist zu erwarten, dass sich dieser Bug auf wenige Versionen von Dojo beschränkt. Wenn Sie allerdings den Test von einem anderen Rechner Ihres Netzwerks aus starten, kann es sein, dass der Browser dort nach einer gewissen Zeit meint, dass das Skript hängen würde. Das ist aber vollkommen unkritisch. Der Test läuft in der Regel einfach länger, als der Browser auf die Beendigung eines Skripts wartet. Sollten Sie eine entsprechende Warnung des Browsers bekommen, setzen Sie einfach die Ausführung des Skripts trotz der Warnung fort.

Abbildung 4.10: Dem Browser wird langweilig. 13 Das bedeutet, Ihr Webbrowser verwendet das Protokoll file. 14 Dijit bezeichnet die Dojo Widget Library.

174

4.4 Der Einstieg ins Geschäft

4.4

Der Einstieg ins Geschäft

Wie schon beim YUI empfohlen, rate ich auch beim Einstieg in den Umgang mit dem Dojo-Toolkit, zuerst einige der zahlreichen Beispiele anzusehen, die mit dem Toolkit mitgeliefert werden. Am besten gehen Sie über die Dojo-Webseite und wählen den Link SEE IT IN ACTION.

Abbildung 4.11: Das Fisheye-Demo ist eine beeindruckende interaktive Animation, bei der Items smart beim Überstreichen mit der Maus animiert werden. Die folgenden Beispiele zeigen einige eindrucksvolle High-end-Anwendungen von Dojo. Es spricht nichts dagegen, sich dort Anregungen für eigene Aufgabenstellungen zu holen. Aber natürlich macht es für das Verständnis von Dojo viel mehr Sinn, wenn Sie am Anfang kleinere Brötchen backen und erst einmal einfachere Beispiele durchspielen. Diese werden sich sicher auch besser in Ihre eigenen Webprojekte einbauen lassen. Als Einstieg eignen sich besonders die Testverzeichnisse unter dojo, dojox oder dijit bzw. unter dijit auch das Unterverzeichnis demos. Dort finden Sie diverse sprechend benannte HTML-Dateien, mit denen Sie verschiedenste Dinge im Dojo ausprobieren

175

4 Das Dojo-Toolkit

können. Leider ist die Systematik, wie die Testverzeichnisse lokalisiert sind, nicht ganz konsistent. Diese finden Sie in verschiedenen Ebenen. Sie werden also teilweise ein bisschen suchen müssen.

Abbildung 4.12: Ausprobieren eines Dojo-Testbeispiels Ein weiterer sehr sinnvoller Weg für den Einstieg führt über die Online-Dokumentation. Und da sollten Sie insbesondere einen Blick in das schon mehrfach erwähnte Book of Dojo werfen. Darin gelangen Sie über den Link PART 2: DIJIT und dort DIJIT AT A GLANCE zu einer Webseite, auf der Sie in einem Überblick die wichtigsten Widgets des Dijit sehen. Das Besondere ist, dass Sie dort nicht nur erkennen können, wie die Widgets in der Praxis aussehen und was sie tun werden. Mit einem Klick auf den jeweiligen Hyperlink links neben der Widget-Grafik gelangen Sie in vielen Fällen zu einer genaueren Beschreibung und vor allen Dingen zu einem vollständigen Beispiellisting, das Sie leicht anpassen und für Ihre eigenen Seiten verwenden können. Für einfache Situationen genügt sogar ein Copy&Paste. Aber vor einer Verwendung in einem eigenen Webprojekt (gerade bei komplexeren Widgets) steht dennoch in der Regel ein grundlegendes Verständnis der Arbeitsweise des Dojo Toolkit. Und dem widmen wir uns jetzt.

176

4.4 Der Einstieg ins Geschäft

Abbildung 4.13: Dijit at a Glance

Abbildung 4.14: Die meisten Beschreibungen eines Dijit-Widgets beinhalten Beispiellistings, die Sie übernehmen und anpassen können.

177

4 Das Dojo-Toolkit

4.5

Das Grundgerüst einer Dojo-Applikation

Wenn Sie sich die Möglichkeiten von Dojo anhand der Beispiele angesehen haben und nun an die ersten eigenen Experimente mit dem Dojo Toolkit herangehen, sollten Sie zuerst eine vernünftige Schablone haben, die Sie für alle folgenden Beispiele verwenden können. Jede RIA auf Basis von Dojo basiert auf einem üblichen HTML-Grundgerüst, das nach offizieller Empfehlung der Dojo Foundation dem Standard HTML/4.01 Strict genügen soll. So ein Basistemplate sieht also so aus (dojo_grundgeruest.html): Listing 4.3: Ein Template für eine Dojo-RIA 01 03 04 05 06 09 13 --> 14 16 <script type="text/javascript" 17 src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js" 18 djConfig="parseOnLoad:true, isDebug:true"> 19 <script type="text/javascript"> 20 /* Der Bereich für JavaScript-Anweisungen */ 21 22 <style type="text/css"> 23 /* Bereich für CSS */ 24 25 26 27 28

178

4.6 Die require()-Methode und das Dojo-Paketsystem

Hinweis Das Grundgerüst ist mit etwas HTML- und JavaScript-Background weitgehend selbsterklärend. Nur zwei kleine Hinweise: Natürlich können Sie sowohl die externe JavaScript-Datei zum Laden des Paketsystems von Dojo wie auch die lokale Variante für Ihre eigenen Ressourcen einbinden. Sie benötigen aber natürlich nur eine der beiden Varianten. In unserem Template ist die lokale Einbindung auskommentiert (Zeile 9 bis 13). Und eine zweite Bemerkung noch zu dem Stylesheet-Bereich: In den offiziellen Dokumentationen zu Dojo wird meist mit der @importAnweisung zur Referenzierung externer Stylesheet-Dateien gearbeitet (wenn Sie nicht mit internen Stylesheets arbeiten, die ebenso in diesem Bereich notiert werden können). Sie können selbstverständlich auch das sonst meist übliche -Tag zur Referenzierung der CSS-Dateien benutzen. Und wenn Sie auf CSS-Dateien aus dem Dojo Toolkit zugreifen, können Sie die verwendeten CSS-Dateien wie die Skriptdateien sowohl von Ihrem eigenen Server/Rechner als auch vom Dojo-CDN einbinden.

4.6

Die require()-Methode und das Dojo-Paketsystem

Wenn Sie beispielsweise mit PHP arbeiten, kennen Sie dort eine Anweisung mit Namen require. Damit kann man benötigte Ressourcen in einer PHP-Datei nachladen. So etwas gibt es in JavaScript eigentlich nicht – mehrere JavaScript-Dateien werden dort vollkommen unabhängig voneinander bei Bedarf über verschiedene <script>Tags in einer HTML-Seite zusammengeführt. Für das Dojo Toolkit und sein integriertes Paketsystem wurde eine intelligentere Funktionalität zum Laden einer Bibliothek über eine require()-Methode mit JavaScript jedoch in gewisser Weise nachgebildet. Über diese Methode dojo.require() kann der gesamte benötigte Code in einer Webseite über einen Modulnamen nachgeladen werden. Auf den ersten Blick ist das – bis auf die kürzere Syntax – kaum etwas Besonderes. Damit kann man erst einmal scheinbar nur einfach die Bestandteile des Dojo Toolkits bei Bedarf einzeln nachladen, die nicht über die Basisdatei dojo.js schon zur Verfügung stehen beziehungsweise geladen werden. Dies umfasst beispielsweise die Unterstützung für Drag&Drop, bestimmte Formen der Animation, Dijit-Widgets, DojoX-Projekte und nicht zuletzt auch Ihren eigenen Code. Wenn Sie beispielsweise in Ihrer Webseite ein TitlePane-Widget sowie einen DijitButton und ein Textarea-Widget verwenden wollen, laden Sie die dafür benötigten Module dijit.TitlePane, dijit.form.Textarea und dijit.form.Button über entsprechende JavaScript-Anweisungen einfach in Ihrer Webseite:

179

4 Das Dojo-Toolkit

Listing 4.4: Laden von Modulen aus dem Dojo Toolkit dojo.require("dijit.form.Button"); dojo.require("dijit.TitlePane"); dojo.require("dijit.form.Textarea");

So etwas ginge im Prinzip auch mit dem <script>-Tag und JavaScript-Dateien. Wo ist dann der wirkliche Zusatznutzen? Über die Methode dojo.require() kann gewährleistet werden, dass kein Code mehrfach geladen wird, der bereits zur Verfügung steht. Und über eine Objektsyntax werden alle tatsächlich benötigten Ressourcen von einem Modul zusammengefasst. Und noch eine weitere Verbesserung gegenüber dem normalen Referenzieren im <script>-Container gibt es. Das Paketsystem von Dojo unterstützt im Prinzip auch fol-

gende Syntax: Listing 4.5: Laden von Modulen mit einer Wildcard dojo.require("dojo.widget.*");

Der Stern steht für eine Wildcard. Damit kann das Paketsystem automatisch alle benötigten Dojo-Module laden, wenn diese im Rahmen der Webseite verwendet werden. Allerdings sind im Zusammenhang mit dem Einsatz dieser Wildcard diverse Probleme bekannt (insbesondere bezüglich Namensräumen) – ich würde deshalb auf die Verwendung bis auf Weiteres verzichten oder sie zumindest sehr ausführlich testen.

4.6.1

Namensräume

Das Paketsystem des Dojo Toolkits arbeitet mit Namespaces bzw. Namensräumen, um eine klare Trennung von Funktionalitäten/Ressourcen zu erreichen und Namenskonflikte zu vermeiden. Dabei werden verschiedene Namensräume durch Punkte getrennt. Ein Bezeichner hat immer nur im umgebenden Namensraum Gültigkeit. Diese Technik der Namensräume finden Sie in allen objektorientierten modernen Programmiersprachen oder beispielsweise auch XML. Die offiziellen Namensräume des Dojo Toolkits beginnen mit den Token dojo, dojx oder dijit. Sie können aber auch eigene Namensräume für Ihre eigenen Codestrukturen verwenden. Hier ist eine kurze Übersicht zu den wichtigsten Namensräumen in Dojo samt den darüber bereitgestellten Funktionalitäten: Namensraum

Beschreibung

dojo.back

Ressourcen zum Management der Browser-Historie. Hierüber können Sie beispielsweise in der Browser-Historie zurückgehen.

dojo.colors

Verschiedene Farbutilities

Tabelle 4.1: Die wichtigsten Namensräume und Ressourcen von Dojo

180

4.6 Die require()-Methode und das Dojo-Paketsystem

Namensraum

Beschreibung

dojo.currency

Unterstützung zum Formatieren und Parsen von Währungen

dojo.data

Eine einheitliche Datenzugriffsschicht

dojo.date

Utilities zur Manipulation eines Datums. Mit Funktionen wie dojo.date.compare(date1: Date, date2: Date?, portion: String?) können Sie Datumsobjekte vergleichen oder mit dojo.date.difference(date1: Date, date2: Date?, interval: String?) die Differenz bestimmen. Oder

Sie bestimmen den Tag, den Monat oder das Jahr oder die Zeitzone, wie sie durch den Browser zur Verfügung gestellt wird. dojo.debug

Unterstützung der Fehlersuche

dojo.dnd

Ressourcen zur Unterstützung von Drag&Drop

dojo.fx

Eine Bibliothek mit visuellen Effekten, die auf den Basisanimationen von Dojo aufsetzt. Diesem Thema werden wir uns ausführlich widmen.

dojo.i18n

Eine Reihe von Hilfsklassen zum Laden von Ressourcen zur Internationalisierung (i18n)

dojo.io

Zusätzliche Unterstützung zur Eingabe und Ausgabe von Daten, insbesondere im Zusammenhang mit AJAX bzw. der allgemeinen Client-Server-Kommunikation

dojo.logging

Hilfsmittel zur Protokollierung

dojo.number

Unterstützung für die lokalisierte Formatierung von Zahlen sowie Routinen für das Parsen

dojo.parser

Ein Paket zum Parsen des DOM beziehungsweise Widgets

dojo.regexp

Ressourcen zum Umgang mit regulären Ausdrücken.

dojo.rpc

Ressourcen zur Unterstützung von entfernten Aufrufen in Dojo (remote-procedure-call – RPC)

dojo.string

Verschiedene Utilities zum Umgang mit Strings, etwa das Trimmen oder Ersetzen

dijit.demos

Hier finden Sie den offiziellen Dijit-Democode.

dijit.form

Eine Sammlung mit Formular- und eingabebezogenen Widgets. Hier finden Sie die Ressourcen für die wichtigsten Bestandteile einer grafischen Weboberfläche. Dem Thema werden wir uns ausführlich widmen.

dijit.layout

In diesem Bereich finden Sie layoutbezogene Widgets. Ein Highlight in Dojo ist die zuverlässige Gestaltung des Layouts von Webapplikationen und hierhinter finden Sie das Geheimnis. Auch dieses Thema werden wir uns genauer ansehen.

dijit.popup

Über diese Klassen können Sie Widgets als Popups anzeigen oder wieder verbergen.

dojox.charting

Grafiken und Charts, die auf Vektordaten basieren

Tabelle 4.1: Die wichtigsten Namensräume und Ressourcen von Dojo (Forts.)

181

4 Das Dojo-Toolkit

Namensraum

Beschreibung

dojox.color

Erweiterte Farbmethoden inklusive HSV, HSL und CMYK, einem Farbgenerator und erweiterten Farbraumberechnungen

dojox.dtl

Eine Implementierung der Django Templating Language

dojox.encoding

Verschiedene Algorithmen zur Dekodierung und Kodierung

dojox.fx

Erweiterte Animationen

dojox.gfx

Ein API für die browserübergreifende Vektorzeichnung

dojox.gfx3d

Ein 3D-API für dojox.gfx

dojox.image

Eine Sammlung an bildbezogenen Widgets

dojox.io

Eine Erweiterung der Kernfunktion für die Ein- und Ausgabe über dojo.io

dojox.jsonPath

Ein Abfragesystem für JavaScript-Objekte in Verbindung mit JSON

dojox.lang

Sprachspezifische Erweiterungen

dojox.layout

Eine Sammlung mit Widgets zur Gestaltung des Layouts

dojox.math

Eine Sammlung mit verschiedenen weitergehenden mathematischen Funktionen

dojox.off

Das Dojo-Offlineprojekt

dojox.presentation

Hinter diesem Namensraum verbirgt sich ein derzeit noch experimentelles Projekt, um eine PowerPoint-ähnliche Präsentation im Rahmen eines Browsers darstellen zu können.

dojox.regexp

Erweiterung für den Umgang mit regulären Ausdrücken

dojox.rpc

Erweiterte Unterstützung für RPC

dojox.storage

Im Allgemeinen speichert man Informationen auf Clientseite über Cookies. In diesem Namensraum werden Techniken zur Verfügung gestellt, um darüber hinaus Objekte im Browser speichern zu können.

dojox.string

Eine Sammlung mit verschiedenen Objekten für die erweiterte StringManipulation inklusive eines Builders und eines Tokenizer.

dojox.timing

Ein Satz mit Objekten zur Unterstützung erweiterter zeitbasierender Aufgaben inklusive einem einfachen Timer

dojox.validate

Zusätzliche Methoden zur Validierung von Eingaben

dojox.widget

Eine Sammlung mit verschiedenen nicht kategorisierten Widgets

dojox.xml

Utilities für den Umgang mit XML. Aktuell steht ein DomParser zur Verfügung, der ein Pseudo-XML-Dokument in einer JSON-ähnlichen Form zurückliefert.

Tabelle 4.1: Die wichtigsten Namensräume und Ressourcen von Dojo (Forts.)

182

4.6 Die require()-Methode und das Dojo-Paketsystem

4.6.2

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

Wenn Sie alleine die verschiedenen Namensräume und Ressourcen von Dojo betrachten, ist klar, dass sogar fortgeschrittene Anwender mit hoher Wahrscheinlichkeit kaum alle Widgets in Dojo samt den zugehörigen Modulen im Kopf haben werden – und erst recht nicht alle jeweils verfügbaren Methoden und Eigenschaften. Vor allen Dingen kennen Sie diese Fakten nicht beim Einstieg in das Toolkit. Aber das ist kein Problem. Eine vollständige Liste der verfügbaren Widgets und der zugehörigen Module finden Sie natürlich auch in der hervorragenden API-Dokumentation (http://api.dojotoolkit.org/). Sie können dort auf alle relevanten Informationen zu Dojo, Dijit und Dojox zugreifen.

Abbildung 4.15: In der API-Dokumentation finden Sie alle notwendigen Informationen zu den Widgets und den zugehörigen Modulen. Die Online-Dokumentation besitzt selbstverständlich eine Suchmöglichkeit. Wenn Sie beispielsweise nach bestimmten Widgets suchen, kommen Sie sehr schnell an eine Beschreibung aller verfügbare Eigenschaften und Methoden, oft sogar mit Beispiel. Und meist wird auch beschrieben, wie sich eine Eigenschaft oder Methode in Hinsicht auf die Original-HTML-Anweisungen verhält und was man spezifisch beachten muss, wenn man ein bestimmtes Widget verwendet.

183

4 Das Dojo-Toolkit

Tipp Wenn Sie für eine Oberflächenkomponente wissen, wie sie mit HTML realisiert wird, suchen Sie in der Dokumentation nach dem Namen des Tags. Darüber kommen Sie meist indirekt an die Dokumentation des passenden Dojo-Widgets. Sie können auf die Liste der verfügbaren Widgets im Dojo (genauer gesagt Dijit) auch rückschließen, indem Sie sich einfach den Inhalt des Verzeichnisses dijit/tests/ in Ihrer lokalen Installation ansehen.

4.6.3

Schutz des DOM – die Methode dojo.addOnLoad()

Von besonderer Bedeutung im Konzept des Paketsystems im Dojo ist die Methode dojo.addOnLoad(). Sie können damit gewährleisten, dass der darin notierte Code erst ausgeführt wird, nachdem ihre dojo.require()-Anweisungen vollständig ausgeführt und die notwendigen Ressourcen geladen und verarbeitet wurden. Verarbeitet bedeutet in dem Zusammenhang, dass der Browser entsprechenden HTML- und CSS-Code generiert und den DOM aufgebaut hat. Das ist insbesondere dann von Bedeutung, wenn beim Laden der Webseite bereits bestimmte Anweisungen ausgeführt werden, die auf DOM-Objekten operieren. Die Anwendung der Methode würde wie folgt aussehen: Listing 4.6: Ausführen von Aktionen nach abgeschlossenem Laden der Widgets dojo.require("dijit.form.Button"); dojo.addOnLoad(function(){ dojo.byId("m").innerHTML = "Text"; console.log("onLoad abgefeuert - nach require()"); });

Hinweis Mit dojo.byId() gibt es im Dojo eine alternative Schreibweise zu document.getElementById(). Der Aufruf von dojo.byId() gibt den domNode eines Elements zurück.

Wie schon mehrfach im Buch erwähnt, sind Zugriffe auf Bestandteile des DOM ein massives Problem, wenn sie zu früh erfolgen. Wie auch das YUI und diverse andere Frameworks und Toolkits stellt das Dojo Toolkit über diese Methode addOnLoad() also

184

4.7 Der Dojo-Typ und das gerenderte Widget

mit einem eigenen Mechanismus sicher, dass Zugriffe auf den DOM15 sicher und bequem anzuwenden sind. Achtung Die offizielle Dokumentation des Dojo Toolkits weist mehrfach auf die Bedeutung dieser Methode dojo.addOnLoad() hin – und interessanterweise auch darauf, dass man stattdessen niemals onLoad direkt beim -Tag verwenden sollte, wenn Dojo verwendet wird. Weder so etwas wie noch window.onload = ...;!

4.7

Der Dojo-Typ und das gerenderte Widget

Wenn Sie im Körper einer Webseite den Code für ein Widget notieren wollen, erweitern Sie dazu den HTML-Code für das zugrunde liegende HTML-Element über ein proprietäres dojoType-Attribut. Dieses Attribut ist der zentrale Schlüssel, über den Dojo steuert, wie mit einem HTML-Element vom Browser umgegangen werden muss, wenn die Seite geladen wird. Beispiel: Listing 4.7: Ein Dojo-Button Klick mich

Ohne dieses Attribut dojoType verhält sich ein Element in einer Webseite als ganz gewöhnliches HTML-Element. Bei gesetztem Attribut verarbeitet Dojo das Element und erweitert es. Hinweis Natürlich können Sie auch parallel mit »normalen« HTML-Elementen in einer Dojo-Applikation arbeiten.

15 Denn gerenderte Widgets des Dojo Toolkits sind im Browser letztendlich natürlich nichts anderes als DOM-Elemente.

185

4 Das Dojo-Toolkit

Beachten Sie jedoch, dass das Dojo Toolkit beim Laden einer Seite diese mit dojoType gekennzeichneten Dojo-Widgets in der Webseite in ein extrem aufwändiges Gemisch aus HTML- und CSS-Strukturen rendert16 und dabei auch die gesamte Webseite verändert. Die tatsächlich vom Browser verarbeitete Struktur hat in den meisten Fällen nicht mehr viel mit dem Quellcode zu tun, den Sie im Editor schreiben. Selbst IDs, die Sie bei einem Element in der Webseite setzen, werden von Dojo unter Umständen auf andere Elemente der Webseite verschoben. Das können Sie beispielsweise sehr gut beobachten, wenn Sie den Quellcode einer Webseite mit der Firefox-Erweiterung Firebug analysieren. Damit sehen Sie den tatsächlich im Browser verarbeiteten Code, der massiv von dem im Editor geschriebenen Code abweichen wird.

Abbildung 4.16: Analyse des tatsächlich vom Browser verarbeiteten Codes mit Firebug Angenommen, Sie verwenden ein Dojo-Widget vom Typ Textarea,17 das Sie im Körper einer Webseite wie folgt notieren: Listing 4.8: Der HTML-Code für ein Dojo-Textarea-Widget

Der tatsächlich im Browser verwendete Code für das Texteingabefeld sieht nach dem Rendern so aus: Listing 4.9: Das gerenderte Widget <span id="ausgabe" class="dijitReset Focused dijitFocused" widgetid="ausgabe"> <iframe class="dijitInline dijitInputField dijitTextArea" dojoattachevent="onblur:_onIframeBlur" dojoattachpoint="iframe,styleNode" src="javascript:<script>var _postCreate=window.frameElement?window.frameElement.postCreate: 16 Natürlich muss auch jedes Dojo-Widget – wenn auch im Hintergrund – in »normales« HTML und CSS und gegebenenfalls JavaScript übersetzt werden. 17 Dies ist ein Eingabefeld für Text.

186

4.7 Der Dojo-Typ und das gerenderte Widget

null;if(_postCreate)_postCreate();" style="width: 300px; overflow-y: hidden; height: 20px;"> </span><br /> <br /> Sie erkennen, dass statt eines gewöhnlichen <textarea>-Containers, wie er in HTML im Rahmen eines Webformulars verwendet wird, ein IFrame zum Einsatz kommt, das zudem noch in einen <span>-Container eingeschlossen wird. Und das eigentliche <textarea>-Element wird mit einem internen CSS-Stil auf display: none (also unsichtbar) gesetzt! Besonders bemerkenswert ist auch, dass die ID nun am <span>-Element auftaucht und nicht mehr am <textarea>-Element, bei dem diese Kennung in der Original-Webseite notiert ist! Sollten Sie nun ganz konventionell mit document.getElementById() oder dojo.byId() versuchen, auf das Textfeld über die Original-ID zuzugreifen, selektieren Sie das falsche Element im DOM und haben damit auch nicht die korrekten Eigenschaften zur Verfügung, die Sie in dem Moment vielleicht verwenden wollen. Achtung Es ist also meist unabdingbar, dass Sie für einen Zugriff auf DojoWidgets nur die davon bereitgestellten Methoden und Eigenschaften verwenden. Diese sind natürlich genau an diese Umstrukturierungen der Webseite angepasst. Ein Zugriff über »klassisches« DOM-Skripting kann hingegen ziemlich schiefgehen.<br /> <br /> 4.7.1<br /> <br /> Das Basiselement für dojoType<br /> <br /> Letztendlich führt diese interne Umstrukturierung von Dojo dazu, dass Sie in der Regel als »Trägerelement« beziehungsweise Basiselement für das Attribut dojoType nicht einmal mehr ein HTML-Element wählen müssen, das in der klassischen HTMLStruktur der Webseite der gewünschten Funktionalität in etwa entspricht. So können Sie ein Texteingabefeld zwar wie gesehen mit dem <textarea>-Element erzeugen, aber beispielsweise auch mit einem <div>-Element. Analog muss eine Schaltfläche weder auf dem <button>-Element noch dem <input>-Element aufbauen. Auch hier können Sie beispielsweise ein <div>-Element verwenden.<br /> <br /> 187<br /> <br /> 4 Das Dojo-Toolkit<br /> <br /> 4.8<br /> <br /> Ein erstes Beispiel mit Dojo-Widgets<br /> <br /> Schauen wir uns ein erstes Beispiel mit Dojo-Widgets an, das die bisherigen Ausführungen in einem geschlossenen Kontext zeigt. Zudem sehen Sie bereits einige der Möglichkeiten, die Ihnen verschiedene spezifische Dojo-Widgets bieten (dojo1.html). Listing 4.10: Eine erste Webapplikation mit Dojo-Widgets 01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 02 "http://www.w3.org/TR/html4/strict.dtd"> 03 <html> 04 <head> 05 <title>Die erste Seite mit dem Dojo Toolkit </title> 06 <!-- Laden der Basisdatei für das Dojo Toolkit 07 – aus dem Internet über die Dojo–GDN-Server --> 08 <script type="text/javascript" 09 src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js" 10 djConfig="parseOnLoad:true, isDebug:true"></script> 11 <script type="text/javascript"> 12 /* Der Bereich für JavaScript-Anweisungen */ 13 // Laden des Dojo's Code für verschiedene Widgets 14 // Modul für mehrzeilige Texteingabe 15 dojo.require("dijit.form.Textarea"); 16 // Modul für verschiedene Schaltflächen 17 dojo.require("dijit.form.Button"); // 18 // Modul für eine plausibilisierte Zeiteingabe 19 dojo.require("dijit.form.TimeTextBox"); 20 </script> 21 <style type="text/css"> 22 /* Bereich für CSS - Referenzen auf die 23 Standard-CSS-Datei aus dem Dojo-System */ 24 @import 25 "http://o.aolcdn.com/dojo/1.1.1/dojo/resources/dojo.css"; 26 </style> 27 </head> 28 <body> 29 <h1>Die erste Applikation mit Dojo und 30 verschiedenen Widgets</h1> 31 <h3>Ein Textbereich</h3> 32 <textarea dojoType="dijit.form.Textarea" 33 id="ausgabe" style="width:300px;"> 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 <meta http-equiv="Content-Type" 06 content="text/html; charset=UTF-8"> 07 08 <style type="text/css"> 09 @import "http://o.aolcdn.com/dojo/1.0.0/dijit/ themes/tundra/tundra.css"; 10 @import "http://o.aolcdn.com/dojo/1.0.0/dojo/ resources/dojo.css" 11 12 <script type="text/javascript" 13 src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js" 14 djConfig="parseOnLoad: true"> 15 <script type="text/javascript"> 16 dojo.require("dojo.parser");

195

4 Das Dojo-Toolkit

17 dojo.require("dijit.Menu"); 18 19 20 21

Ein Popup-Menü

22

23

25

Aktiviere Item

28

29 <span>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 <meta http-equiv="Content-Type" 06 content="text/html; charset=UTF-8"> 07 08 <style type="text/css"> 09 @import "http://o.aolcdn.com/dojo/1.0/dijit/ themes/tundra/tundra.css"; 10 @import "http://o.aolcdn.com/dojo/1.0/ dojo/resources/dojo.css" 11 12 <script type="text/javascript" 13 src="http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js" 14 djConfig="parseOnLoad: true"> 15 <script type="text/javascript"> 16 dojo.require("dojo.parser"); 17 dojo.require("dijit.Editor"); 18 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 <script>-Tag anhängen. Aber nicht irgendein <script>-Tag – dieses hat in Dojo zur Umsetzung der Ereignisbehandlung den spezifischen MIMEType dojo/method und das <script>-Tag wird in das Tag für das Widget eingeschlossen. Diese Technik wird beispielsweise so angewendet: Listing 4.13: Anhängen eines Ereignisses an ein Widget Klick mich <script type="dojo/method" event="onClick"> alert('Klick');

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 07 <script type="text/javascript" 08 src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js" 09 djConfig="parseOnLoad:true, isDebug:true"> 10 <script type="text/javascript"> 11 dojo.addOnLoad(function(){ 12 var node = dojo.byId("meineID"); 13 dojo.connect(node,"onclick",function(){ 14 node.innerHTML += "*"; 15 }); 16 }); 17 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 <meta http-equiv="Content-Type" 03 content="text/html; charset=UTF-8"> 04 05 06 <style type="text/css"> 07 @import "http://o.aolcdn.com/dojo/1.0.0/dijit/ themes/tundra/tundra.css"; 08 @import "http://o.aolcdn.com/dojo/1.0.0/ dojo/resources/dojo.css" 09 10 <script type="text/javascript" 11 src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js" 12 djConfig="parseOnLoad: true"> 13 <script type="text/javascript"> 14 dojo.require("dojo.parser"); 15 dojo.require("dijit.form.Button"); 16 dojo.require("dijit.Toolbar"); 17 function fett() { 18 dojo.byId("ausgabe").innerHTML = "Fett!"; 19 } 20 function ausschneiden() { 21 dojo.byId("ausgabe").innerHTML = "Ausschneiden!"; 22 } 23 function kopiere() { 24 dojo.byId("ausgabe").innerHTML = "Kopieren!"; 25 } 26 function einfuegen() { 27 dojo.byId("ausgabe").innerHTML = "Einfügen!"; 28 } 29 dojo.addOnLoad(function() { 30 dojo.connect(dojo.byId("toolbar1.bold"),"onclick", 31 fett);

201

4 Das Dojo-Toolkit

32 dojo.connect(dojo.byId("toolbar1.cut"),"onclick", 33 ausschneiden); 34 dojo.connect(dojo.byId("toolbar1.copy"),"onclick", 35 kopiere); 36 dojo.connect(dojo.byId("toolbar1.paste"),"onclick", 37 einfuegen); 38 }); 39 40 41 42

43

Cut

46

Copy

49

Paste

52 53 <span dojoType="dijit.ToolbarSeparator"> 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 07 <script type="text/javascript" 08 src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js" 09 djConfig="parseOnLoad:true, isDebug:true"> 10 <script type="text/javascript"> 11 dojo.require("dijit.form.Button");

203

4 Das Dojo-Toolkit

12 function klickButton(){ 13 dojo.byId("ausgabe").innerHTML = "Eins + "; 14 } 15 function folgeFkt(){ 16 dojo.byId("ausgabe").innerHTML += "Zwei"; 17 } 18 dojo.addOnLoad(function(){ 19 var node = dojo.byId("meinButton"); 20 dojo.connect(node,"onclick","klickButton"); 21 dojo.connect("klickButton","folgeFkt"); 22 }); 23 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 07 <script type="text/javascript" 08 src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js" 09 djConfig="parseOnLoad:true, isDebug:true"> 10 <script type="text/javascript"> 11 dojo.require("dijit.form.Button"); 12 // Objekt 1 13 var obj1 = {

205

4 Das Dojo-Toolkit

14 15 16 17 18 19 20 21 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

methodeObj1_1: function(){ dojo.byId('ausgabe').innerHTML += 'Zuerst A. '; }, methodeObj1_2: function(){ dojo.byId('ausgabe').innerHTML += 'Dann B.'; } }; // Objekt 2 var obj2 = { methodeObj2_1: function(){ dojo.byId('ausgabe').innerHTML += 'Und zuletzt C!'; } }; dojo.addOnLoad(function(){ var node = dojo.byId("meinButton"); dojo.connect(node,"onclick",function(){ // Der Start der Ereigniskette obj1.methodeObj1_1(); }); // Ausführen von methodeObj1_2(), // wenn methodeObj1_1() ausgeführt wird dojo.connect(obj1, "methodeObj1_1", obj1, "methodeObj1_2"); // Ausführen von methodeObj2_1(), // wenn methodeObj1_2() ausgeführt wird. // Das bedeutet, die Methode von einem anderen // Objekt wird aufgerufen dojo.connect(obj1, "methodeObj1_2", obj2, "methodeObj2_1"); });

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 <meta http-equiv="Content-Type" 03 content="text/html; charset=UTF-8"> 04 05 06 <style type="text/css"> 07 @import "http://o.aolcdn.com/dojo/1.0.0/dijit/ themes/tundra/tundra.css"; 08 @import "http://o.aolcdn.com/dojo/1.0.0/dojo/ resources/dojo.css" 09 10 <script type="text/javascript" 11 src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js" 12 djConfig="parseOnLoad: true"> 13 <script type="text/javascript"> 14 dojo.require("dojo.parser"); 15 dojo.require("dijit.form.Button"); 16 dojo.require("dijit.Toolbar"); 17 dojo.require("dijit.layout.LayoutContainer"); 18 dojo.require("dijit.layout.SplitContainer"); 19 dojo.require("dijit.layout.AccordionContainer"); 20 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

<span dojoType="dijit.ToolbarSeparator">

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 <meta http-equiv="Content-Type" 06 content="text/html; charset=iso-8859-1" /> 07 08 09 <script type="text/javascript" 10 src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js" 11 djConfig="parseOnLoad:true, isDebug:true"> 12 <script type="text/javascript"> 13 // Notwendige Dojo- und Dijit-Widgets 14 dojo.require("dojo.parser"); 15 dojo.require("dijit.form.Button"); 16 dojo.require("dijit.Toolbar"); 17 dojo.require("dijit.layout.BorderContainer"); 18 dojo.require("dijit.layout.ContentPane"); 19 dojo.require("dijit.layout.BorderContainer"); 20 21 22 23 24 <style type="text/css"> 25 @import "http://o.aolcdn.com/dojo/1.0.0/dijit/ themes/tundra/tundra.css"; 26 @import "http://o.aolcdn.com/dojo/1.0.0/dojo/ 24 Diese Funktionalität wird aber an der Stelle nicht weiter ausgearbeitet.

216

4.11 Layout mit dem Dijit

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

resources/dojo.css";

Home

Leistungen

Referenzen

Schulungen

217

4 Das Dojo-Toolkit

66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88

Projekte

Publikationen

Download

Impressum

von Ralph Steyer

Abbildung 4.31: Ein weiteres Dijit-Layout

218

4.12 AJAX und Daten vom Server lesen – XHR

4.12

AJAX und Daten vom Server lesen – XHR

Das Lesen von Daten vom Server aus der Applikation heraus ist ein zentraler Aspekt moderner AJAX-RIAs. Und natürlich befriedigt auch das Dojo Toolkit diese Anforderung über verschiedene Standardverfahren. Das Toolkit unterstützt den Entwickler damit direkt bei der Kommunikation zwischen Client und Server. Das kann auf unterschiedlichen Abstraktionsebenen erfolgen, die die eigentliche AJAX-Kommunikation weitgehend verbergen. So können Sie sich mithilfe der Methode dojo.io.bind() beispielsweise selbst um den Datenaustausch kümmern. Dazu gibt es sogar Unterstützung für Remote Procedure Calls wie auch klassische Workarounds zur asynchronen Kommunikation wie IFrames. Darauf gehen wir im Buch allerdings nicht weiter ein. Der wohl wichtigste Fall zur Kommunikation mit dem Server ist nämlich ein einfacher Mechanismus in Dojo, um diese Kommunikation extrem bequem umzusetzen (auch asynchron) – XmlHttpRequest25 oder kurz XHR. Dojo stellt verschiedene XHR-Methoden zur Verfügung, um die üblichen HTTPÜbertragungsarten POST, GET, PUT und DELETE zu unterstützen. Die XHR-Methoden teilen sich eine Reihe von gemeinsamen Parametern. In der Praxis nutzt man fast immer die Methoden dojo.xhrGet() für GET und dojo.xhrPost() für POST, was im Grunde allen AJAX-Anfragen zueigen ist. Eine solche Methode notieren Sie am einfachsten als Aufruf für eine Reaktion über das Dojo-Eventsystem. Etwa so: Listing 4.22: Die Methode dojo.xhrGet() im Dojo-Eventsystem <script type="dojo/method" event="onClick"> dojo.xhrGet({ url: 'antwort.txt', load: meineCallbackFkt, error: meineFehlerFkt, handleAs: "text", timeout: 5000 });

Die deklarativen Zuweisungen im Inneren der Methode dürften fast selbsterklärend sein, wenn Sie das Konzept von AJAX kennen:  Mit url wird die Datei bzw. das Skript auf dem Server angegeben.  Mit load spezifizieren Sie eine Funktionsreferenz auf eine Callback-Funktion, über

die Sie die Daten behandeln können, die vom Server zurückgeliefert werden. 25 Entsprechend dem Namen des AJAX-Kommunikationsobjekts.

219

4 Das Dojo-Toolkit

 Mit error geben Sie die Funktion als Funktionsreferenz an, die im Fehlerfall aufge-

rufen werden soll.  Wenn Sie statt load und error nur ein Attribut handle angeben, können Sie sowohl

den Erfolgs- als auch den Fehlerfall mit einer gemeinsamen Funktion behandeln. Dann müssen Sie sich in der Regel aber im Inneren der Behandlungsfunktion um eine Unterscheidung der Fälle kümmern.  Optional können Sie mit handleAs angeben, was für ein Typ die Antwort des Servers sein wird, etwa text oder json.  Mit timeout geben Sie in Millisekunden eine Zeitspanne an, wie lange auf eine Ant-

wort des Servers gewartet werden soll. 26

Hinweis Die XHR-Technik hat einige Beschränkungen, die aber weniger mit Dojo als mit AJAX selbst zu tun haben. So ist bekanntlich bei AJAX kein Cross-Domain-Zugriff (Nachladen von Daten aus anderen Domain-Bereichen) möglich und auch Dojo kann diese Sicherheitsbeschränkungen nicht aushebeln.26 Sie können also nur Daten von der Domain nachladen, von der Sie die Webseite selbst geladen haben. Wenig tragisch ist, dass der Internet Explorer ohne die Verwendung von einem Webserver keine AJAX-Anfragen über XHR-Methoden unterstützt. Das sollte man sowieso nicht machen.

4.12.1

Die Callback-Funktion

Eine Callback-Funktion zur Verarbeitung der Antwort eines Webservers, die über load spezifiziert wird, hat in Dojo im Wesentlichen immer den gleichen Aufbau: Listing 4.23: Der Aufbau einer Callback-Funktion in Dojo function meineCallbackFkt(data,ioArgs) { // mache was mit dem Wert von data }

Die beiden Argumente dieser Funktion (data und ioArgs) sind von entscheidender Bedeutung. Das erste Argument (data) enthält die Daten, die vom Server auf eine Anfrage durch den Client zurückgeschickt wurden. Das zweite Argument enthält ein Dojo I/O Bind-Objekt (Eingabe/Ausgabe-Objekt).

26 Was gut so ist.

220

4.12 AJAX und Daten vom Server lesen – XHR

4.12.2

Die Fehlerfunktion

Die Fehlerfunktion, die bei einer Fehlermeldung des Webservers ausgelöst und über error in der Deklaration zugeordnet wird, ist vollkommen analog der Callback-Funktion aufgebaut: Listing 4.24: Der Aufbau einer Fehlerfunktion in Dojo function meineFehlerFkt(data,ioArgs) { // mache was im Fehlerfall }

4.12.3

Eine gemeinsame Behandlungsfunktion

Wenn Sie über handle eine Reaktion auf die Antwort des Servers angeben, müssen Sie in der Regel in der handle-Funktion selbst den Typ der Antwort auswerten, um eine unterschiedliche Reaktion auf einen Fehler oder die erfolgreiche Anfrage zu programmieren. Das können Sie etwa so machen, wie das nachfolgende Codefragment zeigt: Listing 4.25: Gemeinsame Reaktionsfunktion handle: function(data,args){ if(typeof data == "error") { // Warnung in der Konsole console.warn("Fehler! ",args); // Weitere sinnvolle Maßnahmen } else { // Protokoll der Antwort in der Konsole console.log(data); // Weitere sinnvolle Verwendung der Antwort } }

4.12.4

Mit handleAs unterschiedlich die Antwort interpretieren

Sie können über die Angabe von handleAs die Antwort des Webservers auf unterschiedliche Art und Weise behandeln. Wenn Sie etwa handleAs den Wert json zuweisen, werden die Antwortdaten in ein JSON-Objekt konvertiert. Betrachten Sie das nachfolgende Codefragment: Listing 4.26: Die Verarbeitung von JSON wird mit handleAs gewährleistet. var postData = function(){ dojo.xhrPost({ url: "js/simple-object.json",

221

4 Das Dojo-Toolkit

handleAs: "json", load: function(data,ioargs){ // Im Erfolgsfall könnten Sie z.B. den Inhalt von einem // Element mit den JSON-Daten füllen dojo.byId("ausgabe").innerHTML += " Name: " + data.name; } }); }; dojo.addOnLoad(postData);

Hinweis Sie können im Fall von JSON für handleAs als Wert auch json-commentfiltered verwenden. Wenn Sie einfach nur json als Wert verwenden, erhalten Sie eine Warnung, die Sie aber ignorieren können. Oder Sie setzen in djConfig für usePlainJson den Wert auf true – das schaltet die Warnung ab. Nach den offiziellen Quellen von Dojo soll json-commenting-filtered allerdings in zukünftigen Versionen von Dojo beseitigt werden.

Tipp Beachten Sie im Umgang mit JSON auch die Ausführungen in Kapitel 2 (grundsätzliche Informationen zu JSON und die manuelle Verarbeitung) sowie in Kapitel 3 zum Umgang im YUI. Diese erklären auch alle weitergehenden Schritte in Dojo zum Umgang mit JSON.

4.12.5

Ein vollständiges Beispiel mit einer AJAX-Anfrage

Sie sehen nun als konkretes Beispiel mit Dojo eine AJAX-Anfrage über ein ButtonWidget. Die Antwort des Servers – eine reine Textdatei – wird einfach in der Webseite dargestellt. Vervollständigen wir zuerst das Grundgerüst für diese Dojo-RIA mit der Referenz auf einige konkrete CSS-Dateien aus dem Dijit. Wir wollen konkret ein CSS-Thema (Theme) mit Namen Tundra für dieses Beispiel verwenden, obwohl wir die vielfältigen Möglichkeiten dieses CSS-Themas an dieser Stelle nicht ausreizen. Die CSS-Datei tundra.css liefert dieses Theme.

222

4.12 AJAX und Daten vom Server lesen – XHR

Tipp Sie können sich natürlich jederzeit die Datei in einen Editor laden und analysieren. Sie werden sehen, dass eine CSS-Klasse mit Namen tundra eine entscheidende Rolle spielt. Viele CSS-Definitionen sind als Generationenregeln aufgebaut, die sich auf diese Klasse als Elternelement beziehen. Die Klasse tundra aus der externen CSS-Datei wird deshalb dem -Tag zugeordnet.

Zudem binden wir die Standard-CSS-Datei von Dojo mit Namen dojo.css aus dem Verzeichnis dojo/resources ein. So sieht die Seite in der ersten (unvollständigen) Variante aus: Listing 4.27: Die Grundseite 01 03 04 05 06 08 <script type="text/javascript" 09 src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js" 10 djConfig="parseOnLoad:true, isDebug:true"> 11 <script type="text/javascript"> 12 /* Der Bereich für JavaScript-Anweisungen */ 13 14 <style type="text/css"> 15 /* Bereich für CSS - Referenzen auf 2 CSS-Dateien 16 aus dem Dojo-System */ 17 @import "http://o.aolcdn.com/dojo/1.1.1/dijit/ themes/tundra/tundra.css"; 18 @import "http://o.aolcdn.com/dojo/1.1.1/dojo/ resources/dojo.css"; 19 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 AJAX-Datenanforderung <script type="dojo/method" event="onClick"> dojo.xhrGet({ url: 'antwort.txt', load: meineCallbackFkt, error: meineFehlerFkt });

224

4.12 AJAX und Daten vom Server lesen – XHR

Auf einen Klick des Anwenders wird die Textdatei antwort.txt als statische Ressource nachgeladen27 und im Erfolgsfall mit der Callback-Funktion meineCallbackFkt() verarbeitet. Im Fehlerfall wird die Fehlerfunktion meineFehlerFkt() aufgerufen.

Anzeigen der Antwort Zur Anzeige der Daten vom Server wollen wir einen reinen HTML-DIV-Container verwenden, der mit der ID ausgabe identifiziert werden kann: Listing 4.31: Der Anzeigebereich für die Antwort des Servers

Die Callback-Funktion zum Anzeigen der Antwort ist eine reine DHTML-Funktion, die mit innerHTML auf den Ausgabebereich zugreift: Listing 4.32: Die Callback-Funktion zum Anzeigen der Antwort function meineCallbackFkt(data,ioArgs) { document.getElementById("ausgabe").innerHTML = data; return data; }

Die Daten werden zusätzlich zur Anzeige dem Aufrufer der Funktion mit return zurückgegeben. Damit kann man diese Daten gegebenenfalls noch weiter verarbeiten.

Das vollständige Listing Schauen wir uns nun das vollständige Listing an (dojo2.html): Listing 4.33: Das vollständige AJAX-Beispiel 01 03 04 05 06 08 <script type="text/javascript" 09 src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js" 10 djConfig="parseOnLoad:true, isDebug:true"> 11 <script type="text/javascript"> 12 /* Der Bereich für JavaScript-Anweisungen */ 13 // Laden des Dojo's Code für das Button-Widget 14 dojo.require("dijit.form.Button"); 15 // Callback-Funktion 27 Der konkrete Inhalt ist für uns irrelevant.

225

4 Das Dojo-Toolkit

16 17 18 19 20 21 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

function meineCallbackFkt(data,ioArgs) { document.getElementById("ausgabe").innerHTML = data; return data; } // Fehlerfunktion function meineFehlerFkt(data,ioArgs) { alert("Fehler:" + data); return data; } <style type="text/css"> /* Bereich für CSS - Referenzen auf 2 CSS-Dateien aus dem Dojo-System */ @import "http://o.aolcdn.com/dojo/1.1.1/dijit/themes/ tundra/tundra.css"; @import "http://o.aolcdn.com/dojo/1.1.1/dojo/ resources/dojo.css";

AJAX mit Dojo

AJAX-Datenanforderung <script type="dojo/method" event="onClick"> dojo.xhrGet({ url: 'antwort.txt', load: meineCallbackFkt, error: meineFehlerFkt });

Beachten Sie, wie kompakt und einfach die gesamte AJAX-Applikation trotz der vollständigen Umsetzung einer AJAX-Anfrage ist.

Abbildung 4.32: Der entscheidende Teil der Webapplikation vor der Datenanforderung Natürlich kann man die optische Gestaltung der Webapplikation erheblich optimieren, aber das soll hier nicht im Blickpunkt stehen.

226

4.12 AJAX und Daten vom Server lesen – XHR

Abbildung 4.33: Die Antwort des Webservers wurde in die Webseite eingebaut.

4.12.6

Weitere AJAX-Beispiele – Daten zum Server senden

Wir schauen uns nun noch zwei AJAX-Beispiele mit dem Dojo an. Dabei senden wir als Erweiterung des ersten Beispiels mit der GET-Methode Daten zum Webserver, die dort verarbeitet werden. In Abhängigkeit davon wird eine spezifische Antwort an den Client generiert, die in die Webseite eingebaut wird. Danach sollen Sie die Abwandlung mit der POST-Methode kennenlernen. Hinweis Beachten Sie, dass die Art des serverseitigen Codes vollkommen egal ist. Ob Sie nun mit PHP, ASP.NET, Perl, JSP, JSF, Servlets oder einer anderen Technologie arbeiten, spielt keine Rolle. Wir werden uns auf PHP beschränken, da mit dem als Grundausstattung empfohlenen XAMPP alle Voraussetzungen für die Ausführung vorhanden sind. Sollten Sie mit einer anderen serverseitigen Technologie arbeiten wollen, können Sie das selbstverständlich auch machen. Sie brauchen bloß mit einem passenden Server zu arbeiten und die als Beispiel angegebenen serverseitigen PHP-Dateien an die von Ihnen gewünschte serverseitige Technologie anzupassen. Die serverseitigen Skripte in diesem Buch werden auch grundsätzlich sehr einfach sein. Dies setzt nichtsdestotrotz voraus, dass Sie sich mit dieser serverseitigen Technologie auseinandersetzen oder sie bereits verstehen. Aber der Fokus der hier besprochenen AJAX-Toolkits und -Frameworks liegt fast zu 100% auf der Clientseite.

Daten per GET zum Server senden Das obige Beispiel mit der AJAX-Anfrage einer statischen Ressource muss nur geringfügig abgeändert werden. Bis zum Beginn des Körpers der Webseite bleibt alles gleich, weshalb die Darstellung des nachfolgenden Listings auch erst dort beginnt (dojo3.html): Listing 4.34: Die entscheidenden Stellen im Beispiel 01

227

4 Das Dojo-Toolkit

34

AJAX mit Dojo - Senden von Daten per GET

35 Geben Sie Ihren Namen ein:

36
37 38 AJAX-Datenanforderung 39 <script type="dojo/method" event="onClick"> 40 dojo.xhrGet({ 41 url: 'antwort.php', 42 load: meineCallbackFkt, 43 error: meineFehlerFkt, 44 content: {name: dojo.byId('name').value } 45 }); 46 47 48 49

50 51

Sie haben nun in der Webseite neben einer Schaltfläche ein Eingabeformular vorliegen, in dem ein Anwender seinen Namen eingeben soll.

Abbildung 4.34: Die Originalwebseite mit einem Formular

228

4.12 AJAX und Daten vom Server lesen – XHR

Wenn der Anwender anschließend auf die nachfolgende Schaltfläche klickt, wird ein PHP-Skript mit Namen antwort.php aufgerufen (das sehen Sie in Zeile 41). Dies ist eine der Stellen, wo Sie einen Unterschied zur Anforderung einer statischen Ressourcen sehen – es wird ein serverseitiges Skript (beziehungsweise bei anderen serverseitigen Programmiertechniken auch ein Programm) aufgerufen, dem die Eingabedaten des Anwenders übergeben werden. In Zeile 44 sollte Ihnen eine neue Eigenschaft auffallen – content. Damit können Sie Werte zum Server als Parameter senden. Im Vorgabefall von dojo.io.bind ist das ein Versenden der Daten per GET. Das bedeutet, dass das serverseitige Skript den Wert aus der Textbox über den GET-Parameter 'name' erhält. Hinweis Beachten Sie, dass die Wertzuweisung zu der Eigenschaft in jedem Fall auch über document.getElementById() funktionieren würde. Sie sehen in der Zeile 44 mit content: {name: dojo.byId('name').value } aber wieder die alternative Schreibweise des Dojo, die wir schon mehrfach in dem Kapitel verwendet haben und die nur eine Kurzform für diese Standardfunktionalität darstellt. Hier ist noch das Listing des serverseitigen PHP-Skripts. Wir werden grundsätzlich das Verständnis der von Ihnen eingesetzten serverseitigen Technologie voraussetzen und immer nur ganz grob erklären, wie diese serverseitigen Skripte funktionieren (antwort.php): Listing 4.35: Das serverseitige Skript für die Antwort des Servers 01 " . 04 "Hallo {$_GET['name']}, herzlich willkommen"; 05 ?>

Im Skript wird zuerst der MIME-Type der Antwort festgelegt und anschließend in Zeile 3 und 4 die Antwort an den Client zusammengesetzt. Der Antwort-String besteht aus etwas HTML und CSS28 sowie reinem Text. Entscheidend ist in Zeile 4 die Auswertung des Werts, der per GET vom Client übermittelt wird. In PHP können Sie über das assoziierte Array $_GET auf diese Werte zugreifen. Der Schlüssel ist der Name des übergebenen Felds.

28 Eine Überschrift der Ordnung 3, deren Hintergrundfarbe mit CSS festgelegt wird.

229

4 Das Dojo-Toolkit

Abbildung 4.35: Der Server hat die Daten vom Client verarbeitet und eine Antwort geschickt.

Daten per POST zum Server senden Neben der Methode GET steht natürlich auch unter AJAX die Methode POST zum Senden von Daten an den Server zur Verfügung. In der klassischen Webprogrammierung möchte man zum einen POST dann verwenden, wenn der Anwender in der Adresszeile des Browsers die übermittelten Daten nicht sehen soll. Dieses Argument läuft bei AJAX selbstverständlich vollkommen ins Leere, weil auch bei GET die übermittelten Daten nicht in der Adresszeile des Browsers angezeigt werden. Aber es gibt noch ein weiteres Argument für POST beziehungsweise gegen GET: Die Menge der zu übertragenden Daten ist bei GET massiv beschränkt. Wenn also größere Mengen an Daten an den Server vom Client zu schicken sind, kann man auf POST zurückgreifen.29

29 Dies ist in der Praxis allerdings extrem selten notwendig, weil bei AJAX eigentlich fast immer nur kleine Datenmengen vom Client zum Server geschickt werden, dafür aber sehr häufig. Das ist ja gerade der Sinn und Zweck von AJAX.

230

4.12 AJAX und Daten vom Server lesen – XHR

Auch mit Dojo kann man Daten per POST zum Server schicken. Dazu gibt es zwei Wege:  Direkt die Werte von content spezifizieren  Ein Webformular verwenden und den Inhalt der Formularfelder versenden

Wenn Sie direkt die Werte von content spezifizieren wollen, können Sie so vorgehen wie in dem folgenden Codefragment: Listing 4.36: Versenden mit POST und content dojo.addOnLoad(function(){ dojo.xhrPost({ url:" antwort2.php", content: { "key":"value", "foo":42 }, load: function(data,ioargs){ // Mach was Sinnvolles mit den Daten } }); });

Allgemein geht man allerdings in der Praxis meist den anderen Weg. Basierend auf einem Webformular notieren Sie explizit den Parameter method im Formular-Tag und geben dort als Wert POST an. Zusätzlich müssen Sie bei dem Eingabefeld im Formular selbst statt des Parameters id den Parameter name verwenden. Des Weiteren verwenden Sie die Methode dojo.xhrPost() statt dojo.xhrGet(). Und dort verwenden Sie nicht die Eigenschaft content, sondern eine andere Eigenschaft mit Namen form, der Sie die ID des Formulars zuweisen. Hinweis Man kann durchaus darüber streiten, welche dieser unterschiedlichen Vorgehensweisen des Dojo beim Versenden der Daten per POST mit der Vorgehensweise bei GET konsistenter ist. Ich persönlich finde es konsequenter, wenn man auch bei POST mit der Eigenschaft content arbeitet – und nicht einmal mit der ID und das andere Mal mit dem Namen. Andererseits ist die Notation mit dem Webformular bequem und einfach.

231

4 Das Dojo-Toolkit

Schauen wir uns das vollständige Beispiel wieder ab dem Beginn des Webseitenkörpers an (dojo4.html): Listing 4.37: Das Versenden von Daten mit POST 01 34

AJAX mit Dojo - Senden von Daten per POST

35 Geben Sie Ihren Namen ein: 36

37 38
39 40 AJAX-Datenanforderung 41 <script type="dojo/method" event="onClick"> 42 dojo.xhrPost({ 43 url: 'antwort2.php', 44 load: meineCallbackFkt, 45 error: meineFehlerFkt, 46 form: 'meinFormular' 47 }); 48 49 50 51

52 53

Und das wäre das angepasste PHP-Skript (antwort2.php): Listing 4.38: Das PHP-Skript greift per $_POST auf die Werte vom Client zu. 01 " . 04 "Hallo {$_POST['name']}, herzlich willkommen"; 05 ?>

Der wesentliche Unterschied hier ist, dass zur Auswertung der Daten vom Client das assoziierte Array $_POST nun verwendet werden muss.

232

4.12 AJAX und Daten vom Server lesen – XHR

Abbildung 4.36: Mit POST geht es auch.

4.12.7

Synchrone Ausführung

Grundsätzlich steht das A in AJAX ja für die asynchrone Ausführung von Datenanfragen.30 Aber es ist durchaus möglich, eine AJAX-Anfrage mit dem normalen Ablauf der Webapplikation zu synchronisieren. Wenn Sie eine GET-Anfrage an den Server mit dojo.xhrGet() abschicken, können Sie die optionale Eigenschaft sync auf den Wert true setzen. Damit würde der Browser auf das Ende der Ausführung von xhrGet() warten: Listing 4.39: Eine synchrone AJAX-Anfrage dojo.xhrGet({ url: 'antwort.php', sync: true, load: meineCallbackFkt, error: meineFehlerFkt });

30 Siehe dazu auch Kapitel 2.

233

4 Das Dojo-Toolkit

4.13

DOM-Abfragen mit dojo.query()

Ein nettes und sehr nützliches Tool in Dojo steht über dojo.query() zur Verfügung. Damit können Sie auf einfache Weise den DOM einer Webseite oder Teile davon parsen und auf eine Auswahl an Knoten davon zugreifen. Mit dojo.query() erhalten Sie eine Instanz von dojo.NodeList. Dies ist ein Datenfeld mit domNode – also Elementen der Webseite, die im DOM widergespiegelt werden. Die Abfrage unterstützt die meisten Selektoren des CSS3-Standards (beginnend bei HTML-Elementen über IDs, Klassen, Generationenselektoren, ...) und führt Code über die gesamte Liste der Ergebnisse aus. Die Möglichkeiten, die Ihnen damit zur Verfügung stehen, sind gigantisch und sprengen bei Weitem unserem Rahmen. Aber wir wollen dennoch ein paar eindrucksvolle Effekte praktisch demonstrieren. Hinweis Über dojo.NodeList hinaus gibt es noch das Modul dojo.NodeList-fx. Dieses ergänzt dojo.query() um einige zusätzliche Methoden, die vor allen Dingen im Rahmen von dojo.fx-Animationen verwendet werden. Aber auch bei anderen Anfragen kommt das Modul zum Einsatz.

4.13.1

Zugriff auf ein DOM-Element über die ID

Zunächst sehen Sie im folgenden Listing, wie Sie über die ID und dojo.query() auf ein DOM-Element zugreifen können (dojo5.html): 01 03 04 05 08 <script type="text/javascript" 09 src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js" 10 djConfig="parseOnLoad:true, isDebug:true"> 11 <script type="text/javascript"> 12 dojo.require("dojo.NodeList-fx"); 13 dojo.addOnLoad(function(){ 14 /* Der DOM ist aufgebaut 15 Zugriff auf einen Knoten über eine ID */ 16 dojo.query("#u1") 17 // Hinzufügen der Klasse "meineKlasse" 18 .addClass("meineKlasse") 19 // fade out nach 1500 ms

234

4.13 DOM-Abfragen mit dojo.query()

20 .fadeOut({ delay:1500 }).play(); 21 }); 22 23 <style type="text/css"> 24 .meineKlasse { 25 background-color:red; 26 font-size:30px; 27 color:white; 28 } 29 30 31 32

AJAX mit Dojo - Anwenden von dojo.query()

33 34

Dieses erste einfache Beispiel macht nicht sonderlich viel. In Zeile 12 wird mit dojo.require("dojo.NodeList-fx"); ein Modul vom Typ NodeList-fx geladen. Durch die Entscheidung für die Methode dojo.addOnLoad(), die sich von Zeile 13 bis 21 erstreckt, wird sichergestellt, dass der DOM aufgebaut ist, bevor in Zeile 16 ein Zugriff auf einen Knoten über eine ID u1 (das zugehörige Element ist in Zeile 32 notiert) und dojo.query() erfolgt. Sie sehen als Parameter von dojo.query() die übliche CSS-Notation für den Zugriff auf eine ID mit dem vorangestellten #: dojo.query("#u1")

In der Zeile 18 sehen Sie das Hinzufügen der CSS-Klasse mit Namen "meineKlasse" zu der bis dahin vorhandenen CSS-Formatierung der Überschrift mit der ID u1. Dazu kommt die Methode addClass() zum Einsatz: .addClass("meineKlasse")

Die Anweisung in Zeile 20 ist ein kleiner dynamischer Gag. Damit erzeugt man nach der angegebenen Zeitspanne in Millisekunden einen Fade-out-Effekt. Das bedeutet, nach 1500 Millisekunden wird das referenzierte Element ausgeblendet: .fadeOut({ delay:1500 }).play();

4.13.2

Zugriff auf DOM-Elemente über die CSS-Klasse

Um über eine Klasse als Parameter von dojo.query() an die Elemente des DOM zu gelangen, müssen Sie bloß die übliche CSS-Syntax für einen Klassenselektor verwenden. Das bedeutet, Sie müssen zum Beispiel die Zeile 16 wie folgt abändern (ein vollständiges Beispiel finden Sie unter dojo6.html): dojo.query(".para")

235

4 Das Dojo-Toolkit

Die Klasse wenden Sie in der Webseite wie üblich über das Attribut class auf bestimmte HTML-Tags an. Beispiel: Listing 4.40: Eine CSS-Klasse wird mehreren HTML-Tags zugeordnet.

AJAX mit Dojo - Anwenden von dojo.query()

Erster Absatz

Zweiter Absatz

Dritter Absatz

Und hier noch ein DIV-Block

Tipp Für die meisten Abfragen per dojo.query() gibt es auch StandaloneFunktionen bzw. -Methoden, über die Sie die gleichen Effekte erreichen. So haben die folgenden zwei Anweisungen die gleiche Wirkung: Listing 4.41: Statt über query() geht es oft auch direkt. dojo.query("#meineID").addClass("meineKlasse"); dojo.addClass("meineID"," meineKlasse ");

4.13.3

Ereignisse in Verbindung mit dojo.query()

Die Abfrage mit dojo.query() lässt sich auch hervorragend in Verbindung mit Ereignissen nutzen. Sie selektieren über dojo.query() eine gewisse Anzahl von Elementen in einer Webseite und definieren eine einheitliche Reaktion auf ein Ereignis bei all diesen Elementen.

Einheitliche Reaktion auf einen Klick Betrachten Sie das nachfolgende Beispiel (dojo_event4.html): Listing 4.42: Verschiedene Elemente werden mit dojo.query() selektiert und mit Ereignissen verbunden. 01 03 04 05 07 <script type="text/javascript"

236

4.13 DOM-Abfragen mit dojo.query()

08 src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js" 09 djConfig="parseOnLoad:true, isDebug:true"> 10 <script type="text/javascript"> 11 dojo.addOnLoad(function(){ 12 dojo.query(".meineKlasse") 13 .style("cursor","pointer") 14 .connect("onclick",function(){ 15 this.innerHTML += "*"; 16 }); 17 }); 18 19 20 21

Hier klickt es

22

Und hier klickt es auch

23

Hier nicht

24

Auch hier klickt es

25 26

In Zeile 12 selektieren Sie mit dojo.query(".meineKlasse") alle Elemente in der Webseite, denen über die HTML-Tags die Klasse meineKlasse zugewiesen wird. Das sind in dem Beispiel hier mehrere Überschriften und ein DIV-Container. Diesen Elementen wird mit .style in Zeile 13 ein spezifisches Stylesheet zugewiesen. Konkret verändern wir den Mauszeiger beim Überstreichen des Elements in einen Pointer. Tipp Mit .style steht Ihnen allgemein ein hervorragender und bequemer Weg zum dynamischen Hinzufügen oder Wegnehmen von CSS-Formatierungen bei einem Element beziehungsweise individuellen Knoten (oder einer Gruppe von Knoten) zur Verfügung.

Die selektierten Knoten werden mit einer onclick-Funktion verbunden (Zeile 14), die den Inhalt des angeklickten Elements bei jedem Anwenderklick jeweils um ein * erweitert.

237

4 Das Dojo-Toolkit

Abbildung 4.37: Die Webseite mit verschiedenen sensitiven Elementen

Abbildung 4.38: Einige Klicks später

238

4.13 DOM-Abfragen mit dojo.query()

Die Weiterleitung mit Hyperlinks deaktivieren Ein weiteres Beispiel soll eine ganz interessante Möglichkeit dieses Verfahrens zeigen. Mit einer ganz einfachen Funktion kann die Weiterleitung zu einer neuen Ressource über die Hyperlinks in einer Webseite unterbunden werden, wenn Sie mit dojo.query() alle Hyperlinks einer Seite über den Elementselektor a auswählen (dojo_event5.html): Listing 4.43: Deaktivieren der Hyperlinks 01 03 04 05 07 <script type="text/javascript" 08 src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js" 09 djConfig="parseOnLoad:true, isDebug:true"> 10 <script type="text/javascript"> 11 var linksAbschalten = function(){ 12 dojo.query("a").connect("onclick",function(e){ 13 // Das Verzweigen mit dem Link wird gestopped 14 e.preventDefault(); 15 // Konsolenausgabe, welcher Knoten angeklickt wurde 16 console.log('Anwenderklick auf ',e.target); 17 }); 18 }; 19 dojo.addOnLoad(linksAbschalten); 20 21 22 23

Verschiedene Hyperlinks

24 Homepage des Autors
25 RJS-Blog
26 AJAX-NET.de
27 Infos zu JavaFX
28 29

In der Funktion linksAbschalten() wird in Zeile 12 mit dojo.query("a").connect ("onclick",function(e){ ... ein Ereignis bei einem Klick auf einen beliebigen Hyperlink in der Webseite spezifiziert. Der Funktion wird das aktuelle Ereignisobjekt übergeben. Die Anweisung e.preventDefault(); in Zeile 14 sorgt dafür, dass das Verzweigen zu einer neuen Ressource durch das Anklicken des Links gestoppt wird. Allgemein wird damit die Ausführung von dem gerade aktiven Ereignis unterbunden. So können Sie damit zum Beispiel auch das Versenden von Formulardaten abbrechen.

239

4 Das Dojo-Toolkit

Abbildung 4.39: Die Weiterleitungen wurden gestoppt und die Klicks in der Konsole (hier die Firebug-Konsole) wurden protokolliert. In Zeile 16 sehen Sie noch eine Konsolenausgabe, die anzeigt, welcher Knoten angeklickt wurde. Mit e.target steht diese Information zur Verfügung. Oder genauer – das Ziel, auf welches der Hyperlink verweist. Hinweis Beachten Sie, dass die genaue Konsolenausgabe von der konkret installierten Konsole abhängt.

240

4.14 Animationen mit Dojo

4.14

Animationen mit Dojo

Einer der Hauptgründe, warum Dojo in der letzten Zeit so beliebt wurde, ist ziemlich sicher das extrem mächtige Animationssystem mit diversen vorgefertigten Animationen für eine große Anzahl an üblichen Anwendungsfällen. Damit ist es extrem leicht, Ihren eigenen Webprojekten eindrucksvolle und mittlerweile oft übliche visuelle Effekte hinzuzufügen und damit Ihre Webseite erheblich interessanter zu machen. Tipp Bei Animationen besteht in einem Buch das naheliegende Problem, dass Screenshots von Beispielen die Animation selbst nur mangelhaft wiedergeben können. Wenn Sie die Animationsbeispiele aber selbst durchspielen, werden die Vorgänge klar.

Sämtliche Animationen in Dojo verwenden ein einzelnes »magisches Objekt« als einzigen Parameter. Das wichtigste Attribut ist node. Damit wird der domNode spezifiziert, auf dem Ihre Animationen ausgeführt werden sollen. Darüber hinaus gibt es einige optionale Parameter und ein paar Parameter, die in einigen fortgeschrittenen Anwendungen zum Tragen kommen.

4.14.1

Ein Grundgerüst

Ein übliches Setup für ein Animationsgrundgerüst sieht ungefähr so aus (dojo_ ani1.html): Listing 4.44: Ein Grundgerüst einer Animation dojo.addOnLoad(function(){ var animArgs = { node: "meineID", // Knoten für die Animation duration: 1000, // Millisekunden, die die Animation läuft delay: 250 // Millisekunden, bevor die Animation startet }; dojo.fadeOut(animArgs).play(); });

Sie geben neben dem Knoten (node) meist an, wie lange die Animation laufen soll (duration) und wie lange es dauert, bis die Animation startet (delay). Diese Eigenschaften können Sie bei fast allen Animationen im Dojo einsetzen.

241

4 Das Dojo-Toolkit

4.14.2

Die Klasse dojo._Animation und die play()-Methode

In dojo/_base/fx.js ist eine generische Animationsklasse mit Namen dojo._Animation definiert, die bei sehr vielen Dojo-Animationen von zentraler Bedeutung ist. Die Klasse feuert bei verschiedenen Zuständen31 Callbacks in die registrierten HandlerObjekte. Nahezu alle Animationsfunktionen unter Dojo geben eine Instanz von der Klasse zurück, jedoch in der Regel ohne die Ausführung der Methode play(), womit Sie eine Animation starten können. Deshalb werden Sie in der Regel die play()Methode auf einer Instanz von dojo._Animation aufrufen, wenn eine solche Instanz zur Verfügung steht und Sie die Animation ausführen wollen.

4.14.3

Basisanimationen

Es gibt in Dojo einige Grundanimationen, die bereits in der Basisbibliothek dojo.js eingebaut sind:  fadeIn() zum Einblenden von Elementen  fadeOut() zum Ausblenden von Elementen  animateProperty() zum Animieren von Eigenschaften

Insbesondere dojo.animateProperty ist sehr mächtig und die Basis für die meisten erweiterten Animationen in Dojo.

Ein Beispiel mit Basisanimationen Betrachten wir das nachfolgende Listing (dojo_ani2.html): Listing 4.45: Animation mit Basistechniken 01 03 04 05 06 <script type="text/javascript" 07 src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js" 08 djConfig="parseOnLoad:true, isDebug:true"> 09 <script type="text/javascript"> 10 dojo.addOnLoad(function(){ 11 // Tranzparenz von dem Element auf 0.3 setzen 12 dojo.style("meineID", "opacity", "0.3"); 13 // Animation zum Fade out 14 var anim1 = dojo.fadeOut({ node: "meineID", 15 duration:1000 }); 16 // Animation zum Verändern von Eigenschaften 31 onAnimate, onBegin, onEnd, onPause, onPlay, onStop.

242

4.14 Animationen mit Dojo

17 var anim2 = dojo.animateProperty({ 18 node: "meineID", 19 delay: 1000, 20 properties:{ 21 // Einblenden und Text vergrößern 22 opacity: { end: 1 }, 23 fontSize: { end:24, unit:"px"} 24 } 25 }); 26 // Animation zum Fade in 27 var anim3 = dojo.fadeIn({ node: "meineID", duration:3000, 28 delay:3000 }); 29 // Animationen ausführen 30 anim1.play(); 31 anim2.play(); 32 anim3.play(); 33 }); 34 35 36 37

39 Die Antwort ist 42

40 41

Wie Sie im Quelltext erkennen, wird in den Zeilen 17 bis 25 über dojo.animateProperty() das Element mithilfe der Eigenschaft opacity wieder eingeblendet, nachdem es vorher mit dojo.fadeOut() weggeblendet wurde. Simultan wird der Text größer gemacht. Danach wird das Element noch einmal mit dojo.fadeIn() erneut eingeblendet. Hinweis Sie können auf diese Weise jede CSS-Eigenschaft animieren.

Ein genauerer Blick auf dojo.animateProperty() Werfen wir noch einen genaueren Blick auf dojo.animateProperty(), denn dieser Blick lohnt sich. Damit können Sie vor allen Dingen auf einfachste Weise mehrere CSSEigenschaften in einer Webseite simultan animieren.

243

4 Das Dojo-Toolkit

Die Tatsache, dass animateProperty() eine Instanz vom Typ dojo._Animation liefert, bedeutet, dass im Wesentlichen die gleichen Argumente wie bei anderen Animationen vorkommen. Aber es gibt zusätzliche Attribute: Sie können jede CSS-Stileigenschaft von einem Knoten definieren – aber nicht nur rein statisch, sondern animiert über die Attribute start32 und end33. Und optional gibt es für viele Stileigenschaften noch ein weiteres Attribut unit für die Einheit des Werts einer Stilangabe (etwa für die Schriftgröße). Das nachfolgende Beispiel zeigt, wie einfach es ist, die Schriftgröße, Schriftfarbe und Deckkraft eines Textelements wie einer Überschrift zu verändern (dojo_ani10.html): Listing 4.46: Animation von CSS-Werten eines Elements 01 03 04 05 06 <style type="text/css"> 07 h1{ 08 font-size: 20px; 09 } 10 11 <script type="text/javascript" 12 src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js" 13 djConfig="parseOnLoad:true, isDebug:true"> 14 <script type="text/javascript"> 15 dojo.addOnLoad(function(){ 16 var anim = dojo.animateProperty({ 17 node:"meineID", 18 duration:3000, 19 properties: { 20 fontSize: { start:20, end:42, unit:"px" }, 21 opacity: { start:0.95, end:0.2 }, 22 color: { start: "#000", end:"#F30" } 23 }, 24 delay:1000 25 }); 26 anim.play(); 27 }); 28 29 30 31

Die Schrift unter dieser Überschrift wird 32 animiert verändert

32 Wert zu Beginn der Animation. 33 Wert zum Ende der Animation.

244

4.14 Animationen mit Dojo

33

Änderung der Schriftgröße, Durchsichtigkeit 34 und Farbe

35 36

Abbildung 4.40: Vor der animierten Veränderung der unteren Schrift Von Zeile 19 bis 23 sehen Sie die simultan animierten Veränderungen der CSS-Stileigenschaften der unteren Überschrift.

Abbildung 4.41: Nach der Ausführung der animierten Veränderung der unteren Schrift Achtung Beachten Sie, dass die Stileigenschaften in properties teilweise etwas anders geschrieben werden als in CSS selbst (wir sind ja hier in JavaScript). Das sehen Sie bei der Schriftgröße. In CSS werden zusammengesetzte Bezeichner mit einem Bindestrich zusammengefügt (z.B. font-size), während in JavaScript der erste Buchstabe des Folgeworts groß geschrieben wird und dafür der Bindestrich entfällt (z.B. fontSize).

245

4 Das Dojo-Toolkit

4.14.4

dojo.fx zur Ergänzung

Bereits mit den Basisanimationen von Dojo können Sie eine ganze Menge anfangen – insbesondere mit animateProperty(). Um die Größe der Basisbibliothek dojo.js möglichst klein zu halten, wurden jedoch alle erweiterten Animationstechniken und Tools in ein eigenes Modul ausgelagert: dojo.fx. Um diese erweiterten Animationstechniken zu verwenden, binden Sie das Modul wie üblich über dojo.require() ein. Damit stehen Ihnen in der Folge diverse ergänzende Animationstechniken zur Verfügung:  dojo.fx.combine() zur Kombination von Animationen  dojo.fx.chain() zur sequenziellen Verkettung von Animationen  dojo.fx.wipeIn() zum animierten Erweitern eines Knotens von der aktuellen in sei-

ne natürliche Größe  dojo.fx.wipeOut() zum animierten Reduzieren der Größe eines Knotens von der

aktuellen Größe auf ein Pixel und anschließendes Verschwinden  dojo.fx.slideTo() zum Verschieben eines Elements

Verschieben eines Elements Das nachfolgende Beispiel zeigt, wie man mit dojo.fx.slideTo() ein Element auf eine bestimmte Position verschiebt. Dabei können natürlich wie bei fast allen Animationen auch Eigenschaften zur zeitlichen Steuerung wie delay oder duration wiederverwendet werden (dojo_ani3.html): Listing 4.47: Verschieben mit slideTo() 01 03 04 05 06 <script type="text/javascript" 07 src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js" 08 djConfig="parseOnLoad:true, isDebug:true"> 09 <script type="text/javascript"> 10 dojo.require("dojo.fx"); 11 dojo.addOnLoad(function(){ 12 // Verschieben von dem Knoten auf die Position 300, 75 13 dojo.fx.slideTo({ 14 node:"meineID", 15 duration:2000, 16 top:300, 17 left:75

246

4.14 Animationen mit Dojo

18 }).play(); // Animation abspielen 19 }); 20 21 22 23

Verschieben

24 25 26

Abbildung 4.42: Die Startposition des Bilds ist direkt unter der Überschrift. In dem Beispiel wird ein Bild mit slideTo() verschoben (Zeile 13 bis 18). Das Element wird über die ID in Zeile 14 mit node:"meineID" identifiziert.

247

4 Das Dojo-Toolkit

Die Animation dauert 2 Sekunden (Zeile 15 – duration:2000). Die neue Position wird mit top:300 und left:75 festgelegt.

Abbildung 4.43: Das Bild wurde animiert verschoben.

Sequenzielle Verkettung von Animationen Über dojo.fx.chain() können Sie mehrere Animationen sequenziell verketten34. Diese werden dann nacheinander ausgeführt. Der Aufruf gibt eine einzelne Instanz von dojo._Animation zurück. Betrachten wir das nachfolgende Beispiel (dojo_ani4.html – die ersten acht Zeilen sind identisch mit dem letzten Beispiel):

34 chain = „Kette“.

248

4.14 Animationen mit Dojo

Listing 4.48: Verketten von Animationen ... 09 <script type="text/javascript"> 10 dojo.require("dojo.fx"); 11 dojo.addOnLoad(function(){ 12 var anim = dojo.fadeOut({ node: "meineID" }); 13 var anim2 = dojo.fadeIn({ node: "meineID" }); 14 dojo.fx.chain([anim,anim2]).play(); 15 }); 16 17 18 19

Aus- und Einblenden

20 21 22

In Zeile 14 werden zwei Animationen (Ausblenden mit dojo.fadeOut() und Einblenden mit dojo.fadeIn()) verkettet, die nacheinander ausgeführt werden.

Kombination von Animationen Mit dojo.fx.combine() erhalten Sie wieder eine einzelne Instanz von dojo._Animation. Nur laufen die als Parameter angegebenen Animationen parallel ab. Das nachfolgende Listing zeigt die parallele Ausblendung und Verschiebung eines Elements (dojo_ani5.html): Listing 4.49: Kombination von Animationen zur zeitgleichen Ausführung ... 09 <script type="text/javascript"> 10 dojo.require("dojo.fx"); 11 dojo.addOnLoad(function(){ 12 var anim = dojo.fadeOut({ node: "meineID" }); 13 var anim2 = dojo.fx.slideTo( 14 { node: "meineID", top:75, left:75 }); 15 dojo.fx.combine([anim,anim2]).play(); 16 }); 17 18 19 20

Ausblenden und Verschieben

21 22 23

In Zeile 15 sehen Sie die Kombination von zwei Animationen (Ausblenden und Verschieben) zur zeitgleichen Ausführung.

249

4 Das Dojo-Toolkit

Animierte Größenveränderungen Animierte Größenveränderungen können Sie mit dojo.fx.wipeIn() und dojo.fx.wipeOut() vornehmen. Hier sehen Sie das animierte Reduzieren der Größe eines Bilds von der natürlichen Größe auf ein Pixel (Zeile 12 und 13). Anschließend verschwindet das Element (dojo_ani6.html): Listing 4.50: Animiertes Verkleinern eines Bilds ... 09 <script type="text/javascript"> 10 dojo.require("dojo.fx"); 11 dojo.addOnLoad(function(){ 12 var anim = dojo.fx.wipeOut( 13 { node: "meineID", delay 2000 }); 14 anim.play(); 15 }); 16 17 18 19

Ausblenden und Verschieben

20 21 22

Tipp Beachten Sie, dass es vom konkreten Element abhängen kann, ob das Element nur in der Höhe (etwa bei einer Überschrift) oder in der Höhe und Breite (beispielsweise bei einem Bild) verkleinert wird. Wenn Sie die Breite eines Elements wie einem Bild jedoch festhalten, wird dojo.fx.wipeOut() das Element auch hier nur bezüglich des freien Parameters (der Höhe) verkleinern, bevor es verschwindet. Notieren Sie im Beispiel die Zeile 20 beispielsweise so: Listing 4.51: Die Breite wird festgehalten.

Dann verkleinert sich bei der Animation nur die Höhe des Bilds, bevor es verschwindet. Derzeit funktioniert aber das Festhalten der Höhe nicht.

250

4.14 Animationen mit Dojo

4.14.5

Kombination mit anderen Multimedia-Techniken

Sie können die Animationstechniken von Dojo auch hervorragend mit anderen Multimedia-Techniken kombinieren – etwa mit Flash-Animationen, wie das folgende Beispiel zeigt (dojo_ani7.html): Listing 4.52: Eine Flash-Animation, die mit Dojo-Effekten zusätzlich animiert wird 01 03 04 05 06 <style> 07 #yaoti_movie { 08 position: absolute; top: -15px; left: 240px; 09 width: 400px; height: 400px; z-index: 10000; 10 } 11 #u { 12 position: absolute; top: 75px; left: 240px; 13 } 14 15 <script type="text/javascript" 16 src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js" 17 djConfig="parseOnLoad:true, isDebug:true"> 18 <script language="JavaScript" type="text/javascript"> 19 // Parameter für die Flash-Animation 20 var UID = "1"; 21 var POSX = 50; 22 var POSY = 50; 23 var SHOW = "always"; 24 var AUTO_PLAY = "on"; 25 // Funktion zum Abspielen der Flash-Animation 26 function changeDIV() { 27 // Flash-Video 28 var video= 29 'http://yaoti.eu/showroom/steyer/ 100-DE0117-2(A)176x272.flv'; 30 var contenedor = document.getElementById("yaoti_movie"); 31 var object = ''; contenedor.innerHTML = object; contenedor.style.display='block';

38 39 40 41 } 42 dojo.require("dojo.fx"); 43 dojo.addOnLoad(function(){ 44 changeDIV(); 45 var anim = dojo.fx.wipeOut({ 46 node: "yaoti_movie", delay:9000 }); 47 anim.play(); 48 }); 49 50 51 52

Willkommen mit einem Flash-Avatar

53

54 55

In den Zeilen 6 bis 14 werden mit CSS zwei Elemente der Webseite über ihre ID positioniert und ein Element noch zusätzlich in der Größe festgelegt. In den Zeilen 20 bis 41 finden Sie spezifische Anweisungen zum Einbinden der FlashAnimation, die wir hier nicht besprechen. In dojo.addOnLoad() wird dann in Zeile 44 die Funktion changeDIV() zum Generieren der HTML-Anweisungen für die Flash-Animation aufgerufen. Beachten Sie, dass wir auch hierfür sicherstellen müssen, dass der DOM korrekt aufgebaut ist. Gerade in Verbindung mit dem Nachladen von Ressourcen aus dem Internet ist der Schutzmechanismus von Dojo sehr nützlich. Die eigentliche Dojo-Animation wird wie üblich ausgeführt. Hier sehen Sie ein Wegblenden mit dojo.fx.wipeOut() in Zeile 45. Die einzige Besonderheit ist, dass der Parameter delay so gewählt wird, dass zu dem Zeitpunkt die Flash-Animation beendet ist.

252

4.14 Animationen mit Dojo

Abbildung 4.44: Ein Flash-Avatar begrüßt die Besucher.

Abbildung 4.45: Mit wipeOut() wird der Avatar zum Verschwinden gebracht.

253

4 Das Dojo-Toolkit

Direkte Flash-Unterstützung mit dojox.flash & Co In Dojo nimmt Flash aber noch eine weitergehende Bedeutung ein, als nur ein »neutrales« Objekt zu sein, das über Dojo-Animationstechniken wie oben beeinflusst werden kann. Es gibt ein eigenes Objekt mit Namen dojox.flash, das eine einfache Integration von Flash in eine AJAX- bzw. DHTML-Umgebung ermöglichen soll, aber derzeit noch in einem experimentellen Stadium ist und vor allen Dingen in der Zusammenarbeit mit dem Internet Explorer so einige Problemchen hat. Dennoch ist es ein sehr interessanter Ansatz mit Zukunft, der genau genommen mit dem FlashPlug-in des Browsers interagiert. Hinweis Von dojox.flash wird aktuell nur maximal ein Flash-Objekt in der Webseite unterstützt.

Dieses Objekt dojox.flash stellt zum Beispiel eine Methode zur Verfügung, über die die aktuelle Version des Flash-Plug-in bestimmt werden kann (dojox.flash.Info()). Des Weiteren gibt es die Methode dojox.flash.Embed(). Diese schreibt das notwendige Markup zum dynamischen Einfügen eines Flash-Objekts in die Webseite und dojox.flash.Install() führt ein Upgrade des Flash-Plug-ins durch. Das Zusammenspiel zwischen Dojo und Flash ist dennoch nicht ganz trivial. Wenn Sie mit der Methode des eingebetteten Flash-Objekts Ihre Webseite aufrufen wollen, ist es rein Ihre Verantwortung, dass Sie das Flash ExternalInterface API korrekt verwenden und eine Referenz auf das Flash-Objekt erhalten. Um dann dojox.flash zu verwenden, müssen Sie in jedem Fall erst einmal warten, bis Flash fertig geladen und initialisiert ist. Erst dann können Sie die Kommunikation oder Interaktion beginnen. So eine Information haben Sie zur Verfügung, wenn Sie dojo.connect() einsetzen: Listing 4.53: Warten auf Flash dojo.connect(dojox.flash, "loaded", meinInstanz, "meinCallback");

Dann – während die restliche Seite möglicherweise immer noch geladen wird – setzen Sie den Dateinamen mit der Methode setSwf(): Listing 4.54: Angabe des Dateinamens der Flash-Animation dojox.flash.setSwf(dojo.moduleUrl("dojox", "storage/storage.swf"));

254

4.14 Animationen mit Dojo

Optional können Sie über das Attribut visible kontrollieren, ob das Flash-Objekt sichtbar ist oder nicht: Listing 4.55: Die Flash-Datei soll noch nicht angezeigt werden. dojox.flash.setSwf(dojo.moduleUrl("dojox", "storage/storage.swf"), false);

Hinweis Wenn keine SWF-Dateien angegeben werden, wird Flash nicht initialisiert.

Sobald ein Flash-Objekt zur Verfügung steht, können Sie mit dojox.flash.info.version die Versionsnummer abfragen oder Flash-Methoden aufrufen. Beispiel: Listing 4.56: Verschiedene Flash-Methoden var f = dojox.flash.get(); var results = f.sayHello("Sag was");

Um eine erfolgreiche Zusammenarbeit zwischen Dojo und Flash zu gewährleisten, sollten die Flash-Dateien auf jeden Fall DojoExternalInterface.as zur Registrierung ihrer Methoden verwenden. Diese Datei ummantelt das normale ExternalInterface von Flash und korrigiert diverse Bugs in der Serialisierung35 im ExternalInterface. Hinweis Beachten Sie, dass dojox.flash nicht als generischer Mechanismus zum Einbetten von Flash konzipiert ist. Damit soll bloß der Dojo Flash Storage Provider so klar und modular wie möglich gemacht werden. Wenn Sie einen generischen Mechanismus zum Einbetten von Flash benötigen, sollten Sie einen Blick auf das SWFObject (http://blog.deconcept.com/swfobject/) werfen.

4.14.6

Animationsereignisse

Wir haben im Zusammenhang mit der Kombination des Dojo-wipeOut() mit einer Flash-Animation gesehen, dass man über eine geschickte Wahl des Parameters delay (und gegebenenfalls duration) eine einfache zeitliche Steuerung einer Animation zur 35 Serialisierung bedeutet das Speichern eines Objektzustands. Ein serialisiertes Objekt kann an einer anderen Stelle wieder vollständig reproduziert werden.

255

4 Das Dojo-Toolkit

Verfügung hat. Das ist auch eine sinnvolle Vorgehensweise, wenn man die Dojo-Animation mit Fremdtechniken kombiniert und keinen unmittelbaren Zugriff auf Zustände und Ereignisse in der Fremdanimation hat. Aber für eine reine Dojo-Animation kann man geschickter (und zuverlässiger) vorgehen. Jedes Objekt vom Typ dojo._Animation verfügt auch über eine Serie von Ereignissen, worüber eine Animation erheblich anspruchsvoller gestaltet werden kann. Diese Ereignisse lassen sich in Verbindung mit dojo.connect() einsetzen und Sie können Aktionen spezifizieren, die zu bestimmten Situationen während der Animation ausgeführt werden sollen. Die wichtigsten Ereignisse sind onEnd und beforeBegin, was offensichtlich das Ende der Animation bzw. den Start betrifft. Hier sehen Sie den grundsätzlichen Aufbau: Listing 4.57: Reaktion auf Start und Ende der Animation dojo.addOnLoad(function(){ var anim = dojo.fadeOut({ node: "meineID" }); dojo.connect(anim,"onEnd",function(){ // Tue was Sinnvolles am Ende der Animation }); dojo.connect(anim,"beforeBegin",function(){ // Tue was Sinnvolles bei Beginn der Animation }); anim.play(); });

Solche Ereignisse beim Start und Ende einer Animation sind besonders dann nützlich, wenn Sie beispielsweise den Inhalt eines Elements austauschen wollen, während er ausgeblendet ist. Anschließend können Sie das Element wieder animiert erscheinen lassen (dojo_ani8.html): Listing 4.58: Austausch von Inhalt am Ende der Animation 01 03 04 05 06 <script type="text/javascript" 07 src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js" 08 djConfig="parseOnLoad:true, isDebug:true"> 09 <script type="text/javascript"> 10 dojo.require("dojo.fx"); 11 dojo.addOnLoad(function(){ 12 var anim = dojo.fadeOut({ node: "meineID" }); 13 dojo.connect(anim,"onEnd",function(){ 14 dojo.byId("meineID").innerHTML = "42!"; 15 dojo.fadeIn({ node:"meineID", duration:5000 }).play();

256

4.14 Animationen mit Dojo

16 }); 17 anim.play(); 18 }); 19 20 21 22

Die Antwort ist

23 24

In Zeile 13 sehen Sie, dass der Inhalt eines DIV-Containers am Ende der Animation ausgetauscht und wieder eingeblendet wird.

Animationsereignisse als Parameter Sie können statt der Verwendung von dojo.connect() die Ereignisfunktionen auch als Eigenschaften der Animation verwenden. Zwar ist dojo.connect() im Allgemeinen mächtiger und sicherer, aber in manchen Situationen auch unnötig. Die nachfolgende Syntax gilt als einfacher und übersichtlicher (dojo_ani8_a.html): Listing 4.59: Die Events werden als Eigenschaften notiert. ... 09 10 11 12 13 14 15 16 17 18 19 20 ...

<script type="text/javascript"> dojo.require("dojo.fx"); dojo.addOnLoad(function(){ var anim = dojo.fadeOut({ node: "meineID", onEnd: function(){ dojo.byId("meineID").innerHTML = "42!"; dojo.fadeIn({ node: "meineID" }).play(); } }).play(); });

4.14.7

Animationen in Verbindung mit dojo.query()

Wie schon erwähnt, ergänzt das Modul dojo.NodeList-fx dojo.query() um einige zusätzliche Methoden, die vor allen Dingen im Rahmen von dojo.fx-Animationen sehr nützlich sein können.

257

4 Das Dojo-Toolkit

Betrachten Sie das nachfolgende Codefragment: Listing 4.60: Die Verwendung von dojo.NodeList-fx dojo.require("dojo.NodeList-fx"); dojo.addOnLoad(function(){ dojo.query("#meineID").fadeOut().play(); });

Im Grunde machen wir in diesem Codefragment das Gleiche, wie wenn wir dojo.fadeOut() direkt aufrufen. Aber der Aufruf von dojo.query() sorgt dafür, dass eine Animation für jedes der NodeList-Elemente erstellt wird. Und diese werden in einer einzigen dojo._Animation kombiniert. Das kann dann sinnvoll sein, wenn Sie eine Gruppe von Knoten haben, die Sie auf einfache Art und Weise manipulieren wollen (dojo_ani9.html): Listing 4.61: Anwendung von dojo.NodeList-fx 01 03 04 05 06 <style type="text/css"> 07 @import "http://o.aolcdn.com/dojo/1.1.1/dojo/ resources/dojo.css"; 08 09 <script type="text/javascript" 10 src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js" 11 djConfig="parseOnLoad:true, isDebug:true"> 12 <script type="text/javascript"> 13 dojo.require("dijit.form.Button"); 14 dojo.require("dojo.NodeList-fx"); 15 var fadeThem = function(){ 16 dojo.query(".fadeNode").fadeOut().play(); 17 } 18 dojo.addOnLoad(function(){ 19 dojo.connect(dojo.byId("meineID"),"onclick",fadeThem); 20 }); 21 22 23 24

Fade or

25

not

26

to fade

27

28 Lass es faden

29 30

258

4.15 Zusammenfassung

Im Beispiel werden mit dem Klick auf die Schaltfläche drei Überschriften ausgeblendet, die mit der Klasse fadeNode versehen sind und mit dojo.query() in Zeile 16 ausgewählt werden.

4.15

Zusammenfassung

In diesem Teil des Buchs haben wir das Dojo-Toolkit kennengelernt. Insgesamt macht das Dojo Toolkit einen sehr ausgereiften Eindruck, insbesondere auch im Hinblick auf die Dokumentation. Die Tatsache, dass es sich um ein Open-Source-Toolkit handelt, das unter dem Dach der Dojo Foundation entwickelt wird, spricht dafür, dass auch zukünftig eine Weiterentwicklung des Toolkits gesichert ist. Dafür stehen nicht zuletzt die Mitglieder der Dojo Foundation. Das Dojo Toolkit selbst spaltet sich in drei wesentliche Bestandteile auf. Unter dem Begriff Dojo Core oder kurz Dojo finden Sie die Kernfunktionalitäten des Toolkits in Form einer sehr kompakten Bibliothek. Das Dijit und DojoX setzen darauf auf und erweitern die Kernfunktionalität. Neben der Vielzahl an Widgets ist das modulare Paketsystem von Dojo sicher ein Highlight des Frameworks. Aber auch die Ereignisbehandlung, die CSS-Themen, die Animationstechniken und die Kompensierung von Browser-Unzulänglichkeiten sind sicher Gründe, die für einen Einsatz sprechen.

259

5

Prototype + Scriptaculous

In diesem Kapitel wollen wir uns das Framework Prototype (http://www.prototypejs. org/) ansehen. Diese JavaScript-Bibliothek wurde erstmals im Jahr 2005 von einem Programmierer mit Namen Sam Stephenson vorgestellt und hat ihren Namen wohl von der Prototyping-Technologie in JavaScript, die dort eine Art Ersatz für die Vererbung in der OOP darstellt. Mit diesem Prototyping können Sie allgemein eine Klasse bzw. ein Objekt in aktuellen Versionen von JavaScript um neue Eigenschaften und Methoden erweitern. Und genau so etwas macht man in diesem freien und sehr umfangreichen JavaScript-Framework äußerst ausgeprägt. Das Prototype-Framework stellt zahlreiche Erweiterungen des JavaScript-Standardumfangs samt einer konsistenten Syntaxerweiterung bereit, um damit Unterstützung für verschiedenste Aufgaben im Webclient zu bieten – unter anderem auch zu AJAX, wobei auch hier gilt, dass AJAX nur eine Facette bildet. Prototype war in den wenigen Jahren seiner Existenz dennoch das mit Abstand populärste Framework für AJAX und JavaScript und hatte in den letzten Jahren von allen Frameworks und Toolkits aus diesem Bereich die einzig nennenswerte Verbreitung im professionellen Umfeld. Und obwohl Frameworks und Toolkits wie das YUI oder Dojo immer mehr an Professionalität gewinnen und massiv ihre Benutzerzahlen steigern, ist Prototype immer noch für viele professionelle Webprogrammierer das Referenz-Framework schlechthin. Tipp Prototype lässt sich hervorragend mit diversen anderen Frameworks und Toolkits kombinieren. Nutzen Sie von diesen beispielsweise die Möglichkeiten der GUI-Gestaltung und von Prototype die kompakte JavaScript-Ergänzungssyntax und die Methoden zur effektiven und ziemlich sicheren DOM-Manipulation.

Viele Anwender schätzen Prototype, weil die bereitgestellten Syntaxerweiterungen für JavaScript durch ihre kompakten Schreibweisen die Möglichkeit bieten, den JavaScriptQuelltext massiv zu verkürzen. Allerdings muss man deswegen neben JavaScript zusätzlich auch diese eigenständige Prototype-Syntax beherrschen. Und insbesondere wählt Prototype bei der Zielgruppe einen etwas anderen Ansatz als viele andere Toolkits und Frameworks im Umfeld von Webprogrammierung und AJAX – auch solche in diesem Buch. Diverse Toolkits und Frameworks konzentrieren sich darauf, dass Anwender

5 Prototype + Scriptaculous

mit geringen oder gar teilweise nur ganz wenigen Kenntnissen in JavaScript und CSS komplexe und leistungsfähige AJAX- bzw. Webapplikationen erstellen können. Bei Prototype verhält es sich nicht so. Prototype kann man eigentlich nur mit guten bis sehr guten Kenntnissen in JavaScript und zumindest elementaren CSS-Grundlagen effektiv verwenden. Erfahrungen mit XML und XPath sind ebenso sehr hilfreich.1 Dann aber vereinfacht die kompakte Syntax in der Tat die Programmierung. Hinweis Ein weiteres Highlight von Prototype ist, dass es ein integraler Bestandteil von Ruby on Rails darstellt. Inzwischen dient Prototype als Grundlage für zahlreiche Projekte wie beispielsweise Scriptaculous bzw. script.aculo.us und Rico. Solche Erweiterungen auf Basis von Prototype verfolgen wir in diesem Buch kompakt anhand von Scriptaculous.

5.1

Download und Verwendung von Prototype

Die jeweils letzte stabile Version können Sie über die Adresse http://www.prototypejs.org/download auf Ihren Rechner laden. Sie erhalten eine JavaScript-Datei mit Namen prototype.js. Diese enthält die gesamte Funktionalität des Frameworks. Hinweis Im Buch beziehen wir uns auf die Version 1.6.0.2.

Wenn Sie Prototype verwenden wollen, müssen Sie bloß die geladene JavaScriptDatei in Ihre Webseite einbinden. Etwa wie folgt, wenn Sie die Webseite und die Bibliothek im gleichen Verzeichnis stehen haben: Listing 5.1: Einbindung von Prototype <script type = "text/javascript" src="prototype-1.6.0.2.js">

Einfacher geht es kaum. 1

So gesehen ist Prototype ein Framework für JavaScript-Programmierer, die es von ihrem Wissen her eigentlich nicht brauchen. Für Einsteiger in JavaScript und Webprogrammierung ist Prototype meines Erachtens kaum sinnvoll anzuwenden, sofern diese nicht vorher oder gleichzeitig auch pures JavaScript und CSS lernen und sich zumindest mit Grundzügen von XML und XPath beschäftigen.

262

5.1 Download und Verwendung von Prototype

5.1.1

Die unterstützten Browser

Die Kompatibilität des Frameworks hängt zum Teil von der Version von Prototype ab. Die Version 1.6 ist zu folgenden Browsern kompatibel:  Mozilla Firefox = 1.5  Microsoft Internet Explorer = 6.0  Apple Safari = 2.0  Opera = 9.25

Spezielle Linux-Browser wie der Konqueror werden in der offiziellen Dokumentation von Prototype nicht explizit erwähnt, funktionieren aber meist auch. 2

Achtung Leider gelingt es auch Prototype (wie eigentlich allen Frameworks und Toolkits) nicht vollständig, Inkompatibilitäten zwischen Browsern zu beseitigen (obgleich es schon sehr gut klappt). Gerade Techniken, die die Navigation auf dem DOM betreffen, machen insbesondere im Internet Explorer Probleme.2 Daher kann man trotz der offiziellen Beteuerungen nur von einer (fast) vollständigen Kompatibilität zu den genannten Browsern sprechen. Ein Test Ihrer Webapplikation in allen relevanten Browsern ist auch beim Einsatz von Prototype immer noch unumgänglich.

5.1.2

Der Einstieg

Im Gegensatz zu Toolkits und Frameworks mit visueller Ausprägung und insbesondere Widgets ist es bei Prototype nur begrenzt aufschlussreich, wenn Sie sich Demobeispiele ansehen, die Prototype verwenden. Die Mechanismen von Prototype wirken eher im Hintergrund und zum Einstieg sollte man meines Erachtens direkt mit dem Quellcode experimentieren und selbst programmieren.

Die API-Dokumentation Und nicht zu vergessen ist die sehr gute und vollständige API-Dokumentation von Prototype, die Ihnen unter http://www.prototypejs.org/api zur Verfügung steht. Leider fehlt derzeit in der Dokumentation eine vernünftige Suchmöglichkeit, wie sie etwa im Dojo Toolkit oder der YUI-Dokumentation geboten werden. Und auch sonst kann der Komfort nicht ganz mit den anderen beiden in diesem Buch behandelten Frameworks bzw. Toolkits mithalten. Aber der Inhalt ist ohne Fehl und Tadel und eine sehr gute Quelle zum Nachschlagen.

2

Wir kommen darauf zurück und belegen diese Aussage mit einem praktischen Beispiel.

263

5 Prototype + Scriptaculous

Abbildung 5.1: Die API-Dokumentation von Prototype

5.2

Shortcuts

Steigen wir in die Programmierung mit Prototype ein. Ein Großteil der Beliebtheit von Prototype basiert darauf, dass einige mächtige, verkürzte Shortcuts bzw. Hilfsmethoden3 für oft notwendige JavaScript-Anweisungen zur Verfügung gestellt werden. Im Wesentlichen handelt es sich um Helfermethoden für häufig benötigte Aktionen auf dem DOM.

5.2.1

$( )

Der bekannteste und wohl am häufigsten verwendete Shortcut von Prototype ist $(). Diese Methode bildet das Rückgrat des gesamten Frameworks. Darüber können Sie ein Element in der Webseite über die ID oder eine DOM-Knotenreferenz als Parameter ansprechen (ohne sich explizit um den Typ zu kümmern). Oder etwas genauer – der Shortcut liefert als Rückgabewert ein Element. So gesehen handelt es sich erst einmal um eine erweiterte Kurzschreibweise für document.getElementById() respektive eine ähnliche klassische DOM-Zugriffstechnik, worüber Sie in der traditionellen Webprogrammierung ein Element in der Webseite über die ID ansprechen. 3

»Utility methods«, wie es in der Dokumentation von Prototype heißt.

264

5.2 Shortcuts

Beispiel: Listing 5.2: Zugriff auf ein Element mit $() $(element1).style.visibility = 'hidden';

Ein praktisches Beispiel mit der Änderung einer Farbe für ein Element Schauen wir uns ein vollständiges Beispiel mit einem typischen DHTML-Effekt an, der über $() bedeutend kompakter als mit document.getElementById() oder einer anderen Standardschreibweise für den Elementzugriff in JavaScript notiert werden kann (proto1.html): Listing 5.3: Ein DHTML-Effekt, der über den Zugriff auf ein Element mit $() programmiert wird 01 03 04 05 <meta http-equiv="Content-Type" 06 content="text/html; charset=iso-8859-1" /> 07 08 <script type = "text/javascript" 09 src = " prototype-1.6.0.2.js"> 10 <script type = "text/javascript"> 11 function aendereFarbe(element) { 12 $(element).style.color = '#FF0000'; 13 $('ausgabe').innerHTML = $(element).style.color; 14 } 15 function setzeFarbeZurueck(element) { 16 $(element).style.color = '#000000'; 17 $('ausgabe').innerHTML = $(element).style.color; 18 } 19 20 21 22

24 Komm doch mit deinem Mauszeiger. Bitte, bitte!

25

26 27

Wir haben hier einen Absatz in der Webseite, bei dem mit zwei HTML-Eventhandlern Funktionen ausgelöst werden. Die Funktion aendereFarbe() wird mit onmouseover beim Erreichen des Absatzes mit der Maus ausgelöst und die Funktion setzeFarbeZurueck() beim Verlassen.

265

5 Prototype + Scriptaculous

Die Funktion aendereFarbe(), die in Zeile 11 bis 14 definiert ist, nimmt ein beliebiges Element als Übergabewert und ändert seine Farbe mittels $() und dem style-Objekt in Rot. Zusätzlich wird in einem Ausgabebereich der Wert der Farbe angezeigt. Auf den Ausgabebereich greifen wir ebenso mit $() zu. 4

Abbildung 5.2: Wie man sieht, ist die Textfarbe #ff0000, wenn der Mauszeiger im Bereich der Überschrift ist – hier die Anzeige im Internet Explorer.4 Die Funktion setzeFarbeZurueck() arbeitet vollkommen analog und setzt die Textfarbe zurück auf Schwarz.

Abbildung 5.3: Die Textfarbe ist Schwarz, wenn sich der Mauszeiger nicht auf der Schrift befindet. Achtung Wenn Sie $() als Parameter eine nicht existierende ID angeben, wird als Ergebnis null geliefert.

4

Andere Browser erzeugen hier abweichende Ausgaben, was aber die Funktionalität an sich nicht betrifft.

266

5.2 Shortcuts

$() mit mehreren Elementen als Parameter Die Funktionalität von $() geht auch in einer weiteren Hinsicht über eine reine Kurzschreibweise für document.getElementById() hinaus. Der $()-Methode können Sie beliebig viele Elementreferenzen als Parameter übergeben und dann Aktionen wie das Zuweisen eines neuen CSS-Stils auf alle Elemente ausführen. Die $()-Methode arbeitet dabei rekursiv die Elemente ab. Beispiel: Listing 5.4: Anwenden auf mehrere Elemente $(element1, element2).style.visibility = 'hidden';

In diesem Beispiel würden element1 und element2 unsichtbar gemacht, indem über das style-Objekt der Wert von visibility auf hidden gesetzt wird. Hinweis Die $()-Funktion erweitert jedes zurückgegebene Element mit Element.extend(). Dies bedeutet, dass man auf dem Ergebnis alle prototype-spezifischen DOM-Erweiterungen anwenden kann.

5.2.2

$$()

Die Funktion $$() nimmt eine beliebige Anzahl von CSS-Selektoren im Stringformat als Parameter und liefert ein Array mit DOM-Elementen als Rückgabewert, die der Selektion entsprechen. Beispiele: Listing 5.5: Alle DIV-Elemente im Dokument $$('div');

Listing 5.6: Alle Elemente mit der Klasse blau $$('.blau');

267

5 Prototype + Scriptaculous

Hinweis Die unterstützten CSS-Selektoren müssen standardkonform sein. Einige Browser verfügen über proprietäre CSS-Selektoren, die hier nicht angewendet werden können. Das ist aber auch sinnvoll bzw. notwendig. Nur so kann eine Browser-Unabhängigkeit gewahrt werden.

Eine DHTML-Animation – smarte Vergrößerung der Schrift So könnte der Shortcut $$() in einem vollständigen Beispiel (einer DHTML-Animation) verwendet werden (proto2.html): Listing 5.7: Eine Animation von allen DIV-Elementen in der Webseite 01 03 04 05 <meta http-equiv="Content-Type" 06 content="text/html; charset=iso-8859-1" /> 07 08 <script type = "text/javascript" 09 src = " prototype-1.6.0.2.js"> 10 <script type = "text/javascript"> 11 var schriftgroesse = 1; 12 function init(){ 13 for(i=0; i < $$('div').length; i++){ 14 $$('div')[i].style.fontSize = schriftgroesse++ + "px"; 15 } 16 blendeTextEin(); 17 } 18 function blendeTextEin() { 19 for(i=0; i < $$('div').length; i++){ 20 $$('div')[i].style.fontSize=schriftgroesse++ + "px"; 21 } 22 if(schriftgroesse < 60) 23 setTimeout('blendeTextEin()','100'); 24 } 25 26 27 28

Die Antwort auf alle Fragen

29

---

30 ist 31

---

268

5.2 Shortcuts

32

42

33 34

Über einen rekursiven Aufruf der Funktion blendeTextEin() werden alle DIV-Elemente in der Webseite smart von der Startschriftgröße 1 Pixel (in der Funktion init() festgelegt, die in Zeile 27 beim Laden der Webseite mit onload aufgerufen wird) auf die Endgröße 60 Pixel vergrößert. Alle anderen Textelemente in der Webseite werden nicht beeinflusst.

Abbildung 5.4: Die Schriftgröße ist noch am Wachsen. In Zeile 13 wird ausgenutzt, dass $$() ein Array zurückliefert. Dementsprechend steht die Eigenschaft length für die Größe des Arrays zur Verfügung. Dies kann man in der for-Schleife verwenden, um alle Elemente des Arrays zu durchlaufen. In Zeile 14 wird die Schriftgröße mit $$('div')[i].style.fontSize = schriftgroesse++ + "px"; für alle Texte in DIV-Elementen auf den Anfangswert gesetzt (das wird in Zeile 11 festgelegt: var schriftgroesse = 1;) und anschließend5 mit dem ++-Operator der Wert der Variablen schriftgroesse erhöht. In Zeile 16 wird die Funktion blendeTextEin() aufgerufen, die sich in Zeile 22 und 23 rekursiv so lange selbst aufruft, bis die Zählvariable schriftgroesse den Wert 60 erreicht hat. Dabei wird mit setTimeout() jeder Aufruf um 100 Millisekunden verzögert. Die Anpassung der Schriftgröße erfolgt wie in der Funktion init(). 5

Beachten Sie, dass der Operator ++ nachgestellt ist.

269

5 Prototype + Scriptaculous

Abbildung 5.5: Der Text in den DIV-Elementen wurde zur maximalen Größe vergrößert.

5.2.3

$F( )

Bei $F() handelt es sich im Wesentlichen um einen Shortcut, um über die ID auf den Wert eines Formularfelds zuzugreifen. Im Allgemeinen macht man das ohne diesen Shortcut mit der Prototype-Notation Form.Element.getValue() oder ganz ohne Prototype mit den normalen DOM-Methoden. Tipp Unter Form.Element finden Sie diverse weitere Methoden zum Umgang mit Webformularen.

Ein Beispiel mit Zugriff auf ein Webformularfeld Hier sehen Sie das Verwerten der Eingabedaten eines Anwenders in einem Formularfeld (proto3.html): Listing 5.8: Zugriff auf den Inhalt eines Formularelements mit $F() 01

270

5.2 Shortcuts

03 04 05 <meta http-equiv="Content-Type" 06 content="text/html; charset=iso-8859-1" /> 07 08 <script type = "text/javascript" 09 src="prototype-1.6.0.2.js"> 10 <script type = "text/javascript"> 11 function wert(){ 12 var meintext = $F('textfeld'); 13 $('ausgabe').innerHTML = meintext; 14 } 15 16 17 18

Geben Sie was ein

19

20 21
22 23 24

25 26

In dem Beispiel wird bei einem Klick auf die Schaltfläche der Wert des Felds mit der ID textfeld im DIV-Element mit der ID ausgabe angezeigt. Der Zugriff auf den Inhalt des Formularfelds erfolgt in Zeile 12 mit $F('textfeld').

Abbildung 5.6: Der Wert des Formularfelds wurde in die Webseite übernommen.

271

5 Prototype + Scriptaculous

5.2.4

$A()

Die Methode $A([obj]) akzeptiert eine datenfeldartige Sammlung (alles mit einem numerischen Index) und gibt das Äquivalent als tatsächliches Array-Objekt zurück. Diese Methode ist ein Alias für die Prototype-Erweiterung Array.from(). Die primäre Anwendung von $A() ist der Fall, wenn man ein wirkliches Array-Objekt braucht, aber nur etwas Ähnliches wie eine NodeList oder HTMLCollection zur Verfügung hat. Solche datenfeldähnlichen Strukturen werden von verschiedenen DOMMethoden als Rückgabetyp geliefert.

5.2.5

$H

Die Methode $H([obj]) erstellt ein Hash bzw. Map oder assoziatives Array.6 Es handelt sich um einen abgesicherten Wrapper um den Hash-Konstruktor, der es beispielsweise auch erlaubt, ein existierendes Hash-Objekt zu übergeben und unverändert zurückzubekommen.

5.2.6

$R( )

Mit $R(start, end[, exclusive = false]) können Sie ein Objekt vom Typ ObjectRange zur Angabe eines Wertebereichs erzeugen. Diese Methode stellt damit einen bequemen Wrapper um den ObjectRange-Konstruktor mit den gleichen Parametern dar. Die Instanzen vom Typ ObjectRange repräsentieren einen Wertebereich beliebigen Typs. Der erste Parameter gibt den unteren Wert des Wertebereichs an und der zweite den oberen. Dieser obere Wert des Wertebereichs gehört in der Grundeinstellung dazu, kann aber mit dem dritten Parameter ausgeschlossen werden.

Wertebereiche in einem praktischen Beispiel In dem nachfolgenden Listing sehen Sie die Anwendung von $R() in mehreren Versionen (proto4.html): Listing 5.9: Generieren von Wertebereichen mit $R() 01 03 04 05 <meta http-equiv="Content-Type" 06 content="text/html; charset=iso-8859-1" /> 07 08 <script type = "text/javascript" 09 src="prototype-1.6.0.2.js">

6

Also eine Konstruktion mit einem Schlüssel-Werte-Paar.

272

5.2 Shortcuts

10 <script type = "text/javascript"> 11 function wertebereiche(){ 12 var meintext = "$R(0, 20).include(20): " + 13 $R(0, 20).include(10) + "
"; 14 meintext += "$R(0, 20, true).include(20): " + 15 $R(0, 20, true).include(20) + "
" 16 meintext += "$A($R(0, 5)).join(', '): " + 17 $A($R(1, 15)).join(' - ') + "
" 18 meintext += "$A($R('aa', 'ah')).join(', '): " + 19 $A($R('aa', 'az')).join(', ') + "
" 20 $('ausgabe').innerHTML = meintext; 21 } 22 23 24 25

Verschiede Wertebereiche mit $R()

26

27 28

In der Funktion wertebereiche() werden mit $R() verschiedene Objekte vom Typ ObjectRange erzeugt.

Abbildung 5.7: Operationen auf verschiedenen Wertebereichen

5.2.7

$w( )

Mit der Funktion $w() wird ein String an den Leerzeichen in ein Array aufgesplittet. Beispiel: Listing 5.10: Aufsplitten in ein Array meinarray = $w('Besuchen Sie meine Webseite');

Hier wird der String in ein Array mit den einzelnen Worten als Elemente aufgesplittet.

273

5 Prototype + Scriptaculous

5.2.8

Try.these( ) – Ausnahmebehandlung mit Prototype

Mit Try.these() haben Sie eine verkürzte Prototype-Schreibweise für die Ausnahmebehandlung in JavaScript zur Verfügung.7 Es handelt sich im Grunde um nichts weiter als eine Abwandlung der üblichen try-catch-Syntax von JavaScript. Mit Try.these() nehmen Sie eine beliebige Anzahl von Funktionen entgegen. Als Ergebnis erhalten Sie den Rückgabewert der ersten Funktion, die keine Ausnahme erzeugt hat. Wenn alle Funktionen eine Ausnahme werfen, wird Try.these() den Wert undefined liefern. Eine umgebende Methode kann damit den Rückgabewert false liefern, der als Fallback-Resultat zur Verfügung steht.

Erzeugung eines XHMLHttpRequest-Objekts für AJAX Im nachfolgenden Listing sehen Sie die Anwendung in der üblichen universellen Erzeugung eines XHMLHttpRequest-Objekts für AJAX: Listing 5.11: Anwendung von Try.these() getAJAXObjekt: function() { return Try.these( function() { return new XMLHttpRequest() }, function() { return new ActiveXObject('Msxml2.XMLHTTP') }, function() { return new ActiveXObject('Microsoft.XMLHTTP') } ) || false; }

5.2.9

document.getElementsByClassName( )

Bereits in reinem JavaScript bzw. im DOM gibt es verschiedene Techniken, um an Elemente in der Webseite zu gelangen, aber nicht so direkt über den zugewiesenen Klassennamen. Die Prototype-Erweiterung document.getElementByClassName() erlaubt den Zugriff auf alle Elemente in einem Dokument, denen eine bestimmte CSS-Klasse zugewiesen wurde.

7

Genau genommen ist es eine verkürzte Syntax, um mehrere alternative Funktionen ausprobieren zu können, in der Hoffnung, dass eine davon keine Ausnahmen auslöst.

274

5.3 Prototype und AJAX

Beispiel: Listing 5.12: Die Farbe aller Elemente mit der Klasse klasse wird auf Rot geändert. document.getElementsByClassName('klasse').style.color='#FF0000';

5.3

Prototype und AJAX

Eine Stärke von Prototype ist sicher auch die ausgefeilte Unterstützung für AJAX, die eine AJAX-Anfrage gegenüber der manuellen Programmierung doch signifikant erleichtert. Zu diesem Zweck bietet Prototype drei interessante Objekte an.

5.3.1

AJAX-Objekte

 Mit dem Objekt AjaxRequest(url [, optionen]) führen Sie eine AJAX-Anfrage durch.  Über AjaxUpdater(container,url [, optionen]) können Sie ebenfalls eine AJAX-An-

frage ausführen und direkt in einem HTML-Element die Antwort des Servers anzeigen.  AjaxPeriodicalUpdater(container,url [, optionen]) entspricht AjaxUpdater(), nur

wird die Anfrage periodisch ausgeführt.

Die Optionen der AJAX-Objekte Alle drei AJAX-Objekte von Prototype verfügen über einen gemeinsamen Satz an Optionen,8 der im Wesentlichen den üblichen Angaben bei einer AJAX-Anfrage entspricht (die Optionen sind daher mit etwas Grundlagenkenntnissen in AJAX offensichtlich):  Mit asynchronous legen Sie fest, ob die Anfrage asynchron erfolgt. Der Standardwert ist true.  Mit encoding geben Sie die Kodierung des Inhalts an. Der Standardwert ist utf8.  Über method geben Sie die Art der Datenübertragung an.  Die prototype-spezifische Option postBody wird bei der Übertragungsmethode

POST verwendet, um Daten vom Client zum Server zu befördern. Bei POST werden Daten an den Server ja bekanntlich nicht als Query an den URL gehängt, sondern in den HTPP-Headern verschickt. Diese Option kapselt diese Verpackung.

8

Was aufgrund der engen Verwandtschaft nicht gerade außergewöhnlich ist.

275

5 Prototype + Scriptaculous

Ein praktisches Beispiel zum Nachfordern von Textdateien Schauen wir uns ein praktisches Beispiel an. Wir werden das erste AJAX-Beispiel aus Kapitel 2 auf Prototype umstellen (protoajax1.html): Listing 5.13: Eine AJAX-Anfrage mit Ajax.Updater() 01 03 04 05 <meta http-equiv="Content-Type" 06 content="text/html; charset=iso-8859-1" /> 07 08 <script type = "text/javascript" 09 src="prototype-1.6.0.2.js"> 10 <script type = "text/javascript"> 11 function sndReq(element){ 12 new Ajax.Updater(element, element + 'info.txt', { 13 method: 'get' 14 }); 15 } 16 function loesch(id){ 17 $(id).innerHTML = ""; 18 } 19 20 21 22

AJAX mit Prototype

23

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

24 25 26 27 31 32 33 34 38 39 40 41 45 46 47 48 52 53 54 55 59 60 61

Bild	Info
30
37
276 5.3 Prototype und AJAX 43 onmouseout="loesch('i3')" /> 44
51
58

62 63

Das Beispiel arbeitet – wie bereits in Kapitel 2 besprochen – 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. In dem AJAX-Beispiel wird dazu einfach Klartext vom Server in Form einer spezifischen Textdatei für jedes Bild angefordert. In Zeile 12 sehen Sie das als zweiten Parameter von Ajax.Updater(). Für die gewünschte Zusatzinformation für jedes Bild wird einfach für diesen zweiten Parameter der Name der individuellen Textdatei zusammengebaut, und zwar aus dem Parameter an die Funktion sndReq() und einer Kennung. Diese so festgelegte Datei enthält spezifische Informationen zum Bild und diese werden in einem individuellen Bereich der Webseite angezeigt, ohne die Webseite neu zu laden. Den Bereich spezifiziert der erste Parameter von Ajax.Updater(). Die Option method:get legt fest, dass der Request über GET erfolgt. 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 einer 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. Beachten Sie auch in Zeile 17 den Einsatz des Prototype-Shortcut $(id).

277

5 Prototype + Scriptaculous

Abbildung 5.8: Nachforderung von Textdateien per AJAX

Ein Beispiel für eine periodische AJAX-Anfrage Sehen wir uns ein weiteres Skript an, dass alle 2 Sekunden eine AJAX-Anfrage durchführt. Die Anwendungen für solche automatischen, periodischen AJAX-Anfragen an den Server sind riesig. Denken Sie zum Beispiel an eine Webseite mit Börsenkursen oder eine Online-Versteigerung, die kurz vor der Beendigung steht – also alles Anwendungen, bei denen die Daten im Client in regelmäßigen Abständen möglichst ohne Aktion durch den Anwender – also automatisch – aktualisiert werden müssen9 (protoajax2.html):

9

Noch einmal zur Erinnerung – der Server kann bei einer Webapplikation (auch bei Verwendung von AJAX) niemals Daten ohne Anforderung zum Client schicken. Oder genauer – der Client wird unaufgefordert geschickte Daten (wenn denn der Server überhaupt wüsste, wohin die Daten zu schicken sind) niemals entgegennehmen. Die Aktion muss immer vom Client initiiert werden.

278

5.3 Prototype und AJAX

Listing 5.14: Eine regelmäßige Aktualisierung der Webseite durch Daten vom Server 01 03 04 05 <meta http-equiv="Content-Type" 06 content="text/html; charset=iso-8859-1" /> 07 08 <script type = "text/javascript" 09 src="prototype-1.6.0.2.js"> 10 <script type = "text/javascript"> 11 function sndReq(element){ 12 new Ajax.PeriodicalUpdater(element, 'zufall.php', { 13 method: 'get', 14 frequency: 2, 15 decay: 4 16 }); 17 } 18 19 20 21

AJAX mit Prototype

22

23 24

Die AJAX-Anfrage in den Zeilen 12 bis 16 sorgt dafür, dass das Skript zufall.php alle 2 Sekunden aufgerufen wird (frequency:2). Die optionale Option decay:4 wirkt als Multiplikator für frequency, wenn der Rückgabewert gegenüber dem vorigen Request unverändert geblieben ist. Das bedeutet, wenn beim zweiten Request der gleiche Text als Antwort vom Server gesendet wird wie bei der ersten Anfrage, wird das nächste Request erst in 8 Sekunden (2 * 4) ausgeführt usw. Das serverseitige Skript sollte entsprechend neue Daten liefern, was wir in dem aufgerufenen PHP-Skript zufall.php mit einem einfachen Zufallsmechanismus simulieren wollen: Listing 5.15: Ein einfacher Zufallsmechanismus mit PHP simuliert laufend aktualisierte Daten. 01

279

5 Prototype + Scriptaculous

Abbildung 5.9: Die Daten werden permanent neu in der Webseite angezeigt.

5.4

Class zum Erstellen von Klassen

Mit Class steht in Prototype ein Objekt zur Verfügung, das mehr oder weniger die Nachbildung der klassenbasierenden OOP in JavaScript darstellt. Sie erstellen damit also JavaScript-Klassen10. Derzeit wird in Prototype die Vererbung intern durch Object.extend() realisiert, wobei sich diese Syntax unter Umständen samt dem Gesamtkonzept der OOP in Folgeversionen ändern könnte. Achtung Der Umgang mit Class wurde zum Beispiel in der Version 1.6.0 des Frameworks erheblich gegenüber der Vorgängerversion verändert und wird sich mit hoher Wahrscheinlichkeit auch in weiteren Prototype-Versionen immer wieder ändern (für die Version 2.0 wird bereits in der API-Dokumentation vorsorglich darauf hingewiesen). Zum Beispiel kam die nachfolgend noch erklärte Methode addMethods(methods) erst in der Prototype-Version 1.6.0 zu Class hinzu.

5.4.1

create( ) und addMethods( )

Über Class steht die Methode create() zum Erstellen einer JavaScript-Klasse bereit, die – wenn aufgerufen – eine eigene Initialisierungsmethode mit Namen initialize()

10 Also im Grunde klassisches JavaScript-Prototyping mit einer eigenständigen Syntax.

280

5.4 Class zum Erstellen von Klassen

abfeuert.11 Damit können Sie beispielsweise Subklassen durch das Überschreiben des Konstruktors der Elternklasse bilden. Die zweite Methode von Class ist addMethods(). Damit fügen Sie – wie der Name schon deutlich macht – Methoden einer existierenden Klasse hinzu, die mit Class.create() definiert wurde. Sie können damit neue Instanzmethoden einer Klasse hinzufügen oder existierende Methoden überschreiben, nachdem die Klasse definiert wurde. Hinweis Der Einsatz von Class und der beiden enthaltenen Methoden ist im Grunde nur dann verständlich, wenn Sie mindestens die Technik des Prototyping in JavaScript beherrschen und/oder – noch besser – mit echter objektorientierter Programmierung (vor allen Dingen den Mechanismen der Vererbung, Konstruktoren, Überschreiben, Polymorphie etc.) vertraut sind. Hier sehen Sie sehr deutlich, dass sich Prototype im Wesentlichen an JavaScript-Experten und Umsteiger von mächtigen objektorientierten Sprachen wie Java, C++ oder C# wendet.

5.4.2

$super( )

In der Vererbung greift man nun auch gelegentlich aus einer Subklasse auf die Superklasse zu (oder genauer – in der Regel auf den Konstruktor der Superklasse). In Prototype steht Ihnen mit $super() die Möglichkeit zur Verfügung, so einen Zugriff zu notieren. Das braucht man meist dann, wenn man eine Methode der Superklasse überschreiben will. Hinweis Ein Beispiel sehen Sie im übernächsten Abschnitt auf Seite 282.

5.4.3

Die Vererbungskette im Prototyping

Neu in einer Klasse bzw. einem Objekt hinzugefügte Methoden breiten sich in der Vererbungskette aus. Wenn eine Klasse mit neuen Methoden also Subklassen besitzt, werden diese Subklassen die neuen Methoden ebenfalls zur Verfügung haben – selbst im Kontext von $super()-Aufrufen. Die neuen Methoden werden ebenso in allen Instanzen der Klasse und allen Subklassen zur Verfügung stehen, selbst wenn diese bereits instanziert wurden! 11 Diese kann in create() deklarativ zum Zuweisen von Werten verwendet werden.

281

5 Prototype + Scriptaculous

Hinweis Dieses Verhalten ist keine Besonderheit des Framework Prototype, sondern elementares Verhalten der JavaScript-Technik Prototyping. Mit anderen Worten – das gilt auch, wenn Sie ohne das Framework mit reinem JavaScript Prototyping betreiben.

5.4.4

Ein Beispiel mit create( ) und addMethods( )

Betrachten wir ein vollständiges Beispiel (proto_class.html): Listing 5.16: Verwendung von Class in Prototype 01 03 04 05 <meta http-equiv="Content-Type" 06 content="text/html; charset=iso-8859-1" /> 07 08 <script type = "text/javascript" 09 src="prototype-1.6.0.2.js"> 10 11 12

OOP mit Prototype

13

14 15 <script type = "text/javascript"> 16 var Kind = Class.create({ 17 initialize: function(name, text) { 18 this.name = name; 19 this.text = text; 20 }, 21 rede: function() { 22 $('ausgabe').innerHTML += this.name + " sagt: " + 23 this.text + "!
"; 24 } 25 }); 26 // Erstellen einer Subklasse von Kind 27 var Junge = Class.create(Kind, { 28 initialize: function($super, name, text) { 29 $super(name, text); // Zugriff auf Superklasse 30 } 31 }); 32 // Erstellen einer Instanz vom Typ Junge

282

5.4 Class zum Erstellen von Klassen

33 var soehnlein = new Junge("Felix", "Papa"); 34 // Überschreiben von Junge.rede (mit einem Aufruf von 35 // super(), um zuerst die bis dato in der Superklasse 36 // definierte Methode rede() aufzurufen 37 Junge.addMethods({ 38 rede: function($super) { 39 $super(); 40 $('ausgabe').innerHTML += 41 "Spielst Du mit Fussball?!
"; 42 } 43 }); 44 // Aufruf der überschriebenen Methode 45 soehnlein.rede(); 46 // Hinzufügen einer neuen Methode zur Subklasse 47 Junge.addMethods({ 48 kicken: function() { 49 $('ausgabe').innerHTML +="Toooooooooooooor"; 50 } 51 }); 52 // Verwenden der neuen Methode auf einer Instanz, 53 // die schon vor dem Hinzufügen der Methode erzeugt wurde 54 soehnlein.kicken(); 55 56

Die Webseite enthält einen einfachen DIV-Ausgabebereich mit der ID ausgabe, in dem verschiedene Meldungen der Methoden angezeigt werden sollen (Zeile 13

). Um diesen Bereich mit $('ausgabe') ansprechen zu können, wird die eigentliche JavaScript-Funktionalität des Beispiels nach dem Körper der Webseite notiert.12 In den Zeilen 16 bis 26 wird eine Klasse mit Class.create() erzeugt: Listing 5.17: Erzeugen der Klasse Kind var Kind = Class.create({ initialize: function(name, text) { this.name = name; this.text = text; }, rede: function() { $('ausgabe').innerHTML += this.name + " sagt: " + this.text + "!
"; } }); 12 Die klassische Vorgehensweise für das übliche Problem mit dem Aufbau des DOM, wenn auf ein Element der Webseite zugegriffen werden soll, das der Browser im DOM noch nicht richtig angelegt hat, weil der Zugriff zu früh erfolgt.

283

5 Prototype + Scriptaculous

Sie sehen zuerst die Initialisierungsmethode, in der zwei Eigenschaften name und text mit den Übergabewerten initialisiert werden, wie sie beim späteren Aufruf des Konstruktors angegeben werden. Danach finden Sie die Implementierung einer Methode mit Namen rede(). In dieser werden die Übergabewerte verwendet, um im Ausgabebereich der Webseite angezeigt zu werden. Allgemein könnte man sich nun recht offensichtlich die Subklassen Junge und Maedchen vorstellen, wobei wir hier nur eine Subklasse realisieren. Das konkrete Erstellen einer solchen Subklasse von Kind mit Namen Junge sehen Sie in den Zeilen 27 bis 31: Listing 5.18: Eine Subklasse von Kind var Junge = Class.create(Kind, { initialize: function($super, name, text) { $super(name, text); // Zugriff auf Superklasse } });

In Class.create() wird als erster Parameter die Superklasse Kind notiert. Der zweite Parameter beinhaltet die konkrete Spezialisierung. Im Wesentlichen erfolgt in dem Beispiel ein Zugriff auf den Konstruktor der Superklasse über $super() und es werden diesem Aufruf die Übergabewerte übergeben, die der Konstruktor der Subklasse erhält. Die Werte werden quasi durchgereicht. Das Erstellen eines Objekts vom Typ der Subklasse Junge sehen Sie in Zeile 33: var soehnlein = new Junge("Felix", "Papa");

Bevor wir diese Instanz konkret verwenden, überschreiben wir die Methode Junge.rede() und verwenden dabei einen Aufruf von $super(), um zuerst die in der Superklasse definierte Methode Kind.rede() aufzurufen. Das sehen Sie in den Zeilen 37 bis 43: Listing 5.19: Überschreiben einer Methode Junge.addMethods({ rede: function($super) { $super(); $('ausgabe').innerHTML += "Spielst Du mit Fussball?!
"; } });

In der Zeile 45 sehen Sie den Aufruf der überschriebenen Methode: soehnlein.rede();

284

5.4 Class zum Erstellen von Klassen

Dieser erzeugt die folgende Ausgabe: Felix sagt: Papa! Spielst Du mit Fussball?! Der erste Satz in der Ausgabe stammt aus der Methode der Superklasse, die über $super(); in Zeile 39 aufgerufen wird, und der zweite Satz kommt konkret aus der überschriebenen Methode. In den Zeilen 47 bis 51 sehen Sie das Hinzufügen einer neuen Methode zur Subklasse Junge: Listing 5.20: Hinzufügen einer neuen Methode Junge.addMethods({ kicken: function() { $('ausgabe').innerHTML +="Toooooooooooooor"; } });

In Zeile 54 verwenden wir die neue Methode über soehnlein.kicken(); auf einer Instanz, die schon vor dem Hinzufügen der Methode erzeugt wurde.

Abbildung 5.10: Die Ausgabe des Beispiels

285

5 Prototype + Scriptaculous

5.5

Date

Hinter Date verbirgt sich in Prototype nur eine Methode mit Namen toJSON(), die mit der Version 1.5.1 eingeführt wurde. Damit können Sie ein Datum in einen JSONString konvertieren, der dem ISO-Format entspricht. Beispiel: Listing 5.21: Anwendung von toJSON() auf ein Datumsobjekt new Date(1963, 3, 17, 19).toJSON();

Das resultierende JSON-Ergebnis sieht so aus: Listing 5.22: Der resultierende JSON-Datumsstring "1963-04-17T19:00:00"'

5.6

Element

Das Objekt Element stellt in Prototype die elementaren Methoden zum Umgang mit dem DOM zur Verfügung. Damit ist es für viele Entwickler sicher einer der zentralen Teile des gesamten Frameworks. Viele der Methoden, die über dieses Objekt zur Verfügung stehen, lassen sich auch mit den Shortcuts von Prototype kompakter schreiben, aber im Grunde sind die beiden Wege gleichwertig. Beispiel: Listing 5.23: Zwei gleichwertige Schreibweisen zum Zuweisen einer Klasse rot zum Element mit der ID ausgabe $('ausgabe').addClassName('rot'); Element.toggleClassName('ausgabe', 'rot');

5.6.1

Verketten von DOM-Methoden

Die meisten Methoden von Element (und auch die äquivalenten Shortcuts) geben das Element des DOM zurück, auf das sie angewendet werden. Die Methoden können daher meist verkettet werden. Dies eröffnet viele Möglichkeiten für eine sehr kompakte Schreibweise bei DOM-Manipulationen.

286

5.6 Element

Beispiel: Listing 5.24: Verketten von DOM-Methoden $('ausgabe').addClassName('rot').update( 'Neuer Text!').setStyle({opacity: 0.5});

Betrachten wir das in einem vollständigen Beispiel.

Eine Verkettung von Element-Methoden zur Ergänzung einer Flash-Animation Das Beispiel zeigt das Verketten von Element-Methoden, um damit eine Flash-Animation mit ergänzenden Informationen zu versorgen (protoVerketten.html): Listing 5.25: Verketten von DOM-Methoden in einem vollständigen Beispiel 01 03 04 05 <meta http-equiv="Content-Type" 06 content="text/html; charset=iso-8859-1" /> 07 08 <style> 09 #yaoti_movie { 10 position: absolute; top: -15px; left: 240px; 11 width: 400px; height: 400px; z-index: 10000; 12 } 13 #ausgabe { 14 position: absolute; top: 75px; left: 240px; 15 width: 400px; height: 400px; 16 } 17 .blau{ 18 color:red; background:blue; 19 font-size:24px; text-align:center; 20 } 21 22 <script type = "text/javascript" 23 src="prototype-1.6.0.2.js"> 24 25 26

Verketten von DOM-Methoden mit Prototype

27

28

30 31 <script type = "text/javascript"> 32 // Parameter für die Flash-Animation 33 var UID = "1";

287

5 Prototype + Scriptaculous

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

var POSX = 50; var POSY = 50; var SHOW = "always"; var AUTO_PLAY = "on"; // Funktion zum Abspielen der Flash-Animation function changeDIV() { // Flash-Video var video= 'http://yaoti.eu/showroom/steyer/ 91-DE8000-5(A)212x272.flv'; var contenedor = document.getElementById("yaoti_movie"); var object = ''; contenedor.innerHTML = object; contenedor.style.display='block'; } function info(){ $('ausgabe').addClassName('blau').update( 'Dies ist ein Flash-Avatar!').setStyle({opacity: 0.9}); } function infoweg(){ $('ausgabe').update('').setStyle({opacity: 0.0}); } changeDIV();

In dem Beispiel sehen Sie eine Flash-Animation, zu der mit einem überlagernden DIV-Element (Zeile 27:

) Zusatzinformationen angezeigt werden sollen, wenn der Mauszeiger auf den Bereich der Flash-Animation bewegt wird.

288

5.6 Element

Dazu werden mit den Eventhandlern onmouseover und onmouseout in den Zeilen 28 und 29 beim DIV-Element für den Anzeigebereich der Flash-Animation zwei Funktionen info() und infoweg() aufgerufen.

Abbildung 5.11: Der Mauszeiger ist nicht im Bereich der Flash-Animation. Im Quellcode werden zuerst die Flash-Animation und das DIV-Element mit CSS positioniert und in der Breite und Höhe festgelegt. Das sehen Sie von Zeile 9 bis 16: Listing 5.26: Die Formatierungen für die beiden Elemente in der Webseite #yaoti_movie { position: absolute; top: -15px; left: 240px; width: 400px; height: 400px; z-index: 10000; } #ausgabe { position: absolute; top: 75px; left: 240px; width: 400px; height: 400px; }

Die Klasse blau, die Sie in den Zeilen 17 bis 20 sehen, soll über eine DOM-Manipulation per Prototype direkt zugewiesen werden.

289

5 Prototype + Scriptaculous

Im Skriptbereich, der wieder hinter dem Körper der Webseite notiert ist, sehen Sie zunächst die spezifischen Anweisungen für die Flash-Animation, die hier keine Rolle spielen. Für uns von Interesse ist die Funktion info(), die Sie in den Zeilen 55 bis 58 sehen. Hier wird mit $('ausgabe').addClassName('blau').update('Dies ist ein Flash-Avatar!').setStyle({opacity: 0.9}); eine Verkettung von DOM-Manipulationen vorgenommen. Zuerst wird das Element mit der ID ausgabe selektiert. Dem zurückgegebenen Element wird eine CSS-Klasse hinzugefügt und dann wird auf dem resultierenden DOM-Element der Inhalt geändert. Anschließend setzt diese eine Zeile auch noch die Transparenz des Elements. Auch die zweite Funktion infoweg() manipuliert entsprechend den DOM, indem der Text des DIV-Elements gelöscht und die Transparenz auf vollkommen durchsichtig gesetzt wird (Zeile 60 – $('ausgabe').update('').setStyle({opacity: 0.0});).

Abbildung 5.12: Wenn sich der Mauszeiger im Bereich der Flash-Animation befindet, wird ein DIV-Element sichtbar gemacht und mit erklärendem Text gefüllt.

290

5.6 Element

5.6.2

Element als Konstruktor

Das Objekt Element kann auch zur bequemen Erstellung von neuen Elementen verwendet werden. Dies erfolgt formal so, wenn Sie nicht den traditionellen Weg über built-in-DOM-Methoden gehen wollen: Listing 5.27: Schema zur Erstellung eines neuen Elements mit Element new Element(tagName[, Attribute])

So eine Anweisung gibt ein erweitertes Element zurück. Danach können Sie beispielsweise Element.update() aufrufen, um den Inhalt des Elements zu setzen. Der optionale Satz an Attributen bzw. Wertepaaren kann als zweiter Parameter angegeben werden. Das neu erstellte Element erhält diese Attribute bzw. Wertepaare über Element.writeAttribute(). Schauen wir uns das Verfahren genauer an, indem der traditionelle Weg dieser neueren Variante gegenübergestellt wird: Listing 5.28: So wäre der traditionelle Weg var a = document.createElement('a'); a.setAttribute('class', 'abc'); a.setAttribute('href', '/index.html'); a.appendChild(document.createTextNode("Neue Seite"));

Listing 5.29: Der neue Weg var a = new Element('a', { 'class': 'abc', href: '/index.html' }).update("Neue Seite");

5.6.3

Die Methoden zum DOM-Zugriff und Element.Methods

Methoden zur Manipulation von Bestandteilen einer Webseite zählen wie gesagt zu den Highlights von Prototype. Wir haben sie in dem Kapitel auch schon vielfältig verwendet. Diese Methoden werden von dem Framework auf verschiedene Weisen verfügbar gemacht. Element.Methods ist dabei ein internes Objekt zum Zugriff auf DOMElemente über Methoden. Über dieses interne Objekt sollen die DOM-Elemente jedoch nicht direkt angesprochen werden. Stattdessen greift man – wie bisher schon angewandt – entweder über $() oder das Objekt Element auf die Methoden zu. Und viele Methoden liefern als Rückgabewert ein Element, das Sie im Skript weiterverwenden können.

291

5 Prototype + Scriptaculous

Hinweis Mehrere der Methoden zum DOM-Zugriff orientieren sich sowohl im Namen als auch in der Funktionalität an Pfadangaben in einem XMLDokument beziehungsweise einem allgemein baumartig orientierten Dokument. Sie finden dementsprechend eine hohe Ähnlichkeit mit XPath-Ausdrücken.

Eines der wichtigsten Stilmittel von DHTML ist das Löschen und Einfügen von Elementen in einer Webseite. Dazu gibt es verschiedene Verfahren, die sich über die Zeit entwickelt haben. Eines der elegantesten Verfahren ist sicher die Manipulation des DOM selbst, indem im DOM Elemente hinzugefügt oder weggenommen werden. Im Grunde ist das Verfahren streng logisch. Sie selektieren ein Element und löschen es aus dem DOM. Oder Sie selektieren ein Element und fügen danach oder davor ein Element hinzu. So weit die Theorie! Wenn Sie jedoch mit den klassischen DOM-Methoden wie append(), appendChild() oder createElement() arbeiten, werden Sie auf eine Vielzahl von Problemen stoßen, die diese DOM-Manipulationen zu einem reinen Glücksspiel werden lassen – zumindest dann, wenn Sie browserübergreifend arbeiten wollen. Wie schon an verschiedenen Stellen erwähnt, ist die interne Abbildung des DOM in verschiedenen Browsern und Browser-Versionen ganz und gar nicht konsistent. Prototype verspricht mit seinen getesteten Standardmethoden diese Browser-Problematiken zu beseitigen oder zumindest zu minimieren. Achtung Wie schon eingangs erwähnt, gelingt es leider auch Prototype nicht, diese Inkompatibilitäten zwischen den Browsern vollkommen zu beseitigen. Wie das dritte Beispiel in diesem Abschnitt zu den Methoden für die Verwandtschaftsbeziehungen zeigen wird, gibt es auch in diesen Methoden von Prototype teilweise Probleme. Mit anderen Worten – obwohl Prototype angeblich voll kompatibel zu den am Anfang des Kapitels spezifizierten Browsern sein soll, gibt es spezielle Situationen, in denen immer noch Probleme auftauchen. Insbesondere der Internet Explorer scheint einfach nicht in den Griff zu bekommen zu sein. Es macht auch wenig Sinn, die Funktionalität einer bestimmten Methode für alle relevanten Browser zu testen und zu dokumentieren, ob sie geht oder nicht. Das kann sich bei der nächsten Version eines Frameworks oder Toolkits oder auch bei einem der vielen Miniupgrades eines Browsers wieder ändern. Und so gilt auch beim Einsatz von ausgereiften Frameworks und Toolkits die immer wieder gepredigte Empfehlung, dass Sie in jedem Fall Ihre Webapplikation ausführlich in allen relevanten Browsern testen müssen.

292

5.6 Element

Für die Methoden zum Umgang mit Elementen in der Webseite sehen Sie nachfolgend eine kleine Auswahl. Beachten Sie, dass die Parameter der Methoden oft optional sind und die Methoden vielfach ohne Parameter einfach auf das vorangestellte Elementobjekt wirken: Methode

Beschreibung

addClassName(element, className) Über diese Methode erfolgt das Hinzufügen einer CSS-

Klasse (zweiter Parameter) zu einem Element, das als erster Parameter angegeben wird. addMethods([methods])

und addMethods(tagName, methods)

Hiermit erfolgt im Rahmen von Prototyping das Hinzufügen von Methoden zu Klassen beziehungsweise bereits erzeugten Instanzen einer Klasse.

ancestors(element)

Diese Methode liefert ein Array mit allen Vorfahren des Elements.

childElements(element)

Bei Verwendung dieser Methode erhalten Sie ein Array mit allen Kindelementen des Elements.

getDimensions(element)

Die Methode ermittelt die Breite und Höhe eines Elements und liefert ein Schlüssel/Werte-Paar.

getStyle(element, property)

Die Methode liefert als Rückgabewert den Wert der CSSEigenschaft des spezifizierten Elements. Das zweite Argument property kann in Form von reinem CSS oder der JavaScript-Variante verwendet werden.

hide(element)

Der Aufruf dieser Methode versteckt ein Element und liefert es als Rückgabewert.

identify(element)

Mit dieser Methode erhalten Sie die ID von einem Element, wenn diese existiert, oder es wird eine eindeutige, automatisch generierte ID gesetzt.

insert(element, { position: content })

Mit dieser Methode können Sie Inhalt vor, nach, über oder unter einem Element einfügen. Das wird mit dem zweiten Argument position spezifiziert. Wenn das zweite Argument der Inhalt selbst ist (content), wird dieser an das Element angehängt.

und insert(element, content) match(element, selector)

Der Aufruf dieser Methode überprüft, ob ein Element mit den vorgegebenen CSS-Selektoren übereinstimmt.

next(element[, cssRule][, index = 0])

Die Methode liefert als Rückgabewert das folgende Geschwisterelement, das mit den angegebenen CSS-Regeln oder dem Index übereinstimmt. Wenn keine CSS-Regeln angegeben werden, liefert die Methode alle folgenden Geschwisterelemente. Wenn kein folgendes Geschwisterelement mit den spezifizierten Kriterien übereinstimmt, wird undefined als Rückgabewert zurückgegeben.

Tabelle 5.1: Wichtige Element-Methoden

293

5 Prototype + Scriptaculous

Methode

Beschreibung

nextSiblings(element)

Die Methode liefert als Rückgabewert alle folgenden Geschwisterelemente als Array.

previous(element[, cssRule][, index = 0])

Die Methode gibt als Rückgabewert das vorhergehende Geschwisterelement zurück, das mit den angegebenen CSSRegeln oder dem Index übereinstimmt. Wenn keine CSSRegeln angegeben werden, liefert die Methode alle vorhergehenden Geschwisterelemente. Wenn kein vorhergehendes Geschwisterelement mit den spezifizierten Kriterien übereinstimmt, erscheint undefined als Rückgabewert.

readAttribute(element, attribute)

Die Methode liefert als Rückgabewert den Wert eines Elementattributs oder null, wenn das als Parameter angegebene Attribut nicht spezifiziert ist.

remove(element)

Über diese Methode können Sie ein Element komplett aus dem Dokument und damit dem DOM entfernen. Die Methode liefert Ihnen allerdings – wie die vielen anderen Methoden hier – das Element als Rückgabewert und damit können Sie es im Skript immer noch verwenden.

removeClassName(element, className)

Über diese Methode entfernen Sie den CSS-Klassennamen von einem Element.

replace(element[, html])

Die Methode ersetzt ein Element durch den Inhalt des zweiten Parameters, der in Form von HTML spezifiziert wird. Auch diese Methode liefert als Rückgabewert das entfernte Element, das Ihnen damit weiter im Skript zur Verfügung steht.

select(element, selector...)

Die Methode nimmt eine gewisse Anzahl an CSS-Selektoren (Strings) und liefert als Rückgabewert ein Array von Nachfolgern des Elements, die allesamt mit den Selektoren übereinstimmen.

setStyle(element, styles)

Mit dieser Methode können Sie die CSS-Stileigenschaften eines Elements modifizieren. Die Stilinformationen werden als ein Hash von Eigenschaft/Werte-Paaren übergeben, in dem die Eigenschaften in ihrer üblichen Form spezifiziert werden.

show(element)

Über diese Methode können Sie ein Element anzeigen, das beispielsweise mit hide() vorher unsichtbar gemacht wurde.

toggle(element)

Diese Methode wechselt die Sichtbarkeit eines Elements über die Manipulation der CSS-Eigenschaft display.

toggleClassName(element, className)

Mit dieser Methode können Sie den CSS-Klassennamen eines Elements wechseln.

update(element[, newContent])

Diese Methode ersetzt den Inhalt eines Elements durch einen neuen Inhalt, der als zweiter Parameter angegeben wird.

Tabelle 5.1: Wichtige Element-Methoden (Forts.)

294

5.6 Element

Methode

Beschreibung

visible(element)

Die Methode liefert als Rückgabewert einen Boolean-Indikator, der anzeigt, ob ein Element sichtbar ist oder nicht. Ein Element ist z.B. dann nicht sichtbar, wenn sein style-Attribut auf display: none gesetzt ist.

writeAttribute(element, attribute[, value = true])

Erstellen von Attributen samt zugeordneten Werten

und writeAttribute(element, attributes)

Tabelle 5.1: Wichtige Element-Methoden (Forts.)

5.6.4

Methoden in der Praxis

Schauen wir uns ein paar Beispiele an, in denen diese Methoden zur Manipulation der Elemente einer Webseite in der Praxis gezeigt werden. Beachten Sie, dass wir verschiedene andere Methoden aus diesem Bereich auch schon an anderer Stelle in dem Kapitel eingesetzt haben.

Löschen und Einfügen von Elementen im DOM Das nachfolgende Beispiel zeigt ein ganz einfaches13 Spiel, bei dem ein Element in der Webseite an der einen Stelle weggenommen und an einer anderen Stelle unmittelbar wieder eingefügt wird. In dem Spiel sehen Sie eine Tabelle mit sechs Zellen (3 Spalten und 2 Zeilen). In immer genau einer Zelle wird ein Bild angezeigt. Klickt ein Spieler auf die Tabelle, wird das Bild an der aktuellen Stelle mit remove() weggenommen und in eine zufällig bestimmte andere Zelle mit insert() eingefügt. In Prototype ist diese Aktion zuverlässig in verschiedenen Browsern und dennoch nur ein Einzeiler. Wer so etwas bereits mit klassischen DOM-Methoden programmiert hat, wird die Erleichterung erkennen (protomethoden1.html): Listing 5.30: Löschen und Einfügen von Elementen in eine Webseite 01 03 04 05 <meta http-equiv="Content-Type" 06 content="text/html; charset=iso-8859-1" /> 07 08 <style type="text/css"> 13 Natürlich können Sie sowohl die Logik des Spiels als auch den Komfort noch beliebig verbessern. Die Spiellogik soll bloß eine halbwegs realistische Anwendung des Wegnehmens sowie Hinzufügens eines Elements aus einer Webseite zeigen.

295

5 Prototype + Scriptaculous

09 table { 10 border:solid; border-width:1pt; text-align:center; 11 } 12 td { 13 width:220px; height:160px; border:solid; 14 } 15 16 <script type = "text/javascript" 17 src="prototype-1.6.0.2.js"> 18 <script type = "text/javascript"> 19 // Funktion zum Wegnehmen und Einblenden des Bildes 20 function shuffle(){ 21 var zufall = Math.round(Math.random() * 60); 22 var id; 23 if(zufall < 10) id="t1"; 24 else if(zufall < 20) id="t2"; 25 else if(zufall < 30) id="t3"; 26 else if(zufall < 40) id="t4"; 27 else if(zufall < 50) id="t5"; 28 else id="t6"; 29 // Entfernen eines Elements und 30 // anschließendes Einfügen an anderer Stelle 31 $(id).insert($("bild").remove()); 32 } 33 34 35 36

Wo taucht das Bild nach dem Klick auf?

37 38 39 42 43 44 45 46

40   41

47 48

Im Grunde müssen Sie nur Zeile 31 ($(id).insert($("bild").remove();) betrachten. Die Variable id, die über einen einfachen Zufallsmechanismus mit JavaScript bestimmt wird, entspricht der ID einer der sechs Tabellenzellen.

296

5.6 Element

Abbildung 5.13: Nach einem Anwenderklick befindet sich das Bild in der mittleren oberen Zelle.

Abbildung 5.14: Nach einem weiteren Anwenderklick wird das Bild in einer anderen Zelle angezeigt.

297

5 Prototype + Scriptaculous

Die Funktion zum Löschen und Einfügen des Bilds wird mit onclick auf der Tabelle ausgelöst (Zeile 37). Hinweis Der nicht weg zu optimierende Leerraum   soll nur den Tabellenaufbau stabil halten und hat sonst keine Bedeutung.

Es ist ganz spannend, Firebug zu bemühen und nachzusehen, ob das Bild bei jedem Aufruf der Funktion shuffle() wirklich aus dem DOM gelöscht oder nur unsichtbar gemacht wird. Aber Firebug beweist, dass das Element wirklich im DOM an der einen Stelle weggenommen und an der anderen Stelle eingefügt wird.

Abbildung 5.15: Firebug zeigt, dass das Element tatsächlich im DOM an der einen Stelle weggenommen und an einer anderen Stelle im DOM eingefügt wurde.

298

5.6 Element

Wegblenden von Elementen Das letzte Beispiel hat gezeigt, wie man Elemente im DOM wegnehmen und einfügen kann. Das folgende Beispiel soll dagegen nur die Sichtbarkeit eines Elements verändern. Dabei wird das Element nicht aus dem DOM entfernt, sondern nur dessen CSSEigenschaft display für die Sichtbarkeit umgeschaltet. Wir verwenden in dem Beispiel die Methode toggle() (protomethoden2.html): Listing 5.31: Wegblenden und erneutes Anzeigen von Elementen 01 03 04 05 <meta http-equiv="Content-Type" 06 content="text/html; charset=iso-8859-1" /> 07 08 <script type = "text/javascript" 09 src="prototype-1.6.0.2.js"> 10 <script type = "text/javascript"> 11 function anzeige(id){ 12 $(id).toggle(); 13 } 14 15 16 17

Verstecken von Elementen

18 19 20 23 26 29 30 31 34 37

299

5 Prototype + Scriptaculous

40 41

22	25	28
33	36	39

42 43

Auch in diesem Beispiel haben Sie wieder eine Tabelle mit sechs Zellen. Dieses Mal befindet sich allerdings in jeder Zelle ein Bild. Die Eventhandler zum Wegblenden beziehungsweise Einblenden des Bilds in einer Zelle sind bei dem umgebenden Tag notiert. Sowohl onmouseover als auch onmouseout rufen die gleiche Funktion anzeige() auf. Diese bekommt als Parameter die ID des Bilds übergeben, dessen Sichtbarkeit umgeschaltet werden soll. In der Funktion wird in Zeile 12 mit $(id).toggle(); die Sichtbarkeit des übergebenen Elements umgeschaltet. Dies erfolgt jeweils bei Erreichen des Zellenbereichs durch den Mauszeiger sowie beim Verlassen. Ist das Element sichtbar, wird es unsichtbar gemacht. Ist es unsichtbar, wird es sichtbar gesetzt. Auch hier sollten wir Firebug zurate ziehen und nachsehen, ob ein Element aus dem DOM gelöscht wird. Und in diesem Fall beweist Firebug, dass dem nicht so ist.

Abbildung 5.16: Obwohl das erste Bild nicht sichtbar ist, ist es im DOM noch enthalten.

300

5.6 Element

Stattdessen wird display auf den Wert none gesetzt, was man in Firebug ebenso sehr gut erkennen kann.

Abbildung 5.17: Mit toggle() wird die CSS-Eigenschaft display dynamisch umgeschaltet.

Ein Beispiel zu Verwandtschaftsbeziehungen Das nachfolgende Beispiel zeigt verschiedene Methoden, die im Zusammenhang mit Verwandtschaftsbeziehungen zwischen Elementen eine Rolle spielen, also Geschwister, Kinder etc. Dazu sehen Sie ebenso noch, wie man Elemente mit hide() und show() verstecken und wieder einblenden kann (protomethoden3.html): Listing 5.32: Methoden zur Bestimmung von Elementen mit Verwandtschaftsbeziehungen 01 03 04 05 <meta http-equiv="Content-Type" 06 content="text/html; charset=iso-8859-1" /> 07 08 <script type = "text/javascript" 09 src="prototype-1.6.0.2.js"> 10 <script type = "text/javascript">

301

5 Prototype + Scriptaculous

11 12 13 14 15 16 17 18 19 20 21 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

302

// Alle Vorfahren von einem Element function vorfahren(id){ // Leeren des Ausgabebereichs für diese Funktion $('ausgabe1').innerHTML = ""; // Ausgabebereichs für diese Funktion einblenden $('ausgabe1').show(); // Bestimmen aller Vorfahren von dem Element, das // mit dem Parameter übergeben wird – ein Array vorfahr = $(id).ancestors(); // Iteration über das Vorfahrendatenfeld for(i = 0; i < vorfahr.length; i++) { // Ausgabe Vorfahrelement $('ausgabe1').innerHTML += vorfahr[i] + "
"; // Ausgabe Vorfahr-ID $('ausgabe1').innerHTML += vorfahr[i].identify() + "

---

"; } } // Geschwister von einem Element function bruder(id){ // Leeren des Ausgabebereichs für diese Funktion $('ausgabe2').innerHTML = ""; // Ausgabebereichs für diese Funktion einblenden $('ausgabe2').show(); if (id == "kid1") // Für das Element mit ID kid1 alle nachfolgenden // Geschwisterelement angeben $('ausgabe2').innerHTML += $(id).nextSiblings(this) + "

---

"; else { // sonst die ID des vorherigen Geschwisters $('ausgabe2').innerHTML += $(id).previous(this).identify()+ "
"; // und den Elementinhalt des vorherigen Geschwisters $('ausgabe2').innerHTML += $(id).previous(this).innerHTML + "

---

"; } } // Bestimmen aller Kindelemente function kinder(id){ // Ausgabebereich für diese Funktion einblenden $('ausgabe3').show(); // Array mit allen Kindelementen anzeigen $('ausgabe3').innerHTML = $(id).childElements(this) + "
"; // Iteration über das Array mit allen Kindelementen for(i = 0; i < $(id).childElements(this).length; i++) { // ID vom Kindelement $('ausgabe3').innerHTML +=

5.6 Element

60 $(id).childElements(this)[i].identify() + "
"; 61 // Inhalt vom Kindelement 62 $('ausgabe3').innerHTML += 63 $(id).childElements(this)[i].innerHTML + "

---

"; 64 } 65 } 66 // Verstecken aller Ausgabebereiche 67 function verstecke(){ 68 $('ausgabe1').hide(); 69 $('ausgabe2').hide(); 70 $('ausgabe3').hide(); 71 } 72 73 74 75

Verwandschaftsbeziehungen

76

Ralph 77

Florian

79

Felix

81

82

84

85

87

89

90 91

Abbildung 5.18: Die Webseite unmittelbar nach dem Laden

303

5 Prototype + Scriptaculous

Betrachten wir zunächst die grundsätzliche Struktur der Webseite, auf der wir mit den Prototype-Methoden zur Selektion von Elementen operieren wollen. Im Element befinden sich ein -Element und darin dann die Elemente, die die Webseite ausmachen. Diese beiden Elemente gehören immer zu den Vorfahren aller Elemente in der Webseite und werden bei entsprechenden Methoden natürlich berücksichtigt. Der Webseite im Beispiel liegt für den Aufruf der Methoden zum Zugriff auf verwandte Elemente die folgende Struktur zugrunde: Listing 5.33: Die grundsätzliche Struktur der interessierenden Elemente

Ralph

Florian

Felix

Das DIV-Element mit der ID papa hat zwei direkte Kindelemente (das DIV-Element mit der ID kid1 und das DIV-Element mit der ID kid2), die beide in diesem DIV-Element enthalten sind. Umgekehrt ist das DIV-Element mit der ID papa für beide enthaltenen DIV-Elemente ein Vorfahre. Stattdessen schauen wir uns aber an, wie die beiden inneren DIV-Elemente in Beziehung zueinander stehen – sie sind Geschwister. Nun wollen wir mit verschiedenen Methoden Ausgaben zu den verwandten Elementen vornehmen. Dazu gibt es zusätzlich in der Webseite drei Ausgabebereiche für diese Informationen. Beim Laden der Webseite wird aber zuerst mit onload="verstecke()" eine Funktion zum Verstecken aller dieser Ausgabebereiche aufgerufen. Dabei sehen Sie die Methode hide() im Einsatz (Zeile 67 bis 71): Listing 5.34: Verstecken aller Ausgabebereiche function verstecke(){ $('ausgabe1').hide(); $('ausgabe2').hide(); $('ausgabe3').hide(); }

In Zeile 76 sehen Sie, dass beim DIV-Element mit der ID papa mit onclick="kinder(this)" die Funktion kinder() aufgerufen wird. Diese zeigt spezifische Informationen über die Kindelemente dieses Elements an.

304

5.6 Element

Abbildung 5.19: Informationen zu den Kindelementen des DIV-Elements mit der ID papa werden bei einem Klick auf das DIV-Element mit der ID papa angezeigt. Die Funktion kinder() finden Sie von Zeile 49 bis 65. In der Funktion zum Bestimmen aller Kindelemente werden verschiedene Prototype-Methoden verwendet. In Zeile 52 wird zunächst der Ausgabebereich für diese Funktion eingeblendet. Dazu kommt die Methode show() zum Einsatz ($('ausgabe3').show();). Die Methode childElements() liefert danach ein Array mit allen Kindelementen. Dieses wird über die Anweisungen in Zeile 54 und 55 angezeigt ($('ausgabe3').innerHTML = $(id).childElements(this) + "
";). In der Ausgabe erkennen Sie durch die eckigen Klammern, dass es sich um ein Array handelt. Im nächsten Schritt der Funktion erfolgt die Iteration über das Array mit allen Kindelementen. Dazu nutzen wir beim Abbruchkriterium der for-Schleife in 57 aus, dass childElements() ein Array liefert und damit natürlich die Eigenschaft length verfügbar ist (for(i = 0; i < $(id).childElements(this).length; i++)). In Zeile 59 bzw. 60 bestimmen wir mit der Methode identify() die ID des jeweiligen Kindelements ($('ausgabe3').innerHTML += $(id).childElements(this)[i].identify() + "
";). Beachten Sie dazu die Ausgabe. Bei allen Elementen, für die keine ID vorhanden ist, wird eine autogenerierte ID gesetzt, die mit anonymous_element_ beginnt und dann mit einer Zählvariablen eindeutig gemacht wird. Tipp Sie können auch hier Firebug verwenden und nachsehen, ob die ID dem Element im DOM tatsächlich zugewiesen wird.

305

5 Prototype + Scriptaculous

In Zeile 62 und 63 wird mit innerHTML der Inhalt des Kindelements ausgegeben ($('ausgabe3').innerHTML += $(id).childElements(this)[i].innerHTML + "

---

";). Die Funktion bruder() wird jeweils ausgelöst, wenn der Mauszeiger den Bereich eines der beiden DIV-Elemente erreicht. Die Ausgabe erfolgt in einem eigenen Anzeigebereich. Die Funktion bruder(), die in den Zeilen 29 bis 48 zu finden ist, arbeitet im Grunde sehr ähnlich wie die Funktion kinder(). Nur kommen hier die Methoden nextSiblings() und previous() zum Einsatz, um auf die jeweiligen Geschwister eines Elements zuzugreifen. Für das erste Element mit ID kid1 betrachten wir alle nachfolgenden Geschwisterelemente und für das zweite Element mit der ID kid2 das vorherige Geschwisterelement.

Abbildung 5.20: Auf das Elternelement wurde geklickt und der Mauszeiger hat gerade den Container mit der ID kid2 verlassen.

306

5.6 Element

Nun werden Sie allerdings beim Testen des Beispiels erkennen, dass die Informationen (die ID und der Inhalt des Geschwisterelements) im Internet Explorer nicht oder nicht vollständig bzw. korrekt angezeigt werden.

Abbildung 5.21: Die gleiche Situation – auf das Elternelement wurde geklickt und der Mauszeiger hat gerade den Container mit der ID kid2 verlassen, aber der Internet Explorer verweigert sich. Wie bereits oben erwähnt, schafft es auch Prototype nicht immer, die unzähligen browserspezifischen Verhaltensweisen bei der Navigation im DOM abzudecken. Die Funktion vorfahren(), die jeweils beim Verlassen eines der innersten DIV-Elemente ausgelöst wird (Zeile 11 bis 28), zeigt Informationen zu allen Vorfahren eines Elements an. Dazu kommt die Methode ancestors() zum Einsatz, die ebenso ein Array liefert. Deshalb kann einfach mit einer for-Schleife eine Iteration über das Vorfahrendatenfeld erfolgen. Die Ausgaben in einem dritten Ausgabebereich sind dann analog den anderen beiden Funktionen.

307

5 Prototype + Scriptaculous

5.7

Scriptaculous

Wir wollen zum Abschluss dieses Abschnitts noch einen Blick auf Scriptaculous bzw. Script.aculo.us werfen. Hierbei handelt es sich um eine JavaScript-Bibliothek, die im Wesentlichen visuelle Effekte und interaktive Funktionen zur erweiterten AJAXUnterstützung bietet und unmittelbar auf Prototype basiert. Damit ist die Bibliothek auch direkt in Ruby on Rails integriert. Scriptaculous besteht derzeit im Detail aus einem Animations-Framework, Unterstützung für Drag&Drop, ergänzenden Steuerelementen für AJAX, Utilities für den Umgang mit dem DOM sowie Unterstützung für das Unit-Testing. Tipp Script.aculo.us, das von einem gewissen Thomas Fuchs gegründet wurde, steht unter MIT-Lizenz. Die offizielle Website finden Sie unter http://script.aculo.us/. Dort gibt es auch eine Dokumentation und gute, leicht anzupassende Beispiele.

5.7.1

Download und Installation

Die Installation von der Bibliothek ist extrem einfach. Sie müssen sie bloß unter http://script.aculo.us/downloads laden und dann mit Prototype zusammen in Ihre Webseite einbinden. Die Bibliothek erhalten Sie als Archiv und nach dem Extrahieren stehen Ihnen mehrere .js-Dateien zur Verfügung, die die verschiedenen Facetten der Bibliothek enthalten.

Abbildung 5.22: Die verschiedenen JavaScript-Dateien von Scriptaculous

308

5.7 Scriptaculous

Die konkrete Einbindung des Frameworks ist einfach: Listing 5.35: Einbindung von Prototype und Scriptaculous <script type = "text/javascript" src="prototype-1.6.0.2.js"> <script type="text/javascript" src="scriptaculous.js">

5.7.2

Grundlegende Anwendung

Die meisten Features von Scriptaculous stehen Ihnen beispielsweise zur Verfügung, wenn Sie diese direkt in einem <script>-Tag einfach anwenden, etwa so: Listing 5.36: Grundsätzliche Anwendung eines Effekts <script type="text/javascript" language="javascript"> //

Sie können die Effekte aber auch direkt in Eventhandlern einsetzen: Listing 5.37: Einsatz direkt in einem Eventhandler

Lassen Sie den Text verschwinden

Tipp Eine Animation lebt in vielen Fällen von einer zeitlichen Verzögerung bzw. Steuerung. Scriptaculous unterstützt bei den meisten Effekten die üblichen Optionen duration, fps (frames per second) und delay. Beispiel (das vollständige Listing finden Sie unter proto1scriptaculous1. html): Listing 5.38: Zeitliche Steuerung von Effekten

Von unten nach oben verschwinden

309

5 Prototype + Scriptaculous

Abbildung 5.23: Die untere Schriftzeile wird zeitverzögert von unten nach oben ausgeblendet und ist hier im Screenshot kaum noch zu sehen.

5.7.3

Effekte

Die wesentlichen Animationseffekte von Scriptaculous basieren auf dem Objekt Effect. Darüber stehen beispielsweise die folgenden Animationseffekte zur Verfügung:  Effect.Appear  Effect.Dropout  Effect.Fade  Effect.Fold  Effect.Highlight  Effect.Morph  Effect.Move  Effect.Puff  Effect.Pulsate  Effect.Shake  Effect.Squish  Effect.Opacity  Effect.Scale

Die Bezeichnungen für die Animationseffekte sind offensichtlich recht aussagekräftig und damit wohl überwiegend klar. Und die wesentlichen Anwendungen der Animationseffekte sind auch ähnlich. Wir wollen uns deshalb zwei Effekte exemplarisch herauspicken, um damit auch den Umgang mit Scriptaculous zu zeigen

Ausblenden eines Elements mit Effect.Fade Die Syntax von Effect.Fade() ist Folgende: Listing 5.39: Syntax von Effect.Fade() Effect.Fade(Element [, Optionen]);

310

5.7 Scriptaculous

Als Optionen geben Sie folgende Werte an:  duration in Sekunden  from für die Deckkraft zu Beginn mit 1.0 als Maximum  to für die Deckkraft zum Ende. Falls der Wert größer als 0 ist, verschwindet das

Element nicht! Beispiel (proto1scriptaculous2.html): Listing 5.40: Animiertes Ausblenden eines Elements 01 03 04 05 <meta http-equiv="Content-Type" 06 content="text/html; charset=iso-8859-1" /> 07 08 <script type = "text/javascript" 09 src="prototype-1.6.0.2.js"> 10 <script type="text/javascript" 11 src="scriptaculous-js-1.8.1/src/scriptaculous.js"> 12 13 14

Ein Bild wird durchsichtig

15 17 18

Die Anwendung von Effect.Fade() sehen Sie in Zeile 16.

Morphing Morphing ist eine ganz spezielle Art einer Animation. Dieser Vorgang bezeichnet eine Transformation zwischen zwei grafischen Formen. Sie müssen dabei eine Anfangsform und eine Zielform angeben. In Scriptaculous erfolgt Morphing über Effect.Morph(). Dabei animiert man in der Regel den Wechsel grundlegender Stileigenschaften wie Farbe und Größe eines Elements. Syntax: Listing 5.41: Die grundsätzliche Syntax von Effect.Morph() new Effect.Morph('element_id',{style:'css-stil' [,mehr_optionen]});

Die Optionen sind style für den CSS-Stil und duration für die Dauer in Sekunden.

311

5 Prototype + Scriptaculous

Beispiel für einen MouseOver-Effekt (proto1scriptaculous3.html): Listing 5.42: Morphing-Effekte 01 03 04 05 <meta http-equiv="Content-Type" 06 content="text/html; charset=iso-8859-1" /> 07 08 <script type = "text/javascript" 09 src="prototype-1.6.0.2.js"> 10 <script type="text/javascript" 11 src="scriptaculous-js-1.8.1/src/scriptaculous.js"> 12 13 14

Morphe Form 1 in Form 2

15

17 Mouseovereffekt 18

19 20

In Zeile 16 sehen Sie die Erstellung einer neuen Form.

Abbildung 5.24: Die Ursprungsform Wenn der Anwender mit dem Mauszeiger in den Bereich des DIV-Elements kommt, wird die Animation gestartet.

312

5.7 Scriptaculous

Abbildung 5.25: Das DIV-Element wurde animiert in eine andere Form gemorpht.

5.7.4

Formular- und AJAX-Elemente

Scriptaculous stellt als Ergänzung zu Prototype einige visuelle Eingabeelemente zur Verfügung, die speziell für die Ergänzung von Formularen oder sogar den vollständigen Ersatz von Formularen geeignet sind. Diese können insbesondere (aber nicht nur) im Zusammenhang mit AJAX hilfreich sein:  Ajax.Autocompleter zur Vervollständigung von Wörtern. Das Eingabeelement ist in

Scriptaculous derzeit allerdings nicht sonderlich flexibel, wenn man vergleichbare Widgets anderer Frameworks und Toolkits betrachtet.  Ein Slider ist ein Zwitter zwischen einem AJAX-Control und einem Mechanismus

von Drag&Drop. Ein solcher Schieberegler kann zum Beispiel in Formulare integriert werden, um Werte darüber in ein Formular zu übernehmen.

Normale Elemente als Eingabefelder Daneben können Sie vor allen Dingen mit Scriptaculous aber auch normale Elemente einer Webseite wie Überschriften oder SPAN-Bereiche als Eingabefelder verwenden.14 Der Nutzer klickt z.B. das entsprechende Element an und kann an dieser Stelle eine Eingabe machen. Standardmäßig wird diese Eingabe dann per POST an den Server versendet (über den Parameter value) und die Serverantwort wird anstelle des ursprünglichen Elements eingefügt.

14 Dieses sogenannte in-place text edit erlaubt Textfelder, die »on-the-fly« erzeugt werden und an den Flickr-Stil erinnern.

313

5 Prototype + Scriptaculous

Syntax: Listing 5.43: Ein normales Element als Eingabeelement verwenden new Ajax.InPlaceEditor( element, url, {options});

Die Optionen, die zum Teil auch erst in neuen Versionen von Scriptaculous und Prototype verfügbar sind, sind recht zahlreich. Hier sehen Sie nur eine kleine Auswahl: Option

Default

Beschreibung

callback

function(form) {Form.serialize(form)}

Hier würden Sie eine Funktion angeben, die unmittelbar ausgeführt wird, bevor die Anfrage zum Server geschickt wird. Sie sollte die Parameter zurückliefern, die im URL übermittelt werden.

cancelText

"cancel"

Der Text des Abbruchlinks, den der Anwender sehen soll

clickToEditText "Click to edit"

Der Text, der angezeigt werden soll, wenn sich der Mauszeiger über dem editierbaren Text befindet

cols

none

Die Anzahl der Spalten in dem Eingabefeld für die Texteingabe

formId

ID von dem Element plus InPlaceForm

Die ID des Elements, das editiert werden soll

okText

"ok"

Der Text des Absende-Buttons

onComplete

function(transport, element) Hier können Sie Code angeben, der ausge{new Effect.Highlight führt werden soll, wenn die Aktualisierung (element, {startcolor: durch den Server erfolgreich war. this.options.highlightcolor});}

onFailure

function(transport) Hier notieren Sie den Code, der nach einer {alert("Error communicating Kommunikation mit dem Server im Fehlerwith the server:" + fall ausgeführt werden soll. transport.responseText.stripTag s());}

rows

1

Die Anzahl der Reihen für das Eingabefeld (jede Zahl > 1 führt zur Verwendung einer mehrzeiligen Textarea-Box für die Eingabe)

savingText

"Saving..."

Der Text, der während des Sendens zum Server angezeigt wird

size

none

Synonym für cols bei nur einer Zeile

Tabelle 5.2: Wichtige Optionen von Ajax.InPlaceEditor

314

5.7 Scriptaculous

Das nachfolgende Beispiel zeigt die Verwendung von Ajax.InPlaceEditor in einer ganz einfachen Form (ohne die Angabe spezieller Optionen). Beispiel (proto1scriptaculous4.html): Listing 5.44: Ersetzen der Texteingabe 01 03 04 05 <meta http-equiv="Content-Type" 06 content="text/html; charset=iso-8859-1" /> 07 08 <script type = "text/javascript" 09 src="prototype-1.6.0.2.js"> 10 <script type="text/javascript" 11 src="scriptaculous-js-1.8.1/src/scriptaculous.js"> 12 13 14

AJAX-Anfrage mit Ersetzen eines Textes

15

Klick mich an, um mich zu 16 bearbeiten und dann zu ersetzen

17 <script type="text/javascript"> 18 new Ajax.InPlaceEditor('klickmich', 'demoajaxreturn.html'); 19 20 21

Abbildung 5.26: Der Anwender kann den normalen Text unterhalb der Überschrift anklicken und damit zur Eingabe vorbereiten. Ein Objekt vom Typ Ajax.InPlaceEditor erlaubt es, normalen Text auf der Webseite über einen recht umfangreich konfigurierbaren Editor bearbeitbar zu machen. Wenn der Anwender dann die Absenden-Schaltfläche anklickt, wird der eingegebene Text per AJAX an den Server gesendet. Die Serverantwort ersetzt den ursprünglichen Inhalt.

315

5 Prototype + Scriptaculous

Wie Sie im Listing sehen, ist damit der gesamte AJAX-Vorgang extrem vereinfacht. Sie brauchen nur einen HTML-Container mit einer ID (im Beispiel Zeile 15 und 16) und die einfache Syntax new Ajax.InPlaceEditor('klickmich', 'demoajaxreturn.html'), um das Element mit der ID anzusprechen und durch den Inhalt zu ersetzen, der als zweiter Parameter angegeben wird. Tipp Natürlich können Sie auch ein serverseitiges Skript aufrufen. Dieses bekommt die Daten wie gesagt per POST. In PHP stehen die Daten damit über $_POST zur Verfügung.

Abbildung 5.27: Der reine Text hat sich durch den Anwenderklick in ein Eingabefeld mit zwei sensitiven Elementen verwandelt.

Abbildung 5.28: Die Antwort des Servers ist nun in der Webseite zu sehen.

316

5.7 Scriptaculous

5.7.5

Drag&Drop

Das Scriptaculous-Add-on zu Prototype unterstützt recht umfangreich Drag&Drop. Ein ziehbares Objekt erstellen Sie zum Beispiel mit Draggable.

Ein einfaches Ziehen Im einfachsten Fall kann das so aussehen: Listing 5.45: Ein Bild wird ziehbar gemacht.

Abbildung 5.29: Das verschiebbare Bild an der Originalposition Ein so ziehbar gemachtes Bild kann vom Anwender an eine beliebige andere Stelle in der Webseite gezogen werden und verbleibt da. Zum Zeitpunkt der Verschiebung wird das verschobene Element transparent dargestellt, wenn der Browser das unterstützt. Beim Anlegen eines verschiebbaren Elements können Sie mit einigen Optionen die genauere Verhaltensweise festlegen. Die Option revert sorgt dafür, dass sich das gezogene Objekt nach dem Loslassen durch den Anwender wieder zur Ausgangsposition zurückbewegt.

317

5 Prototype + Scriptaculous

Abbildung 5.30: Das Bild wurde verschoben und über die Überschrift gelegt.

Abbildung 5.31: Während der Verschiebaktion wird das verschobene Element transparent. Beispiel: Listing 5.46: Eine Art »Gummieffekt«

318

5.7 Scriptaculous

Ist ghosting aktiviert, verbleibt eine Kopie des Objekts15 beim Ziehen an der Ausgangsposition, bis das Objekt an der neuen Position losgelassen wird: Listing 5.47: Eine Kopie bleibt so lange zurück, bis das Objekt an der neuen Position losgelassen wird.

Hinweis Für die vollständigen Listings betrachten Sie die Dateien proto1 scriptaculous5.html und proto1scriptaculous6.html.

Abbildung 5.32: An der Originalposition verbleibt ein Geisterbild. Achtung Die Scriptaculous-Technik zum Verschieben funktioniert nicht oder nur eingeschränkt mit Tabellen. Draggables funktionieren eventuell ebenso nicht im Internet Explorer oder teilweise auch Opera, wenn Sie komplexe CSS-Designs verwenden. In diesem Fall kann die CSSAngabe style="position:static;" helfen.

15 Eine Art »Geisterobjekt«.

319

5 Prototype + Scriptaculous

Sortieren per Drag&Drop Eine ganz interessante Technik wird von Scriptaculous über Sortable zur Verfügung gestellt. Damit kann man Elemente innerhalb eines Elternelements per Drag&Drop sortierbar machen. Ein Elternelement wird wie folgt sortierbar: Listing 5.48: Ein Elternelement wird sortierbar. Sortable.create('elternelement_id',[optionen]);

Die Optionen werden mit folgender Syntax verwendet: Listing 5.49: Der Aufbau der Optionen {optionsname: wert [,optionsname: wert]}

Dies sind die wichtigsten Optionen:  tag: das HTML-Tag der sortierbaren Elemente (Standardwert: li)  containment: IDs von Elternelementen, die in die Elemente der Liste gezogen wer-

den dürfen  ghosting: Eine Kopie des Elements verbleibt während des Ziehens an der Ausgangsposition (Standardwert: false).  handle: falls angegeben der Klassenname für die »Griffe«  scroll: Die Seite wird gescrollt falls nötig (Standardwert: false).  dropOnEmpty: ermöglicht es, in leere Listen zu ziehen (Standardwert: false)

Und so kann man ein Elternelement wieder unsortierbar machen: Listing 5.50: Ein Elternelement wird wieder unsortierbar. Sortable.destroy('elternelement_id');

Achtung Auch die Scriptaculous-Technik zum Sortieren funktioniert nicht oder nur eingeschränkt mit Tabellen und in einigen Browsern wie dem Internet Explorer, wenn Sie komplexe CSS-Designs verwenden.

320

5.7 Scriptaculous

Hier ist ein Beispiel einer sortierbaren Liste (proto1scriptaculous7.html): Listing 5.51: Sortieren einer Liste per Drag&Drop 01 03 04 05 <meta http-equiv="Content-Type" 06 content="text/html; charset=iso-8859-1" /> 07 08 <script type = "text/javascript" 09 src="prototype-1.6.0.2.js"> 10 <script type="text/javascript" 11 src="scriptaculous-js-1.8.1/src/scriptaculous.js"> 12 13 14

Sortieren von Listen

15

16
• Ralph
17
• Andrea
18
• Florian
19
• Felix
20

21 23 Liste unsortierbar machen 24 26 Liste sortierbar machen 27 28

In Zeile 25 sehen Sie mit Sortable.create('liste1'), wie das Element mit der ID liste1 sortierbar gemacht wird. In Zeile 22 wird das Element mit Sortable.destroy('liste1') wieder statisch festgelegt.

321

5 Prototype + Scriptaculous

Abbildung 5.33: Die Liste in der Originalanordnung

Abbildung 5.34: Die Liste wird mit Drag&Drop umsortiert.

5.8

Zusammenfassung

Prototype zeichnet sich durch eine sehr effektive Syntax sowie Konzepte aus, die in echten objektorientierten Programmiersprachen gang und gäbe sind. Sie können mit dem Framework sehr schnell und effektiv den DOM manipulieren, OO-Techniken simulieren, Ereignisse bzw. Methoden verketten, Stileigenschaften von Teilen der Webseite beeinflussen oder AJAX-Applikationen erstellen. Prototype ist mit diesem professionellen Ansatz die ideale Basis für viele Erweiterungen im Web- und AJAXUmfeld, von denen wir uns Scriptaculous mit seinen beeindruckenden visuellen Möglichkeiten und Effekten angesehen haben.

322

A Anhang Im Anhang finden Sie neben Quellen wichtige Fakten zu verschiedenen Grundlagentechnologien rund um das Internet und die Grundlagen von AJAX, zu Add-ons für Firefox und Ergänzungen zu den im Buch behandelten Frameworks.

A.1

Quellen

URL

Beschreibung

api.dojotoolkit.org/

Die API-Dokumentation des Dojo Toolkits

developer.yahoo.com/community/

Die Webseite der YUI-Community

developer.yahoo.com/yui/

Das Yahoo User Interface

developer.yahoo.com/yui/docs/

Die Dokumentation des YUI

developer.yahoo.com/yui/license.html

Lizenz des YUI

dojotoolkit.org/

Die zentrale Webseite zum Dojo Toolkit

extjs.com/

Die Webseite des EXT-Frameworks

jquery.com/

Die Webseite des JQuery-Frameworks

mochikit.com/

Die Webseite des Mochakit-Frameworks

mootools.net/

Die Webseite des MooTools-Frameworks

rjsedv.blogspot.com

Der Blog des Autors

script.aculo.us/

Die offizielle Website von Scriptaculous

script.aculo.us/downloads

Download von Scriptaculous

tredosoft.com/Multiple_IE

Der Multiple IE Installer

validator.w3.org

Der Validator des W3C

www.ajax-net.de

Ein Portal zu AJAX

www.javafx.cc

Eine Webseite zu JavaFX

www.knoppix.org/

Die Webseite von Knoppix

www.prototypejs.org/

Die Webseite des Prototype-Frameworks

www.prototypejs.org/api

Die API-Dokumentation von Prototype

Tabelle A.1: Quellen zu AJAX und Frameworks/Toolkits

A Anhang

URL

Beschreibung

www.prototypejs.org/download

Download-Seite von Prototype

www.rjs.de

Homepage des Autors

www.w3.org

Die Webseite des W3C

Tabelle A.1: Quellen zu AJAX und Frameworks/Toolkits (Forts.)

A.2

Die Buch-CD

Die CD enthält alle Codebeispiele aus dem Buch sowie neben aktuellen Browsern und Entwicklungstools die zum Zeitpunkt der Bucherstellung aktuellen Versionen der behandelten Frameworks und Toolkits.

A.3

Grundlagen zum Internet

Das Internet besteht, wie Sie höchstwahrscheinlich wissen, aus einer Vielzahl von sogenannten Internetdiensten. Neben dem WWW sind beispielsweise der E-MailDienst, Chats oder Diskussionsforen sehr populär. Diese anderen Dienste haben im Grunde nichts mit dem WWW zu tun. Aber die Trennung der einzelnen Dienste ist mittlerweile für einen Laien oft kaum noch zu bemerken und für den reinen Anwender im Grunde auch vollkommen uninteressant. Und es ist auch nicht zufällig, dass die Unterscheidung zwischen den unterschiedlichen Diensten verschwimmt. Denn die einzelnen Dienste des Internets verschmelzen immer mehr unter dem Dach des WWW. Unter der WWW-Oberfläche firmieren viele der einzelnen Dienste des Internets zu einer gemeinsamen Plattform, die von einem Anwender damit in einer einheitlichen Oberfläche weitgehend über eine zentrale Software bedient werden kann. Und was mit dem Verschmelzen der Internetdienste unter einer Weboberfläche begonnen hat, führen RIAs ja bezüglich lokaler Applikationen und Internetapplikationen fort.

A.3.1

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

Das Internet ist ein klassisches Client-Server-System. Sämtliche Funktionalität des Internets basiert auf einem permanenten Anwenden der Leistungen eines solchen Client-Server-Prinzips. Ein Client fordert Daten oder eine Dienstleistung von einem Server an und dieser Server liefert diese. Denken Sie beispielsweise als Client an einen Webbrowser, der von einem Webserver eine Webseite anfordert. Oder ein E-MailProgramm, das von einem E-Mail-Server E-Mails anfordert. Oder ein FTP-Programm, das Dateien von einem FTP-Server lädt oder dahin verschiebt.

324

A.3 Grundlagen zum Internet

Zur Datenübertragung im Internet zwischen Client und Server wurde bereits 1973/74 ein Konzept entwickelt, bei dem die auszutauschenden Daten zwischen den beiden kommunizierenden Systemen in kleine Datenpakete zerlegt werden. Das damit verbundene Transportprotokoll nennt sich TCP/IP (Transmission Control Protokoll/Internet Protokoll). IP und TCP sind im Prinzip zwei getrennte Protokolle, kommen aber heute fast nur noch in Verbindung vor. Die gesamte Internetkommunikation basiert auf der Datenübertragung in Form einer solchen Paketvermittlung. Bei einer Paketvermittlung und der Zerlegung aller zu übertragenden Daten in kleinere Datenpakete werden diese Pakete als abgeschlossene und vollständige Transporteinheiten behandelt, die unabhängig voneinander vom Sender zum Empfänger gelangen. Es werden einfach Datenpakete hin und her verschickt, die nur aufgrund von Adressangaben (die sogenannten IP-Nummern) zugeordnet werden. Dabei wird während der Kommunikation über TCP/IP explizit keine Verbindung im eigentlichen Sinn zwischen dem Server und dem Client aufgebaut oder gehalten.1 Bei einer Paketvermittlung unterscheidet man dennoch allgemein zwischen einer verbindungsorientierten und einer nichtverbindungsorientierten (oder auch zustandslosen) Form. Diese Spezifizierung der Kommunikationsform wird jedoch nicht auf der Transportebene, sondern oberhalb davon jeweils mit spezifischen Protokollen realisiert, die auf TCP/IP aufsetzen. Solche Protokolle sind etwa Telnet, FTP (File Transfer Protocol) oder HTTP (Hyper Text Transfer Protocol), wie es im WWW eingesetzt wird. Diese auf dem eigentlichen Transportprotokoll aufsetzenden Protokolle sind besagte Dienstprotokolle.

A.3.2

Verbindungsorientierte Datenkommunikation

Bei einer verbindungsorientierten Datenkommunikation wird oberhalb der Datenpakete in der Ebene der Dienstprotokolle zwischen Sender und Empfänger eine temporäre virtuelle/logische Verbindung aufgebaut. Das bedeutet, obwohl rein physikalisch keine dauerhafte Verbindung zwischen den Kommunikationspartnern vorhanden ist, wird über ein Dienstprotokoll ein Mechanismus bereitgestellt, um eine dauerhafte Verbindung zu gewährleisten. Das ist zum Beispiel bei einer Echtzeitkommunikation wie VoIP (Voice over IP – Internettelefonie) oder einem Chat der Fall, aber auch beim Fernsteuern von einem Remote-Rechner (zum Beispiel mit Telnet oder SSH – Secure Shell).

A.3.3

Zustandslose Datenkommunikation

Bei der nichtverbindungsorientierten Form der Datenübertragung verschickt ein Sender hingegen einfach Datenpakete mit allen notwendigen Informationen zum Empfänger und kümmert sich nicht um eine virtuelle Verbindung. Jede Anfrage durch 1

Wie es etwa beim (klassischen) Telefonieren der Fall ist.

325

A Anhang

einen Client an einen Server erzeugt dort genau eine Sendung einer Antwort (die durchaus in viele Einzelpakete zerlegt sein kann, die erst beim Empfänger wieder zusammengefügt werden). Danach »vergessen« beide Kommunikationspartner die Verbindung. Das zur Kommunikation von einem Webserver und einem Webclient (in der Regel ein Webbrowser) entwickelte Protokoll des Webs – HTTP (Hypertext Transfer Protocol) – ist nun genau so ein zustandsloses Protokoll. Es erlaubt einen einfachen Datenaustausch zwischen den beteiligten Parteien, bei dem der Client Daten vom Server anfordert und als Antwort vom Server eine Webseite gesendet bekommt. Aber es wird keine Verbindung zwischen Webserver und Webbrowser aufrechtgehalten. Und hier ist das Dilemma angesiedelt, das AJAX mittlerweile gelöst hat.

A.4

HTML und XHTML – grundlegende Details

Im Kern jeder RIA bzw. AJAX-Applikation steht HTML oder aber XHTML. Sowohl HTML- als auch XHTML-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 HTMLDateien (der Browser).

A.4.1

Steueranweisungen

Es wird Ihnen sehr wahrscheinlich bekannt sein, dass HTML-Anweisungen aus Steueranweisungen bestehen, die aus sogenannten Tags aufgebaut sind. Ein Tag beginnt immer mit einer geöffneten spitzen Klammer < und endet mit der geschlossenen spitzen Klammer >. Im Inneren der beiden Klammern befindet sich ein Token, der den konkreten Befehl bezeichnet. Ein einleitendes Tag aktiviert immer eine Anweisung, während das beendende Tag – sofern vorhanden – sie wieder ausschaltet. Beide Tags sehen fast identisch aus, außer dass beim beendenden Tag dem Tag-Befehl ein Zeichen vorangestellt wird – der Slash (Schrägstrich) /. Das öffnende Tag würde mit wieder geschlossen. Wenn beide Tags angegeben werden, bilden sie immer einen Container. Dies bedeutet, die im einleitenden Tag angegebene Anweisung (etwa eine Formatierung) wirkt sich auf sämtliche Dinge (Objekte) aus, die sich im Inneren des Containers befinden. Dies wird in vielen Fällen ein Text sein, es kann sich aber auch um eine Grafik oder andere Multimedia-Objekte handeln. Das Ende-Tag hebt die Wirkung eines AnfangsTags auf. Container bzw. Elemente können beliebige – sinnvolle – andere Tags (sogenannte Kindelemente) enthalten, aber die Reihenfolge der Auflösung sollte eingehalten werden! Wenn ein Container weitere Container enthält, sollten diese wieder von innen nach außen beendet werden – in umgekehrter Reihenfolge der Einleitungs-Tags.

326

A.4 HTML und XHTML – grundlegende Details

A.4.2

Parameter

Viele Tags sind erst sinnvoll einzusetzen, wenn sie genauer spezifiziert werden. Das gilt nicht für jedes Tag, denn ein Zeilenumbruch ist beispielsweise in HTML durch
vollständig beschrieben. Aber nicht alle Anweisungen sind eindeutig. Parameter beziehungsweise Attribute erweitern ein einleitendes HTML-Tag und spezifizieren damit genauer die Bedeutung des Tags. In HTML gibt es zwei Formen von Parametern:  Parameter mit einer Wertzuweisung  Parameter, die bereits einen Wert repräsentieren

Parameter mit einer Wertzuweisung bekommen über einen Zuweisungsoperator – das Gleichheitszeichen (=) – den entsprechenden Wert zugeordnet. Dies kann ein Text oder eine Zahl sein. Ein Tag mit einem Parameter mit einer Wertzuweisung sieht schematisch so aus: Listing A.1: Das Schema eines HTML-Tags mit Parameter mit Wertzuweisung <[HTML-Anweisung] [Parameterbezeichner] = "[Wert]">

Ein Beispiel für ein Tag mit Parameter ist die Anweisung , womit die Größe einer Schrift festgelegt werden kann. Achtung Das Abschluss-Tag wird niemals mit Parametern erweitert.

Viele Befehle lassen sich über mehr als einen Parameter spezifizieren. Die verschiedenen Parameter werden dann einfach durch Leerzeichen getrennt aufgelistet. Hinweis Bei mehreren Parametern spielt die Reihenfolge der Parameter keine Rolle.

327

A Anhang

In vielen Fällen kann man bei der Wertzuweisung in einem HTML-Tag auf die Notation des Werts in Hochkommata verzichten. Die Anweisung funktioniert in HTML uneingeschränkt. In XHTML muss der zugewiesene Wert jedoch zwingend in Hochkommata eingeschlossen werden () und Sie sollten sich diese formalere Schreibweise unbedingt angewöhnen. Parameter, die bereits einen Wert repräsentieren, brauchen in HTML bloß durch ein Leerzeichen von der Anweisung oder anderen Parametern abgetrennt (!) in das Einleitungs-Tag geschrieben werden. Sie fungieren immer als Schalter. Wenn sie angegeben werden, wird eine Eigenschaft aktiviert, fehlen sie, ist die jeweilige Eigenschaft deaktiviert. In XHTML gibt es solche Parameter ohne Wertzuweisung nicht!

A.4.3

HTML-Eventhandler

HTML verfügt nun im Gegensatz zu vollständigen Programmier- oder Skriptsprachen (wie etwa JavaScript) über keine Kontrollstrukturen in Form von Bedingungen, Sprüngen oder Schleifen. Ebenso werden Sie in HTML keine Variablen finden. Es gibt auch keine Befehle im Sinne von Befehlsworten, die eine Aktion auslösen. Allerdings beinhaltet HTML ab der Version 4 Schlüsselwörter, die Voraussetzung für das Aufrufen von Funktionen sind (sogenannte Eventhandler). Ein solcher Eventhandler dient in HTML aber zum Aufruf von Funktionen wie JavaScripts und nicht zu einer Programmflusssteuerung auf Basis von HTML. Tipp Sie erkennen solche Eventhandler als Parameter eines HTML-Tags an dem Beginn des Tokens mit on, etwa onClick oder onMouseOver. Ohne den Einsatz von JavaScript oder einer anderen clientseitigen Programmiertechnik sind Eventhandler in einer Webseite nicht sinnvoll zu gebrauchen.

A.4.4

Strukturierung einer Webseite mit HTML

Bei modernen Webseiten ist die wichtigste Bedeutung von HTML und XHTML, dass damit die Strukturierung einer Webseite erfolgt.2 Das beginnt mit dem Grundgerüst und geht weiter über die eigentliche Webseite im Inneren des -Tags. Im Kopfbereich der Seite werden Metainformationen zur Webseite wie der Titel, der Zeichensatz, der Autor, Schlüsselwörter für Suchmaschinen, eine Beschreibung für Suchmaschinen oder ähnliche Information untergebracht. Diese sind für den Betrachter einer Webseite unsichtbar (mit Ausnahme des Titels).

2

Die Gestaltung wird mit Stylesheets vorgenommen.

328

A.4 HTML und XHTML – grundlegende Details

Im Körper der Webseite sind dann, insbesondere für moderne Webseiten und RIAs, die Strukturierungselemente von zentraler Bedeutung, beispielsweise Überschriften, Absätze, Trennlinien, Listen oder Tabellen. Besondere Bedeutung – insbesondere in Hinsicht auf die Datennachforderung per AJAX – hat das

-Element. Dieses erlaubt die Zusammenfassung von Inhalt ähnlich wie ein Absatz, hat aber nicht dessen logischen Sinn eines Absatzes im Textfluss. Sie können die Breite und die Höhe von einem

-Bereich angeben. Bei diesem Element handelt es sich wie bei den anderen Strukturierungselementen um ein sogenanntes Blockelement. Beim <span>-Element (ein sogenanntes Inline-Element) kann man die Bedeutung nur dann verstehen, wenn es im Zusammenhang mit Stylesheets oder JavaScript eingesetzt wird. Es hat nämlich überhaupt keine HTML-Eigenwirkung und strukturiert im Wesentlichen eine Webseite in Hinsicht auf das störungsfreie Ansprechen von bestimmten Bestandteilen in Fließtexten. Inline-Elemente sind auch alle anderen Elemente, die der Textauszeichnung dienen (etwa , oder ). Auch diese zeichnen sich dadurch aus, dass sie die Anordnungsstruktur einer Seite nicht beeinflussen.

A.4.5

Das W3C und die verschiedenen Versionen von HTML und XHTML

Hinter der Normung von HTML beziehungsweise XHTML und vielen anderen Techniken im WWW steht das W3C (World Wide Web-Consortium, http://www.w3.org). Das Gremium wurde beim Erscheinen von HTML (und damit dem WWW) explizit zu dessen Standardisierung gegründet. Seit der ersten Version von HTML im Jahr 1991 wurde HTML vom W3C bis zur Version 4 weiterentwickelt, die 1997 verabschiedet und 1999 nur sehr geringfügig aktualisiert wurde. Diese Version 4.0 hat bis heute Gültigkeit. Wie ist nun XHTML zu sehen? Ist es die Ablösung von HTML oder einfach nur eine neue Version, die man auch als neue Version von HTML einführen könnte? Im Grunde kann man die Frage sowohl bejahen als auch verneinen. XHTML ist eine auf XML3 basierende Neuformulierung von HTML 4.01. Die Sprache enthält in der ersten Version4 dabei sämtliche Elemente von HTML 4.01. Nur ist die Syntax von XHTML bedeutend strenger als von HTML und es gibt eine Reihe von zusätzlichen Metainformationen.

3 4

Nicht mehr SGML. Es gibt mittlerweile verschiedene Versionen von XHTML, was wir hier aber nicht weiter ausführen werden.

329

A Anhang

Hinweis Vereinfacht kann man sagen, dass XHTML erst einmal HTML ohne das Prinzip der Fehlertoleranz ist. Das Ziel von XHTML ist die Möglichkeit der besseren maschinellen Verwertung von Webseiten.

XHTML hat sich im WWW aber bis heute nicht durchgesetzt. Die wesentlichen Vorteile, die XHTML bringen soll, sind vielen Webseitenerstellern nicht verständlich und werden oft sogar als Nachteile empfunden. Und da die Masse der Webseitenersteller deshalb einfach weiter HTML statt XHTML (oder eine Mischform) zur Erstellung von Webseiten verwenden, werden sich Browser-Hersteller hüten, die HTML-Unterstützung einzustellen und die strengen XHTML-Regeln einzufordern. Weiter wird durch die Identitäten der Elemente mit HTML 4.01 ein nicht XHTMLfähiger Webbrowser XHTML-Dokumente meist richtig darstellen, da er sie als normales HTML ansieht, und ein XHTML-fähiger Browser kann in jedem Fall auch HTML und wird alle Seiten, die XHTML-Regeln brechen, einfach als HTML-Seiten interpretieren. Dies macht ein Nebeneinander beider Welten möglich und für viele Anwender fast unsichtbar. Das soll aber nicht bedeuten, dass die Verwendung von XHTML statt HTML nicht elementare Vorteile bringt:  XHTML-Dokumente sind – wie schon angedeutet – viel leichter maschinell auszu-

werten als HTML-Dokumente. Bei HTML-Strukturen kann ein auswertendes Programm (ein sogenannter Parser) nie davon ausgehen, dass eine bestimmte Struktur fehlerfrei oder vollständig ist. Ebenso erlaubt HTML diverse Ausnahmen in der Logik, was die maschinelle Verarbeitung weiter erschwert. Durch die strenge Syntax von XHTML sind diese Probleme reduziert. So eine maschinelle Auswertung erfolgt beispielsweise durch Lesegeräte für Sehbehinderte oder durch Suchmaschinen. Es ist offensichtlich, dass eine Webseite, die zuverlässiger von einer Suchmaschine analysiert wurde, viel besser als Treffer bei einer Suchanfrage durch einen Anwender präsentiert werden kann. Aber auch ohne diese bereits vordergründig einleuchtenden Vorteile erlaubt erst die maschinelle Verwertbarkeit von Informationen den Aufbau des sogenannten semantischen Webs (engl. Semantic Web). Dies bezeichnet die aktuell stark forcierte Erweiterung des WWW um maschinenlesbare Daten, welche die Semantik der Inhalte formal festlegen und es Programmen erlaubt, die Bedeutung von Inhalt über Metadaten anstelle der Schreibweise der Inhalte zu erfassen.  XHTML ist in sogenannten Modulen organisiert und kann zum Aufbau von eige-

nen XHTML-Dokumenttypen genutzt und mit anderen XML-basierenden Sprachen gemischt werden. XHTML ist damit erweiterbar und mit XHTML ist der Datenaustausch zwischen verschiedenen Systemen viel leichter.

330

A.5 Die Gültigkeit von Webseiten testen

 Der Aufbau von baumartig orientierten Objektmodellen der Webseite ist einfacher

und zuverlässiger. Ein solches Objektmodell kann im Hauptspeicher des Rechners durch einen Parser bei der Analyse der Webseite aufgebaut werden. Solche Objektmodelle benötigt man, wenn man aus Skriptsprachen wie JavaScript heraus eine in den Browser geladene Webseite manipulieren möchte. Dies bedeutet mit anderen Worten, dass die dynamische Veränderung einer Webseite, die bereits in einen Browser geladen wurde, bei einer XHTML-Seite viel zuverlässiger funktioniert als bei einer HTML-Seite, die vom Prinzip der Fehlertoleranz Gebrauch macht. Es ist leicht zu sehen, dass die Vorteile von XHTML sehr wenig mit der einfachen Gestaltung der Webseite zu tun haben. Rein von der Optik kann man eine HTMLSeite nicht von einer XHTML-Seite unterscheiden. Viele der Unterschiede zwischen HTML und XHTML kommen erst dann wirklich zum Tragen, wenn das Dokument nach den Regeln von XML verarbeitet wird. Ebenso entfalten sich die Vorteile von XHTML erst dann, wenn beim Erstellen, Ändern oder Lesen tatsächlich XML-Techniken genutzt werden. Dies ist sicher ein Grund, warum viele Webseitenersteller die Erfordernis von XHTML nicht erkennen.

A.5

Die Gültigkeit von Webseiten testen

Das Prinzip der Fehlertoleranz beziehungsweise das automatische Umschalten aller gängigen Browser zwischen XHTML und HTML bei XHTML-Regelverletzungen hat über die Jahre dazu geführt, dass sich Webseitenersteller so gut wie nie darum gekümmert haben, ob eine Webseite nach den Regeln des W3C wirklich fehlerfrei ist. Stattdessen wurden und werden Seiten nach dem Motto »Hauptsache, sie funktioniert« erstellt. Es gibt offizielle Untersuchungen, wonach nur ganz wenige5 Webseiten im WWW tatsächlich allen Regeln des W3C bezüglich HTML oder XHTML genügen und damit im strengen Sinn fehlerfrei sind. Man nennt solche Seiten dann auch gültig. Dieser Begriff stammt aus XML und bezeichnet ein Dokument, das keine offizielle Regel einer Beschreibungssprache verletzt und zusätzlich eine spezifische Grammatik einhält. Es gibt nun eine einfache Möglichkeit, wie Sie die Gültigkeit einer Webseite kontrollieren können. Das W3C stellt unter der Adresse http://validator.w3.org/ eine automatische Kontrollmöglichkeit für Webseiten bereit (den sogenannten Markup Validation Service), den Sie übrigens auch erreichen, wenn Sie das Firefox-Add-on Web Developer zum Validieren verwenden. Wenn Sie in der Webseite des W3C-Validators den URL einer Webseite angeben, wird die Gültigkeit der damit spezifizierten Webseite überprüft. Das funktioniert für fast alle erreichbaren Webseiten.

5

Etwa 3 Prozent.

331

A Anhang

Tipp Es gibt auf dieser Seite ebenso eine Möglichkeit, um eine im Internet nicht verfügbare Webseite temporär zum W3C hochzuladen und dann validieren zu lassen.

Nach der Überprüfung einer Webseite zeigt die resultierende Webseite alle Stellen in der geprüften Seite an, in denen der Validierungsmechanismus eine Regelverletzung erkannt hat. Tipp Wenn Sie Ihre eigene Seite überprüfen, können Sie sukzessive die monierten Fehlerstellen abarbeiten und den offiziellen Regeln des W3C anpassen.

Abbildung A.1: Die Validierung einer Webseite – hier ein Blog, der mit der Google-API unmittelbar generiert wird

332

A.5 Die Gültigkeit von Webseiten testen

6

Hinweis Bezüglich der Gültigkeit von Webseiten muss man unbedingt die Theorie und die Praxis beachten. Die Gültigkeit einer Webseite ist nicht zwingend ein Qualitätsmerkmal. Es ist leider so, dass die offiziellen Vorgaben des W3C bezüglich HTML und XHTML, aber auch anderen Techniken wie CSS, vielfach den notwendigen Vorgehensweisen in der Praxis widersprechen. Von daher wird eine gültige Webseite in der Praxis gelegentlich untauglich und eine vom Validierungsservice als fehlerhaft eingestufte Webseite meistens für die Praxis vollkommen brauchbar sein. Gerade Google-APIs, aber auch verschiedene AJAX-Frameworks, müssen explizit die Regeln des W3C brechen, um überhaupt zu funktionieren. Wenn Sie beispielsweise die verschiedenen Webseiten von Google einmal validieren lassen, werden Sie erkennen, dass gerade Google-Seiten vor Fehlern nur so strotzen. Aber sie funktionieren offensichtlich ziemlich gut. Und diese Missachtung der offiziellen Verbindlichkeiten scheint mehr und mehr abzufärben. Mittlerweile habe ich das Gefühl, dass es manche Webseiten als eine Art Auszeichnung verstehen, wenn sie im Validator des W3C möglichst viele Fehler produzieren und dennoch funktionieren. So ungefähr, wie es einmal Mode war, in E-Mails möglichst viele Fehler zu schreiben, um seine Wichtigkeit zu demonstrieren (was gehen mich die kleinkarierten Regeln des Computerpöbels an ;-)). Wie gesagt, ein Fehler im Validator ist zwar so gut wie nie eine Katastrophe, jedoch auch kein Qualitätsmerkmal. Im Zweifelsfall ist es immer besser, wenn der Standard eingehalten wird.6 Sie müssen bei jedem einzelnen Punkt, den der Validierungsservice kritisiert, selbst entscheiden, ob dieser angebliche Fehler wirklich zu korrigieren ist. Das soll bedeuten, es handelt sich oft wirklich um einen Fehler, aber es spielt in der Praxis keine große Rolle, ob der Fehler behoben wird oder nicht. Wenn Sie mit den Konsequenzen eines Fehlers leben können, können Sie die Empfehlung des Validierungsservice vielfach ignorieren – oder Sie beheben den Fehler, wenn Ihnen die Konsequenzen eines Fehlers zu schwerwiegend erscheinen.

6

Nur wenn man im Browser keine negativen Folgen sieht, heißt dies noch lange nicht, dass es nicht an anderen Stellen (etwa bei der maschinellen Verwertung durch Spider oder Lesegeräte) nicht zu Komplikationen kommen kann.

333

A Anhang

A.6

Die Einbindung von JavaScript in Webseiten

Wir haben bei den behandelten AJAX-Frameworks in diesem Buch im Wesentlichen JavaScript-Bibliotheken vorliegen. Und diese müssen Sie mit Ihren Webseiten irgendwie zusammenbringen. Die Verbindung eines JavaScript-Bereichs mit einer Webseite kann über eine direkte Notation eines JavaScripts in der Webseite erfolgen. Dazu werden JavaScript-Anweisungen einfach in die entsprechende (X)HTML-Datei als Klartext hineingeschrieben. Der Beginn eines Skripts wird dazu durch eine eigene Steueranweisung gekennzeichnet, die noch zu HTML gehört und die mit ihrem zugehörigen Abschluss-Tag einen Container für die Skriptanweisungen bildet. Über das <script>-Element wird angegeben, dass all das, was in dem eingeschlossenen Container steht, ein Skript ist. Listing A.2: Ein Codefragment mit der direkten Notation eines JavaScript in einer Webseite ... Eine Zufallszahl: <script> document.write(Math.round(Math.random()));

Wenn Sie im Skript-Tag keine Sprache angeben, wird von allen bekannten Browsern als Standard JavaScript verwendet. Allerdings nutzen Sie dabei das sehr tolerante Verhalten von Browsern, denn eigentlich müssen Sie die verwendete Skriptsprache spezifizieren. Über den Parameter language können Sie festlegen, um welche Skriptsprache es sich handelt. Dabei ist die Groß- und Kleinschreibung für den Namen der Skriptsprache irrelevant. Das bedeutet, die Anweisungen <script language="JavaScript"> oder <script language="javascript"> sind äquivalent. Wenn Sie eine andere Skriptsprache verwenden wollen (beispielsweise VBScript oder JScript), geben Sie diese ebenso an. Bei der Sprache können Sie auch die Version von JavaScript angeben – beispielsweise über die Angabe JavaScript1.3 oder JavaScript1.5. Hinweis Beachten Sie, dass die Versionsnummer ohne Leerzeichen an den Token javascript angehängt wird. Beim Internet Explorer muss man jedoch beachten, dass die Angabe JavaScript1.0 (was ja im Prinzip identisch mit der Angabe JavaScript ist) Probleme macht. Er führt entsprechend gekennzeichnete Skriptcontainer einfach nicht aus.

334

A.6 Die Einbindung von JavaScript in Webseiten

Statt des Parameters language können Sie auch den MIME-Typ über type="text/javascript" angeben. Aber dabei können Sie keine Version von JavaScript angeben und wenn diese Angabe notiert wird, wird jede zusätzlich notierte Versionsangabe über language ignoriert!

Hinweis Nach den offiziellen Ausführungen des W3C soll man bei der Einbindung eines JavaScripts den MIME-Typ angeben. Der Parameter language gilt als veraltet (deprecated). Und wir haben hier einen der vielen Fälle, dass man sich in der Praxis nicht den Deut um diese Empfehlung kümmert. Es wird so gut wie immer der Parameter language benutzt. Nahezu alle HTML-Editoren generieren einen Skriptcontainer mit dem Parameter language. Bei der Einbindung eines <script>-Elements in eine Webseite stellt sich die Frage, wo es notiert werden darf? Diese Frage ist nicht eindeutig zu beantworten. Nach den Vorgaben des W3C gehört das Element in den Header einer Webseite. In der Praxis wird man <script>-Elemente jedoch an jeder beliebigen Stelle innerhalb einer Webseite finden. Im Prinzip kann so ein Element sogar hinter der eigentlichen Webseite stehen. Die Skriptanweisungen werden von einem Browser einfach verarbeitet, wenn die Webseite in den Browser geladen und von oben nach unten geparst wird. Entsprechend ist klar, dass unten in einer Webseite notierte Skriptanweisungen (Funktionen) erst dann zur Verfügung stehen, wenn die Seite bis dahin geladen ist. Eine übliche Vorgehensweise ist es deshalb, einen <script>-Container vor den Body (möglicherweise sogar W3C-konform innerhalb des Headers einer Webseite) zu platzieren und darin die Deklarationen von wichtigen Funktionen einzubetten. Diese Funktionen sind dann für das ganze Dokument verfügbar. Nun hat sich in der Praxis gezeigt, dass es in der Programmierung mit JavaScript zahlreiche Situationen gibt, in denen die Position des <script>-Elements die Ausführung massiv beeinflusst. Viele Webseiten erzwingen beispielsweise, dass <script>Container nicht im Header, sondern in anderen Abschnitten der Webseite platziert werden. Selbst hochprofessionelle und moderne Konzepte wie Projekte von Google oder Microsoft oder auch AJAX-Frameworks müssen dies ausnutzen, um bestimmte Verhaltensweisen von einigen Browsern zu kompensieren.

335

A Anhang

Tipp Sofern Sie auf keine relevanten Probleme stoßen, sollten Sie einen <script>-Container in den Header einer Webseite schreiben. Wenn ein Skript vor dem Webseitenkörper platziert wird, hat das vor allem den Vorteil, dass es bereits bereitsteht, bevor der sichtbare Teil der Webseite über das Netz geladen wird. Oft ist das sehr sinnvoll oder gar unumgänglich. Deshalb sollten Sie wichtige JavaScript-Funktionen möglichst weit oben in die Webseite schreiben (deklarieren) und gegebenenfalls später gezielt aufrufen. Dieser Code wird so lange verfügbar sein, wie das Dokument existiert. Für eine XHTML-konforme Einbindung müssen Sie <script>-Elemente zwingend in den Header notieren und ebenso verpflichtend die type-Angabe zur Spezifizierung des MIME-Typs anstelle des language-Parameters verwenden. Ebenso müssen Sie in XHTML Skript-Bereiche in einen sogenannten CDATA-Abschnitt einschließen. Dies ist in XML ein unkontrollierter Bereich. Der CDATA-Abschnitt steht im jeweiligen Container und beginnt direkt nach dem Anfangs-Tag mit . Listing A.3: Schema eines CDATA-Bereichs

Damit einige Browser die Anfang- und Endmarkierung des CDATA-Abschnitts nun nicht als JavaScript-Code zu interpretieren versuchen, werden sie durch JavaScriptKommentare vor ihnen versteckt. Eine XHTML-konforme Einbindung von JavaScript-Containern in eine Webseite sollte wie folgt aussehen: Listing A.4: Eine XHTML-konforme Einbindung von JavaScript-Containern <script type="text/javascript"> //

336

A.6 Die Einbindung von JavaScript in Webseiten

Trotz dieser Möglichkeit der Verwendung eines unkontrollierten Bereichs wird man jedoch bei XHTML-Dateien in jedem Fall eine Auslagerung in eine externe Datei vorziehen, aber auch bei nur HTML-konformer Verwendung. Sinnvoller als die direkte Notation eines JavaScripts in die Webseite ist so gut wie immer der Aufbau einer Funktions- und Variablensammlung bzw. Bibliothek in Form einer externen Datei, die in die Webseite eingebunden wird. Sie können die gleiche Funktionalität in verschiedenen Webseiten verwenden und insbesondere sind die Wartung und die Verwaltung des Codes einfacher. Und vor allem wird die Trennung von Struktur und Funktionalität erreicht. Genau so eine Situation haben wir bei unseren AJAX-Frameworks. Die externe JavaScript-Datei (in der Regel mit der Erweiterung .js) enthält im optimalen Fall Ihren gesamten JavaScript-Code mit Ausnahme der expliziten Aufrufe von JavaScript-Funktionen. Um eine externe JavaScript-Datei in eine Webseite einzubinden, müssen Sie das <script>-Tag nur um das Attribut src erweitern. Damit geben Sie den URL der externen JavaScript-Daten an. Dabei gelten beim Referenzieren von separaten JavaScriptDateien die üblichen Regeln für URLs. Nachfolgend sehen Sie zwei Codefragmente mit zwei Varianten zur Referenz auf eine externe JavaScript-Datei: Listing A.5: Einbindung von externen JavaScript-Dateien <script language="JavaScript" src="http://abc.de/meineJS.js"> <script type="text/javaxcript" src="meineJS.js">

Der <script>-Container sollte auf jeden Fall leer sein (auch keine Leerzeichen oder Zeilenumbrüche), denn einige Browser machen Probleme, wenn darin Inhalt vorhanden ist. Diese Browser reagieren nicht etwa fehlerhaft, sondern es handelt sich hier im Sinn von XML um ein leeres Element. Und wenn Sie XHTML-konform bleiben wollen, darf da keinerlei Inhalt drin sein. Tipp Es gibt einen Spezialfall, bei dem Sie JavaScript-Anweisungen ohne eine expliziten <script>-Container direkt als Parameterwert in eine sensitive HTML-Anweisung wie einen Hyperlink schreiben können. Dies ist die Inline-Referenz. Dazu müssen Sie nur der entsprechenden HTML-Anweisung das Schlüsselwort javascript, gefolgt von einem Doppelpunkt, als Attribut angeben und dann eine JavaScriptAnweisung zuweisen. Die Inline-Referenz ist aber im Grunde nur noch von historischem Interesse und wird in der Praxis nahezu vollständig durch viel flexiblere Eventhandler ersetzt.

337

A Anhang

A.7

Ein paar Ausführungen zur JavaScript-Syntax

Effektives Programmieren mit AJAX-Frameworks, die auf JavaScript basieren, setzt voraus, dass man mit der Syntax von JavaScript vertraut ist. Dies wiederum beinhaltet, dass Ihnen elementare Dinge wie  Variablen und Datentypen,  Literale,  Ausdrücke,  Objekte mit ihren Methoden und Eigenschaften,  Funktionen und Prozeduren,  Wertzuweisungen,  Operatoren,  Schlüsselwörter

und noch einige andere Kernbegriffe aus der Programmierung im Allgemeinen und JavaScript im Speziellen vertraut sind. Nun ist das hier kein JavaScript-Lehrbuch und wir können schon gar nicht eine Einführung in die Programmierung besprechen. Allerdings sollen nachfolgend – insbesondere für Leser, die aus anderen Programmiertechniken stammen – die Besonderheiten von JavaScript zusammengefasst werden. Immerhin ist JavaScript der Kern von AJAX und den hier behandelten AJAX-Frameworks und Sie werden bei der Verwendung massiv mit diesen JavaScript-Besonderheiten konfrontiert. Kümmern wir uns zuerst kurz um den Umgang mit Variablen, Datentypen und Literalen in JavaScript. Denn hier gibt es einige Eigenheiten zu beachten, die sich von den meisten »echten« Programmiersprachen unterscheiden. Ein Literal ist in einer Programmiertechnik eine Darstellung eines eindeutig festgelegten und unveränderlichen Werts. Eine Variable steht hingegen für eine benannte Stelle im Hauptspeicher, in der irgendwelche Werte temporär gespeichert werden können. Sowohl ein Literal als eine Variable benötigen einen Datentyp. Dieser gibt die Größe der Variable beziehungsweise des Literals im Hauptspeicher an, was für eine Art an Information vorliegt und wie mit dieser bei einer Operation zu verfahren ist. In JavaScript wird – analog wie in den meisten Skriptsprachen, aber abweichend von der Vorgehensweise bei strengeren Programmiersprachen wie Java – bei der Deklaration (das bedeutet die erste Einführung) einer Variablen nicht explizit über ein Schlüsselwort ein Datentyp festgelegt. Eine Festlegung des Datentyps erfolgt implizit durch die Art von Wert, der der Variablen zugewiesen wird. Bei einer späteren erneuten Zuweisung mit einem andersartigen Wert verändert sich sogar der Datentyp der Variable während der Laufzeit des Skripts.7 Die Datentypen werden also intern von 7

Es findet eine sogenannte Ad-hoc-Typkonvertierung statt.

338

A.7 Ein paar Ausführungen zur JavaScript-Syntax

JavaScript verwaltet. JavaScript ist somit eine sogenannte lose typisierte Sprache, die auch nur über sehr wenige Datentypen verfügt. Betrachten wir nun die Möglichkeit zur Modularisierung von JavaScript über Funktionen respektive Methoden bei einem Objekt. Die Fähigkeit zur Bildung von Funktionen oder ähnlicher Strukturen ist ein Hauptkriterium einer modernen Programmiertechnik. Funktionen und Methoden bedeuten die Zusammenfassung von ein oder mehreren Befehl(en) zu einem Block (bzw. Unterprogramm), der mit einem Namen bzw. Bezeichner benannt wird. Mit solchen Zusammenfassungen kann man Code effektiver gestalten, wenn in einem Skript bestimmte Befehlsfolgen öfter benötigt werden. Statt diese immer wieder benötigten Befehlsfolgen jedes Mal neu schreiben zu müssen, werden sie einfach über diesen Bezeichner aufgerufen. Der Programmierer hat weniger Tipparbeit, die Wahrscheinlichkeit für Flüchtigkeitsfehler sinkt und vor allem wird ein Skript kleiner, da die Anzahl der Zeichen reduziert wird. Damit wird eine Webseite schneller einem Anwender zur Verfügung stehen. In der Regel lohnt sich die Bildung einer solchen Zusammenfassung bereits dann, wenn man eine Schrittfolge mehr als einmal braucht. Ein weiterer wichtiger Aspekt ist, dass die Bildung eines solchen Unterprogramms Befehlsschritte vor der Ausführung beim Laden eines Skripts im Rahmen der Webseite schützt. Oft ist das weder gewünscht noch sinnvoll. Erst wenn bestimmte Voraussetzungen vorliegen (z.B. wenn der Anwender irgendwo hin klickt, eine Webseite verlassen wird, bestimmte Eingaben durch den Anwender abgeschlossen sind), wird die Funktion oder Methode über ihren Bezeichner aufgerufen und die Befehlsfolge ausgeführt. Und nicht zuletzt erlaubt die Bildung von Funktionen das Anlegen von Bibliotheken – und damit sind wir bei unserer Art von AJAX-Frameworks. Die Definition von Funktionen erfolgt, indem das dafür in JavaScript vorgesehene Schlüsselwort function die Deklaration einleitet, dann der Bezeichner der Funktion folgt und abschließend ein Klammernpaar notiert wird, in dem eventuell benötigte Parameter an die Funktion weitergegeben werden können. Solche Parameter sind Werte, die dann innerhalb der Funktion verwendet werden können. Mehrere Parameter werden bei Bedarf durch Kommas getrennt in die Klammern notiert. Anschließend folgt der Block mit den enthaltenen Anweisungen – ohne (!) dass vorher ein Semikolon steht. Optional kann man mit dem Schlüsselwort return einen Rückgabewert der Funktion angeben. Eine Deklaration einer Funktion sieht in JavaScript schematisch also wie folgt aus: Listing A.6: Eine schematische Deklaration einer Funktion function [Funktionsbezeichner]([optionale Parameter]) { ...irgendwelche Anweisungen return [Rückgabewert]; }

339

A Anhang

Achtung JavaScript unterscheidet zwischen Groß- und Kleinschreibung. Sowohl bei Variablen als auch bei Funktions- und Methodenbezeichnern.

Eine Funktion mit Rückgabewert kann überall dort stehen, wo eine Variable oder ein Literal stehen kann. Der Rückgabewert kann auch direkt innerhalb der Bedingung einer Kontrollstruktur verwendet werden oder einer Variablen zugewiesen werden. Lassen Sie uns nun ein paar Worte noch zu Ausdrücken, Operatoren, Operanden und Anweisungen in JavaScript verlieren. Dies müssen in der Tat aber nur wenige Worte sein, denn die gesamte Thematik rund um Operatoren und Operanden sowie Ausdrücke ist in JavaScript sehr stark an C orientiert. Das bedeutet, dass jeder geübte Programmierer in C oder einer verwandten Sprache diese Syntax sofort lesen und verstehen kann. Ein Kernbegriff in der Programmierung ist ein Ausdruck, dessen einziges wichtiges Kennzeichen ist, dass er einen Wert besitzt oder repräsentiert. Im einfachsten Fall besteht ein Ausdruck nur aus einem Literal oder einer Variable. In diesem trivialen Fall ist der Wert des Ausdrucks identisch mit dem Literal oder dem Wert der Variablen. Es gibt aber auch zusammengesetzte Ausdrücke. In diesem Fall werden Literale und/oder Variablen miteinander verknüpft, d.h., es wird eine Berechnung (im weitesten Sinn) durchgeführt. Der Wert des Ausdrucks ist dann das Ergebnis der Verknüpfung. Die Verknüpfung selbst erfolgt über sogenannte Operatoren. Dies sind besondere Zeichen oder Zeichenkombination, die eine auszuführende Handlung mit einer oder mehreren Variablen oder konstanten Werten (also Literalen) ausführen. Diese so verknüpften Elemente werden Operanden genannt. Wie gesagt werden Programmierer aus C-orientierten Sprachen sich hier sofort zuhause fühlen. Dies betrifft auch die zentralen Anweisungen in JavaScript. Sie haben die üblichen Anweisungen zur Kontrollflusssteuerung8 zur Verfügung, die wir hier nicht weiter ausführen werden. Hinweis Bei Bedarf ist es dringend empfohlen, dass Sie sich in spezieller JavaScript-Literatur genauer informieren.

8

Entscheidungsstrukturen, Schleifen, Sprünge, Wertzuweisungen, Blöcke, ... .

340

A.8 Objekte in JavaScript

Über den Aufruf von JavaScripts müssen wir auch noch einige Worte verlieren. Grundsätzlich erfolgt das Ausführen eines Skripts beim Laden einer Webseite, wenn in einer Webseite direkt JavaScript-Anweisungen oder Funktionsaufrufe notiert werden. Der Aufruf einer JavaScript-Funktion oder -Methode kann an einer beliebigen Stelle im Skript (auch innerhalb einer anderen Funktion) erfolgen. Wenn im Skript selbst eine Funktion aufgerufen wird, muss sie mit dem Bezeichner, den Klammern, eventuell notwendigen Übergabewerten und einem abschließenden Semikolon9 notiert werden. Alternativ zum automatischen Ausführen eines Aufrufs – und in der Praxis meist verwendet – wird ein JavaScript aufgrund eines bestimmten Ereignisses (Event) aufgerufen. Dies kann eine Anwenderaktion sein und auch ein automatischer Vorgang, der von einer Zeitspanne oder einem Zeitpunkt oder einem anderen Zustand abhängt. Jede spezifizierbare Situation sorgt im JavaScript-System für das Eintreten eines Events, eines Ereignisses, das im System beobachtet und worauf reagiert werden kann. Die Reaktion auf solche Events wird Ereignisbehandlung oder Eventhandling genannt. Im Detail kann man auf Events in JavaScripts auf drei verschiedene Weisen reagieren: 1. mit einem HTML-Eventhandler 2. mit einem JavaScript-Eventhandler in Verbindung mit Funktionsreferenzen 3. mithilfe des Event-Objekts Die konkrete Ereignisbehandlung weicht in verschiedenen Browsern nun leider erheblich ab. Das wird dazu führen, dass Ereignisse, die in einem Browser unterstützt werden, in einem anderen ignoriert werden oder gar zu Fehlern führen können. Insbesondere die Verwendung eines Event-Objekts kann massive Probleme verursachen, wenn eine solche Seite im »falschen« Browser geladen wird.

A.8

Objekte in JavaScript

Nahezu die gesamte Leistungsfähigkeit von JavaScript basiert darauf, dass man damit Objekte nutzen kann, die eine gewisse Funktionalität bereitstellen. Das Potenzial von AJAX-Frameworks basiert vollkommen auf Objekten. Um mit JavaScript ein Objekt nutzen zu können, gibt es verschiedene Wege. Objekte können Ihnen in JavaScript zum Beispiel unmittelbar bereitstehen. Das sind dann entweder Standardobjekte der Laufzeitumgebung oder aber Objekte, die vom Browser beim Laden der Webseite aufgrund der (X)HTML-Struktur der Webseite automatisch angelegt und bereitgestellt werden.10

9 Es sei denn, der Aufruf der Funktion ist Teil eines komplexeren Ausdrucks. 10 Letzteres sehen wir gleich beim Blick auf das DOM-Konzept.

341

A Anhang

Die andere Situation ist, dass Sie selbst explizit ein Objekt erzeugen müssen. Um in JavaScript aus einer Objektdeklaration (Klasse) explizit eine neue Objektinstanz anzulegen, verwendet man in der Regel das reservierte Schlüsselwort new, gefolgt vom Bezeichner der Objektdeklaration und anschließend einem Klammerpaar (eventuell mit Parametern darin) – eine Konstruktormethode (oder kurz Konstruktor) kommt zum Einsatz. Der Einsatz eines Konstruktors sieht in JavaScript von der Syntax her schematisch wie folgt aus: Listing A.7: Verwendung eines Konstruktors in JavaScript new [Objektdeklaration]([optionale Parameter]);

In JavaScript gibt es auch Klassenelemente. Diese können Sie wie üblich mit dem vorangestellten Klassennamen verwenden, ohne mit einem Konstruktor zuvor ein Objekt erzeugt zu haben.

A.8.1

Verfügbare DOM-Objekte

Viele der in JavaScript nutzbaren Objekte stehen in einer Objekthierarchiebeziehung zueinander. Dies bedeutet, ein Objekt ist in einem anderen Objekt als Eigenschaft enthalten, so wie eine Webseite im Browser-Fenster enthalten ist. Allerdings sind nicht sämtliche Objekte in einer einzigen Hierarchiebeziehung miteinander verbunden. Unter dem DOM-Konzept stehen u.a. die nachfolgenden Objekte zur Verfügung. Beachten Sie, dass nicht alle Browser sämtliche Objekte unterstützen und es auch beim DOM-Konzept in der Art der Unterstützung zahlreiche Unterschiede gibt. Objekt/Klasse

Beschreibung

all

Ein Objekt von diesem Typ ermöglicht im Prinzip den direkten Zugriff auf alle Elemente einer Webseite. Es gehört jedoch nicht zum offiziellen DOMStandard, sondern ist eine proprietäre Implementierung für den Internet Explorer. Das Objekt wird mittlerweile fast vollständig durch das neuere Objekt node ersetzt, das in modernen Browsern viel besser unterstützt wird. Sie sollten auf den Einsatz des Objekts verzichten.

document

Dieses Objekt repräsentiert die Webseite selbst und enthält die Bestandteile der Webseite als Unterobjekte.

Tabelle A.2: Wichtige DOM-Objekte

342

A.9 Die Verwendung von Stylesheets in einer Webseite

Objekt/Klasse

Beschreibung

event

Ein Objekt, das bei Ereignissen in einer Webseite erzeugt wird und für die (zentrale) Ereignisbehandlung unter JavaScript genutzt werden kann. Allerdings ist diese Ereignisbehandlung per JavaScript auch heutzutage inkonsequent in den verschiedenen Browser-Welten umgesetzt.

form

Das Objekt beinhaltet eine Referenz auf ein Objekt, das ein Formular in einer HTML-Seite repräsentiert.

history

Über history – ein direktes Unterobjekt von window – hat man Zugriff auf die zuvor geladenen Seiten im Browser des Anwenders.

image

Das Objekt beinhaltet eine Referenz auf eine Grafik in einer Webseite.

location

Das location-Objekt – ein direktes Unterobjekt von window – repräsentiert den kompletten URL, der mit einem window-Objekt verknüpft ist – sprich die Adresszeile des Browsers.

navigator

Über navigator hat man Zugriff auf den verwendeten Browser des Anwenders. Dies ist besonders dann wichtig, wenn browserspezifische Anweisungen verwendet werden (damit sind Skript-Anweisungen – insbesondere die Verwendung von Mischkonstellationen – und sogar HTML oder Stylesheets gemeint).

node

In neuen Varianten des DOM-Konzepts stellt dieses Objekt den Zugang zu einzelnen Elementen in einem baumartig strukturierten Dokument zur Verfügung. Es ist ein Schlüsselelement für den Einsatz von modernem DHTML. Über ein node-Objekt haben Sie Zugang zu jedem Bestandteil einer Webseite. Um so etwas aber machen zu können, benötigen Sie einen sogenannten Knoten. Und diesen liefern unter anderem die Methoden getElementById() und getElementsByName() sowie getElementsByTagName().

screen

Über das Objekt screen hat man Zugriff auf diverse plattformspezifische Bildschirminformationen beim Anwender.

window

Dieses Objekt enthält Statusinformationen über das gesamte Browser-Fenster. Jedes Fenster eines Browsers verwendet sein eigenes window-Objekt. Das window-Objekt ist das höchste Objekt in der Objekthierarchie der Objekte, welche den Browser direkt betreffen.

Tabelle A.2: Wichtige DOM-Objekte (Forts.)

A.9

Die Verwendung von Stylesheets in einer Webseite

Stylesheets bestehen allgemein aus verschiedenen Regeln zur Formatierung von Elementen. Um Stylesheets wie CSS in einer Webseite zu verwenden, müssen Sie diese einer HTML-, XHTML- oder XML-Seite hinzufügen. Dies kann darüber geschehen, dass Sie Stylesheets in ein Dokument einbetten oder aus einer externen Datei importieren. Ob und wie das geht, hängt vom Typ der Daten ab, auf die eine CSS-Formatierung angewendet werden soll.

343

A Anhang

Tipp Eine externe Lösung ist in jedem Fall vorzuziehen, denn erst damit erreichen Sie die Trennung von Formatierung und Inhalt. Insbesondere kann eine externe Stylesheet-Datei von mehreren Dokumenten gemeinsam verwendet werden. Das reduziert die Arbeit bei der Erstellung und erleichtert vor allem die Wartung eines Projekts erheblich. Die Einbettung eines internen Stylesheets in eine Webseite erfolgt über das <style>Tag, einen reinen HTML-Container. In dessen Inneren werden alle Stilregeln definiert. In HTML kann so ein Style-Bereich an jeder Stelle der Webseite notiert werden. Hinweis In XHTML gehören diese Angaben in den Header der Seite. In XML kann man so keine Stylesheets verwenden.

Ein Stylesheet wird bei HTML schematisch wie folgt eingebunden: Listing A.8: Schema für einen Style-Container in HTML <style type="text/css">

Im Fall von XHTML müssen Sie das Innere des Containers in einen CDATA-Bereich einschließen und für einige Browser die Markierungen mit CSS-Kommentaren vor dem CSS-Parser verbergen. Listing A.9: Schema für einen Style-Container in XHTML <style type="text/css"> /* */

Wenn Sie bei nur einem Element eine individuelle Stilinformation angeben wollen, können Sie bei Webseiten eine Stylesheet-Anweisung auch als Inline-Definition eines Elements verwenden. Dies bedeutet, über einen zusätzlichen style-Parameter

344

A.9 Die Verwendung von Stylesheets in einer Webseite

innerhalb des Tags wird ein Attributwert gesetzt und die Stilregel gilt ausschließlich innerhalb des definierten Containers. In nahezu jedem Fall ist die Verwendung von externen Stylesheets die beste Wahl. Eine Referenz auf ein externes Stylesheet notieren Sie in einer Webseite mithilfe des -Tags. Nachfolgend sehen Sie das Schema zur Referenz auf eine externe CSS-Datei: Listing A.10: Einbinden einer externen CSS-Datei

Für die XHTML-Konformität notiert man das Element explizit als leeres Element und im Header.

A.9.1

Kaskadierung von Regeln

Jede CSS-Stilinformation in einer Webseite, die im Widerspruch zu einer HTMLbeziehungsweise XHTML-Formatierung steht, wird die HTML- beziehungsweise XHTML-Angaben überschreiben. Ansonsten gelten in einer Webseite erst einmal alle Angaben aus HTML weiter. Angenommen, Sie legen mit HTML die Hintergrundund Vordergrundfarbe einer Webseite fest und spezifizieren dann mit einem Stylesheet den Hintergrund mit einer anderen Farbe. Dann wird die Vordergrundfarbe unverändert aus den HTML-Definitionen wirken, während die HTML-Definition des Hintergrunds über die Stylesheet-Definition geändert wird. Diese Form der Modifizierung einer Layoutbeschreibung nennt man Kaskadierung. Diese wirkt sich auch auf Stylesheets selbst aus. Abhängig von der Art und Reihenfolge der Stilvereinbarungen ergänzen oder überschreiben sich Regeln. Dabei gilt, dass die Wirkung einer Regel aus einer externen Stylesheet-Datei durch eine widersprechende Regel aus einem eingebetteten Stylesheet und diese wiederum von einer widersprechenden Inline-Regel überschrieben wird. Wenn auf der gleichen Ebene widersprechende Stilinformationen zu finden sind, ist das Verhalten von Browsern leider nicht ganz einheitlich. In der Regel wird jedoch die zuletzt notierte Stilvereinbarung als gültig angesehen. Hinweis Aus diesem Verhalten erklärt sich auch der Name Cascading Style Sheets.

345

A Anhang

A.9.2

Die konkrete Syntax von CSS-Deklarationen

Kommen wir nun kurz noch zur konkreten Syntax von CSS-Deklarationen und den Möglichkeiten zur Angabe von Formatierungsregeln. Die Syntax einer CSS-Deklaration folgt immer dem gleichen Aufbau. Sie geben einen Namen, einen Doppelpunkt und die zu formatierende Eigenschaft an. Die Syntax einer CSS-Deklaration sieht schematisch so aus: Listing A.11: Schema einer CSS-Deklaration [name] : [wert]

Das zu formatierende Element (der sogenannte Selektor) wird einer solchen Regel vorangestellt. Mehrere Formatregeln für ein Element werden mit Semikolon getrennt und meist in geschweifte Klammern gesetzt. Dabei gibt es verschiedene Formen an Selektoren:  Elementselektoren  Attributselektoren  Generationenselektoren  Universalselektor  Pseudo-Klassen

A.10

Die Syntax eines XML-Dokuments

Ein XML-Dokument muss wenige, aber strenge syntaktische Regeln einhalten. Wenn ein Dokument diese Regeln einhält, nennt man es wohlgeformt! Die Reihenfolge dieser nachfolgenden Regeln ist willkürlich. Für die Wohlgeformtheit müssen alle Regeln eingehalten werden:  XML-Dokumente bestehen grundsätzlich aus Unicode-Zeichen (16-Bit-Zeichen-

satz). Allerdings können Sie bei der Erstellung Ihres XML-Dokuments in einem Editor ANSI-Code speichern. Dann interpretiert der Parser das als Unicode.  In XML wird grundsätzlich zwischen Groß- und Kleinschreibung streng unter-

schieden.  Ein XML-Dokument beginnt immer mit einem sogenannten Prolog. Der Prolog (er sieht derzeit in der einfachsten Form so aus: ) muss am

Beginn eines XML-Dokuments stehen.  Ein XML-Dokument darf nur genau ein Wurzelelement (auch Root-Tag oder Do-

kumentelement genannt) besitzen. So ein Wurzelelement muss auch auf jeden Fall vorhanden sein und folgt, abgesehen von Kommentaren, unmittelbar dem Prolog.

346

A.10 Die Syntax eines XML-Dokuments

 Elemente müssen sauber verschachtelt werden.  Jedes Element muss ein Ende-Tag haben oder als leeres Element notiert werden.  Attributen muss immer ein Wert zugewiesen werden und der Attributwert muss

zwingend in Anführungszeichen stehen. Hinweis Neben Elementen gibt es in XML weitere Komponenten, die die Struktur eines XML-Dokuments weiter bestimmen, etwa Kommentare, Prozessinstruktionen, Referenzen oder CDATA-Abschnitte.

A.10.1

Namensräume

Da Sie über XML in der Lage sind, Ihre eigenen Tags frei zu definieren, kann es zu Überschneidungen kommen. Tags können gleiche Namen, aber verschiedene Bedeutungen haben. Mit Namensräumen wird versucht, in XML (oder auch dem Dojo Toolkit) sicherzustellen, dass Elemente in bestimmten Bereichen eindeutig sind. In der XML-Spezifikation ist ein Namensraum nichts anderes als ein per Doppelpunkt abgetrenntes, definiertes Präfix für einen spezifischen Elementnamen. Um Namensräume von verschiedenen Gruppen zu trennen, wird dem Präfix eine komplexere Struktur zugeordnet, für die das Präfix nur eine Abkürzung darstellt.

A.10.2

Gültige XML-Dokumente

Die minimale Forderung an ein XML-Dokument ist wie gesagt die Wohlgeformtheit. Das bedeutet, dass alle syntaktischen XML-Regeln eingehalten werden. Darüber hinaus kann man von einem XML-Dokument die Gültigkeit fordern. Dies bedeutet, einem XML-Dokument wird über die syntaktische Wohlgeformtheit hinaus eine Grammatik zugeordnet, die ein validierender Parser berücksichtigen kann. Diese Grammatik wird in Form von Informationen abgelegt, die nicht zum Inhalt des XMLDokuments zählen. Die Grammatik wird entweder in Form einer DTD (Document Type Definition) oder eines XML-Schemas formuliert. Ein XML-Dokument ist gültig oder valid, wenn ihm eine DTD oder ein Schema zugeordnet ist und sämtliche Elemente samt Attribute usw. gemäß dieser Vorgabe angeordnet sind und allen sonstigen Vorgaben darin (Anzahl, Art des Inhalts etc.) entsprechen. Der Umkehrschluss ist zwingend – ist nur eine Bedingung verletzt, ist ein XML-Dokument nicht mehr gültig.

347

A Anhang

Hinweis Die Gültigkeit setzt zwingend die Wohlgeformtheit voraus!

A.11

Add-ons für Firefox

Verschiedene besonders interessante Add-ons in Hinsicht auf die Entwicklung und das Testen von AJAX-Applikationen habe ich in der folgenden Tabelle A.3 zusammengestellt. Add-on

Beschreibung

Bandwidth Tester

Informationen über die Bandbreite Ihrer aktuellen Internetverbindung

Broadband Speed Test and Diagnostics

Diese Erweiterung zeigt Ihre öffentlich sichtbare IP-Adresse und den sichtbaren Domain-Namen und unterstützt Geschwindigkeitsmessungen für Download und Upload. Dazu existieren eine Reihe von Diagnosetests, wenn es Probleme mit der Übertragungsgeschwindigkeit gibt.

Console²

Ein Ersatz für die doch recht einfach gehaltene JavaScriptFehlerkonsole, die Firefox als Standard mitbringt

CrossFTP

Ein FTP-Client, der sich in Firefox integriert

CSS validator

Überprüfung der Gültigkeit der CSS-Regeln, die in einer Webseite verwendet werden

Execute JS

Eine Erweiterung, mit der Sie direkt JavaScripts ausführen können, ohne sie in eine passende Webseite einbauen zu müssen

Firebug

Mehr oder weniger das Schweizer Taschenmesser für Webentwickler; mit Debugger, Analyse-Tool für CSS, JavaScript, HTML und vieles mehr

Header Monitor

Ein Monitor für die Anzeige der HTTP-Antwort-Header in der Statuszeile

Html Validator

Kontrolle einer Webseite auf Gültigkeit mit dem Standard. Allerdings ist das Feature auch in den Web Developer bereits integriert.

Image Zoom

Diese Erweiterung erlaubt das einfache Vergrößern und Verkleinern von Bildern in einer Webseite mit dem Kontextmenü oder der Maus.

Tabelle A.3: Wichtige Add-ons von Firefox für die Webentwicklung

348

A.11 Add-ons für Firefox

Add-on

Beschreibung

Live HTTP headers

Dieses Add-on bezeichnet einen in Firefox direkt integrierten Sniffer, mit dem Sie den Datenaustausch zwischen Firefox und dem Webserver überwachen können. Dies wird gerade im Zusammenhang mit AJAX sehr wichtig, denn Sie erkennen hier nicht an Veränderungen in der Adresszeile des Browsers oder dem schlichten neuen Laden einer Webseite, ob Daten ausgetauscht werden. Im Gegensatz zu vollständigen Sniffern, die den gesamten Netzwerkverkehr überwachen können, ist Live HTTP headers auf die HTTP-Kommunikation zwischen dem Browser und dem Webserver beschränkt und zeigt auch nur die sogenannten Header-Daten an. Dies erleichtert aber die Bedienung erheblich und erhöht die Übersichtlichkeit (natürlich auf Kosten der Flexibilität und des Leistungsumfangs). Nach dem Neustart des Browsers steht Ihnen auch dieses Tool unter dem Menüpunkt EXTRAS zu Verfügung. Der spätere Einsatz ist ganz einfach. Sie müssen bloß das Kontrollkästchen MITSCHNEIDEN aktivieren.

Modify Headers

Das Add-on erlaubt Ihnen das Hinzufügen, Modifizieren und Filtern von HTTP-Requestheadern.

NoScript

Ein Add-on zum gezielten Aktivieren und Deaktivieren von JavaScript bzw. bestimmten Verhaltensweisen von Skripten. Eine immens interessante Möglichkeit, um zu testen, wie sich eine Webseite verhält, wenn sie ein Besucher ohne JavaScriptUnterstützung lädt.

Regular Expressions Tester

Eine Testmöglichkeit für reguläre Ausdrücke.

UrlParams

Anzeige der GET- und POST-Parameter einer HTPP-Anfrage. Dieses Feature liefert aber auch ein Sniffer wie HTTP Live Headers.

Venkman

Ein JavaScript-Debugger

Web Developer

Über dieses Add-on stehen Ihnen verschiedene Webentwicklungs-Tools zur Verfügung, die von angepassten CSS bis hin zur Validierung einer Seite reichen.

XML Developer Toolbar

Die XML Developer Toolbar ist eine Erweiterung, die für verschiedenste XML-Zwecke verwendet werden kann – von der Prüfung der sogenannten Wohlgeformtheit über die Validierung bis hin zur Generierung von Schemas und DTDs und dem Transformieren von XML-Daten.

XPather

Damit können Sie über ein Kontextmenü XPath-Ausdrücke testen.

Tabelle A.3: Wichtige Add-ons von Firefox für die Webentwicklung (Forts.)

349

A Anhang

Achtung Beachten Sie, dass die genannten Add-ons unter Umständen nicht in allen Versionen von Firefox funktionieren. Die passenden Versionen sind aber in der Regel auf den Webseiten zum Download entsprechend ausgezeichnet.

Hinweis Gegebenenfalls müssen Sie nach dem Anklicken des Installationshyperlinks explizit die Möglichkeit zur Installation freigegeben. In jedem Fall bekommen Sie einen Dialog angezeigt, dass von einer externen Quelle einer Erweiterung Ihres Browsers installiert werden soll. Wenn Sie der Installation zustimmen, wird die Erweiterung für Ihren Browser installiert. Nach dem nächsten Start des Browsers steht Ihnen das Add-on dann unter dem Menüpunkt EXTRAS zur Verfügung.

A.12

Die Meldungen eines Webservers

Ein Webserver meldet bei einer Transaktion zahlreiche Statuscodes. Diese sind weitgehend standardisiert und können im Rahmen einer RIA verwertet werden. Dabei hängen die Meldungen teilweise von der HTTP-Version ab.

Statuscode

Beschreibung

1xx

Ein HTTP-Statuscode, der mit einer 1 beginnt, kennzeichnet eine vorläufige Antwort. Die Transaktion wird mit einer lxx-Antwort nicht beendet und die Bearbeitung der Anfrage dauert noch an.

2xx

Mit einer 2 beginnende Statuscodes kennzeichnen eine erfolgreiche Operation. Allerdings muss je nach Situation das genaue Vorgehen weiter vom Client geregelt werden. Statuscode 200 steht etwa für OK und bedeutet, dass eine Anfrage erfolgreich bearbeitet und das Ergebnis der Anfrage in der Antwort übertragen wurde. Statuscode 201 bedeutet, eine angeforderte Ressource wurde vor dem Senden der Antwort erstellt, und 202, dass eine Anfrage zwar akzeptiert wurde, aber erst zu einem späteren Zeitpunkt ausgeführt werden kann.

Tabelle A.4: Statuscodes eines Webservers

350

A.12 Die Meldungen eines Webservers

Statuscode

Beschreibung

3xx

Mit einer 3 beginnende Statuscodes kennzeichnen eine Umleitung und erfordern weitere Schritte seitens des Clients. So steht 300 für eine mehrfach verfügbare Ressource, deren konkrete Auswahl in einem Folgeschritt benannt werden muss. 301 und 302 sind die Kennzeichnung, dass eine Ressource unter einer neuen Adresse zur Verfügung steht (301 dauerhaft und 302 temporär).

4xx

Mit einer 4 beginnende Statuscodes kennzeichnen eine fehlerhafte Anfrage. So steht 400 für Bad Request (fehlerhafter Aufbau der Clientanfrage), 401 für Unauthorized (Authentifizierung ungültig), 403 für Forbidden (fehlende Berechtigung des Clients) oder 404 für Not Found (die angeforderte Ressource wurde nicht gefunden).

5xx

Mit einer 5 beginnende Statuscodes kennzeichnen einen Serverfehler. Dies umfasst Statuscode 500 (Internal Server Error), 501 (Not Implemented), 502 (Bad Gateway) oder 505 (HTTP Version not supported).

Tabelle A.4: Statuscodes eines Webservers (Forts.)

351

Stichwortverzeichnis $$() 267 $() 264 $_GET 229 $_POST 232 $A() 272 $F() 270 $H 272 $R() 272 $super() 281 $w() 273 .style, Dojo 237 127.0.0.1 74 A abort() 79 Academic Free License 161 AccordionContainer 194, 210 AccordionPane 210, 212 ActiveXObject 75 Ad-hoc-Typkonvertierung 338 Add-ons, Firefox 35 addClass() 115 Dojo 235 addClassName() 293 addListener(), YUI 118 addMethods() 281, 293 addOnLoad(), Dojo 184 addToGroup() 131 adjust() 192 AFL 161 AIR 14 AJAX Caching-Problem 138 Dojo 219 Prototype 275 Scriptaculous 313 Synchrone Anfrage mit Dojo 233 YUI 131 Ajax Technology Framework 21 Ajax Toolkit Framework 20

AJAX-Anfrage periodisch 278 YUI 134 AJAX-Framework, Positionierung 88 Ajax.Autocompleter 313 Ajax.InPlaceEditor() 314 Ajax.Updater() 276 AjaxPeriodicalUpdater() 275 AjaxRequest() 275 AjaxUpdater() 275 Akkordeon-Bereichen 210 all 342 ancestors() 293, 302 animateProperty() 242 Animationen, Dojo 241 Animationseffekte, Scriptaculous 310 Animationsereignisse, Dojo 255 anonymous_element_ 305 Anweisungen 340 Apache 33 Apache Friends 33 API-Dokumentation Prototype 263 YUI 99 Aptana 39 argument 134 YUI 133 Array, JSON 68 Array.from(), Prototype 272 ASP.NET AJAX 24 Asynchronous JavaScript and XML siehe AJAX asyncRequest() 132 Atlas 24 attachEvent() 116 Attribut Dijit 192 HTML 327 Ausblenden 242 Ausdrücke 340

Stichwortverzeichnis

Ausnahmebehandlung 76 Prototype 274 Avatar, Flash 253 B Bad Gateway 351 Bad Request, HTTP 351 Bandwidth Tester 348 base.css 103 Basistemplate, Dojo 178 beforeBegin 256 Blockelemente 329 Blogs 13 Book of Dojo 176 Boolescher Wert, JSON 68 BorderContainer 194, 209 Broadband Speed Test and Diagnostics 348 Browserhistorie, Dojo 180 Browserweiche 76 BSD 161 Buch-CD 21, 27, 324 Build Tools, Dojo 162 Button 194 C cache, YUI 138 Caching, AJAX 138 callback 314 Callback-Funktion 75 Dojo 220 Callback-Objekt, YUI 133 cancelText 314 Cascading Style Sheets siehe CSS 58 CDATA-Abschnitt 336 CDN 110, 166 chain() 248 Charts, Vektordaten 181 cheat sheets, YUI 109 CheckBox 194 childElements() 293, 302 Class, Prototype 280 Class.create() 280 clickToEditText 314 Client-Server-System 324 CMYK 182 ColorPalette 195 cols 314 combine() 249 ComboBox 194 ComboButton 194 COMPLETED 80 Connection Manager 131 console.log() 153

354

Console² 348 containment 320 content, Dojo 228 Content Delivery Network siehe CDN 110 Content Distribution Network siehe CDN 110 ContentPane 194, 209 create(), Class 280 Cross-Domain-Zugriff, AJAX 220 CrossFTP 348 CSS 58 CSS validator 348 CSS-Bibliotheken, YUI 103 CurrencyTextBox 194 currentTarget 116 Custom Event Utilities 117 CustomEvent, YUI 117 D Date, Prototype 286 Datenpakete 325 Datentypen 338 DateTextBox 194 Datum, Dojo 181 debug-Versionen, YUI-Komponenten 159 Debugger, JavaScript 349 decay 279 delay 241, 309 DHTML 57 Dialog 195 Dijit 162, 174, 191 Attribut 192 Erweiterungspunkt 192 Layout 207 Methode 192 Dijit at a Glance 176 dijit.demos 181 dijit.Editor 197f. dijit.form 181 dijit.form.Button 224 dijit.layout 181 dijit.layout.AccordionContainer 210 dijit.layout.AccordionPane 210 dijit.layout.BorderContainer 209 dijit.layout.ContentPane 209 dijit.layout.LayoutContainer 193, 209 dijit.layout.SplitContainer 209 dijit.layout.StackContainer 210 dijit.layout.TabContainer 210 dijit.Menu 196 dijit.MenuItem 196 dijit.popup 181 dijit.Toolbar 201 dijitEditorIcon 202

Stichwortverzeichnis

display 294, 299 Django Templating Language 182 djConfig 222 djConfig.extraLocale 193 document 55, 342 Document Object Model siehe DOM 54 Document Type Definition 347 document.getElementsByClassName() 274 Dojo AJAX 219 Animationen 241 Animationsereignisse 255 Basistemplate 178 Build Tools 162 Callback-Funktion 220 Dokumentation 164 Ereignisse 199 Fehlerfunktion 221 Flash 251 Grundgerüst 178 JSON 221 Konfiguration 172 Lizenz 161 Namensräume 180 Paketsystem 162 play() 242 Subversion Code Repository 165 Synchrone AJAX-Anfrage 233 Testen 173 Themes 163 XHR 219 XmlHttpRequest 219 Dojo Book 170 Dojo Core 162 Dojo Foundation 19, 161 Dojo Toolkit 19 Dojo Widget Library siehe Dijit 174, 191 Dojo-Eventsystem 198, 224 Dojo-Toolkit 161 Dojo-Typ 185 dojo._Animation 242 dojo.addOnLoad() 184 dojo.animateProperty() 242 dojo.back 180 dojo.byId() 184, 229 dojo.colors 180 dojo.connect() 199 dojo.currency 181 dojo.data 181 dojo.date 181 dojo.date.compare() 181 dojo.date.difference() 181 dojo.debug 181 dojo.dnd 181

dojo.fadeIn() 242, 249 dojo.fadeOut() 242, 249 dojo.fx 181, 246 dojo.fx.chain() 246, 248 dojo.fx.combine() 246, 249 dojo.fx.slideTo() 246 dojo.fx.wipeIn() 246, 250 dojo.fx.wipeOut() 246, 250, 252 dojo.i18n 181 dojo.io 181 dojo.io.bind() 219 dojo.js 171 dojo.logging 181 dojo.moduleUrl() 254 dojo.NodeList 234 dojo.NodeList-fx 234, 257 dojo.number 181 dojo.parser 181 dojo.query() 234 dojo.query()Ereignisse 236 dojo.regexp 181 dojo.require() 179 dojo.rpc 181 dojo.string 181 dojo.xhrGet() 219, 224 dojo.xhrPost() 219, 231 dojo/method 199 dojoAttachPoint() 192 DojoExternalInterface.as 255 dojoType 185, 187, 224 DojoX 163 dojox.charting 181 dojox.color 182 dojox.dtl 182 dojox.encoding 182 dojox.flash 254 dojox.flash.Embed() 254 dojox.flash.get() 255 dojox.flash.Info() 254 dojox.flash.Install() 254 dojox.flash.setSwf() 254f. dojox.fx 182 dojox.gfx 182 dojox.gfx3d 182 dojox.image 182 dojox.io 182 dojox.jsonPath 182 dojox.lang 182 dojox.layout 182 dojox.math 182 dojox.off 182 dojox.presentation 182 dojox.regexp 182 dojox.rpc 182

355

Stichwortverzeichnis

dojox.storage 182 dojox.string 182 dojox.timing 182 dojox.validate 182 dojox.widget 182 dojox.xml 182 Dokumentation Dojo 164 Prototype 263 DOM 54 Löschen und Einfügen von Elementen 295 Dom Collection, YUI 102, 109 DOM Inspector 36 DOM-Methoden, Verketten in Prototype 286 DOM-Objekte 342 domNode, Dijit 192 DomParser 182 Drag and Drop Manager, YUI 130 Drag&Drop Scriptaculous 317 YUI 124 Draggable 317 DropDownButton 194 dropOnEmpty 320 DTD 347 duration 241, 309 Dynamic HTML 14 Dynamic Languages Toolkit Project 21 E Eclipse 40 Eclipse Public License 40 Eclipse-Foundation 20 Editor 195 Effect 310 Effect.Fade() 310 Effect.Morph() 311 Eigenschaft, JSON 67 Einblenden 242 Einfügen, Elemente im DOM 295 Eingabeelemente, Scriptaculous 313 Element Prototype 286 wegblenden 299 Element.extend() 267 Element.Methods 291 Element.update() 291 Element.writeAttribute() 291 EPL 40 Ereignis 341 Dojo 199 dojo.query() 236

356

Ereignisbehandlung, YUI 116 error, Dojo 221 Erweiterungspunkt, Dijit 192 eval() 86, 88, 141 event 343 Event Utility 116 YUI 102, 120 Eventhandler 328 Eventhandling 341 Dojo 198 Exceptionhandling 76 Execute JS 348 EXT 20 Extensible Markup Language siehe XML 59 extension point, Dijit 192 F Fade-out, Dojo 235 fadeIn() 242 fadeOut() 242 failure 134 YUI 133 false, JSON 68 Farbgenerator 182 Farbutilities, Dojo 180 Favoriten 90 Fehlerfunktion, Dojo 221 Fehlertoleranz, Prinzip 51 FilteringSelect 194 Firebug 39, 348 Firefox Add-ons 35 Interessante Add-ons 348 Fisheye Demo, Dojo 175 Flash ExternalInterface API 254 Flash-Animationen, Dojo 251 Flash-Avatar 253 font.css 103 Forbidden, HTTP 351 form 343 Form.Element.getValue() 270 Formatvorlagen 57 formId 314 forms 55 Formulare, Scriptaculous 313 Formularfeld, Zugriff über Prototype 270 fps 309 frames per second siehe fps 309 Framework, Definition 17 frequency 279 FTP-Client 348 Funktionen, JavaScript 339 Funktionsreferenzen 75

Stichwortverzeichnis

G Garrett, Jesse James 48 Geschwindigkeitsmessung, Datenübertragung 348 GET 69 getAllResponseHeaders 134 getAllResponseHeaders() 79 getDimensions() 293 getElementById() 56 getElementsByClassName() 115 Prototype 274 getElementsByName() 56 getElementsByTagName() 56 getListeners() 123 getResponseHeader 134 getResponseHeader() 79 getStyle() 112, 293 Getter 111 getViewportHeight() 115 getViewportWidth() 115 getXY() 111 ghosting 319f. Gmail 49 Google Groups 49 Google Maps 49 Google Suggest 49 Google Web Toolkit 18, 24 Grafiken, Vektordaten 181 Graphical User Interface 18 Grid 195 grid.css 103 Größenveränderungen 250 Gültigkeit Webseiten 331 XML 347 GUI 18 GWT 18, 24 H handle 320 Dojo 221 handleAs, Dojo 221 Handler deferral 115, 121 hasClass() 115 Header Monitor 348 hide() 293, 303 Historie Browser 90 Dojo 180 history 343 HSL 182 HSV 182 htdocs 74

HTML Eventhandler 328 grundlegende Details 326 Html Validator 348 HTTP 69, 326 HTTP Live Headers 73 HTTP Version not supported 351 HTTP-Header 70 Hypertext Transfer Protocol siehe HTTP 326 I i18n, Dojo 181 iconClass 202 id, Dijit 192 identify() 293, 302 image 343 Image Zoom 348 initialize() 280 InlineEditBox 194f. Inline-Elemente 329 Inline-Referenz, JavaScript 337 innerHTML 57 innerText 57 insert() 293, 296 Integrated Development Enviroment siehe IDE 36 Integrierte Entwicklungsumgebung siehe IDE 36 INTERACTIVE 80 Interaktionsgruppen, YUI 130 Internal Server Error 351 Internationalisierung, Dojo 181 Internet, Grundlagen 324 Internet Explorer 6 Application Compatibility VPC Image 30 Internet-Dienste 324 IP-Nummern 325 isDebug 171f. J Java 53 JavaFX 14 JavaScript 53 Einbindung in Webseiten 334 Objekte 341 Prototyping 280 Syntax 338 JavaScript Object Notation siehe JSON 66 JavaScript-Debugger 349 JavaScript-Klassen, Prototype 280 jdConfig 172 JQuery 20 JScript 53

357

Stichwortverzeichnis

JSON 15, 66, 85, 139 Dojo 221 Prototype 286 JSON Utility, YUI 139 json-comment-filtered 222

moduleUrl() 254 MooTools 20 Morphing 311 Multiple IE Installer 30 MySQL 33

K Klassen, Prototype 280 Klassenelemente 342 Knoppix 30 Knoten 343 Kollektive Intelligenz 13 Komponenten 18 XML 61 Konstruktormethode 342

N Namensräume Dojo 180 XML 347 Namespaces, Dojo 180 navigator 343 new 342 new dijit.___() 192 next() 293 nextSiblings() 294, 302 node 343 NodeList, Dojo 234 Noir, Dijit-Theme 191 NoScript 349 Not Found, HTTP 351 Not Implemented, HTTP 351 null, JSON 67 NumberSpinner 194 NumberTextBox 194

L lang, Dijit 193 language 334 Layout-Widgets 208 Dojo 209 layoutAlign 216 Dijit 193 LayoutContainer 193f., 209 Lesezeichen 90 Literale 338 Live HTTP headers 349 Live-Distribution 30 Lizenz, Dojo 161 load, Dojo 220 LOADED 80 LOADING 80 localhost 74 location 343 Löschen, Elemente im DOM 295 Löschen und Einfügen von Elementen im DOM 295 Logger Control, YUI 150 LogReader, YUI 152 Loopback-Adresse 74 M Markup Validation Service, W3C 331 Maschinelle Verwertung 90 Mashups 13 match() 293 maxStackEntries 153 Mehrzeilige Texteingabe, Dojo 189 Menu 195 Methode 339 Dijit 192 MochiKit 20 Modify Headers 349

358

O O’Reilly, Tim 49 Object.extend() 280 ObjectRange 272 Objektdefinition, JSON 67 Objekte 341 OK, HTTP 350 okText 314 onAvailable() 121 onComplete 314 onContentReady() 122 onDOMReady() 123 onEnd 256 onFailure 314 onLoad, Dojo 185 onreadystatechange 80 open() 79 Operanden 340 Operatoren 340 P Pakete 325 Paketsystem, Dojo 162, 179 Paketvermittlung 325 Parameter, HTML 327 parse() 140 parseOnLoad 171f.

Stichwortverzeichnis

periodische AJAX-Anfrage 278 phpMyAdmin 33 play(), Dojo 242 PopUp-Menü, Dojo 195 Popups, Dojo 181 Positionierung, YUI 111 POST 69 Dojo 230 preventDefault() 239 previous() 294, 302 Prinzip der Fehlertoleranz 51 ProgressBar 195 Protokollierung, Dojo 181 Prototype 19, 261 AJAX 275 Ausnahmebehandlung 274 Dokumentation 263 Download 262 Shortcuts 264 Prototyping 280 Pseudo-URL 70 purgeElement() 123 Q Quellen 323 Quirks Mode 28 R readAttribute() 294 readyState 80 Reduzierbare Paletten 210 Reguläre Ausdrücke 349 Dojo 181 Regular Expressions Tester 349 remove() 294, 296 removeClass() 115 removeClassName() 294 removeFromGroup() 131 removeListener() 123 replace() 294 replaceClass() 115 Request 69 Request Header 70 require(), Dojo 179 reset.css 103, 111 Response 69 Response Header 70 responseText 80, 134 responseXML 81, 134 revert 317 RIA 13 Rich Ajax Platform 20 Rich Internet Application siehe RIA

Rich Text Editor, Dojo 197 Rico 262 rows 314 RPC, Dojo 181, 182 Ruby on Rails 262 runTests.html, Dojo 173 Russell, Alex 161 S Sandkastenprinzip 75 savingText 314 Schaltfläche, Dojo 190, 224 Schema, XML 347 screen 343 script.aculo.us 262 script.aculo.us siehe Scriptaculous 19 Scriptaculous 19, 308 Effect 310 scroll 320 select() 294 Selektor 346 Semantic Web 330 send() 80 Server 324 setMimeType() 80 setRequestHeader() 80 setStyle() 112, 294 setSwf(), Dojo 254 Setter 111 setXY() 111 SGML 50 Shortcuts, Prototype 264 show() 294, 302 Silverlight 14 size 314 Slider 194, 313 slideTo() 246 SNA 13 Sniffer 73, 349 Social Network Analysis siehe SNA Soria, Dijit-Theme 191 Sortable 320 Sortieren per Drag&Drop 320 SplitContainer 194, 209 Spracheinstellung, Dijit 193 srcNodeRef, Dijit 193 StackContainer 194, 210 startup() 211 status 81, 134 statusText 81, 134 Stellvertreterelement, Drag&Drop 129 Stephenson, Sam 261 Steueranweisungen, HTML 326

359

Stichwortverzeichnis

stringify() 144 Structured Generalized Markup Language siehe SGML 50 style 344 Style Sheets 57 Einbinden in eine Webseite 343 Subversion Code Repository, Dojo 165 success 133 YUI 133 Suchmaschinen 90 SWFObject 255 sync, Dojo 233 Synchrone AJAX-Anfrage, Dojo 233 T TabContainer 194, 210 tag 320 Tags 326 TCP/IP 325 Templates, Dojo 162 Textarea 194 TextBox 194 Texteingabe, Dojo 189 Themes, Dojo 163 tId 134 timeout, YUI 139 TimeTextBox 194 TitlePane 195 toggle() 294, 299 toggleClassName() 294 toJSON() 286 Toolbar 195 Dojo 201 Toolkit, Definition 17, 18 Tooltip 195 TooltipDialog 195 Transmission Control Protokoll/Internet Protokoll siehe TCP/IP 325 Transportprotokoll 325 Tree 195 true, JSON 68 Try.these() 274 Tundra, Dijit-Theme 191 type 335 Typkonvertierung 338 U Überschreiben, Prototype 281 UI siehe User Interface 18 Unauthorized, HTTP 351 UNINITIALlZED 80 update() 291, 294 URL-Kodierung 71

360

UrlParams 349 usePlainJson 222 User Interface 18 Utility methods, Prototype 264 V ValidationTextBox 194 Variablen 338 VBScript 53 Vektordaten, Dojox 181 Venkman 349 Verbindungsorientierte Datenkommunikation 325 Vererbung, Prototype 280 Verkettung von Animationen 248 Verschieben, Element 246 virtual Machine siehe VM 31 Virtual PC 31 VirtualBox 31 Virtualisierungslösung 31 visible() 295 VM 31 VMWare 31 Vorläufige Antwort, HTTP 350 VPC 30 W W3C 329 Währungen, Dojo 181 Web Developer 331, 349 Webformular, Prototype 270 Webserver 33 lokal 74 Statuscodes 350 Wertebereich, Prototype 272 Widgets 18 Wikis 13 window 55, 343 window.onload 121 wipeIn() 250 wipeOut() 250 wohlgeformt 346 World Wide Web-Consortium 329 writeAttribute() 291, 295 Wurzelelement 346 X XAMPP 33 XHMLHttpRequest, Try.these() 274 XHR, Dojo 219 xhrGet() 219 XHTML 329 grundlegende Details 326

Stichwortverzeichnis

XML 59 Dojo 182 XML Developer Toolbar 349 XMLHttpRequest 47, 75, 132 XmlHttpRequest, Dojo 219 XMLHttpRequest-Objekt Details 75 erzeugen 75 XML-Schema 347 XPath 349 XPather 349 Y YAHOO Global Object 102, 108, 111 Yahoo User Interface siehe YUI 97 YAHOO.lang.JSON 140 YAHOO.lang.JSON.parse() 140 YAHOO.lang.JSON.stringify() 144 YAHOO.log() 153 YAHOO.util.Connect 132 YAHOO.util.Connect.asyncRequest() 132 YAHOO.util.CustomEvent 117 YAHOO.util.DD 126 YAHOO.util.DDM 130 YAHOO.util.DDTarget 130 YAHOO.util.Dom 111, 126 YAHOO.util.Dom.get() 126 YAHOO.util.DragDropMgr 130 YAHOO.util.Event 117 YAHOO.util.Event.addListener() 118 YAHOO.util.Event.getListeners() 123 YAHOO.util.Event.purgeElement() 123

YAHOO.util.Event.removeListener() 123 YAHOO.widget.Logger 153 YAHOO.widget.Logger.disableBrowserCons ole() 153 YAHOO.widget.Logger.enableBrowserCons ole() 153 YAHOO.widget.Logger.reset() 153 YAHOO.widget.LogReader 152 YUI 19, 97 AJAX 131 AJAX-Anfrage 134 Ereignisbehandlung 116 JSON Utility 139 YUI Compressor 148 YUI Configurator 149 YUI Core 102, 108 YUI Developer Tools 102, 147 YUI Event Utility 116 YUI Grids CSS 103 YUI Library Controls/Widgets 102 YUI Library CSS Tools 103 YUI Library Utilities 102, 123 YUIBlog 109 YUI-Komponente, Betastadium 102 Z Zahl, JSON 68 Zeichenkette, JSON 68 Zeiteingabe, Dojo 190 Zeitzone, Dojo 181 Zurück-Schaltfläche 90 Zustandslose Datenkommunikation 325

361

Copyright Daten, Texte, Design und Grafiken dieses eBooks, sowie die eventuell angebotenen eBook-Zusatzdaten sind urheberrechtlich geschützt. Dieses eBook stellen wir lediglich als persönliche Einzelplatz-Lizenz zur Verfügung! Jede andere Verwendung dieses eBooks oder zugehöriger Materialien und Informationen, einschliesslich •

der Reproduktion,

•

der Weitergabe,

•

des Weitervertriebs,

•

der Platzierung im Internet, in Intranets, in Extranets,

•

der Veränderung,

•

des Weiterverkaufs

•

und der Veröffentlichung

bedarf der schriftlichen Genehmigung des Verlags. Insbesondere ist die Entfernung oder Änderung des vom Verlag vergebenen Passwortschutzes ausdrücklich untersagt! Bei Fragen zu diesem Thema wenden Sie sich bitte an: [email protected] Zusatzdaten Möglicherweise liegt dem gedruckten Buch eine CD-ROM mit Zusatzdaten bei. Die Zurverfügungstellung dieser Daten auf unseren Websites ist eine freiwillige Leistung des Verlags. Der Rechtsweg ist ausgeschlossen. Hinweis Dieses und viele weitere eBooks können Sie rund um die Uhr und legal auf unserer Website

http://www.informit.de herunterladen