Trabajo con DataProvider

Se puede crear un proveedor de datos sencillo para los componentes ComboBox, List y TileList haciendo clic en el parámetro dataProvider de la ficha Parámetros, en el inspector de propiedades o en el inspector de componentes.

Si se hace doble clic en la celda de valor, que inicialmente muestra un objeto Array vacío, se abrirá el cuadro de diálogo Valores, que permite introducir varios valores de etiqueta y datos para crear el proveedor de datos.

Cuadro de diálogo Valores para dataProvider

Haga clic en el signo más para añadir un elemento a dataProvider. Haga clic en el signo menos para eliminar un elemento. Haga clic en la tecla de flecha arriba para subir un elemento seleccionado por la lista, o bien haga clic en la tecla de flecha abajo para bajarlo. En la ilustración siguiente se muestra un cuadro de diálogo Valores que crea una lista de nombres y cumpleaños de niños.

Cuadro de diálogo Valores con datos

El objeto Array que se crea consta de pares de campos de etiqueta y valor. Los campos de etiqueta son label y data y los campos de valor son los nombres de los niños y sus cumpleaños. El campo de etiqueta identifica el contenido que aparece en List, que en este caso está formado por los nombres de los niños. El componente ComboBox resultante tiene el siguiente aspecto:

Componente ComboBox llenado por DataProvider

Cuando termine de añadir los datos, haga clic en Aceptar para cerrar el cuadro de diálogo. El objeto Array del parámetro dataProvider ya está lleno con los elementos que se han creado.

Ver gráfico a tamaño completo

Parámetro dataProvider con datos

Se puede acceder a los valores de etiqueta y datos creados utilizando ActionScript para acceder a la propiedad dataProvider del componente.

Se puede crear un objeto DataProvider creando los datos en un objeto Array o XML y proporcionando el objeto como el parámetro value al constructor de DataProvider.

En el ejemplo siguiente se llena un componente List, que es una columna de filas, con los nombres de varios niños y sus cumpleaños. En el ejemplo se define la lista en el objeto Array items y se proporciona como parámetro cuando se crea la instancia de DataProvider ( new DataProvider(items)) y se asigna a la propiedad 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);

El objeto Array consta de pares de campos de etiqueta y valor. Los campos de etiqueta son label y data y los campos de valor son los nombres de los niños y sus cumpleaños. El campo de etiqueta identifica el contenido que aparece en List, que en este caso está formado por los nombres de los niños. El componente List resultante tiene el siguiente aspecto:

Componente List llenado por DataProvider

El valor del campo de datos está disponible cuando el usuario selecciona un elemento de la lista haciendo clic en él o desencadenando un evento change. En el ejemplo siguiente se añade un componente TextArea ( aTa ) y un controlador de eventos ( changeHandler ) al ejemplo anterior para mostrar el cumpleaños del niño cuando el usuario selecciona un nombre del 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 continuación, cuando el usuario selecciona el nombre del niño en List, el cumpleaños de dicho niño se muestra en TextArea tal como se muestra en la ilustración siguiente. Esto se consigue con la función changeHandler() cuando establece la propiedad text de TextArea ( aTa.text ) en el valor del campo de datos del elemento seleccionado ( event.target.selectedItem.data ). La propiedad event.target es el objeto que ha activado el evento, que en este caso es el componente List.

Visualización del campo de datos de DataProvider de un componente List

Se pueden incluir datos que no sean texto en DataProvider. En el ejemplo siguiente se incluyen componentes MovieClip en un DataProvider que proporciona datos a un componente TileList. Se crea el objeto DataProvider llamando a addItem() para añadir todos los elementos una vez que se crea el componente MovieClip, un cuadro de color.

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();        

También se pueden utilizar datos XML (en lugar de un conjunto) para llenar un objeto DataProvider. Por ejemplo, en el código siguiente se almacenan datos en un objeto XML denominado employeesXML , y luego se pasa dicho objeto como el parámetro de valor de la función constructora 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;

Se pueden proporcionar datos como atributos de los datos XML, como en el código anterior, o bien como propiedades de dichos datos, tal como se muestra en el código siguiente:

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

El objeto DataProvider también tiene un conjunto de métodos y propiedades que permiten acceder a él y manipularlo. Se puede utilizar la API de DataProvider para añadir, eliminar, reemplazar, ordenar y combinar elementos en un objeto DataProvider.