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

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页