Dušan Ječmenica Flash i XML

U prošlom broju mogli ste pročitati kako Flash može predstavljati zamku koja vas vodi ka neupotrebljivosti, pa ako se prepustite njegovim čarima zaboravivši da ste web dizajner, postajete digitalni umetnik. Estetska vrednost umetničkih dela je nesporna, ali upotrebljivost im nije jača strana. Ako ste se u prošlom broju prepoznali kao umetnik a ne kao web dizajner, evo vam prilike da se popravite - i to kroz primenu Flash-a u predstavljanju i formatiranju podataka koji su definisani XML-om.

XML (Extensible Markup Language) predstavlja skup pravila kojima se informacije organizuju, ali ne i predstavljaju. On je izveden iz SGML-a (Standard Generalized Markup Language). Kroz standardnu HTML obradu možete koristiti ili kaskadne stilove(CSS) ili XSLT za predstavljanje podataka, ali ono što Flash stvarno dokazuje kao moćan i dobro projektovan alat jeste potpuna interna podrška za XML.

Kako XML funkcioniše?

Za rad sa XML-om potrebno je nešto malo iskustva u HTML-u.
XML je takođe sačinjen od tagova koji se u njegovom slučaju nazivaju nodovi. Pogledajmo najpre jedan deo HTML koda:

<p>Omega magazin</p>

Ovde se text" omega magazin" nalazi između tagova "p" - znači kao jedan paragraf.

<p align="left" class="crveno">Omega magazin</p>

Ovde je slična situacija ali će text biti poravnjan uz levu ivicu i na njega će biti primenjen kaskadni stil crveno koji smo prethodno definisali. "Align" i "class" su atributi koji imaju svoje vrednosti "left" i "crveno", respektivno. Ovde vam nije rečeno ništa što već ne znate, ali pogledajte sada sledeći kod:

<casopis> omegamagazin </casopis>

Ovo vam sigurno ne bi prošlo u HTML-u, jer tamo ne postoji tag "casopis". Ali upravo ovako može da izgleda XML dokument. Tu su tagovi proizvoljni i služe da organizuju podatke, a ne da ih formatiraju i prikažu - kao što je to kod HTML-a slučaj. Idemo na malo viši nivo:

<casopis>
<stampani> PCworld</stampani>
<online> Omegamagazin </online>
</casopis>

Ovo je tipičan način pisanja koda u XML-u. Kao što vidimo, podaci su vrlo intuitivno organizovani i čine malu bazu podataka. Znači bez SQL-a, velikih baza, konekcija, ODBC drajvera - dobijamo prenosivost i kompatibilnost, naravno samo ako naša "baza" nema pretenzije da postane velika i ozbiljna - u tom slučaju SQL je nezaobilazan.

Još malo komplikovanije:

<casopis>
<stampani naziv="PCworld" izdavac="Ziff/Davis">
izlazi jednom mesečno, dobija se besplatan CD
</stampani>
<online naziv=" Omegamagazin" izdavac="Omega">
izlazi jednom mesečno, potpuno je besplatan
</online>
</casopis>

Sve što vam treba da ovaj članak razumete do kraja glasi: "Casopis", "stampani" i "on line" su NODOVI. "Stampani" i "online" su nodovi naslednici ili deca nodovi (child nodes) u odnosu na nod "casopis". U okviru nodova mogu se naći atributi koji malo detaljnije opisuju tekući nod, u ovom slučaju to su "naziv" i "izdavač". Telo samog teksta između nodova se nazivaju tekst nodovi. Deluje malo zbunjujuće ali evo paralele: ono što mi u HTML-u zovemo "sadržaj taga", u XML-u je to tekst nod. U ovom konkretnom primeru, to su rečenice: "izlazi jednom mesečno, dobija se besplatan CD" i "izlazi jednom mesečno, potpuno je besplatan". Ovi tekst nodovi su naslednici nodova"stampani" i "online", respektivno. Ovo poslednje je vrlo bitno, pa stoga obratite pažnju.

Primena

