Ajax-Entwicklung mit dem modular aufgebauten Framework: Mootools
Frei verfügbare JavaScript-Bibliotheken gibt es inzwischen zuhauf. Im weitesten Sinn erfüllen sie alle den gleichen Zweck: Sie machen dem Entwickler das Leben leichter, indem sie eine Reihe hilfreicher Funktionen zur Verfügung stellen. Dabei geht es in der Regel um die Kapselung komplexer oder oft benötigter Funktionalitäten. Ein oft strapaziertes Beispiel ist die Funktion „$( )“, die in vielen Bibliotheken zur Verfügung steht. Mit dieser Funktion können Elemente eines HTML-Dokuments anhand von CSS-Selektoren ausgewählt werden. Eine Bibliothek besteht dabei aus einer oder mehreren JavaScript-Dateien, die im Head-Bereich eigener HTML-Dokumente eingebunden werden. In diesen Dokumenten können dann die Funktionen der Bibliothek genutzt werden.
Der Status quo
Je nach Umfang bezeichnet man JS-Bibliotheken auch als Toolkits oder Frameworks. Toolkits bieten normalerweise einfach einsetzbare Funktionen für spezielle Einsatzbereiche, wie Animation oder UI-Komponenten. Gerade wenn der Umfang der Bibliothek darüber hinausgeht und eine grundlegend andere Art der Programmierung ermöglicht, spricht man auch von Framework. Bekannte Bibliotheken sind die Yahoo! UI Library, Jquerry oder das Dojo Toolkit. Der momentan wichtigste Vertreter ist vermutlich Prototype, das aus dem Umfeld von Ruby on Rails stammt. Prototype enthält unter anderem ein eigenes Klassen- und Vererbungskonzept und ermöglicht so das volle Spektrum objektorientierter Programmierung in JavaScript.
Den gleichen Ansatz hat auch Mootools. Die verwendete Implementierung des Klassenkonzepts ist von Dean Edwards‘ base.js [1] übernommen, auf dem gleichen Prinzip basiert inzwischen auch Prototype. Im direkten Vergleich fällt auf, dass Mootools neben allgemeinen Hilfen und Erweiterungen für DOM, Events etc. auch vorgefertigte Lösungen für komplexe Anwendungsbereiche wie Drag & Drop und Animationen mitbringt. Außerdem enthält es einige vorgefertigte UI-Elemente („Widgets“), die sich auf einfachste Weise einbinden lassen. Bei Prototype wird diese Lücke durch zusätzliche Effekt- und UI-Bibliotheken geschlossen, beispielsweise Scriptaculous oder Rico.
Auch Mootools stammt aus dem Dunstkreis des Prototype-Projekts. Bereits im Oktober 2005 veröffentlichte Valerio Proietti mit Moo.fx eine Effektbibliothek auf Basis von Prototype, die durch einfache Handhabung und Kompaktheit besticht – das Skript ist nur 3 kB groß. Nachdem im Lauf der Zeit weitere Komponenten zur Effektbibliothek hinzukamen, wurde im September 2006 ein eigenes, von Prototype unabhängiges Framework veröffentlicht.
Inzwischen liegt Mootools in einer stark überarbeiteten Version 1.11 vor. Von der ursprünglichen Version unterscheidet es sich augenscheinlich durch eine veränderte Modulstruktur – so ist beispielsweise das Klassensystem nicht mehr im Kern enthalten, sondern wurde in ein eigenes Modul verlagert. Weitere Änderungen fanden vor allem unter der Haube statt.
Modulares Konzept
Trotz des relativ großen Umfangs der gesamten Bibliothek ist der tatsächlich verwendete Code kompakt. Um das zu ermöglichen, ist Mootools modular aufgebaut. Den Kern eines Pakets bildet die Komponente „core“. Alle anderen Teile sind optional.
Es existieren insgesamt neun Komponenten, unterteilt in etwa 40 Einzelbestandteile, aus denen man sich ein für die jeweiligen Zwecke passendes Paket zusammenstellen kann. Auf der Webseite des Projekts steht ein webbasiertes Tool [2] zur Verfügung, das den Nutzer bei der Konfiguration unterstützt. Abhängigkeiten, die zwischen den Modulen bestehen, werden dabei automatisch aufgelöst. Zusätzlich kann die Komprimierungsstufe des Codes gewählt werden – vom ausführlich kommentierten Quelltext für die Entwicklung bis zu komprimierten Code für die Veröffentlichung des Projekts.
Übersicht der Komponenten | |
Core | Die Komponente „Core“ ist eine Sammlung von nützlichen Funktionen, die einem oft benötigte Aufgaben abnehmen. Die Funktion „$type( )“ gibt beispielsweise den Typ einer Eigenschaft zurück, $time( ) einen Timestamp der aktuellen Uhrzeit. Außerdem fügt Core dem Window-Objekt einige Eigenschaften hinzu, anhand derer der Typ des verwendeten Browsers festgestellt werden kann. Alle anderen Module bauen auf diesem Kern auf. |
Window | Window erleichtert das Arbeiten mit dem Browserfenster. Es umfasst verschiedene Funktionen, mit denen Größe und Position des Viewports festgestellt werden können. Mit der Klasse „DomReady“ lässt sich außerdem überprüfen, ob der DOM-Baum (ohne Grafiken) geladen wurde. |
Native | Native erweitert die default-Objekte von JavaScript um zusätzliche Funktionen. Sie umfassen Erweiterungen für Arrays, Elemente, Events, Funktionen und Strings. |
Element | Element bietet Hilfen für das Selektieren von Elementen und für das Arbeiten mit Formularen und Events. |
Remote | Remote bringt alles mit, was zum Erstellen von Ajax-Anwendungen benötigt wird. Es bietet mehrere, unterschiedlich komplexe Kapselungen des XMLHttpRequest sowie Hilfen für den Umgang mit Cookies und JSON. |
Effects | Effects entspricht der bereits erwähnten Moo.fx-Bibliothek. Es bietet die Möglichkeit, beliebige CSS-Eigenschaften zu animieren. |
Drag | Drag bietet einfach einsetzbare Funktionen für Drag-&-Drop-Anwendungen. Der Aufruf der Funktion „makeDragable()“ zum Beispiel macht ein HTML-Element „draggable“. |
Plugins | Plugins ist eine wilde Sammlung von verschiedenen Erweiterungen zu den bisher genannten Modulen. Sie enthält die Implementierung einer Hash-Map, eine Klasse zur Umrechnung von Farbwerten und eine Reihe von vorgefertigten UI-Komponenten, so genannten Widgets. |
Class | Class kapselt die Implementierung von Klassen und dem damit verbundenen Vererbungskonzept. Das Klassenkonzept von Mootools bietet eine mächtige Alternative zum prototypbasierten Ansatz von JavaScript. |
Das folgende
Beispiel zeigt, wie in Mootools eine neue Klasse erstellt und danach
instantiiert wird.
var Katze = new Class( { initialize: function( name ){ this.name = name; } }); var meineKatze = new Katze( 'Milka' );
Listing 1
Die Erklärung des gesamten Klassenprinzips, inklusive Vererbung, Verkettung und dem Hinzufügen von Events würde den Rahmen dieses Artikels sprengen. Im Blog von Aaron Newton [3] erschien zu diesem Thema das Tutorial „How to write a Mootools Class“. Natürlich ist man als Nutzer nicht gezwungen, mit eigenen Klassen zu arbeiten. Gerade in umfangreichen Projekten dürfte man diese Möglichkeit aber schnell zu schätzen lernen.
Beispiel: Verwendung der Ajax-Klasse
Im folgenden Beispiel erstellen wir eine sehr einfache Suchfunktion im Stil von Google Suggest. Die genutzte Klasse Ajax ist Teil der Remote-Komponente. Einem PHP-Skript wird die in ein Textfeld eingegebene Zeichenkette übergeben. Der Einfachheit halber gehen wir hier davon aus, dass ein Skript existiert, welches die Ergebnisse als HTML-Listenelemente liefert, die wir direkt in das Dokument schreiben können.
<html> <header> <script type="text/javascript" xsrc="mootools.js"></script> <script type="text/javascript" xsrc="suggest_beispiel.js"></script> </header> <body> <form> <label for="suchfeld">Suche</label> <input id="suchfeld" type="text"> </form> <ul id="ergebnisliste"> <!-- hier werden die Suchergebnisse eingesetzt --> </ul> </body> </html>
Listing 2
var ajaxBeispiel; window.onload = function() { $( 'suchfeld' ).onkeyup = suche; } function suche() { var suchbegriff = $( 'suchfeld' ).getValue(); if ( suchbegriff.length > 0 ){ ajaxBeispiel = new Ajax( 'backend.php?suche=' + suchbegriff, { method: 'get', update: $( 'ergebnisliste' ) } ); ajaxBeispiel.request() }else { $( 'ergebnisliste' ).setHTML(); } }
Listing 3
Dem "onkeyup"-Event des Elements „suchfeld“ wird die Funktion „suche( )“ zugewiesen. Innerhalb dieser Funktion wird eine Instanz der Klasse „Ajax“ erzeugt. Der Konstruktor erhält als Parameter den Wert von „suchfeld“ sowie ein Objekt mit „get“ als Request-Methode und dem Element „ergebnisliste“, in das der Rückgabewert geschrieben werden soll. Mit „setHTML( )“ wird der Inhalt der Ergebnisliste gelöscht, falls das Suchfeld keine Zeichen enthält.
Fazit
Mit Mootools liegt ein umfangreiches JavaScript-Framework vor, das mit einigen frischen Ideen aufwartet und schon jetzt sehr gut dokumentiert ist. Schon alleine die ausgezeichnete Effects-Komponente lohnt einen Blick auf das junge Projekt. Es gibt aber auch viele andere Frameworks, die gut ausgebaut sind und eine größere Entwicklergemeinde im Rücken haben.
Der Einstieg in Mootools fällt leicht. Wer schon Erfahrung mit Prototype gemacht hat, dürfte sich hier sehr schnell zurechtfinden. Allen Einsteigern sei das „Mootorial“ von Aaron Newton, das ultimative Tutorial für Mootools, ans Herz gelegt.