Co je Dojo?

Transkript

Co je Dojo?

DOJO
Taras Perevorskyy, Tereza Cihelková, 22. 05. 2008
V této práci se pokusíme čtenáře seznámit s populárním javascriptovým toolkitem –
Dojo.
Začneme zařazením Doja do webového projektu, jednoduchým příkladem použití Doja,
pak se podíváme na možnosti tohoto nástroje při vytváření animací. Dále si také
ukážeme, jak implementovat technologii Ajax a na závěr se zmíníme o systému widget.
Co je Dojo?
Dojo je javascriptový toolkit určený k usnadnění tvorby webových aplikací. Nabízí
nástroje pro manipulaci s DOM, animaci, AJAX a internacionalizaci webových projektů.
Dojo Core, který obsahuje nejzákladnější funkcionalitu, se sestává z jediného souboru o
velikosti cca 26KB. Dojo je open source a na výběr máte z licencí AFL nebo BSD.
Pokud by člověk nebyl spokojen s nabídkou Dojo Core, lze pomocí package systému
(příkaz dojo.require()) naimportovat další nástroje z modulů, které je možné stáhnout z
webu Doja.
Užitečnou částí Dojo Toolkitu je Dijit – systém na vývoj znovu použitelných komponentů,
nebo widget. Systém nabízí již hotové komponenty připravené k použití ve webových
aplikacích a solidní API na vývoj vlastních widget nebo pro modifikaci již existujících.
Jak na to?
Pro začátek připravíme html soubor skeleton.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dojo Toolkit Test Page</title>

