1、自定义事件
2、自定义带参数的事件
刚到公司上班没多久,事情不是太多。打酱油的成分占据大多时间。闲着没事学习下Flex。在这之前没有接触过Flex。在理解上面多有拙劣之处。重在交流,总结。还望看到的各位高手能够给予指点。
刚做了一个自定义事件,对于我们初学Flex的并且没有人交流的还是有点难度的。之前有过好多前辈写过关于Flex自定义事件的博文。也许对于很多新手理解上有点难度。这里我就简单的通俗的写下自定义事件。
1、
自定义事件必须注意几点:
(1)自定义事件通过继承Event类来实现。
(2)自定义事件不可以自己触发,只能有系统事件派发。
了解这两点后现在就可以开始自定义自己的事件了。
首先我们新建一个ActionScript Class,这个Class继承flash.events.Event。
package myEvent
{
import flash.events.Event;
public class MyEvent extends Event
{
public static const MYEVENT:String = "myevent";
public function MyEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}
override public function clone():Event{
return new MyEvent(type,bubbles,cancelable);
}
}
}
<!--自定义事件继承Event来实现-->
然后可以创建一个Component,在里面随便添加容器和控件,在控件上面通过系统事件,比如MouseEvent,用来触发事件。注意,这个MouseEvent触发的事件里面通过this.dispatchEvent(evnet:Event)来派发出你自定义的事件。
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Metadata>
[Event(name="myevent",type="myEvent.MyEvent")]
</fx:Metadata>
<fx:Script>
<![CDATA[
import myEvent.MyEvent;
private function clickHandle(event:MouseEvent):void{
this.dispatchEvent(new MyEvent("myevent",true,false));
}
]]>
</fx:Script>
<s:Panel width="400" height="200"
title="Show Customize Event"
x="200" y="100">
<s:Button label="On this button,I add a custom event...Click it..." id="showevent"
top="50" left="50" click="clickHandle(event)"/>
</s:Panel>
</s:Group>
最后在创建的Flex工程里面引入这个Component,为这个component添加事件监听器。
<?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"
xmlns:myms="component.*"
minWidth="955" minHeight="600"
creationComplete="init()" xmlns:myComponent="myComponent.*">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import myEvent.MyEvent;
private function init():void{
component.addEventListener(MyEvent.MYEVENT,clickHandle);
}
private function clickHandle(event:MyEvent):void{
Alert.show("The type of this event is "+event.type+"\nThe currentTarget is "+event.currentTarget+
"\nThe target is "+event.target);
}
private function clickHandleThis(event:MouseEvent):void{
Alert.show("The type of this event is "+event.type+"\nThe currentTarget is "+event.currentTarget+
"\nThe target is "+event.target);
}
]]>
</fx:Script>
<myComponent:MyComponent id="component" click="clickHandleThis(event)"/>
</s:Application>
<!--自定义事件-->
2、
自定义带参数的事件应该明白:
(1)自定义事件继承Event时的构造函数里面带参数。
(2)同样需要触发系统事件,然后派发自定义事件。
新建一个ActionScript Class,这个Class继承flash.events.Event。
package customEvent
{
import flash.events.Event;
public class TransferData extends Event
{
public static const CUSTOMEVENT:String = "customevent";
public var loginName:String;
public var password:String;
public function TransferData(type:String, loginName:String, password:String)
{
super(type);
this.loginName = loginName;
this.password = password;
}
override public function clone():Event{
return new TransferData(type,loginName,password);
}
}
}
然后创建component来设计并实现数据的传输和接受。
DispatchData.mxml代码如下
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init()">
<fx:Metadata>
[Event(name="customevent",type="customEvent.TransferData")]
</fx:Metadata>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<mx:Validator id="InputLoginName" source="{loginName}" property="text"/>
<mx:Validator id="InputPassword" source="{password}" property="text"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import customEvent.TransferData;
import mx.controls.Alert;
private function init():void{
dispatchData.addEventListener(MouseEvent.CLICK,clickHandle);
}
private function clickHandle(event:MouseEvent):void{
if(loginName.text != "" && password.text != ""){
canDispatchData();
}else{
Alert.show("Please input the content,contain login name and the password!");
}
}
private function canDispatchData():void{
var loginEvent:TransferData = new TransferData("customevent",loginName.text,password.text);
this.dispatchEvent(loginEvent);
}
]]>
</fx:Script>
<s:Panel x="0" y="0" width="300" height="200" title="The DataSource Panel">
<mx:Form x="10" y="10">
<mx:FormItem label="Login Name:" fontWeight="bold" required="true">
<s:TextInput id="loginName"/>
</mx:FormItem>
<mx:FormItem label="Password:" fontWeight="bold" required="true">
<s:TextInput id="password"/>
</mx:FormItem>
<s:Button label="DispatchData" id="dispatchData"/>
</mx:Form>
</s:Panel>
</s:Group>
ReceiveData.mxml代码如下
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Panel x="0" y="0" width="300" height="200" title="The DataReceive Panel">
<mx:Form x="10" y="10">
<mx:FormItem label="Login Name:" fontWeight="bold">
<s:TextInput id="loginName" editable="false"/>
</mx:FormItem>
<mx:FormItem label="Password:" fontWeight="bold">
<s:TextInput id="password" editable="false"/>
</mx:FormItem>
<s:Button label="ReceiveData" id="receiveData"/>
</mx:Form>
</s:Panel>
</s:Group>
LoginEvent.mxml代码如下
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:component="component.*"
creationComplete="init()"
width="900" height="400">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import customEvent.TransferData;
private var loginName:String;
private var password:String;
private function init():void{
dispatch.addEventListener(TransferData.CUSTOMEVENT,dispatchData);
receive.addEventListener(MouseEvent.CLICK,receiveData);
}
private function dispatchData(event:TransferData):void{
loginName = event.loginName;
password = event.password;
Alert.show("loginName:"+loginName+"\npassword:"+password);
}
private function receiveData(event:MouseEvent):void{
receive.loginName.text = loginName;
receive.password.text = password;
}
]]>
</fx:Script>
<component:DispatchData id="dispatch" x="100" y="100"/>
<component:ReceiveData id="receive" x="500" y="100"/>
</s:Group>
在Flex工程里面引入component即可
<?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"
xmlns:component="component.*"
minWidth="955" minHeight="600"
horizontalCenter="0" verticalCenter="0">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Panel title="Show dispatch and receive data"
horizontalCenter="0" verticalCenter="0">
<component:LoginEvent/>
</s:Panel>
</s:Application>
分享到:
相关推荐
flex4 自定义事件 用法 源码 完整项目导入可运行
Flex4自定义组件 介绍了flex中如何自定义组件以及相关应用
Flex4 自定义通用ImageButton
flex4自定义弹出窗口 支持最大化 最小化
flex 高级自定义组件 需要重写的方法,以及为什么要重写,何时调用等。
flex自定义事件的含义 简单例子说明 。。。。。。。。。。
flex自定义组件事件DEMO,一个简单的flex自定义组件的demo
Flex自定义组件和自定义事件的使用。 Flex自定义组件和自定义事件的使用。
你还在头痛flex4组件皮肤怎么自定义吗?看我给你们上传的吧;因皮肤中还是有部分mx组件,如果不能正常使用,请自己把所以mx组件改成sp组件
预览地址: http://www.iflex4.com/samples/picviewer/picviewer.html http://www.iflex4.com/samples/picviewer/app.html 更多信息请访问: www.iflex4.com Flex4视频教程免费下载。
NULL 博文链接:https://futurewwm.iteye.com/blog/1277119
一个完成的Flex4 Air 自定义窗口,可以缩小到托盘中,后台运行
如何接收事件?如何做到AS3.0的标准事件编程? 类似JAVA的监听或观察者模式 Event改变的部分很多,正在想怎样用一个有条理的方式来讲解Event和它相关的诸多内容,让我们感到比较容易理解,记忆和接受。
flex开发自定义控件
NULL 博文链接:https://demojava.iteye.com/blog/1159535
使用Flex ,AS,实现的适用于Flex Mobile平台的对话框。
flex TitleWindow自定义最大最小化
NULL 博文链接:https://whp0731.iteye.com/blog/726223
flex 自定义组件,UI,flex 自定义组件。
详解Flex4.0自定义控件的开发步骤以及注意事项