Dziudek's jogger

Plik assets.js pozwala nam na dynamiczne dołączanie do naszych stron styli CSS, plików JS i grafik. Jest to bardzo przydatny plik. Zresztą zaraz sami się przekonacie jak bardzo pozwala on usprawnić działanie strony. W pliku tym zawarte są 4 metody klasy Asset - javascript, css, image, images. Myślę, że już same nazwy wiele mówią.

javascript

Metoda ta służy oczywiście do dynamicznego dołączania pliku JavaScript. Zastosowanie ? Wyobraźmy sobie sytuację w której mamy sporą aplikację online opartą o JavaScript - z reguły jest tak, że potrzeba tylko podstaw tej aplikacji, a większość pozostałych funkcji jest używanych okazjonalnie. Możemy więc sprawić, że ładowany będzie tylko rdzeń aplikacji z podstawowymi funkcjami (i tymi najczęściej używanymi), a reszta funkcji będzie doładowywana w razie potrzeby. Bardzo ładnie można taki proces zorganizować za pomocą klas i ich metod jakie udostępnia nam mootools - mam nadzieję, że czytelnicy kursu pamiętają jeszcze metody implement i $defined ? Jeżeli nie to polecam szybką powtórkę plików Core.js i Class.js ;)

Zanim przejdziemy do samego zastosowania najpierw podstawy użycia metody javascript. Jej składnia jest bardzo prosta:

new Asset.javascript('url',{opcje});

Zmienna url to oczywiście adres pliku JavaScript ,który chcemy dołączyć do naszej strony, a obiekt {opcje} to dodatkowe parametry wywołania tej metody. Obiekt ten zawierać może atrybuty dodawanego do dokumentu znacznika script - id, title - jak także w tym właśnie obiekcie definiujemy co się stanie po załadowaniu pliku - poprzez właściwość onload.

Przykładowo - gdybyśmy chcieli dołączyć do naszej strony plik on nazwie skrypt.js z katalogu skrypty i chcielibyśmy by znacznik script posiadał id new_script, a po załadowaniu tegoż pliku miałby się wyświetlić alert to zapiszemy:

new Asset.javascript("skrypty/skrypt.js",{
   id: "new_script",
   onload: function(){
      alert("Skrypt został załadowany...");
   }
});

Teraz możemy przejść do przykładu bardziej związanego z rzeczywistością - stworzymy klasę Aplikacja, która będzie podzielona na dwa pliki - w jednym (ładowanym wraz ze stroną) będzie się znajdowała metoda basic_function, a w drugim pliku, który będziemy chcieli dołączyć w odpowiednim momencie dynamicznie - metoda additional_function. Tworzymy zatem naszą klasę:

var Aplikacja = new Class({
   basic_function: function(){
      $('konsola').setHTML($('konsola').innerHTML+' To jest tekst dodany przez podstawową funkcję');
   }
});

Jak widzimy metoda basic_function dodaje w danym elemencie tekst z informacją.

Oczywiście nie zapominamy stworzyć instancji tej klasy :

var App = new Aplikacja();

I podpinamy jej metodę pod zdarzenie onclick jednego z przycisków:

$('btn1').addEvent('click',function(){
   App.basic_function();
});

Tworzymy też od razu powiązanie drugiej metody z drugim przyciskiem:

$('btn2').addEvent('click',function(){
   App.additional_function();
});

No ale problem w tym, że metoda additional_function może jeszcze nie istnieć w momencie jej wywołania, bo plik, który ją zawiera mógł być jeszcze nie dodany do naszej strony. Zatem korzystamy z funkcji $defined :

$('btn2').addEvent('click',function(){
if($defined(App.additional_function)){
App.additional_function();
}
else{
alert('Ta funkcja nie została jeszcze dodana !');
}
});

I teraz już nie będzie problemów ;)

To teraz dynamiczne dołączanie pliku skrypt.js podpinamy pod trzeci przycisk:

$('btn3').addEvent('click',function(){
   new Asset.javascript('plik.js',{onload: function(){alert('Plik załadowany...');}});
});

Jak widać po dodaniu pliku pojawi się alert ze stosowną informacją.

I sam plik.js:

Aplikacja.implement({
   additional_function: function(){
      $('konsola').setHTML($('konsola').innerHTML+' To jest tekst dodany przez dodatkową funkcję');
   }
});

W powyższym kodzie korzystamy z metody implement, która rozszerza możliwości klasy bez tworzenia nowej.

