Mootools Einführung: Grundlagen Teil 1

0 | 12359 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Mootools Einführung: Grundlagen Teil 1" mit Ihrem Wissen!

Anzeige Hier werben

Was ist MooTools

Bild zu Mootools Einführung: Grundlagen Teil 1

Mootools ist kurz und knapp ein Javascript-Framework. Es bietet dem Programmierer eine Sammlung von hilfreichen Funktionen, die das Arbeit mit Javascript erleichtert. Oft ist es auch so, dass man sich mit JavaScript die Finger wund schreibt. Das liegt daran das man alle Eventualitäten abdecken muss die bei einem JavaScript so anfallen. Darunter fällt vor allem die Browserkompatibilität. Diese wird durch MooTools komplett abgedeckt und erspart einem sehr viel unnötigen Quellcode.

Am besten ist diese an einem Beispiel Nachzuvollziehen. In JavaScript würde man ein Element mit dem Attribut ID und dem Attributwert "myElement" folgendermaßen suchen:

document.getElementById('myElement')

In MooTools hingegen geht das viel einfacher:

$('myElement')

Damit arbeitet es sich viel angenehmer. MooTools bietet zudem eine ganze Palette an Vereinfachung. Hier eine kleine Auflistung:

  • Funktionen für Animationen
  • Funktionen zum Erstellen oder Verändern von Elementen
  • Funktionen für den Umgang mit JSON
  • Funktionen für Cookies
  • und viel mehr.

Website: www.mootools.net
Dokumentation: docs.mootools.net/
Demonstrationen: demos.mootools.net
Core Builder: http://mootools.net/core
More Bulider: http://mootools.net/more

Die Geschichte zu Mootools

Angefangen hat MooTools als Effekt-Plugin für ein anderes Javascript Framework Namens Prototype. Das Plugin dafür hieß ursprünglich moo.fx und wurde von Valerio Proietti geschrieben.

Im laufe der Zeit entwickelte sich aus dem Plugin ein eigenes Framework. -> MooTools
MooTools steht für My Object Oriented Tools. Es scheint auch so als hätte Valerio Proietti einen Kuhtick. Alle seine Projekte haben irgend etwas mit Kühen zu tun. Vielleicht ist das auch der Grund warum es MooTools heißt.

Wer nutzt überhaupt MooTools?

Es gibt viele mittlerweile viele Seiten die MooTools nutzen. Darunter fallen z.B.

Falls Ihr gerne noch mehr Nutzer des Frameworks MooTools sehen wollt könnt Ihr diese auf http://wiki.github.com/mootools/mootools-core/sites-using-mootools nachlesen!

Warum MooTools? Warum nicht ein anderes Framework?

Es ist natürlich jedem selbst überlassen warum er MooTools nutzt oder nicht. Im großen und ganzen ist der Funktionsumfang der gängigen Javascript Frameworks der selbe. Die können z.B. mit CSS-Selektoren Elemente auswählen und diese Manipulieren.

Allerdings setzt MooTools sehr viel Wert auf objektorientierte Programmierung und vorallem auf die Klassenvererbung. Dies ist eines der großen Vorzüge an MooTools und erlaubt somit dem Programmierer das Framework einfach zu erweitern und zu verändern sowie wieder-verwertbare und flexible Funktionen zu schreiben.

MooTools ist am stärksten in dem man Funktionen und wiederkehrende Abläufe in Klassen nutzt, aber auch sehr nützlich um kleine schnell benötigte Anwendungen zu schreiben. Mehr dazu findet Ihr unter MooTools einbinden.

Anforderungen

Anforderungen für MooTools sind sehr gering. Als erstes sollte JavaScript im Browser aktiv sein ( Standardmäßig immer angeschaltet). Des weiteren wird die aktuelle Version des MooTools Framework benötigt. Diese findet man hier. Derzeit ist die aktuellste Version 1.2.4.

Es wäre sicher nicht verkehrt wenn man Grundkenntnisse in JavaScript schon sammeln konnte, es ist aber nicht zwingend Notwendig um kleinere Script zu schreiben.

MooTools einbinden

