IPRO - PC Magazine Romania, Mai 2003
SOLUŢII PENTRU PROGRAMATORII ŞI DESIGNERII WEB

Flash şi XML: Tutorial

Ioan Alexandru Lazăr

Am spus în ultimul articol că Macromedia Flash include, începând cu versiunea 5.0, un parser XML. În versiunea MX, acest parser a atins o versiune matură şi îl puteţi folosi cu mare încredere în aplicaţiile dvs.
Şi totuşi, cum se foloseşte parser-ul acesta? Vă spun eu: foarte uşor. Urmaţi acest tutorial, şi pe urmă faceţi un test încercând să realizaţi acelaşi lucru fără a recurge la XML. Probabil că veţi renunţa la jumătate. Eu aşa am păţit.

Aşadar, vom construi un program care va citi date dintr-un fişier XML. Aceste date vor consta într-un număr oricât de mare de perechi [etichetă] - [url]. Programul va citi etichetele şi va genera un meniu format din butoane, pe fiecare buton fiind scris un nume, adică una dintre etichete, iar ca link informaţia pereche a etichetei - [url]. Când veţi apăsa pe un buton, veţi fi trimis la url-ul asociat etichetei butonului.
Pentru această aplicaţie, vom folosi un fişier xml pe care îl vom numi meniu.xml, un câmp de text dinamic şi un movie-clip pentru fiecare element al meniului. Rezultatul final al tutorialului îl puteţi găsi pe CD-ul revistei.

Ce se-ntâmplă
Haideţi să vedem ce trebuie să facă aplicaţia noastră! În primul rând, va avea nevoie de un obiect XML, pe care îl vom crea astfel: meniuXml = new XML(). Apoi, trebuie să poată "număra" elementele meniului nostru, număr pe care îl vom păstra în variabila n. Pentru a aplica etichetele pe butoane, vom folosi un câmp de text dinamic numit itemLabel, care va fi modificat prin secvenţa

item.itemLabel.text = menuItem[n].attributes.eticheta.

Puteţi vedea că eu am folosit aici nume, iar un element este trecut în fişierul xml ca

<buton eticheta="eticheta"
url="http://www.url.ro" />.

În fine, trebuie ca programul să atribuie butonului un url. De asta se ocupă secvenţa

item.myUrl = menuItem[n].attributes.url.

Urmează crearea fişierului xml din care programul îşi va lua datele.

Cum facem să se întâmple
Mai întâi vom crea fişierul xml. Folosind Notepad sau alt editor de text (vă recomand Crimson Editor sau UltraEdit), vom crea un fişier care să conţină perechile etichetă-url. Ar trebui să arate cam aşa:

< ?xml version="1.0"?>
< meniu>
< buton eticheta="PC Magazine" url="http://www.pcmagazine.ro" />
< buton eticheta="IPRO" url="http://www.pcmagazine.ro/ipro/" />
< buton eticheta="NET Report" url="http://www.netreport.ro/" />
< buton eticheta="PC Concrete" url="http://www.pcconcrete.ro" />
< /meniu>

Evident, puteţi folosi orice link-uri doriţi. Atenţie însă la tagul <buton eticheta> pentru că ne vom folosi de el în ActionScript.

Salvaţi acest fişier cu numele meniu.xml. Acum vom trece la partea de ActionScript. Creaţi un fişier Flash, inseraţi un movie-clip de dimensiuni 150 pe 20 pixeli. În el, desenaţi o formă geometrică care vă place mai mult - elipsă, dreptunghi, în fine, orice vreţi, numai să semene cât de cât a buton. Şi tot acolo creaţi şi un câmp de text dinamic căruia îi vom da, în caseta Instance Name, numele itemLabel. Aveţi grijă ca acest câmp de text să se afle deasupra oricărui desen. Apoi, în caseta Linkage, daţi movie-clip-ului pe care tocmai l-am creat numele meniuClip.

OK, cam aici ia sfârşit partea de desenare. Nu puneţi nimic în scenă, păstraţi totul în Library. În primul cadru-cheie al fişierului tocmai creat vom introduce codul, care e foarte-foarte scurt. Adică:

meniuXml = new XML();
meniuXml.ignoreWhite = true;
meniuXml.onLoad = function() {
menuItem = this.firstChild.childNodes;
for (var n=0; n<menuItem.length; n++) {
item = _root.attachMovie("meniuClip", "meniuClip" + n, n);
item._x = 0;
item._y = 20*n;
item.itemLabel.text = menuItem[n].attributes.eticheta;
item.myUrl = menuItem[n].attributes.url;
item.onRelease = function() {
getURL(this.myUrl,"_blank");
}
}
}
meniuXml.load("meniu.xml");

Două lucruri vă sunt probabil neclare, aşa că le voi explica imediat.

menuItem = this.firstChild. childNodes; Aruncaţi o privire peste fişierul XML. Vă veţi da seama că fiecare pereche etichetă-url este o subdiviziune (copil -"child") a tagului <meniu>. Fiecare pereche conţine informaţia de care e nevoie, iar această instrucţiune spune parser-ului unde se află informaţia de care e nevoie.

Instrucţiunea for (var n=0; n<menuItem.length; n++) calculează câte elemente are meniul şi repetă execuţia instrucţiunilor incluse în ea de tot atâtea ori. Altfel spus: citeşte primul element şi îl desenează (de aceea am folosit un ciclu "for"). Trece la al doilea, şi tot aşa până la ultimul. Când a ajuns la ultimul, îl desenează şi pe acesta, dar nu trece mai departe pentru că îşi dă seama că nu mai există elemente. E clar, nu?

Încercaţi să testaţi scena. Merge? Nu? Verificaţi unde aţi salvat fişierul xml: trebuie să fie în acelaşi director cu fişierul flash (în cazul nostru, fişierul se numeşte "meniu.xml"). Verificaţi dacă aţi făcut referirile corecte (că nu aţi scris, de exemplu, item.itemLabel.text = menuItem[n].attributes.name în loc de item.itemLabel.text = menuItem[n].attributes.nume. Trebuie să meargă... mie mi-a mers :).

În orice caz, ceea ce tocmai aţi realizat este un program care citeşte date dintr-un fişier xml şi le mai şi foloseşte pentru ceva util.

Mai mult
Mai puteţi găsi o serie de tutoriale pe tema Flash-XML la Flashkit (www.flashkit.com). Înainte de a încerca să faceţi ceva foarte, foarte serios ar fi bine să citiţi cu atenţie documentaţia FlashMX cu privire la integrarea XML-Flash. Dacă nu aveţi documentaţia FlashMX, o puteţi găsi pe situl Macromedia (www.macromedia. com). Acum, dacă vă place atât de mult XML, puteţi încerca să scrieţi un MP3 player. Aşa, ca temă pentru acasă :).
Nu e greu!