Werken met een DataProvider

U kunt een eenvoudige gegevensaanbieder voor de componenten ComboBox, List en TileList maken door op de parameter dataProvider te klikken op het tabblad Parameters van Eigenschapcontrole of Componentcontrole.

Als u dubbelklikt op de waardecel, waarin eerst een lege array wordt weergegeven, opent u het dialoogvenster Waarden waarin u meerdere label- en gegevenswaarden kunt invoeren om de gegevensaanbieder te maken.

Dialoogvenster Waarden voor dataProvider

Klik op het plusteken om een item toe te voegen aan de parameter dataProvider. Klik op het minteken om een item te verwijderen. Klik op de pijl-omhoog of pijl-omlaag om een geselecteerd item naar boven of beneden te verplaatsen in de lijst. In de volgende afbeelding wordt het dialoogvenster Waarden weergegeven waarin een lijst met namen en verjaardagen van kinderen wordt gemaakt.

Dialoogvenster Waarden met gegevens

De array die u maakt, bestaat uit paren label- en waardevelden. De labelvelden zijn label en data , en in de waardevelden worden de namen en verjaardagen van de kinderen weergegeven. In het labelveld wordt aangegeven welke inhoud wordt weergegeven in de lijst, in dit geval de namen van de kinderen. De resulterende ComboBox ziet er zo uit:

De ComboBox die is gevuld door de DataProvider

Wanneer u de gegevens hebt toegevoegd, klikt u op OK om het dialoogvenster te sluiten. De array in de parameter dataProvider wordt nu gevuld met de items die u hebt gemaakt.

Parameter dataProvider met gegevens

U kunt de gemaakte label- en gegevenswaarden openen door met ActionScript de eigenschap dataProvider van de component te openen.

U kunt een DataProvider maken door de gegevens in een Array- of XML-object te maken en het object op te geven als de parameter value voor de DataProvider-constructor.

In het volgende voorbeeld wordt een component List, één kolom met rijen, gevuld met de namen van verschillende kinderen en hun verjaardagen. In het voorbeeld wordt de lijst in de array items gedefinieerd en wordt deze bij het maken van de DataProvider-instantie ( new DataProvider(items) ) opgegeven als de parameter en wordt hieraan de eigenschap dataProvider van de component List toegewezen.

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

De array bestaat uit paren label- en waardevelden. De labelvelden zijn label en data , en in de waardevelden worden de namen en verjaardagen van de kinderen weergegeven. In het labelveld wordt aangegeven welke inhoud wordt weergegeven in de lijst, in dit geval de namen van de kinderen. De lijst ziet er zo uit:

Een lijst die is gevuld door een DataProvider

De waarde van het gegevensveld is beschikbaar wanneer de gebruiker een item in de lijst selecteert door erop te klikken en de gebeurtenis change veroorzaakt. In het volgende voorbeeld worden een tekstgebied ( aTa ) en een gebeurtenishandler ( changeHandler ) aan het voorgaande voorbeeld toegevoegd om de verjaardag van het kind weer te geven wanneer de gebruiker een naam selecteert in de lijst.

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

Wanneer de gebruiker nu de naam van een kind in de lijst selecteert, wordt in het tekstgebied de verjaardag van het kind weergegeven, zoals wordt weergegeven in de volgende afbeelding. Dit wordt gedaan door de functie changeHandler() wanneer deze de eigenschap text van de TextArea-component ( aTa.text ) instelt op de waarde van het gegevensveld in het geselecteerde item ( event.target.selectedItem.data ). De eigenschap event.target is het object dat de gebeurtenis heeft geactiveerd, in dit geval de component List.

Het gegevensveld van de DataProvider van een component List weergeven

U kunt andere gegevens dan tekst opnemen in een DataProvider. In het volgende voorbeeld worden filmclips opgenomen in een DataProvider die gegevens aanbiedt aan een component TileList. De DataProvider wordt gemaakt door addItem() aan te roepen om elk item toe te voegen nadat de filmclip, een gekleurd vak, is gemaakt.

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

U kunt in plaats van een array ook XML-gegevens gebruiken om een DataProvider-object te vullen. Met de volgende code worden gegevens in het XML-object employeesXML opgeslagen en vervolgens wordt dat object doorgegevens als de waardeparameter van de constructorfunctie 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;

U kunt gegevens als attributen van de XML-gegevens opgeven, zoals in de vorige code, of als eigenschappen van de XML-gegevens, zoals in de volgende code:

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

De DataProvider bevat tevens een set methoden en eigenschappen waarmee u deze kunt openen en bewerken. U kunt de API van de DataProvider gebruiken om items toe te voegen, te verwijderen, te vervangen, te sorteren en samen te voegen in een DataProvider.