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>