Flex自定义组件与自定义事件_flex function initcomponent():void-优快云博客

本文链接：https://blog.youkuaiyun.com/mine_1/article/details/6444583

本文来自优快云博客，转载请标明出处：http://blog.youkuaiyun.com/dengxingbo/archive/2009/12/14/5005154.aspx

1、自定义组件

2、自定义事件

3、结合使用

一、自定义组件（使用的是Flex组件，ActionScript组件相对麻烦点，可视化差点）

该组件由一个TextArea和两个Button组成，如图：

代码：

MyComponent.mxml

view plaincopy to clipboardprint?
01.<?xml version="1.0" encoding="utf-8"?>
02.<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="180" height="94" creationComplete="initComponent()">
03.    <mx:Metadata>
04.        /**
05.         * 1. 编译期间执行
06.         * 2. 自定义组件一般可以通过dispatchEvent委派parent来处理某个事件，这就需要在parent中设置一个addEventLister来监听事件。
07.         * 就像Button的Event.CLICK事件，除了可以通过addEventLister(Event.CLICK, clickHandle)来监听处理外，在Flex组件中还可以
08.         * 直接 mx:Button click="clickHandle(event)" / 。怎么定义自定义组件也可以达到如此效果呢？
09.         * 2.1) 内部声明：[Event(name="commit",type ="laxino.MyEvent")]，type是指事件的类型（如1的类型是int,'aaa'的类型是String）,name是指
10.         * Event中的构造函数中type。
11.         * 2.2) 外部使用：commit="commitHandle(myEvent)"是指为该组件注册了一个监听器，监听名字叫commit的事件，并通过commitHandle处理。事件的触发和
12.         * 委派必须在组件内实现。
13.         *
14.         */
15.
16.         /**
17.         *
18.         * Using the Event metadata tag
19.         * You use the [Event] metadata tag to define events dispatched by a component so that the Flex compiler can recognize
20.         * them as MXML tag attributes in an MXML file. You add the [Event] metadata tag in one of the following locations:
21.         * ActionScript components   Above the class definition, but within the package definition, so that the events are bound
22.         * to the class and not a particular member of the class.
23.         * MXML components   In the mx:Metadata tag of an MXML file.
24.         *
25.         */
26.
27.        [Event(name="commit",type ="laxino.MyEvent")]
28.        [Event(name="preview",type ="laxino.MyEvent")]
29.    </mx:Metadata>
30.    <mx:Script>
31.        
48.    </mx:Script>
49.    <mx:TextArea x="10" y="10" id="content"/>
50.    <mx:Button x="10" y="62" label="Preview" width="82" click="preview(event)"/>
51.    <mx:Button x="100" y="62" label="Commit" click="commitHandle(event)" />
52.</mx:Canvas>
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="180" height="94" creationComplete="initComponent()">
<mx:Metadata>
  /**
   * 1. 编译期间执行
   * 2. 自定义组件一般可以通过dispatchEvent委派parent来处理某个事件，这就需要在parent中设置一个addEventLister来监听事件。
   * 就像Button的Event.CLICK事件，除了可以通过addEventLister(Event.CLICK, clickHandle)来监听处理外，在Flex组件中还可以
   * 直接 mx:Button click="clickHandle(event)" / 。怎么定义自定义组件也可以达到如此效果呢？
   * 2.1) 内部声明：[Event(name="commit",type ="laxino.MyEvent")]，type是指事件的类型（如1的类型是int,'aaa'的类型是String）,name是指
   * Event中的构造函数中type。
   * 2.2) 外部使用：commit="commitHandle(myEvent)"是指为该组件注册了一个监听器，监听名字叫commit的事件，并通过commitHandle处理。事件的触发和
   * 委派必须在组件内实现。
   *
   */

   /**
   *
   * Using the Event metadata tag
   * You use the [Event] metadata tag to define events dispatched by a component so that the Flex compiler can recognize
   * them as MXML tag attributes in an MXML file. You add the [Event] metadata tag in one of the following locations:
   * ActionScript components   Above the class definition, but within the package definition, so that the events are bound
   * to the class and not a particular member of the class.
   * MXML components   In the mx:Metadata tag of an MXML file.
   *
   */

        [Event(name="commit",type ="laxino.MyEvent")]
        [Event(name="preview",type ="laxino.MyEvent")]
</mx:Metadata>
<mx:Script>
  
</mx:Script>
<mx:TextArea x="10" y="10" id="content"/>
<mx:Button x="10" y="62" label="Preview" width="82" click="preview(event)"/>
<mx:Button x="100" y="62" label="Commit" click="commitHandle(event)" />
</mx:Canvas>

二、自定义事件

当按Button1时触发preview事件，点击Button2时触发commit事件，传输数据通过$data变量存储。

代码：

view plaincopy to clipboardprint?
01.package laxino
02.{
03.    import flash.events.Event;
04.
05.    public class MyEvent extends Event
06.    {
07.        public static const COMMIT:String = "commit";
08.        public static const PREVIEW:String = "preview";
09.
10.        private var $data:Object;
11.
12.        public function MyEvent(type:String, $data:Object=null, bubbles:Boolean=true, cancelable:Boolean=false)
13.        {
14.            super(type, bubbles, cancelable);
15.            this.$data = $data;
16.        }
17.
18.        public function get data():Object
19.        {
20.            return $data;
21.        }
22.
23.        public function set data($data:Object):void
24.        {
25.            this.$data = $data;
26.        }
27.    }
28.}
package laxino
{
import flash.events.Event;

public class MyEvent extends Event
{
  public static const COMMIT:String = "commit";
  public static const PREVIEW:String = "preview";

  private var $data:Object;

  public function MyEvent(type:String, $data:Object=null, bubbles:Boolean=true, cancelable:Boolean=false)
  {
   super(type, bubbles, cancelable);
   this.$data = $data;
  }

  public function get data():Object
  {
   return $data;
  }

  public function set data($data:Object):void
  {
   this.$data = $data;
  }
}
}

三、使用。

view plaincopy to clipboardprint?
01.<?xml version="1.0" encoding="utf-8"?>
02.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:cus="laxino.*" applicationComplete="initApp()">
03.    <mx:Script>
04.        
24.    </mx:Script>
25.    <mx:Label x="10" y="11" text="Custom Component"/>
26.    
27.    <cus:MyComponent id="myComponent" x="10" y="37" commit="commitHandle(event)" ></cus:MyComponent>
28.    <mx:Label x="10" y="139" text="Standard Component（Text）"/>
29.    <mx:Text id="result" x="10" y="165" text="Empty" width="180" height="123" />
30.</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:cus="laxino.*" applicationComplete="initApp()">
<mx:Script>
  
</mx:Script>
<mx:Label x="10" y="11" text="Custom Component"/>

<cus:MyComponent id="myComponent" x="10" y="37" commit="commitHandle(event)" ></cus:MyComponent>
<mx:Label x="10" y="139" text="Standard Component（Text）"/>
<mx:Text id="result" x="10" y="165" text="Empty" width="180" height="123" />
</mx:Application>