Mar 21

Flex中利用PopUpManager类创建自定义pop-up窗口的例子

FlexAdd comments

如果你只是需要得到一个简单的yes/no的确认结果那Alert是一个不错的选择，但是如果需要取得用户名字或者其他信息呢？JavaScript有一个prompt()，而Flex则有一个非常强壮的PopUpManager类。

接下来的例子演示了如何创建一个包括一个标签（Label），一个输入框（TextInput）和两个按钮的自定义pop-up对话框。并且演示了如何利用ActionScript来代替MXML来创建多个Flex控件和容器。

下面是完整代码：


Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init()">
  3.  
  4.     <mx:Script>
  5.         <![CDATA[
  6.             import mx.containers.ControlBar;
  7.             import mx.containers.Panel;
  8.             import mx.containers.VBox;
  9.             import mx.controls.Button;
  10.             import mx.controls.Label;
  11.             import mx.controls.Spacer;
  12.             import mx.controls.TextInput;
  13.             import mx.managers.PopUpManager;
  14.  
  15.             private var panel:Panel;
  16.  
  17.             private function init():void {
  18.                 var vb:VBox = new VBox();
  19.                 var label:Label = new Label();
  20.                 var textInput:TextInput = new TextInput();
  21.  
  22.                 var cb:ControlBar = new ControlBar();
  23.                 var s:Spacer = new Spacer();
  24.                 var b1:Button = new Button();
  25.                 var b2:Button = new Button();
  26.  
  27.                 s.percentWidth = 100;
  28.  
  29.                 b1.label = "OK";
  30.                 b1.addEventListener(MouseEvent.CLICK, closePopUp);
  31.                 b2.label = "Cancel";
  32.                 b2.addEventListener(MouseEvent.CLICK, closePopUp);
  33.  
  34.                 cb.addChild(s);
  35.                 cb.addChild(b1);
  36.                 cb.addChild(b2);
  37.  
  38.                 label.text = "Please enter your name:";
  39.  
  40.                 vb.setStyle("paddingBottom", 5);
  41.                 vb.setStyle("paddingLeft", 5);
  42.                 vb.setStyle("paddingRight", 5);
  43.                 vb.setStyle("paddingTop", 5);
  44.                 vb.addChild(label);
  45.                 vb.addChild(textInput);
  46.  
  47.                 panel = new Panel();
  48.                 panel.title = "My Title";
  49.                 panel.width = 240;
  50.                 panel.height = 180;
  51.                 panel.addChild(vb);
  52.                 panel.addChild(cb);
  53.             }
  54.  
  55.             private function closePopUp(evt:MouseEvent):void {
  56.                 PopUpManager.removePopUp(panel);
  57.             }
  58.  
  59.             private function createPopUp(evt:MouseEvent):void {
  60.                 PopUpManager.addPopUp(panel, this, true);
  61.                 PopUpManager.centerPopUp(panel);
  62.             }
  63.         ]]>
  64.     </mx:Script>
  65.  
  66.     <mx:Button label="Launch Pop-Up" click="createPopUp(event)" />
  67.  
  68. </mx:Application>
下面是Demo（可以右键察看源代码）：

原文作者：Peter deHaan 翻译：minidxer

written by Minidxer  |  tags: , , , ,

Related Post

One Response to “Flex中利用PopUpManager类创建自定义pop-up窗口的例子”

Trackbacks

Leave a Reply