Popolare un DataGrid da file XML

[Flep]

Dopo aver visto come popolare un ComboBox con Flash CS3, passiamo a vedere come utilizzare dei dati da un file XML ed inserirli in un componente flash Datagrid.

Questo esempio ricrea una situazione di un catalogo CD.

A mio parere, il componente DataGrid di Flash CS3 si mostra molto valido per questo tipo di applicazioni.

Chiaramente il file XML è completamente aggiornabile, nel senso che si possono aggiungere/togliere voci a piacimento.

Entriamo nel vivo...

Creo un FLA che salvo con nome ' data_grid.fla ' al cui interno:

- trascino sullo Stage un DataGrid e lo chiamo ' dg '

- creo un campo di testo dinamico in modo da inserire le fonts nell' SWF ( spiegazioni più dettagliate nell' articolo : incorporare fonts nell' SWF )

Creo la Document Class, un file AS che salvo con nome ' Main.as ', implementata in questo modo:

package
{
	import flash.display.MovieClip;
	import fl.controls.DataGrid;
	import fl.controls.ScrollPolicy;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.text.TextFieldAutoSize;
	
	public class Main extends MovieClip
	{
		private var xml:LoadingXML;
		
		public var objects_array:Array;
		public var colonne_array:Array;
		
		public var titolo:String;
		
		private var titolo_txt:TextField;
		
		public function Main()
		{
			init();
			loadXML();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			objects_array=new Array();
			colonne_array=new Array();
		}
		
		private function loadXML():void
		{
			xml=new LoadingXML(this);
		}
		
		public function creaTitolo():void
		{
			titolo_txt=createField(26,'Century Gothic');
			addChild(titolo_txt);
			titolo_txt.text=titolo+' CD';
			titolo_txt.x=stage.stageWidth/2-titolo_txt.width/2;
		}
		
		private function createField(n:Number,f:String):TextField
		{
			var field:TextField=new TextField();
			field.autoSize=TextFieldAutoSize.LEFT;
			field.selectable=false;
			field.embedFonts=true;
			field.defaultTextFormat=getFormat(n,f);
			return(field);
		}
		
		private function getFormat(n:Number,f:String):TextFormat
		{
			var tf:TextFormat=new TextFormat();
			tf.font=f;
			tf.size=n;
			tf.bold=true;
			tf.letterSpacing=0;
			tf.color=0x666666;
			return(tf);
		}
		
		public function initDataGrid():void
		{
			dg.move(25,50);
			dg.width=650;
			dg.rowCount=10;
			dg.columns=colonne_array;
			dg.verticalScrollPolicy=ScrollPolicy.ON;
			for(var i:int=0;i < objects_array.length;i++)
			{
				dg.addItem(objects_array[i]);
			}
		}
	}
}

Creo una classe che carica l' XML, un file AS che salvo con nome ' LoadingXML.as ' :

package
{
	import flash.display.MovieClip;
	import flash.display.Loader;
	import flash.events.Event;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.xml.*;
	
	public class LoadingXML extends XMLDocument
	{
		private var my_root:MovieClip;
		
		public function LoadingXML(m:MovieClip)
		{
			my_root=m;
			this.loadXML();
		}
		private function loadXML():void
		{
			var loader:URLLoader=new URLLoader();
			loader.addEventListener(Event.COMPLETE,completeHandler);
			
			var request:URLRequest=new URLRequest('catalogo.xml');
			try 
			{
				loader.load(request);
			} 
			catch(error:Error) 
			{
				trace('Impossibile caricare il documento.');
			}
		}
		private function completeHandler(event:Event):void
		{
			var loader:URLLoader=URLLoader(event.target);
			var result:XML=new XML(loader.data);
			var myXML:XMLDocument=new XMLDocument();
			myXML.ignoreWhite=true;
			myXML.parseXML(result.toXMLString());
			var node:XMLNode=myXML.firstChild;
			var n:int=node.childNodes.length;
			my_root.titolo=node.nodeName;
			for(var i:int=0;i < n;i++)
			{
				var obj:Object=new Object();
				var s:Number=node.childNodes[i].childNodes.length;
				for(var j:int=0;j < s;j++)
				{
					if(i==0)
						my_root.colonne_array.push(node.childNodes[i].childNodes[j].nodeName);
					if(j==0)
						obj.titolo=node.childNodes[i].childNodes[j].firstChild.nodeValue;
					if(j==1)
						obj.artista=node.childNodes[i].childNodes[j].firstChild.nodeValue;
					if(j==2)
						obj.nazione=node.childNodes[i].childNodes[j].firstChild.nodeValue;
					if(j==3)
						obj.casa_discografica=node.childNodes[i].childNodes[j].firstChild.nodeValue;
					if(j==4)
						obj.prezzo='? '+node.childNodes[i].childNodes[j].firstChild.nodeValue;
					if(j==5)
						obj.anno=node.childNodes[i].childNodes[j].firstChild.nodeValue;
				}
				my_root.objects_array.push(obj);
			}
			my_root.creaTitolo();
			my_root.initDataGrid();
		}
	}
}

Clicca quì per vedere il file XML.

Risultato:

Analizziamo il codice.

