教你7步实现flex自定义Event及参数传递

 

 

 

Flex应用开发过程中如需要灵活的在不同组件（如A与B，父与子）之间响应事件，传递参数等功能时就会使用自定义事件（Event）机制,下面通过一个事例分七步,通过自定义Event和EventDispatcher两种机制实现事件交互和参数传递;
        事例描述:　有一个父亲“parentApp.mxml”有两个儿子“comBrotherA.mxml”和"comBrotherB.mxml",新年 降至，两个儿子为表孝心分别给他们老爸存入(事件)一笔过节费(事件参数),并通知老爸我存钱进去了，老爸在收到两个儿子的钱后汇总后同时告诉(事件)两 个儿子钱我已收到总数(事件参数)是多少...
    1、第一步：引入自定义注册事件参数传递扩展类(来自网络)
   view plaincopy to clipboardprint?
package myeventhelper  
{  
    //自定义注册事件参数传递扩展类  
    public class EventArgExtend  
    {  
        public function EventArgExtend()  
        {  
        }  
        public static function create(f:Function,...arg):Function //动态参数创建  
        {  
            var F:Boolean = false;  
            var _f:Function = function(e:*,..._arg)  
            {  
                _arg = arg;  
                if(!F)  
                {  
                    F = true;  
                    _arg.unshift(e);  
                }  
                f.apply(null,_arg);  
            };  
            return _f;  
        }  
        public static function toString():String  
        {  
            return "Class JEventDelegate";  
        }  
    }  
}
    package myeventhelper
    {
        //自定义注册事件参数传递扩展类
        public class EventArgExtend
        {
            public function EventArgExtend()
            {
            }
            public static function create(f:Function,...arg):Function //动态参数创建
            {
                var F:Boolean = false;
                var _f:Function = function(e:*,..._arg)
                {
                    _arg = arg;
                    if(!F)
                    {
                        F = true;
                        _arg.unshift(e);
                    }
                    f.apply(null,_arg);
                };
                return _f;
            }
            public static function toString():String
            {
                return "Class JEventDelegate";
            }
        }
    }
    2、第二步：自定义事件触发类：
view plaincopy to clipboardprint?
package myeventhelper  
{  
    import flash.events.EventDispatcher;  
     
    import mx.core.UIComponent;  
    //自定义事件触发类  
    public class MyEventDispatcher extends EventDispatcher  
    {  
        private static var _instance:MyEventDispatcher;  
        public static const EXEC_PARENT_METHOD:String="ExecParentMethod"; //执行Parent方法  
        public static function getInstance():MyEventDispatcher  
        {  
           if(_instance==null){  
              _instance=new MyEventDispatcher();  
           }  
           return _instance;  
        }  
        public var Source:UIComponent; //事件源对象  
        public var Parsms:Object; //主要用于参数传递  
    }  
}
    package myeventhelper
    {
        import flash.events.EventDispatcher;
      
        import mx.core.UIComponent;
        //自定义事件触发类
        public class MyEventDispatcher extends EventDispatcher
        {
            private static var _instance:MyEventDispatcher;
            public static const EXEC_PARENT_METHOD:String="ExecParentMethod"; //执行Parent方法
            public static function getInstance():MyEventDispatcher
            {
               if(_instance==null){
                  _instance=new MyEventDispatcher();
               }
               return _instance;
            }
            public var Source:UIComponent; //事件源对象
            public var Parsms:Object; //主要用于参数传递
        }
    }
    3、第三步：用户自定义事件类
    view plaincopy to clipboardprint?
package myeventhelper  
    {  
        import mx.events.FlexEvent;  
        //用户自定义事件类  
        public class MyExtendEvent extends FlexEvent  
        {  
            public static const EXEC_BROTHER_METHOD:String="ExecBrotherMethod";//执行兄弟方法  
             
            public var param:Object;  
            public function MyExtendEvent(o:Object,type:String, bubbles:Boolean=false, cancelable:Boolean=false)  
            {  
                super(type, bubbles, cancelable);  
                this.param = o;//也可通过这样的方式传递参数  
            }  
        }  
    }
package myeventhelper
    {
        import mx.events.FlexEvent;
        //用户自定义事件类
        public class MyExtendEvent extends FlexEvent
        {
            public static const EXEC_BROTHER_METHOD:String="ExecBrotherMethod";//执行兄弟方法
          
            public var param:Object;
            public function MyExtendEvent(o:Object,type:String, bubbles:Boolean=false, cancelable:Boolean=false)
            {
                super(type, bubbles, cancelable);
                this.param = o;//也可通过这样的方式传递参数
            }
        }
    }
    4、第四步：完成儿子A“comBrotherA.mxml”：
    view plaincopy to clipboardprint?
