Flex 登录界面-优快云博客

本文介绍了一个使用 Flex 技术实现的登录界面示例，详细展示了界面布局、状态管理和交互逻辑，包括用户验证、验证码生成及刷新等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp();">
<mx:states>
  <mx:State name="index">
   <mx:RemoveChild target="{panel1}"/>
   <mx:AddChild position="lastChild">
    <mx:Label x="104" y="88" text="欢迎来到主界面" width="203" height="165" fontSize="16"/>
   </mx:AddChild>
  </mx:State>
</mx:states>
<mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   private function loginHandle():void{
    if(txtUsername.text =="vissul"){
     if(txtCheckCode.text == lblCheckCode.text){
     //Alert.show("登陆成功!");
     currentState = "index";
     }else{
     Alert.show("校验码错误!");
     }
    }else{
     Alert.show("用户名和密码错误!");
    }
   }
   private function resetHandle():void{
    txtUsername.text = "";
    txtPassword.text = "";
    txtCheckCode.text = "";
   }
   // 生成随机码
   private function GenerateCheckCode():String{
    //初始化
    var ran:Number;
    var number:Number;
    var code:String;
    var checkCode:String ="";
    //生成四位随机数
    for(var i:int = 0 ;i<4;i++){
     ran = Math.random();
     number = Math.round(ran*1000);
     if(number % 2 ==0){
      //"0" 的ASCII码是48
      code = String.fromCharCode(48+(number %10));
     }else{
      //"A"的ASCII码是65
      code = String.fromCharCode(65+(number %26));
     }
     checkCode += code;
    }
    return checkCode;
   }
   private function initApp():void{
    //显示校验码
    lblCheckCode.text = GenerateCheckCode();
   }
  ]]>
</mx:Script>
<mx:Panel x="108" y="71" width="326" headerColors="247" layout="absolute" title="用户登陆" fontFamily="Georgia" fontSize="12" id="panel1">
  <mx:Label x="41.5" y="12" text="用户名:"/>
  <mx:Label x="41.5" y="56" text="密   码:" height="20"/>
  <mx:TextInput x="94.5" y="10" id="txtUsername"/>
  <mx:TextInput x="94.5" y="54" id="txtPassword" displayAsPassword="true"/>
  <mx:Label x="41" y="98" text="验证码:"/>
  <mx:TextInput x="94" y="98" width="80" id="txtCheckCode"/>
  <mx:Label x="182" y="98" text="Label" id="lblCheckCode" width="48.5" height="25"/>
  <mx:Label x="238.5" y="100" text="看不清楚?" width="67.5" click="initApp();" color="#1F45C3"/>
  <mx:Button x="79.5" y="135" label="登陆" id="btnLogin" click="loginHandle();"/>
  <mx:Button x="178.5" y="135" label="重置" id="btnReset" click="resetHandle();"/>
</mx:Panel>

</mx:WindowedApplication>