Praca z dostawcą danych

Prosty obiekt dostawcy danych dla składników ComboBox, List i TileList można utworzyć, klikając parametr dataProvider na karcie Parametry w Inspektorze właściwości lub Inspektorze składników.

Dwukrotne kliknięcie wartości w komórce, która początkowo zawiera pustą tabelę, spowoduje otwarcie okna dialogowego Wartości umożliwiającego utworzenie dostawcy danych poprzez wprowadzenie wielu wartości etykiet i danych.

Okno dialogowe Wartości dostawcy danych

Klikając znak plus, można dodać element do dostawcy danych. Kliknięcie znaku minus powoduje usunięcie elementu. Kliknięcie strzałki w górę powoduje przeniesienie zaznaczonego elementu bliżej początku listy, a kliknięcie strzałki w dół — bliżej końca listy. Na poniższej ilustracji przedstawiono okno dialogowe Wartości, w którym tworzona jest lista imion dzieci oraz ich dat urodzenia.

Okno dialogowe Wartości z danymi

Utworzona tablica (obiekt Array) zawiera pary pól etykiet i wartości. Pola etykiet to label i data , natomiast pola wartości to imiona i daty urodzenia dzieci. Pole etykiety identyfikuje zawartość komórek wyświetlaną na liście, czyli w tym przypadku imiona dzieci. Wynikowy składnik ComboBox wygląda następująco:

Składnik ComboBox wypełniony przez dostawcę danych

Po zakończeniu dodawania danych należy kliknąć przycisk OK, aby zamknąć okno dialogowe. Tablica w parametrze dataProvider jest teraz wypełniona elementami utworzonymi przez użytkownika.

Parametr dataProvider z danymi

Dostęp do utworzonych wartości etykiet i danych można uzyskać w języku ActionScript za pośrednictwem właściwości dataProvider składnika.

Dostawcę danych można utworzyć, tworząc dane w obiekcie Array lub XML i przekazując ten obiekt jako parametr value do konstruktora obiektu DataProvider.

W poniższym przykładzie składnik List, będący pojedynczą kolumną wierszy, jest wypełniany imionami i datami urodzin kilkorga dzieci. W przykładowym kodzie lista jest definiowana w tablicy items i przekazywana jako parametr podczas tworzenia instancji obiektu DataProvider ( new DataProvider(items) ); następnie instancja ta jest przypisywana właściwości dataProvider składnika 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);

Obiekt Array składa się z par pól etykiet i wartości. Pola etykiet to label i data , natomiast pola wartości to imiona i daty urodzenia dzieci. Pole etykiety identyfikuje zawartość komórek wyświetlaną na liście, czyli w tym przypadku imiona dzieci. Wynikowy składnik List wygląda tak:

Lista wypełniona przez dostawcę danych

Wartość pola danych jest dostępna, gdy użytkownik wybierze element na liście, klikając go i wywołując tym samym zdarzenie change . W poniższym przykładzie do poprzedniego przykładowego kodu dodano składnik TextArea ( aTa ) oraz funkcję obsługi zdarzeń ( changeHandler ), które wyświetlają datę urodzin dziecka, gdy użytkownik wybierze imię na liście.

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

Teraz, gdy użytkownik wybierze imię dziecka na liście, w obszarze tekstowym pojawi się data urodzin dziecka, tak jak przedstawiono to na poniższej ilustracji. Zadanie to realizuje funkcja changeHandler() , gdy przypisuje właściwości text składnika TextArea ( aTa.text ) wartość elementu danych ( event.target.selectedItem.data ). Właściwość event.target to obiekt, który wywołał zdarzenie, czyli w tym przypadku obiekt List.

Wyświetlanie pola danych z dostawcy danych składnika List

Dostawca danych może zawierać dane inne niż tekst. W poniższym przykładzie obiekt DataProvider, dostarczający danych dla składnika TitleList, zawiera klipy filmowe. Kod buduje obiekt DataProvider, wywołując metodę addItem() w celu dodania kolejnego elementu po utworzeniu każdego kolejnego obiektu MovieClip (kolorowego prostokąta).

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

Obiekt DataProvider można również zapełnić danymi XML (a nie tablicą). Poniższy przykładowy kod zapisuje dane w obiekcie XML o nazwie employeesXML , a następnie przekazuje ten obiekt jako parametr value do funkcji-konstruktora 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;

Dane mogą być zapisane jako atrybuty XML (tak jak w poprzednim przykładzie) lub jako właściwości XML, co ilustruje poniższy przykład:

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

Obiekt DataProvider ma także zestaw metod i właściwości umożliwiających dostęp do niego i manipulowanie nim. Interfejs API dostawcy danych umożliwia dodawanie, usuwanie, zastępowanie, sortowanie i scalanie elementów w obiekcie DataProvider.