Curs Flash

Cu functiile ActionScript 3 specifice E4X poate fi accesata si folosita orice data dintr-un continut XML, cum ar fi: numele tag-urilor, textul din ele, atributele si valorile lor, comentarii sau instructiuni de procesare.

1. Accesare tag-uri si atribute

E4X ofera 2 seturi generale de instrumente pentru accesarea datelor dintr-un format XML:

  1. Prin metodele claselor XML si XMLList - attribute(), attributes(), child(), children(), comments(), descendants(), elements(), parent(), processingInstructions(), text()
  2. Prin stilul ierarhic tip obiecte, cu operatorul punct (.). Fiecare element este considerat un obiect, iar pentru atribute se foloseste caracterul '@' in fata. Doua puncte (..) accesor pt. descendenti.
Cea mai convenabila este a doua varianta (cu punct), fiind mai usor de inteles. Dar sunt unele elemente care pot fi accesate doar cu metode din prima varianta.
    - elementul parinte se acceseaza cu metoda parent()
    - comentariile prin comments()
    - instructiuni de procesare, cu processingInstructions()
    - elementele si atributele a caror nume contin caractere rezervate se acceseaza doar cu metode

Urmatorul exemplu afisaza intr-o zona de text in prezentarea Flash datele preluate din XML (folosind operatorul punct (.)).
  1. Mai intai trasati in Scena documentului Flash o zona de text (cu "Text Tool") si dati-i numele de Instanta "datexml" (in panoul Properties). Pentru ca aceasta suprafata de text sa fie afisata cu o bordura, alegeti o culoare la "Container border color", in panoul Properties -> "Container and Flow". Vedeti in imaginea urmatoare indicat locul acestei optiuni, zona de text trasata in Scena si numele de Instanta 'datexml'.
Suprafata de Text
  2. In panoul pt. ActionScript adaugati urmatorul cod:
// Instanta in care e stocat continutul XML complet
var poze:XML = <imglist>
    <image id="1">
      <url>dir/img1.jpg</url>
      <title>Titlu img1</title>
    </image>
  </imglist>;

// Adauga in "datexml" (zona de Text din Scena) date din XML
datexml.text = 'Tag radacina: '+ poze.name();         // Numele tag-ului radacina
datexml.text += '\n ID imagine: '+ poze.image.@id;       // Valoarea atributului 'id' in <image>
datexml.text += '\n Url: '+ poze.image.url;              // Datele tag-ului <url>
datexml.text += '\n Titlu imaginii: '+ poze.image.title;       // Datele tag-ului <title>
- Se foloseste '+=' pentru a adauga valoarea de dupa egal (=) la cele deja existente; '\n' adauga un rand nou.
- Observati ca se foloseste si o metoda, "name()", aceasta returneaza numele elementului la care e aplicata (aici fiind chiar instanta cu tag-ul radacina). Operatorul punct (.) trebuie combinat cu metode pentru a lucra cat mai eficient. De exemplu, fara utilizarea functiilor nu se poate obtine numele vreunui element copil dintr-un obiect.

Cu formula obiect.* se obtin toate elementele (tag-urile) din "obiect", iar cu @* se obtin valorile tuturor atributelor din tagul la care e aplicata.

  3. Dupa ce se apasa "Ctrl+Enter", va rezulta urmatoarea prezentare Flash:
Accesare date XML E4X

• Accesarea datelor XML cu metode se face printr-o structura ierarhica de noduri (nodes), parinte, copil.
Iata aceleasi date extrase din XML, dar folosind varianta cu metode.
// Instanta in care e stocat continutul XML complet
var poze:XML = <imglist>
    <image id="1">
      <url>dir/img1.jpg</url>
      <title>Titlu img1</title>
    </image>
  </imglist>;

// Adauga in "datexml" (zona de Text din Scena) date din XML, preluate prin metode
datexml.text += 'Tag radacina: '+  poze.localName();         // Numele tag-ului radacina

// Valoarea atributului 'id' al primului element copil (<image>) in radacina
datexml.text += '\n ID imagine: '+ poze.children()[0].attribute('id');

// Datele din elementul <url> al primului obiect-copil (<image>) in radacina
datexml.text += '\n Url: '+ poze.children()[0].child('url');

// Datele din al doilea element ([1] <title> ) al primului obiect-copil (<image>) in radacina
datexml.text += '\n Titlu imaginii: '+ poze.children()[0].children()[1];
- Acest cod returneaza si afiseaza in prezentarea Flash aceleasi date ca exemplu precedent, in imaginea de sus.
- "poze.children()[0]" returneaza continutul primului element copil din obiectul "poze" (primul element are index 0, al doilea 1, ...).
- "attribute('id')" returneaza valoarea atributului "id" din obiectul la care e aplicata metoda.
- "child('url')" returneaza datele elementului "url" din obiectul la care e aplicata metoda.
Aceasta modalitate, cu metode ierarhice (child, parent) e utila in special cand nu se cunosc numele elementelor (de ex. la parcurgerea iterativa a continutului XML).
Lista completa cu metodele ce pot fi utilizate pentru lucru in ActionScript cu XML se gaseste la pagina oficiala Clasa XML - AS3.