Classe LoadingXML.as
Questa è la stessa classe utilizzata in questo articolo: caricare un file XML esterno
Voglio concentrare l' attenzione sulle seguenti righe:
assegno alla variabile titolo di Main.as il nome del nodo principale del file XML
my_root.titolo=node.nodeName;
per quanti figli ha il nodo creo un oggetto
for(var i:int=0;i < n;i++)
var obj:Object=new Object();
con un secondo ciclo innestato, aggiungo delle proprietà all' oggetto creato e gli assegno il valore di ogni nodo figlio del figlio del nodo principale
for(var j:int=0;j < s;j++)
{
if(i==0)
my_root.colonne_array.push(node.childNodes[i].childNodes[j].nodeName);
if(j==0)
obj.titolo=node.childNodes[i].childNodes[j].firstChild.nodeValue;
if(j==1)
obj.artista=node.childNodes[i].childNodes[j].firstChild.nodeValue;
if(j==2)
obj.nazione=node.childNodes[i].childNodes[j].firstChild.nodeValue;
if(j==3)
obj.casa_discografica=node.childNodes[i].childNodes[j].firstChild.nodeValue;
if(j==4)
obj.prezzo='? '+node.childNodes[i].childNodes[j].firstChild.nodeValue;
if(j==5)
obj.anno=node.childNodes[i].childNodes[j].firstChild.nodeValue;
}
e inserisco l' oggetto nell' array objects_array di Main.as
my_root.objects_array.push(obj);
dopo di che chiamo i metodi creaTitolo() e initDatGrid() della classe Main.as
my_root.creaTitolo();
my_root.initDataGrid();


Classe Main.as
Proprietà:
un' sitanza della mia classe LoadingXML
private var xml:LoadingXML;
due arrays in cui inserirò i dati che la classe LoadingXML carica dal file XML
public var objects_array:Array;
public var colonne_array:Array;
il titolo dell' applicazione che non è altro che il nome delnodo principale del fileXML ( catalogo )
public var titolo:String;
un' istanza di campo di testo
private var titolo_txt:TextField;


Metodi:
init();
imposto la velocità del frame rate
stage.frameRate=31;
inizializzo i due arrays
objects_array=new Array();
colonne_array=new Array();


loadXML();
istanzio la classe LoadingXML passandogli il valore della root ( this in questo caso è la Document Class, ovvero il mio FLA, la mia Timeline, la _root dell' applicazione... )
xml=new LoadingXML(this);


creaTitolo();
creo un campo di testo chiamando la funzione createField a cui passo i valori di dimensione del testo e font. La funzione createField a sua volta mi restituisce il campo di testo creato e già compreso di TextFormat
titolo_txt=createField(26,'Century Gothic');
aggiungo il campo di testo al DisplayObject o non sarebbe visibile
addChild(titolo_txt);
imposto un testo al campo di testo
titolo_txt.text=titolo+' CD';
posiziono il campo di testo
titolo_txt.x=stage.stageWidth/2-titolo_txt.width/2;



createField(n:Number,f:String):TextField
creo un campo di testo e gli assegno alcuni valori alle sue proprietà
var field:TextField=new TextField();
field.autoSize=TextFieldAutoSize.LEFT;
field.selectable=false;
field.embedFonts=true;
assegno un TextFormat al campo di testo chiamando la funzione getFormat() che mi restituisce un TextFormat e passandogli i valori che mi sono arrivati dalla funzione creaTitolo()
field.defaultTextFormat=getFormat(n,f);
restituisco il campo di testo
return(field);


getFormat(n:Number,f:String):TextFormat
creo un nuovo TextFormat e gli assegno come font e dimansione i valori che ho passato dalla funzione createField() che a sua volta li ha ricevuti dalla funzione creaTitolo()
var tf:TextFormat=new TextFormat();
tf.font=f;
tf.size=n;
tf.bold=true;
tf.letterSpacing=0;
tf.color=0x666666;
restituisco il TextFormat
return(tf);



initDataGrid();
posiziono il DataGrid
dg.move(25,50);
imposto dimensione larghezza del DataGrid
dg.width=650;
imposto il numero di righe del DataGrid
dg.rowCount=10;
imposto il numero di colonne del DataGrid con il valore della lunghezza dell' array colonne_array
dg.columns=colonne_array;
attivo la scrollBar del DataGrid
dg.verticalScrollPolicy=ScrollPolicy.ON;
carico i dati nel DataGrid col metodo addItem() a cui passo ogni indice dell' array objects_array
for(var i:int=0;i < objects_array.length;i++)
{
dg.addItem(objects_array[i]);
}

Non male eh ?! ...

[fodrigag]

Complimenti per il tutorials....
è possibile filtrare il datagrid con il combobox ad esempio il nodo nazione?
in modo da ottenere una lista ad esepio solo EU?

sarebbe bello vedere come fare interagire due componenti.

[bettabi]

Ciao, io ho un data grid simile a questo, che carica dati xml. Ogni nodo dell'xml contiene il riferimento ad un file pdf, ed io vorrei che cliccando sulla riga corrispondente fosse possibile scaricare il file.
E possibile? Idee su come si può fare?
Aiuto, per favore!
Grazie, a presto