这个可就有点高端了哦
代码分成三个部分,之前也有提到过,代码分离,让代码更整洁,更有可读性,层层递进,更有逻辑性!
我们从里层往外层建,也就是说,先建as文件,再建mxml组件,再建应用程序,当然是一个继承一个的。
AS文件代码:
package components.control
{
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.net.navigateToURL;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.managers.PopUpManager;
import spark.components.Button;
import spark.components.Form;
import spark.components.TextInput;
import spark.components.TitleWindow;
public class Login extends TitleWindow
{
public var username:TextInput;
public var password:TextInput;
public var submit:Button;
public var closeWindow:Button;
/**
* 构造器
*/
public function Login()
{
super();
addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);
}
/**
* 组件初始化完成后调用的函数
*/
protected function creationCompleteHandler(event:FlexEvent):void
{
submit.addEventListener(MouseEvent.CLICK, submit_clickHandler);
closeWindow.addEventListener(MouseEvent.CLICK, closeWindow_clickHandler);
}
/**
* 登录校验
*/
protected function submit_clickHandler(event:MouseEvent):void
{
var usernameValue:String = username.text;
var passwordValue:String = password.text;
if(usernameValue == "" || passwordValue == "")
{
Alert.show("用户名或密码不能为空", "提示");
}
else if(usernameValue == "root" && passwordValue == "123")
{
Alert.show("登录成功", "提示");
PopUpManager.removePopUp(this);
}
else
{
Alert.show("用户名或密码不正确,请重新输入", "提示");
}
}
/**
* 关闭浏览器
*/
protected function closeWindow_clickHandler(event:MouseEvent):void
{
navigateToURL(new URLRequest('javascript:window.opener=null;window.close()'),'_self');
}
}
}
嗯,上面是有备注的,应该能够看明白吧~!
mxml组件代码:
<?xml version="1.0" encoding="utf-8"?>
<control:Login 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:components="components.*" xmlns:control="components.control.*">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Form>
<s:FormHeading label="用户登录"/>
<s:FormItem label="用户名:">
<s:TextInput id="username"/>
</s:FormItem>
<s:FormItem label="密码:">
<s:TextInput id="password"
displayAsPassword="true"/>
</s:FormItem>
<s:Button id="submit"
x="25" y="168"
label="登录"/>
<s:Button id="closeWindow"
x="138" y="168"
label="取消"/>
</s:Form>
</control:Login>
应用程序就简单的多了,代码:
<?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:components="components.*"
minWidth="955" minHeight="600" xmlns:view="components.view.*">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<view:LoginView />
</s:Application>
从三级结构可以看出,他们是从里往外继承的,as部分负责逻辑,mxml负责布局界面,应用程序负责运行,条理清晰,思路明确,
大家也一样要按这个思路来,这样的话,不管是自己还是别人都能很快理解~!这是一个好习惯,要养成。下面把运行的图片发给
大家看看,希望不要代码直接复制就去用,看一遍,把程序读懂,然后自己试着去敲一遍,那样印象更深刻!
运行结果图:
账号 密码正确时:
账号或者密码不正确时:
点击取消按钮,关闭页面:
好了,今天就到这里吧,记得举一反三,自己开动脑筋做一个更给力的!!