Flex的Alert消息框中设置icon图标的例子

By Minidxer | March 19, 2008

前面的Flex中给按钮设置icon图标的例子一文中，我们了解到了如何在按钮控件中嵌入icon图标的一些技巧，接下来我们来研究一下如何在Alert中嵌入icon图标。下面的第一个例子展示了如何直接将icon图标嵌入Alert消息框中，显示在文本的左边，而第二个例子演示了如何将icon图标嵌入到Alert对话框的按钮中。

下面是完整代码：


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.         creationComplete="showAlert();"
  6.         backgroundColor="white">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.controls.Alert;
  11.             import mx.events.CloseEvent;           
  12.  
  13.             // Embed the error.png image.
  14.             [Bindable]
  15.             [Embed(source='assets/error.png')]
  16.             private var Icon:Class;           
  17.  
  18.             private var a:Alert;           
  19.  
  20.             private function showAlert():void {
  21.                 var titleText:String = "WARNING";
  22.                 var messageText:String = "Are you sure you would like to erase the Internet?\n\nPress OK to continue, or Cancel to abort.";
  23.                 /* Display the Alert, show the OK and Cancel buttons,
  24.                     and show an icon represented by the Icon binding. */
  25.                 a = Alert.show(messageText, titleText, Alert.OK | Alert.CANCEL, null, doClose, Icon);
  26.             }           
  27.  
  28.             private function doClose(evt:CloseEvent):void {
  29.                 // do nothing.
  30.             }
  31.         ]]>
  32.     </mx:Script>           
  33.  
  34.     <mx:Button label="Launch Alert" click="showAlert();" />           
  35.  
  36. </mx:Application>

下面第二个例子利用了mx_internal命名空间（namespace）来访问两个内部属性（可以察看代码的文档）：

alertForm — Alert中包含文本内容，图标和按钮的内部AlertForm对象
buttons — 一个包含显示在Alert中所有按钮的数组

注意：由于这个例子中用到了mx_internal命名空间（namespace），无法保证在后面的Flex SDK中都可以正常工作，使用的时候要自己判断。

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.         creationComplete="showAlert();"
  6.         backgroundColor="white" >
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.controls.Alert;
  11.             import mx.events.CloseEvent;           
  12.  
  13.             [Bindable]
  14.             [Embed(source='assets/error.png')]
  15.             private var Icon:Class;           
  16.  
  17.             [Bindable]
  18.             [Embed(source='assets/tick.png')]
  19.             private var TickIcon:Class;           
  20.  
  21.             [Bindable]
  22.             [Embed(source='assets/cross.png')]
  23.             private var CrossIcon:Class;           
  24.  
  25.             private var a:Alert;           
  26.  
  27.             private function showAlert():void {
  28.                 /* Set button width so it is large enough to accomodate
  29.                     an icon and default button labels. */
  30.                 Alert.buttonWidth = 100;           
  31.  
  32.                 var titleText:String = "WARNING";
  33.                 var messageText:String = "Are you sure you would like to erase the Internet?\n\nPress OK to continue, or Cancel to abort.";
  34.                 /* Display the Alert, show the OK and Cancel buttons,
  35.                     and show an icon represented by the Icon binding. */
  36.                 a = Alert.show(messageText, titleText, Alert.OK | Alert.CANCEL, null, doClose, Icon);           
  37.  
  38.                 /* Get a reference to the Alert control's internal
  39.                     buttons array. */
  40.                 var buttonArray:Array = a.mx_internal::alertForm.mx_internal::buttons;           
  41.  
  42.                 /* Set the first button to the TickIcon class, and the
  43.                     second icon to the CrossIcon class. */
  44.                 buttonArray[0].setStyle("icon", TickIcon);
  45.                 buttonArray[1].setStyle("icon", CrossIcon);           
  46.  
  47.                 progressBar.visible = false;
  48.             }           
  49.  
  50.             private function doClose(evt:CloseEvent):void {
  51.                 if (evt.detail == Alert.OK) {
  52.                     progressBar.visible = true;
  53.                 } else if (evt.detail == Alert.CANCEL) {
  54.                     // do nothing.
  55.                 }
  56.             }
  57.         ]]>
  58.     </mx:Script>           
  59.  
  60.     <mx:Button label="Launch Alert"
  61.             click="showAlert();" />
  62.  
  63.     <mx:ProgressBar id="progressBar"
  64.             label="Deleting..."
  65.             indeterminate="true"
  66.             visible="false" />           
  67.  
  68. </mx:Application>
原文作者：Peter deHaan 翻译：minidxer

Topics: Flex | 2 Comments » | 365 views Tags: , , , , , , , ,

Related Post

2 comments | Add One

Trackbacks

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

赞助商链接

Categories

Archives

Blogroll