Kurs: biblioteka MooTools w pigułce. Część 2 – podsumowanie.

MooTools

Poziom średnio-zaawansowany

Oto druga, podsumowująca część kursu, którego tematem jest biblioteka JavaScript: MooTools.

Biblioteka MooTools

Zacznijmy od dobrodziejstw dla wsparcia programowania obiektowego (OOP), jakie oferuje MooTools.

Class i tworzenie klas

Konstruktor:

var MyClass = new Class(properties);

gdzie: properties (object) – to kolekcja właściwości dodawanych do klasy.

Właściwości te można wprowadzić także poprzez Extends (rozszerz) i Implements (implementuj).

Przykład – konstrukcja Class:

var Cat = new Class({
    initialize: function(name) {
        this.name = name;
    }
});

var myCat = new Cat('Mrucznik');
alert(myCat.name); // 'Mrucznik'

Jest to odpowiednik tworzenia klas. Natomiast używając Extends, dostajemy odpowiednik dziedziczenia (nieco więcej informacji pojawi się także niżej).

Przykład – użycie konstrukcji Extends:

var Animal = new Class({
    initialize: function(age) {
        this.age = age;
    }
});

var Cat = new Class({
    Extends: Animal,
    initialize: function(name, age) { 
        this.parent(age); // will call initalize of Animal
        this.name = name;
    }
});

var myCat = new Cat('Mrucznik', 20);
alert(myCat.name); // 'Mrucznik'
alert(myCat.age); // 20

Jeśli ktoś programował w językach obiektowych, w których były interfejsy, i chciał spróbować w JavaScript, może rzucić okiem na Implementes z biblioteki MooTools.

Przykład – użycie Implements:

var Animal = new Class({
    initialize: function(age) {
        this.age = age;
    }
});

var Cat = new Class({
    Implements: Animal,
    setName: function(name) {
        this.name = name;
    }
});

var myAnimal = new Cat(20);
myAnimal.setName('Mrucznik');
alert(myAnimal.name); // 'Mrucznik'

MooTools i dziedziczenie

Wsparcie OOP ze strony MooTools pomaga w za symulowaniu dziedziczenia, więc docelowo przydaje się w programowaniu gier, widgetów, itp.

Przeanalizujmy przykład:

var Human = new Class({
    initialize: function(name, age) {
        this.name = name;
        this.age = age;
    },
     
    isAlive: true,
    energy: 1,
    eat: function() {
        this.energy++;
    }
});

var Ninja = new Class({
    Extends: Human,
    initialize: function(side, name, age) {
        this.side = side;
        this.parent(name, age);
    },
     energy: 100,
     attack: function(target) {
         this.energy = this.energy - 5;
         target.isAlive = false;
     }
});

var bob = new Human('Bob', 25);
var blackNinja = new Ninja('evil', 'Nin Tendo', 'unknown');
// blackNinja.isAlive = true
// blackNinja.name = 'Nin Tendo'
blackNinja.attack(bob);

Jak widać, w MooTools stosunkowo łatwo definiować klasy i rozszerzać je, tworząc ‚klasy pochodne’.

Elementy

Pora powiedzieć kilka słów o zagadnieniach obsługi elementów w MooTools.

Przede wszystkim mamy już dobrze znaną funkcję $():

var myElement = $(el);

Funkcja $$()

Służy do pobierania elementów po nazwie tagu HTML.

