flex_弹出式窗口与数据的结合事例；

效果图：

=>WindowLogin.mxml自定义组件

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
?? ??? ??? ??? xmlns:s="library://ns.adobe.com/flex/spark"
?? ??? ??? ??? xmlns:mx="library://ns.adobe.com/flex/mx"
?? ??? ??? ??? width="280" height="180" title="弹出式窗口与数据的结合示例" close="onCloseWin()">
?? ?
?? ?<fx:Metadata>
?? ??? ?[Event(name="loggingIn")]
?? ?</fx:Metadata>
?? ?<fx:Script>
?? ??? ?<![CDATA[
?? ??? ??? ?import mx.managers.PopUpManager;
?? ??? ??? ?
?? ??? ??? ?/**
?? ??? ??? ? * 关闭窗口；
?? ??? ??? ? */
?? ??? ??? ?protected function onCloseWin():void{
?? ??? ??? ??? ?PopUpManager.removePopUp(this);
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?/**
?? ??? ??? ? * 窗口属性设置_双向绑定数据，故不需要set方法；
?? ??? ??? ? */
?? ??? ??? ?[Bindable]
?? ??? ??? ?private var _username:String = "";
?? ??? ??? ?public function get username():String{
?? ??? ??? ??? ?return _username;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?[Bindable]
?? ??? ??? ?private var _password:String = "";
?? ??? ??? ?public function get password():String{
?? ??? ??? ??? ?return _password;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?// 静态事件常量：
?? ??? ??? ?public static const LOGGING_IN:String = "loggingIn";
?? ??? ??? ?
?? ??? ??? ?/**
?? ??? ??? ? * 登录按钮；
?? ??? ??? ? */
?? ??? ??? ?protected function submitBtn_clickHandler(event:MouseEvent):void
?? ??? ??? ?{
?? ??? ??? ??? ?// 分批事件：
?? ??? ??? ??? ?dispatchEvent(new Event(LOGGING_IN));
?? ??? ??? ??? ?
?? ??? ??? ??? ?// 关闭窗口：
?? ??? ??? ??? ?onCloseWin();
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ?]]>
?? ?</fx:Script>
?? ?
?? ?<s:Form width="100%">
?? ??? ?<s:FormItem label="用户名" width="100%">
?? ??? ??? ?<s:TextInput id="usernamefield" text="@{_username}" width="150"/>
?? ??? ?</s:FormItem>
?? ??? ?<s:FormItem label="密? 码" width="100%">
?? ??? ??? ?<s:TextInput id="passwordfield" displayAsPassword="true" text="@{_password}" width="150"/>
?? ??? ?</s:FormItem>
?? ??? ?<s:HGroup width="100%" horizontalAlign="right">
?? ??? ??? ?<s:Button id="submitBtn" label="登录" click="submitBtn_clickHandler(event)"/>
?? ??? ?</s:HGroup>
?? ?</s:Form>
?? ?
</s:TitleWindow>

=>主应用程序

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" ?? ??? ??? ??? xmlns:s="library://ns.adobe.com/flex/spark" ?? ??? ??? ??? xmlns:mx="library://ns.adobe.com/flex/mx" ?? ??? ??? ??? minWidth="1024" minHeight="768" pageTitle="TheStudioOfCenyebao" ?? ??? ??? ??? applicationComplete="initFn()"> ?? ? ?? ?<fx:Script> ?? ??? ?<![CDATA[ ?? ??? ??? ?import com.learn.Window.WindowLogin; ?? ??? ??? ? ?? ??? ??? ?import mx.managers.PopUpManager; ?? ??? ??? ? ?? ??? ??? ?protected var loginWin:WindowLogin; ?? ??? ??? ?protected function initFn():void{ ?? ??? ??? ??? ?loginWin = new WindowLogin();?? ?// 实例化窗体； ?? ??? ??? ??? ? ?? ??? ??? ??? ?// 监听登录窗口分派的事件： ?? ??? ??? ??? ?loginWin.addEventListener(WindowLogin.LOGGING_IN,onLogin,false,true); ?? ??? ??? ?} ?? ??? ??? ? ?? ??? ??? ?protected function onLogin(event:Event):void{ ?? ??? ??? ??? ?userInfo.text = "UserInfo: " + loginWin.username + "(" + loginWin.password + ")"; ?? ??? ??? ?} ?? ??? ??? ? ?? ??? ??? ?protected function openWinBtn_clickHandler(event:MouseEvent):void ?? ??? ??? ?{ ?? ??? ??? ??? ?PopUpManager.addPopUp(loginWin,this,true); ?? ??? ??? ??? ?PopUpManager.centerPopUp(loginWin); ?? ??? ??? ?} ?? ??? ??? ? ?? ??? ?]]> ?? ?</fx:Script> ?? ?<s:Label id="userInfo" horizontalCenter="0" verticalCenter="-20" fontWeight="bold" fontSize="16"/> ?? ?<s:Button id="openWinBtn" horizontalCenter="0" verticalCenter="0" label="登录" click="openWinBtn_clickHandler(event)"/> </s:Application>