MooTools Einführung - "Hello World"

0 | 10 Kommentare | 14789 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

Kommentare: MooTools Einführung - "Hello World"

Neuen Kommentar schreiben
Mängel
Beantworten

Das Tutorial finde ich nicht wirklich gut. Es wird sehr, sehr wenig auf die in Mootools (auch meine 1. Wahl was JS-Frameworks angeht) vorhandenen Funktionen eingegangen, außerdem sei bemerkt das es die 1.1(1) Version von Mootools anspricht, mittlerweile gibt es auch die 1.2, in der sich sehr viel getan hat.

Das Tutorial sollte vielleicht bei Zeiten mal überarbeitet werden oder nicht als Einführung piliert werden.

Patrick Freitag am 15.07.2008 um 14:49
Re: Mängel
Beantworten

Das Tutorial finde ich nicht wirklich gut. Es wird sehr, sehr wenig auf die in Mootools (auch meine 1. Wahl was JS-Frameworks angeht) vorhandenen Funktionen eingegangen,

Das liegt wohl daran, dass es von Leuten geschrieben wurde die nicht wirklich sehr viel mit Mootools machen.

außerdem sei bemerkt das es die 1.1(1) Version von Mootools anspricht, mittlerweile gibt es auch die 1.2, in der sich sehr viel getan hat.

Das Stimmt. Wär nicht schlecht das auf Mootools 1.2 anzupassen (und zu schreiben für welche Version es ist).

Das Tutorial sollte vielleicht bei Zeiten mal überarbeitet werden oder nicht als Einführung piliert werden.

Jetzt kommts: wäre cool wenn du das irgendwann mal machen könntest :)

Thomas H am 15.07.2008 um 17:09
Re: Mängel
Beantworten

Jetzt kommts: wäre cool wenn du das irgendwann mal machen könntest :)

Okay, dann werde ich mich demnächst diesen Thema annehmen und eine Einführung über 1.2 schreiben.

Patrick Freitag am 15.07.2008 um 22:39
frage =)
Beantworten

Sach mal wieso benutzt du eigentlich nicht document.addEvent('dom:ready', function () {}); und holst damit das a über addEvent('click')?

Würde ich besser finden, da du ja über Mootools und seinen Vorzüge berichtest. Damit die Leser den Unterschied sehen wie einfach und wie wenig Quellcode so ein Framework brauch.

gruß Marcel

Marcel Domke am 23.04.2008 um 20:11
Re: frage =)
Beantworten

Weil ich noch keinen Plan von Ajax habe :) Hab gerade erst angefangen mich damit und MooTools zu beschäftigen. Kannst du es ergänzen bzw. umschreiben?

Sach mal wieso benutzt du eigentlich nicht document.addEvent('dom:ready', function () {}); und holst damit das a über addEvent('click')?

Würde ich besser finden, da du ja über Mootools und seinen Vorzüge berichtest. Damit die Leser den Unterschied sehen wie einfach und wie wenig Quellcode so ein Framework brauch.

gruß Marcel

Fabian Ziegler am 24.04.2008 um 09:18
Re: frage =)
Beantworten

Das Ganze ist eigentlich ganz einfach.
Mootools bietet auch für den Ajax Request bereits hilfreiche Funktionen.

Nur ein kleines Beispiel, ich kann Mootols nur empfehlen.

 
HTML
1
2
3
4
<p id="absatztausch">
    <a href="#" id="KlickMich">Klick mich</a>.
    Ich werde neu geladen
</p>
 
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<script type="text/javascript">
    $('KlickMich').addEvent('click', function(e) { 
        new Event(e).stop();
        var ajaxRequest = new Request({
            method: 'get', // Methode ist get, post kann hier ebenfalls verwendet werden
            url: 'test.php', // test.php wird aufgerufen
            evalScripts: true, // Damit werden z.B. Javascript Codeschnipsel aus der Antwort der test.php ausgeführt.
            onSuccess: function(responseXML, responseText) {
                alert(responseText);
            },
            onFailure: function() {
                // Wenn ein Fehler auftritt
            }
        }).send('test=123'); // Die test.php kann dann mit $_GET['test'] arbeiten
    });
