Construirea unei agende folosind XML
25.09.2008
De ce se foloseste Flashul de XML? Ei bine, obiectul Flash este un obiect compilat si din acest motiv nu prea avem cum sa modificam informatiile existente in cadrul sau.
8979 afisari 0 Rating (8 voturi) 25 min

In acest tutorial vom incerca sa abordam un subiect de care se tem cei mai multi programatori Flash (daca ajungi sa programezi cu adevarat in Flash iti dai seama cât de indispensabil este XML-ul).

Nu vom parcurge istoria care sta in spatele XML-ului, insa cert este ca la un moment dat a aparut acest format care poate fi folosit cu succes de majoritatea aplicatiilor (fie ele disponibile pe WEB sau nu). Formatul este unu destul de simplu si este foarte bine inteles si de catre partea umana. Sa vedem cum arata un fisier XML ce contine date privitoare la câteva persoane (pe care il vom salva cu numele "agenda.xml"):

<?xml version="1.0" encoding="UTF-8"?>
    <agenda>
        <persoana>
            <nume>Varlan.Cosmin</nume>
            <telefon>0722123456</telefon>
        </persoana>
        
        <persoana>
            <nume>Alboaie.Lenuta</nume>
            <telefon>0723123456</telefon>
        </persoana>
        
        <persoana>
            <nume>Croitoru.Marilena</nume>
            <telefon>0742123456</telefon>
        </persoana>
    </agenda>

Din ce este alcatuit un fisier XML?

In primul rând avem pe prima linie un antet care furnizeaza ce versiune de XML folosim. In exemplul nostru am folosit versiunea 1.0. Tot in antet vom gasi si encodingl caracterelor din fisierul XML. In acest XML se observa ca am folosit ca encoding setul de caractere UTF-8. Am intâlnit cazuri in care am avut nevoie sa incarc in Flash fisiere XML care sa contina diacritice si deoarece aceasta problema a iscat o discutie destul de interesanta pe forumul www.actionscript.org va voi oferi si solutia destul de simpla: encodingul de care povesteam (UTF-8) contine toate caracterele (inclusiv diacriticile). Pentru a scrie un fisier care sa contina caracterele speciale din limba româna nu este suficient sa specificati in antetul fisierului tipul encodingului ci trebuie sa salvati fisierul ca atare.

Astfel daca folositi notepad (alte editoare de texte au probabil optiuni similare), apasati optiunea Save as din meniul File. In fereastra de dialog obtinuta veti putea selecta un nou nume al fisierului, tipul fisierului si formatarea acestuia. In sectiunea de selectare a foamatarii alegeti optiunea UTF-8:


Construirea unei agende folosing XML

Fisierul XML poate fi reprezentat sub forma arborescenta si formatul (desi doar text) este inteles ca atare de catre aplicatiile ce-l folosesc. Asadar radacina arborelui construit in XML-ul de mai sus este nodul "agenda" si are trei copii (de fapt trei persoane). Fiecare nod-persoana are asociat câte un nume si un numar de telefon (fictiv evident). Arborele XML-ului nostru ar putea fi reprezentat astfel:


Construirea unei agende folosing XML

Fisierul XML este " dupa cum ati observat " format din câteva marcaje si informatiile utile cuprinse intre unele din marcaje. Fiecare nod va incepe cu un marcaj de tipul si se va termina cu unul de tip . Cuvântul care defineste inceputul sau sfârsitul unui nod nu este special, putând fi scris in orice limba, singura cerinta este ca marcajul cu care a inceput un nod sa fie similar cu cel cu care se termina. In interiorul marcajelor (unui nod) puteti defini alte marcaje (de fapt alte noduri si deci si sub-arbori), numarul de marcaje (noduri) imbricate fiind nelimitat.

In exemplul nostru putem observa cum marcajul este cel care deschide fisierul si marcajul-pereche este cel care il termina. Acest nod care se extinde peste tot documentul se numeste si radacina. Relativ la radacina, nodurile de tip "persoana" se numesc noduri copii. Daca privim din punctul de vedere al unui nod-persoana atunci nodul "agenda" este un nod-parinte.

O alta observatie pe care trebuie sa o facem este ca un marcaj-A deschis in interiorul altui marcaj-B trebuie inchis tot in interiorul marcajului-B.

Asadar nu se permit marcaje imbricate. Deschiderea fisierului XML cu ajutorul unui browser WEB (Internet Explorer, Firefox etc.) va permite vizualizarea arborescenta a acestuia si totodata verificarea corectitudinii acestuia:


Construirea unei agende folosing XML

