Flex中如何利用键盘关闭(Esc)一个弹出窗口的例子

By Minidxer | August 6, 2008

接下来的例子演示了Flex中如何利用键盘关闭(Esc)一个弹出窗口。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

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="top"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.managers.PopUpManager;
  10.  
  11.             private function button_click(evt:MouseEvent):void {
  12.                 var popUpTitleWindow:PopUpTitleWindow = new PopUpTitleWindow();
  13.                 PopUpManager.addPopUp(popUpTitleWindow, this, true);
  14.             }
  15.         ]]>
  16.     </mx:Script>
  17.  
  18.     <mx:Button id="button"
  19.             label="Launch Window"
  20.             click="button_click(event);" />
  21.  
  22. </mx:Application>
下面是PopUpTitleWindow.mxml的代码：
Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         showCloseButton="true"
  4.         styleName="noPadding"
  5.         layout="absolute"
  6.         width="300"
  7.         height="200"
  8.         creationComplete="init();"
  9.         resize="init();"
  10.         close="titleWindow_close(event);"
  11.         keyDown="titleWindow_keyDown(event);">
  12.  
  13.     <mx:Style>
  14.         .noPadding {
  15.             paddingBottom: 0;
  16.             paddingTop: 0;
  17.             paddingLeft: 0;
  18.             paddingRight: 0;
  19.         }
  20.     </mx:Style>
  21.  
  22.     <mx:Script>
  23.         <![CDATA[
  24.             import mx.core.IFlexDisplayObject;
  25.             import mx.events.CloseEvent;
  26.             import mx.managers.PopUpManager;
  27.  
  28.             [Bindable]
  29.             public var source:String;
  30.  
  31.             private function init():void {
  32.                 PopUpManager.centerPopUp(this);
  33.                 this.setFocus();
  34.             }
  35.  
  36.             private function titleWindow_close(evt:CloseEvent):void {
  37.                 PopUpManager.removePopUp(evt.target as IFlexDisplayObject);
  38.             }
  39.  
  40.             private function titleWindow_keyDown(evt:KeyboardEvent):void {
  41.                 if (evt.charCode == Keyboard.ESCAPE) {
  42.                     this.dispatchEvent(new CloseEvent(CloseEvent.CLOSE));
  43.                 }
  44.             }
  45.         ]]>
  46.     </mx:Script>
  47.  
  48.     <mx:Label id="lbl"
  49.             text="Press ESC to close this window."
  50.             fontWeight="bold"
  51.             truncateToFit="true"
  52.             horizontalCenter="0"
  53.             verticalCenter="0" />
  54.  
  55.     <mx:ControlBar horizontalAlign="right" width="100%">
  56.     </mx:ControlBar>
  57.  
  58. </mx:TitleWindow>

Topics: Flex | No Comments » | 1,132 views Tags: , , , , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll