Flex Examples » addEventListener() http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Dispatching custom events from a custom component in Flex 4 http://blog.flexexamples.com/2010/10/24/dispatching-custom-events-from-a-custom-component-in-flex-4/ http://blog.flexexamples.com/2010/10/24/dispatching-custom-events-from-a-custom-component-in-flex-4/#comments Mon, 25 Oct 2010 02:07:36 +0000 Peter deHaan http://blog.flexexamples.com/?p=3388 The following example shows how you can declare custom events in an MXML or ActionScript component in Flex 4 by specifying the [Event] metadata.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/10/24/dispatching-custom-events-from-a-custom-component-in-flex-4/ --> <s:Application name="Spark_Event_test" 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:comps="comps.*">   <fx:Script> <![CDATA[ import mx.controls.Alert;   protected function btn_panicHandler(evt:Event):void { Alert.show("Oh noes! I has an error!!1!", evt.currentTarget.label); } [...]]]> The following example shows how you can declare custom events in an MXML or ActionScript component in Flex 4 by specifying the [Event] metadata.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/24/dispatching-custom-events-from-a-custom-component-in-flex-4/ -->
<s:Application name="Spark_Event_test"
        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:comps="comps.*">
 
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
 
            protected function btn_panicHandler(evt:Event):void {
                Alert.show("Oh noes! I has an error!!1!", evt.currentTarget.label);
            }
        ]]>
    </fx:Script>
 
    <s:HGroup horizontalCenter="0" verticalCenter="0">
        <comps:PanicButtonMXML id="panicMXML"
                label="MXML"
                height="60"
                panic="btn_panicHandler(event);" />
        <comps:PanicButtonAS id="panicAS"
                label="ActionScript"
                height="60"
                panic="btn_panicHandler(event);" />
    </s:HGroup>
 
</s:Application>

The custom PanicButtonMXML component, comps/PanicButtonMXML.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/24/dispatching-custom-events-from-a-custom-component-in-flex-4/ -->
<s:Button name="PanicButtonMXML"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        chromeColor="red"
        click="doPanic(event);">
 
    <fx:Metadata>
        [Event("panic")]
    </fx:Metadata>
 
    <fx:Script>
        <![CDATA[
            public static const PANIC:String = "panic";
 
            protected function doPanic(evt:MouseEvent):void {
                dispatchEvent(new Event(PANIC));
            }
        ]]>
    </fx:Script>
 
</s:Button>

The custom PanicButtonAS component, comps/PanicButtonAS.as, is as follows:

/** http://blog.flexexamples.com/2010/10/24/dispatching-custom-events-from-a-custom-component-in-flex-4/ */
package comps {
    import flash.events.Event;
    import flash.events.MouseEvent;
    import spark.components.Button;
 
    [Event("panic")]
 
    public class PanicButtonAS extends Button {
        public static const PANIC:String = "panic";
 
        public function PanicButtonAS() {
            super();
            setStyle("chromeColor", "red");
            addEventListener(MouseEvent.CLICK, doPanic);
        }
 
        protected function doPanic(evt:MouseEvent):void {
            dispatchEvent(new Event(PANIC));
        }
    }
}

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2010/10/24/dispatching-custom-events-from-a-custom-component-in-flex-4/feed/ 3 Determining if an item is listening for a specific event http://blog.flexexamples.com/2008/08/20/determining-if-an-item-is-listening-for-a-specific-event/ http://blog.flexexamples.com/2008/08/20/determining-if-an-item-is-listening-for-a-specific-event/#comments Thu, 21 Aug 2008 05:56:33 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/20/determining-if-an-item-is-listening-for-a-specific-event/ The following example shows how you can check whether a Flex Button control is listening for a specific event (FlexEvent.BUTTON_DOWN) by using the hasEventListener() and willTrigger() methods.

According to the Flex 3 documentation for the EventDispatcher class’s hasEventListener() method (link):

The difference between hasEventListener() and willTrigger() is that hasEventListener() examines only the object [...]]]> The following example shows how you can check whether a Flex Button control is listening for a specific event (FlexEvent.BUTTON_DOWN) by using the hasEventListener() and willTrigger() methods.

According to the Flex 3 documentation for the EventDispatcher class’s hasEventListener() method (link):

The difference between hasEventListener() and willTrigger() is that hasEventListener() examines only the object to which it belongs, whereas willTrigger() examines the entire event flow for the event specified by the type parameter.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/20/determining-if-an-item-is-listening-for-a-specific-event/ -->
<mx:Application name="Button_willTrigger_buttonDown_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.FlexEvent;
            import mx.utils.StringUtil;

            private function verify_click():void {
                var listener:Boolean = btn.hasEventListener(FlexEvent.BUTTON_DOWN);
                var trigger:Boolean = btn.willTrigger(FlexEvent.BUTTON_DOWN);
                var str:String = "hasEventListener() = {0}{1}willTrigger() = {2}";
                Alert.show(StringUtil.substitute(str, listener, "\n", trigger));
            }

            private function addEventListener_click():void {
                btn.addEventListener(FlexEvent.BUTTON_DOWN, btn_buttonDown);
                verify_click();
            }

            private function removeEventListener_click():void {
                btn.removeEventListener(FlexEvent.BUTTON_DOWN, btn_buttonDown);
                verify_click();
            }

            private function btn_buttonDown(evt:FlexEvent):void {
                Alert.show(evt.type);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Verify listeners"
                click="verify_click();" />

        <mx:Spacer width="100%" />

        <mx:Button label="addEventListener()"
                click="addEventListener_click();" />
        <mx:Button label="removeEventListener()"
                click="removeEventListener_click();" />
    </mx:ApplicationControlBar>

    <mx:Button id="btn" label="Button" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/08/20/determining-if-an-item-is-listening-for-a-specific-event/feed/ 0