Customiza Event for Custom Component

To design a loosely coupled component to handle the dispatching of an event that con- tains the return data, each MXML custom component dispatches events that can be cus- tomized in three simple steps: 1.Using the [Event] metadata tag 2.Creating an event object 3.Dispatching the event and creating the function to handle the event

-In ActionScript, however, it is sufficient to define the metadata in the ActionScript class (the [Event] metadata is normally declared above the declaration of the class): [Event(name="changeBlog", type="flash.events.Event")] public class CustDG extends DataGrid { // class definition }

---chapter2.mxml Page---

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

	xmlns:comp = "*">



<mx:Script>

	<![CDATA[

		import mx.collections.ArrayCollection;

		private var myData:ArrayCollection=new ArrayCollection([{Values:2000},{Values:3000},{Values:4000},{Values:4000},{Values:3000},{Values:2000},{Values:6000}]);

		private function changeBlogHandler(event:Event):void{

		myLabel2.text += "Event fired by Datagrid:"+ event.type + "/n" ;

		}

	]]>

</mx:Script>

<comp:Chapter_2_Sol_7 id="custDG" x="38" y="28" list="{myData}" changeBlog="changeBlogHandler(event)"/>

	<mx:Label x="100" y="258" text="Label" id="myLabel2"/>

</mx:Application>

---Chapter_2_Sol_7 Page---

<?xml version="1.0" encoding="utf-8"?>

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">

<mx:Metadata>

	[Event(name="changeBlog",type="flash.events.Event")]

</mx:Metadata>

<mx:Script>

	<![CDATA[

		import mx.collections.ArrayCollection;

		public var list:ArrayCollection; 

		private function changeHandler():void{

		dispatchEvent(new Event("changeBlog"));

		}

	]]>

</mx:Script>

	<mx:DataGrid id="myDG" dataProvider="list" change="changeHandler()">

		<mx:columns>

			<mx:DataGridColumn headerText="Column 1" dataField="col1"/>

			<mx:DataGridColumn headerText="Column 2" dataField="col2"/>

			<mx:DataGridColumn headerText="Column 3" dataField="col3"/>

		</mx:columns>

	</mx:DataGrid>

	

</mx:VBox>