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.
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
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.
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;
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;
Hier hebben we de constructor opgezet met drie functies die we gaan gebruiken:
public function XMLDataGrid (): void setupGrid (); setupComboBox (); setupButton ();
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.
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);
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 deknooppunten 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
Stel de documentklasse in op "XMLDataGrid" en test de film!
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!