Flex利用MDI模拟用户登入设计

 在看了 思远(BonaShen)博客 中的 FLEX- MDI窗口开发实例 。然后有参考了 FlexMid。自己修改了一点代码用来简单的实现用户登入。即只有在用户正确输入用户名之后才能对系统进行操作，否则只能停留在登入界面的效果。

示例：（由于地址链接关系，请有IE,FF好像不行。或者自行下载：http://www.box.net/shared/6pfgq21ogg 测试：只要name==password就可！！）

 

源代码：

1.主界面程序：Login.mxml（一个壳子o(∩_∩)o...）

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns="ext.containers.windows.*" xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"       creationComplete="initFrame()">      <mx:Script>          <![CDATA[           import mx.controls.Alert;              public function initFrame():void{                   (new User()).showModal();                                }          ]]>      </mx:Script> </mx:Application>

2.登入框界面程序：User.mxml（简单的验证，你可以使用后台验证:RemoteObject,HttpService,WebService..you pick oneo(∩_∩)o...）

<?xml version="1.0" encoding="utf-8"?> <Window xmlns="ext.containers.windows.*" xmlns:mx="http://www.adobe.com/2006/mxml"      xmlns:flexmdi="flexmdi.containers.*" title="User Login" layout="absolute" width="330" height="228"      minButtonVisible="true" maxButtonVisible="true" closeButtonVisible="false" creationComplete="initUser()">      <mx:Script>           <![CDATA[               import mx.controls.Alert;               import mx.events.CloseEvent;               import mx.events.CloseEvent              public function initUser():void {                                }              public function checkUser():void {                  if(uname.text=="" || upass.text==""){                      Alert.show("请输入用户名和密码",null,1);                  }else if(uname.text == upass.text){                  // do something and then close the login frame                     closeWindow();                     (new AfterLogin()).showModal();                  } else {                      Alert.show("用户名或者密码不正确", null, 1);                  }                  }              public function isQuit():void{                 Alert.show("Seriously? Close it?", null, 3, null, handleAlertResponse);              }             public function handleAlertResponse(event:CloseEvent):void             {                 if(event.detail == mx.controls.Alert.YES)                 {                     closeWindow();                                      }             }           ]]>      </mx:Script>     <flexmdi:MDICanvas id="mdiCanvas" horizontalScrollPolicy="off" verticalScrollPolicy="off"             width="306" height="178" backgroundColor="#FFFFFF" backgroundAlpha="0">         <mx:Label x="23" y="28" text="Name:" width="69" fontSize="16"/>         <mx:Label x="23" y="75" text="Password:" fontSize="16"/>         <mx:TextInput id="uname" x="128" y="26" fontSize="16"/>         <mx:TextInput id="upass" x="128" y="73" fontSize="16" fontFamily="Times New Roman" width="160"/>         <mx:Button id="uexit" x="160" y="130" label="Exit" click="isQuit()" themeColor="#18FF00" fontSize="16"/>         <mx:Button x="50" y="130" label="Login" click="checkUser()" themeColor="#18FF00" fontSize="16"/>     </flexmdi:MDICanvas> </Window>

3.用户正确登入之后界面程序：（简单的问候o(∩_∩)o...）

<?xml version="1.0" encoding="utf-8"?> <Window xmlns="ext.containers.windows.*" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"> <mx:Label text="恭喜你哦，用户名和密码都对了" fontSize="16"/> </Window>

代码中需要用到的包ext.containers.windows.*，flexmdi.containers.*"附带的代码都有，你可以从后面提到的博客或者网站中下载到。

附件：http://www.box.net/shared/q5r9xt4row