Napisaliśmy sporo kodu to pora zobaczyć jak się to wszystko razem sprawuje :

PRZYKŁAD 1

Elegancko prawda ? Oczywiście życie jest zbyt brutalne by wszystko działało idealnie. Na IE ( oraz na Operze 8.5 ale jej można wybaczyć z racji wieku ;D ) nie pojawia się alert po załadowaniu pliku... Tak jakby IE nie obsługiwał zdarzenia onload dla tego pliku... Cóż pozostaje nam zrobić ? Najpierw należałoby się zastanowić czy zdarzenie onload dla ładowanego pliku jest nam potrzebne i jak duże ładujemy pliki - jeśli zdarzenie onload niekoniecznie jest nam potrzebne, a ładowane pliki ważą po kilka kB to warto sobie darować metodę, którą zaraz zaprezentuję - z gatunku "czołgiem" ;)

Mianowicie dodajemy przy zdarzeniu onclick trzeciego przycisku taki kod:

if(window.ie){
   var timer = (function(){
      if($defined(App.additional_function)){
         $clear(timer);
         alert('Plik został załadowany...');
      }
   }).delay(200);
}

Co robi powyższy kod ? Przede wszystkim sprawdza czy przeglądarka to IE, a jeśli tak to tworzy funkcję, która wykonuje się co 200ms aż do momentu w którym nie będzie zdefiniowana nowa funkcja (czyli plik JS będzie już załadowany). Oczywiście nie jest to tak dokładne jak zdarzenie onload dla pliku, ani nie jest może zbyt wydajne, ale cóż zrobić jeśli przeglądarka nie ma natywnej obsługi danego zdarzenia ?

css

Metoda css służy do dynamicznego dołączania plików styli CSS do naszej strony. Można jej użyć między innymi do dynamicznej zmiany stylu strony. Przykładowo spójrzmy na stronę grono.net - można zmieniać jej styl za pomocą przycisków w prawym górnym rogu. Wada ? Każde kliknięcie oznacza przeładowanie strony - nie muszę chyba mówić, że przejrzenie wszystkich dostępnych styli to po prostu masakra zwłaszcza, że sama strona grono.net nie jest lekka.

Składnia metody css jest podobna do poprzedniej metody:

new Asset.css('url', {opcje});

Różnica polega na tym, że w metodzie css nie występuje zdarzenie onload. Zmienna url to oczywiście adres do pliku CSS, jaki ma zostać załadowany, a {opcje} to dodatkowe atrybuty znacznika link.

Użycie tej metody jest banalne więc zaprezentuję od razu przykład, który opiera się na zdarzeniach onclick dowiązanych do przycisków, które to zdarzenia mają ładować poszczególne pliki ze stylami.

PRZYKŁAD

image

Kolejną metodą pliku assets.js jest image - służy ona do dynamicznego załadowania obrazka - jest to przydatne w skryptach typu lightbox, prostych galeriach itd.

Składnia tej metody jest bardzo podobna do składni poprzednich metod:

new Asset.image('url',{opcje});

Już chyba wiecie co znaczą obie zmienne, więc pora omówić różnice - metoda image posiada trzy zdarzenia - onload, onabort i onerror. Pierwsze z nich działa tak jak w metodzie javascript, drugie występuje w momencie przerwania ładowania pliku, a trzecie pojawia się gdy wystąpi błąd podczas jego ładowania (pliku).

Metoda image w odróżnieniu do metod css i javascript nie umieszcza gdzieś obrazka (wspomniane metody umieszczają odpowiednie znaczniki w sekcji head dokumentu), ale zwraca uchwyt do niego.

Tak więc umieszczenie pobranego obrazka spoczywa na nas.

Stwórzmy teraz jakiś prosty skrypt obrazujący użycie tej metody.

Przyjmijmy, że mamy miniaturkę jakiegoś obrazka i chcemy by po kliknięciu na nią pojawiał się jej oryginał.

Może od razu wytłumaczę jak działa cały poniższy kod:

var img = new Asset.image('img.png',{onload: function(){
   img.injectInside('content');

   img.setStyles({
      'display':'none',
      'opacity':0.25
   });

   $('image').setStyle('opacity',0.25);
   $('image').effects().start({
      'width': [320,800],
      'height': [240,600],
   });

   (function(){
      $('new_image').setStyle('display','block');
      $('image').replaceWith($('new_image'));
      $('new_image').setStyle('opacity',1);
   }).delay(600);
},'id': 'new_image'});

