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

javascript-html5-tutorial.pl

23 września, 2013

Dominik-W

W części 2. podstawowego kursu Dojo Toolkit przejrzymy przeróżne aspekty pracy z tym frameworkiem.

Biblioteka Dojo Toolkit w praktyce

O możliwościach biblioteki już mówiliśmy w części pierwszej, aczkolwiek słowa są zbędne gdy przejrzymy przykłady.

Konfiguracja

Na początek mechanizm konfiguracji Dojo.

Obiekt dojoConfig jest głównym mechanizmem konfiguracji Dojo w naszej aplikacji / stronie WWW. W starszych wersjach obiekt ten nazywał się djConfig – jest to nazwa przestarzała, w którą się spotkamy w starych kodach bazujących na Dojo Toolkit.

Przykład użycia – wczytanie biblioteki z uprzednim ustawieniem parametrów konfiguracyjnych:

JavaScript

dojoConfig= {
    has: {
        "dojo-firebug": true // has (dojo-firebug sub-property)
    },
    // others
    parseOnLoad: false,
    foo: "bar",
    async: true
};

HTML

<script 
  src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js">
</script>

Konfiguracja musi zostać zdefiniowana przed wczytaniem dojo.js, inaczej nasze ustawienia zostaną zignorowane.

Należy zauważyć różnicę pomiędzy dojo/_base/config a dojoConfig, którego celem jest określanie parametrów wejściowych. W ten sposób „komunikujemy się” z kodem zajmującym się ładowaniem modułów.

Natomiast dojo/_base/config podczas ładowania zostaje wypełniona tymi parametrami, które zdefiniowano.

Deklaracja parametrów może zostać również wykonana w poniższy sposób (atrybut data-dojo-config):

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"
    data-dojo-config="has:{'dojo-firebug': true}, parseOnLoad: false, foo: 'bar', async: 1">
</script>

Możliwości konfiguracyjne Dojo Toolkit są dość rozbudowane, o czym przekonamy się w odpowiednim miejscu dokumentacji.

Więcej o obsłudze DOM oraz zdarzenia

Obok obsługi DOM, znaczna część kodów w JavaScript służy generowaniu zdarzeń i odpowiadaniu na nie. W Dojo Toolkit siłą napędową zdarzeń DOM jest dojo/on – jednolite API obsługi zdarzeń w przystępny sposób.

Najlepiej zobrazuje to prosty przykład.

HTML

<button id="myButton">Kliknij</button>
<div id="myDiv">Najedź kursorem</div>

JavaScript – obsługa

require(["dojo/on", "dojo/dom", "dojo/dom-style", "dojo/mouse", 
        "dojo/domReady!"],
    function(on, dom, domStyle, mouse) {
        var myButton = dom.byId("myButton");
        var myDiv = dom.byId("myDiv");

        // dla przycisku
        on(myButton, "click", function(evt) {
            domStyle.set(myDiv, "backgroundColor", "blue");
        });

        // dla elementu div
        on(myDiv, mouse.enter, function(evt) {
            domStyle.set(myDiv, "backgroundColor", "red");
        });

        on(myDiv, mouse.leave, function(evt) {
            domStyle.set(myDiv, "backgroundColor", "");
        });
});

Jako argumenty podajemy kolejno ID elementu HTML, rodzaj obsługiwanego zdarzenia, oraz funkcję z implementacją akcji, która nastąpi.

Natomiast sposobem na odwołanie (usunięcie) obsługi zdarzenia jest handle.remove.

var handle = on(myButton, "click", function(evt){
    // usuń event handler
    handle.remove();
    
    // ewentualnie wykonaj dodatkowe operacje
    alert("Test");
});

JSON w Dojo Toolkit

Taki framework jak Dojo musi posiadać odpowiedni moduł do pracy z formatem JSON.

Parser oraz serializacja JSON

Moduł dojo/json posiada dwie metody:

– parse() – parsowanie do obiektu JSON

– stringify() – serializacja do formatu JSON

Metoda parse() przyjmuje jako pierwszy argument ciąg JSON do przetworzenia, i opcjonalnie drugi argument (true lub false), określający czy ma zostać użyte tez. bezpieczne parsowanie.

Przykład:

require(["dojo/json"], function(JSON) {
  JSON.parse('{"hello":"world"}', true);
});

Metoda stringify() z Dojo Toolkit przyjmuje takie same argumenty, jak JSON.stringify().

Przykład:

require(["dojo/json"], function(JSON) {
  var jsonString = JSON.stringify({ hello: "world" });
});

Omawiając podstawową obsługę JSON w JavaScript, poruszyliśmy także temat JSONP (JSON with Padding, cross-domain requests). Dokumentacja Dojo Toolkit również zawiera mały artykuł na ten temat.

XML

Był JSON, jest też miejsce na słowo o XML. Dojo Toolkit daje jednolitą obsługę XML: dojox.xml.

Przykład użycia:

dojo.require("dojox.xml.DomParser");

function init() {
   // Parse text and generate an JS DOM
   var xml = "<tnode><node>Some Text</node>";
   xml += "<node>Some Other Text</node></tnode>";

   var jsdom = dojox.xml.DomParser.parse(xml);

   console.debug(jsdom);
}
dojo.ready(init);

XML w dokumentacji Dojo znajdziemy tutaj.

AJAX i Dojo Toolkit

Omawialiśmy już AJAX w „czystym” JavaScript, jak i z użyciem framework’ów – Dojo Toolkit nie pozostaje gorszy.

Żądania – poniżej najprostszy przykład:

require(["dojo/request"], function(request) {
    request("nasz-plik.txt").then(
        function(text) {
            console.log("Zawartość pliku: " + text);
        },
        function(error) {
            console.log("Błąd: " + error);
        }
    );
});

Zawartość pliku zostanie wczytana poprzez XHR (XMLHttpRequest).

Bardziej praktyczny przykład to proste logowanie bazujące na AJAX. Zakładając że mamy formularz (my-form) z odpowiednimi polami (np.: login i hasło), które zostaną przesłane i obsłużone w pliku process.php.

require(["dojo/dom", "dojo/on", "dojo/request", "dojo/dom-form"],
    function(dom, on, request, domForm) {
        var form = dom.byId('my-form');

        // dodaj obsługę zdarzenia onSubmit
        on(form, "submit", function(evt) {

            // zablokuj domyślne zachowanie akcji submit formularza
            evt.stopPropagation();
            evt.preventDefault();

            // wyślij dane do serwera (pliku PHP) metodą POST
            request.post("demo.php", {
                // tutaj zostają wysłane pola (np. login i hasło)
                data: domForm.toObject("my-form"),
                timeout: 2000
 
            }).then(function(response){
                alert(response);
            });
        });
    }
);

W kilkunastu linijkach mamy pobranie i wysłanie danych z pól formularza, obsługę zdarzenia submit, obsługę wywołania zwrotnego (callback).

Moduły AMD / AMD Modules

Na koniec słowo o modułach AMD. Nie chodzi tu w każdym razie o procesor.

Dojo Toolkit obsługuje moduły napisane w formacie Asynchronous Module Definition (AMD). Jest to format dostępny w bibliotece od wersji 1.7. Zawiera wiele ulepszeń względem „zwykłych” / dotychczasowych modułów w Dojo, w tym pełnej asynchroniczności i przenośności pakietów, czy ulepszone zarządzanie zależnościami.

Dokumentacja zawiera podstawowy i zaawansowany tutorial pozwalający dokładniej zgłębić tematykę modułów AMD:

– Introduction to AMD Modules

– Advanced AMD Usage