<?xml version="1.0" encoding="utf-8"?>
    <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml " width="222" height="170" title="组件A" creationComplete="init()">
    <mx:Script>
        <!--[CDATA[  
            import myeventhelper.MyExtendEvent;  
            import myeventhelper.MyEventDispatcher;  
            import myeventhelper.EventArgExtend;  
            private var execParent:MyEventDispatcher; //触发父亲节点事件  
            function init():void  
            {  
                execParent = MyEventDispatcher.getInstance();  
            }  
            public function onGetParentTotal(e:MyExtendEvent,...agrs):void  
            {  
                //下面两种方法都可以用来传递参数  
                //this.labTotal.text = String(agrs[0].totalValue);  
                this.labTotal.text = e.param.toString();  
            }  
            public function onParentEvent(event:Event):void  
            {  
                execParent.Parsms = txtValue.text;  
                execParent.Source = this;  
                execParent.dispatchEvent(new Event(MyEventDispatcher.EXEC_PARENT_METHOD));  
            }  
             
        ]]-->
    </mx:Script>
        <mx:Canvas height="90" width="197">
        <mx:TextInput width="92" y="10" x="85" id="txtValue"/>     
        <mx:Label x="13" y="12" text="存入："/>
        <mx:Label x="87" y="56" width="90" id="labTotal"/>
        <mx:Label x="5" y="56" text="ParentTotal:"/>
        </mx:Canvas>
        <mx:ControlBar>
            <mx:Button label="调用父方法" id="btnExecParent" click="onParentEvent(event)"/>
        </mx:ControlBar>
    </mx:Panel>
<?xml version="1.0" encoding="utf-8"?>
    <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml " width="222" height="170" title="组件A" creationComplete="init()">
    <mx:Script>
        <!--[CDATA[
            import myeventhelper.MyExtendEvent;
            import myeventhelper.MyEventDispatcher;
            import myeventhelper.EventArgExtend;
            private var execParent:MyEventDispatcher; //触发父亲节点事件
            function init():void
            {
                execParent = MyEventDispatcher.getInstance();
            }
            public function onGetParentTotal(e:MyExtendEvent,...agrs):void
            {
                //下面两种方法都可以用来传递参数
                //this.labTotal.text = String(agrs[0].totalValue);
                this.labTotal.text = e.param.toString();
            }
            public function onParentEvent(event:Event):void
            {
                execParent.Parsms = txtValue.text;
                execParent.Source = this;
                execParent.dispatchEvent(new Event(MyEventDispatcher.EXEC_PARENT_METHOD));
            }
          
        ]]-->
    </mx:Script>
        <mx:Canvas height="90" width="197">
        <mx:TextInput width="92" y="10" x="85" id="txtValue"/>  
        <mx:Label x="13" y="12" text="存入："/>
        <mx:Label x="87" y="56" width="90" id="labTotal"/>
        <mx:Label x="5" y="56" text="ParentTotal:"/>
        </mx:Canvas>
        <mx:ControlBar>
            <mx:Button label="调用父方法" id="btnExecParent" click="onParentEvent(event)"/>
        </mx:ControlBar>
    </mx:Panel>

    5、第五步：完成儿子B“comBrotherB.mxml”：
    view plaincopy to clipboardprint?
<?xml version="1.0" encoding="utf-8"?>  
    <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml " width="222" height="170" title="组件B" creationComplete="init()">  
    <mx:Script>  
        <!--[CDATA[  
            import myeventhelper.MyExtendEvent;  
            import myeventhelper.MyEventDispatcher;  
            import myeventhelper.EventArgExtend;  
             
            private var execParent:MyEventDispatcher; //触发父亲节点事件  
            function init():void
            {  
                execParent = MyEventDispatcher.getInstance();  
            }  
            public function onGetParentTotal(e:Event,...agrs):void //响应父亲类的触发的事件  
            {  
                this.labTotal.text = String(agrs[0].totalValue);  
            }  
             
            public function onParentEvent(event:Event):void //通过自定义事件触发类传递参数  
            {  
                execParent.Parsms = txtValue.text;  
                execParent.Source = this;  
                execParent.dispatchEvent(new Event(MyEventDispatcher.EXEC_PARENT_METHOD));  
            }  
        ]]-->  
    </mx:Script>  
        <mx:Canvas height="90" width="197">  
        <mx:TextInput width="92" y="10" x="85" id="txtValue"/>     
        <mx:Label x="13" y="12" text="存入："/>  
        <mx:Label x="87" y="56" width="90" id="labTotal"/>  
        <mx:Label x="5" y="56" text="ParentTotal:"/>  
        </mx:Canvas>  
        <mx:ControlBar>  
            <mx:Button label="调用父方法" id="btnExecParent" click="onParentEvent(event)"/>  
        </mx:ControlBar>  
    </mx:Panel>
