Flex4 Alert PopupManager 示范

Flex4 Alert PopupManager 示例

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。