Petite astuce Utilisation de la grille de données avec XML

Je vais vous montrer comment utiliser le composant datagrid avec un fichier xml. Lorsque vous avez besoin d'afficher des données tabulaires, il n'y a pas de moyen plus rapide et plus simple que d'utiliser une grille de données et lorsqu'il est associé à un fichier xml, cela rend les choses encore meilleures.

Étape 1: Configuration du document Flash

Créez un nouveau fichier flash (Actionscript 3.0). Définissez le document sur 600x400px avec un arrière-plan blanc.

Enregistrez ce fichier sous le nom xmlDatagrid.fla.

Étape 2: Ajouter des composants au document

Ouvrez la fenêtre des composants en allant dans Menu> Fenêtre> Composants ou en appuyant sur Ctrl + F7..

Faites glisser un bouton, une liste déroulante et un composant de grille de données sur la scène.

Supprimez ensuite les composants button, combobox et datagrid de la scène; ils sont maintenant dans votre bibliothèque.

Voici un aperçu de la structure du document XML que nous allons utiliser:

    Formation à ActionScript 3.0: Guide du débutant Oui 26.39   ActionScript 3.0 essentiel Oui 34,64

Le téléchargement source contient trois fichiers XML: flash.xml, ajax.xml, et php.xml; chacun suit la même structure que l'extrait ci-dessus, mais contient des livres différents. Vous devrez les placer dans le même dossier que votre fichier FLA..

Étape 3: Ouvrez un nouveau fichier ActionScript

Ouvrez un nouveau fichier actionscript et enregistrez-le sous le nom XMLDataGrid.as.

Ouvrez maintenant la déclaration du paquet et importez les classes que nous allons utiliser:

 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;

Étape 4: Étendre la classe MovieClip et déclarer des variables

La classe de document principale doit étendre la classe Sprite ou MovieClip; nous étendons ici la classe MovieClip. Déclarez les variables que nous allons utiliser:

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

Étape 5: Configurer le constructeur

Ici, nous configurons le constructeur avec trois fonctions que nous allons utiliser:

 fonction publique XMLDataGrid (): void setupGrid (); setupComboBox (); setupButton ();

Étape 6: Définitions de fonctions

Ici, nous définissons les fonctions que nous utilisons dans le constructeur:

 fonction privée setupGrid (): void dg = new DataGrid (); dg.addColumn ("Titre"); dg.addColumn ("InStock"); dg.addColumn ("Price"); // Ceci définit la taille de la grille de données dg.setSize (600,100); // C'est le nombre de lignes que vous souhaitez que la grille de données affiche dg.rowCount = 5; // Lorsque nous ajoutons des colonnes, elles sont placées dans un tableau. // Ici, nous définissons la largeur de la première colonne "Titre" à 450 dg.columns [0] .width = 450; // Ceci définit les positions x et y de la grille de données dg.move (0,100); addChild (dg);  fonction privée setupComboBox (): void cb = new ComboBox (); // Ceci ajoute un élément à la liste déroulante cb.addItem (label: "Flash"); cb.addItem (label: "Ajax"); cb.addItem (label: "Php"); // Ceci définit les positions x et y cb.move (200,50); addChild (cb);  fonction privée setupButton (): void loadButton = new Button (); loadButton.label = "Charger des livres"; loadButton.addEventListener (MouseEvent.CLICK, loadBooks); loadButton.x = 200; loadButton.y = 325; addChild (loadButton);

le setupGrid () la fonction crée un Grille de données composant, qui affichera les données du fichier XML que nous lui transmettons.

le setupComboBox () la fonction crée un Boîte combo, qui est une liste déroulante que nous utiliserons pour permettre à l'utilisateur de choisir un fichier XML à transmettre à la grille de données.

Le bouton créé dans setupButton () sera utilisé pour transmettre le fichier XML sélectionné dans la liste déroulante à la grille de données. Nous écrirons ce code ensuite.

Étape 7: Définir la fonction loadBooks

La fonction loadBooks est utilisée dans eventListener du loadButton..

 fonction privée loadBooks (e: Event): void // Ici, cb.selectedLabel renvoie une chaîne de sorte que nous appelons toLowerCase () dessus // et y ajoutons le .xml, c'est-à-dire que si Flash est sélectionné, nous le chargeons. flash.xml 'urlLoader.load (nouvelle URLRequest (cb.selectedLabel.toLowerCase () + ".xml")); urlLoader.addEventListener (Event.COMPLETE, populateGrid);

Étape 8: Définir la fonction populateGrid

La fonction populateGrid est utilisée dans eventListener de urlLoader dans la fonction loadBooks.

 fonction privée populateGrid (e: Event): void var booksXML: XML = new XML (e.target.data); // Combien d'éléments sont dans le fichier XML var booksLength: int = booksXML.book.length (); // Ceci supprime toutes les données précédemment ajoutées dans la grille de données. dg.removeAll (); // Ici nous parcourons le  des noeuds dans le fichier XML et les ajouter en tant que ligne à la grille de données pour (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

Étape 9: Définition de la classe de document et du test

Définissez la classe de document sur "XMLDataGrid" et testez le film!

Conclusion

Nous avons appris ici que l'affichage des données tabluar en flash est facilité avec le composant datagrid et que l'appariement avec XML constitue une excellente solution..

Ceci est mon premier tutoriel, j'espère que vous avez appris quelque chose d'utile et merci d'avoir lu!

Code