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>

 ..