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.
