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

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
creationComplete="showAlert();"
backgroundColor="white">

<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;

// Embed the error.png image.
[Bindable]
[Embed(source='assets/error.png')]
private var Icon:Class;

private var a:Alert;

private function showAlert():void {
var titleText:String = "WARNING";
var messageText:String = "Are you sure you would like to erase the Internet?\n\nPress OK to continue, or Cancel to abort.";
/* Display the Alert, show the OK and Cancel buttons,
and show an icon represented by the Icon binding. */
a = Alert.show(messageText, titleText, Alert.OK | Alert.CANCEL, null, doClose, Icon);
}

private function doClose(evt:CloseEvent):void {
// do nothing.
}
]]>
</mx:Script>

<mx:Button label="Launch Alert" click="showAlert();" />

</mx:Application>

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

alertForm

― Alert中包含文本内容，图标和按钮的内部AlertForm对象

buttons

― 一个包含显示在Alert中所有按钮的数组
注意：由于这个例子中用到了mx_internal命名空间（namespace），无法保证在后面的Flex SDK中都可以正常工作，使用的时候要自己判断。
Download: main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
creationComplete="showAlert();"
backgroundColor="white" >

<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;

[Bindable]
[Embed(source='assets/error.png')]
private var Icon:Class;

[Bindable]
[Embed(source='assets/tick.png')]
private var TickIcon:Class;

[Bindable]
[Embed(source='assets/cross.png')]
private var CrossIcon:Class;

private var a:Alert;

private function showAlert():void {
/* Set button width so it is large enough to accomodate
an icon and default button labels. */
Alert.buttonWidth = 100;

var titleText:String = "WARNING";
var messageText:String = "Are you sure you would like to erase the Internet?\n\nPress OK to continue, or Cancel to abort.";
/* Display the Alert, show the OK and Cancel buttons,
and show an icon represented by the Icon binding. */
a = Alert.show(messageText, titleText, Alert.OK | Alert.CANCEL, null, doClose, Icon);

/* Get a reference to the Alert control's internal
buttons array. */
var buttonArray:Array = a.mx_internal::alertForm.mx_internal::buttons;

/* Set the first button to the TickIcon class, and the
second icon to the CrossIcon class. */
buttonArray[0].setStyle("icon", TickIcon);
buttonArray[1].setStyle("icon", CrossIcon);

progressBar.visible = false;
}

private function doClose(evt:CloseEvent):void {
if (evt.detail == Alert.OK) {
progressBar.visible = true;
} else if (evt.detail == Alert.CANCEL) {
// do nothing.
}
}
]]>
</mx:Script>

<mx:Button label="Launch Alert"
click="showAlert();" />

<mx:ProgressBar id="progressBar"
label="Deleting..."
indeterminate="true"
visible="false" />

</mx:Application>