本文同时发表在:一路风尘
在看了思远(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.*"附带的代码都有,你可以从前面提到的博客或者网站中下载到。