
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:
Podsumowanie
To wszystko w 2. części podstawowego kursu Dojo Toolkit. W podsumowującej części 3. zajmiemy się efektami i animacjami.