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>

 ..