`

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

    博客分类:
  • Flex
阅读更多

 

 

 

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

分享到:
评论

相关推荐

    教你7步实现flex自定义Event与参数传递.doc

    教你7步实现flex自定义Event与参数传递.doc

    flex自定义组件事件DEMO

    4. 示例学习:在"flex自定义组件事件DEMO"中,你可以看到如何在自定义组件中创建并派发自定义事件,以及如何在其他地方监听和响应这些事件。通过分析代码,可以了解事件生命周期、事件冒泡和捕获的概念,以及如何在...

    flex4自定义事件用法

    在运行过程中,你将能够看到自定义事件的实现和使用情况。 在Flex4中,自定义事件为应用程序提供了更强大的交互和通信能力。通过理解自定义事件的创建、派发和监听,开发者可以构建出更加灵活和可扩展的应用程序。...

    flex3自定义DownloadProgressBar

    在Flex中,自定义组件是通过继承已有的UIComponent或Flex提供的其他基类,然后添加所需的功能和视觉元素来实现的。对于DownloadProgressBar,我们可能需要继承 mx.controls.ProgressBar 类,它是Flex提供的一种用于...

    flex自定义事件、简单例子说明

    ### Flex自定义事件详解 Flex 是一款用于构建和部署跨平台桌面应用与移动应用的开源框架,它基于Adobe Flash Platform。在Flex应用开发过程中,事件处理机制是非常重要的一个环节,而自定义事件则是这一机制中的...

    flex-event.zip_flex

    开发者也可以自定义事件类,扩展Event或Flex的其他事件基类,以满足特定需求。 在Flex应用中,事件处理不仅限于UI组件。数据模型和业务逻辑层也可以利用事件来协调工作。例如,当数据服务完成异步数据加载时,可以...

    ActionScript的自定义组件及自定义事件例子

    2. **构造函数**:重写构造函数,传递事件类型和是否冒泡等参数。 3. **派发事件**:在需要触发事件的地方,使用`dispatchEvent()`方法发送自定义事件。 4. **监听事件**:在接收方组件中,使用`addEventListener()`...

    FLEX教程-FLEX教程

    - 实现页面间的参数传递和状态保持。 #### 14. manager - **Manager 类**: Flex 中用于管理和协调不同部分的类。 - **示例**: 如 LayoutManager 用于控制布局,EventManager 用于处理事件等。 #### 15. Demo8:...

    Flex4视频教程_02-03用AS自定义事件.rar

    在Flex4中,自定义事件的创建主要是通过扩展Event类或其子类来实现的。下面将深入讲解自定义事件的创建、派发、监听和处理过程。 1. **创建自定义事件**:首先,你需要创建一个新的ActionScript类,这个类将继承自...

    flex实现的拖拽控件

    拖拽功能在Flex中可以通过使用内置的DragManager类和Event类来实现。DragManager类提供了全局的拖放管理,而事件类如MouseEvent和DragEvent则是处理拖放过程中的各种交互。下面我们将深入探讨如何在Flex中创建一个...

    Flex4实现拖拽功能

    为了实现更丰富的交互,还可以利用DragEvent的dataForFormat()方法获取拖放数据,并结合自定义数据格式,例如“image”,以传递更多的信息。此外,可以设置DragManager的allowMultipleSources属性,允许多个源同时...

    使用FLEX进行多文件上传和自定义上传信息.zip_flex_文件上传

    本教程将探讨如何使用Adobe Flex这一强大的富互联网应用程序(RIA)框架来实现多文件上传及自定义上传信息的功能。 Flex是一种基于ActionScript 3.0的开放源代码编程语言,它允许开发者创建具有丰富用户界面的Web...

    Flex基础培训

    ### Flex基础培训知识点详解 #### 一、列表组件与项目渲染器 ...通过以上示例可以看出,自定义事件及事件类在Flex开发中扮演着重要的角色,不仅能够有效地实现组件间的数据通信,还能够提高代码的可读性和可维护性。

    FLEX简单的入门快速总结

    在Flex中,你可以配置HTTPService来指定URL、请求方法(GET或POST)、请求参数等。通过监听`result`和`fault`事件,可以处理返回的数据或错误。HTTPService在实现AJAX风格的应用程序中起着关键作用,它使Flex应用能...

    Flex3+组件拖放教程

    首先,要实现拖放操作,你需要设置一个可拖动的组件。这通常是在组件的初始化代码中完成的,通过调用`setDragEnabled(true)`方法来启用组件的拖动功能。同时,需要指定拖动开始时的源数据,这可以通过创建一个`...

    flex blazeds 传递对象实例

    本文将深入探讨“Flex BlazDS 传递对象实例”这一主题,这涉及到Flex客户端与BlazeDS服务器之间的数据交互。 Flex是一种开源的、基于ActionScript的框架,用于创建具有动态用户界面的RIA。它主要用在Adobe Flash ...

    Flex--主程序与弹出窗口之间传递数据

    在IT行业中,Flex是一种基于ActionScript和MXML的开源框架,用于构建富...总之,Flex中主程序与弹出窗口之间的数据传递是应用程序功能实现的关键部分,理解并掌握各种传递方法将有助于构建更高效、更灵活的Flex应用。

    flex 窗口拖动与尺寸改变

    在Flex应用中,如果需要在多个窗口之间传递数据,可以使用Event Bus(事件总线)、LocalConnection对象或SharedObject等机制。Event Bus允许在组件之间广播事件,而LocalConnection对象则可以在同一台机器上的不同...

    flex 视频播放器,应用videodisplay

    本教程将深入探讨如何使用Flex中的`VideoDisplay`组件创建一个自定义的视频播放器,并实现播放位置控制、工具栏样式定制以及与JavaScript的数据交互。 一、`VideoDisplay`组件 `VideoDisplay`是Flex提供的用于展示...

    跟我StepByStep学FLEX教程------王一松

    Flex3及FlexBuilder安装 - **安装步骤**: - 下载Flex SDK和Flex Builder。 - 安装Flex SDK。 - 安装Flex Builder并配置相关设置。 - **配置环境变量**:为了确保开发环境的正确性,需要将Flex SDK的bin目录...

Global site tag (gtag.js) - Google Analytics