MooTools Einführung - "Hello World"

0 | 20223 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "MooTools Einführung - "Hello World"" mit Ihrem Wissen!

Anzeige Hier werben

Für die Einführung in das JavaScript-Framework "MooTools" möchten wir unser Beispiel aus dem vorherigen Artikel "Hello World" mit Ajax nun mit MooTools umsetzen. Dabei möchten wir durch den Klick eines Links den Inhalt eines Absatzes einer Webseite nachladen, ohne die Webseite komplett neu zu laden. In diesem MooTools Tutorials sollen dabei besonders die Vorteile aufgezeigt werden, welche durch die Nutzung eines Frameworks wie MooTools entstehen.

Textdatei erstellen

Erstellen Sie in Ihrem Arbeitsordner, der gleiche Ordner wo sich auf Ihre HTML und JavaScript-Datei befindet, eine Textdatei mit dem Namen "hallo.txt" mit beliebigen Inhalt.

HTML-Code erstellen

Wir benötigen lediglich eine einfache HTML-Seite die zwei Absätze und einen Link enthalten soll. Den Inhalt des unteren Absatzes möchten wir nach einem Klick austauschen, ohne das dabei die Seite neu geladen wird. Der HTML-Quellcode schaut dabei wie folgt aus:

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<head>
</head>

<body>
<p>Ich werde nicht neu geladen</p>
<p id="myContent">
    <a href="#" onclick="loadContent();">Klick mich</a>.
    Ich werde neu geladen
</p>
</body>
</html>

Mootools runterladen

Die Projektwebseite von Mootools lautet www.mootools.net, auf welcher Sie sich auch Ihr eigenes MooTools-Paket zum Download zusammenstellen können. Dieses am Anfang etwas verwirrende Bedienungssystem, hat den Hintergrund, dass die Mootools-JavaScript-Datei die Sie von der Webseite runterladen eine möglichst kleine Dateigröße haben soll und damit auch ihre spätere Webanwendung.

Für unser "Hello World" Beispiel benötigen wir neben der "Core-Komponente" noch die "XHR" und "Ajax" Komponente, welche Sie unter "Remote" finden und bitte auswählen. Laden Sie anschließend das zusammengestellt Paket und verschieben Sie diese in Ihren Projektordner. Evtl. enthält die Datei noch die Endung .txt, diese müssen Sie entfernen, so dass Ihre Datei mit .js endet.

Mootools einbinden

Die runter geladene MooTools-JavaScript-Datei müssen wir jetzt in unsere HTML-Seite einbinden. Dies geschieht im "<head>" Bereich des HTML-Quellcodes auf folgende Weise, vorausgesetzt die MooTools-JavaScript-Datei haben Sie im gleichen Verzeichnis wie Ihre HTML-Datei abgelegt.

 
HTML
1
<script type="text/javascript" src="mootools-release-1.11.js"></script>

Der Code ist relativ selbsterklärend. Sie geben als erstes den Typen Ihres Scripts an, in unserem Fall natürlich "text/javascript", sowie die Quelle auf unserer Festplatte wo unser Script abgelegt ist.

"Hello World" mit MooTools umsetzen

Vorweg eine wichtige Anmerkung. Um dieses Beispiel selbst auf dem PC zu testen, müssen Sie entweder einen lokalen Webserver (wie XAMPP) laufen haben, oder die Beispieldateien zum Testen auf einen Webserver hochladen.

Im Folgenden möchten wir unsere "Hello World" Ajax-Anwendung mit MooTools umsetzen. Wir erinnern uns, dass die Umsetzung der kleinen Ajax-Anwendung ohne MooTools besonders für das Instanzieren des XMLHttpRequest-Objekts sehr aufwendig war, weil auf multi-browser-Fähigkeit geachtet werden musste. Der Befehl von MooTools für das instanzieren eines Objekts ist dagegen sehr schlank:

 
JavaScript
1
2
3
4
5
6
var xmlHttpObject;

function loadContent()
{
    xmlHttpObject = new XHR({method: 'get', onSuccess: handleContent}).send('hallo.txt');
}

Die Schritte kurz einzeln erklärt. Als erstes erzeugen wir uns eine Variable mit dem Namen xmlHttpObject. Anschließend wird die Funktion loadContent erstellt, welche eine XMLHttpRequest-Objekt instanziert. XHR ist dabei die eigene "Wrapper"-Klasse von Mootools.

Zusätzlich wird festgelegt mit welcher Methode ('get') und von welcher Quelle ('hallo.txt') die Daten geholt werden sollen, sowie was nach einem erfolgreichen Datenempfang passieren soll. In unserem Fall soll die Funktion handleContent aufgerufen werden. Dies ist die komplette Funktion um eine XMLHttpRequest-Objekt mit MooTools zu instanzieren. Was jetzt noch fehlt, ist unsere Funktion handleContent, welche den Absatz austauschen soll. Der Quellcode dafür sieht wie folgt aus:

 
JavaScript
1
2
3
4
function handleContent()
{
    document.getElementById('myContent').innerHTML = xmlHttpObject.response.text;
}

Kürzer geht es noch, wenn man document.getElementById() durch die Abkürzung $() ersetzt.

 
JavaScript
1
2
3
4
function handleContent()
{
    $('myContent').innerHTML = xmlHttpObject.response.text;
}

Damit haben wir unseren gesamten JavaScript-Code mit der Unterstützung von MooTools umgesetzt. Setzt man den gesamten Code jetzt zusammen, erhalten wir folgendes:

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<head>
<script type="text/javascript" src="mootools-release-1.11.js"></script>
</head>

<body>
<script type="text/javascript">
var xmlHttpObject;

function loadContent()
{
    xmlHttpObject = new XHR({method: 'get', onSuccess: handleContent}).send('hallo.txt');
}

function handleContent()
{
    $('myContent').innerHTML = xmlHttpObject.response.text;
}
</script>

<p>Ich werde nicht neu geladen</p>
<p id="myContent">
    <a href="#" onclick="loadContent();">Klick mich</a>.
    Ich werde neu geladen
</p>
</body>
</html>

Damit haben Sie eine kleine MooTools-Anwendung umgesetzt. Falls das kleine Script bei Ihnen lokal nicht laufen sollte, schieben Sie die drei Dateien auf einen Webserver.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 5 Personen an der Seite "MooTools Einführung - "Hello World"" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "MooTools Einführung - "Hello World"" hier bearbeiten.

Mitarbeiter