DataProvider ile çalışma

Özellik denetçisinin veya Bileşen denetçisinin Parametreler sekmesinde dataProvider parametresini tıklatarak ComboBox, List ve TileList bileşenleri için basit bir veri sağlayıcı oluşturabilirsiniz.

Başlangıçta boş bir Array öğesi görüntüleyen değer hücresini çift tıklatırsanız, veri sağlayıcısı oluşturmak için birden çok etiket ve veri değeri girmenize olanak sağlayan Değerler iletişim kutusunu açarsınız.

dataProvider için Değerler iletişim kutusu

dataProvider bileşenine bir öğe eklemek için artı işaretini tıklatın. Bir öğeyi silmek için eksi işaretini tıklatın. Seçili öğeyi listede bir öğe yukarı taşımak için yukarı oku veya seçili öğeyi listede bir öğe aşağı taşımak için aşağı oku tıklatın. Aşağıdaki resimde, çocukların adlarının ve doğum tarihlerinin bir listesini oluşturan Değerler iletişim kutusu gösterilmektedir.

Verilerin yer aldığı Değerler iletişim kutusu

Oluşturduğunuz Array öğesi, etiket ve değer alanları çiftlerinden oluşur. Etiket alanları, label ve data iken, değer alanları da çocukların adları ve doğum tarihleridir. Etiket alanı, List öğesinde görüntülenen içeriği tanımlar, bu örnekte içerik çocukların adlarıdır. Sonuçta elde edilen ComboBox şöyle görünür:

DataProvider tarafından doldurulan ComboBox

Veri ekleme işlemini bitirdiğinizde, iletişim kutusunu kapatmak için Tamam'ı tıklatın. dataProvider parametresindeki Array öğesi şimdi oluşturduğunuz öğelerle doldurulur.

verilerin yer aldığı dataProvider parametresi

Bileşenin dataProvider özelliğine erişmek için ActionScript kullanarak oluşturduğunuz etiket ve veri değerlerine erişebilirsiniz.

Bir Array veya XML nesnesinde veri oluşturup DataProvider yapıcısına value parametresi olarak nesneyi sağlayarak bir DataProvider oluşturabilirsiniz.

Aşağıdaki örnek, tek bir satırlar sütunu olan List bileşenini birçok çocuk adı ve doğum tarihiyle doldurur. Bu örnek, items Array öğesinde listeyi tanımlar ve DataProvider örneğini ( yeni DataProvider(öğeler) ) oluşturduğunda bunu parametre olarak sunup List bileşeninin dataProvider özelliğine atar.

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

Array öğesi, etiket ve değer alanları çiftlerinden oluşur. Etiket alanları, label ve data iken, değer alanları da çocukların adları ve doğum tarihleridir. Etiket alanı, List öğesinde görüntülenen içeriği tanımlar, bu örnekte içerik çocukların adlarıdır. Sonuçta elde edilen List şöyle görünür:

DataProvider tarafından doldurulmuş bir List öğesi

Kullanıcı üzerini tıklatıp listedeki bir öğeyi seçtiğinde, veri alanının değeri kullanılabilir duruma geçer ve bir change olayı başlatılır. Aşağıdaki örnek, kullanıcı List öğesinde bir ad seçtiğinde çocuğun doğum gününü görüntülemek için önceki örneğe bir TextArea ( aTa ) ve bir olay işleyici ( changeHandler ) ekler.

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

Şimdi kullanıcı List öğesinde bir çocuğun adını seçtiğinde, aşağıdaki resimde gösterildiği gibi çocuğun doğum günü TextArea bileşeninde görüntülenir. Bu, changeHandler() işlevi tarafından TextArea ( aTa.text ) öğesinin text özelliğinin seçili öğedeki veri alanının değerine ( event.target.selectedItem.data ) ayarlanmasıyla gerçekleştirilir. event.target özelliği, olayı tetikleyen nesnedir (bu durumda List).

List bileşeninin DataProvider öğesinden veri alanını görüntüleme

DataProvider öğesine metin dışında da veriler dahil edebilirsiniz. Aşağıdaki örnek, TileList öğesine veri sağlayan DataProvider öğesine MovieClip öğelerini dahil eder. Bu, MovieClip (renkli kutu) oluşturduktan sonra her bir öğeyi eklemek için addItem() öğesini çağırarak DataProvider bileşenini oluşturur.

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

Bir DataProvider nesnesini doldurmak için de XML verilerini (dizi yerine) kullanabilirsiniz. Örneğin, şu kod, verileri employeesXML adındaki bir XML nesnesine saklar ve sonra DataProvider() yapıcısı işlevinin değer parametresi olarak bu nesneyi iletir:

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;

Verileri önceki kodda olduğu gibi XML verilerinin nitelikleri olarak veya aşağıdaki kodda olduğu gibi XML verilerinin özellikleri olarak sağlayabilirsiniz:

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

DataProvider öğesi ayrıca kendisine erişip bu öğeyi işlemenizi sağlayan yöntemler ve özellikler kümesine de sahiptir. DataProvider içinde öğeler eklemek, kaldırmak, değiştirmek, sıralamak ve birleştirmek için DataProvider API'sini kullanabilirsiniz.