6) Flex tutorial - DataGrid e Xml

Come popolare un semplice DataGrid

Creiamo un nuovo Flex project con Flex Builder e chiamiamolo DataGridDaXml.

Andiamo nell'area design e inseriamo un Panel e al suo interno un DataGrid.

Ogni componente grafico che espone dei dati prende come fonte un dataProvider composto da una collection generata differentemente a seconda degli input ricevuti, in particolare:

• Una stringa contenente valido testo XML è convertita in una XMLListCollection.
• Un XMLNode è convertito in una XMLListCollection.
• Una XMLList è convertita in una XMLListCollection.
• Ogni oggetto che implementa una ICollectionView interface è castato ad una ICollectionView.
• Un Array è convertito in un ArrayCollection.

Nel nostro caso creiamo un file xml che chiamiamo prodotti.xml con il seguente contenuto :

<?xml version="1.0" encoding="UTF-8"?>

<prodotti>

<detailProd>

<products_name>4CENTO402</products_name> <products_image>images/giubbotto.jpg</products_image> <weight>1</weight>

<price>461.40</price>

<code>3004QWR10</code>

</detailProd>

<detailProd>

<products_name>4CENTO403</products_name> <products_image>images/giubbotto1.jpg</products_image> <weight>1</weight>

<price>30.50</price>

<code>3004ASE1078</code>

</detailProd>

<detailProd>

<products_name>4CENTO404</products_name> <products_image>images/giubbotto2.jpg</products_image> <weight>1</weight>

<price>90.80</price>

<code>3004GE103</code>

</detailProd>

</prodotti>

Lo inseriamo in una variabile Xml caricandolo con un UrlLoader nel seguente modo:

import flash.net.*;

import mx.events.*;

private var xmlLoader:URLLoader = new URLLoader();

[Bindable]

private var productList:XML;

private var pathFile:String = "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);

}

...e diamo in pasto al DataGrid l'XmlList ottenuta interrogando il nostro file Xml(productList.detailProd) e definendone i DataField nelle DataGridColoum con gli attributi che vogliamo caricare dai record. Alla fine il codice della nostra applicazione risulterà esser il seguente:

<?xml version="1.0" encoding="utf-8"?>

<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 = "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>

<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 /> </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>

</mx:Application>

Da notare l'utilizzo dell'ItemRenderer, tecnica usata quando è necessario renderizzare un componente differende da quello standard visualizzato nel conteiner.

Nel nostro caso abbiamo voluto visualizzare un immagine in una griglia che di default visualizza solo testo.

Al prox post.

Davide Graziani