Dojo Toolkit, czyli budujemy atrakcyjny interfejs w JavaScript. Część I: wprowadzenie

Jedną z bibliotek programistycznych pozwalających na wydajniejsze wykorzystanie języka JavaScript w tworzeniu aplikacji sieciowych jest Dojo Toolkit. Wyróżnia się ona dużym naciskiem położonym na funkcje pozwalające na budowę atrakcyjnych interfejsów użytkownika. Nie oznacza to bynajmniej, że Dojo nie posiada żadnych innych zastosowań. Biblioteka oferuje też bogaty zestaw narzędzi służących do uzyskiwania dostępu do danych, ich wizualizacji, a także do obsługi zdarzeń.

W pierwszym z cyklu dwóch artykułów prezentujących Dojo poznamy architekturę oraz podstawowe funkcje biblioteki. W drugiej części zbudujemy natomiast zręby aplikacji pozwalającej na uzyskiwanie dostępu do danych oraz ich wizualizację.

Architektura Dojo

Biblioteka Dojo Toolkit składa się z kilku osobnych komponentów. Obok zestawu podstawowych funkcji, stanowiących trzon Dojo, są nimi również Dijit, DojoX, a także dodatkowe narzędzia. Co kryje się pod nazwami subprojektów?

Dijit to pakiet widgetów ułatwiających tworzenie interfejsów graficznych. Dzięki niemu interaktywną stronę internetową można zbudować z gotowych modułów, w razie potrzeby tworząc własne lub rozwijając istniejące. Z kolei DojoX to kolekcja niewielkich, wyspecjalizowanych projektów rozwijanych w ramach Dojo.

Znakomity przykład stanowi Sketch. Jest to narzędzie, dzięki któremu stworzenie prostej aplikacji pozwalającej na przeglądanie i edycję grafiki SVG wymaga napisania zaledwie kilku linijek kodu.

Dojo Toolkit oferuje bogaty zestaw narzędzi oraz widgetów ułatwiających tworzenie interfejsów.

Funkcje dostępne w Dojo, wraz z Dijit i DojoX, pozwalają na tworzenie rozbudowanych interfejsów, ułatwiając obsługę formularzy, dostęp do danych, wyświetlanie wykresów oraz multimediów, a także formatowanie za pomocą arkuszy styli. Biblioteka obsługuje wszystkie popularne przeglądarki. Ich listę można znaleźć na stronie głównej projektu.

Nie oznacza to, że możemy poczuć się zwolnieni z obowiązku testowania tworzonych witryn. Dojo nie jest w pełni kompatybilne z wszystkimi przeglądarkami. Warto sprawdzić zawczasu wygląd stron, zwłaszcza w programie Internet Explorer, który sprawia niekiedy problemy.

Demo jednego z widgetów wchodzących w skład pakietu Dijit.

Przed rozpoczęciem pracy z biblioteką i jej poszczególnymi komponentami warto przetestować dostępne skrypty demonstracyjne, by sprawdzić, czy Dojo rzeczywiście odpowiada naszym potrzebom. Przykłady zamieszczone są na witrynie domowej Dojo Toolkit, na stronie Demos.

Osoby zainteresowane tworzeniem interfejsów aplikacji użytkowych oraz biznesowych powinny obejrzeć skrypt DojoMail. Stanowi on interfejs prostego klienta poczty elektronicznej. Obsługę multimediów demonstrują przykłady Image Zoomer oraz Video Player, możliwości związane z interakcją z użytkownikiem - Flash Cards.

Wart uwagi jest również Feature Explorer - przeglądarka wielu małych skryptów przedstawiających funkcje związane z dostępem do danych, efektami graficznymi, a także korzystaniem z widgetów.

«poprzednia 1 2 3 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

10 skomentuj »

Komentarze

#1 hgfhf 2010-04-15 11:10:59 0
Dojo ma jedną wadę poprzez swoje niestandardowe atrybuty nie jest zgodny z (X)HTML-em.
IP: 77.255.51.[...] Mozilla/5.0 (X11; U; Linux i686; pl-PL; rv:1.9.2.2pre) Gecko/20100219 Ubuntu/9.10 (karmic) Namoroka/3.6.2pre
#2 slawek22 2010-04-15 11:18:31 0
Raczej jest niezgodny z zaleceniami w3c, w HTML możesz używać atrybutów użytkownika. To raczej zaleta bo jest prostsze w obsłudze.

Z HXTML to co innego, żaden framework z tym nie działa.
IP: 83.29.77.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.1.249.1045 Safari/532.5
#3 hgfhf 2010-04-15 13:45:23 0
slawek22: Absolutnie w HTML-u jak w XHTML-u nie wolno używać atrybutów użytkownika. W HTML5 będzie możliwość używania podobnego czegoś co będzie miało postać data-foo, gdzie foo to jest dowolny string.

Co braku frameworków niedziałającym w XHTML-u to wszystkie inne działają :) . CHociażby jQuery czy jQueryUI.
IP: 83.13.122.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 (.NET CLR 3.5.30729)
#4 qqq 2010-04-15 18:53:52 0
Dlaczego uważasz że nie można używać atrybutów użytkownika?

Oczywiście że taki dokument nie przejdzie walidacji,

ale poza tym nic się nie stanie.

