Главная » ActionScript » Работа с объектом DataProvider

0

Объект DataProvider — это источник данных, с помощью которого можно заполнить данными компоненты ComboBox, DataGrid, List и TileList. Каждый из этих классов компонентов имеет свойство dataProvider, которому можно назначить объект DataProvider для заполнения данными ячеек компонента. Как правило, поставщик данных — это коллекция данных, например объект Array или XML.

Создание объекта DataProvider

Для компонентов ComboBox, List и TileList можно создать объект DataProvider с помощью параметра dataProvider в среде разработки. Компонент DataGrid не имеет параметра dataProvider в Инспекторе свойств, так как он содержит несколько столбцов, в результате чего требуется более сложный поставщик данных. Кроме того, можно использовать ActionScript, чтобы создать DataProvider для этих компонентов, включая DataGrid.

Использование параметра dataProvider

Чтобы создать простого поставщика данных для компонентов ComboBox, List и TileList, щелкните параметр dataProvider на вкладке "Параметры" в Инспекторе свойств или компонентов.

Если дважды щелкнуть ячейку значения, которая сначала показывает пустой массив, откроется диалоговое окно "Значения", в котором можно ввести несколько значений для полей label и data, чтобы создать поставщика данных

Диалоговое окно "Значение" для dataProvider

Щелкните знак "+", чтобы добавить элемент в свойство dataProvider. Щелкните знак "-", чтобы удалить элемент. Щелкните стрелку вверх, чтобы переместить выделенный элемент вверх по списку, или стрелку вниз, чтобы переместить его вниз. На следующем рисунке показано диалоговое окно "Значения", в котором создается список имен и дней рождения детей.

Диалоговое окно "Значения" с данными

Созданный массив состоит из пар полей меток и значений. Поля меток — это label и data, а поля значений

— это имена и даты рожденья детей. Поле метки определяет содержимое, отображаемое в списке, в данном

случае это имя ребенка. В результате компонент ComboBox выглядит так:

Компонент ComboBox, заполненный объектом DataProvider

Завершив ввод данных, нажмите "ОК", чтобы закрыть диалоговое окно. Теперь массив в параметре dataProvider заполнен созданными элементами.

параметр dataProvider с данными

Чтобы вызвать созданные значения метки и данных, можно получить свойство dataProvider компонента с помощью ActionScript.

Создание объекта DataProvider с помощью ActionScript

Чтобы создать объект DataProvider, можно создать данные в объекте Array или XML и передать его в качестве параметра value конструктору DataProvider.

Примечание. В ActionScript 3.0 объект Array или XML нельзя назначить напрямую свойству dataProvider, так как свойство определяется в качестве объекта DataProvider и может получать только объекты типа DataProvider.

В следующем примере заполняется данными компонент List, который представляет собой один столбец строк с именами и датами рождения нескольких детей. В этом примере определяется список в массиве items, который затем передается в качестве параметра при создании экземпляра DataProvider (new DataProvider(items)) и назначается свойству dataProvider компонента 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);

Массив состоит из пар полей "метка" и "данные". Поля меток — это label и data, а поля значений — это имена и даты рожденья детей. Поле метки определяет содержимое, отображаемое в списке, в данном случае это имя ребенка. В результате компонент List выглядит так:

Компонент List, заполненный объектом DataProvider

Значение поля данных отображается, когда пользователь выбирает элемент списка, щелкнув по нему, в результате чего отравляется событие change. В следующем примере к предыдущему коду добавляется компонент TextArea (aTa) и обработчик события (changeHandler), чтобы при выборе имени в списке отображался день рожденья ребенка.

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;

};

Теперь, когда пользователь выбирает имя ребенка в компоненте List, его день рожденья отображается в компоненте TextArea, как показано на следующем рисунке. Это выполняется с помощью функции changeHandler(), которая задает свойству text компонента TextArea (aTa.text) значение поля данных в выбранном элементе (event.target.selectedItem.data). Свойство event.target — это объект, отправивший событие, которым в данном случае является компонент List.

Отображение поля данных из объекта DataProvider компонента List

Объект DataProvider может содержать не только текст. В следующем примере в объект DataProvider, заполняющий данными компонент TileList, включены экземпляры MovieClip. Объект DataProvider формируется вызовом методаaddItem() для добавления каждого созданного ранее элемента MovieClip, цветного окна.

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

Для заполнения объекта DataProvider также можно использовать не массив, а данные XML. Например, следующий код сохраняет данные в объекте XML с именем employeesXML, а затем передает его в качестве значения конструктору 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;

Данные можно передавать в виде атрибутов объекта XML, как в предыдущем коде, либо в качестве его свойств, как в следующем коде.

var employeesXML:XML =

<employees>

<employee>

<Name>Edna</Name>

<ID>22</ID>

</employee>

<employee>

<Name>Stu</Name>

<ID>23</ID>

</employee>

</employees>;

Объект DataProvider также имеет набор методов и свойств, с помощью которых им можно пользоваться и манипулировать. Для добавления, удаления, замены, сортировки или объединения элементов в объекте DataProvider можно использовать его API-интерфейс.

Манипулирование объектом DataProvider

Добавлять элементы в объект DataProvider можно с помощью addItem() и addItemAt(). В следующем примере добавляются элементы, введенные пользователем в текстовое поле редактируемого компонента ComboBox. Для этого необходимо перетащить компонент ComboBox в рабочую область и присвоить ему имя экземпляра aCb.

import fl.data.DataProvider;

import fl.events.ComponentEvent;

var items:Array = [

{label:"Roger"},

{label:"Carolyn"},

{label:"Darrell"},

{label:"Rebecca"},

{label:"Natalie"},

{label:"Mitchell"},

];

