Yet another Flex custom events in components question

Question

I can't seem to get one of the most basic uses of events working in Flex 4. I've followed multiple tutorials and looked everywhere. From what I can tell, I'm doing everything right, so there must be some stupid mistake somewhere.

I have a main application file that contains a button. On clicking the button, it fires a custom event which I want my listener in my child component to catch. The event IS firing. The child component event listener is NOT catching that event. No clue why. The custom event is copy-pasted from Adobe's tutorial (minus the custom namespace and comments).

Main Application

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       applicationComplete="init()" xmlns:local="*">
    <fx:Metadata>
        [Event(name="enableChanged", type="EnableChangeEvent")]
    </fx:Metadata>

    <fx:Script>
        <![CDATA[
            import EnableChangeEvent;
            import TestComponent;

            private function doDispatchEvent(event:MouseEvent):void {
                if(dispatchEvent(new EnableChangeEvent(EnableChangeEvent.ENABLE_CHANGED, true)))
                {
                    statusLabel.text = "Event was dispatched";
                }
            }

            public function init():void {
                myButton.addEventListener(MouseEvent.CLICK, doDispatchEvent);
            }
        ]]>
    </fx:Script>

    <s:Button x="95" y="83" label="Button" id="myButton" />
    <s:Label x="230" y="83" text="" id="statusLabel" />
    <local:TestComponent x="95" y="150" width="300" height="400" />
</s:WindowedApplication>

Child Component (Test)

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"
         width="100%" height="100%"
         initialize="init();">

    <fx:Script>
        <![CDATA[
            import EnableChangeEvent;

            private function doFinalAction(event:EnableChangeEvent):void {
                myLabel.text = "Custom Event Recieved";
            }

            private function init():void {
                addEventListener(EnableChangeEvent.ENABLE_CHANGED, doFinalAction);
            }
        ]]>
    </fx:Script>

    <s:Label width="300" height="50" text="Should change on click" id="myLabel" />
</s:Group>

Custom Event (from Adobe)

package {
    import flash.events.Event;

    public class EnableChangeEvent extends Event
    {
        public function EnableChangeEvent(type:String, isEnabled:Boolean=false) {
            super(type);
            this.isEnabled = isEnabled;
        }

        public static const ENABLE_CHANGED:String = "enableChanged";
        public var isEnabled:Boolean;

        override public function clone():Event {
            return new EnableChangeEvent(type, isEnabled);
        }
    }
}

Answer 1

@Taurayi is correct, but to get you current code working with just one change, edit the init of Test Component to look like the following:

private function init():void 
{ 
     FlexGlobals.topLevelApplication.addEventListener(EnableChangeEvent.ENABLE_CHANGED, doFinalAction);
}

Answer 2

Timofei Davydik's answer it correct. Since the Application object dispatches the event, if you want your TestComponent object to catch it, you have to add a listener to a reference of the Application object from within your TestComponent. You can use the TestComponent object's inherited property "parentApplication" to get a reference to the Application object`.

Change the following code in TestComponent.mxml:

private function init():void 
{     
    this.parentApplication.addEventListener(EnableChangeEvent.ENABLE_CHANGED, doFinalAction);  

}// end function 

[UPDATE]

Personally I feel like your going about using events the wrong way, so I made a similar flex application to demonstrate how to use events in flex.

Main.mxml

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

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       xmlns:components="components.*"
                       xmlns:events="events.*"
                       applicationComplete="init()">

    <fx:Script>
        <![CDATA[

            import events.EnableChangeEvent;

            public function init():void
            {     
                label1.text = "Application Complete!";

            }// end function

            private function onTestButtonEnableChanged(e:EnableChangeEvent):void
            {                     
                label2.text = "Enabled = " + e.isEnabled;   

            }// end function

        ]]>
    </fx:Script>

    <s:layout>
        <s:VerticalLayout horizontalAlign="center" paddingTop="50" />
    </s:layout>

    <components:TestButton id="testButton" label="CLICK!" enableChanged="onTestButtonEnableChanged(event)"  />
    <s:Label id="label1"/> 
    <s:Label id="label2"/>

</s:WindowedApplication>

TestButton.mxml

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

<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/mx"
          click="onClick()">

    <fx:Metadata>
        [Event(name="enableChanged", type="events.EnableChangeEvent")]
    </fx:Metadata>

    <fx:Script>

        <![CDATA[

            import events.EnableChangeEvent

            private var isEnabled:Boolean;

            private function onClick():void
            {
                isEnabled = !isEnabled;

                dispatchEvent(new EnableChangeEvent(EnableChangeEvent.ENABLE_CHANGED, isEnabled));

            }// end function

        ]]>

    </fx:Script>

</s:Button>

The main difference between the applications is that the Button object, in this case the TestButton object, dispatches the EnableChangeEvent event when clicked. While dispatching the event we can parse the boolean value for the _isEnabled property of TestButton to the event. Before, the value is inverted using the line isEnabled = !isEnabled. Now we can make use of handling the event using the mxml declaration of the TestButton object with the xml attribute enableChanged.

Also instead of following tutorials you might want to try a book like the one i'm reading. It's called "Adobe Flash Builder 4 and Flex 4 Bible" by David Gassner which you can get as a paperback book or a book for your kindle.

Answer 3

Your application object dispatches the custom event. Why do you expect your group to "catch" this event? It won't. Custom events have neither capturing nor bubbling phase. So, only listeners added to your application object will listen to this event.