Nieznany dla przeglądarki atrybut zostanie po prostu pominięty.

Przy różnych JS-hackach to się naprawdę przydaje.
IP: 89.171.9.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7
#5 hgfhf 2010-04-15 19:06:39 0
qqq: ponieważ jest to niezgodne ze specyfikacją. A w przypadku aplikacji XML to ma znaczenie podwójne, ponieważ parser wyrzuca błąd jest dokument nie jest poprawny strukturalnie.
IP: 77.255.51.[...] Mozilla/5.0 (X11; U; Linux i686; pl-PL; rv:1.9.2.2pre) Gecko/20100219 Ubuntu/9.10 (karmic) Namoroka/3.6.2pre
#6 bounty 2010-05-07 12:47:38 0
Nie wiem jak u innych, ale u mnie w Operze 10.53 raczej średnio to działa. Właściwie to nie działa większość dem - ani menu, ani sortowanie danych, działają jedynie bzdurki typu imagezoomer ale do tego akurat jest milion skryptów w sieci.
IP: 89.75.49.[...] Opera/9.80 (Windows NT 5.1; U; pl) Presto/2.5.24 Version/10.53
#7 Paweł Skiba 2010-08-16 10:25:06 0
"Po wyświetleniu strony zobaczymy jedynie pojedynczy klawisz. Jego

kliknięcie spowoduje otwarcie formularza zawierającego pole tekstowe

oraz przycisk."

To nie jest prawda.

Zobaczymy stronę która wygląda w ten sposób

http://img835.imageshack.us/img835/7954/dojoi.jpg

Dodatkowo wciśniecie buttona nie będzie wywyływało żadnego efektu.

Dopiero po dodaniu stylów wszystko będzie działać jak należy.

Prawdopodobnie brak stylów powoduje to że okienko kończy pracę, co daje taki sam efekt jakby naciśnieto klawisz w okienku dialogowym, bo przycisk wywołujący nie jest blokowany więc sytuacje że okienko zostało wyświetlone, ale jest niewidoczne można wykluczyć.

Zauważę także że powyższa sytuacja występuje tylko jeśli skrypt dojo.js ładujemy z lokalnego serwera. Załadowanie skryptu dojo.xd.js z sieci nie powoduke tych niekorzystnych efektów, trzaba jednak pamiętać by zdefiniowac konfiguracje dodając djConfig="parseOnLoad:true"

Wychodzi na to że dojo.xd.js w odróżnieniu od dojo.js definije domyślny styl i dlatego z jego wykorzystaniem przykład działa bez dodaktowego definiowania stylu.
IP: 77.253.139.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8
#8 Paweł Skiba 2010-08-19 15:32:53 0
"Biblioteka obsługuje wszystkie popularne przeglądarki. Ich listę można znaleźć na stronie głównej projektu."

Potestowałem i stwierdzam że obsługuje do tego stopnia że ten sam kod w różnych przeglądarkach działa różnie. W dokumentacji dojo piszą że używajac dojo można uniezależnić się od martwienia niezgodnoscią kodu w rożnych prprzeglądarkach bo o zgodnosć zadba dojo.

Tyle ze to kłamstwo.

Nawet funkcje AJAX trzeba pisać w specyficzny sposób bo gdy wykorzytsa się wszystkie formy jakie są dopuszczalne w dokumenracji dojo to niestety nie wszedzie zadziała.

Poziom dokumentacji to kolejny problem. W przykłdach w reference manual uzywane sa funkcje których nie ma w dikumentacji API.

Miałem przypadek że znalazłem funkcje przez google. Obglądam kod, testuje przykłady ... wpisuje nazwe funkcji w wyszukiwarke na stornch dokumentacji dojo i okazuje się ze tej funkcji którą właśnie oglądam nie ma ;)
IP: 87.205.228.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8
#9 Patryk yarpo Jar 2011-06-17 08:28:38 0
@hgfhf: a co daje poprawność z XHTML, prócz tego, że kod jest poprawny z XHTML :) ? . Kod z niestandardowymi atrybutami jest nadal poprawnym składniowo XML, więc można taką stronę obsługiwać jako dokument XML.

Tak naprawdę mało która strona XHTML jest wyświetlana jako XML (a skoro używamy XHTML, to powinniśmy do tego dążyć).

Jeśli chodzi o sam dojo, to bardzo ciekawy toolkit. Warto pamiętać, że prócz samej części javascriptowej posiada też ciekawe narzędzia, np. kompresor kodu JS shrinksafe

Czytając artykuł zabrakło mi trochę gotowych przykładów. Zapraszam, na trochę bardziej okraszony przykładami do odpalenia tutorial;)

http://www.yarpo.pl/2011/06/15/dojo-quick-start/
IP: 153.19.52.[...] Mozilla/5.0 (Windows NT 5.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
#10 Patryk yarpo Jar 2011-06-17 08:29:51 0
Nie wiem, dlaczego zjadło mi linki.

Shrinksafe: http://www.yarpo.pl/2011/01/31/kompresja-kodu-js-shrinksafe/

XHTML serwowany jako XML: http://www.yarpo.pl/2010/11/12/xhtml-serwowany-jako-xml/
IP: 153.19.52.[...] Mozilla/5.0 (Windows NT 5.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.