一步一步学Flex系列---基本控件之Alert组件

一步一步学Flex系列（2）：基本控件之Alert组件

FLEX3版本发布了，无论从ActionScript3还是Air都给我们带来了很多的惊喜，全面支持AIR、代码重构、内存和性能分析器 (profilers)、高级Datagrid组件、Web service introspection　Web服务的内省一系列新特性更是给我们带来了不少惊喜。《一步一步学Flex 3系列》文章将从Flex3基础知识、数据与通信、自定义控件、动画、图形图像等几个方面带您快速进入Flex3的开发。

 本文为系列第一篇创建一个基本的FLEX 3基本控件之Alert组件。

 

Alert即提示框组件使用得比较频繁，所以有必要详细的讲解一下。Alert组件的show方法是一个静态方法，所谓静态方法即表示你可以通过Alert.show(…)的方式来调用。格式如下：

Alert.show(content,title,flags,parent,closeHandle,iconClass,defaultButtonFlag);

Content:提示内容.

title:提示框标题

flags:指定出现的按钮。选值有：

0--OK按钮，
1--Yes按钮
2--No按钮
3--Yes,No按钮组
4--OK按钮，
5--OK,Yes按钮组
6--OK,No按钮组
7--OK,YES,NO按钮组
8--Cancel按钮
9--YES,CANCEL按钮组
10--NO,CANCEL按钮组 
11--YES,NO,CANCEL
12--NO,CANCEL按钮组 
13--NO,YES,CANCEL按钮组
14--OK,NO,CANCEL按钮组 
15--OK,NO,YES,CANCEL按钮组。
到16以后又回到0开始，即16=0，17=1等等

//当然，你可以通过逻辑符合"|"随意组合，组合后默认排列，与你自定义的顺序无关。
如：1|2|8显示是为:YES按钮，NO按钮，Cancel按钮

parent:对话框居中的参照对象。一般指定this,即当前窗口。

 

 

 iconClass:给对话框指定图标。

defaultButtonFlag:指定默认被选中的按钮。当按下回车相当于该按钮的点击事件出发。

 示例讲解：Alert组件的三种样例。

 步骤如下

 1，  示例开始前，你应该已经学会了一般的flex工程的创建与flex application文件的建立了。如果还有疑问，请参照前面讲过的例子。

 

 

  2.新建flex applicatioon文件，命名为MyAlert.mxml，其他默认设置即可。建好后，你看到的文件及目录应该像这样。

 

 

 

 

3.设计见面，首先切换你的工作区到设计视图。在组件面板里拖动需要的组件到窗口并设置好位置及属性。组件面板和最终界面如图：

组件面板

最终界面

注：设计界面时，你可以在属性面板更改各个组件的属性。属性面板如图。

属性面板

完成了界面的设计以后，切换到代码视图。

看到的代码如下

界面设计好后产生的代码

注意：你所产生代码可能和我的不一样，没关系，那只是顺序不同罢了。

 4，修改的代码如下

 注意到多出了id，click属性和值。

 Id属性以便引用。

 Click属性 指定单击事件触发的方法。方法的编写需要使用到ActionScript脚本。方法中的event参数是内置事件变量，不用我们定义，他的使用范围只限于mxml文件的组件标签内。也就是说，组件里的event跟ActionScritp里我们自定义的事件变量event不是同一个对象。第二个按钮的clickHandler(event)内容如下：

import mx.controls.Alert;
import mx.events.CloseEvent;        
 //弹出附带可选按钮的提示框 
private function clickHandler(event:Event):void { 
        Alert.show("是否要保存更改？", "保存更改",3, this, alertClickHandler);
}          

 //回调方法，以显示被选按钮

 private function alertClickHandler(event:CloseEvent):void { 
        if (event.detail==Alert.YES) 
                status.text="你选择了 Yes"; 
        else
                status.text="你选择了 No"; 
 }

 注意：Alert.show("是否要保存更改？", "保存更改",3, this, alertClickHandler);

 中的数值3表明使用Yes按钮和No按钮，this表明提示框居中的参照对象,alertClikHandler是回调方法，即提示框关闭事件触发以后执行的方法，注意不能加括号也不用指定参数

 运行后，点击第一个按钮。结果如图：

 点击Yes按钮后，看到标签的变化。

 

  

  第三个按钮的secondClickHandler (event)内容如下：

 //改变默认可选按钮的显示标签和按钮宽度。相当于你自定义的按钮,三十六计之偷梁换柱。
//但是你一定要用完之后，把值设置成默认的按钮标签，以便在其他地方可以正常显示。

  private function secondClickHandler(event:Event):void { 
        Alert.buttonWidth = 100; 
        Alert.yesLabel = "确定"; 
        Alert.noLabel = "否"; 
        Alert.cancelLabel = "取消"; 
        // 注意 1|2|8 的格式及数值的意义  
        Alert.show("你确定要执行这步操作吗？","执行提示",1|2|8,this,secondAlertClickHandler);    
        //把按钮标签值 设置回默认值 
        Alert.buttonWidth = 60; 
        Alert.yesLabel = "Yes";
        Alert.noLabel = "No";
 }

        //显示被选按钮的事件处理方法

  private function secondAlertClickHandler(event:CloseEvent):void {
        if (event.detail==Alert.YES) 
                showtxt.text="你选择了 确定";
        else if(event.detail==Alert.NO){ 
                showtxt.text="你选择了 否"; 
        }else 
                showtxt.text="你选择了 取消"; 
        }

  运行后点击第三个按钮。弹出提示框如图：

  点击确定之后看到的结果：

   好了，相信你已经学会了如何使用Alert组件了。很简单吧。上面的这些功能，我们还可以通过自定义组件的方式实现。如扩展TitleWindow组件。把它变成更符合你应用的对话框。这个知识点会在以后的自定义组件这一节中谈到。谢谢。。。