Watch for Changes in an ArrayCollection

ArrayCollection is one of the most beautiful aspects of flex which makes it what it is. When dealing with ArrayCollections, one may want to have some kind of a callback when the items are changed.

This is how you can do it.

The magic lies in  flash.events.Event.CollectionEvent. To detect a change just add a listener to the CollectionEvent.COLLECTION_CHANGE on the arrayCollection.

Even if your array collection is not bindable, this is a sure shot way to get notified of changes made to the array collection.

NOTE:The event will be triggered only when you add or delete items from the array collection and not when it is re assigned or re initialized  and not when you change the values of item within.

 

Here is the example:

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    creationComplete="setUpListeners()"
     xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.CollectionEvent;
            import mx.collections.ArrayCollection;
            private var testAC:ArrayCollection = new ArrayCollection();
           
            private function setUpListeners():void {
                testAC.addEventListener(CollectionEvent.COLLECTION_CHANGE,showChange);
            }
            private function changeArrayCollection():void{               
                var obj:Object = new Object();
                obj.name=nameInput.text;
                obj.age=ageInput.text;
                testAC.addItem(obj);
                //var temp:ArrayCollection = new ArrayCollection();
                //temp.addItem(new Object());               
                //testAC=temp; Will not trigger!
                //Note:testAC=new ArrayCollection(); Will not trigger!
               
            }
            private function showChange(eve:CollectionEvent):void {
                Alert.show("Collection Changed.Operation was of type->"+ eve.kind
                + "at location-> " + eve.location);
               
            }
        ]]>
    </mx:Script>   
    <mx:HBox width="100%">
        <mx:Form>
            <mx:FormItem label="name">
                <mx:TextInput id="nameInput" width="100">
                   
                </mx:TextInput>               
            </mx:FormItem>
            <mx:FormItem label="age">
                <mx:TextInput id="ageInput" width="100">
                   
                </mx:TextInput>               
            </mx:FormItem>
            <mx:FormItem>
                <mx:Button label="change" click="changeArrayCollection()">
                   
                </mx:Button>
            </mx:FormItem>
        </mx:Form>
       
    </mx:HBox>
</mx:Application>
 

Hope it helps!!