Create Custom Event Using META Tag

HOW TO ADD AN EVENT TO A CUSTOM MXML COMPONENT USING EVENT META TAG

Using events is fun in MXML components is fun and easily you can specify events using Event meta tag inside the component like this:

<mx:Metadata>
    [Event(name="myevent", type="com.MyEvent")]
</mx:Metadata>

The following lines defines the myevent attribute of the component like this:

<com:FramedImage x="10" y="10"  myevent="handleMyEvent(event)" ... />

FramedImage component is a custom component which displays a framed image.

For this tutorial the following files where used:

• FramedImage.mxml – our component (extends Canvas)
• MyEvent.as – our custom event (extends Event)
• FramedImageApp.mxml – main application that uses FramedImage component

FramedImageApp.mxml is loading an image using FramedImage.mxml by specifying an URL. Our component is loading the image from that URL and displays it and when the loading is completed an event is dispatch to let us know that the image is fully loaded. The component can be extended to dispatch even more events like: progress, start loading, etc.

You can go straight to the code section to study each file, but before seeing the code animportant thing you must know in order to succeed and be able to catch the event outside the component.

The string specified in the name attribute of the event meta tag must be the same with the string specified in the new event dispatched and the type specified in the type attribute must match the type of the event object dispatched.

To be even more clear take a look at the next image.

MyEvent.MY_EVENT = “myevent” is defined in MyEvent.as class as a public static constant.

Now enjoy the code…

FramedImage.mxml – the component

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
    horizontalScrollPolicy="off" verticalScrollPolicy="off">
    <mx:Canvas id="frm" 
        width="{this.width}" height="{this.height}"
        backgroundColor="0xFFFFFF" backgroundAlpha="0.4"
        cornerRadius="10" borderStyle="solid">
        <mx:Image id="img" 
            horizontalCenter="0" horizontalAlign="center"
            verticalCenter="0" verticalAlign="middle"
            source="{_imgSrc}"
            complete="handleImageComplete(event)"
            maxWidth="{this.width-20}" 
            maxHeight="{this.height-20}"/>
    </mx:Canvas>
 
    <!-- we specify "myevent" attribute to be triggered the 
         string in name attribute must match the string 
         specified in "new MyEvent()" and to be more precise
         MyEvent.MY_EVENT should be equal with "myevent" -->
    <mx:Metadata>
        [Event(name="myevent", type="com.MyEvent")]
    </mx:Metadata>
 
    <mx:Script>
        <![CDATA[
 
        // our loaded image
        [Bindable]
        private var _imgSrc:String;
 
        // setter to be able to set the image 
        // from outside the component
        public function set source(s:String):void
        {
            _imgSrc = s;
        }
 
        // getter
        public function get source():String
        {
            return _imgSrc;
        }
 
        // event handler triggered by the image object
        // when the image is fully loaded
        public function handleImageComplete(event:Event):void
        {
            // we dispatch our new custom event
            // it is important:
            // 1) that MyEvent.MY_EVENT should
            //    match the string "myevent" specified in
            //    the name attribute of the event meta tag             
            // 2) that the type of the event object dispatched
            //    further must match the one defined in event
            //    meta tag
            dispatchEvent(new MyEvent(MyEvent.MY_EVENT));
        }
 
        ]]>
    </mx:Script>
</mx:Canvas>

MyEvent.as – custom event

package com
{
    import flash.events.Event;
 
    // our custom event extends flash.events.Event
    public class MyEvent extends Event
    {
        // the string must be the same with the one specified
        // in the Event metatag in name attribute
        public static const MY_EVENT:String = "myevent";
 
        // constructor
        public function MyEvent(type:String):void
        {
            super(type);
        }
    }
}

FramedImageApp.mxml – main application

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" xmlns:com="com.*" width="270" height="450">
    <com:FramedImage id="frmImg" x="10" y="10" 
        width="250" height="250"
        myevent="handleMyEvent(event)"
        source="{imgUrl.text}"/>
    <mx:Label text="Image to load (URL):" x="10" y="268"/>
    <mx:TextInput id="imgUrl" width="250" x="10" y="284"
        text="http://www.flexer.info/wp-content/uploads/2008/05/imgs/fxr-4_1280x1024.png"/>
    <mx:Label text="Events:" x="10" y="314"/>
    <mx:TextArea id="dbgTxt" width="250" height="110" x="10" y="331"/>
    <mx:Script>
        <![CDATA[
            import com.MyEvent;
 
            private function handleMyEvent(event:MyEvent):void
            {
                // split the URL
                var tmpArr:Array = new Array();
                tmpArr = imgUrl.text.split("/");
                // add text with filename
                dbgTxt.text += "image " + tmpArr[tmpArr.length-1] + " loaded\n";
            }
        ]]>
    </mx:Script>
</mx:Application>

Now lets see the component in action (the event will be added to the events text area)…


Thanks for Visiting.................