Mootools besteht aus zwei Teilen. Dem Paket Core und More.

Core

Die Core-Komponente enthält alle Basisfunktionen. Darunter fallen Element Selektoren, Funktionen für einfache Effekte, Ajax und weitere nützliche Funktionen für den alltäglichen Einsatz.

More

More-Komponente enthält spezialisierte Plugins wie einen Formular-Validator, Drag & Move, Date Funktionen und vieles mehr.

Als erstes erstellen wir uns eine HTML Datei die im <head> Tag das Javascript Framework verlinkt. Die Datei könnte folgendermaßen aussehen:

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<html>
<head>
    <script type="text/javascript" src="mootools-1.2.4-core.js"></script>
    <script type="text/javascript" src="mootools-1.2.4.2-more.js"></script>
</head>
<body>
    
    <div class="myElementClass" id="myElement">
        <h3> Lorem Ipsum </h3>
        <p class="text textbold"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
        sed diam voluptua.</p>
        <p class="text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
        sed diam voluptua.</p>  
    </div>
</body>
</html>

Hierbei ist es wichtig das MooTools Core immer vor MooTools More eingebunden wird. Das liegt daran das MooTools More auf wichtige Core Methoden zugreift.

In diesem Artikel werden alle Javascripts in dem Event 'domready' ausgeführt.

 
JavaScript
1
2
3
4
5
window.addEvent('domready', function () {

    // Hier kommt der Code hin

});

Wenn man das nicht macht, läuft man Gefahr, dass das Javascript ausgeführt wird, bevor das dazugehörige Dokument fertig geladen ist und in Folge dessen wäre, dass die Element Selectoren im schlechtesten Fall null zurückliefern würden.

Demnach sieht unser HTML Datei wie folgend aus:

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
    <script type="text/javascript" src="mootools-1.2.4-core.js"></script>
    <script type="text/javascript" src="mootools-1.2.4.2-more.js"></script>
    <script type="text/javascript">
    window.addEvent('domready', function () {
        // Hier kommt der Code hin
    }); 
    </script>
</head>
<body>
    <div class="myElementClass" id="myElement">
        <h3> Lorem Ipsum </h3>
        <p class="text textbold"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
        sed diam voluptua.</p>
        <p class="text"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
        sed diam voluptua.</p>
    </div>
</body>
</html>

Die $ Family

Als erstes möchte ich euch die Element Selectoren vorstellen. Zum einen hätten wir da die $ Funktion.
Die $ Funktion sucht ein Element anhand der ID.

 
JavaScript
1
var myElement = $('myElement') // sucht das HTML Element mit der ID myElement

Das Praktische an der $ Funktion ist, dass es nicht wie document.getElementById() einfach nur das Element sucht und auswählt sondern das MooTools nun dem Element Standardfunktion zuweißt.

Zum Beispiel können wir nun das Element einfach ein- oder ausfaden.

 
JavaScript
1
2
var myElement = $('myElement').fade('out'); // Fadet das Element mit der ID myElement aus
myElement.fade('in'); // Fadet das Element mit der ID myElement ein

Der Funktion fade können folgende Parameter übergeben werden:

  • 'in' - Fadet das Element zu 100% opacity.
  • 'out' - Fadet das Element zu 0% opacity.
  • 'show' - Zeigt das Element sofort mit opacity von 100%.
  • 'hide' - Zeigt das Element sofort mit opacity von 0%.
  • 'toggle' - Wenn das Element sichtbar ist, fadet das Element aus, ansonsten ein.
  • (number) - Eine Float Wert zwischen 0 and 1.
    Quelle

Die $ Funktion gibt nur immer entweder ein Element zurück oder null. Um nun mehrere Element zu suchen oder gar mehrere Element mit eine bestimmten Klasse wird die $$ Funktion verwendet.

Diese sucht mit CSS Selectoren nach den eingetragenen Selectoren und liefert ein array oder null zurück.

 
JavaScript
1
2
var myPTags = $$('p');
var myPTagsWithClassText = $$('p.textbold'); 

