[译] Flex Collection 事件和手动通知变化

大家知道,没有实现IEventDispatcher接口的数据项是不可监控的,而且Flash和Flex对象和其它的基本数据类型都没有实现这个接口.

因此当你修改了Array或是一DisplayObject对象的属性时，你就必须调用itemUpdated()方法来手动更新集合视图, 

这个方法将 已被修改的item对象 和 修改之前的item对象 一并作为参数.

当你必须用Array来直接作为控件的dataProvider时, 你也可以用itemUpdated()方法来手动通知collection发生了变化。

Array直接作dataProvider时, 控件会将数据封装到一个collection对象, 但是这个collection封装对象在Array数据发生改变时是不知道的，

所以必须用itemUpdated()手动通知。

注: 当你直接在一个collection中增加或删除子项时，或是通过ICollectionView, IList的方法来修改colletion时, 你完全没有必须调用itemUpdated().

大家知道,当一个类，或是一个对象的声明上加[Bindable]时，需要类（或是对象的类）实现了IEventDispatcher接口。

因为只有实现了IEventDispatcher接口才能发布事件(propertyChange事件).

当你在类的声明之上加[Bindable]时，这个类的任何属性在发生变化时，都会发布propertyChange事件;

如果你仅是在指定属性之上加[Bindable]标记时，那只有加了[Bindable] meta tag的这些属性才会发布propertyChange事件。

collection会侦听propertyChange事件.假设你有一个myCollection,这个collection的item的类有一个[Bindable] myVariable的变量,那么 myCollection.getItemAt(0).myVariable="myText" 将会触发一个propertyChange事件(假定是没有必要使用itemUpdated()的情况).

所以最常见的itemUpdate用法是: 一个不能Bindable的类，或是无法实现IEventDispatcher接口的类的数据(属性)发生变化时来用通知collection.

下面的例子展示在这样的情景时你就可以用itemUpdated()

假设你有一个你不能控制和再编辑的类:

public class ClassICantEdit {    public var field1:String;    public var field2:String;}

你还有一个ArrayCollection, 里面的item全都是 classICantEdit对象.

public var myCollection:ArrayCollection = new ArrayCollection();

你有如下一个DataGrid控件:

<mx:DataGrid dataProvider="{myCollection}"/>

当你象下面更改myCollection中的item的值时, DataGrid控件是不会自动更新的:

myCollection.getItemAt(0).field1="someOtherValue";

为更新DataGrid控件，你必须 itemUpdated()函数:

myCollection.itemUpdated(collectionOfThoseClasses.getItemAt(0));

禁止和启用自动更新

Collection还提供了enableAutoUpdate()和disableAutoUpdate()方法，这两个方法可以启用或是禁止数据发生变化时自动更新数据视图的功能。

collection的 disableAutoUpdate()方法会阻止基本数据改变事件被collection视图广播.同时还阻止，collection自身作为一个结果集被改变的事件.
当一个collection绑定为一个控件的dataProvider时, 用这个方法可以防止因collection多次变化而引起控件不必要的中间显示更新。
例如, DataGrid控件在item被选中时，就会调用disableAutoUpdate(), 当这个item不再被选中时再调用enableAutoUpdate()，

这样可以当你正在编辑一个item时，不会因为这item是在一个排序的collection中而导致在屏幕上下乱跳.
下面的代码片断显示了怎样调用disableAutoUpdate(), enableAutoUpdate()

var obj:myObject = myCollection.getItemAt(0);
myCollection.disableAutoUpdate();
obj.prop1 = 'foo';
obj.prop2 = 'bar';
myCollection.enableAutoUpdate();

例子: 在DataGrid控件中修改数据

下面的例子你可以在DataGrid控件中增加, 删除, 修改数据

