WebAbout

Przemierzając czeluście internetu w poszukiwaniu ciekawych bibliotek wspomagających tworzenie interfejsu użytkownika jednocześnie nie wypaczających user-experience trafiłem (dość szybko, więc moje poszukiwania nie były długie i męczące) na ciekawą stronę http://script.aculo.us/.

Na stronie tej zobaczyć można czym jest jedna z części wykorzystywanych przeze mnie w moich projektach. Jest to coś, co od razu rzuca się w oczy - animacja. Bawiąc się nagłówkami w “bąblach” możemy doświadczyć kolejnej jakże zacnej funkcjonalności - techniki drag&drop.

Jak już mówiłem - najczęściej wykorzystywaną częścią jest framework animacji. Jest on niezwykle wygodny w użyciu. Rozpocząć zabawę ze scriptaculous można ( i to zalecam ) od złożonych efektów.

http://wiki.script.aculo.us/scriptaculous/show/CombinationEffects

Zalecam przestudiowanie dokumentacji, ale sam też podpowiem parę rzeczy, które spotkałem podczas pracy z tą biblioteką. Większość efektów wywołuje się poprzez

Effect.(nazwa_efektu)(obiekt);

W zdecydowanej większości jest to wystarczające minimum, jednak jeden z efektów wymaga umieszczenia słowa new przed całym wyrażeniem. “Be aware of the synatx: this effect strictly requires a “new” in front, otherwise you will get a javascript
error.” Dodam, że obiekt nie musi być obiektem samym w sobie, ale jego id również zostanie zaakceptowane. To z powodu użycia funkcji $() z biblioteki Prototype, na której to scriptaculous się opiera. Więcej o funkcji $() znajdziesz na http://www.prototypejs.org/api/utility

Te gotowe efekty oczywiście daje się modyfikować do własnych potrzeb. W dokumentacji każdej z nich znajdziecie listę opcji w jakie można wyposażyć wywoływany efekt. I tak dla przykładu:
Effect.Appear('id_of_element', { duration: 3.0 });

Efekt pojawiania się będzie teraz trwał dłużej, bo całe trzy sekundy.

Po opanowaniu efektów złożonych, możemy przejść do efektów podstawowych. Te wywołuje się jak poprzednie, a także mają swoją dokumentację:

http://wiki.script.aculo.us/scriptaculous/show/CoreEffects

Gdybym pokazał tylko te dwie funkcjonalności to pominąłbym duży kawałek udogodnień jaki jest dostarczany przez scriptaculous. Efekty złożone powstały poprzez wywoływanie kolejno efektów podstawowych. W jaki sposób zagwarantowano to, że każdy z podstawowych efektów jest wykonywany po kolei albo jednocześnie z innymi? W jaki sposób zagwarantować kolejność wywołania efektów? Tutaj przychodzą nam z pomocą kolejki. Ich dokumentacja znajduje się pod adresem:

http://wiki.script.aculo.us/scriptaculous/show/EffectQueues

Efekty można ustawiać tak, by wykonały się w pewnej kolejności. Najlepiej wytłumaczyć działanie kolejek na przykładzie:


Effect.Puff(’klocek1′);
Effect.Puff(’klocek2′);
Effect.Puff(’klocek3′);


Ten fragment kodu spowoduje wywołanie efektu Puff, na elementach o id: klocek1, klocek2, klocek3. Jednak te trzy obiekty znikną w jednym czasie. Jak zrobić, żeby Puff działał na każdym z nich jeden po drugim?

Effect.Puff('klocek1', {queue: 'end'});
Effect.Puff(’klocek2′, {queue: ‘end’});
Effect.Puff(’klocek3′, {queue: ‘end’});


Teraz efekty zostały ustawione w kolejkę, czyli wykonają się po kolei. Bardziej zaawansowane animacje mogą wymagać akcji na kilku obiektach, ale ani nie wszystkie po kolei, ani na raz. Przydatne będzie tutaj grupowanie kolejek.


Effect.Puff(’klocek1′, {queue: {position: ‘end’, scope: ‘grupa1′} );
Effect.Puff(’klocek2′, {queue: {position: ‘end’, scope: ‘grupa1′} );
Effect.Puff(’klocek3′, { {queue: {position: ‘end’, scope: ‘grupa1′} );
Effect.Puff(’klocek4′, {queue: {position: ‘end’, scope: ‘grupa2′} );
Effect.Puff(’klocek5′, {queue: {position: ‘end’, scope: ‘grupa2′} );
Effect.Puff(’klocek6′, { {queue: {position: ‘end’, scope: ‘grupa2′} );

Teraz kolejność znikania będzie następująca:

klocek1 oraz klocek4

klocek2 oraz klocek5

klocek3 oraz klocek 6

To już wszystko co chciałem powiedzieć o tej bibliotece. Jak już wspomniałem na początku posiada ona jeszcze rozszerzenia oferujące technikę drag’n'drop, ale nie korzystałem do tej pory z tej części toteż nie będę się o niej rozpisywać.

Projektując interfejsy z takimi animacjami należy wziąć pod uwagę to, że na stronie o wiele bardziej ważna jest informacja, a nie sposób jej przestawienia. Przestrzegam nie tyle co przed zbytnim natłokiem animacji na stronie, ale bardziej przed wydłużaniem czasu, który musi minąć pomiędzy akcją użytkownika, a momentem, w którym może on wykonać następną akcję - czasu który na jakąś animację jest poświęcony.