Popolare un DataGrid da XML

Da Flex-developers.

Indice 1 DataGridSample 2 STEP 1: Recupero dei dati dalla fonte XML 3 STEP 2: Parsing XML 4 STEP 3: Andiamo al Datagrid

DataGridSample

Tool utilizzato: Flex 3.0

Requisiti: conoscenze di base di Flex 3.0 e ActionScript 3.0

Risorse a disposizione: prodotti.xml

Premessa:

In questo esempio vedremo come popolare un datagrid recuperando i dati da un sorgente xml.

STEP 1: Recupero dei dati dalla fonte XML

Nel primo step vedremo come effettuare il retrieve dei dati dal sorgente XML. Eseguiremo l'import delle classi flash.net.* e mx.events.* quindi dichiariamo tre variabili di cui una la rendiamo bindabile com il metadata tag Bindable.

Apriamo un blocco <mx:Script></Script> e dichiariamo le nostre variabili:

<mx:Script>
	<![CDATA[
		
		import flash.net.*;
		import mx.events.*;
		
		private var xmlLoader:URLLoader = new URLLoader();
		[Bindable]
		private var productList:XML;
		private var pathFile:String = "xml/prodotti.xml";

</mx:Script>

STEP 2: Parsing XML

In questa fase scriveremo due semplici funzioni per effettuare il parsing dei dati, ecco il codice:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute" creationComplete="loadXml(event)">
<mx:Script>
	<![CDATA[
		
		import flash.net.*;
		import mx.events.*;
		
		private var xmlLoader:URLLoader = new URLLoader();
		[Bindable]
		private var productList:XML;
		private var pathFile:String = "xml/prodotti.xml";

		private function loadXml(e:FlexEvent):void {
			xmlLoader.addEventListener(Event.COMPLETE, parseXml);
			xmlLoader.load(new URLRequest(pathFile));
		}
		private function parseXml(e:Event):void {
			productList = new XML(e.target.data);
		}
	]]>
</mx:Script>

STEP 3: Andiamo al Datagrid

Adesso passiamo al popolamento del DataGrid. Per prima cosa aggiungiamo un componente Panel, apriamo il relativo tag e settiamo un po di proprietà, fatto questo (in modalità Code) apriamo un tag <mx:DataGrid> e attraverso la proprietà dataProvider  accediamo alla variabile productList (di tipo XML) dove sono memorizzati i dati, quindi adottando la sintassi del punto ci spostiamo sul nodo detailProd, fatto questo impostiamo la proprietà variableRowHeight su true al fine che il contenuto della colonna Immagine sia visualizzato correttamente. A questo punto aggiungiamo le colonne nel DataGrid attraverso <mx:columns> e con la proprietà dataField accediamo ai vari nodi del file xml passando il nome di ogni singolo nodo. Nella colonna relativa all'immagine facciamo una cosa leggermente diversa rispetto alle altre colonne, qui apriremo nella successione un tag <mx:itemRenderer> e poi <mx:Component> all'interno del quale aggiungiamo il componente Image al componente immagine ho dato un filtro di ombra esterna.

<mx:Panel y="10" height="100%" layout="absolute" title="Esempio DataGrid" right="10" left="10">
		<mx:DataGrid id="Prodotti" dataProvider="{productList.detailProd}" variableRowHeight="true" height="100%">
			<mx:columns>
				<mx:DataGridColumn dataField="products_name" headerText="Nome Prodotto" width="200" wordWrap="true" />
				<mx:DataGridColumn dataField="products_image" headerText="Immagine" width="200">
					<mx:itemRenderer>
						<mx:Component>
							<mx:Image filters="{[new DropShadowFilter(5, 30, 0x8c8c8c, 0.8)]}" />
						</mx:Component>
					</mx:itemRenderer>
				</mx:DataGridColumn>
				<mx:DataGridColumn dataField="weight" headerText="Peso" width="40" />
				<mx:DataGridColumn dataField="price" headerText="Prezzo" width="150" />
				<mx:DataGridColumn dataField="code" headerText="Codice Prodotto" width="200" wordWrap="true" />
			</mx:columns>
		</mx:DataGrid>
	</mx:Panel>

---

MovieClip

File Allegato: http://www.flex-developers.org/tutorials/assets.zip