每天学一点 CollectionEvent对象监听Collection类的修改

在Flex中，Collection类实现了IList接口，这个接口提供一些方法(adding,removing,updating)来修改集合中的元素。可以使用IList接口的方法和属性在ArrayCollection类, XMLList类,和标准Flex控件的dataProvider 属性上。可以使用IList的addItem(), removeItem(), 和setItemAt() 方法分别增加，删除和更新元素数据。addItemAt() and removeItemAt() methods, 和the setItemAt()方法提供第二个参数，下标位置，来指定要在集合中影响的位置。IList接口的length属性返回集合中元素的数量。


Flex的集合机制也包括描述数据改变的事件。实现了IList 或者 ICollectionView 接口的类，无论何时数据发生改变，都分发CollectionEvent类事件所有集合时间都包含类型属性值CollectionEvent.COLLECTION_CHANGE。

CollectionEvent对象有kind属性标志着集合被改变的方式。通过kind属性与CollectionEventKind的常量的对比，你可以测试集合所发生的改变。主要的常量包括ADD,REMOVE和 UPDATE。


CollectionEvent对象包含一个items属性这个属性是一个对象的数组，这个数组的类型依赖于对象分发的事件的类型。对于ADD和REMOVE时间，这个数组包含added和removed数组。对于UPDATE事件，这个items属性包含PropertyChangeEvent事件对象数组。这些对象的属性显示出改变的类型和属性改变之前和之后的值。例如，PropertyChangeEvent类的kind属性显示出属性被改变的方式；你可以测试改变的类型通过把kind属性与PropertyChangeEventKind的常量UPDATE或DELETE.


下边的例子监听DataGrid的改变事件，来创建一个概览——详细关系。在这个关系中，选择一个DataGrid中的一行后，数据会显示在几个form控件中，然后你就可以编辑数据了。（使用概览——详细关系可以使DataGrid控件具有可编辑功能）。通过IList接口的addItem(), removeItem(), and setItemAt()方法，可以对DataGrid中的数据增加，删除，修改。这个例子也监听ArrayCollection上的collectionChange时间保持对数据增删改的日志记录。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
   <mx:Script>
   	<![CDATA[
   		import mx.events.*;
   		import mx.collections.*;
   		public function collectionEventHandler(event:CollectionEvent):void 
   		{
   			switch(event.kind)
   			{
   				case CollectionEventKind.ADD:
   				 addLog("item"+event.location +"ADD");
   				 break;
   				case  CollectionEventKind.REMOVE:
   				 addLog("item"+event.location +"REMOVE");
   				 break;
   				case  CollectionEventKind.UPDATE:
   				 addLog("item"+event.location +"UPDATE");
   				 break;
   				case  CollectionEventKind.REPLACE:
   				 addLog("item"+event.location +"REPLACE");
   				 break;
   			}
   		}
            public function addLog(str:String):void 
            {
                log.text += str + "\n";
            }            
            public function addPerson():void 
            {
            	ac.addItem({first:firstInput.text,
            	            last:lastInput.text,
            	            email:emailInput.text});
            	clearInputs();
            }            
            public function removePerson():void {
            	if(dg.selectedIndex >= 0){
            		ac.removeItemAt(dg.selectedIndex);
            	}
            }
            public function updatePerson():void {
            	if(dg.selectedItem !== null)
            	{
            		ac.setItemAt({first:firstInput.text, last:lastInput.text,
                        email:emailInput.text}, dg.selectedIndex);
            	}
            }
            public function dgChangeHandler():void 
            {

                clearInputs();
                firstInput.text = dg.selectedItem.first;
                lastInput.text = dg.selectedItem.last;
                emailInput.text = dg.selectedItem.email;
            }
            public function clearInputs():void 
            {
                firstInput.text = "";
                lastInput.text = "";
                emailInput.text = "";
            }
   	]]>
   </mx:Script>
    <mx:ArrayCollection id="ac"
            collectionChange="collectionEventHandler(event)">
        <mx:source>
            <mx:Object first="Matt" last="Matthews" email="[e-mail]"/>
            <mx:Object first="Sue" last="Sanderson" email="[e-mail]"/>
            <mx:Object first="Harry" last="Harrison" email="[e-mail]"/>
        </mx:source>
    </mx:ArrayCollection>
    <mx:Panel title="Master-Detail View" width="100%">        
        <mx:DataGrid width="100%" id="dg" dataProvider="{ac}"
                change="dgChangeHandler()">
            <mx:columns>
                <mx:DataGridColumn dataField="first" headerText="First Name"/>
                <mx:DataGridColumn dataField="last" headerText="Last Name"/>
                <mx:DataGridColumn dataField="email" headerText="Email"/> 
            </mx:columns>
        </mx:DataGrid>
        <mx:Form label="test" width="100%">
           <mx:FormItem label="First Name" width="100%">
                <mx:TextInput id="firstInput" width="100%"/>
           </mx:FormItem>
           <mx:FormItem label="Last Name" width="100%">
                <mx:TextInput id="lastInput" width="100%"/>
           </mx:FormItem>
           <mx:FormItem label="Email" width="100%">
                <mx:TextInput id="emailInput" width="100%"/>
           </mx:FormItem>
        </mx:Form>    
        <mx:ControlBar horizontalAlign="center">
            <mx:Button label="Add New" click="addPerson()"/>
            <mx:Button label="Update Selected" click="updatePerson()"/>
            <mx:Button label="Remove Selected" click="removePerson()"/>
            <mx:Button label="Clear" click="clearInputs()"/>
        </mx:ControlBar>
    </mx:Panel>
    <mx:Panel title="Change log" width="100%" height="125" y="333">        
        <mx:TextArea id="log" width="100%" height="100%"/>

    </mx:Panel>  
</mx:Application>