Mar 21

Flex中利用PopUpManager类创建自定义MXML组件并且在pop-up框中显示类名称的例子

FlexAdd comments

在前面的Flex中利用PopUpManager类创建自定义pop-up窗口的例子中，我们了解了Flex中如何利用PopUpManager类创建pop-up窗口。

接下来的例子中我们来了解一下如何创建一个MXML组件，传递类的名称给静态（static）的PopUpManager.createPopUp()事件并且显示在pop-up对话框中。

下面是完整代码：


Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.managers.PopUpManager;
  10.  
  11.             private function launchMoreInfo():void {
  12.                 var win:Dialog = PopUpManager.createPopUp(this, Dialog, true) as Dialog;
  13.                 PopUpManager.centerPopUp(win);
  14.             }
  15.         ]]>
  16.     </mx:Script>
  17.  
  18.     <mx:ApplicationControlBar dock="true">
  19.         <mx:Button id="button"
  20.                 label="Click for more information"
  21.                 click="launchMoreInfo();" />
  22.     </mx:ApplicationControlBar>
  23.  
  24. </mx:Application>
下面是对话框代码：
Download: Dialog.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- Dialog.mxml -->
  3. <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         title="More information"
  6.         showCloseButton="true"
  7.         width="400"
  8.         height="300"
  9.         close="titleWindow_close(event);">
  10.  
  11.     <mx:Script>
  12.         <![CDATA[
  13.             import mx.events.CloseEvent;
  14.             import mx.managers.PopUpManager;
  15.  
  16.             private function titleWindow_close(evt:CloseEvent):void {
  17.                 PopUpManager.removePopUp(this);
  18.             }
  19.         ]]>
  20.     </mx:Script>
  21.  
  22.     <mx:String id="info" source="info.txt" />
  23.  
  24.     <mx:TextArea id="txt"
  25.             htmlText="{info}"
  26.             focusAlpha="0.0"
  27.             width="100%"
  28.             height="100%" />
  29.  
  30. </mx:TitleWindow>

下面是用于显示的文本文件：

Download: info.txt
  1. <font size="+2"><i>More Information...</i></font>
  2. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at arcu in lacus iaculis ultricies. Vivamus consectetuer. Donec vulputate aliquam leo. Nam metus. Aliquam nulla odio, ultrices vitae, nonummy eget, viverra accumsan, tellus. Curabitur neque ante, nonummy ut, fermentum eu, elementum a, ligula. Fusce hendrerit lectus ac velit. Suspendisse lorem pede, sagittis ac, fermentum non, auctor quis, nulla. Integer eu lacus sit amet justo vestibulum sodales. In euismod tellus eget magna. Vestibulum sed ante. Suspendisse eros libero, gravida ac, cursus et, porta vitae, lectus.</p>
下面是Demo（可以右键察看源代码）：

原文作者：Peter deHaan 翻译：minidxer

written by Minidxer  |  tags: , , , , , , ,

Related Post

Leave a Reply