Kurs: Dojo Toolkit w pigułce. Część 1.

Dojo Toolkit

Poziom średnio-zaawansowany

Dojo Toolkit to biblioteka programistyczna open-source dla języka JavaScript. Udostępnia programiście bogaty zestaw narzędzi.

Biblioteka Dojo Toolkit

W skład framework’u wchodzi wiele komponentów.

Widżety (i system widżetów Dijit)

Widżety Dojo składają się z kodu JavaScript, HTML i CSS, dostępne są między innymi: paski menu i tooltip’y, sortowane tabele, dynamiczne wykresy i dwuwymiarowa grafika wektorowa, animowane efekty, kalendarze i zegary, elementy formularzy wraz z procedurami walidacji.

Skórki / skins

Można używać różnych skórek w celu zmiany wyglądu widżetów / UI.

Asynchroniczna komunikacja (client-server)

Czyli jedna z najważniejszych możliwości aplikacji korzystającej z AJAX, tradycyjnie wykonywane z użyciem obiektu XMLHttpRequest języka JavaScript.

Wrapper oferowany przez Dojo (dojo.io.bind) pozwala na korzystanie z XMLHttpRequest w różnych przeglądarkach bez zmiany kodu. Potrafi też wykorzystać inne metody transportu (jak np. ukryte ramki iframe) i różne formaty wymiany danych.

System paczek

Dojo oferuje system paczek, dzięki czemu możemy umieszczać funkcjonalności w oddzielnych paczkach, w stylu programowania modułowego. Ponadto jest możliwość definiowania zależności.

Przechowywanie danych po stronie serwera

W nowszych wersjach Dojo Toolkit obsługuje większość schowków po stronie serwera poprzez przestrzeń nazw dojo.data: CsvStore (format CSV), OpmlStore (format OPML), YahooStore, DeliciousStore, RdfStore (RDF).

Wsparcie Adobe Integrated Runtime (AIR)

Dojo Toolkit może być śmiało używany w aplikacjach bazujących na Adobe AIR (zostało dostosowane pod wymagania zasad bezpieczeństwa).

Programowanie z użyciem Dojo Toolkit – szybki start

Kompletna biblioteka może zostać pobrana ze oficjalnej strony.

Można ją także dołączyć używając CDN, co ilustruje poniższy przykład prostej strony HTML5.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Dojo Toolkit!</title>

    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"
               data-dojo-config="async: true"></script>
</head>
<body>
    <p id="hello">Todo</p>

</body>
</html>

Oczekiwanie na DOM

Czyli to, co już na pewno dobrze znamy. Czasami należy się wstrzymać w wykonywaniem kodu do czasu, aż się upewnimy że przeglądarka załadowała wszystko czego potrzebujemy (biblioteki JavaScript, elementy dokumentu HTML itp).

W jQuery zapewnia to zdarzenie $(document).ready(function() { /* … */ });, w Ext JS Ext.onReady(function() { /* … */ });, natomiast w Dojo Toolkit odbędzie się to na zasadach dołączania modułów (ponieważ potrzebujemy w tym przypadku modułów obsługi DOM).

Przykład:

require(["dojo/dom", "dojo/domReady!"], function(dom) {
    var hello = dom.byId("hello");
    hello.innerHTML = "Hello Dojo!";
});

Pobranie elementu według ID w przypadku Dojo odbywa się poprzez dom.byId(„id_elementu”);. W przykładzie pobrany został paragraf (element z ID = hello), po czym jego tekst został zamieniony z Todo na Hello Dojo!

Mamy tutaj już zatem przykład, jak Dojo obsługuje operacje DOM i możemy porównać jak to wygląda na tle innych bibliotek.


Dodatkowo polecam szczególnie dwa artykuły z oficjalnej strony Dojo Toolkit:

Funkcje DOM w Dojo

Użycie dojo/query do pracy z DOM

Na przykładzie sposobu określania modułów jakich chcemy użyć, możemy zobaczyć że Dojo Toolkit używa czasami specyficznej składni. Daje programiście rzeczy nieznane lub dość odmienne w użyciu, aniżeli w innych framework’ach JavaScript.

Podsumowanie

Dojo Toolkit to framework o wspaniałych możliwościach, rozwijany od wielu lat. Co ciekawe istnieje Fundacja Dojo, która jest organizacją non-profit i zajmuje się promowaniem biblioteki jak i wspieraniem projektów Open-source.

Wkrótce część 2. kursu Dojo Toolkit, w której skoncentrujemy się bardziej na praktyce.

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+3Share on LinkedIn1Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.