In unserem Fall würde myPTags alle Elemente <p> finden. MyPTagsWithClassText würde hingegen nur <p> Tags finden die die CSS Klasse "textbold" besitzen. ( <p class="textbold">...</p> )

Events

Neben dem Event 'domready' welches wir schon kennen gelernt haben, gibt es noch einige mehr.

Window Events
Form Events
domready blur
load change
unload focus
Keybord Events reset
keypress select
keydown submit
keyupMouse Events
Custom Mouse events click
mouseenter
dbclick
mouseleave
mousedown
mousewheel
mouseup
mousemove
mouseout
mouseover

Nun kann der User noch eigene Events erstellen und Sie benutzen. Es gibt bei den Events verschiedene Möglichkeiten diese anzuwenden.

Nun ist vieleicht dem ein oder anderen etwas aufgefallen. In Javascript fangen doch alle Events immer mit on an!? Ja genau! Nur MooTools hat darauf verzichtet um beim User Quellcode zu sparen.

Zurück zu den Events. Als erstes erstes zeige ich euch den "Single Event Listener". Dieser ist sehr einfach.
Unser Element "myElement" welches wir in der Variable myElement zwischengespeichert haben kommt folgendes:

 
JavaScript
1
2
3
4
var myElement = $('myElement');
myElement.addEvent('onclick', function () {
    alert('Click!!!');
});

Natürlich kann man auch direkt an die $ Funktion das Event anbinden.

Die nächste Möglichkeit wäre der "Multiple Event Listener". Diese wird oftmals dann verwendet, wenn an einem Element mehrere Events abgefeuert werden.

 
JavaScript
1
2
3
4
5
6
7
8
$('myElement').addEvents({
    'mouseenter': function () {
        alert('MouseEnter');
    },
    'mouseleave': function () {
        alert('MouseLeave');
    }
});

Der Unterschied zwischen MouseEnter (MouseLeave) und MouseOver (MouseOut) ist, dass MouseEnter nur einmal Abgefeuert wird und bei MouseOver wird das Event bei jeder Bewegung über das Element abgefeuert.

Arrays & Objekte verarbeiten

Als letzes in diesem Tutorial möchte ich euch zeigen, wie Ihr Arrays bzw. Objekte verarbeitet. Wenn Ihr über die $$ Funktion mehrere Element zurückgeliefert bekommt, könnt Ihr über die die Funktion each() über das Array iterrieren.

 
JavaScript
1
2
3
$$('p').each( function (Element,intIdx) {
    alert('Value => ' + Element+ ' | Key => ' + intIdx);
});

each() gibt zwei Werte an die Funktion. Zum einen ist das ein Element und zum anderen der key. Element beinhaltet das HTML OBJECT und intIdx einen Zahl, den Counter.

Im Detail passiert folgendes. $$('p') findet folgende Elemente.

[p.text, p.text]

Da es sich um ein nummerisches Array handelt, sieht das ganze so aus:

[0 => p.text, 1 => p.text]

Im ersten Durchlauf hat intIdx den Wert 0 und Element das erste <p> Element welches gefunden wurde. Im zweiten Durchlauf hätte intIdx den Wert 1 und Element das zweite <p> Element welches gefunden wurde und so weiter und so fort.

Nun ist in der Variable Element das erste gefundene Element. Dieses können wir nun wieder manipulieren.

 
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
$$('p').each( function (Element,intIdx) {
    Element.addEvents({
        'mouseover': function () {
            Element.fade('out').setStyles({
                'cursor':'pointer'
            });
        },
        'mouseout': function () {
            Element.fade('in');     
        }
    });
});

Ich habe mal das Element wieder Überwacht und Ihm die Events "mouseover" und "mouseout" verpasst. Bei mouseover wird das Element ausgefadet und bekommt den CSS Style cursor:pointer; verpasst. Beim Mouseout soll das ausgefadete Element wieder eingefadet werden.

Das war es. Hoffe ich konnte euch einen kleinen Einblick in MooTools geben.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 6 Personen an der Seite "Mootools Einführung: Grundlagen Teil 1" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Mootools Einführung: Grundlagen Teil 1" hier bearbeiten.