Magia animacji

Animacja DHTML-owa działa w Internet Explorerze, a nie funkcjonuje w Navigatorze? Nic straconego, wystarczy użyć Alladyna.

W lipcowym numerze CHIP-a, w artykule pt. „Krosna, igły, nożyczki” (str. 36-38) znalazł się krótki opis projektu Alladyn – zbioru funkcji języka JavaScript, unifikujących sposób przetwarzania kodu JS w najpopularniejszych przeglądarkach WWW. W niniejszym tekście spróbuję przedstawić przykład praktycznego wykorzystania imponujących możliwości Alladyna, zaszytych w kodzie składającym się na niepozornych (ok. 2,5 KB) rozmiarów bibliotekę programistyczną.

Polak potrafi

Najogólniej mówiąc, Alladyn obejmuje całokształt mechanizmów stworzonych za pomocą języka JavaScript i pozwalających twórcom stron internetowych realizować ideę tzw. cross-browsingu. Termin ten oznacza ujednolicenie sposobu wyświetlania witryn sieciowych w różnych przeglądarkach, działających na różnych platformach systemowych, przy zachowaniu tej samej wersji kodu strony WWW.

Opisywany projekt powstał w odpowiedzi na odmienną implementację kodu języka JavaScript w dwóch najpopularniejszych przeglądarkach – Internet Explorerze i Netscape Navigatorze. Twórcy witryn internetowych wykorzystujący JS do wzbogacania serwisów elementami interaktywnymi doskonale znają uczucie frustracji, pojawiające się niejednokrotnie w momencie testowania nowych stron. Występujące wbrew wszelkiej logice niezgodności w reprezentacji tego samego pliku HTML w różnych przeglądarkach działających pod kontrolą różnych systemów operacyjnych kończą się często rezygnacją z tego czy innego „wodotrysku”. Zaradzić temu można, wykorzystując właśnie możliwości Alladyna – biblioteki programistycznej stanowiącej API technologii Dynamic HTML, czyli efektu połączenia możliwości techniki kaskadowych arkuszy stylów CSS, modelu DOM oraz języka JavaScript.

…i jesteśmy w DOM-u!

W dziele kreacji interaktywnych elementów serwisu internetowego Alladyn okazać nam się może pomocny w dwojaki sposób. Po pierwsze, zawarty w tej bibliotece zbiór funkcji JScriptu w momencie uruchomienia tworzy „w locie” nowy, ujednolicony model obiektowy przeglądarki (DOM) wraz ze wszystkimi niezbędnymi obiektami, metodami i właściwościami. W ten sposób zniwelowana zostaje różnica w implementacji języka JavaScript w obrębie najpopularniejszych przeglądarek WWW i znika potrzeba pisania osobnego kodu skryptów dla IE i Navigatora. Dzięki temu w naszej pracy nad serwisem WWW możemy się skoncentrować wyłącznie na kwestiach naprawdę istotnych – dopracowaniu szaty graficznej oraz logiki programistycznej witryny, nie zaprzątając sobie głowy powstawaniem ewentualnych różnic w sposobie jej wyświetlania w różnych przeglądarkach. Działając z założenia na zasadzie „uruchom i zapomnij”, Alladyn pozwala więc w pełni cieszyć się swobodą kreacji, oszczędzając webmasterowi wiele czasu oraz niepotrzebnych nerwów.

Po drugie, w chwili startu Alladyn oddaje dodatkowo do dyspozycji projektanta stron WWW rozbudowany moduł animacyjny, wykorzystujący mechanizmy DHTML-a. Na moduł ten składają się zaszyte w kodzie Alladyna mechanizmy, służące m.in. modelowaniu kilku rodzajów ruchu (zwykły, zapętlony, odbity) w oparciu o klatki kluczowe oraz kontrolowaniu wszystkich parametrów określających wygląd warstw, takich jak np. pozycja, przezroczystość czy kadrowanie. Zastosowane w Alladynie rozwiązania pozwalają uzyskać na stronie WWW efekty bliźniaczo podobne do znanych z animacji typu Flash.

Porównanie modelu obiektowego (DOM) Alladyna, IE 4.x oraz NN 4.xx/6:
Wersja DOMDostęp do warstwDostęp do właściwości pozycjonujących
Internet Explorer 4.x lub wyższydocument.all[‚nazwawarstwy’] lub document.all.nazwawarstwydocument.all.nazwawarstwy.style.top = 100
document.all.nazwawarstwy.style.left = 10
document.all.nazwawarstwy.style.zIndex = 3
Netscape Navigator 4.xxdocument.layers[‚nazwawarstwy’] lub document.layers.nazwawarstwydocument.layers.nazwawarstwy.top = 100
document.layers.nazwawarstwy.left = 10
document.layers.nazwawarstwy.zIndex = 3
Netscape Navigator 6warstwa = document.getElementById („nazwawarstwy”) warstwawarstwa = document.getElementById(„nazwawarstwy”)
warstwa.style.top = 100
warstwa.style.left = 10
warstwa.style.zIndex = 3
Alladynvlay.nazwawarstwy lub vlay[‚nazwawarstwy’]vlay.nazwawarstwy.style.top = 100
vlay.nazwawarstwy.style.left = 10
vlay.nazwawarstwy.style.zIndex = 3