<script type="text/javascript" src="js/dojotoolkit/dojo/dojo.js"
djConfig="parseOnLoad:true, isDebug:true"></script>
<script type="text/javascript">
/* our JavaScript will go here */
</script>
<style type="text/css">
/* our CSS can go here */
</style>
</head>
<body>
<h1 id="testHeading">Dojo Skeleton Page</h1>
<div id="contentNode">
<p>Some Content To Replace</p>
</div>
</body>
</html>
Tato stránka v HTML/4.01 Strict není validní, jelikož element <script> má navíc atribut
djConfig.
Červeně vyznačená část přidává Dojo k našemu projektu. Nastavení parseOnLoad na
true zapne parsování widget v kódu při načítání stránky. isDebug zapíná a vypíná
zobrazování chybových hlášek - ty můžeme sledovat v prohlížeči například pomocí
programu firebug.
Pokud nám jde o validní kód, tak s trochu vetší snahou ho lze dosáhnout výměnou
červeně vyznačené časti za:
var djConfig = {
isDebug:true,
parseOnLoad:true
};
</script>
<script type="text/javascript" src="js/dojotoolkit/dojo/dojo.js"></script>
Oba postupy mají stejný efekt. Ten první se zdá být přirozenější ale za cenu validnosti
html.
Co dál?
Začněme třeba manipulací s DOM.
K tomu je určená funkce dojo.query()
dojo.require("dojo.NodeList-fx");
dojo.addOnLoad(function(){
// our dom is ready, get the node:
dojo.query("#heading")
.addClass("testClass") // adds class="testClass"
.fadeOut({ delay:500 }).play(); // and fade it out after 500 ms
});
CSS kód
.testClass {
color:#ffffee;
}
Tento kód vyhledá v dokumentu element s id=“heading“ přidá mu třídu testClass a po
500ms ho nechá zmizet s fade-out efektem.
dojo.query vrací instanci dojo.NodeList – jakýsi super-array DOMových uzlů. K zadání
dotazů lze použít většinu CSS3 selectorů. Vlastnosti se píšou camelCase. Tj. místo
border-color napíšeme borderColor. Můžeme si to vyzkoušet třeba na následujícím html
kódu.
<h1 id="testHeading">Dojo Skeleton Page</h1>
<a class="link" href="#">First link</a>
<a class="link" href="#">Second Link</a>
<p class="para">First paragraph</p>
<p class="para">Second paragraph</p>
<p class="para">Third paragraph</p>
A použijeme takovýto JavaScript:
dojo.require("dojo.NodeList-fx");
// get each element with class="para"
dojo.query(".para")
.addClass("testClass")
.fadeOut({ delay: 1000 }).play();
});
Ten najde všechny 3 paragrafy, přiradí jim třídu testClass a provede s nimi animaci se
zpožděním 1000ms.
U většiny dojo.query řetězců si můžeme ušetřit práci psaním aliasů. Jako třeba místo:
dojo.query("#testHeading").addClass("testClass");
použijeme hned
dojo.addClass("testHeading","testClass");
Dojo také umí pracovat s různými událostmi, které během interakcí se stránkou
nastávají. Následující kód provede změnu textu záhlaví poté, co je na něj kliknuto.
var node = dojo.byId("testHeading");
dojo.connect(node,"onclick",function(){
node.innerHTML = "I've been clicked";
});
});
Stejného efektu dosáhneme i jiným, příjemnějším způsobem. Také nastavíme změnu
kursoru, aby uživatel tušil, že na tento element je možné kliknout:
dojo.query("#testHeading")
.style("cursor","pointer")
.connect("onclick",function(){
this.innerHTML = "I've been clicked";
});
});
Změnu kursoru jsme mohli samozřejmě provést pomocí CSS a bylo by to asi i lepší
řešení. Nicméně toto berme jako ukázku změny nebo přidání CSS atributu dynamicky v
runtime.
Stejný postup můžeme také aplikovat i na velkou skupinu elementů. Třeba můžeme
stornovat všechna kliknutí na odkazy:
var disableLinks = function(){
dojo.query("a").connect("onclick",function(e){
e.preventDefault(); // stop the event
console.log('clicked: ',e.target); // the node we clicked on
});
};
dojo.addOnLoad(disableLinks);
e.preventDefault() zastaví další průběh události, která ho vyvolala. Tudíž v našem
případě zabrání přesměrování na odkaz, na nějž bylo kliknuto.
Příkaz console.xxx(), kde xxx může byt log, debug, info, warn nebo error je výborným a
asi jediným debaggovacím nástrojem doja. Má širší možnosti použití než například
funkce alert(). Podrobně o možnostech console si můžete přečíst v manuálu.
Animace s Dojo
Soubor dojo.js nabízí 3 základní typy animace: fadeIn, fadeOut a animateProperty. Co
dělají první dvě asi bude každému jasné. Třetí umožňuje tvorbu vlastních komplexních
efektů. Uvedeme příklad použití animateProperty:
dojo.style("testHeading","opacity","0"); // hide it
var anim1 = dojo.fadeOut({ node: "testHeading", duration:700 });
var anim2 =
dojo.animateProperty({ node:
"testHeading", delay: 1000,
properties:{
// fade back in and make text bigger
opacity: { end: 1 }, fontSize: { end:19, unit:"pt"}
}
});
anim1.play();
anim2.play();
});
Uzel testHeading nejprve schováme standardním fadeOut, pak zadáme parametry
druhé animace a spustíme postupně obě příkazem play. Pokud by někomu nabídka
animací nepřipadala příliš široká, tak si může vybrat ještě z dalších, které jsou umístěné v
souboru dojo.fx. Přidat soubor lze jednoduše příkazem dojo.require() a hned budeme
mít k dispozici dalších 5 nástrojů pro animaci: dojo.fx.combine, dojo.fx.chain,
dojo.fx.wipeIn, dojo.fx.wipeOut a dojo.fx.slideTo. První dva slouží k řízení
komplexních animaci, respektive ke kombinování různých efektu. Třeba tento kód:
dojo.require("dojo.fx");
var anim = dojo.fadeOut({ node: "testHeading" });
var anim2 = dojo.fx.slideTo({ node: "testHeading", top:75,
left:75 });
var result = dojo.fx.combine([anim,anim2]);
result.play();
});
Nám přehraje animaci složenou ze dvou efektů (tzn. obě animace probíhají zároveň).
Každá animace je objektem dojo._Animation. Také dojo.fx.chain, a dojo.fx.combine
vrací objekt dojo._Animation. Tento objekt má také několik zajímavých událostí.
Nejčastěji se použijí onEnd a beforeBegin.
dojo.connect(anim,"onEnd",function(){
console.log(" the animation is done ");
});
dojo.connect(anim,"beforeBegin",function(){
console.log(" the animation is about to start ");
});
anim.play();
});
Tyto události se dobře hodí třeba v případě, že chceme zajímavě animovat obsah
nějakého elementu.
dojo.connect(anim,"onEnd",function()
{ dojo.byId("testHeading").innerHTML = "replaced after
fade!"; dojo.fadeIn({ node:"testHeading" }).play();
});
anim.play();
});
Podpora Ajaxu
Ajax (Asynchronous JavaScript and XML) – je technologie, pomocí které můžeme
komunikovat se serverem a měnit části stránky aniž bychom ji museli celou obnovovat.
Ukážeme si jednoduchý příklad použití dojo pro realizaci ajaxu. Vyhotovíme textový
soubor sample.txt s následujícím obsahem:
I am a <em>remote</em> file.
We used Ajax to put this text
in our page.
A do našeho původního skeleton.html přidáme kontejner content, do kterého pak
nahrajeme data přes ajax.
<style type="text/css">
#container {
border:1px dotted #b7b7b7;
background:#ededed;
width:75px;
height:55px;
}
</style>
<div id="container" class="box">
<div id="content">
I am some Inner Content.
I am going to be replaced
</div>
</div>
A necháme dojo pracovat:
var init = function(){
var contentNode = dojo.byId("content");
dojo.xhrGet({
url: "js/sample.txt",
handleAs: "text",
load: function(data,args){
// fade out the node we're modifying
dojo.fadeOut({
node: contentNode,
onEnd: function(){
// set the data, fade it back in
contentNode.innerHTML = data;
dojo.fadeIn({ node: contentNode }).play();
}
}).play();
},
// if any error occurs, it goes here:
error: function(error,args){
console.warn("error!",error);
}
});
};
dojo.addOnLoad(init);
Výše uvedený kód nám zařídí import dat přes ajax. Pomocí příkazu dojo.xhrGet()
dostaneme data ze souboru sample.txt a vyměníme za ně vnitřek elementu s id content.
Vlastnost handleAs může nabývat následujících hodnot: text (default), json, jsoncomment-optional, json-comment-filtered, javascript, xml, a umožňuje nám
specifikovat způsob, jakým chceme, aby byla vrácená data parsována.
Pokud by během zpracování dotazu vznikla výjimka předáme ji funkci error, spolu
s parametrem args, který obsahuje všechny parametry našeho dotazu. Podrobnější
specifikaci naleznete na http://api.dojotoolkit.org/jsdoc/dojo.xhrGet.
Aby vše vypadalo hezky, pomocí animací skryjeme element, vyměníme jeho obsah za
získaná data a pak element znovu zviditelníme. Pokud během operací vznikne chyba,
uvědomíme o tom uživatele. Připravenou funkci spustíme pomocí příkazu
dojo.addOnLoad(init);
XHR metody však mají jedno nepříjemné omezení: Nelze zasílat dotazy na jiné servery,
než na ten, kde se nachází daný html soubor. V případě potřeby se podívejte na
dojo.io.frame a dojo.io.script, které by si s tímto omezením měly poradit.
Uvedeme také příklad posílaní dat na server pomocí dojo.xhrPost Nechť máme v
našem skeleton.html následující formulář:
<form id="mainForm" action="ajax-submit.php" method="post">
<label for="firstName">Name: </label>
<input type="text" id="firstName" value="Enter Name" />
</form>
Přidáme trochu JavaScriptu a příkazem dojo.connect zařídíme, aby dojo sledovalo
událost onSubmit:
// sumbit the form
var formSubmit = function(e){
// prevent the form from actually submitting
e.preventDefault();
// submit the form in the background
dojo.xhrPost({
url: "alternate-submit.php",
form: "mainForm",
handleAs: "text",
handle: function(data,args){
if(typeof data == "error"){
console.warn("error!",args);
}else{
// show our response
console.log(data);
}
}
});
};
var theForm = dojo.byId("mainForm");
dojo.connect(theForm,"onsubmit","formSubmit");
});
Vidíme, že technologie posílaní se málo čím liší od technologie přijetí dat ze serveru.
Funkce handle() se zavolá jak v případě úspěchu, tak v případě chyby. Obdržený objekt
buď obsahuje data nebo je typeof „Error“. Detaily si zájemce může dohledat v článku
http://zdrojak.root.cz/clanky/dojo-toolkit-ajax-a-animace/.
Příkaz dojo.connect(obj, strEvent, strMethod) přiřadí metodu strMethod události
strEvent. Více informací v manuálu: http://api.dojotoolkit.org/jsdoc/1.2/dojo.connect
Skript alternate-submit.php by mohl být například takovýto:
<?php
print "DATA RECEIVED:";
print "<ul>";
foreach($_REQUEST as $key => $var){
print "<li>".$key." = ".$var."</li>";
}
print "</ul>";
?>
Na závěr se ještě zmíníme o widget
Do Dojo Toolkitu je integrovaný systém widget, který se nazývá Dijit. Níže následuje
příklad syntaxe:
dijit.byId("firstWidget"); // is a reference to the actual widget.
dijit.byId("firstWidget").domNode; // is the domNode the widget uses
// as opposed to:
dojo.byId("testHeading"); // is a domNode in our page
Widgety můžeme používat buď v atributech html elementu, nebo programově. První
způsob je komfortnější, ale stránka přestává byt validní, jelikož využíváme
nestandardních atributů.
Začneme zase s html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dijit Test Page</title>
<link rel="stylesheet"
href="js/dojotoolkit/dijit/themes/tundra/tundra.css" />

