Anzeige
Anzeige
UX & Design
Artikel merken

Ajax-Entwicklung mit dem modular aufgebauten Framework: Mootools

Mootools ist ein schlankes Open-Source-Framework für JavaScript, das die Skriptsprache um ein vollwertiges Klassensystem erweitert. Darüber hinaus bietet es eine große Anzahl von nützlichen Klassen und Funktionen, die den Anwender bei der Entwicklung von JavaScript-Anwendungen unterstützen. Von Animation über Eventhandling bis zum XMLHttpRequest deckt Mootools alle Bereiche der clientseitigen Programmierung ab.

6 Min. Lesezeit
Anzeige
Anzeige

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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

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

Anzeige
Anzeige

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

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

Anzeige
Anzeige

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.

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