使用MXML标签来完成事件处理

这里演示一个完整的例子,
示例说明:一个简单的用户登录,在登录的时候做一些常见的判断,然后提示用户当前登录情况

1、新建工程
2、新建类,自定义事件,并且在类中声明变量用于存放用户名密码

package com.anmo
{
import flash.events.Event;

/**
* 此类用于存放用户名和密码
*/
public class LoginFormEvent extends Event
{
public var name:String = "";
public var password:String = "";
public function LoginFormEvent(type:String)
{
super(type, false, false);
}

}
}

3、新建组件,就是将类库中已经有的控件组合成一个新的组件,比如组合成一个登陆的表单
new -> MXML Component -> 输入名称(LoginForm),并且选择从panel继承 -> finish
然后向组件中拖入label、文本框和按钮,取好名字,保存后会再components中的custom下面就会多了一个LoginForm控件,然后将空间拖到页面中

用MXML标签向LoginForm中添加事件:事件的名称是什么,类型是什么
<mx:Metadata>
[EVENT(name="loginEvent",type="com.anmo.LoginFormEvent")]
</mx:Metadata>

在LoginForm中为点击按钮时注册事件流

<mx:Script>
<![CDATA[
import com.anmo.LoginFormEvent;
//定义鼠标单击事件,将用户名、密码带着发送了出去
internal function onClick(evt:MouseEvent):void{
var e:LoginFormEvent = new LoginFormEvent("loginEvent");
e.name = txt_username.text;
e.password = txt_password.text;
dispatchEvent(e);
}
]]>
</mx:Script>


然后将事件添加到按钮中,和HTML添加方式一样click="onClick(event)"

4、现在当点击按钮时会发送事件,并且带上用户名、密码,但是没有地方接收,所以要在主页面中接收
<ns1:LoginForm x="256" y="87" id="loginForm" loginEvent="login(event)">
</ns1:LoginForm>
//loginEvent="login(event)"等同于loginForm.addEventListerner("loginEvent",login)

login方法的代码:

<mx:Script>
<![CDATA[
import mx.controls.Alert;
import com.anmo.LoginFormEvent;
//响应事件,在方法中接收发送的用户名、密码
internal function login(evt:LoginFormEvent):void{
if(evt.name == "anmo" && evt.password == "admin"){
Alert.show("你已经成功登陆","提示");
}else{
Alert.show("对不起,输入的信息有误","提示");
}
}
]]>
</mx:Script>


———————————————————————————————————————————————————————————
下面是全代码:

主页面:

<?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 mx.controls.Alert;
import com.anmo.LoginFormEvent;
//响应事件,在方法中接收发送的用户名、密码
internal function login(evt:LoginFormEvent):void{
if(evt.name == "anmo" && evt.password == "admin"){
Alert.show("你已经成功登陆","提示");
}else{
Alert.show("对不起,输入的信息有误","提示");
}
}
]]>
</mx:Script>
<ns1:LoginForm x="256" y="87" id="loginForm" loginEvent="login(event)">
</ns1:LoginForm>

</mx:Application>



LoginForm组件:

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="200" borderColor="#5DD8F2" title="用户登录" fontSize="12">

<mx:Metadata>
[Event(name="loginEvent",type="com.anmo.LoginFormEvent")]
</mx:Metadata>

<mx:Script>
<![CDATA[
import com.anmo.LoginFormEvent;
//定义鼠标单击事件,将用户名、密码带着发送了出去
internal function onClick(evt:MouseEvent):void{
var e:LoginFormEvent = new LoginFormEvent("loginEvent");
e.name = txt_username.text;
e.password = txt_password.text;
dispatchEvent(e);
}
]]>
</mx:Script>
<mx:Label x="72" y="36" text="用户名:" fontSize="12" fontWeight="bold"/>
<mx:Label x="72" y="82" text="密 码:" fontWeight="bold" fontSize="12"/>
<mx:TextInput x="146" y="34" id="txt_username"/>
<mx:TextInput x="146" y="80" id="txt_password" displayAsPassword="true"/>
<mx:Button x="158" y="126" label="登 录" id="btn_submit" fontWeight="bold"
fontSize="12" click="onClick(event)"/>

</mx:Panel>



自定义事件类:LoginFormEvent

package com.anmo
{
import flash.events.Event;

/**
* 此类用于存放用户名和密码
*/
public class LoginFormEvent extends Event
{
public var name:String = "";
public var password:String = "";
public function LoginFormEvent(type:String)
{
super(type, false, false);
}

}
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值