Flex弹出窗口

1、TitleWindow布局容器实际上是一个弹出窗口的面板容器。与面板Panel布局容器不同的是，TitleWindow有一个关闭按钮，用户还可以拖动这个窗口。这个弹出可以是模态的，也可以是非模态的。

8.1 创建TitleWindow容器
要创建一个弹出窗体，需要用到PopUpManager类。在此类中createPopUp()方法可以创建一个弹出窗体。其语法格式为： public static createPopUp(parent:DisplayObject, class:Class, modal:Boolean = false):IFlexDisplayObject 参数说明：
parent：父对象。
class：弹出窗体的类。
modal：是否为模态窗体。

 

示例1：

main.mxml

<?xml version="1.0" encoding="utf-8"?>  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">      <mx:Script>          <![CDATA[             import mx.managers.PopUpManager;                          // 创建窗体对象             private var pop:MyTitleWindow;             // 按钮单击事件             private function btnLoginWnd_click():void             {                 // 创建弹出窗体                 pop = MyTitleWindow(PopUpManager.createPopUp(this, MyTitleWindow, false));                 // 设置弹出窗体是否显示关闭按钮                 pop.showCloseButton = false;                 // 弹出窗体按钮单击事件                 pop.btnLogin.addEventListener(MouseEvent.CLICK, btnLogin_click);             }                          // 登录按钮单击事件             private function btnLogin_click(e:MouseEvent):void             {                 // 返回登录名并设置文本标签内容                 lbUser.text = "登录名：" + pop.userName.text;                 // 移除弹出窗体                 PopUpManager.removePopUp(pop);             }         ]]>      </mx:Script>      <mx:Label id="lbUser" text="还没有登录" fontSize="14" x="39" y="10"/>      <mx:Button id="btnLoginWnd" click="btnLoginWnd_click()" x="39" y="41"           fontSize="12" label="登录"/>  </mx:Application>  

 MyTitleWindow.mxml：

<?xml version="1.0" encoding="utf-8"?>  <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">      <mx:Form>          <mx:FormHeading label="用户登录" fontSize="16"/>          <mx:FormItem label="用户名：" fontSize="12">              <mx:TextInput id="userName"/>          </mx:FormItem>          <mx:FormItem label="密码：" fontSize="12">              <mx:TextInput displayAsPassword="true"/>          </mx:FormItem>          <mx:FormItem>              <mx:Button id="btnLogin" label="登录" fontSize="12"/>          </mx:FormItem>      </mx:Form>  </mx:TitleWindow>  

 

示例2：

 

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"        layout="vertical"        verticalAlign="middle"        backgroundColor="white"        creationComplete="init()" viewSourceURL="srcview/index.html">    <mx:Script>        <![CDATA[            import mx.controls.Label;            import mx.events.CloseEvent;            import mx.containers.TitleWindow;            import mx.managers.PopUpManager;            private var titleWindow:TitleWindow;            private function init():void {                var label:Label = new Label();                label.text = "Hello world";                titleWindow = new TitleWindow();                titleWindow.title = "Custom title";                titleWindow.showCloseButton = true;                titleWindow.width = 240;                titleWindow.height = 180;                titleWindow.addEventListener(CloseEvent.CLOSE, titleWindow_close);                titleWindow.addChild(label);                PopUpManager.addPopUp(titleWindow, this, true);                PopUpManager.centerPopUp(titleWindow);            }            private function titleWindow_close(evt:CloseEvent):void {                PopUpManager.removePopUp(titleWindow);            }        ]]>    </mx:Script>    <mx:Button label="Launch TitleWindow" click="init()" /></mx:Application>

 

示例3（自己例子）：

addEventListener(MouseEvent.CLICK, clickHandle);/** * 展示系统详情 * */public function clickHandle(event:MouseEvent):void{var e:SequenceElement=event.currentTarget as SequenceElement;var application:EsbApplication = e.getObj as EsbApplication;if(detailObj == null){detailObj = ApplicationDetail(PopUpManager.createPopUp(this, ApplicationDetail, false))}//Alert.show("event.stageX : " + event.stageX + " event.stageY : " + event.stageY,"提示");//Alert.show("event.localX : " + event.localX + " event.localY : " + event.localY,"提示");//Alert.show("mouseX : " + this.mouseX + " mouseX : " + mouseY,"提示");detailObj.application = application;detailObj.x = event.stageX;detailObj.y = event.stageY;detailObj.showCloseButton = true;detailObj.addEventListener(CloseEvent.CLOSE, windowClose);}/** * 详情窗口关闭 * */public function windowClose(evt:CloseEvent):void {  PopUpManager.removePopUp(detailObj);  detailObj = null;}  

 ApplicationDetail.mxml:

<?xml version="1.0" encoding="utf-8"?><mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" title="系统基本信息"fontSize="12" width="300" height="150" backgroundColor="#F7F7F7"><mx:Script><![CDATA[import com.model.EsbApplication;[Bindable]var application:EsbApplication;]]></mx:Script><mx:Form width="95%" height="90%" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"><mx:FormItem label="系统ID" fontSize="12"><mx:Label id="ID" text="{application.id}"/></mx:FormItem><mx:FormItem label="系统CODE" fontSize="12"><mx:Label id="appCode" text="{application.applicationCode}"/></mx:FormItem><mx:FormItem label="系统名称" fontSize="12"><mx:Label id="applicationName" text="{application.applicationName}"/></mx:FormItem><mx:FormItem label="系统描述" fontSize="12"><mx:Label id="applicationDesc" text="{application.applicationDesc}"/></mx:FormItem></mx:Form></mx:TitleWindow>

 ..