Flex开发小结（2）Flex弹出窗口

1、PopUpManager （singleton） 类用于创建新的顶级窗口，还可以在位于所有其他可见窗口上面的层次中放置或删除这些窗口。有关分层的说明，请参见 SystemManager。此类适用于 ComboBox 控件中的弹出对话框、菜单和下拉列表等类似组件。

2、PopUpManager 还可以提供模态，使弹出窗口下方的窗口无法接收鼠标事件；当用户在窗口外部单击鼠标时，它还可以提供一个事件，供开发人员选择退出窗口还是警告用户。

示例如下：当点击按钮时，弹出窗口。

<?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="955" minHeight="600">
	
	<fx:Script>
		<![CDATA[
			import mx.containers.Panel;
			import mx.managers.PopUpManager;
			protected function button1_clickHandler(event:MouseEvent):void
			{
				var panel:Panel = new Panel();
				panel.width = 300;
				panel.height = 300;
				panel.title = "这是PopUpMananger弹出窗口";
				panel.x = 20;
				panel.y = 20;
				PopUpManager.addPopUp(panel,this,true);
			}
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	
	<s:Button label="点击" click="button1_clickHandler(event)"/>
</s:Application>

结果如下图：

 

 

3、PopUpManager的 addPopUp方法：

弹出顶级窗口。最好调用   removePopUp()  来删除使用   addPopUp()  方法创建的弹出窗口。如果该类实现了 IFocusManagerContainer，则该窗口将拥有自己的 FocusManager；因此，当用户使用 Tab 键在各个控件之间导航时，将只能访问此窗口中的控件。

示例

var tw:TitleWindow = new TitleWindow();
        tw.title = "My Title";
        mx.managers.PopUpManager.addPopUp(tw, pnl, false);

使用 TitleWindow 类的 tw 实例创建一个弹出窗口，并使用 pnl 作为 Sprite 来确定放置此弹出窗口的位置。此窗口将定义为非模态窗口。

参数:

window  要弹出的 IFlexDisplayObject。

parent  DisplayObject，用于确定要使用 SystemManager 的哪些层，以及（可选）确定居中新的顶级窗口所用的参考点。它可能并非弹出窗口的实际父项，因为所有弹出窗口都以 SystemManager 为父项。

modal  如果为   true，则该窗口为模态窗口，也就是说在删除该窗口之前，用户将无法与其他弹出窗口交互。

childList  要将弹出窗口添加到其中的子项列表。 PopUpManagerChildList.APPLICATION、 PopUpManagerChildList.POPUP  或   PopUpManagerChildList.PARENT（默认）中的任意一项。

moduleFactory  此弹出窗口应在其中查找其嵌入字体和样式管理器的 moduleFactory。

4、PopUpManager的centerPopUp方法：

使位于调用   createPopUp()  或   addPopUp()  方法期间使用的任何窗口上面的弹出窗口居中显示。 

示例如下：

<?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">
	
	<fx:Script>
		<![CDATA[
			import mx.containers.Panel;
			import mx.managers.PopUpManager;
			protected function button1_clickHandler(event:MouseEvent):void
			{
				var panel:Panel = new Panel();
				panel.width = this.width*0.5;
				panel.height = this.height*0.5;
				panel.title = "这是PopUpMananger弹出窗口";
				//panel.x = 20;
				//panel.y = 20;
				PopUpManager.addPopUp(panel,this,true);//true表示弹出的是模态窗口
				PopUpManager.centerPopUp(panel);//使弹出窗口居中显示
				
			}
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:Button label="点击" click="button1_clickHandler(event)"/>
</s:Application>

结果如下图：

 

5、PopUpManager的removePopUp方法：

删除由   createPopUp()  或   addPopUp()  方法弹出的弹出窗口。

另外，如果是非模态的，可能在点击程序其它部分的时候窗口就不见了，但是它并没有移除，怎么让它出来呢？这个时候就需要 PopUpManager  的另外一个方法： bringToFront()，这个方法可以把窗口放到最前。你可以控制，让程序第一次的时候是创建对话框，以后就是把窗口放到最前。

6、TitleWindow类：

TitleWindow 类将 Panel 扩展为包含一个关闭按钮和移动区域。

TitleWindow 设计为一个弹出窗口。请勿在 MXML 中将 TitleWindow 创建为应用程序的一部分，而是，通常根据 TitleWindow 类创建自定义 MXML 组件，然后使用 PopUpManager.createPopUp() 方法弹出该组件，使用 PopUpManager.removePopUp() 方法删除该组件。

示例如下：

<?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">

	

	<fx:Script>

		<![CDATA[

			import mx.containers.Panel;

			import mx.managers.PopUpManager;

			import mx.managers.PopUpManagerChildList;

			

			import spark.components.TitleWindow;

			protected function button1_clickHandler(event:MouseEvent):void

			{

				/**

				var panel:Panel = new Panel();

				panel.width = this.width*0.5;

				panel.height = this.height*0.5;

				panel.title = "这是PopUpMananger弹出窗口";

				//panel.x = 20;

				//panel.y = 20;

				PopUpManager.addPopUp(panel,this,false);//true表示弹出的是模态窗口

				PopUpManager.centerPopUp(panel);//使弹出窗口居中显示

				 **/

				

				var tw:TitleWindow = new TitleWindow();

				tw.title = "My Title";

				tw.width = 300;

				tw.height = 200;

				PopUpManager.addPopUp(tw, this, true);

				PopUpManager.centerPopUp(tw);

			}

			

		]]>

	</fx:Script>

	

	<fx:Declarations>

		<!-- 将非可视元素（例如服务、值对象）放在此处 -->

	</fx:Declarations>

	<s:Button label="点击->弹出窗口" click="button1_clickHandler(event)"/>

</s:Application>

结果如下：