Začínáme používat Dojo Toolkit

Tento článek je překladem anglického originálu vydaného na portálu Dev.Opera.

Úvod

Dojo Toolkit je kolekcí javascriptových komponent, které mají pomoct webovému vývojáři. Základem je dojo.js, který obsahuje kolekci „nezbytných“ API pro nejčastější použití a nabízí celou knihovnu funkcí. Dojo je zcela zadarmo pod duální licencí AFL a novou BSD licencí.

Dojo si můžete stáhnout nebo můžete pro začátek jednoduše použít značku <script> pro jeho načtení do existující stránky:

<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/dojo/1.2/dojo/dojo.xd.js"></script> 

A je to! Tahle řádka nahraje Dojo Toolkit (v době psaní článku se jedná o verzi 1.2) z Google Ajax API Content Distribution Network, která používá edge-caching k tomu, aby nabídla knihovnu z geograficky nejbližšího zdroje. Celý Dojo Toolkit je dostupný jak na AOL CDN, tak na Ajax API CDN – všechny komponenty, styly i obrázky.

Můžete se podívat na pěkné představení dostupných komponent nebo na kompletní přehled API, abyste získali představu o objemu nabízených funkcí. Dojo QuickStart guide dobře popisuje základní koncepty a DojoCampus je skvělým centrem plným dokumentace, tutoriálů a příkladů. Wiki najdete na docs.dojocampus­.org a brzy se stane hlavním informačním zdrojem o Doju.

Motem Doja od verze 0.9 je: „less Magic“. API je jasné, stručné, konzistentní, obsahuje jmenné prostory a je rozšiřitelné, obsahuje minimum předpokladů (pokud vůbec nějaké) o tom, co vlastně chcete. Každou komponentu můžete používat k obrazu svému. Každá vlastnost je doplňková a volitelná.

Několik faktů:

• Dojo je malá knihovna – 26 KB v komprimované podobě, s možnostmi ořezání až na 6 KB.
• Dojo podporuje všechny selektory CSS3.
• Dojo podporuje všechny běžné prohlížeče: Operu 9+, FF2+, Safari 3+ a IE6+
  • Dijit (knihovna pro tvorbu UI, která je součástí Dojo Toolkitu) aktuálně nemá podporu pro Operu 9, ale přesto funguje. Některé vlastnosti Opery znemožňují, aby Dijit oznámil „oficiální“ podporu, každopádně vývoj je otevřený, a patche pro zlepšení podpory vítáme.