</script>

Weil ich noch keinen Plan von Ajax habe :) Hab gerade erst angefangen mich damit und MooTools zu beschäftigen. Kannst du es ergänzen bzw. umschreiben?

Sach mal wieso benutzt du eigentlich nicht document.addEvent('dom:ready', function () {}); und holst damit das a über addEvent('click')?

Würde ich besser finden, da du ja über Mootools und seinen Vorzüge berichtest. Damit die Leser den Unterschied sehen wie einfach und wie wenig Quellcode so ein Framework brauch.

gruß Marcel

Patrick Schwering am 05.05.2008 um 16:22
Re: frage =)
Beantworten

Das sieht schon sehr nett aus, ich habe bis jetzt nie große vorteile in so Aufgeblasenen JS-Frameworks gesehen, aber sowas lässt das ganze in ein anderes Licht rücken.

Werde ich demnächst auch mal genauer testen.

Das Ganze ist eigentlich ganz einfach.
Mootools bietet auch für den Ajax Request bereits hilfreiche Funktionen.

Nur ein kleines Beispiel, ich kann Mootols nur empfehlen.

Weil ich noch keinen Plan von Ajax habe :) Hab gerade erst angefangen mich damit und MooTools zu beschäftigen. Kannst du es ergänzen bzw. umschreiben?

Sach mal wieso benutzt du eigentlich nicht document.addEvent('dom:ready', function () {}); und holst damit das a über addEvent('click')?

Würde ich besser finden, da du ja über Mootools und seinen Vorzüge berichtest. Damit die Leser den Unterschied sehen wie einfach und wie wenig Quellcode so ein Framework brauch.

gruß Marcel

 
HTML
1
2
3
4
<p id="absatztausch">
    <a href="#" id="KlickMich">Klick mich</a>.
    Ich werde neu geladen
</p>
 
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<script type="text/javascript">
    $('KlickMich').addEvent('click', function(e) { 
        new Event(e).stop();
        var ajaxRequest = new Request({
            method: 'get', // Methode ist get, post kann hier ebenfalls verwendet werden
            url: 'test.php', // test.php wird aufgerufen
            evalScripts: true, // Damit werden z.B. Javascript Codeschnipsel aus der Antwort der test.php ausgeführt.
            onSuccess: function(responseXML, responseText) {
                alert(responseText);
            },
            onFailure: function() {
                // Wenn ein Fehler auftritt
            }
        }).send('test=123'); // Die test.php kann dann mit $_GET['test'] arbeiten
    });
</script>

Tim Spiekerkötter am 13.05.2008 um 12:37
Re: frage =)
Beantworten

ich find das als erste heranführung schon ganz brauchbar.

allerdings kommt meiner meinung nach (wie bei allen anderen ajax-tutorials) das thema der daten-rücksendung zu kurz.

soll ich nun text, xml oder json nehmen? wo sind die vor- und nachteile? und wie realisiere ich das ganze?

was wird (in diesem fall von der test.php) beispielsweise zurückgeschickt und in welchem format?

crush am 04.09.2008 um 02:03
Re: frage =)
Beantworten

Ich kann meinem Vorschreiber nur beipflichten. Allerdings ist es als 'first Step' schon einmal ein Anfang - also weitermach - verbessern...

Aber auch die Syntax. Wenn ich lese wie mit

<a href="#"id="KlickMich">Klick mich</a>

ein 'ANker-Link' vergewaltigt wird - auch da sollte man auf die richtige Verwendung achten.

Hier nimmt man doch besser ein div oder meinetwegen span-Attribute - Sollte auch damit klappen da Mootools das klick-Ereigniss doch über die ID referenziert (Oder habe ich was falsch verstanden?).

MfG

Noeppes

Noeppes am 08.12.2009 um 13:25
Re: frage =)
Beantworten

Das ist richtig :)
<div id="KlickMich">Klick mich</div> wäre ebenfalls möglich.
Wobei das ja nur ein Beispiel sein soll :)

Patrick Schwering am 08.12.2009 um 14:17