Cu metoda length se poate prelua numarul de tag-uri sau atribute dintr-un element.
De ex.:
              trace(poze.image.*.length());         // 2 (nr. tag-uri incluse in <image>)
              trace(poze.image.attributes().length());         // 1 (nr. atribute din <image>)

2. Utilizare operator accesor si metoda pt. descendenti (..)

O instructiune destul de utila in E4X este accesorul doua-puncte (..), care da posibilitatea accesarii directe a tuturor descendentilor dintr-un obiect (noduri copil, nepot, stranepot, ...).
Cu operatorul accesor (..) se obtine o lista cu toate elementele sau atributele cu un anumit nume din toti descendentii inclusi in obiectul la care e aplicat.
Clasa XMLList are si o metoda echivalenta la acest operator, denumita descendants(), care functioneaza in acelasi mod, dar pt. atribute trebuie adaugata si metoda "attribute()".


Iata cum se folosesc si ce fac operatorul doua-puncte (..) si metoda "descendants()". Studiati codul si explicatiile din urmatorul exemplu.
// Instanta in care e stocat continutul XML complet
var poze:XML = <imglist>
    <image id="1">
      <url>dir/img1.jpg</url>
      <title>Titlu img1</title>
    </image>
    <image id="2">
      <url>dir/img2.jpg</url>
      <title>Titlu pt. img2</title>
    </image>
  </imglist>;

trace(poze..title);   // sau   trace(poze.descendants('title'));
/* Returneaza toate tag-urile <title> aflate in oricare descendent in "poze"
  <title>Titlu img1</title>
  <title>Titlu pt. img2</title>
*/

trace(poze.descendants().attribute("id"));   //   sau trace(poze..@id);
// Returneaza 12    (valoarea atributelor "id" aflate in fiecare descendent in "poze")

// Se obtine al doilea atribut "id"
trace(poze..@id[1]);       // 2
- Expresia dupa 'sau' arata echivalentul prin care se obtine acelasi rezultat.

3. Accesare Comentarii si Instructiuni de procesare din XML

In continutul XML , pe langa datele din tag-uri si atribute, pot fi adaugate Comentarii si Instructiuni de porocesare.
Comentariile sunt cele adaugate cu sintaxa:
                <!-- Comentariu -->
Instructiunile de procesare sunt adaugate cu formula:
                <?app Date cu Instructiuni ?>
- Instructiunile de procesare sunt in general fragmente de cod care trebuie executate pe server. De exemplu, pt. PHP ar fi:     <?php Cod PHP ?>

Aceste doua forme de date auxiliare pot fi accesate utilizand metodele clasei XMLList: comments() (pt. comentarii) si processingInstructions() (pt. instructiuni de procesare). Ambele metode returneaza o lista cu aceste elemente.
In mod implicit (default), parser-ul E4X ignora aceste tipuri de date, astfel, pentru a le face accesibile trebuie specificate proprietatile: ignoreComments (pt. comentarii) si ignoreProcessingInstructions (pt. instructiuni de procesare) cu valoare false. Ambele se aplica direct la clasa XML.
                XML.ignoreComments = false;
                XML.ignoreProcessingInstructions = false;


In exemplu urmator se foloseste acelasi document FLA creat la inceputul lectiei (cu zona de text "datexml" trasata in Scena), dar cu alte date XML, ce contin doua comentarii si doua instructiuni de procesare in tag-ul radacina <site>. Va afisa primul comentariu si a doua instructiune in campul de text "datexml".
Stergeti alt cod ActionScript din documentul cu zona de text "datexml" si adaugati acest script:

// Se activeaza recunoasterea comentariilor si instructiunilor de procesare
XML.ignoreComments = false;
XML.ignoreProcessingInstructions = false;

// Instanta in care e stocat continutul XML complet
var marplo:XML = <site>
    <!-- https://marplo.net -->
    <?php Instructiuni procesare cod PHP ?>
    <!-- Cursuri si Tutoriale -->
    <cursuri>
      <curs id="1" title="PHP-MySQL">marplo.net/php-mysql/</curs>
      <curs id="2" title="JavaScript">marplo.net/javascript/</curs>
      <curs id="3" title="FlashActionScript">marplo.net/flash/</curs>
    </cursuri>
    <?php Cod PHP ?>
  </site>;

// Preia in 2 variabile comentariile si instructiunile PHP aflate direct in root (tagul <site>)
// Variabilele sunt de tip Object deoarece si datele sunt preluate cu acest tip
var coms:Object = marplo.comments();
var insp:Object = marplo.processingInstructions();

