Das Dojo-Toolkit
...der sanfte Ajax-Einstieg
Zum Einstieg in das Dojo-Toolkit ist es am einfachsten, sich das Ajax-Build von der Homepage [1] herunterzuladen und sich die zahlreichen Beispiele anzusehen. Diese befinden sich im Verzeichnis „test“, in dem es zu jedem Modul und jedem Widget einfache HTML-Seiten gibt. Eigentlich testen die Entwickler mit diesen Seiten die Funktion – es spricht aber nichts dagegen, sich dort Anregungen für eigene Aufgabenstellungen zu holen.
Der Funktionsumfang des Toolkits ist vielfältig und reicht von der Unterstützung der asynchronen Kommunikation über die deklarative Erstellung von Widgets, der Verknüpfung von beliebigen Funktionsaufrufen bis hin zu einem einfacheren Umgang mit JavaScript. Die Modulstruktur sorgt nicht nur für Übersicht, sondern vermeidet auch Namenskonflikte, die bei einer Bibliothek dieser Größe unvermeidbar wären.
Ein Build-System erlaubt es, die einzelnen Module in einer einzigen JavaScript-Datei zusammenzufassen. Dadurch ist sichergestellt, dass nur die wirklich benötigten Bestandteile des Toolkits vom Browser geladen werden müssen und auch nur eine Datei vom Server nachgeladen werden muss. Auf diese Weise lässt sich die Performance von Ajax-Anwendungen erheblich verbessern.
Widgets
Das Toolkit verfügt momentan über ungefähr einhundert unterschiedliche Widgets, aus denen sich die Oberflächen von Web-Anwendungen zusammenbauen lassen. Dabei ermöglicht die deklarative Erstellung dieser Oberflächenkomponenten das Schreiben übersichtlicher HTML-Seiten.
Das demonstriert das folgende Beispiel zur Umsetzung eines Dojo-Baums:
<html><title>Dojo Baum</title>
<script type="text/javascript" xsrc="dojo-0.4.1-ajax/dojo.js"></script>
<script type="text/javascript"> dojo.require("dojo.widget.*"); </script>
<body>
<div dojoType="TreeBasicControllerV3" widgetId="controller"></div>
<div dojoType="TreeV3" listeners="controller">
<div dojoType="TreeNodeV3" title="Ebene 1"></div>
<div dojoType="TreeNodeV3" title="Ebene 2"></div>
<div dojoType="TreeNodeV3" title="Ebene 3">
<div dojoType="TreeNodeV3" title="Ebene 3.1"></div>
<div dojoType="TreeNodeV3" title="Ebene 3.2"></div>
</div>
</div>
</body></html>
Listing 1
Ein mit dem Dojo-Toolkit deklarativ erstellter Baum.
Im Screenshot ist das Ergebnis dieser wenigen Zeilen HTML zu sehen. Es war nichts weiter nötig, als die JavaScript-Datei dojo.js in die Seite einzubinden und vom Dojo-System das Modul dojo.widget anzufordern. Das Dojo-Toolkit hat dann die HTML-Seite geparst und alle Elemente, die über ein Attribut dojoType verfügen, in die dort angegebenen Widgets transformiert. Damit sich der Baum auf- und zuklappen lässt, wurde der Baum (TreeV3) noch mit einem Controller (TreeBasicControllerV3) verknüpft.
Das Ergebnis lässt sich mit einem DOM-Inspektor oder im FireFox 2.0 mit Hilfe des Menüpunkts „Auswahlquelltext“ ansehen (Strg+A|Kontextmenü der Seite). Neben vielen neuen div- und span-Elementen hat Dojo auch für das Einfügen von Stylesheet-Informationen gesorgt. Aus den wenigen Zeilen HTML sind über einhundert geworden.
Dojo bietet nicht nur einen Baum, sondern auch Schaltflächen, Checkboxen, Comboboxen, Datumsauswahl-Dialoge, einen Editor, sortier- und filterbare Tabellen sowie viele weitere nützliche Widgets. Neben der optischen Verbesserung verfügen diese Widgets über zahlreiche Zusatzfunktionen, die sich teilweise sehr einfach direkt im HTML-Text konfigurieren lassen. Außerdem enthalten sie Lösungen für diverse Browser-Probleme – zum Beispiel für das Combobox-Problem im Internet Explorer.
| AJAX oder Ajax? |
| Ursprünglich verbarg sich hinter der Abkürzung AJAX alleine die Art und Weise, wie Client und Server miteinander kommunizieren. Inzwischen steht Ajax aber für die gesamte Breite an technischen Möglichkeiten, um Web-Anwendungen mit Desktop-Feeling zu versehen. |
Der hier gezeigte Weg zur Erstellung von Widgets ist nicht zwingend vorgegeben. Es ist ebenso gut möglich, alle Widgets mit Hilfe von JavaScript zu erstellen und in die HTML-Seite einzufügen. Das ist in jedem Fall schneller als das Parsen einer HTML-Seite mit JavaScript.
Ereignisse
Ein Ajax-Toolkit muss auch Möglichkeiten bieten, um auf beliebige Aktionen der Benutzer zu reagieren. In Dojo wird der Begriff Ereignis aber noch weiter gefasst: Jeder beliebige Funktionsaufruf in JavaScript ist für Dojo ein Ereignis. Das hat zur Folge, dass auf jedes Ereignis und jeden Funktionsaufruf reagiert werden kann, wenn Dojo mitgeteilt wird, welche Funktion aufgerufen werden soll. Das verdeutlicht folgendes Beispiel:
function buttonGeklickt(){
dojo.debug("Button geklickt");
}Ereignisse verknüpfen
function danach(){
dojo.debug("danach aufgerufen");
}
dojo.addOnLoad(function(){
var button = dojo.widget.byId("button");
dojo.event.connect(button,"onClick","buttonGeklickt");
dojo.event.connect("buttonGeklickt","danach");
});
Listing 2
Nach der Initialisierung des Dojo-Systems werden in der Funktion, die der Methode addOnLoad übergeben wird, zwei Ereignis-Verknüpfungen vorgenommen. Zum einen wird das Ereignis onClick (wenn der Benutzer auf die Schaltfläche klickt) an die Funktion buttonGeklickt weitergeleitet. Die zweite Verknüpfung sorgt dafür, dass nach dem Aufruf der Funktion buttonGeklickt die Funktion „danach“ aufgerufen wird. Die Zielfunktionen müssen dabei nicht global sein, es kann auch ein beliebiges JavaScript-Objekt und dessen Methode angegeben werden.
Mit diesem Vorgehen lassen sich die sonst notwendigen gegenseitigen Abhängigkeiten zwischen den Widgets und dem JavaScript-Code erheblich reduzieren, wodurch die Wartbarkeit des Quellcodes verbessert wird. Sollte der Grad an Unabhängigkeit der Komponenten noch nicht ausreichend sein, kann auf das Konzept der Topics zurückgegriffen werden. Dabei werden Ereignisse in eine zentrale Warteschlange gestellt, in der sich jede Funktion als Listener registrieren kann. Dadurch ist keine direkte Verknüpfung mehr nötig und zukünftigen Änderungen stehen sämtliche Wege offen. Der oben demonstrierte Dojo-Baum arbeitet nach diesem Prinzip und lässt sich so durch beliebige weitere Widgets ergänzen.
Im obigen Beispiel ist zu erkennen, dass Dojo über Möglichkeiten verfügt, vernünftige Debug-Ausgaben in den JavaScript-Code zu integrieren. Über die globale Variable djConfig lässt sich dann leicht konfigurieren, ob diese Ausgaben wirklich gemacht werden sollen oder in der produktiven Umgebung eben nicht (var djConfig = {isDebug: false};).
Asynchrone Kommunikation
Das Toolkit unterstützt den Entwickler auch bei der Kommunikation zwischen Client und Server. Das kann auf unterschiedlichen Abstraktionsebenen erfolgen: Wer möchte, kann sich mit Hilfe der Funktion dojo.io.bind selbst um den Datenaustausch kümmern. Neben dem XmlHTTPRequest-Prinzip stehen weitere Transportwege zur Verfügung (IFrame, Einbindung von script-Elementen). Für typische Remote Procedure Calls gibt es eine spezielle Lösung, bei der ein Dienst durch ein JSON-Objekt beschrieben wird und anschließend in JavaScript ein Objekt verfügbar ist, dessen Methoden die Server-Implementierung verfügbar machen.
Vielfach ist die erforderliche asynchrone Kommunikation aber bereits in die Widgets integriert, sodass man sich nicht um diese Details kümmern muss. Das Widget ContentPane etwa verfügt über diverse Möglichkeiten, um Bereiche der HTML-Seiten zu ersetzen. Die eingefügten Inhalte kann dieses Widget sogar in einem eigenen Cache verwalten. Um den Inhalt dieser ContentPane auszutauschen, muss dem Widget per setUrl mitgeteilt werden, was eingefügt werden soll.
Module
Für viele tägliche Aufgaben bei der Erstellung von Web-Anwendungen bietet das Dojo-Toolkit Unterstützung: zum Beispiel für die Bearbeitung des DOM oder die Änderung des Inhalts von class-Attributen. Auch eine vollständige Grafikbibliothek zur Ausgabe von Charts ist enthalten und die Unterstützung im Bereich von Drag & Drop ist sehr gut.
Wer sich intensiver mit dem Toolkit befasst, wird bei der Erstellung eigener Widgets die Fähigkeiten des Toolkits zu schätzen wissen, die dem Entwickler beim Umgang mit JavaScript unter die Arme greifen. Neben objektorientierten Prinzipien haben auch aspektorientierte Verfahren in Dojo Einzug gehalten.
Fazit
Dojo ermöglicht einen sehr einfachen Einstieg in Ajax. Das heißt aber nicht, dass keine professionellen Ergebnisse mit diesem Toolkit erzielt werden können, wie das Beispiel „Lauftagebuch“ [2] zeigt. Dazu ist es nötig, sich intensiv mit dem Build-System von Dojo zu befassen.
Insgesamt macht das Toolkit schon jetzt einen sehr ausgereiften Eindruck, auch wenn die Version 1.0 noch etwas auf sich warten lassen wird. Auch im Hinblick auf die Dokumentation tut sich einiges. Neben einem API-Browser [3] wird auch die Basisdokumentation [4] zunehmend umfangreicher.
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 erfolgen wird. Dafür stehen nicht zuletzt die Mitglieder der Dojo Foundation, wie zum Beispiel IBM, AOL, Sun Microsystems oder OpenLazlo.
| Dojo Toolkit |
 Weiterführende Informationen zum Dojo-Toolkit erhalten Sie in dem im Februar bei entwickler.press erschienenen Buch „Dojo Toolkit“ von Michael Seemann und auf der Homepage zum Buch. Auch die Quellen zu diesem Beitrag sind auf dieser Homepage zu finden. www.dojokompakt.de |
