flex有参数的自定义事件,数据验证测试
自定义带参数的事件应该明白:
(1)自定义事件继承Event时的构造函数里面带参数。
(2)同样需要触发系统事件,然后派发自定义事件。
新建一个ActionScript Class,这个Class继承flash.events.Event。
TransferData.as类代码:
package
{
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 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="*"
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;
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="*"
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>
界面如下: