flex_如何创建自定义事件示例;

原创 2012年03月22日 16:43:32

功能:从xml文件中加载数据,然后在list组件上显示出数据来。

=>userContent.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<users>
    <user name="唐龙" site="http://www.tanglong.com"/>
    <user name="楚源" site="http://www.chuyuan.com"/>
    <user name="徐泽" site="http://www.xuze.com"/>
    <user name="罗锋" site="http://www.luofeng.com"/>
    <user name="韩立" site="http://www.hanli.com"/>
</users>


=>ContentEvent.as自定义事件文件

// 自定义事件以便用于数据传输等等;
package net.events
{
    import flash.events.Event;
    
    import mx.collections.ArrayCollection;
    
    public class ContentEvent extends Event
    {
        // 声明事件类型_事件引用中使用的事件常量。
        public static const DATA_BACK:String = "dataBack";
        public static const DATA_ERROR:String = "dataError";
        
        // 自定义事件数据属性。
        public var users:ArrayCollection;
        public var errors:String;
        
        public function ContentEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
        {
            super(type, bubbles, cancelable);
        }
        
        /*
        *覆盖此clone()函数说明:由于这个类只是一个基本框架,而所有自定义事件都应该重写Event.clone()方法。
        *如果没有重写该方法,但是事件被克隆,那么自定义数据就无法包含到克隆的事件中,这就意味着克隆的副本
        *与原始事件不一致。该方法只是创建事件的一个新实例,并按照当前属性设置新实例的属性,实际上就是事件
        *的一个完整克隆。
        */
        override public function clone():Event{
            var event:ContentEvent = new ContentEvent(type, bubbles, cancelable);
            event.users = users;
            event.errors = errors;
            return event;
        }
    }
}


=>DataLoader.as加载数据类

package net
{
    import flash.events.ErrorEvent;
    import flash.events.Event;
    import flash.events.EventDispatcher;
    import flash.events.IEventDispatcher;
    import flash.events.IOErrorEvent;
    import flash.events.SecurityErrorEvent;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    
    import mx.collections.ArrayCollection;
    
    import net.events.ContentEvent;    // 自定义事件;
    
    
    /* 添加事件元数据,以便在MXML应用程序中可以这样使用:
     * <fx:Declarations>
     *         <net:DataLoader id="dataLoader" dataBack="onData(event)" dataError="onError(event)"/>
     * </fx:Declarations>
     */
    [Event(name="dataBack", type="net.events.ContentEvent")]
    [Event(name="dataError", type="net.events.ContentEvent")]
    /**
     * 类功能:加载数据、分派完成和错误事件;
     */
    public class DataLoader extends EventDispatcher
    {
        protected var _loader:URLLoader;
        
        public function DataLoader(target:IEventDispatcher=null)
        {
            super(target);
            
            _loader = new URLLoader();
            _loader.addEventListener(Event.COMPLETE, onComplete);    // 数据加载完成后调用。
            _loader.addEventListener(IOErrorEvent.IO_ERROR, onError);    // 不能加载数据时调用;
            _loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onError);
        }
        
        public function load(url:String):void{
            _loader.load(new URLRequest(url));
        }
        
        protected function onComplete(event:Event):void{
            var users:ArrayCollection = new ArrayCollection();
            for each(var user:XML in XML(_loader.data).user) {
                users.addItem(user.@name + "_" + user.@site);
            }
            
            
            // 创建并分派自定义完成事件。
            var customEv:ContentEvent = new ContentEvent(ContentEvent.DATA_BACK);
            customEv.users = users;
            dispatchEvent(customEv);
        }
        
        protected function onError(event:ErrorEvent):void{
            // 创建并分派自定义错误事件。
            var customEv:ContentEvent = new ContentEvent(ContentEvent.DATA_ERROR);
            customEv.errors = event.text;
            dispatchEvent(customEv);
        }
        
    }
}


