Snelle tip gebruik van de Datagrid met XML

Ik ga demonstreren hoe de component datagrid te gebruiken met een xml-bestand. Wanneer u tabelgegevens moet weergeven, is er geen snellere en gemakkelijkere manier dan om een ​​datagrid te gebruiken en wanneer het wordt gecombineerd met een xml-bestand, maakt het dingen des te beter.


Stap 1: Het Flash-document instellen

Maak een nieuw flash-bestand (Actionscript 3.0). Stel het document in op 600x400 px met een witte achtergrond.

Sla dit bestand op met de naam xmlDatagrid.fla


Stap 2: voeg componenten toe aan het document

Open het componentenvenster door naar Menu> Venster> Componenten te gaan of op Ctrl + F7 te drukken.

Sleep een knop, een combobox en een datagrid-component naar het werkgebied.

Verwijder vervolgens de knop, combobox en datagrid-componenten van het werkgebied; ze zijn nu in je bibliotheek.

Hier is een voorbeeld van de XML-documentstructuur die we zullen gebruiken:

    ActionScript 3.0 leren: een beginnershandleiding Ja 26.39   Essentiële ActionScript 3.0 Ja 34.64  

De brondownload bevat drie XML-bestanden: flash.xml, ajax.xml, en php.xml; elk volgt dezelfde structuur als het bovenstaande fragment, maar bevat verschillende boeken. U moet ze in dezelfde map plaatsen als uw FLA.


Stap 3: Open een nieuw ActionScript-bestand

Open een nieuw actionscript-bestand en sla het op met de naam XMLDataGrid.as

Open nu de pakketverklaring en importeer de klassen die we gaan gebruiken:

 pakket 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;

Stap 4: Breid de MovieClip-klasse uit en geef variabelen op

De klasse hoofddocument moet de klasse Sprite of MovieClip uitbreiden; hier breiden we de MovieClip Class uit. Verklaar de variabelen die we zullen gebruiken:

 package public class XMLDataGrid breidt MovieClip uit var dg: DataGrid; var cb: ComboBox; var urlLoader: URLLoader = new URLLoader (); var loadButton: Button; var bookXML: XML;

Stap 5: Stel de Constructor in

Hier hebben we de constructor opgezet met drie functies die we gaan gebruiken:

 public function XMLDataGrid (): void setupGrid (); setupComboBox (); setupButton (); 

Stap 6: Functiedefinities

Hier definiëren we de functies die we gebruiken in de constructor:

 private function setupGrid (): void dg = new DataGrid (); dg.addColumn ( "Title"); dg.addColumn ( "INSTOCK"); dg.addColumn ( "Prijs"); // Hiermee stelt u de grootte in van de datagrid dg.setSize (600,100); // Dit is het aantal rijen dat u in de datagrid wilt laten zien dg.rowCount = 5; // Wanneer we colums toevoegen, worden ze in een array geplaatst // Hier stellen we de breedte van de eerste kolom "Title" in op 450 dg.columns [0] .width = 450; // Hiermee stelt u de x- en y-positie in van de datagrid dg.move (0,100); addChild (dg);  private function setupComboBox (): void cb = new ComboBox (); // Hiermee voegt u item toe aan de comboBox cb.addItem (label: "Flash"); cb.addItem (label: "Ajax"); cb.addItem (label: "Php"); // Hiermee stelt u de x- en y-posities in cb.move (200,50); addChild (c);  private function setupButton (): void loadButton = new Button (); loadButton.label = "Boeken laden"; loadButton.addEventListener (MouseEvent.CLICK, loadBooks); loadButton.x = 200; loadButton.y = 325; addChild (loadButton); 

De setupGrid () functie maakt een Data rooster component, die de gegevens van het XML-bestand dat we er passeren, weergeeft.

De setupComboBox () functie maakt een ComboBox, Dit is een vervolgkeuzelijst die we gebruiken om de gebruiker toe te staan ​​een XML-bestand te kiezen dat moet worden doorgegeven aan het gegevensraster.

De knop gemaakt in setupButton () wordt gebruikt om het XML-bestand dat is geselecteerd in de keuzelijst met invoervak ​​door te geven aan het gegevensraster. We zullen die code hierna schrijven.


Stap 7: Definieer de functie LoadBooks

De functie loadBooks wordt gebruikt in de gebeurtenis Luisteraar van de laadknop.

 privéfunctie loadBooks (e: Event): void // Hier retourneert de cb.selectedLabel een string zodat we naarLowerCase () erop // roepen en er .xml aan toevoegen. Dus als 'Flash' is geselecteerd, laden we 'flash.xml 'urlLoader.load (nieuwe URLRequest (cb.selectedLabel.toLowerCase () + ". xml")); urlLoader.addEventListener (Event.COMPLETE, populateGrid); 

Stap 8: Definieer de functie populateRrid

De functie populateGrid wordt gebruikt in de gebeurtenis Luisteraar van de urlLoader in de functie loadBooks.

 private function populateGrid (e: Event): void var booksXML: XML = nieuwe XML (e.target.data); // Hoeveel items staan ​​in het xml-bestand var booksLength: int = booksXML.book.length (); // Hiermee verwijdert u alle eerder toegevoegde gegevens in de datagrid. dg.removeAll (); // Hier doorlopen we de  knooppunten in het XML-bestand en voeg ze elk als een rij toe aan de datagrid voor (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

Stap 9: Stel de documentklasse en test in

Stel de documentklasse in op "XMLDataGrid" en test de film!


Conclusie

Hier hebben we geleerd dat het weergeven van tabluar-gegevens in flash gemakkelijk gemaakt kan worden met de datagrid-component en dat het koppelen met xml een geweldige oplossing is.

Dit is mijn eerste zelfstudie, ik hoop dat je iets nuttigs hebt geleerd en bedankt voor het lezen!