下面是一个flex简单实例
开发工具:flex buider3
主要知识点:事件请求转发,其它相关信息有注释
首先在src下新建一个组件,命名为loginForm.mxml,在这个组件里,有两个标签,两个文件域,和一个按钮,相关代码如下:
<?
xml version
=
"
1.0
"
encoding
=
"
utf-8
"
?>
< mx:Panel xmlns:mx = " http://www.adobe.com/2006/mxml " layout = " absolute " width = " 400 " height = " 226 " borderColor = " #88F0DE " title = " 用户登陆 " fontSize = " 14 " >
< mx:Metadata >
// 使用系统事件进行提交
// [Event(name="loginEvent",type="flash.events.Event")]
// 使用自定义事件,在org.loginForm.LoginFormEvent里
[Event(name = " loginEvent " ,type = " org.loginForm.LoginFormEvent " )]
</ mx:Metadata >
< mx:Script >
<! [CDATA[
import org.loginForm.LoginFormEvent;
internal function onClick(evt:MouseEvent): void {
//系统事件进行请求转发
//this.dispatchEvent(new Event("loginEvent"));
//自定义事件请求转发
var lf:LoginFormEvent = new LoginFormEvent("loginEvent");
//把得到的用户名,密码传到事件里
lf.username = userName.text;
lf.password = password.text;
this.dispatchEvent(lf);
}
]] >
</ mx:Script >
< mx:Label x = " 48 " y = " 38 " text = " 用户名: " width = " 70 " height = " 26 " fontSize = " 15 " />
< mx:Label x = " 48 " y = " 92 " text = " 密 码: " width = " 70 " height = " 25 " fontSize = " 15 " />
< mx:TextInput x = " 126 " y = " 36 " id = " userName " />
< mx:TextInput x = " 126 " y = " 90 " id = " password " displayAsPassword = " true " />
< mx:Button x = " 228 " y = " 142 " label = " 登陆 " fontSize = " 15 " id = " login " click = " onClick(event) " />
</ mx:Panel >
< mx:Panel xmlns:mx = " http://www.adobe.com/2006/mxml " layout = " absolute " width = " 400 " height = " 226 " borderColor = " #88F0DE " title = " 用户登陆 " fontSize = " 14 " >
< mx:Metadata >
// 使用系统事件进行提交
// [Event(name="loginEvent",type="flash.events.Event")]
// 使用自定义事件,在org.loginForm.LoginFormEvent里
[Event(name = " loginEvent " ,type = " org.loginForm.LoginFormEvent " )]
</ mx:Metadata >
< mx:Script >
<! [CDATA[
import org.loginForm.LoginFormEvent;
internal function onClick(evt:MouseEvent): void {
//系统事件进行请求转发
//this.dispatchEvent(new Event("loginEvent"));
//自定义事件请求转发
var lf:LoginFormEvent = new LoginFormEvent("loginEvent");
//把得到的用户名,密码传到事件里
lf.username = userName.text;
lf.password = password.text;
this.dispatchEvent(lf);
}
]] >
</ mx:Script >
< mx:Label x = " 48 " y = " 38 " text = " 用户名: " width = " 70 " height = " 26 " fontSize = " 15 " />
< mx:Label x = " 48 " y = " 92 " text = " 密 码: " width = " 70 " height = " 25 " fontSize = " 15 " />
< mx:TextInput x = " 126 " y = " 36 " id = " userName " />
< mx:TextInput x = " 126 " y = " 90 " id = " password " displayAsPassword = " true " />
< mx:Button x = " 228 " y = " 142 " label = " 登陆 " fontSize = " 15 " id = " login " click = " onClick(event) " />
</ mx:Panel >
下面是处理表单的actionscript代码:包为org.LoginForm ,名为LoginFormEvent,该类需继承Event
package
org.loginForm
{
import flash.events.Event;
public class LoginFormEvent extends Event
{
public var username:String = "";
public var password:String = "";
public function LoginFormEvent(type:String)
{
super(type, false, false);
}
}
}
{
import flash.events.Event;
public class LoginFormEvent extends Event
{
public var username:String = "";
public var password:String = "";
public function LoginFormEvent(type:String)
{
super(type, false, false);
}
}
}
事件测试类,把loginForm.mxml添加到,名为event2.mxml mxml application文件里
<?
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 org.loginForm.LoginFormEvent;
import mx.controls.Alert;
// internal function login(evt:Event):void{
// Alert.show("你登陆成功","提示");
// }
internal function login(evt:LoginFormEvent): void {
if(evt.username == "gao" && evt.password == "qin"){
Alert.show("你登陆成功","提示");
}else{
Alert.show("你登陆失败");
}
}
public function init(): void {
fLogin.addEventListener("loginEvent",login);
}
]] >
</ mx:Script >
< ns1:loginForm x = " 34 " y = " 90 " id = " fLogin " loginEvent = " login(event) " >
</ ns1:loginForm >
</ mx:Application >
< mx:Application xmlns:mx = " http://www.adobe.com/2006/mxml " layout = " absolute " xmlns:ns1 = " * " >
< mx:Script >
<! [CDATA[
import org.loginForm.LoginFormEvent;
import mx.controls.Alert;
// internal function login(evt:Event):void{
// Alert.show("你登陆成功","提示");
// }
internal function login(evt:LoginFormEvent): void {
if(evt.username == "gao" && evt.password == "qin"){
Alert.show("你登陆成功","提示");
}else{
Alert.show("你登陆失败");
}
}
public function init(): void {
fLogin.addEventListener("loginEvent",login);
}
]] >
</ mx:Script >
< ns1:loginForm x = " 34 " y = " 90 " id = " fLogin " loginEvent = " login(event) " >
</ ns1:loginForm >
</ mx:Application >