Flex Examples » event 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 Listening for the link event in a Flex Label control http://blog.flexexamples.com/2008/01/26/listening-for-the-link-event-in-a-flex-label-control/ http://blog.flexexamples.com/2008/01/26/listening-for-the-link-event-in-a-flex-label-control/#comments Sat, 26 Jan 2008 08:49:21 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/26/listening-for-the-link-event-in-a-flex-label-control/ The following example shows how you can use the link event with the Label control in Flex to handle hyperlinks embedded within a string of text. By using the “event:” prefix in the href property of an anchor (<a />) tag, you can handle links within your Flex application, use the ExternalInterface API to call [...]]]> The following example shows how you can use the link event with the Label control in Flex to handle hyperlinks embedded within a string of text. By using the “event:” prefix in the href property of an anchor (<a />) tag, you can handle links within your Flex application, use the ExternalInterface API to call JavaScript from Flex, or do pretty much whatever else you want.

Full code after the jump.

The Label control must have the selectable property set to true to generate the link event.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/26/listening-for-the-link-event-in-a-flex-label-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private function lbl_initialize():void {
                lbl.htmlText = "For more information on Flex, see <u><a href='event:flex.org'>http://www.flex.org/</a></u>.";            }

            private function lbl_link(evt:TextEvent):void {
                Alert.show(evt.toString(), evt.text);

                switch (evt.text) {
                    case "flex.org":
                        // You clicked the flex.org link.
                        break;
                }
            }
        ]]>
    </mx:Script>

    <mx:Label id="lbl"
            selectable="true"
            initialize="lbl_initialize();"
            link="lbl_link(event);" />

</mx:Application>

View source is enabled in the following example.

Another useful little tip when dealing with HTML text, is to put your HTML into an external file, and then embed it into your application using <mx:String />, as seen in the following snippet:

<mx:String id="str" source="text.html" />

<mx:Label id="lbl"
        htmlText="{str}"
        selectable="true"
        link="lbl_link(event);" />

And then your text.html file would look like the following:

<p>For more information on Flex, see <u><a href="event:flex.org">http://www.flex.org/</a></u>.</p>
 
]]> http://blog.flexexamples.com/2008/01/26/listening-for-the-link-event-in-a-flex-label-control/feed/ 6