首先我们先写一个自定义的登录事件。
loginformEvent.as:
package com.events//包,可以理解成目录,在com/events/下
{
import flash.events.Event;
public class loginformEvent extends Event
{
public var name:String = "";
public var pwd:String = "";
//构造函数
public function loginformEvent(type:String)
{
super(type, false, false);//调用父类的构造函数
}
//flex中的方法重写原来是这个样,就顺便写到这了。
override public function clone():Event
{
return new loginformEvent(type);
}
}
}
然后我们就写自定义组件吧
LoginForm.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="206" fontSize="12">
<mx:Metadata>
[Event(name="MyEvent",type="com.events.loginformEvent")]
</mx:Metadata>
<mx:Script>
<![CDATA[
import com.events.loginformEvent;//引入自定义的事件类
internal function OnClick(evt:MouseEvent):void{
var e:loginformEvent = new loginformEvent("MyEvent");
e.name = user.text;//把用户名赋给自定义事件中的name
e.pwd = pwd.text;
this.dispatchEvent(e);//事件派发
}
]]>
</mx:Script>
<mx:Label x="65" y="33" text="用户名:" fontWeight="bold"/>
<mx:Label x="65" y="84" text="密码:" fontWeight="bold"/>
<mx:TextInput x="164" y="82" id="pwd" displayAsPassword="true"/>
<mx:Button x="164" y="132" label="登录" id="btn" click="OnClick(event)"/>
<mx:TextInput x="164" y="31" id="user"/>
</mx:Panel>
最后就是我们的主要文件了。
main.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">
<mx:Script>
<![CDATA[
import com.events.loginformEvent;//引入自定义的事件类
import mx.controls.Alert;
internal function login(evt:loginformEvent):void{
if(evt.pwd=="admin" && evt.name=="admin"){
Alert.show("成功登录!","提示");
}else{
Alert.show("登录失败!","提示");
}
}
]]>
</mx:Script>
<ns1:LoginForm x="133.5" y="71" MyEvent="login(event)"><!--这里要注意自定义组件中有个MyEvent-->
</ns1:LoginForm>
</mx:Application>
===================================================
个人理解:
1、事件的传递,有内层组件----》》外层组件,即在本例中由【LoginForm】组件 dispatch(分发事件)给它的上层组件【main】,形象点的比喻:内层组件发起的事件,引起了上层组件的联动。