<?xml version="1.0"?>
<!-- dpcontrols\ModifyDataGridData.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="500"
    height="600" >
 
    <mx:Script>
        <![CDATA[
            import mx.events.*;
            import mx.collections.*;
    
            // Add event information to a log (displayed in the TextArea).
            public function collectionEventHandler(event:CollectionEvent):void {
                switch(event.kind) {
                    case CollectionEventKind.ADD:
                        addLog("Item "+ event.location + " added");
                        break;
                    case CollectionEventKind.REMOVE:
                        addLog("Item "+ event.location + " removed");
                        break;
                    case CollectionEventKind.REPLACE:
                        addLog("Item "+ event.location + " Replaced");
                        break;
                    case CollectionEventKind.UPDATE:
                        addLog("Item updated");
                        break;
                }
            }
            // Helper function for adding information to the log.
            public function addLog(str:String):void {
                log.text += str + "\n";
            }
    
            // Add a person to the ArrayCollection.
            public function addPerson():void {
                ac.addItem({first:firstInput.text, last:lastInput.text,
                    email:emailInput.text});
                    clearInputs();
            }
    
            // Remove a person from the ArrayCollection.
            public function removePerson():void {
                // Make sure an item is selected.
                if (dg.selectedIndex >= 0) {
                    ac.removeItemAt(dg.selectedIndex);
            }
        }
    
        // Update an existing person in the ArrayCollection.
        public function updatePerson():void {
            // Make sure an item is selected.
            if (dg.selectedItem !== null) {
                ac.setItemAt({first:firstInput.text, last:lastInput.text,
                    email:emailInput.text}, dg.selectedIndex);
            }
        }
    
        // The change event listener for the DataGrid.
        // Clears the text input controls and updates them with the contents
        // of the selected item.
        public function dgChangeHandler():void {
            clearInputs();
            firstInput.text = dg.selectedItem.first;
            lastInput.text = dg.selectedItem.last;
            emailInput.text = dg.selectedItem.email;
        }
    
        // Clear the text from the input controls.
        public function clearInputs():void {
            firstInput.text = "";
            lastInput.text = "";
            emailInput.text = "";
        }
 
        // The labelFunction for the ComboBox;
        // Puts first and last names in the ComboBox.
        public function myLabelFunc(item:Object):String {
            return item.first + " " + item.last;
        }
        ]]>
    </mx:Script>
    
    <!-- The ArrayCollection used by the DataGrid and ComboBox. -->
    <mx:ArrayCollection id="ac"
            collectionChange="collectionEventHandler(event)">
        <mx:source>
            <mx:Object first="Matt" last="Matthews" email="matt@myco.com"/>
            <mx:Object first="Sue" last="Sanderson" email="sue@myco.com"/>
            <mx:Object first="Harry" last="Harrison" email="harry@myco.com"/>
        </mx:source>
    </mx:ArrayCollection>
 
    <mx:DataGrid width="450" 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>
 
    <!-- The ComboBox and DataGrid controls share an ArrayCollection as their
        data provider.
        The ComboBox control uses the labelFunction property to construct the
        labels from the dataProvider fields. -->
    <mx:ComboBox id="cb" dataProvider="{ac}" labelFunction="myLabelFunc"/>
    
    <!-- Form for data to add or change in the ArrayCollection. -->
    <mx:Form>
       <mx:FormItem label="First Name">
            <mx:TextInput id="firstInput"/>
       </mx:FormItem>
       <mx:FormItem label="Last Name">
            <mx:TextInput id="lastInput"/>
       </mx:FormItem>
       <mx:FormItem label="Email">
            <mx:TextInput id="emailInput"/>
       </mx:FormItem>
    </mx:Form>
    
    <mx:HBox>
        <!-- Buttons to initiate operations on the collection. -->
        <mx:Button label="Add New" click="addPerson()"/>
        <mx:Button label="Update Selected" click="updatePerson()"/>
        <mx:Button label="Remove Selected" click="removePerson()"/>
        <!-- Clear the text input fields. -->
        <mx:Button label="Clear" click="clearInputs()"/>
    </mx:HBox>
    
    <!-- The application displays event information here -->
    <mx:Label text="Log"/>
    <mx:TextArea id="log" width="100" height="100%"/>
</mx:Application>

Flash显示效果请到 http://livedocs.adobe.com/flex/3/html/help.html?content=about_dataproviders_5.html 文章最后部分查看.

[说明: 本文为 http://www.smithfox.com/?e=38 原创, 转载请注明原文, 谢谢]