CollectionEvent

DataProvoider를 자유롭게 사용 할 수 있는 CollectionEvent
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
     viewSourceURL="src/DataProviderModifyingAndEvents/index.html"
    width="525" height="530"

>
    <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 = "";
            }

       
        ]]>
    </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: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>
       
        <!-- Form for data to add or change in the ArrayCollection. -->
        <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">
            <!-- 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:ControlBar>

    </mx:Panel>

    <!-- The application displays event information here -->
    <mx:Panel title="Change log" width="100%" height="125">       
        <mx:TextArea id="log" width="100%" height="100%"/>

    </mx:Panel>   

</mx:Application>