Dnes se tak trochu podíváme na možnost spolupráce Macromedia Flash 5 a XML. Nejde o to, že bych chtěl popisovat jazyk XML jako takový (na Interval.cz existuje rubrika přímo věnovaná XML), ale spíše se pokusím vysvětlit úplné základy možnosti spolupráce Flashe a XML datového dokumentu. Půjde o poměrně složitý příklad, který je určen spíše zkušenějším programátorům ve Flashi.
Konečný výsledek dnešního příkladu není nijak úchvatný, ale pokud dobře porozumíte práci s XML dokumenty můžete sami vytvářet věci nevídané. Náš příklad slouží pouze k demonstraci základních možností.
Jazyk XML umožňuje popisovat data pomocí specifického formátu tagů. Na rozdíl od HTML, který slouží k formátování textů a tabulek, si XML data neformátuje, ale pouze popisuje a definuje. Na malém příkladu si ukážeme, jak taková data vložená do XML tagu vypadají:
<?xml version="1.0" ?>
<osoba>
<jmeno>Jan</jmeno>
<prijmeni>Hus</prijmeni>
</osoba> |
|
Toto velmi jednoduchý příklad syntaxe vkládání dat do tagů. Všiměte si, že data nejsou formátována do tabulek, ale jsou pouze uvozena pomocí tagů, které je definují. XML dokument se dá rozdělit na množství tzv. "parent nodes" ("node" – lze přeložit jako "uzel"), které mohou být sami o sobě pokládány za samostatný XML dokument. Každý "parent node" obsahuje 0 nebo více tzv. "child nodes". Tyto "dětičky" se mohou dále větvit. Jednotlivým "nodes" můžete také přiřadit parametr (v následujícím příkladě je to "ID". Parametry se nám mohou hodit pro další práci s dokumentem). Jak to vypadá v praxi demonstruje tento příklad:
<?xml version="1.0"?>
<rodina>
<synove ID="1" >
<syn_a>Pepa</syn_a>
<syn_b>Honza</syn_b>
</synove>
<dcery ID="2" >
<dcera_a>Katka</dcera_a>
<dcera_b>Zuzka</dcera_b>
</dcery>
</rodina> |
|
To by stačilo na úvod do XML. A nyní se podíváme na to, jak propojit Flash 5 a XML. Obecně se dá říci, že Flash 5 je pro spolupráci s XML velmi dobře připraven a nabízí vývojářum netušené možnosti. A nyní jak na to.
Předpokládejme, že již máte vytvořený tento XML dokument (můžete si také vytvořit vlastní podle návodu uvedeného výše). Dokument pojmenujeme "a.xml ".
<?xml version="1.0" encoding="windows-1250" ?>
<osoba> <jmeno>Jan</jmeno>
<prijmeni>Hus</prijmeni>
<titul>Mistr</titul>
</osoba> |
|
Všimete si jednoduché struktury dokumentu, záměrně jsem ji zvolil kvůli snadnějšímu porozumění hledání tagů. Naším úkolem bude ze struktury dokumentu vyhledat hodnoty, které popisují jméno člověka, v našem případě je to "Mistr Jan Hus". Abychom mohli tyto hodnoty zobrazit ve Flashi, vytvoříme si dynamické textové pole, ve kterém výsledek hledání zobrazíme (zvolíme jeho parametry: HTML,Border/BG a pojmenujeme ho "vysledek". ) Nyní do prvního framu v timeline vložíme tento actionscript (jeho popis bude následovat):
objekt = new XML();
// definujeme si objekt, ze kterého načteme data
objekt.onLoad = nacteni;
// urcuje, co se stane, kdyz je dokument načten – spustí se funkce "nacteni"
objekt.load("a.xml");
// vlastní načtení dokumentu z určitého místa
vysledek = "nacitaji se data";
// obsah textove pole před načtením obsahu XML
function nacteni () {
// vlastni funkce "nacteni"
osoba = new XML();
// pomocny XML objekt, který slouží ke snadnější orientaci v dokumentu
cast_jmena = new Array();
// definujeme si pomocné pole, ktere obsahuje vsechny tagy pod "osobou"
osoba = objekt.firstChild.nextSibling;
// vyhledá tag "osoba" a přiřadí ho objektu XML Osoba
cast_jmena = osoba.childNodes;
// no nebo prijmeni
for (i=0; i<cast_jmena.length; i++) {
// prohledává tagy pod "osobou" az do konce
if (cast_jmena[i].nodeName == "jmeno") {
// hledame nazev tagu "jmeno"
jmeno = cast_jmena[i].firstChild.nodeValue;
// hodnotu tagu ulozime do pomocne promenne
}
if (cast_jmena[i].nodeName == "prijmeni") {
// hledame nazev tagu "prijmeni"
prijmeni = cast_jmena[i].firstChild.nodeValue;
// hodnotu tagu uložíme do pomocné proměnné
}
if (cast_jmena[i].nodeName.toLowerCase() == "titul") {
// hledame nazev tagu "titul"
titul = cast_jmena[i].firstChild.nodeValue;
// hodnotu tagu uložíme do pomocné promenné
}
}
vysledek = "";
// smažeme obsah textového pole
vysledek += titul+" "+jmeno+" "+prijmeni;
// výsledek hledání, vypíšeme do textového pole
} |
|
V této podobě není script příliš přehledný, proto doporučuji kvůli snadnější orientaci, zkopírovat ho do Flashe, který script vhodně zformátuje. A nyní se pokusím vysvětlit jednotlivé části scriptu (většina kroků je popsána přímo v komentáři):
Vytvoříme objekt XML, ze kterého načteme ze souboru vstupní data.
Definujeme, co se stane po načtení dokumentu do paměti (onLoad). My jsme určili, že se spustí funkce "nacteni", kterou ve scriptu budeme později programovat.
Načteme datový soubor do paměti. V závorce je definována cesta k souboru. Dokument XML, který načítáme, nemusí mít příponu *.xml. Může to být jakýkoliv serverový aktivní skript, jehož výstupní hodnoty jsou formátovány podle XML (nodes, child nodes atd).
| vysledek = "nacitaji se data"; |
|
Než se načte obsah dokumentu do paměti, v textovém poli bude zobrazen nějaký text, např. "nacitaji se data" nebo něco podobného. To se hodí hlavně u větších datových dokumentů, v našem příkladě tento text ani neuvidíte.
Začátek naší funkce, která se jmenuje "nacteni".
Vytvoříme nový objekt XML, který nám pomůže se v původním XML dokumentu snadněji orientovat. Hlavní dokument tak vlastně rozdělujeme na menší XML "poddokumenty".
| cast_jmena = new Array(); |
|
Definujeme si pomocné pole, do kterého později uložíme názvy všech tagů, které nalezneme pod naším hlavním tagem "osoba".
| osoba = objekt.firstChild.nextSibling; |
|
I když je náš datový XML dokument velmi jednoduchý, přesto se vyplatí si ho pro přehlednost rozdělit na dvě části. Jedna část (firstChild) je definující XML dokumet ("<?xml version="1.0" encoding="windows-1250" ?>") a druhá (nextSibling) je uvozena naším hlavním tagem "osoba". Proto vytváříme pro snadnější orientaci nový XML objekt pojmenovaný prozaicky "osoba". ;)
| cast_jmena = osoba.childNodes; |
|
Do našeho pomocného pole "cast_jmena" si uložíme názvy všech tagů, které se nacházejí pod tagem "osoba". Toto pole nám bude později sloužit k vyhledávání konkrétních hodnot názvů tagů. V našem případě jsou to tyto tagy:
- <jmeno></jmeno>
- <prijmeni></prijmeni>
- <titul></titul>
| for (i=0; i<cast_jmena.length; i++) { |
|
Začátek vyhledávacího cyklu, který bude běžet do té doby, dokud nenarazí na konec pole "cast_jmena". (V podstatě prohledává všechny tagy pod našímm hlavním tagem "osoba".) Cyklus FOR se ve Flashi definuje jako v C++, tzn. počítadlo se definuje(i=0) a zároveň i inkrementuje (i++) v samotném těle cyklu.
| if (cast_jmena[i].nodeName == "jmeno") { |
|
Na jedné podmínce si vysvětlíme, co vlastně hledáme:
- cast_jmena[i] … prvek našeho pole, které obsahuje názvy tagů
- .nodeName … hodnota názvu (nodeName) výše zmíněneného tagu
A pokud se tag jmenuje např. "jmeno", máme, co jsme hledali:
| jmeno = cast_jmena[i].firstChild.nodeValue; |
|
Nyní do pomocné proměnné uložíme hodnotu, která je uvozena nalezeným tagem. Pro názornost: jméno (nodeName) nalezeného tagu je "<jmeno>" a hodnota (nodeValue) tagu je "Jan", takže do proměnné "jmeno" přiřadíme "Jan". Další dvě podmínky jsou obdobné.
Smažeme obsah textového pole, a tak ho připravíme pro zobrazení nalezených hodnost:
| vysledek += titul+" "+jmeno+" "+prijmeni; |
|
Vypíšeme nalezené hodnoty v libovolném pořadí do textového pole, pro přehlednost je oddělíme mezerami. Hotovo.
Doufám, že jste pochopili, jak rámcově postupovat při spolupráci Flashe s XML dokumenty. Vše se točí okolo definice tagů a jejich struktury v XML. Je mi jasné, že dnešní příklad byl poněkud složitější, snad ale některým "flasherům" pomůže začít efektivně s XML pracovat. A jako vždy si celý příklad můžete stáhnout zde.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
