Operazioni con un componente DataProvider

Per creare un fornitore di dati semplice per i componenti ComboBox, List e TileList, fate clic sul parametro dataProvider nella scheda Parametri della finestra di ispezione Proprietà o nella finestra di ispezione dei componenti.

Se fate doppio clic sulla cella valore, nella quale inizialmente è contenuto un oggetto Array vuoto, viene aperta la finestra di dialogo Valori, che consente di immettere più valori dei dati e delle etichette per creare il fornitore di dati.

Finestra di dialogo Valori per dataProvider

Fate clic sul segno più per aggiungere una voce a dataProvider. Fate clic sul segno meno per eliminare una voce. Fate clic sulla freccia su per spostare una voce selezionata verso l'alto nell'elenco o fate clic sulla freccia giù per spostare la voce verso il basso nell'elenco. Nella figura seguente è illustrata la finestra di dialogo Valori con un elenco di nomi di bambini e i relativi compleanni.

Finestra di dialogo Valori con dati

L'oggetto Array creato è costituito da coppie di campi di etichette e di valori. I campi delle etichette sono label e data ei campi dei valori sono i nomi dei bambini e i relativi compleanni. Il campo dell'etichetta identifica il contenuto visualizzato nel componente List, in questo caso i nomi dei bambini. Il componente ComboBox risultante sarà simile al seguente:

Il componente ComboBox compilato da DataProvider

Una volta completata l'aggiunta dei dati, fate clic su OK per chiudere la finestra di dialogo. Nell'oggetto Array nel parametro dataProvider sono ora inserite le voci create.

Visualizzazione dell’elemento grafico a dimensioni intere

Parametro dataProvider con dati

Potete accedere ai dati delle etichette e dei valori creati usando ActionScript per accedere alla proprietà dataProvider del componente.

Potete creare un DataProvider creando un oggetto Array o XML e specificando l'oggetto come parametro value per la funzione di costruzione DataProvider.

Nell'esempio seguente, un componente List, che è costituito da un'unica colonna di righe, viene compilato con i nomi di alcuni bambini e i relativi compleanni. Nell'esempio, l'elenco viene definito nell'Array items e viene specificato come parametro quando l'istanza DataProvider ( new DataProvider(items) ) viene creata e assegnata alla proprietà dataProvider del componente List.

import fl.controls.List; 
import fl.data.DataProvider; 
 
var aList:List = new List(); 
var items:Array = [ 
{label:"David", data:"11/19/1995"}, 
{label:"Colleen", data:"4/20/1993"}, 
{label:"Sharon", data:"9/06/1997"}, 
{label:"Ronnie", data:"7/6/1993"}, 
{label:"James", data:"2/15/1994"}, 
]; 
aList.dataProvider = new DataProvider(items); 
addChild(aList); 
aList.move(150,150);

L'oggetto Array è costituito da coppie di campi di etichette e di valori. I campi delle etichette sono label e data ei campi dei valori sono i nomi dei bambini e i relativi compleanni. Il campo dell'etichetta identifica il contenuto visualizzato nel componente List, in questo caso i nomi dei bambini. Il componente List risultante sarà simile al seguente:

Il componente List compilato da DataProvider

Il valore del campo di dati è disponibile quando l'utente seleziona una voce nell'elenco facendo clic su di essa e causando la generazione di un evento change . Nell'esempio seguente viene aggiunto un componente TextArea ( aTa ) e un gestore di eventi ( changeHandler ) all'esempio precedente per visualizzare il compleanno del bambino quando l'utente seleziona un nome nel componente List.

import fl.controls.List; 
import fl.controls.TextArea; 
import flash.events.Event; 
import fl.data.DataProvider; 
 
