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