Flex Custom Event Example
Line Break
Author: Arjan (47 Articles) - Author Website
Arjan is a SAP Consultant specialized in ABAP and Front End development techniques like Web Dynpro, Adobe Interactive Forms, Flex and AIR. In his free time he likes to create examples for Flex-Blog and other applications using Flex, AIR and PHP. Other hobbies are movies and music. He is also the co-owner of Flex-Blog.com.
Events are a real powerful tool inside every programming language that has them. In actionscript, there are a lot of standard events that you are probably already using (e.g. the click event). But what if you want to do something custom with an event inside your flex application? Let’s say you have created a custom component and you want to dispatch an event from that component with some additional data? Check out this example to see how you can achieve this.
Although I may not make any sense, let’s say i want to do the following:
- Have a component that gets data when a button is pressed
- Have an Application that’s using this component and reacts when the data is loaded inside the component mentioned above
I’ll need three things for this:
- A custom event that transports the data and lets my application know that the data is loaded
- The component
- The Application
Step 1: Create the custom Event
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | package com.flexblog.examples.events { import flash.events.Event; import mx.collections.ArrayCollection; public class CustomEvent extends Event { public static var DATA_LOADED:String = "dataLoaded"; private var _data:ArrayCollection; public function CustomEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false, data:ArrayCollection=null) { super(type, bubbles, cancelable); _data = data; } override public function clone():Event { return new CustomEvent(type, bubbles, cancelable, data); } public function get data():ArrayCollection { return _data; } } } |
Step 2: Create the component that gets some data and dispatches this event
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="300" height="300" backgroundAlpha="0"> <mx:Metadata> [Event(type="com.flexblog.examples.events.CustomEvent", name="dataLoaded")] </mx:Metadata> <mx:Script> <![CDATA[ import com.flexblog.examples.events.CustomEvent; import mx.collections.ArrayCollection; private function handleClick():void { var data:ArrayCollection = getData(); dispatchEvent( new CustomEvent( CustomEvent.DATA_LOADED, false, false, data ) ); } private function getData():ArrayCollection { var obj:Object; var dataCollection:ArrayCollection = new ArrayCollection(); for( var i:int=0; i < 10; i++ ) { obj = new Object(); obj.index = i; obj.value = Math.round(Math.random() * 100); dataCollection.addItem(obj); } return dataCollection; } ]]> </mx:Script> <mx:VBox width="100%" height="100%" verticalAlign="middle" horizontalAlign="center"> <mx:Button label="Get Data and Dispatch Event!" click="handleClick()"/> </mx:VBox> </mx:Canvas> |
Step 3: Create the application that reacts to the event and does something with the data:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:components="com.flexblog.examples.components.*"> <mx:Script> <![CDATA[ import com.flexblog.examples.events.CustomEvent; private function handleDataLoaded(event:CustomEvent):void { dg.dataProvider=event.data; } ]]> </mx:Script> <mx:VBox width="100%" height="100%" backgroundColor="#FFFFFF" horizontalAlign="center"> <components:ExampleComponent width="300" height="100" dataLoaded="handleDataLoaded(event)"/> <mx:DataGrid id="dg" width="300" height="200" visible="{dg.dataProvider != null}"> <mx:columns> <mx:DataGridColumn dataField="index" headerText="Index"/> <mx:DataGridColumn dataField="value" headerText="Value"/> </mx:columns> </mx:DataGrid> </mx:VBox> </mx:Application> |
The result (use view source to see complete source code):
Related posts:
- Set custom cursor using the CursorManager
- SWIZ Framework in Flex 4 Example: Part II
- How to make a magnetic button in Flex 4
- Style AdvancedDataGrid depending on data example
Written by · Filed Under Examples
Was this post useful to you?
Please rate this post, follow us @ twitter, or link to this page from your website!
(6 votes, average: 4.67 out of 5)
Loading ...Comments
4 Responses to “Flex Custom Event Example”
It is usefull to me
Can you post, if you have it, the ANT build.xml file to correctly build the whole project? Thank you very much!
Sorry, the example was done in Flash Builder 3…no ANT build.xml file needed for that. Sorry i can’t help you.
Regards,
Arjan
Good example. Useful for mvc type implementation.
Could you make the event even more abstract by using an Object type for the _data rather than an ArrayCollection? You could then use this event for any data type and cast it when needed