aCb.dataProvider = new DataProvider(items);

aCb.addEventListener(ComponentEvent.ENTER, newItemHandler);

function newItemHandler(event:ComponentEvent):void {

var newRow:int = event.target.length + 1; event.target.addItemAt({label:event.target.selectedLabel}, event.target.length);

}

Кроме того, с помощью объекта DataProvider можно удалять или заменять элементы в компоненте. В следующем примере создается два отдельных компонента List, listA и listB, а затем добавляется компонент Button с меткой "Синхронизация". Когда пользователь нажимает кнопку (объект Button), вызывается метод replaceItemAt() для замены элементов списка listBэлементами списка listA. Если список listA длиннее спискаlistB, вызывается метод addItem() для добавления дополнительных элементов в  listB. Если список listB длиннее спискаlistA, вызывается метод removeItemAt() для удаления лишних элементов из   listB.

// Requires the List and Button components to be in the library

import fl.controls.List; import fl.controls.Button; import flash.events.Event; import fl.data.DataProvider;

var listA:List = new List();

var listB:List = new List();

var syncButton:Button = new Button();

syncButton.label = "Sync";

var itemsA:Array = [

{label:"David"},

{label:"Colleen"},

{label:"Sharon"},

{label:"Ronnie"},

{label:"James"},

];

var itemsB:Array = [

{label:"Roger"},

{label:"Carolyn"},

{label:"Darrell"},

{label:"Rebecca"},

{label:"Natalie"},

{label:"Mitchell"},

];

listA.dataProvider = new DataProvider(itemsA);

listB.dataProvider = new DataProvider(itemsB);

addChild(listA); addChild(listB); addChild(syncButton);

listA.move(100, 100); listB.move(250, 100); syncButton.move(175, 220);

syncButton.addEventListener(MouseEvent.CLICK, syncHandler);

function syncHandler(event:MouseEvent):void {

var i:uint = 0;

if(listA.length > listB.length) { //if listA is longer, add items to B

while(i < listB.length) {

listB.dataProvider.replaceItemAt(listA.dataProvider.getItemAt(i), i);

++i;

}

while(i < listA.length) {

listB.dataProvider.addItem(listA.dataProvider.getItemAt(i++));

}

} else if(listA.length == listB.length) { //if listA and listB are equal length while(i < listB.length) {

listB.dataProvider.replaceItemAt(listA.dataProvider.getItemAt(i), i);

++i;

}

} else {       //if listB is longer, remove extra items from B

while(i < listA.length) {

listB.dataProvider.replaceItemAt(listA.dataProvider.getItemAt(i), i);

++i;

}

while(i < listB.length) {

listB.dataProvider.removeItemAt(i++);

}

}

}

Объект DataProvider можно также объединять с другим и сортировать с помощью методов merge(), sort() и sortOn(). В следующем примере два экземпляра DataGrid (aDg и bDg) заполняются данными из частичных списков игроков двух футбольных команд. Также добавляется компонент Button с меткой "Объединить", и когда пользователь нажимает на кнопку, обработчик события (mrgHandler) объединяет список объекта bDg со списком объекта aDg и сортирует полученный экземпляр DataGrid по столбцу "Имя".

import fl.data.DataProvider; import fl.controls.DataGrid; import fl.controls.Button;

var aDg:DataGrid = new DataGrid(); var bDg:DataGrid = new DataGrid(); var mrgButton:Button = new Button(); addChild(aDg);

addChild(bDg); addChild(mrgButton); bldRosterGrid(aDg); bldRosterGrid(bDg);

var aRoster:Array = new Array(); var bRoster:Array = new Array(); aRoster = [

{Name:"Wilma Carter", Bats:"R", Throws:"R", Year:"So", Home: "Redlands, CA"},

{Name:"Sue Pennypacker", Bats:"L", Throws:"R", Year:"Fr", Home: "Athens, GA"},

{Name:"Jill Smithfield", Bats:"R", Throws:"L", Year:"Sr", Home: "Spokane, WA"},

{Name:"Shirley Goth", Bats:"R", Throws:"R", Year:"Sr", Home: "Carson, NV"}

];

bRoster = [

{Name:"Angelina Davis", Bats:"R", Throws:"R", Year:"So", Home: "Odessa, TX"},

{Name:"Maria Santiago", Bats:"L", Throws:"L", Year:"Sr", Home: "Tacoma, WA"},

{Name:"Debbie Ferguson", Bats:"R", Throws:"R", Year: "Jr", Home: "Bend, OR"}

];

aDg.dataProvider = new DataProvider(aRoster); bDg.dataProvider = new DataProvider(bRoster); aDg.move(50,50);

aDg.rowCount = aDg.length;

bDg.move(50,200); bDg.rowCount = bDg.length; mrgButton.label = "Merge"; mrgButton.move(200, 315);

mrgButton.addEventListener(MouseEvent.CLICK, mrgHandler);

function bldRosterGrid(dg:DataGrid){

dg.setSize(400, 300);

dg.columns = ["Name", "Bats", "Throws", "Year", "Home"];

dg.columns[0].width = 120; dg.columns[1].width = 50; dg.columns[2].width = 50; dg.columns[3].width = 40; dg.columns[4].width = 120;

};

function mrgHandler(event:MouseEvent):void { aDg.dataProvider.merge(bDg.dataProvider); aDg.dataProvider.sortOn("Name");

}

Дополнительные сведения см. в описании класса DataProvider в Справочнике по языку ActionScript 3.0 и компонентам.

Источник: Использование компонентов ActionScript 3.0 – 2008

По теме:

  • Комментарии