flex 自定义事件
给自定义组件编写事件,可以分为3部分:
1、自定义事件,
events.LightEvent.as
1 package events
2 {
3 import flash.events.Event;
4
5 public class LightEvent extends Event
6 {
7 public static const LightClick:String = "LightClick";
8
9 public function LightEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
10 {
11 super(type, bubbles, cancelable);
12 }
13
14 private var _color: String;
15
16 public function get color():String
17 {
18 return _color;
19 }
20
21 public function set color(value:String):void
22 {
23 _color = value;
24 }
25
26 public override function clone():Event
27 {
28 var le:LightEvent = new LightEvent(type, bubbles, cancelable);
29 le.color = color;
30 return le;
31 }
32
33 }
34 }
2 {
3 import flash.events.Event;
4
5 public class LightEvent extends Event
6 {
7 public static const LightClick:String = "LightClick";
8
9 public function LightEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
10 {
11 super(type, bubbles, cancelable);
12 }
13
14 private var _color: String;
15
16 public function get color():String
17 {
18 return _color;
19 }
20
21 public function set color(value:String):void
22 {
23 _color = value;
24 }
25
26 public override function clone():Event
27 {
28 var le:LightEvent = new LightEvent(type, bubbles, cancelable);
29 le.color = color;
30 return le;
31 }
32
33 }
34 }
2、在自定义组件上注册事件
Components.Light.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:HGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="319" height="45" horizontalAlign="center" verticalAlign="middle">
<fx:Metadata>
[Event(name="LightClick", type="events.LightEvent")]
</fx:Metadata>
<fx:Script>
<![CDATA[
import events.LightEvent;
protected function button1_clickHandler(event:MouseEvent, color:String):void
{
var eventObj:LightEvent = new LightEvent(LightEvent.LightClick);
eventObj.color = color;
dispatchEvent(eventObj);
}
protected function button2_clickHandler(event:MouseEvent):void
{
var eventObj:LightEvent = new LightEvent(LightEvent.LightClick); //这里一定跟上面
dispatchEvent(eventObj);
}]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<s:Button label="红色" click="button1_clickHandler(event, 'red')"/>
<s:Button label="蓝色" click="button2_clickHandler(event)"/>
<s:Button label="绿色" click="button2_clickHandler(event)"/>
</s:HGroup>
<s:HGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="319" height="45" horizontalAlign="center" verticalAlign="middle">
<fx:Metadata>
[Event(name="LightClick", type="events.LightEvent")]
</fx:Metadata>
<fx:Script>
<![CDATA[
import events.LightEvent;
protected function button1_clickHandler(event:MouseEvent, color:String):void
{
var eventObj:LightEvent = new LightEvent(LightEvent.LightClick);
eventObj.color = color;
dispatchEvent(eventObj);
}
protected function button2_clickHandler(event:MouseEvent):void
{
var eventObj:LightEvent = new LightEvent(LightEvent.LightClick); //这里一定跟上面
[Event(name="LightClick", ...)],使用的name相同,否则,派发的事件不会被接收到
eventObj.color = Button(event.target).label;dispatchEvent(eventObj);
}]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<s:Button label="红色" click="button1_clickHandler(event, 'red')"/>
<s:Button label="蓝色" click="button2_clickHandler(event)"/>
<s:Button label="绿色" click="button2_clickHandler(event)"/>
</s:HGroup>
3、使用自定义事件
TestLightEvent.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="955" minHeight="600" xmlns:Components="Components.*"
fontFamily="宋体">
<fx:Script>
<![CDATA[
import events.LightEvent;
protected function light1_lightHandler(event:LightEvent):void
{
// TODO Auto-generated method stub
lblColor.text = event.color;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<s:Panel x="55" y="51" width="290" height="151">
<s:Label id="lblColor" x="132" y="38" text="关闭"/>
<Components:Light x="0" y="63" width="288" LightClick="light1_lightHandler(event)"/>
</s:Panel>
</s:Application>
<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="955" minHeight="600" xmlns:Components="Components.*"
fontFamily="宋体">
<fx:Script>
<![CDATA[
import events.LightEvent;
protected function light1_lightHandler(event:LightEvent):void
{
// TODO Auto-generated method stub
lblColor.text = event.color;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<s:Panel x="55" y="51" width="290" height="151">
<s:Label id="lblColor" x="132" y="38" text="关闭"/>
<Components:Light x="0" y="63" width="288" LightClick="light1_lightHandler(event)"/>
</s:Panel>
</s:Application>
好了,就是这些,比较简单吧,其实就是上面事件派发的名字,在这个例子里就是LightEvent.LightClick,一定要写得一致哦