Über mich

Startseite arrow Tipps & Tricks arrow MooTools - Eine AJAX-Library (Teil 1)

MooTools - Eine AJAX-Library (Teil 1)

Montag, 22. Dezember 2008
Geschrieben von Armin Vieweg
Es gibt verschiedene AJAX-Libraries. Die Bekannteste ist wohl jQuery. Doch ich bin irgendwie auf MooTools hängen geblieben und möchte ein wenig darüber berichten.

Eine AJAX-Library (Bibliotheken) ist eine Ansammlung von Funktionen die einem das Arbeiten mit JavaScript stark vereinfacht. Es gibt verschiedene solcher Libraries und MooTools gehört dabei zu eine der Bekannteren.

Das wohl populärste Einsatzgebiet von MooTools ist dessen Integration in das CMS Joomla 1.5.



Der Aufbau von MooTools
MooTools Logo MooTools ist modular aufgebaut. Man kann sich also seine benötigten Module zusammenklicken und erhält dann eine entsprechend kleinere JavaScript-Datei.

Für die Entwicklung empfiehlt es sich eine Version von MooTools herunterzuladen, die mit allen Funktionen ausgestattet ist. Diese Version nimmt dann 63kB in Anspruch.

Reichen einem die Grundfunktionen von MooTools nicht, kann man noch mit dem sogenannten "More Builder" eine weitere Datei generieren lassen, in der dann zusätzliche Features wie Sortierung, ToolTips oder der bekannte MooTools-Akkordeon-Effekt vorhanden sind.



Grundfunktionen in MooTools

Neues Event: DomReady
Während beim normalen JavaScript nur das Event "onLoad" existiert, hat man bei MooTools ein artverwandtes Event mehr. Das DomReady-Event. Der Hauptunterschied liegt darin, dass bei "onLoad" gewartet wird bis alle Elemente, wie Bilder, CSS-Dateien, etc. geladen sind und bei "DomReady" nur solange gewartet wird, bis der Quellcode geladen und interpretiert wurde.

Hat man also z.B. ein großes Bild auf der Website, dass 5 Sekunden braucht zum Laden, wird "DomReady" 5 Sekunden früher ausgeführt, da "onLoad" auf dieses Bild wartet.

window.addEvent('domready', function() {
    alert("Das Popup kommt schon bevor alle Elemente fertig geladen sind.");
});



getElementById = $
Häufige Befehle, die sehr oft vorkommen wurden abgekürzt. Wollte man im ursprünglichen JavaScript ein Element unsichtbar machen, musste der Befehl so lauten:

document.getElementById("name_vom_element").style.display = "none";


Das ist zwar nicht sonderlich kompliziert, aber mit MooTools geht es einfacher:

$("name_vom_element").style.display = "none";


Das Dollar-Zeichen ($) steht also für diese Funktion.


Viele neue Funktionen
Wenn man MooTools im Einsatz hat, kann man den Quellcode zum Ausblenden eines Elementes noch mehr verkürzen. Um ein Style eines Elements zu verändert gibt es den Befehl "setStyle":

$("name_vom_element").setStyle('display', 'none');


Mit dem Gegenstück "getStyle" kann man eine beliebige Eigenschaft, des aktuellen Style auslesen und sie zum Beispiel in eine Variable zur weiteren Verwendung speichern.


Besser als $ ist nur noch $$
Eben bin ich kurz auf die neue Notierung des getElementById-Befehls gekommen. Es gibt bei MooTools aber auch noch einen viel tolleren Befehl, der $$ heißt. Dieser Befehl kombiniert verschiedene JavaScript-Funktionen.

var links = $$("a");


Der $$-Befehl (oder auch Dollars-Befehl) ist eine Abwandlung vom getElementsByTagName-Befehl. In diesem Beispiel werden alle Elemente auf der Website, die ein Link sind (also alle A-Tags) in einem Array gespeichert. Anschließend kann man diese Eigenschaften weiterverwenden und so z.B. die HREFs von allen Links nacheinander in einer Alert-Box anzeigen lassen:

var links = $$("a");
links.each {
  function(item, index){
    alert(index + '. Link-URL: ' + item.href);
  });
}


In diesem Beispiel sehen wir auch schon eine weitere Funktion die in MooTools sehr schön und einfach gelöst wurde, nämlich die For-Each-Schleife. Ein .each hinter das Array "links", das wir vorher gefüllt haben und wir können darin eine Funktion ausführen lassen, die pro gefundenen Link etwas macht, wie in diesem Fall eine Alert-Box ausgibt, in der dann z.B. steht: "3. Link-URL: unternehmen.html".

Die $$-Funktion kann aber weitaus mehr. Man hat dort die Möglichkeit mit Klassen, IDs und sogar Attributen zu arbeiten. Wenn man z.B. den ersten externen Link auf der Website ausgeben möchte, würde der Quellcode so aussehen:

var extern = $$("#content a[href^=http:]");
alert("Erster externer Link: " + extern[0]);


Da wir hier noch ein "#content" mit eingefügt haben, werden jetzt nur Links berücksichtigt, die sich innerhalb von #content befinden. Den X-Path kann man also ebenso berücksichtigen, wie Attribute, Klassennamen und Element-Tags.

Dieser enorme Funktionsumfang dieses Befehls macht ihn unglaublich mächtig, weshalb er auch einer meiner Lieblingsbefehle ist :)


Nur ein kleiner Bruchteil
der kompletten AJAX-Library MooTools habe ich bis jetzt erläutert. Im nächsten Teil möchte ich etwas näher auf das Event-Handling und die DOM-Funktionen eingehen, mit denen man Elemente nach dem Laden der Website beeinflussen kann. Es werden sicherlich noch viele Teile folgen, denn man kann verdammt schöne Sachen mit MooTools anstellen - die integrierten Effekte werden dabei sicherlich auch einen ganzen Artikel einnehmen.


Auf der Website von MooTools findet Ihr jede Menge Beispielquellcode und auch Demonstrationen zu den verschiedenen Funktionen. Ich kann es nur jedem empfehlen sich die Library mal genauer anzuschauen, vor allem für diejenigen, die viel mit JavaScript arbeiten.

Eine solche Bibliothek und auch dieser und alle folgenden Artikel darüber, erfordern fundierte Grundkenntnisse in der Programmierung. Was ein Array ist und was der X-Path ist, setze ich hier einfach mal voraus - aber in den Kommentaren oder per Mail stehe ich wie gewohnt gerne für Fragen bereit :)



Links

MooTools Haupt-Website


MooTools Download


MooTools Dokumentation


MooTools Demos





  Kommentare (1)
 1 Geschrieben von: Tom, am 27.02.2009 um 13:18
Hallo Armin, 
 
eine klasse Einführung zu Mootools! Da bleibe ich auf jeden Fall 'dran! 
Weiter so!
Letzte Aktualisierung ( Donnerstag, 18. Dezember 2008 )
 
< Zurück   Weiter >