走近Flex组件系列(二)：简单实用的Alert组件
Flex中为我们提供的简单实用的Alert组件，可以为我们在项目开发中完成很多的应用控制和提示操作。其功能和Windows Form的MessageBox，JavaScript中的alert()一样，其作用我就不用我多说了。
本文将介绍Flex的Alert组件比较常见的几种应用模式，详细请坐下听我慢慢道来。
最常见的莫过于只做消息提示的功能应用，那Flex的Alert该怎么来实现呢？Flex的Alert组件位于mx.controls包下，Alert类提供了静态的show方法来完成我们常见的功能。使用很简单，如下便是只做消息提示的应用：
1 internal function onClick():void
2 {
3 Alert.show("Hello World!");
4 }
2 {
3 Alert.show("Hello World!");
4 }
如果照上面的应用，在弹出的消息对话框中就只有提示消息，对话框没有标题。要让对话框显示标题该怎么办呢？很简单，如下代码示例：
1 internal function onClickTitle():void
2 {
3 Alert.show("Hello World!","这里是标题");
4 }
2 {
3 Alert.show("Hello World!","这里是标题");
4 }
或许有人会问，以前做简单的提示操作已经学会了，确实很简单。如果我需要提供两个按扭让我选择，然后根据我的选择做不同的程序控制该怎么做呢？其实这正是我接下来要讲到的，详细见如下代码定义：
1 internal function onClickConfrm():void
2 {
3 Alert.yesLabel="是";
4 Alert.noLabel="否";
5 Alert.show("Hello World!","这里是标题",3,this,onCloseHandler);
6 }
2 {
3 Alert.yesLabel="是";
4 Alert.noLabel="否";
5 Alert.show("Hello World!","这里是标题",3,this,onCloseHandler);
6 }
方法的参数很容易理解，第一个为消息内容，第二个为标题显示内容，第三个为标识取值默认为4，第四个为当前Alert组件要显示的父容器，最后一个则为点击Alert组件的按扭(如：是、否、确定、取消等)后的回调函数，或者叫做事件处理函数。如下代码定义（alertResult是个标签组件Label）：
1 internal function onCloseHandler(evt:CloseEvent):void
2 {
3 if(evt.detail==Alert.YES)
4 {
5 alertResult.text = "你选择的是：“是”！";
6 }
7 else
8 {
9 alertResult.text = "你选择的是：“否”！";
10 }
11 }
2 {
3 if(evt.detail==Alert.YES)
4 {
5 alertResult.text = "你选择的是：“是”！";
6 }
7 else
8 {
9 alertResult.text = "你选择的是：“否”！";
10 }
11 }
最后来看看对话框上出三个按扭(是，否，取消)的应用，代码定义如下：
1 internal function onClickHandler():void
2 {
3 Alert.yesLabel="是";
4 Alert.noLabel="否";
5 Alert.cancelLabel="取消";
6 Alert.show("Hello World!","这里是标题",1|2|8,this,onCloseHandler);
7 }
2 {
3 Alert.yesLabel="是";
4 Alert.noLabel="否";
5 Alert.cancelLabel="取消";
6 Alert.show("Hello World!","这里是标题",1|2|8,this,onCloseHandler);
7 }
同样通过设置的事件处理函数来获取用户点击的是那一项操作。运行效果如下图：
以下是Alert组件的全部示例代码：
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3 <mx:Panel x="10" y="45" width="436" height="259" layout="absolute" fontSize="12" title="Alert组件示例">
4 <mx:Button x="39" y="47" label="点 我" click="onClick()" fontWeight="normal"/>
5 <mx:Button x="116" y="47" label="点 我" fontWeight="normal" click="onClickTitle()"/>
6 <mx:Button x="204" y="47" label="点 我" fontWeight="normal" click="onClickConfrm()"/>
7 <mx:Label x="39" y="149" id="alertResult" fontWeight="bold" color="#2500C7" width="219"/>
8 <mx:Button x="295" y="47" label="点 我" fontWeight="normal" click="onClickHandler()"/>
9 </mx:Panel>
10 <mx:Script>
11 <![CDATA[
12 import mx.events.CloseEvent;
13 import mx.controls.Alert;
14 internal function onClick():void
15 {
16 Alert.show("Hello World!");
17 }
18
19 internal function onClickTitle():void
20 {
21 Alert.show("Hello World!","这里是标题");
22 }
23
24 internal function onClickConfrm():void
25 {
26 Alert.yesLabel="是";
27 Alert.noLabel="否";
28 Alert.show("Hello World!","这里是标题",4,this,onCloseHandler);
29 }
30
31 internal function onCloseHandler(evt:CloseEvent):void
32 {
33 if(evt.detail==Alert.YES)
34 {
35 alertResult.text = "你选择的是：“是”！";
36 }
37 else
38 {
39 alertResult.text = "你选择的是：“否”！";
40 }
41 }
42
43 internal function onClickHandler():void
44 {
45 Alert.yesLabel="是";
46 Alert.noLabel="否";
47 Alert.cancelLabel="取消";
48 Alert.show("Hello World!","这里是标题",1|2|8,this,onCloseHandler);
49 }
50 ]]>
51 </mx:Script>
52 </mx:Application>
53
浙公网安备 33010602011771号