Tento článek je překladem anglického originálu vydaného na portálu Dev.Opera. První a druhou část překladu jsme vydali nedávno.

AJAX: přenos dat

dojo.xhr nabízí jednoduché, ale mocné API k AJAXu. V novějších verzích Dojo Toolkitu najdete jednoduchou metodu dojo.xhr(), která interně volá metody, jež znáte z předchozích verzí: dojo.xhrGet, dojo.xhrPost, dojo.xhrPut a  dojo.xhrDelete.

dojo.xhrGet( {
  url:"/path/to/remote.html",
  load:function(data) {
    dojo.byId("updateArea").innerHTML = data;
  }
}); 

S pomocí těchto volání dokážete řadu věcí, ať již získání obsahu vzdáleného souboru zavoláním GET na server a vložení výsledku do právě zobrazené stránky (viz příklad výše) nebo takové progresivní vylepšení klasického formuláře a odeslání jeho dat pomocí POST na server, jak můžete vidět níže:

<!-- jednoduchý formlář: -->
<form id="sampleForm" action="submit.php" method="POST">
<input type="text" name="username" />

<button type="submit">login</button>

</form>
<script type="text/javascript">
dojo.addOnLoad(function() {
  var form = dojo.byId("sampleForm"); // ulož odkaz na formulář
  dojo.connect(form, "onsubmit", function(e) {
    // napoj se a vyřaď z provozu klasické odeslání formuláře
    e.preventDefault();
    // odešli formulář
    dojo.xhrPost( {
      form: form,
      load: function(data) {
        // nastav obsah prvku formuláře na HTML odpověď serveru
        form.innerHTML = data;
      }
    });
  });
});
</script> 

Jednoduchý PHP skript pro zpracování odeslaných dat a odeslání „nějaké“ odpovědi může vypadat následovně:

<?php

  print "Poslali jste:";
  print_r($_POST);

?> 

Všechny metody dojo.xhr* přijímají jako jediný argument jednoduchý objekt (hash), obsahující potřebnou sadu parametrů. Nemusíte si tak pamatovat pořadí parametrů, stačí znát jejich jména:

• url: Cílová adresa.
• handleAs: Výchozí hodnota je text, ale můžete nastavit, jakým způsobem bude callback data přijímat. Nabízí se možnosti: text, javascript, json nebo  xml
• timeout: Čas (v milisekundách), po který se má na data čekat, před signalizováním chy­by.
• load: Funkce, která se má zavolat po obdržení odpovědi. Funkce obdrží data odpovědi jako svůj první parametr.
• error: Funkce sloužící k obsluze chyb.
• sync: Logická hodnota signalizující, zda tento XMLHttpRequest má být blokující nebo běžet na pozadí. Výchozí hodnotou je false, což značí asynchronní operaci.
• handle: Funkce, která se zavolá jak v případě úspěchu, tak v případě chyby. Obdržený objekt buď obsahuje data nebo je typeof „Error“. Někomu se může hodit.
• form: Formulář v podobě domNode (nebo řetězec s ID formuláře), který se použije jako zdroj dat k odeslání. Jak jste viděli v příkladu výše, parametr url: je získán z action  atributu formuláře. Můžete ale použít alternativní URL, pokud kromě form: zadáte i parametr  url:.
• content: Objekt typu JSON obsahující data k odeslání.

Později si řekneme o „magii“ schované za dojo.hitch a dojo.partial, které nám nabídnou více flexibility nad kontextem (scope), ve kterém proběhnou funkce load:, error: a  handle:.

FX: mocné a flexibilní API pro animace

Základní dojo.js obsahuje jednoduchou metodu fade a vedle ní mocnou metodu animateProperty, která zajistí animování jakékoliv vlastnosti kaskádových stylů.

ČTĚTE K TÉMATU: Vytváříme animace na webu: knihovna od Opery

Všechny animační metody vrací instanci objektu dojo._Animation, který nabízí kontrolu nad vlastním probíháním sekvence. K vytvoření a spuštění animace typu fade (pomalé blednutí a následné kompletní zmizení objektu nebo v opačném případě jeho postupné objevování) docílíte následujícím kódem:

dojo.addOnLoad(function() {
  dojo.fadeOut( {
    node:"someNode", // odkaz na node - id
  }).play();
}); 

Instance dojo._Animation mají metody play(), stop(), status(), gotoPercent() a pause(). S výjimkou dojo.anim používají všechny pro předání parametrů objekt (hash). Ukažme si použití několika obvyklých parametrů:

var anim = dojo.fadeOut( {
  node: "someNode", // node, se kterým pracujeme
  duration: 3000, // čas v ms pro spuštění animace
  easing: function(n) {
    // lineární "easing" funkce, popisuje průběh změny hodnoty
    return n;
  },
  delay: 400, // prodleva v ms mezi zavoláním .play() a spuštěním animace
  rate: 10 // framerate
});
anim.play(); 

