5/12/11

Flex Custom Components and Custom Events in action

 Hi All ,
I would like to share few custom components and custom events and overriding a existing components classes in a simple way.

Following is the mxml application which makes use of the custom components and events.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.*">
    <ns1:MyButton x="310" y="97" width="104" height="44" label="My Button" enableChanged="testMyEvent(event);" />
   
    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;
            import mx.controls.Label;
            import com.MyDataEvent;
            import com.TestData;
            import mx.controls.Alert;
            import com.MyEvent;
           
           
            private function testMyEvent(e:MyEvent):void{
                //Alert.show("inside my event");
                var dc:TestData=new TestData();
                dc.testString="test label";
                dc.text=dc.testString;
           
                mycan.addChild(dc);
                gotoMethod();
               
            }
            private function gotoMethod():void{
                var c:comp=new comp();
                c.addEventListener("listen",listenSuccess);
                PopUpManager.addPopUp(c,this,false);
                PopUpManager.centerPopUp(c);
                /*
            dispatchEvent(new MyDataEvent("listen","Hello from raghu"));   
            var l:Label=new Label();
            l.x="60";
            l.y="100";
            mycan.addChild(l);*/
       
            }
            private function listenSuccess(e:MyDataEvent):void{
                Alert.show(e.myData);
            }
        ]]>
    </mx:Script>
    <mx:Canvas id="mycan" backgroundColor="#ffffff" x="320" y="233" width="200" height="200">
        <mx:Button x="39" y="133" label="Button" click="gotoMethod();"/>
    </mx:Canvas>
   
   
</mx:Application>

Following are the custom components and custom events.

comp.mxml ::::  

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
    <mx:Button x="167" y="54" label="Button" click="dis()"/>
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.managers.PopUpManager;
            import com.MyDataEvent;
            private function dis():void{
                try{
                dispatchEvent(new MyDataEvent("listen","Hello from raghu"));   
                PopUpManager.removePopUp(this);}
                catch(e:Error){
                    Alert.show(e.message);
                }
            }
        ]]>
    </mx:Script>
</mx:Canvas>



TestData.as ::::

package com
{
    import mx.controls.Label;

    public dynamic class TestData extends Label
    {
        public function TestData()
        {
            super();
        }
       
    }
}

MyEvent.as ::::

package com
{
    import flash.events.Event;

    public class MyEvent extends Event
    {
        public function MyEvent(type:String,isEnabled:Boolean=false)
        {
            super(type);
            this.isEnabled = isEnabled;
        }
        // Define static constant.
        public static const ENABLE_CHANGED:String = "enableChanged";

        // Define a public variable to hold the state of the enable property.
        public var isEnabled:Boolean;

        // Override the inherited clone() method.
        override public function clone():Event {
            return new MyEvent(type, isEnabled);
        }
    }
}

MyButton.as ::::

package com
{
    import flash.events.Event;
    import flash.events.MouseEvent;

    import mx.controls.Button;

    [Event(name="enableChanged", type="com.MyEvent")]
    public class MyButton extends Button
    {
        public function MyButton()
        {
            super();
            addEventListener(MouseEvent.CLICK, dispatchMyEvent);


            addEventListener(MyEvent.ENABLE_CHANGED, enableChanged1);
        }

        private function dispatchMyEvent(e:Event):void
        {
            dispatchEvent(new MyEvent("enableChanged"));
        }

        private function enableChanged1(e:Event):void
        {
            //dispatchEvent(new MyEvent("enableChanged"));
        }

    }
}

MyDataEvent.as ::::

package com
{
    import flash.events.Event;

    public dynamic class MyDataEvent extends Event
    {
        public function MyDataEvent(type:String, data:String="")
        {
            super(type, data);
            myData=data;
        }
        public var myData:String="";

        override public function clone():Event
        {
            return new MyDataEvent(type, myData);
        }

    }
}








No comments:

Post a Comment

Popular Posts