Collage FX Studio
PhotoMagic Studio
Photo Card Workshop
Magic Animator

Flex ArrayCollection objects automatic monitoring

A powerful feature of an ArrayCollection class (and similar collections) is automatic monitoring of the objects inside the collection, here is a sample code shows how  to detect when a Flex ArrayCollection has changed (items added, removed, updated) by listening for the collectionChange event.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="
vertical"
verticalAlign="
middle"
backgroundColor="
white" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ import mx.utils.ObjectUtil; import mx.controls.dataGridClasses.DataGridColumn; import mx.events.CollectionEvent; private function arrColl_collectionChange(evt:CollectionEvent):void { callLater(addTheItem, [evt]); } private function arrCollAddItem():void { arrColl.addItem({data:new Date()}); } private function addTheItem(evt:Event):void { eventsArrColl.addItem(evt); } private function arrCollRemoveItem():void { if (arrColl.length > 0) { arrColl.removeItemAt(0); } } private function dataGridColumn_labelFunc(item:Object, col:DataGridColumn):String { return ObjectUtil.toString(item[col.dataField]); } ]]> </mx:Script> <mx:ArrayCollection id="eventsArrColl" /> <mx:ArrayCollection id="arrColl"
collectionChange="
arrColl_collectionChange(event);" /> <mx:Model id="columnModel"> <columns>
<bubbles>{
bubblesCheckBox.selected}</bubbles>
<cancelable>{
cancelableCheckBox.selected}</cancelable>
<currentTarget>{
currentTargetCheckBox.selected}</currentTarget>
<eventPhase>{
eventPhaseCheckBox.selected}</eventPhase>
<items>{
itemsCheckBox.selected}</items>
<kind>{
kindCheckBox.selected}</kind>
<location>{
locationCheckBox.selected}</location>
<oldLocation>{
oldLocationCheckBox.selected}</oldLocation>
<target>{
targetCheckBox.selected}</target>
<type>{
typeCheckBox.selected}</type>
</columns>
</mx:Model> <mx:ApplicationControlBar dock="true"> <mx:Button label="Add item to ArrayCollection"
emphasized="
true"
click="
arrCollAddItem();" /> <mx:Button label="Remove item"
click="
arrCollRemoveItem();" /> <mx:Button label="Refresh items"
click="
arrColl.refresh();" /> <mx:Spacer width="100%" /> <mx:PopUpButton label="Toggle DataGrid columns"
openAlways="
true"> <mx:popUp> <mx:Form styleName="plain"
backgroundColor="
white"> <mx:FormItem label="bubbles:"> <mx:CheckBox id="bubblesCheckBox"
selected="
true" /> </mx:FormItem> <mx:FormItem label="cancelable:"> <mx:CheckBox id="cancelableCheckBox"
selected="
true" /> </mx:FormItem> <mx:FormItem label="currentTarget:"> <mx:CheckBox id="currentTargetCheckBox"
selected="
true" /> </mx:FormItem> <mx:FormItem label="eventPhase:"> <mx:CheckBox id="eventPhaseCheckBox"
selected="
true" /> </mx:FormItem> <mx:FormItem label="items:"> <mx:CheckBox id="itemsCheckBox"
selected="
true" /> </mx:FormItem> <mx:FormItem label="kind:"> <mx:CheckBox id="kindCheckBox"
selected="
true" /> </mx:FormItem> <mx:FormItem label="location:"> <mx:CheckBox id="locationCheckBox"
selected="
true" /> </mx:FormItem> <mx:FormItem label="oldLocation:"> <mx:CheckBox id="oldLocationCheckBox"
selected="
true" /> </mx:FormItem> <mx:FormItem label="target:"> <mx:CheckBox id="targetCheckBox"
selected="
true" /> </mx:FormItem> <mx:FormItem label="type:"> <mx:CheckBox id="typeCheckBox"
selected="
true" /> </mx:FormItem> </mx:Form> </mx:popUp> </mx:PopUpButton> </mx:ApplicationControlBar> <mx:VDividedBox width="100%" height="100%"> <mx:List id="list"
dataProvider="
{arrColl}"
labelField="
data"
width="
50%"
rowCount="
5" /> <mx:DataGrid id="dataGrid"
dataProvider="
{eventsArrColl}"
itemRenderer="
mx.controls.Label"
width="
100%"
height="
100%"> <mx:columns> <mx:DataGridColumn dataField="bubbles"
visible="
{columnModel.bubbles}" /> <mx:DataGridColumn dataField="cancelable"
visible="
{columnModel.cancelable}" /> <mx:DataGridColumn dataField="currentTarget"
visible="
{columnModel.currentTarget}" /> <mx:DataGridColumn dataField="eventPhase"
visible="
{columnModel.eventPhase}" /> <mx:DataGridColumn dataField="items"
labelFunction="
dataGridColumn_labelFunc"
visible="
{columnModel.items}" /> <mx:DataGridColumn dataField="kind"
visible="
{columnModel.kind}" /> <mx:DataGridColumn dataField="location"
visible="
{columnModel.location}" /> <mx:DataGridColumn dataField="oldLocation"
visible="
{columnModel.oldLocation}" /> <mx:DataGridColumn dataField="target"
visible="
{columnModel.target}" /> <mx:DataGridColumn dataField="type"
visible="
{columnModel.type}" /> </mx:columns> </mx:DataGrid> </mx:VDividedBox> </mx:Application>



Comment: 0 | Read times: -
Announce commentary
Your name
Content
Validation code Code