Search:
  • Home
  • Examples
    • Thumb

      Flex Examples

      Check out our Flex Examples!

    • Thumb

      Flash Builder Examples

      Check out our Flash Builder Examples!

    • Thumb

      AIR Examples

      Check out our AIR Examples!

    Adobe® Flex, Adobe® Flash Builder and Adobe® AIR are registered trademarks of Adobe Systems.
  • Components
    • Thumb

      WP Flex Contact Form

      Check out our WP Flex Contact Form!

    • Thumb

      Flash CountDown Plugin

      Check out our Flash CountDown Plugin!

    This is an overview of all our Flash/Flex based Components.
  • Jobs
  • Guest Poster
  • Forum
  • Contact Us
Subscribe to Flex BlogSubscribe
  • Examples
Browse > Home / Examples / Flex Custom Event Example

Flex Custom Event Example

29 October 2009

Line Break

Author: Arjan (34 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:

  1. A custom event that transports the data and lets my application know that the data is loaded
  2. The component
  3. 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:

  1. Set custom cursor using the CursorManager
  2. How to make a magnetic button in Flex 4
  3. Style AdvancedDataGrid depending on data example
  4. Progressbar in Datagrid Example

Written by Arjan · Filed Under Examples 

Was this post useful to you?

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)
Loading ... Loading ...

Comments

3 Responses to “Flex Custom Event Example”

  1. suresh on November 10th, 2009 9:44 am

    It is usefull to me

  2. AGSASM on July 20th, 2010 8:01 am

    Can you post, if you have it, the ANT build.xml file to correctly build the whole project? Thank you very much!

  3. Arjan on July 20th, 2010 10:04 pm

    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

Get Adobe Flash player

  • Sponsors

  • Popular Tags

    • AdvancedDataGrid
    • AIR
    • ArrayCollection
    • baseColor
    • Button
    • ButtonBar
    • ComboBox
    • CursorManager
    • DataGrid
    • Effects
    • File
    • Flash Builder
    • Flash Builder 4
    • Flashvars
    • Flex 4
    • HSlider
    • Icon
    • Image
    • itemRenderer
    • LinkBar
    • MouseWheel
    • PHP
    • ProgressBar
    • Repeater
    • Style
    • Timer
    • Tree
    • Twitter
    • ViewStack
    • VSlider
  • Flex Blog Readers

  • Testing..

  • Flex Jobs (from Flex Jobs.org)

    Your Job here? Post your job @ Flex Jobs.org

    Advertisement

  • Recent Posts

    • How to make a magnetic button in Flex 4
    • Using ASDoc as an External Tool in Flash Builder 4
    • Flex Encryption (MD5, SHA1, SHA224, SHA256, HMAC)
    • The SWIZ framework for Flex 3 / Flex 4: Easy, Light and Very Powerfull
    • Call Javascript function from Flex / Flash Builder (AS3)
    • Flex FlashVars in AS3 Example
    • Data Dependant Tree Icon with Tree in AdvancedDataGrid with iconFunction
    • WordPress Flash / Flex Comments Form
    • Adobe AIR SQLite Example
    • Flex 4 Effect Example: Sliding text using the Move Effect
  • Categories

    • Examples
    • Guest Poster
  • Archives

    • June 2010
    • May 2010
    • April 2010
    • March 2010
    • February 2010
    • January 2010
    • December 2009
    • November 2009
    • October 2009
    • March 2009
    • February 2009
  • Blogroll

    • Adobe Flex Jobs
    • NL for Business
  • Meta

    • Register
    • Log in
    • WordPress
    • XHTML

Copyright © 2010 Flex Blog · AdobeĀ® and AdobeĀ® Flex are registered trademarks of Adobe Systems.

WordPress Adobe Flex Adobe Flash Builder Adobe AIR Creative Commons License

  • Popular Posts

    • Progressbar in Datagrid Example 6 votes, average: 5.00 out of 56 votes, average: 5.00 out of 56 votes, average: 5.00 out of 56 votes, average: 5.00 out of 56 votes, average: 5.00 out of 5 (5.00 out of 5)
    • List Directory with AIR in Flex 4 6 votes, average: 5.00 out of 56 votes, average: 5.00 out of 56 votes, average: 5.00 out of 56 votes, average: 5.00 out of 56 votes, average: 5.00 out of 5 (5.00 out of 5)
    • Data Dependant Tree Icon with Tree in AdvancedDataGrid with iconFunction 5 votes, average: 5.00 out of 55 votes, average: 5.00 out of 55 votes, average: 5.00 out of 55 votes, average: 5.00 out of 55 votes, average: 5.00 out of 5 (5.00 out of 5)
    • Control Webpage in HTML Control in AIR 4 votes, average: 5.00 out of 54 votes, average: 5.00 out of 54 votes, average: 5.00 out of 54 votes, average: 5.00 out of 54 votes, average: 5.00 out of 5 (5.00 out of 5)
    • WordPress Flash / Flex Comments Form 4 votes, average: 5.00 out of 54 votes, average: 5.00 out of 54 votes, average: 5.00 out of 54 votes, average: 5.00 out of 54 votes, average: 5.00 out of 5 (5.00 out of 5)