Sfat rapid Utilizarea Datagrid cu XML

Voi demonstra cum să folosiți componenta datagrid cu un fișier xml. Când trebuie să afișați date tabulare, nu există o cale mai rapidă și mai ușoară decât să utilizați un datagrid și atunci când este asociat cu un fișier xml, aceasta face lucrurile cu atât mai bine.

Pasul 1: Configurarea documentului Flash

Creați un nou fișier flash (Actionscript 3.0). Setați documentul la 600x400px cu fundal alb.

Salvați acest fișier cu numele xmlDatagrid.fla

Pasul 2: Adăugați componente la document

Deschideți fereastra componentelor accesând Meniu> Fereastră> Componente sau apăsând pe Ctrl + F7.

Glisați un buton, o combobox și o componentă de dateagrid pe scenă.

Apoi, ștergeți butonul, combobox și componentele datagrid de pe scenă; ei se află acum în bibliotecă.

Iată o previzualizare a structurii de documente xml pe care o vom folosi:

    Învățarea ActionScript 3.0: Un ghid pentru începători da 26.39   Essential ActionScript 3.0 da 34.64

Descărcarea sursei conține trei fișiere XML: flash.xml, ajax.xml, și php.xml; fiecare urmează aceeași structură ca și fragmentul de mai sus, dar conține cărți diferite. Va trebui să le plasați în același folder ca și FLA.

Pasul 3: Deschideți un nou fișier ActionScript

Deschideți un nou fișier actionscript și salvați-l cu numele XMLDataGrid.as

Deschideți acum declarația pachetului și importați clasele pe care le vom folosi:

 pachet import flash.display.MovieClip; import flash.net.URLLoader; import flash.net.URLRequest; importul flash.events.MouseEvent; importul flash.events.Event; import fl.controls.DataGrid; import fl.controls.ComboBox; import fl.controls.Button;

Pasul 4: Extindeți clasa MovieClip și declarați variabilele

Clasa principală a documentelor trebuie să extindă clasa Sprite sau MovieClip; aici extindem clasa MovieClip. Declarați variabilele pe care le vom folosi:

 pachet public class XMLDataGrid extinde MovieClip var dg: DataGrid; var cb: ComboBox; var urlLoader: URLLoader = noul URLLoader (); var loadButton: Buton; var bookXML: XML;

Pasul 5: Configurați constructorul

Aici am creat constructorul cu trei funcții pe care le vom folosi:

 funcția publică XMLDataGrid (): void setupGrid (); setupComboBox (); setupButton ();

Pasul 6: Definițiile funcțiilor

Aici definim funcțiile pe care le folosim în constructor:

 funcția privată setGrid (): void dg = new DataGrid (); dg.addColumn ( "titlul"); dg.addColumn ( "instock"); dg.addColumn ( "Price"); // Aceasta stabilește mărimea datagridului dg.setSize (600,100); // Acesta este numărul de rânduri pe care doriți să le afișați datagridului dg.rowCount = 5; // Când adăugăm colums sunt plasate într-o matrice // Aici am setat prima coloană "Titlu" la 450 dg.columns [0] .width = 450; // Setați pozițiile x și y ale datagridului dg.move (0,100); addChild (dg);  funcția privată setupComboBox (): void cb = new ComboBox (); // Aceasta adaugă un element în comboBox cb.addItem (label: "Flash"); cb.addItem (etichetă: "Ajax"); cb.addItem (etichetă: "Php"); // Aceasta stabilește pozițiile x și y cb.move (200,50); addChild (cb);  funcția privată setupButton (): void loadButton = butonul nou (); loadButton.label = "Încarcă cărți"; loadButton.addEventListener (MouseEvent.CLICK, încărcătoare); loadButton.x = 200; loadButton.y = 325; addChild (loadButton);

setupGrid () funcția creează o Grila de date care va afișa datele din fișierul XML pe care îl transmitem.

setupComboBox () funcția creează o combobox, care este o listă drop-down pe care o vom folosi pentru a permite utilizatorului să aleagă un fișier XML care să fie transferat în grila de date.

Butonul creat în setupButton () va fi utilizat pentru a transmite fișierul XML, care este selectat în caseta combo, în grila de date. Vom scrie codul următor.

Pasul 7: Definiți funcția de încărcare a cărților

Funcția loadBooks este folosită în cazul Listener al butonului load.

 Funcția privată de încărcare (e: Event): void // Aici cb.selectedLabel returnează un șir, așa că sunăm laLowerCase () pe el // și adăugăm .xml la acesta, adică dacă este selectat 'Flash', încărcăm 'flash.xml 'urlLoader.load (noua adresă URLRequest (cb.selectedLabel.toLowerCase () + ".xml")); urlLoader.addEventListener (Event.COMPLETE, populateGrid);

Pasul 8: Definiți funcția populateGrid

Funcția populateGrid este folosită în eventListener al urlLoader în funcția loadBooks.

 funcția privată populateGrid (e: Event): void var booksXML: XML = XML nou (e.target.data); // Câte elemente sunt în fișierul xml var booksLength: int = booksXML.book.length (); // Aceasta elimină toate datele adăugate anterior în datagrid. dg.removeAll (); // Aici vom trece prin  nodurile din fișierul xml și adăugați fiecare câte un rând la datagrid pentru (var i: int = 0; i < booksLength; i++)  dg.addItem(Title: booksXML.book[i].title, InStock: booksXML.book[i].instock,Price: booksXML.book[i].price);   //Close out the class  // This is closing the package out

Pasul 9: Setați clasa de documente și testați

Setați clasa de documente la "XMLDataGrid" și testați filmul!

Concluzie

Aici am aflat că afișarea datelor tabluar în flash este ușurată cu componenta datagrid și că împerecherea cu xml face o soluție minunată.

Acesta este primul meu tutorial, sper că ați învățat ceva util și mulțumesc pentru lectură!

Cod