Który jest przypisany do zdarzenia onclick obrazka.

Powyższy kod działa następująco:

• pobiera obrazek
• gdy obrazek zostanie pobrany wywoływane jest zdarzenie onload
• podczas zdarzenia onload pobrany obrazek jest umieszczany w dokumencie i zostaje ukryty poprzez display: none.
• rozmiar małego obrazka jest zwiększany do rozmiarów dużego obrazka,
• po animacji duży obrazek jest pokazywany i zamieniany z małym obrazkiem.

A całość w przykładzie wygląda następująco:

PRZYKŁAD 2

Swoją drogą nie wiem czemu, ale mam wrażenie, że zdarzenie onload dla obrazka pojawia się nie po załadowaniu tylko w momencie rozpoczęcia ładowania, a co za tym idzie należy wykonać podobne obejście jak w wypadku metody javascript tylko tym razem testowaną właściwością będzie właściwość complete danego obrazka - jeśli ma wartość true to obrazek jest załadowany.

images

Ostatnia metoda klasy Asset służy do ładowania kilku grafik - dzięki zdarzeniom onProgress i onComplete możemy nawet stworzyć wskaźnik postępu ładowania się kilku grafik. Składnia metody jest oczywiście bardzo podobna do pozostałych w tej klasie. Różnica polega na tym, że nie podajemy ścieżki do pliku jako ciąg znaków, ale jako tablicę ciągów znaków.

Składnia:

new Asset.images(['obrazek1', 'obrazek2'], {opcje});

Gdzie zmienne obrazek1 i obrazek2 to ścieżki do obrazków, a zmienna {opcje} to oczywiście parametry wywołania metody.

Zdarzenie onProgress występuje w momencie załadowania jednego z obrazków, a zdarzenie onComplete następuje po załadowaniu wszystkich grafik.

W przykładzie wykorzystamy 10 grafik - dla ułatwienia będą one ponumerowane od 1 do 10 - dzięki temu nie musimy też tworzyć ręcznie długiej tablicy - wystarczy poniższy zapis:

var img_tab = [];

for(var i = 0;i < 10;i++){
   img_tab[i] = 'images/' + (i+1) + '.png';
}

do tego deklarujemy też zmienną amount oznaczającą ilość załadowanych obrazków:

var amount = 0;

Najważniejsza część kodu będzie przypisana do zdarzenia onclick przycisku:

$('btn').addEvent('click',function(){
   new Asset.images(img_tab,{
      onProgress: function(){
         amount++;
         $('progress_info_percent').setHTML(amount+'/10');
         this.injectInside($('content'));
      },
      onComplete: function(){
         $('progress_info_percent').setHTML('Grafiki pobrane...');
         $('btn').remove();
      }
   });
});

Co wykonuje powyższy kod ? Jest definiowany nowy obiekt klasy Asset, który ma pobrać wszystkie grafiki z tablicy, którą wcześniej zapełniliśmy pętlą. Ponadto zdefiniowałem dwa wspomniane wcześniej zdarzenia - w wypadku zdarzenia onProgress zostanie zwiększona zmienna oznaczająca ilość załadowanych obrazków, następnie zostanie zmieniona zawartość diva przechowującego informację o ilość załadowanych grafik - no i na koniec zostanie do treści strony dołączony załadowany obrazek. W wypadku zdarzenia onComplete zmieniana jest treść komunikatu i usuwany jest przycisk do ładowania grafik.

Całość kodu prezentuje się następująco:

window.addEvent("load",function(){
   var amount = 0;
   var img_tab = [];

   for(var i = 0;i < 10;i++){
      img_tab[i] = 'images/' + (i+1) + '.png';
   }

   $('btn').addEvent('click',function(){
      new Asset.images(img_tab,{
         onProgress: function(){
            amount++;
            $('progress_info_percent').setHTML(amount+'/10');
            this.injectInside($('content'));
},
         onComplete: function(){
            $('progress_info_percent').setHTML('Grafiki pobrane...');
            $('btn').remove();
         }
      });
   });
});

I powyższy kod w akcji:

PRZYKŁAD 3

I to by było na tyle, jeśli chodzi o plik assets.js - w następnej części kursu zajmiemy się przechowywaniem danych po stronie użytkownika - omówimy plik cookie.js .