<script type="text/javascript" src="js/dojotoolkit/dojo/dojo.js"
djConfig="parseOnLoad:true, isDebug:true"></script>
// our code, and dojo.requires()
</script>
-->
</head>
<body class="tundra"><!-- this is a Typical WebPage starting point ...
<h1 id="testHeading">Dijit Skeleton Page</h1>
<div id="sampleNode"></div>
<div id="anotherNode"></div>
</body>
</html>
Již známým nevalidním způsobem spustíme dojo s atributem
djConfig="parseOnLoad:true, isDebug:true". Přidáme potřebné moduly:
dojo.require("dijit.Dialog");
dojo.require("dijit.form.Button");
</script>
A ještě doplníme obsah dialogu, který bude zobrazen pomocí dijit.Dialog.
<div dojoType="dijit.Dialog" id="sampleNode" title="The First Widget">
<p>I am the Content inside the dialog.</p>
</div>
<button dojoType="dijit.form.Button" id="myButton"
onClick="console.log('clicked')">
And Button
</button>
Podobného výsledku bychom dosáhli s použitím JavaScriptu
dojo.require("dijit.Dialog");
dojo.require("dijit.form.Button");
// make the button
var theButton = new dijit.form.Button({
onClick:function(){
console.log("clicked");
}
},"myButton");
});
// make our Dialog
var theDijit = new dijit.Dialog({
title:"The First Widget"
},"sampleNode");
// make sure its started. parser does this if using markup
theDijit.startup();
a validního html
<div id="sampleNode">
<p>I am the Content inside the dialog.</p>
</div>
<button id="myButton">
Show Button
</button>
Ted ještě musíme doprogramovat obsluhu dialogu. Pomoci dojo nařídíme vytvořenému
tlačítku ukázat výše zmíněný div#sampleNode po kliknutí na toto tlačítko.
// make the button
var theButton = new dijit.form.Button({
onClick:function(){
dijit.byId("sampleNode").show();
}
},"myButton");
Zbývá už jen vše zobrazit:
// show the dialog onLoad, without knowing it's id
// add <p id="myPara"> to the dialog content
var p = dojo.byId("myPara");
var theDijit = dijit.getEnclosingWidget(p);
theDijit.show();
});
Widgety jsou jedním z nejsilnějších nástrojů tohoto Frameworku. Mnoho informací o
nich najdeme na dijit.Dialog API Page’s .
Závěr
Dojo umí mnoho věcí, ale nemyslíme si, že je tou nejvhodnější volbou pro menší webové
projekty, vyžadující hlavně základní manipulaci s DOM či animace. Je to komplikovanější
framework, vhodný na použití u rozsáhlejších projektů, kde se ukáže jeho síla. Největším
plusem Dojo jsou zřejmě jeho widgety, ze kterých si každý vybere. Více o Dojo se
dozvíte na stránkách http://dojotoolkit.org
Informace využité v této prezentaci jsou povětšinou vzaty ze stránek www.sitepen.com hlavního vývojářského týmu Doja a také z oficiálního webu Dojo toolkitu:
http://dojotoolkit.org

Co je Dojo?

Transkript

Podobné dokumenty

Slidy k 4. přednášce

Návod k použití bezdrátového glukometru myglucohealth

Vyuºití JavaScriptových knihoven - ExtBrain

Active Server Pages

zde

Jak na Google Tag Manager