=>UsersView.mxml应用程序

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               minWidth="1024" minHeight="768" pageTitle="用户信息列表"
               applicationComplete="initFn()" xmlns:net="net.*">
    
    <fx:Script>
        <![CDATA[
            import net.DataLoader;
            import net.events.ContentEvent;
            
            protected function initFn():void{
                var dataLoader:DataLoader = new DataLoader();
                dataLoader.addEventListener(ContentEvent.DATA_BACK, onData);
                dataLoader.addEventListener(ContentEvent.DATA_ERROR, onError);
                dataLoader.load("net/data/userContent.xml");
            }
            
            protected function onData(event:ContentEvent):void{
                userlist.dataProvider = event.users;
            }
            
            protected function onError(event:ContentEvent):void{
                trace("=>Error: " + event.errors);
            }
        ]]>
    </fx:Script>
    
    <fx:Declarations>
        <!-- 非可视元素 -->
    </fx:Declarations>
    
    <!--view-->
    <s:VGroup verticalCenter="0" horizontalCenter="0">
        <s:List id="userlist" width="250" height="120"/>
    </s:VGroup>
    
</s:Application>

提醒:只要复制粘贴就可以运行,唯一要注意的就是文件结构:


按照上边文件结构组织文件或者自己修改相关文件目录就ok。


Flex4自定义事件

1、自定义事件 2、自定义带参数的事件         刚到公司上班没多久,事情不是太多。打酱油的成分占据大多时间。闲着没事学习下Flex。在这之前没有接触过Flex。在理解上面多有拙劣之处。重在...
  • yeohcooller
  • yeohcooller
  • 2011年09月20日 10:04
  • 3836

flex4事件监听与自定义事件分发(三)

1.我们来说一下自定义事件子类。什么时候创建新的事件类以及怎么创建。            (1)说一下,我们什么时候需要自定义事件类。举例说明,在flex中事件的基类是Event,而当我们点击某个按...
  • jinxiumeihappy
  • jinxiumeihappy
  • 2013年07月05日 14:32
  • 1058

flex4事件监听与自定义事件分发(二)

1.今天说一下创建事件,下面我根据一段代码来讲解一下这是一个自定义组件,是将“确定”按钮和“取消”按钮,放在了一个hgroup里,做成的一个组件。为了达到降低耦合的目的,我们在单击“ok”和“cane...
  • jinxiumeihappy
  • jinxiumeihappy
  • 2013年07月05日 12:00
  • 850

Flex自定义事件:一个地方派发(抛出),任何地方监听(捕获)

public static const dispatcher…”,就是声明一个公有的静态对象,这样才使的可以在任意地方访问到并且对他进行抛出和侦听事件。 自定义CustomEvent类,继承Even...
  • xiaoniba1024
  • xiaoniba1024
  • 2011年11月01日 13:07
  • 3115

flex4事件监听与自定义事件分发(三)

1.我们来说一下自定义事件子类。什么时候创建新的事件类以及怎么创建。            (1)说一下,我们什么时候需要自定义事件类。举例说明,在flex中事件的基类是Event,而当我们点击某个按...
  • jinxiumeihappy
  • jinxiumeihappy
  • 2013年07月05日 14:32
  • 1058

Flex组件组件添加自定义事件

自定义组件如下:com.cp2
  • chenscmail
  • chenscmail
  • 2013年01月08日 13:45
  • 1833

深入剖析Flex4与自定义布局关系

在学习Flex4的过程中,你对自定义布局的概念是否熟悉,这里和大家分享一下Flex4与自定义布局的关系,Flex4/Spark组件架构的新功能之一是可以定制一个容器的布局而不必改变容器本身。您需要做的...
  • jonave
  • jonave
  • 2013年05月21日 17:15
  • 477

Flex 如何实现按钮之间的切换,按钮点击事件

Flex 如何实现按钮之间的切换,按钮点击事件
  • vector5210
  • vector5210
  • 2014年09月18日 17:22
  • 952

flex Datagrid数据列双击事件实现

最近做flex的项目遇到了一个问题:要实现双击DataGrid的一行数据,将该行数据赋值到打开的新窗口中。    在网上找了好久,发现要么答非所问,要么就是只言片语。所以我想通过CSDN这个平台把我...
  • zhang_jian__
  • zhang_jian__
  • 2016年07月05日 08:45
  • 1271

Flex容器和组件的初始化创建事件

在FLEX中,我们经常会用到,当容器或者这个组件初始化的时候,或者创建完成的时候,就去做一些事情。 那么此时Flex就会派发preinitialize、initialize和creationComp...
  • atomcrazy
  • atomcrazy
  • 2013年06月30日 18:29
  • 3455
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:flex_如何创建自定义事件示例;
举报原因:
原因补充:

(最多只允许输入30个字)