Zapewne większość z was domyśliła się czytając temat artykułu, iż zajmiemy się dzisiaj frameworkiem mootools. Jestem również pewien, że wielu z was miało już z nim do czynienia lub chociaż o nim słyszała. Jeżeli jednak jest on dla Ciebie czymś nowym, to mam nadzieje, że zainteresuję Cię nim na tyle, abyś zechciał sam spróbować jakie możliwości daje mootools.

Co do samego artykułu i opisu frameworka postanowiłem przedstawić w nim kilka przykładów możliwości, jakie daje mootools’a. Wydaje mi się, że wystarczy to, aby kogoś zainteresować, a nie zanudzać:) teorią. Swoją drogą dokumentacja, którą można znaleźć na stronie internetowej należy do jednej z lepiej napisanych z jakimi do tej pory miałem do czynienia. Na sam koniec zamieszczę kilka linków, które na pewno będą przydatne.

Tak więc do dzieła!

Mootools jest spójnym, zorientowanym obiektowo fremeworkiem JavaScript, stworzonym dla programistów oraz web developerów. Pozwala on na pisanie przejrzystego, czytelnego oraz efektywnego kodu, dającego w rezultacie możliwość tworzenie elastycznych rozwiązań.

Dlaczego mootools?

Podczas prezentacji przykładów będę opierał się o mootools 1.2, długą listę zmian(od wersji 1.1) możemy znaleźć na blogu mootoolsa, ja przedstawię najważniejsze możliwości jakie daje nam ten framework:

• kompatybilność z wieloma przeglądarkami (Safari, IE 6, IE 7, Firefox, Opera)
• zaawansowana możliwość selekcji elementów dokumentu
• wsparcie dla programowania obiektowego
• możliwość uzyskania wielu efektów, animacji z wykorzystaniem CSS
• obsługa AJAX, JSON
• oraz wiele innych

Trochę teorii.

Jądrem mootoolsa jest plik core.js, który jest bazowym elementem frameworka zawierającym podstawowe funkcje, oraz browser.js. Ważnym elementem pliku core.js jest funkcja native, która rozszerza możliwości obiektów natywnych (String, Array, Date, Number, Function).

Za pomocą metody implement możemy w prosty sposób rozszerzać funkcjonalność naszych obiektów natywnych, czy klas:

var Osoba = new Class({
initialize: function(imie){
this.imie = imie;
}
});
Osoba.implement({
przywitaj: function(){
alert('Witaj ' + this.imie);
}
});

Stworzenie obiektu jak i wywołanie naszej metody nie powinno sprawić problemu, ale na wszelki wypadek prezentuje jak to zrobić:

//tworzymy obiekt
var osoba = new Osoba('Marek');
//wywołanie metody
osoba.przywitaj();

Jak można sie domyśleć możemy za jednym razem dodać wiele takich samych metod do wielu obiektów, czy klas:

Native.implement([obiekt1, obiekt2, obiekt3], {
metoda1: function(){
// (...)
},
metoda2: function(){
// (...)
}
});

W przypadku obiektów natywnych możemy tworzyć aliasy dla funkcji które posiadają. Wykorzystujemy do tego metodę alias:

String.alias("nazwaFunkcji", "skrótNazwy");
//przykład
var str = new String('framework mootools');
String.alias('capitalize', 'cap');
str.cap();
//wynik -> "Framework mootools"

Więcej teorii oraz przykładów jak korzystać z mootoolsa, jakie metody oraz mechanizmy posiada znajdziecie w linkach, które zamieszczę na samym końcu.

Przykład 1

Do przykładu tego wykorzystam klasę Fx, która posiada metody do przekształcania (animowania) elementów. Animacje te odbywają się za pomocą płynnych zmian właściwości obiektów (CSS). Przykład ten prezentuje bardzo prosty szkielet menu, który jak wiadomo możemy znacząco rozbudować, chociażby dodając jako tło obrazki.

Przykład 1

Przykład 2

Kolejny przykład bardzo podobny do poprzedniego z tym wyjątkiem, iż bardziej przypomina znane chociażby z komputerów Apple’a ObjectDocki.

Przykład 2

Przykład 3

Teraz pokaże jak można zrobić fajnego drag and drop’a. Gdzie i jak można go wykorzystać to każdy chyba wie (koszyki, listy, menu, elementy, obrazki, etc.)

Przykład 3

Przykład 4

Ostatnim przykładem będzie przykład, który wykorzystuje zdarzenie na rolce od myszki (Mousewheel).

Przykład 4

Podsumowanie

Tak więc pokazałem kilka przykładów użycia mootoolsa. Pokazane przykłady są tak naprawdę jedynie czubkiem góry lodowej możliwości, jakie niesie ze sobą ten framework. Dodatkowo wiele innych przykładowych zastosowań można znaleźć na oficjalnej stronie mootools.

Mam nadzieje, że zaciekawił Was ten framework na tyle aby używać go w swoich rozwiązaniach.

A teraz obiecane..

Linki:

• Oficjalna strona mootools
• Dokumentacja do wejsji 1.2
• Kurs mootools 1.11
• Kurs mootools 1.2