Arbeta med en DataProvider

Du skapar en enkel DataProvider för komponenterna ComboBox, List och TileList genom att klicka på parametern dataProvider på fliken Parametrar i egenskapsinspektören eller komponentinspektören.

Om du dubbelklickar på värdecellen, som till att börja med visar en tom Array, öppnas dialogrutan Värden, där du kan ange flera etiketts- och datavärden för att skapa en DataProvider.

dialogrutan Värden för dataProvider

Klicka på plustecknet och lägg till ett objekt i dataProvider. Klicka på minustecknet om du vill ta bort ett objekt. Klicka på uppåtpilen för att flytta ett markerat objekt uppåt i listan, eller på nedåtpilen för att flytta ett markerat objekt nedåt i listan. I följande bild visas dialogrutan Värden som skapar en lista med barns namn och födelsedagar.

dialogrutan Värden med data

Den Array som du skapar består av par med etikett- och värdefält. Etikettfälten är label och data och värdefälten är barnens namn och födelsedagar. Etikettfältet identifierar innehållet som visas i List, i det här fallet barnens namn. Den ComboBox som blir resultatet ser ut så här:

En ComboBox ifylld av DataProvider

När du har lagt till alla data klickar du på OK för att stänga dialogrutan. Den Array som finns i parametern dataProvider har nu fyllts i med objekten som du skapade.

Parametern dataProvider med data

Du kan komma åt label- och datavärdena som du skapade genom att använda ActionScript för att komma åt komponentens dataProvider -egenskap.

Du kan skapa en DataProvider genom att skapa data i ett Array- eller XML-objekt och tillhandhålla objektet som parametern value för DataProvider-konstruktorn.

Följande exempel fyller i en List-komponent, som är en enda rad kolumn med rader, med namnen på flera barn och deras födelsedagar. Exemplet definierar listan i en items -Array och anger den som parameter när den skapar DataProvider-förekomsten ( ny DataProvider(objekt) ) och tilldelar den egenskapen dataProvider för List-komponenten.

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

Denna Array består av par med etikett- och värdefält. Etikettfälten är label och data och värdefälten är barnens namn och födelsedagar. Etikettfältet identifierar innehållet som visas i List, i det här fallet barnens namn. Den List som blir resultatet ser ut så här:

En List ifylld av en DataProvider

Värdet på datafältet är tillgängligt när användaren markerar ett objekt i listan genom att klicka på det, vilket orsakar en change -händelse. Följande exempel lägger till en TextArea ( aTa ) och en händelsehanterare ( changeHandler ) i föregående exempel för att visa barnets födelsedag när en användare markerar ett namn i 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; 
};

När en användare nu markerar ett barns namn i List visas barnets födelsedag i TextArea, så som visas i följande bild. Det åstadkoms av funktionen changeHandler() när den ställer in värdet på datafältet i det markerade objektet ( event.target.selectedItem.data ) för text -egenskapen för TextArea ( aTa.text ) . Egenskapen event.target är det objekt som utlöste händelsen, i det här fallet List.

Visa datafältet från DataProvider för en List

Du kan ta med andra data än text i en DataProvider. I följande exempel tas filmklipp med i en DataProvider som förser en TileList med data. I exemplet byggs DataProvider genom att addItem() anropas för att lägga till varje objekt när filmklippet, en färglagd ruta, har skapats.

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

Du kan också använda XML-data (i stället för en array) om du vill fylla i ett DataProvider-objekt. Följande kod lagrar till exempel data i ett XML-objekt som heter employeesXML , och skickar sedan objektet som värdeparametern för konstruktorfunktionen 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;

Du kan tillhandahålla data som attribut till XML-data, som i föregående kod, eller som egenskaper för XML-data, som i följande kod:

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

DataProvider har också en uppsättning metoder och egenskaper som gör att du kan komma åt och ändra den. Du kan använda DataProvider-API för att lägga till, ta bort, byta ut, sortera och sammanfoga objekt i en DataProvider.