用户界面设计

Flex界面设计(一)

使用组件可快速有效开发应用界面。以下介绍最简单的几个组件应用过程，登陆作为检验合法用户身份的有效方法，被广泛应用于Web开发中。1 单击File-New-Flex Project命令，弹出New Flex Project对话框。2 在Preject Name文本框中输入工程名称。单击Next按钮，弹出设置工程路径对话框。3 在"Folder"文本框中输入工程路径。单击"Finish"按钮。4 单击编辑器上的"Design"按钮，切换至设计模式。从左下角Compinents(组件面板)中拖拽Panel组件到编辑区，拖拽两个文本标签，两个文本框，两个按钮到编辑区。5 单击编辑区上方的Source按钮，切换至代码编辑区查看代码。
< ?xml version="1.0" encoding="utf-8"?>
<mx xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
</mx><mx>
< ![CDATA[
import mx.controls.Alert //调用Alert类，弹出警告
private function loginHandle():void
{
if(txtUsername.text==""||txtPassword.text=="") //用户密码为空
{
Alert.show("请输入完整数据！");
}
else
{
//合法用户
if(txtUsername.text=="starrynight"&&txtPassword.text=="123456")
{
Alert.show("登陆成功！");
}
//登陆失败
else
{
Alert.show("用户名或密码错误！");
}
}
}
//重置函数
private function resetHandle():void
{
txtUsername.text=""; //用户清空
txtPassword.text=""; //密码清空
}
]]>
</mx>
<mx x="10" y="10" width="250" height="200" layout="absolute" title="用户登陆" fontsize="12">
</mx><mx x="13.5" y="26" text="用户名">
</mx><mx x="13.5" y="56" text="密码">
</mx><mx x="56.5" y="24" id="txtUsername">
</mx><mx x="56.5" y="54" id="txtPassword" displayaspassword="true">
</mx><mx x="44" y="97" label="登陆" click="loginHandle()">
</mx><mx x="117" y="97" label="重置" click="resetHandle()">
</mx>

按钮组件中的click事件监听对按钮的单击动作。以下代码定义了"loginHandle"函数，用以处理"登陆"事件。

private function loginHandle():void
{
if(txtUsername.text==""||txtPassword.text=="") //用户密码为空
{
Alert.show("请输入完整数据！");
}
else
{
//合法用户
if(txtUsername.text=="starrynight"&&txtPassword.text=="123456")
{
Alert.show("登陆成功！");

}
//登陆失败
else
{
Alert.show("用户名或密码错误！");
}
}
}

<mx x="44" y="97" label="登陆" click="loginHandle()"></mx>

重置事件处理函数"resetHandle"

private function resetHandle():void
{
txtUsername.text=""; //用户清空
txtPassword.text=""; //密码清空
}

<mx x="117" y="97" label="重置" click="resetHandle()"></mx>

最后Ctrl+F11运行

用户名：starrynight
密码：123456