var aList:List = new List(); 
var aTa:TextArea = new TextArea(); 
var items:Array = [ 
{label:"David", data:"1/19/1995"}, 
{label:"Colleen", data:"4/20/1993"}, 
{label:"Sharon", data:"9/06/1994"}, 
{label:"Ronnie", data:"7/6/1993"}, 
{label:"James", data:"2/15/1994"}, 
]; 
aList.dataProvider = new DataProvider(items); 
 
addChild(aList); 
addChild(aTa); 
 
aList.move(150,150); 
aTa.move(150, 260); 
 
aList.addEventListener(Event.CHANGE, changeHandler); 
 
function changeHandler(event:Event):void { 
    aTa.text = event.target.selectedItem.data; 
};

A questo punto, quando un utente seleziona il nome di un bambino nel componente List, nel componente TextArea viene visualizzato il relativo compleanno, come illustrato nella figura seguente. Questa operazione viene eseguita dalla funzione changeHandler() quando imposta la proprietà text del componente TextArea ( aTa.text ) sul valore del campo di dati nella voce selezionata ( event.target.selectedItem.data ). La proprietà event.target è l'oggetto che ha attivato l'evento, in questo caso List.

Visualizzazione del campo dei dati dall'oggetto DataProvider di un componente List

In un oggetto DataProvider potete includere dati diversi dal testo. Nell'esempio seguente vengono inclusi clip filmato in un DataProvider che fornisce i dati a TileList. Per creare l'oggetto DataProvider viene chiamato il metodo addItem() che aggiunge ogni voce dopo la creazione del clip filmato, una casella colorata.

import fl.data.DataProvider; 
import flash.display.DisplayObject; 
 
var aBox:MovieClip = new MovieClip(); 
var i:uint = 0; 
var colors:Array = new Array(0x00000, 0xFF0000, 0x0000CC, 0x00CC00, 0xFFFF00); 
var colorNames:Array = new Array("Midnight", "Cranberry", "Sky", "Forest", "July"); 
var dp:DataProvider = new DataProvider(); 
for(i=0; i < colors.length; i++) { 
    drawBox(aBox, colors[i]);    // draw box w next color in array 
    dp.addItem( {label:colorNames[i], source:aBox} ); 
} 
aTl.dataProvider = dp; 
aTl.columnWidth = 110; 
aTl.rowHeight = 130; 
aTl.setSize(280,150); 
aTl.move(150, 150); 
aTl.setStyle("contentPadding", 5); 
 
function drawBox(box:MovieClip,color:uint):void { 
            box.graphics.beginFill(color, 1.0); 
            box.graphics.drawRect(0, 0, 100, 100); 
            box.graphics.endFill();        

Per compilare un oggetto DataProvider, potete inoltre utilizzare dati XML, anziché un array. Ad esempio, il codice seguente memorizza i dati in un oggetto XML di nome employeesXML , quindi passa l'oggetto come parametro value della funzione di costruzione di DataProvider() :

import fl.controls.DataGrid; 
import fl.data.DataProvider; 
 
var aDg:DataGrid = new DataGrid(); 
addChild(aDg); 
 
var employeesXML:XML =  
    <employees> 
        <employee Name="Edna" ID="22" /> 
        <employee Name="Stu" ID="23" /> 
    </employees>; 
 
var myDP:DataProvider = new DataProvider(employeesXML); 
 
aDg.columns = ["Name", "ID"]; 
aDg.dataProvider = myDP;

Potete fornire dati come attributi dei dati XML, come nel codice precedente, o come proprietà dei dati XML, come nel codice riportato di seguito:

var employeesXML:XML =  
    <employees> 
        <employee> 
            <Name>Edna</Name> 
            <ID>22</ID> 
        </employee> 
        <employee> 
            <Name>Stu</Name> 
            <ID>23</ID> 
        </employee> 
    </employees>;

L'oggetto DataProvider ha inoltre un set di metodi e proprietà che ne consentono l'accesso e la gestione. Potete utilizzare l'API DataProvider per aggiungere, rimuovere, sostituire, ordinare e unire voci in un oggetto DataProvider.