Fiecare nod al unui fisier XML poate avea asociat un numar oarecare de atribute. De exemplu (reluând o portiune din XML-ul de mai sus), putem considera la fel de bine:

<persoana>
    <nume>Croitoru.Marilena</nume>
    <telefon retea="Orange">0742123456</telefon>
</persoana>

XML-ul este in continuare corect. Despre atribute trebuie sa retinem ca sunt folosite asemanator unor constante: au un nume si o valoare. Valoarea este intotdeauna incadrata de ghilimele. De fapt, aceleasi informatii care exprimate prin XML-ul initial pot fi redate prin intermediul atributelor (fisierul "agenda2.xml"):

<agenda>
    <persoana nume="Varlan.Cosmin" telefon="0722123456" />
    <persoana nume="Alboaie.Lenuta" telefon="0723123456" />
    <persoana nume="Croitoru.Marilena" telefon="07123456" />
</agenda>

Nu putem spune ca prima metoda este corecta sau a doua. Important este ca aplicatia care se foloseste de fisierul XML sa inteleaga corect continutul acestuia. Observati ca acestui XML ii lipseste cu desavârsire antetul. Acesta este cu caracter optional si doar furnizeaza informatii despre XML. Flash-ul ignora linia-antet si trece direct la parcurgerea informatiilor din interiorul XML-ului (numai dupa ce a verifica, bineinteles, daca XML-ul este unul valid " toate marcajele deschise sunt si inchise respectiv nu exista marcaje imbricate).

O a doua observatie pe care o putem face este ca marcajele sunt inchise fara a fi scrise de doua ori, prin aparitia caracterului "/" la sfârsitul marcajului. Asadar un marcaj de tipul nu are nevoie de un marcaj-pereche.

In Flash, pentru a putea parcurge arborele XML trebuie ca acesta sa fie incarcat complet in memorie (parsare DOM).

Felul in care va definiti XML-ul (ca in primul caz sau ca in al doilea) este la latitudinea dumneavoastra. Ar fi bine totusi ca marcajele sa exprime corect informatiile din interiorul lor (de exemplu marcajul telefon chiar sa contina numarul de telefon si nu adresa de mail).

De ce se foloseste Flashul de XML ? Ei bine, obiectul Flash este un obiect compilat si din acest motiv nu prea avem cum sa modificam informatiile existente in cadrul sau. Sa zicem ca am avea o agenda facuta in Flash, fara a utiliza XML. Acest lucru ar insemna ca avem toate informatiile (numele persoanelor, telefoanele) scrise direct in codul sursa (probabil ca variabile sau ca tablouri). Ce se intampla atunci cand vrem sa adaugam o noua persoana ? Vom cauta sursa Flash-ului (si ne vom bucura daca o mai gasim), vom adauga noua variabila, va trebui sa recompilam obiectul Flash (asta evident daca avem Flash-ul instalat) dupa care sa-l punem din nou pe serverul pe care se afla initial.

Fisierul XML poate fi modificat cu un simplu editor si acest lucru se poate realiza si direct pe server. Obiectul Flash care se foloseste de XML va trebui apoi doar sa reincarce XML-ul updatat si sa-l afiseze ca atare.

Sa construim obiectul Flash care folosindu-se de XML-ul "agenda.xml" afiseaza intr-un mod placut continutul agendei dumneavoastra. Pentru inceput vom seta scena la 640x480 si din fereastra cu componente vom aduce in scena un obiect de tipul DataGrid (printr-o operatie drag & drop). Din fereastra de proprietati vom schimba dimensiunile componentei la 600 (lungime) respectiv 400 (inaltime) si-i vom asocia numele de instanta "dg".

Sa trecem la incarcarea XMLului din exterior. Pentru inceput vom defini obiectul XML si il vom incarca din exterior. Pentru a ne convinge ca XML-ul a fost incarcat vom executa comanda trace avand ca parametru chiar obiectul XML. Asadar, in primul cadru al Flash-ului (aveti grija sa nu scrieti codul decat daca aveti selectat cadrul si nu componenta "dg"):

var arbore_xml = new XML();
arbore_xml.load("agenda.xml");
trace(arbore_xml);

Executand Flash-ul probabil ca va veti astepta ca in fereastra Flash sa fie afisat continutul XML-ului. Ei bine, acest lucru nu se va intampla. Sa vedem de ce... si aici este de fapt explicatia pentru care atator de multe persoane XML-ul li se pare extraordinar de greu de utilizat cu Flash-ul. Asa cum am zis putin mai devreme, pentru a fi utilizat de Flash XMLul trebuie sa fie complet incarcat in memorie. Operatiile din ActionScript sunt executate destul de rapid si intre comanda de incarcare a XMLului si cea de afisare a lui nu va trece decat cateva milisecunde (si motivul este evident: obiectul Flash trebuie sa treaca rapid la urmatorul cadru al animatiei si nu are timp sa stea dupa XML sa se incarce de pe Internet poate in cateva secunde bune).

Totusi ce face Flash-ul pentru a prelucra cum trebuie XML-urile ? Ei bine, inainte de a se incepe incarcarea XML-ului, se incarca in memorie o functie care se va executa numai in momentul in care XMLul s-a incarcat in intregime. Sa refacem codul de mai sus pentru a functiona corect:

var arbore_xml = new XML(); 
arbore_xml.onLoad = function(){
    trace(arbore_xml);
};
arbore_xml.load("agenda.xml");

Inlocuind scriptul cu noul script, la compilarea Flash-ului veti obtine intr-o fereastra continutul XMLului. Imediat dupa definirea obiectului (respectiv inaintea functiei onLoad) vom adauga urmatorul cod:

arbore_xml.ignoreWhite = true;
_root.dg.addColumn("Nume");
_root.dg.addColumn("Telefon");
dg.setSize(600, 400);
dg.getColumnAt(0).width = 400;
dg.getColumnAt(1).width = 180;

Prin intermediul acestui cod vom ignora spatiile albe din interiorul XMLului (Flash-ul nu stie sa trateze caracterele spatiu, enter sau tab aflate in fata marcatorilor sau intre ei si din acest motiv acestea trebuie eliminate prin executia comenzii ignoreWhite. Comenzile urmatoare au rolul de a adauga componentei DataGrid doua coloane intitulate "Nume" si "Telefon" si de a le redimensiona astfel incat numele sa incapa in intregime in coloana asociata lui.

Revenim la functia onLoad in care stim ca XMLul este disponibil si putem sa extragem din el datele:

arbore_xml.onLoad = function(){
    for (i=0; i < this.firstChild.childNodes.length; i++){
    nume = this.firstChild.childNodes[i].firstChild.firstChild.nodeValue;
    telefon = this.firstChild.childNodes[i].lastChild.firstChild.nodeValue;
    dg.addItem({Nume:nume, Telefon:telefon});
    }
};

Sa vedem cati pasi face instructiunea "for". Sa presupunem ca avem n persoane, copii ale nodului "agenda". In cadrul functiei onLoad, prin "this" se identifica obiectul arbore_xml. For-ul principal merge de la 0 pana la valoarea mai mica decat this.firstChild.childNodes.length. Prin firstChild se identifica nodul-radacina (agenda) apoi prin childNodes se gaseste un sir de elemente, fiecare element avand asociat subarborele unei anumite persoane.

Pentru a identifica cate elemente sunt in acest sir, interogam proprietatea length specifica array-urilor. Pentru a prelua numele din obiectul XML navigam spre primul nod (agenda) apoi construim array-ul prin intermediul childNodes si selectam elementul de pe pozitia [i] (respectiv 0,1,2... depinde de al catelea nodpersoana este procesat) apoi din nodul-persoana selectat preluam primul nod (respectiv nodul nume) si din nou primul nod pentru a ajunge la nodul de tip text ce reprezinta numele propriu-zis. Pentru a extrage valoarea apelam nodeValue.

Initial in XMLul nostru aveam trei persoane si din acest motiv for-ul va merge de la 0 pana la 2 (0, 1, 2) identificand pe rand cele trei persoane din XML. Odata cu adaugarea unui nou nod-persoana, for-ul va functiona de la 0 pana la 3 (0, 1, 2, 3) si va prelua pe rand informatiile despre toate persoanele existente in XML.

In cazul in care se opteaza pentru cel de-al doilea tip de XML (cel in care numele si telefonul sunt date ca atribute), singurele linii ce trebuiesc schimbate sunt cele privitoare la preluarea informatiilor din XML (respectiv liniile in care se dau valori numelui si telefonului). Acestea vor deveni:

nume = this.firstChild.childNodes[i].attributes.nume; 
telefon = this.firstChild.childNodes[i].attributes.telefon;

Ca exercitiu, construiti un nou XML in care sa se deosebeasca clar numele, prenumele, telefonul si adresa de e-mail la care poate fi contactata o persoana, ca in imaginea de mai jos:


Construirea unei agende folosing XML
Copyright © 2008-2010 E-LEARN.ro. Toate drepturile rezervate. Conceput si realizat de Neokinetics Software.