Sad je vreme da vidimo gde ovaj princip organizacije podataka ima primenu? Pretpostavimo da imate video klub (ili primerenije za naše uslove - snimate DivX-ove) i želite da katalog publikujete na web. To i nije neka problematika ako koristite Dreamweaver, ali šta ako hoćete da vam sajt bude odrađen uz pomoć Flasha? Vrlo je teško unositi svakodnevene izmene u flash fajlove, tim pre, ako je flash film veličine od npr. 300Kb - moraćete stalno da uploadujete kompletan film prilikom i najmanje promene sadržaja. Rešenje leži u tome da vaš katalog izdvojite iz swf fajla, i da samo na njemu vršite promene. Znači, podaci će se učitavati iz spoljneg XML fajla.

Otvorite Notepad i unesite sledeći kod (u duhu XML-a je obavezno definisanje zaglavlja XML dokumenta, ali je ono ovde izbegnuto radi jednostavnosti, mada će Flash i takav fajl da prihvati i da radi sa njim):

<Katalog>
<Film Original="Cats&Dogs" Prevod="Macke i psi" Vrsta="Komedija" Godina="2001" Trajanje="82">Jeff Goldblum, Elizabeth Perkins</Film>
<Film Original="Swordfish" Prevod="Sifra sabljarka" Vrsta="Akcija" Godina="2001" Trajanje="99">John Travolta, Hugh Jackman, Halle Berry</Film>
<Film Original="Top Gun" Prevod="Top Gun" Vrsta="Akcija / drama" Godina="1986" Trajanje="105">Tom Cruise, Val Kilmer, Kelly McGillis</Film>
<Film Original="The Usual Suspects" Prevod="Dezurni krivci" Vrsta="Krimi / triler" Godina="1995" Trajanje="106">Stephen Baldwin, Gabriel Byrne, Kevin Spacey</Film>
</Katalog>

Sačuvajte ovaj fajl pod imenom katalog.xml. Koncepcija našeg kataloga je takva da je naslednik noda "katalog" nod "film" (sa svojim atributima i svojim text nodom). Primećujete da se u text nod obično stavlja neki duži tekst tj. sadržaj, a u atributima se nalaze samo kraće odrednice, kao što su godina proizvodnje, vrsta (žanr) filma itd.

A sada malo flash...

Hajde sad da napravimo odgovarajući Flash fajl.
Sve što je potrebno da uradite je da napravite jedan MovieClip i postavite jednu njegovu instancu na stage. U MC-u će se nalaziti četiri dynamic text polja u koja ćemo iz spoljašnjeg XML fajla da pozovemo date parametre i text nodove (slika 1). Ono što je veoma bitno, i što čini potpunu automatizaciju, je to da ćemo kroz ActionScript umnožavati MovieClipove kako naša XML baza filmova raste. Znači, koliko filmova budemo imali (odnosno nodova "film"), automatski ćemo imati isto toliko MovieClipova, jedan ispod drugog. Još nam samo ostaje da implementiramo rešenje kojim ćemo vršiti prolaz kroz XML nodove i "kupiti" relevantne podatke i ubacivati ih u dynamic text polja.

Slika2: Layer-i

Prvo, da dodelimo imena dynamic text poljima: naziv, vrsta, godtrajanje i glumci.
(slika1). MovieClip cemo nazvati MCpodaci, kao i njegovu instancu na pozornici.
Radi lakše i preglednije organizacije, akcije ćemo staviti u poseban layer (slika 2). U njega stavljamo sledeći kod:

objXML = new XML();
objXML.ignoreWhite = true;
objXML.onLoad = onLoadXML;

objXML.load("katalog.xml");

function onLoadXML() {

Katalog = objXML.firstChild;
brojacDuplikata = 0;
MCpodaci._visible = false;

trenutniNod = Katalog.childNodes[0];

while(trenutniNod != null) {

//radi samo ako je trenutniNod element nod a ne text nod (3)
if(trenutniNod.nodeType == 1) {

//umnozavanje MC-a
duplicateMovieClip("MCpodaci", "MCpodaci" + brojacDuplikata, brojacDuplikata);
podaci = eval("MCpodaci" + brojacDuplikata);
podaci._y = brojacDuplikata * podaci._height + MCpodaci._y;

//promenljiva atributi
var atributi = trenutniNod.attributes;

//dodela atributa nodova tekstualnim poljima za svaki podatak
podaci.naziv = atributi.original + " (" + atributi.prevod + ")" ;
podaci.vrsta = atributi.vrsta;
podaci.godtrajanje = atributi.godina + ". godina, " + atributi.trajanje +" minuta";
podaci.glumci = trenutniNod.firstChild.nodeValue;

//inkrementiranje
brojacDuplikata ++;

}

//prelazak na sledeci nod
trenutniNod = trenutniNod.nextSibling;

}
}