<?xml version="1.0" encoding="utf-8"?>
    <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml " width="222" height="170" title="组件B" creationComplete="init()">
    <mx:Script>
        <!--[CDATA[
            import myeventhelper.MyExtendEvent;
            import myeventhelper.MyEventDispatcher;
            import myeventhelper.EventArgExtend;
          
            private var execParent:MyEventDispatcher; //触发父亲节点事件
            function init():void
            {
                execParent = MyEventDispatcher.getInstance();
            }
            public function onGetParentTotal(e:Event,...agrs):void //响应父亲类的触发的事件
            {
                this.labTotal.text = String(agrs[0].totalValue);
            }
          
            public function onParentEvent(event:Event):void //通过自定义事件触发类传递参数
            {
                execParent.Parsms = txtValue.text;
                execParent.Source = this;
                execParent.dispatchEvent(new Event(MyEventDispatcher.EXEC_PARENT_METHOD));
            }
        ]]-->
    </mx:Script>
        <mx:Canvas height="90" width="197">
        <mx:TextInput width="92" y="10" x="85" id="txtValue"/>  
        <mx:Label x="13" y="12" text="存入："/>
        <mx:Label x="87" y="56" width="90" id="labTotal"/>
        <mx:Label x="5" y="56" text="ParentTotal:"/>
        </mx:Canvas>
        <mx:ControlBar>
            <mx:Button label="调用父方法" id="btnExecParent" click="onParentEvent(event)"/>
        </mx:ControlBar>
    </mx:Panel>

    6、第六步：完成父亲类"parentApp.mxml":

    view plaincopy to clipboardprint?
<?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml " layout="absolute" height="323" xmlns:ns1="component.*" creationComplete="init();" width="574">
    <mx:Script>
        <!--[CDATA[  
            import myeventhelper.MyExtendEvent;  
            import myeventhelper.MyEventDispatcher;  
            import myeventhelper.EventArgExtend;  
            private var parentDP:MyEventDispatcher;  
            public var totalValue:Number = 0;  
            function init():void  
            {  
                parentDP = MyEventDispatcher.getInstance();  
                nodeEvent = new MyExtendEvent(totalValue,MyExtendEvent.EXEC_BROTHER_METHOD);  
                 
                if(!parentDP.hasEventListener(MyEventDispatcher.EXEC_PARENT_METHOD))  
                    parentDP.addEventListener(MyEventDispatcher.EXEC_PARENT_METHOD,getSonValue);//注册通过自定义事件触发类传递参数  
                     
                //注册事件时传递参数  
                addEventListener(MyExtendEvent.EXEC_BROTHER_METHOD,EventArgExtend.create(comA.onGetParentTotal,this));  
                addEventListener(MyExtendEvent.EXEC_BROTHER_METHOD,EventArgExtend.create(comB.onGetParentTotal,this));  
            }  
            function getSonValue(e:Event):void  
            {  
                if(parentDP.Source == comA)  
                {  
                    txtA.text = String(parentDP.Parsms);  
                }  
                else  
                {  
                    txtB.text = String(parentDP.Parsms);  
                }  
            }  
             
            //将结果返回儿子节点  
            private var nodeEvent:MyExtendEvent;  
            function onSumToNode(e:Event):void//触发事件将结果返回儿子节点  
            {  
                totalValue = Number(txtA.text) + Number(txtB.text);  
                txtTotal.text = String(totalValue);  
                nodeEvent.param = totalValue;  
                dispatchEvent(nodeEvent);  
            }  
        ]]-->
    </mx:Script>
    <mx:Canvas x="0" y="0" width="573" height="323" backgroundColor="#729AAC">
        <mx:TextInput x="65" y="219" id="txtA"/>
        <mx:TextInput x="65" y="248" id="txtB"/>
        <mx:TextInput x="65" y="276" id="txtTotal"/>
        <mx:Label x="37" y="222" text="A:"/>
        <mx:Label x="37" y="251" text="B:"/>
        <mx:Label x="23" y="278" text="Total:"/>
        <mx:Button x="244" y="219" label="触发儿子事件" click="onSumToNode(event)"/>
        <ns1:comBrotherA x="37" y="10" id="comA" width="247">
        </ns1:comBrotherA>
        <ns1:comBrotherB x="323" y="10" id="comB">
        </ns1:comBrotherB>
         
        </mx:Canvas>
         
    </mx:Application>

7、执行（存入分别“调用父亲方法”，"触发儿子事件"）最终结果:

 

http://blog.csdn.net/xingjunli/article/details/5107483