Quick Tips: Bruke Datagrid med XML
Del
Del
Del
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Jeg kommer til å demonstrere hvordan du bruker Datagrid komponent med en xml fil. Når du trenger å vise tabelldata er det ingen raskere og enklere måte enn å bruke en Datagrid, og da sammen med en XML-fil det gjør ting enda bedre.
Trinn 1: Sette opp Flash Document
Opprett en ny Flash-fil (Actionscript 3.0). Sett dokument til 600x400px med en hvit bakgrunn
Lagre denne filen med navnet xmlDatagrid.fla
Trinn 2:. Legg Komponenter til dokumentet
Åpne komponenter vinduet ved å gå til Meny > Vindu > Komponenter eller trykke Ctrl + F7
Dra en knapp, en kombinasjonsboks og en Datagrid komponent til scenen
Deretter slette-knappen, kombinasjonsboks og Datagrid komponenter av scenen..; de er nå i biblioteket
Her er en forhåndsvisning av XML-dokumentet strukturen vi skal bruke.?
< xml version = "1.0" > < bøker >? < bok > < title > Learning Actionscript 3.0: En nybegynners < /title > < lagervare > ja < /lagervare > < pris > 26,39 < /pris > < /bok > < bok > < title > Essential Actionscript 3.0 < /title > < lagervare > ja < /lagervare > < pris > 34,64 < /pris > < /bok > < /bøker >
The Source nedlastingen inneholder tre XML-filer: flash.xml, ajax.xml og php.xml; hver følger samme struktur som biten ovenfor, men inneholder forskjellige bøker. Du må plassere dem i samme mappe som FLA
Trinn 3:. Åpne en ny Action File
Åpne en ny Actionscript-fil og lagre den med navnet XMLDataGrid .as
Nå åpner pakken erklæringen og importere klassene vi skal bruke:
pakke {import flash.display.MovieClip; import flash.net.URLLoader; import flash.net.URLRequest; import flash.events.MouseEvent; import flash.events.Event; import fl.controls.DataGrid; import fl.controls.ComboBox; import fl.controls.Button;
Trinn 4: Utvide MovieClip klasse og Erklærer variabler
Hoveddokumentet klasse må strekke seg enten Sprite eller MovieClip klasse; her vi forlenge MovieClip klasse. Erklærer variablene vi skal bruke:
pakken {public class XMLDataGrid strekker MovieClip {var dg: Datagrid; Var cb: ComboBox; Var URLLoader: URLLoader = new URLLoader (); Var loadButton: Button; Var bookXML: XML;
Trinn 5: Sett opp Constructor
Her har vi satt opp konstruktøren med tre funksjoner vi skal bruke:
offentlig funksjon XMLDataGrid (): void {setupGrid (); setupComboBox (); setupButton ();}
Trinn 6: Funksjons Definisjoner
Her er vi definerer funksjonene vi bruker i konstruktøren:
privat funksjon setupGrid (): void {dg = new Datagrid ( ); dg.addColumn ("Title"); dg.addColumn ("lagervare"); dg.addColumn ("prisen"); //Dette setter størrelsen på Datagrid dg.setSize (600 100); //Dette er hvor mange rader du vil at Datagrid vise dg.rowCount = 5; //Når vi legger colums de blir satt inn i en matrise //Her setter vi den første kolonnen "Title" width 450 dg.columns [0] .width = 450; //Dette angir x og y-posisjonen til Grid dg.move (0100); addChild (dg);} private funksjon setupComboBox (): void {cb = new ComboBox (); //Dette legger varen til ComboBox cb.addItem ({label: "Flash"}); cb.addItem ({label: "Ajax"}); cb.addItem ({label: "Php"}); //Dette setter x og y stillinger cb.move (200,50); addChild (cb);} private funksjon setupButton (): void {loadButton = new Button (); loadButton.label = "Load Books"; loadButton.addEventListener (MouseEvent.CLICK, loadBooks); loadButton.x = 200; loadButton.y = 325; addChild (loadButton);}
setupGrid () -funksjonen oppretter en Datagrid komponent, som vil vise dataene fra XML-filen vi videre til det
setupComboBox () -funksjonen oppretter en ComboBox, som er. en rullegardinliste som vi skal bruke til å tillate brukeren å velge en XML-fil som skal sendes til data rutenett.
Knappen opprettet i setupButton () vil bli brukt til å passere XML-filen, som er valgt i kombinasjonsboksen, til data rutenett. Vi skal skrive denne koden neste
Trinn 7:. Definer loadBooks Function
loadBooks funksjonen brukes i eventListener av loadButton
private funksjons loadBooks (e. : Hendelses): void {//Her cb.selectedLabel returnerer en streng så vi kaller toLowerCase () på det //og legge .xml til det vil si hvis "Flash" er valgt vi laster 'flash.xml' urlLoader.load ( ny URLRequest (cb.selectedLabel.toLowerCase () + "xml".)); urlLoader.addEventListener (Event.COMPLETE, populateGrid);}
Trinn 8: Definer populateGrid Function
populateGrid funksjonen brukes i eventListener av URLLoader i loadBooks funksjon
. privat funksjon populateGrid (e: Hendelses): void {var booksXML: XML = new XML (e.target.data); //Hvor mange elementer er i xml filen Var booksLength: int = booksXML.book.length (); //Dette fjerner alle tidligere lagt dataene i Datagrid. dg.removeAll (); //Her vi sløyfe gjennom < bok > noder i xml filen, og legg hver som en rad til Datagrid for (var i: int = 0; i & lt; booksLength; i ++) {dg.addItem ({Tittel: booksXML.book [i] .title, lagervare: booksXML.book [i] .instock, Pris: booksXML.book [i] .price}); }} //Lukk ut klassen} //Denne avsluttes pakken ut
Trinn 9: Sett Document klasse og Test
Still dokumentet klassen "XMLDataGrid" og teste filmen !
Konklusjon
Her har vi lært at hvis du viser tabluar data i flash er gjort enkelt med Datagrid komponent og at sammenkoblingen det opp med xml gjør en god løsning.
Dette er min første tutorial, jeg håper du har lært noe nyttig og takk for lesing!