Flex4.5实现用户登录功能

这个可就有点高端了哦

代码分成三个部分，之前也有提到过，代码分离，让代码更整洁，更有可读性，层层递进，更有逻辑性！

我们从里层往外层建，也就是说，先建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负责布局界面，应用程序负责运行，条理清晰，思路明确，

大家也一样要按这个思路来，这样的话，不管是自己还是别人都能很快理解~！这是一个好习惯，要养成。下面把运行的图片发给

大家看看，希望不要代码直接复制就去用，看一遍，把程序读懂，然后自己试着去敲一遍，那样印象更深刻！

运行结果图：

账号 密码正确时：

账号或者密码不正确时：

 

点击取消按钮，关闭页面：

 

好了，今天就到这里吧，记得举一反三，自己开动脑筋做一个更给力的！！