Anzeige
Anzeige
UX & Design
Artikel merken

…der sanfte Ajax-Einstieg: Das Dojo-Toolkit

Das Dojo-Toolkit ist ein modular aufgebautes JavaScript-Toolkit für die Erstellung von Ajax-Anwendungen. Dabei stellt es nicht nur Module für die einfache Kommunikation zwischen Client und Server zur Verfügung, sondern auch jede Menge vorgefertigter Widgets. Diese lassen sich benutzen, ohne eine Zeile JavaScript selbst schreiben zu müssen. Fortgeschrittenen Benutzern bietet es eine Infrastruktur und eine umfangreiche Sammlung an Funktionen für die Erstellung professioneller Ajax-Anwendungen.

6 Min. Lesezeit
Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

Das demonstriert das folgende Beispiel zur Umsetzung eines Dojo-Baums:

HTML
<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

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.

Anzeige
Anzeige

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.

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.

Anzeige
Anzeige

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:

JAVASCRIPT
	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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige