Flex4中的PopupManager类似模仿桌面用户界面的弹出窗口,也有些像JS中的弹出界面可操作,底层界面灰暗并禁用掉。
先创建一个需要被弹出的窗口文件,代码如下:
<?xml version="1.0" encoding="utf-8"?>
<mx: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"
layout="vertical" title="弹出窗口"
width="600" height="400" showCloseButton="true"
close="PopUpManager.removePopUp(this);">
<fx:Script>
<![CDATA[
import mx.managers.PopUpManager;
]]>
</fx:Script>
<s:Group width="100%">
<s:Label text="2014-5-14 09:28:26"/>
</s:Group>
<s:TextArea id="textArea" width="100%" height="100%"/>
</mx:TitleWindow>
showCloseButton=true 显示关闭按钮并处理Close时间。
测试程序如下:
<?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"
width="100%" height="100%"
initialize="init()">
<fx:Script><![CDATA[
import mx.events.CloseEvent;
import mx.controls.Alert;
import mx.managers.PopUpManager;
private function showAlert(event:MouseEvent):void {
Alert.show('这是一个弹出窗口!', '弹出窗口测试');
}
private function showPopUp(event:MouseEvent):void {
//PopUpManager 相关初始化工作,先创建,调整位置,安排监听事件。
var titleWindow:TestTitleWindow1 = TestTitleWindow1(
PopUpManager.createPopUp(this, TestTitleWindow1, true));
titleWindow.x = 50;
titleWindow.y = 50;
titleWindow.addEventListener(CloseEvent.CLOSE, onCloseTTW);
}
//弹出窗口关闭时间函数
private function onCloseTTW(event:CloseEvent):void {
var ttw:TestTitleWindow1 = TestTitleWindow1(event.target);
TextArea1.text = ttw.textArea.text;
}
]]></fx:Script>
<s:layout>
<s:VerticalLayout paddingLeft="10" paddingTop="10"
paddingRight="10" paddingBottom="10"/>
</s:layout>
<s:Button label="测试Alert" click="showAlert(event)"/>
<s:Button label="测试TestTitleWindow" click="showPopUp(event)"/>
<s:Label text="TestTitleWindow:"
fontWeight="bold"/>
<s:TextArea id="TextArea1" width="100%"
height="100%"/>
</s:Application>
相关解释在注释中,在ShowPopUp方法中可见创建弹出窗口的方法以及回调。ActionScript对于创建弹出窗口的代码设计由此可见要优于JavaScript。