// Adauga primul Comentariu si a doua Instructiunea in 'datexml'
datexml.text = coms[0];
datexml.text += '\n'+ insp[1];
- Observati ca variabilele "coms" si "insp" sunt definite ca tip "Object", deoarece in E4X datele sunt preluate si stocate ca obiecte, cu indexare numerica (de la 0, precum la Array), de aceea se folosesc indexi [0], [1] pentru accesarea separata a fiecaruia.
- Apasand "Ctrl+Enter" se obtine urmatorul rezultat:
Accesare comentarii si instructiuni

Daca sunt comentarii si instructiuni in alte tag-uri incluse in cel radacina, acestea pot fi preluate cu operatorul accesor (..) sau metoda "descendants()", cu formula:
              instanta_xml..*.comments()
              instanta_xml.descendants().processingInstructions()
- Acestea nu preia si pe cele incluse direct in tag-ul radacina.

4. Accesare date XML filtrate

O alta abilitate importanta pe care o are E4X este posibilitatea de a filtra datele dintr-un obiect XMLList.
Filtrarea se face cu sintaxa:
                elemente_XMLList.(expresie_conditionala)
- "elemente_XMLList" reprezinta tag-urile si atributele dintr-un obiect XMLList
- "expresie_conditionala" sunt instructiuni conditionale prin care se returneaza doar elementele care indeplinesc acea conditie.
Deoarece filtrarea se aplica la obiecte de tip XMLList, datele XML trebuie mai intai adaugate intr-o instanta XMLList


Iata cum se aplica aceasta formula la continutul XML folosit si in exemplu precedent.
// Instanta in care e stocat continutul XML complet
var marplo:XML = <site>
    <!-- https://marplo.net -->
    <?php Instructiuni procesare cod PHP ?>
    <!-- Cursuri si Tutoriale -->
    <cursuri>
      <curs id="1" title="PHP-MySQL">marplo.net/php-mysql/</curs>
      <curs id="2" title="JavaScript">marplo.net/javascript/</curs>
      <curs id="3" title="FlashActionScript">marplo.net/flash/</curs>
    </cursuri>
    <?php Cod PHP ?>
  </site>;

// Se creaza un obiect XMLList ce contine toate elementele din <site>
var site:XMLList = marplo.*

// Se obtin doar tag-urie "curs" care au atributul id>1
var elms:XMLList = site.curs.(@id>1);
trace(elms);
/* In Output va afisa:
  <curs id="2" title="JavaScript">marplo.net/javascript/</curs>
  <curs id="3" title="FlashActionScript">marplo.net/flash/</curs>
*/

// Se obtine doar tag-ul care are in text cuvantul "flash"
var tag1:XMLList = site.curs.(text().search("flash") != -1);
trace(tag1);           // marplo.net/flash/

// Se obtine atributul "title" aflat in tag-ul care are id<3 si in textul din tag cuvantul "php"
var tag2:XMLList = site.*.(@id<3 && text().search("php") != -1).@title;
trace(tag2);           // PHP-MySQL
- Expresia "site.curs.(@id>1)" returneaza elementele din tag-ul <curs> care au atributul "id" mai mare decat 1.
- Aceasta "site.curs.(text().search("flash") != -1)" cauta in textul din tag-urile <curs> cuvantul 'flash' si returneaza pe cele gasite.
- "site.*.(@id<3 && text().search("php") != -1).@title" cauta in tag-urile din "site" pe cele care au atributul "id" mai mic decat 3 si in textul lor cuvantul "php", apoi returneaza valoarea atributului "title" din tag-urile gasite.

Observati ca se pot face filtrari destul de complexe pt. a obtine exact elementele cautate. Dar pentru a filtra o lista in care nu toate tag-urile au atributul sau elementul copil specificat in conditia de filtrare, trebuie folosita metoda hasOwnProperty(), pentru a verifica existenta acelui atribut sau tag-copil. Altfel, returneaza eroare.
De exzemplu, urmatorul cod returneaza toate elementele din "un_xml" care au atributul "nr" mai mare decat 7.
              un_xml..*.(hasOwnProperty("@nr") && @nr>7)


Fisierul FLA cu exemplele din aceasta lectie poate fi descarcat de la: XML - E4X - accesare.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag defineste zona de click intr-o harta creata dintr-o imagine?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?
display overflow position
#id {
  overflow: auto;
}
Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}
Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".
who which whoever
Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.
Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".
que quien cuyo
Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.
Accesare date XML - E4X

Last accessed pages

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (259731)
  2. Comparative si superlative (3330)
  3. Teste spaniola - Tests y ejercicios de Español - Gramática (25243)
  4. Conditional IF in Limba Engleza - Fraze Conditionale (119800)
  5. Viitor simplu si continuu - Future Tense Simple and Continuous (45025)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (621)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (538)
  3. Gramatica limbii engleze - Prezentare Generala (439)
  4. Exercitii engleza - English Tests and exercises - Grammar (379)
  5. Coduri pt culori (362)
Chat
Discuta sau lasa un mesaj pt. ceilalti utilizatori
Full screenInchide