Trabalho com um DataProvider

Você pode criar um provedor de dados simples para os componentes ComboBox, List e TileList clicando no parâmetro dataProvider na aba Parâmetros do Inspetor de propriedades ou do Inspetor de componentes.

Se você clicar duas vezes na célula de valor, que inicialmente mostra uma matriz vazia, a caixa de diálogo Valores será aberta e você poderá inserir diversos valores de rótulo e dados para criar o provedor de dados.

Caixa de diálogo Valores de dataProvider

Clique no sinal de adição para adicionar um item ao parâmetro dataProvider. Clique no sinal de subtração para excluir um item. Clique na seta para cima a fim de mover um item selecionado para cima na lista ou clique na seta para baixo a fim de mover um item selecionado para baixo na lista. A ilustração a seguir mostra a caixa de diálogo Valores que cria uma lista de nomes de crianças e suas datas de aniversário.

Caixa de diálogo Valores com dados

A matriz criada consiste em pares de campos de rótulo e valor. Os campos de rótulo são label e data , e os campos de valor são os nomes das crianças e suas datas de aniversário. O campo de rótulo identifica o conteúdo que aparece na lista, que, neste caso, é representado pelos nomes das crianças. A ComboBox resultante terá esta aparência:

A ComboBox preenchida pelo DataProvider

Quando você terminar de adicionar os dados, clique em OK para fechar a caixa de diálogo. Agora, a matriz no parâmetro dataProvider é preenchida com os itens criados.

parâmetro dataProvider com dados

Você pode acessar os valores de rótulo e dados criados usando o ActionScript para acessar a propriedade dataProvider do componente.

Você pode criar um DataProvider criando os dados em um objeto Array ou XML e fornecendo o objeto como parâmetro value para o construtor DataProvider.

O exemplo a seguir preenche um componente List, que é uma coluna de linhas com os nomes de várias crianças e suas respectivas datas de aniversário. O exemplo define a lista na matriz items e a define como parâmetro quando cria a ocorrência de DataProvider ( new DataProvider(items) ) e a atribui à propriedade dataProvider do 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);

A matriz consiste em pares de campos de rótulo e valor. Os campos de rótulo são label e data , e os campos de valor são os nomes das crianças e suas datas de aniversário. O campo de rótulo identifica o conteúdo que aparece na lista, que, neste caso, é representado pelos nomes das crianças. A lista resultante terá esta aparência:

Uma lista preenchida por um DataProvider

O valor do campo de dados estará disponível quando o usuário selecionar um item na lista clicando nele e provocando um evento change . O exemplo a seguir adiciona uma TextArea ( aTa ) e um manipulador de eventos ( changeHandler ) ao exemplo anterior para exibir a data de aniversário da criança quando um usuário selecionar um nome na lista.

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; 
};

Agora, quando um usuário selecionar o nome de uma criança na lista, a data de aniversário da criança será exibida na TextArea, conforme mostra a ilustração a seguir. Isso é feito pela função changeHandler() quando ela define a propriedade text da TextArea ( aTa.text ) para o valor do campo de dados no item selecionado ( event.target.selectedItem.data ). A propriedade event.target é o objeto que acionou o evento, que, neste caso, é a lista.

Exibição do campo de dados no DataProvider de uma lista

Você pode incluir dados que não sejam texto em um DataProvider. O exemplo a seguir inclui MovieClips em um DataProvider que fornece dados para uma TileList. Ele cria o DataProvider chamando o método addItem() para adicionar cada item depois que ele cria o MovieClip, uma caixa colorida.

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

Você também pode usar os dados XML (em vez de uma matriz) para preencher um objeto DataProvider. Por exemplo, o código a seguir armazena dados em um objeto XML chamado employeesXML e passa esse objeto como parâmetro de valor da função do construtor 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;

Você pode fornecer dados como atributos dos dados XML, como no código anterior, ou como propriedades dos dados XML, como no código a seguir:

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

O DataProvider também tem um conjunto de métodos e propriedades que permitem a você acessá-los e manipulá-los. Você pode usar a API do DataProvider para adicionar, remover, substituir, classificar e mesclar itens em um DataProvider.