Flex之登录界面

制作登录框界面

环境搭建：MyEclipse 6.5+Flex Builder 3 Plug-in

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 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="231" y="174" text="欢迎来到主页！" fontSize="15" color="#EAC248"/>
			</mx:AddChild>
		</mx:State>
	</mx:states>
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;//引用Arelt类
			private function loginHandle():void{
				if(txtUsername.text==""||txtPassword.text==""){//输入用户名和密码为空
					Alert.show("请输入完整数据!")
				}else{
					if(txtUsername.text=="admin"&&txtPassword.text=="123456"
					&&txtCheckCode.text.toLowerCase()==lblCheckCode.label.toLowerCase()){
						//Alert.show("登录成功！");
						currentState="index";//跳转到index状态
					}else{
						if(txtCheckCode.text.toLowerCase()!= lblCheckCode.label.toLocaleLowerCase()){
							Alert.show("校验码错误！");
							//重新生成校验码
							initApp();
						}else
						Alert.show("用户名或密码错误！");
					}
				}
			}
			private function resetHandle():void{//重置
				txtUsername.text="";
				txtPassword.text="";
				txtCheckCode.text="";
				initApp();
			}
			private function initApp():void{//显示校验码
				lblCheckCode.label=GenerateCheckCode();
			}
			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));
					//Alert.show(code);
					}else
					//"A"的ASCII码是65
					code = String.fromCharCode(65+(number % 26));
					checkCode +=code;
				}
					return checkCode;
			}
		]]>
	</mx:Script>
	<mx:Panel layout="absolute" id="panel1" title="用户登录" fontFamily="Georgia" fontSize="12" height="247" width="326" verticalCenter="-39" horizontalCenter="-150">
		<mx:Label x="41.5" y="33" text="用户名" id="label1"/>
		<mx:Label x="42.5" y="71" text="密码" id="label2"/>
		<mx:TextInput x="94.5" y="33" id="txtUsername"/>
		<mx:TextInput x="94.5" y="71" id="txtPassword" displayAsPassword="true"/>
		<mx:Button x="94.5" y="136" label="登录" id="btnLogin" click="loginHandle()"/>
		<mx:Button x="200.5" y="136" label="重置" id="btnReset" click="resetHandle()"/>
		<mx:Label x="42.5" y="109" text="校验码" id="label3"/>
		<mx:TextInput x="94.5" y="109" width="60" height="23" id="txtCheckCode"/>
		<mx:LinkButton x="162.5" y="109" id="lblCheckCode" width="60" height="23" click="initApp()" color="#FA1807"/>
	</mx:Panel>
</mx:Application>