Objašnjenje kod-a

Hajde sad da prođemo kroz kod, deo po deo:

objXML = new XML();
objXML.ignoreWhite = true;
objXML.onLoad = onLoadXML;
Na ovaj način uvodimo objekat u Flash5/MX, postavljamo na true svojstvo ignoreWhite i tako se ignoriše suvišni space, a zatim se obezbeđuje da prikazivanje počne kad se kompletan XML dokument učita u Flash player.

objXML.load("Katalog.xml");
function onLoadXML() {
Katalog = objXML.firstChild;
Učitavamo dokument i definišemo funkciju onLoadXML. Sa read-only svojstvom promenljivoj Katalog pridružen je prvi nod naslednik samog XML dokumenta a to je glavni nod "Katalog".

brojacDuplikata = 0;
MCpodaci._visible = false;
Definiše se brojač kojim ćemo multiplikovati MovieClipove, a vidljivost samog MovieClipa ćemo ukinuti. (za početak, naravno).

trenutniNod = Katalog.childNodes[0];
Prolaz kroz nodove vršimo formirajući niz, čiji je pokazivač postavljen na prvi "Film" nod.

while(trenutniNod != null) {
if(trenutniNod.nodeType == 1) {
Sve dok trenutni nod postoji i dok je trenutni node običan
nod element a ne text nod (on je type=3) radi se sledeće:

duplicateMovieClip("MCpodaci", "MCpodaci" + brojacDuplikata, brojacDuplikata);
podaci = eval("MCpodaci" + brojacDuplikata);
podaci._y = brojacDuplikata * podaci._height + MCpodaci._y;
Multiplikacija MovieClipa i pozicioniranje jedan ispod drugog.

var atributi = trenutniNod.attributes;
Prilazimo atributima samih nodova kroz novoformiranu promenljivu atributi.

podaci.naziv = atributi.original + " (" + atributi.prevod + ")" ;
podaci.vrsta = atributi.vrsta;
podaci.godtrajanje = atributi.godina + ". godina, " + atributi.trajanje +" minuta";
podaci.glumci = trenutniNod.firstChild.nodeValue;
Sada se dynamic text polja popunjavaju sa atributima nodova i njihovih text nodova. Ovde se vidi da, kao što smo utvrdili na početku, da je text nod - naslednik nod.

brojacDuplikata ++;
trenutniNod = trenutniNod.nextSibling;
Brojač se inkrementira, i prelazi se na sledeći nod. Ako ga nema, nextSibling svojstvo vraća vrednost 0 koja se upisuje u promenljivu trenutniNod i tako zaustavlja petlja while.

Ono što ćete dobiti kada eksportujete film izgleda otprilike ovako: Tako generisani SWF film i XML fajl moraju se nalaziti u istom direktorijumu servera. Ono što je takože vrlo bitno je da ako vaš katalog ima dosta naslova, treba obezbediti ili scroll-bar unutar Flasha, ili podeliti prikaz na više strana. Fajlove koji su korišćeni u ovom članku možete preuzeti odavde: [FlashXML.zip]

Zaključak

Kao što vidimo, Flash i XML predstavljaju vrlo moćnu kombinaciju, tim pre što vam, za razliku od HTML-a, nije potrebna nikakva dodatna tehnologija za prikaz i formatiranje podataka. Flash je odavno počeo da se otvara za rad sa bazama podataka i serverskim jezicima (PHP/MySQL), ali sa XML-om se dobija na jednostavnosti i prenosivosti. Ako želite nešto više da saznate o XML-u, posetite sledeće linkove:

www.xmlpitstop.com
www.zvon.org
www.topxml.com

Verzija za štampu