Ve volitelné komponentě dojo.fx.easing najdete víc jak 30 „easing“ funkcí. Nezapomeňte zavolat dojo.require(), abyste je mohli použít:

dojo.require("dojo.fx.easing");
dojo.addOnLoad(function() {
  dojo.fadeOut( {
    node:"someNode",
    easing: dojo.fx.easing.bounceOut // "odrážení" od koncového bodu animace
  }).play();
}); 

V jednotlivých fázích animačního cyklu jsou vyvolány také příslušné události. V následujícím příkladu si je ukážeme:

dojo.addOnLoad(function() {
  dojo.fadeOut( {
    node:"someNode",
    beforeBeing: function() {
      console.log("animace začne, jakmile doběhne kód této události");
    },
    onBegin: function() {
      console.log("animace právě začala");
    },
    onEnd: function() {
      console.log("animace proběhla");
    },
    onPlay: function() {
      console.log("animace začala zavoláním play()");
    },
    onStop: function() {
      console.log("animace byla ukončena");
    }
    onAnimate: function(val) {
      // volá se v každém kroku animace
    console.log("aktuální hodnota: ", val);
    }
  })
}); 

Nejčastěji používaná událost je onEnd. Předpokládejme, že chcete nechat nějaký obsah postupně zmizet (fade), nahradit pomocí AJAXu a pak jej opět postupně zobrazit:

var n = dojo.byId("someNode");
dojo.fadeOut( {
  node: n,
  onEnd: function() {
    dojo.xhrGet( {
      url: "newContent.html",
      load: function(data) {
        n.innerHTML = data;
        dojo.fadeIn({ node: n }).play();
      }
    })
  }
}).play(); 

Parametr node: může být buď odkaz na prvek DOM, nebo řetězec, který předáváte metodě dojo.byId. V tomto příkladu jsme si uložíli odkaz na prvek DOM do proměnné „n“ a využili jej následně v naší callback funkci.

Pro pokročilé animace můžete použít i dojo.connect (byl představen v první části):

// vytvoření jednoduché smyčky
var fadein = dojo.fadeIn({ node: "someNode" });
var fadeOut = dojo.fadeOut({ node: "someNode" });
// zavolej fadeout.play(), kdykoliv je vyvolána událost onEnd u fadein:
// a spusť znovu fadein, kdykoliv je vyvolána událost onEnd u fadeout:
dojo.connect(fadein, "onEnd", fadeout, "play");
dojo.connect(fadeout, "onEnd", fadein, "play");
// spustí smyčku
fadeout.play(); 

Fade je užitečný, ve skutečnosti se jedná o jednoduchý wrapper okolo dojo.animateProperty. Při mizení animuje vlastnost opacity:

// simuluj fadeIn
dojo.animateProperty( {
  node:"someNode",
  properties: {
    opacity: 1
  }
}).play();
// totéž jako:
// dojo.fadeIn({ node: "someNode" }).play(); 

Ovšem animateProperty je mnohem mocnější a flexibilnější. Můžete s ní animovat neomezený počet vlastností na jednom DOM prvku:

dojo.animateProperty( {
  node:"someNode",
  properties: {
    // předpokládá se, že jste předali koncovou hodnotu:
    opacity:0,
    // nastavení počáteční a koncové hodnoty:
    marginLeft: {
      start:5, end:250
    }
    // začátek se dopočítá, používá se jednotka "em"
    padding: {
      end:5, unit:"em"
    }
  }
}).play(); 

I zde můžete použít stejné události a parametry z dojo._Animation. Hash properties může obsahovat několik formátů. Pokud předáte hodnoty start: i end:, proběhne animace mezi nimi. Pokud předáte pouze end:, bude start: hodnota dopočítána na základě aktuální hodnoty vlastnosti DOM prvku. Pokud předáte jen jednu celočíselnou hodnotu, bude použita jako koncová hodnota. Pokud nepředáte parametr unit:, použijí se „px“; tento parametr používejte opatrně, protože některé prohlížeče nepřevádí „em“ a „pt“ na pixely příliš dobře nebo dokonce vůbec.

Všimněte si marginLeft v předchozím příkladu. V kaskádových stylech byste použili margin-left:, ovšem pomlčku nelze v JavaScriptu používat, proto se využívá „velbloudího“ zápisu.

Nejspíš jste si všimli, že syntaxe animateProperty je poněkud rozsáhlá, i toho, že ve většině příkladů na vráceném _Animation hned voláme .play(). Existuje stručnější zápis, který používá podobné konvence (tedy kromě používání hashe jako ostatní animační funkce):

dojo.anim("someNode", {
  opacity:0,
  marginLeft: { start:5, end:250 },
  padding: 50
}); 

Tento příklad provede totéž, co poněkud delší příklad výše. Jedná se o pohodlné volání, ale u dojo.anim  přijdete o flexibilitu, záleží na požadí parametrů a animace je okamžitě automaticky spuštěna. Ale to je jen malý škrábanec na povrchu animačního API Dojo Toolkitu.

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.