var myElements = $$(aTag[, anElement[, Elements[, ...]);

Przykładowo:

$$('a', 'b'); // wszystkie linki i tekst pogrubiony tagiem b

// tablica zawierająca tylko element o id 'myElement'
$$('#myElement');

// tablica z linkami o klasie 'myClass' wewnątrz elementu
// o id 'myElement'
$$('#myElement a.myClass');

Przykład 2:

var myAnchor = new Element('a', {
    'href': 'http://mootools.net',
    'class': 'myClass',
    'html': 'Click me!',
    'styles': {
        'display': 'block',
        'border': '1px solid black'
    },
    'events': {
        'click': function() {
            alert('clicked');
        },
        'mouseover': function() {
            alert('mouseovered');
        }
    }   
});

Pobieranie właściwości elementu

Daną właściwość lub wiele właściwości elementu pobierzemy pisząc:

var imgProps = $('myImage').getProperties('id', 
    'src', 'title', 'alt');

Zakładając, że w dokumencie mamy obrazek z id myImage.

Ustawianie / podmiana właściwości elementu – służy do tego metoda:
setProperty(‚element’, ‚wlasciwosc’);

Przykład – użycie setProperty():

$('myImage').setProperty('src', 'mootools.png');

$('myImage').setProperties({
    src: 'whatever.gif',
    alt: 'whatever dude'
});

Usuwanie – do tego celu służy metoda removeProperty(), np.:

myElement.removeProperty('nazwa');

Elementy i zdarzenia

Poniższy kod może już wyglądać znajomo. Obsługę zdarzenia dodajemy poprzez metodę addEvent(), np.:

$('myElement').addEvent('click', function() {
    alert('clicked!');
});

Natomiast usuwamy pisząc:

myElement.removeEvent(type, fn);

Możemy zdefiniować obsługę wielu zdarzeń:

myElement.addEvents(events);

$('myElement').addEvents({
    'mouseover': function() {
        alert('mouseover');
    },
    'click': function() {
        alert('click');
    }
});

Element.style, czyli dynamiczne style elementu

Główną metodą jest setStyle(property, value); – rozważmy przykład poniżej.

Przykład – ustawianie stylów CSS poprzez metodę setStyle():

// width =  300px
$('myElement').setStyle('width', '300px'); 

// width = 300px również
$('myElement').setStyle('width', 300); 

var style = myElement.getStyle(property);
$('myElement').getStyle('width'); // "300px"
$('myElement').getStyle('width').toInt(); // 300

Typowo dla MooTools możemy ustawiać coś (tu style) hurtowo, poprzez setStyles():

$('myElement').setStyles({
    border: '1px solid #000',
    width: 300,
    height: 400
});

Możemy je także pobierać w prosty sposób:

$('myElement').getStyles('width', 'height', 'padding');
// np.: {width: "10px", height: "10px",
//         padding: "10px 0px 10px 0px"}

Utilities.selectors

MooTools, podobnie jak np. jQuery, implementuje rozszerzone selektory, które dopasowują elementy w zadany sposób:

= : wyrażenie „jest równe”

*= : zawiera

^= : zaczyna się podciągiem

$= : kończy się podciągiem

!= : jest różne

~= : zawarte w liście (separator: spacja)

|= : jak wyżej (separator: -)

Przykłady użycia selektorów:

// zwraca wszystkie linki wewnątrz elementu myElement
$('myElement').getElements('a');

// wszystkie tagi o nazwie "dialog"
$('myElement').getElements('input[name=dialog]');

// wszystkie inputy, których nazwa kończy się ciągiem 'log'
$('myElement').getElements('input[name$=log]');

// wszystkie linki zaczynające się na "mailto:"
$('myElement').getElements('a[href^=mailto:]');

Biblioteka MooTools i JSON

Format JSON jest również wspierany w MooTools.

Kodowanie – metoda encode() obiektu JSON: var myJSON = JSON.encode(obj);

Przykład:

var fruitsJSON = JSON.encode({apple: 'red', lemon: 'yellow'}); 
// returns: '{"apple":"red","lemon":"yellow"}'

Dekodowanie – metoda decode(): var object = JSON.decode(string[, secure]);

Przykład:

var myObject = JSON.decode('{"apple":"red","lemon":"yellow"}'); 
// returns: {apple: 'red', lemon: 'yellow'}

Cookie – obsługa plików cookies

Pisaliśmy już dość obszerny artykuł o obsłudze Cookies w JavaScript. MooTools posiada własne obiekty i metody do pracy z Cookies.

Metody write() i read():

var myCookie = Cookie.write(key, value[, options]);

Przykład:

// zapis
var myCookie = Cookie.write('username', 'Harold');

// tworzenie, odczyt, usunięcie (przedawnienie cookie)
var myCookie = Cookie.write('username', 'Rene', {
    domain: 'mootools.net'
});

if (Cookie.read('username') == 'Rene') { 
    Cookie.dispose(myCookie); 
}

Fx, czyli moduł efektów wizualnych

Fx to część framework’a wspierająca tworzenie efektów wizualnych. Poniekąd podobnie, jak ma to miejsce np. w script.aculo.us.

Konstruktor:

var myFx = new Fx([options]);

Przykłady efektów:

var myFx = new Fx.Tween(element);
// ustaw background na czerwony
myFx.set('background-color', '#f00');

// przejście kolorów
var myFx = new Fx.Tween(element);
myFx.start('background-color', '#000', '#f00');
myFx.start('background-color', '#00f');

Przykład – podświetlanie / highlight:

// zmień tło elementu na jasno-niebieski
$('myElement').highlight('#ddf');

Oczywiście to tylko garstka, pełny opis tego dość rozległego zagadnienia znajdziemy tutaj.

AJAX i biblioteka MooTools

Obiekt Request – jest podstawą obsługi Ajax w przypadku tej biblioteki.

Konstruktor:

var myRequest = new Request([options]);

Żądanie get możemy wykonać poprzez:

var myHTMLRequest = new Request.HTML().get('myPage.html');

natomiast post:

var myHTMLRequest = new Request.HTML({url:'myPage.html'}).
    post("user_id=25&save=true");

Przykład – użycie obiektu Request dla AJAX:

// basic
var myReq = new Request({
    method: 'get', url: 'handler.php'
});
myReq.send('name=john&lastname=dorian');

// format JSON
var myReq = new Request({url: 'getData.php', method: 'get',
    headers: {'X-Request': 'JSON'}});

myReq.setHeader('Last-Modified','Sat, 1 Jan 2005 05:00:00 GMT');

// format xml
var myReq = new Request(url, {method: 'get', onSuccess: 
    function(responseText, responseXML) {
        alert(this.getHeader('Date')); 
        // np.: "Thu, 26 Feb 2009 20:26:06 GMT"
}});

Przykład – wiele żądań AJAX (XHR):

var xhr1 = new Request('/one.js', {
    evalResponse: true
});

var xhr2 = new Request('abstraction.js', {
    evalResponse: true
});

var xhr3 = new Request('template.js', {
    evalResponse: true
});

var group = new Group(xhr1, xhr2, xhr3);

group.addEvent('onComplete', function() {
    alert('All Scripts loaded');
});

xhr1.request();
xhr2.request();
xhr3.request();

W tym przykładzie, alert pokaże się po wykonaniu wszystkich trzech żądań.

Szczegółowy opis kolejnego rozległego zagadnienia, jakim jest obsługa Ajax, znajduje się tutaj.

Podsumowanie

MooTools to rozbudowana biblioteka ze sporymi możliwościami.

Strona domowa MooTools:

http://mootools.net/

Biblioteka MooTools to ciekawa alternatywa dla innych bibliotek JavaScript, potrafiąca wypełnić wiele luk JavaScriptu.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook0Tweet about this on TwitterShare on Google+1Share on LinkedIn0Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.