• Dojo má velkou skupinu core vývojářů pracujících z různých koutů světa.
• Dojo je pod dvojí licencí: pod novou BSD licencí nebo pod AFL.
• DojoX nabízí bezpočet pluginů, podobně licencovaných. Kreslení na straně prohlížeče, graphické API, pokročilé IO, řada dojo.data úložišť a další.
• U Dojo nemáte k dispozici pouze podporu komunity (na fóru, #dojo na irc.freenode.net nebo DojoCampus), existuje komerční podpora od SitePen s garancí výsledků. Dojo má dále podporu celé řady společností webového průmyslu.

Co tedy dostanu?

Na straně klienta malý soubor dojo.js obsahující poměrně dost funkcí. Soubor dojo.js je označován jako Base Dojo – s nejstabilnějšími, nejužitečnějšími a nejčastějšími funkcemi pro všechny webové vývojáře. Bez zabíhání do zbytečných detailů (to by bylo na dlouhý článek), si nyní ukážeme přehled nástrojů obsažených v Base Dojo.

dojo.addOnLoad

Zaregistruje funkci, která bude spuštěna, jakmile bude stránka připravena. To zahrnuje i nahrání dalších komponent balíčkovacího systému Doja. dojo.addOnLoad jako argument bere funkci, viz:

dojo.addOnLoad(function() {
  console.log("Připraven!")
}); 

Jedná se o nezbytný krok při práci s DOM. Když používáte Dojo (nebo další toolkity), neměli byste přidávat handlery přímo do onLoad události dokumentu.

dojo.require

Nahraje moduly nebo komponenty ve jmenném prostoru. Pokud chcete například nahrát pluginy pro pokročilé animace, použijete:

dojo.require("dojo.fx");
dojo.require("dojo.fx.easing");
dojo.addOnLoad(function() {
  console.log("Hotovo. Včetně závislostí!")
}); 

Všechny moduly, balíčky nebo pluginy (ať už je nazýváte, jak chcete) budou nahrány včetně svých závislostí. Událost dojo.addOnLoad je vyvolána až po vyřešení všech závislostí.

Alternativními nástroji jsou: dojo.requireIf (podmíněné načtení), dojo.provide (upozornění, že modul je v systému a nemá se znovu nahrávat).

Vzájemnou kombinací dojo.require a dojo.addOnLoad vytvoříme jedinečný způsob pro líné načítání (lazy-load) zdrojů. Můžete zahrnout základní dojo.js do vaší stránky a pak volat dojo.require() z addOnLoad  funkce:

// se samotným dojo.js se prakticky jedná o document.ready:
dojo.addOnLoad(function() {
  // stránka je zobrazena, přidáme náš kód:
  dojo.require("dijit.Dialog");
  dojo.addOnLoad(function() {
    // Dialog a případné další závolosti jsou vyřešeny:
    var thinger = new dijit.Dialog( {
      title:"A Modal Dialog",
      href:"remote.html"
    });
    thinger.startup();
    // zobraz dialog:
    thinger.show();
  });}); 

V tomto příkladu jsme prvně použili jmenný prostor dijit. Dijit je volitelné rozšíření Dojo Core. Příklad výše by potřeboval ještě téma vzhledu, aby vypadal „dobře“, o tom se zmíníme později, ale pokud jste netrpěliví, vyzkoušejte:

<head>
<link rel="stylesheet"  href="http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dijit/themes/tundra/tundra.css" />

<script type="text/javascript" charset="utf-8"
    src="http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dojo/dojo.xd.js">
</script>

</head>
<body class="tundra">
<h2>Hello, Dijit</h2>

</body> 

Přidali jsme jeden stylopis a class="tundra" ke značce body. Tím jsme nastavili téma vzhledu ‚tundra‘ pro celou stránku. Dojo obsahuje i další dvě témata vzhledu soria a nihilo, jedná se o sady stylopisů a obrázků, můžete si proto snadno vytvořit vlastní téma vzhledu.

dojo.byId

Jedná se o alias k document.getElementById, ale funguje i v několika případech, kde by getElementById nešel použít. dojo.byId vrací nativní DOM Node, se kterým můžete dál přímo pracovat. A jeho zápis je kratší.

dojo.addOnLoad(function() {
  dojo.byId("someNode").innerHTML = "Nějaký nový obsah.";
}); 

Všimněte si, že příklady výše jsou obaleny ve volání addOnLoad, čímž zajistíme, že náš kód bude spuštěn, až když bude celý DOM připraven.

dojo.connect – napojování událostí

Nebo také: „one-to-one“ komunikace. Tato funkce dokáže napojit jakoukoliv událost DOM na jakýkoliv element a nabízí tak poměrně silné rozhraní. Události jsou normalizované napříč prohlížeči a v některých případech jsou „syntetizovány“. Můžete tak například spojit handler onclick na jednoduchý element:

dojo.addOnLoad(function() {
  var node = dojo.byId("someNode");
  dojo.connect(node, "onclick", function(event) {
    console.log("uživatel kliknul na someNode: ", event.target);
  });}); 

Ovšem Dojo connect nabízí napojení na jakýkoliv objekt. Můžete kupříkladu zavolat funkci, kdykoli je vyvolána metoda dojo.require() jako v následujícím případě:

var handle = dojo.connect(dojo, "require", function(arg) {
  console.log("Bylo voláno require() s argumenty: ", arg)
  dojo.disconnect(handle);
});
dojo.require("dojo.io.iframe"); 

dojo.connect předává napojené funkci argumenty, jak můžete vidět na příkladu anonymní funkce výše. Zavoláním dojo.disconnect na závěr funkce v dojo.connect zajistíme, že naše funkce bude vyvolána pouze jednou.

dojo.connect dokáže pracovat nejen s událostmi DOM. Jakákoliv metoda nebo funkce může sloužit jako událost

var myObj = {
  foo:"bar",
  baz: function(e) {
    console.log(this.foo);
},
bam: function(e) {
  this.foo = "barbar";
}
};
// zavolej myObj.bam() když se spustí baz()
dojo.connect(myObj, "baz", myObj, "bam");
myObj.baz(); 

Třetí parametr je kontext (scope), ve kterém bude funkce spuštěna. Můžete předat pojmenovanou funkci jako v příkladu výše nebo anonymní funkci:

var myObj = {
  foo:"bar",
  baz: function(e){
  console.log(this.foo);
},
bam: function(e) {
  this.foo = "barbar";
}
};
// zavolej anonymní funkci v kontextu myObj, když je zavolána bam()
dojo.connect(myObj, "bam", myObj, function() {
  // tento kód bude spuště po funkci bam
  this.foo = "otherbar";
  this.baz();
});
myObj.bam(); 

K zajištění přepnutí kontextu se používá dojo.hitch(), jedná se o velmi mocnou a užitečnou vlastnost, jakmile pochopíte, jak funguje. Už vás nebudou trápit události vyvolávané v kontextu window namísto místa, kde byl handler definován.

Pokračování příště.

Tento článek je překladem textu Introducing The Dojo Toolkit a je zde zveřejněn s laskavým svolením Opera Software.