Schneller Tipp Datagrid mit XML verwenden

Ich werde demonstrieren, wie man die Datagrid-Komponente mit einer XML-Datei verwendet. Wenn Sie Tabellendaten anzeigen müssen, gibt es keine schnellere und einfachere Methode als die Verwendung eines Datagrids. Wenn Sie eine XML-Datei verwenden, macht dies die Sache noch besser.

Schritt 1: Einrichten des Flash-Dokuments

Erstellen Sie eine neue Flash-Datei (Actionscript 3.0). Legen Sie das Dokument auf 600x400px mit weißem Hintergrund fest.

Speichern Sie diese Datei mit dem Namen xmlDatagrid.fla

Schritt 2: Fügen Sie dem Dokument Komponenten hinzu

Öffnen Sie das Komponentenfenster, indem Sie auf Menü> Fenster> Komponenten gehen oder Strg + F7 drücken.

Ziehen Sie eine Schaltfläche, eine Combobox und eine Datagrid-Komponente auf die Bühne.

Dann löschen Sie die Komponenten Button, Combobox und Datagrid von der Bühne. Sie befinden sich jetzt in Ihrer Bibliothek.

Hier sehen Sie eine Vorschau der XML-Dokumentstruktur, die wir verwenden werden:

    ActionScript 3.0 lernen: Ein Leitfaden für Anfänger Ja 26.39   Essential ActionScript 3.0 Ja 34,64

Der Source-Download enthält drei XML-Dateien: flash.xml, ajax.xml, und php.xml; Sie folgen der gleichen Struktur wie das obige Snippet, enthalten jedoch unterschiedliche Bücher. Sie müssen sie im selben Ordner wie Ihre FLA ablegen.

Schritt 3: Öffnen Sie eine neue ActionScript-Datei

Öffnen Sie eine neue Actionscript-Datei und speichern Sie sie unter dem Namen XMLDataGrid.as

Öffnen Sie nun die Paketdeklaration und importieren Sie die Klassen, die wir verwenden werden:

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

Schritt 4: Erweitern Sie die MovieClip-Klasse und die Deklarationsvariablen

Die Hauptdokumentklasse muss entweder die Sprite- oder MovieClip-Klasse erweitern. Hier erweitern wir die MovieClip-Klasse. Deklarieren Sie die Variablen, die wir verwenden werden:

 package public class XMLDataGrid erweitert MovieClip var dg: DataGrid; var cb: ComboBox; var urlLoader: URLLoader = neuer URLLoader (); var loadButton: Schaltfläche; var bookXML: XML;

Schritt 5: Richten Sie den Constructor ein

Hier haben wir den Konstruktor mit drei Funktionen eingerichtet, die wir verwenden werden:

 öffentliche Funktion XMLDataGrid (): void setupGrid (); setupComboBox (); setupButton ();

Schritt 6: Funktionsdefinitionen

Hier definieren wir die Funktionen, die wir im Konstruktor verwenden:

 private Funktion setupGrid (): void dg = new DataGrid (); dg.addColumn ("Titel"); dg.addColumn ("InStock"); dg.addColumn ("Preis"); // Dies legt die Größe des Datagrids fest. Dg.setSize (600,100); // Dies ist, wie viele Zeilen das Datagrid anzeigen soll dg.rowCount = 5; // Wenn wir Spalten hinzufügen, werden sie in ein Array eingefügt // Hier setzen wir die erste Spalte "Titel" auf 450 dg.columns [0] .width = 450; // Dies setzt die x- und y-Position des Datagrids dg.move (0,100); addChild (dg);  private Funktion setupComboBox (): void cb = new ComboBox (); // Dadurch wird der ComboBox ein Element hinzugefügt. Cb.addItem (label: "Flash"); cb.addItem (label: "Ajax"); cb.addItem (label: "Php"); // Dies setzt die x- und y-Position cb.move (200,50); addChild (cb);  private Funktion setupButton (): void loadButton = new Button (); loadButton.label = "Bücher laden"; loadButton.addEventListener (MouseEvent.CLICK, loadBooks); loadButton.x = 200; loadButton.y = 325; addChild (loadButton);

Das setupGrid () Funktion erstellt ein DataGrid Komponente, die die Daten aus der XML-Datei anzeigt, die wir an sie übergeben.

Das setupComboBox () Funktion erstellt ein Kombinationsfeld, Dies ist eine Dropdown-Liste, mit der der Benutzer eine XML-Datei auswählen kann, die an das Datengrid übergeben wird.

Die Schaltfläche wurde in erstellt setupButton () wird verwendet, um die im Kombinationsfeld ausgewählte XML-Datei an das Datenraster zu übergeben. Wir werden diesen Code als nächstes schreiben.

Schritt 7: Definieren Sie die loadBooks-Funktion

Die loadBooks-Funktion wird im eventListener der loadButton verwendet.

 private Funktion loadBooks (e: Event): void // Hier gibt cb.selectedLabel einen String zurück, also rufen wir toLowerCase () auf // und hängen die .xml an, dh wenn 'Flash' ausgewählt ist, laden wir 'flash.xml' 'urlLoader.load (neue URLRequest (cb.selectedLabel.toLowerCase () + ". xml")); urlLoader.addEventListener (Event.COMPLETE, populateGrid);

Schritt 8: Definieren Sie die Funktion populateGrid

Die Funktion populateGrid wird im eventListener des urlLoader in der Funktion loadBooks verwendet.

 private Funktion populateGrid (e: Event): void var booksXML: XML = neues XML (e.target.data); // Wie viele Elemente enthält die XML-Datei var booksLength: int = booksXML.book.length (); // Dadurch werden alle zuvor hinzugefügten Daten im Datagrid entfernt. dg.removeAll (); // Hier durchlaufen wir die  Knoten in der XML-Datei, und fügen Sie jeden als Zeile zum Datagrid für hinzu (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

Schritt 9: Legen Sie die Dokumentklasse und den Test fest

Setzen Sie die Dokumentenklasse auf "XMLDataGrid" und testen Sie den Film!

Fazit

Hier haben wir gelernt, dass das Anzeigen von Tabluar-Daten in Flash mit der Datagrid-Komponente einfach ist und dass die Kombination mit XML eine gute Lösung darstellt.

Dies ist mein erstes Tutorial. Ich hoffe, Sie haben etwas Nützliches gelernt und vielen Dank für das Lesen!

Code