精通Flex 3.0――4.2.3 动态添加按钮——SimpleButton类

       SimpleButton类作用如名字一样，表示一个简单按钮类。通过定义一个SimpleButton类，可以创建一个用户交互的按钮。SimpleButton用于处理用户交互。而SimpleButton的显示是与SimpleButton的处理过程分离的。这样，可以使用相同的处理过程而有不同表现的SimpleButton。SimpleButton的显示是由三种状态——经过、按下和抬起决定的。所以，在定义按钮的时候也需要定义一个SimpleButton状态的类用来表现SimpleButton。

与其他显示类不同，SimpleButton不可以直接使用。创建简单按钮实际是创建SimpleButton子类的一个实例，即需要创建一个继承与SimpleButton类的子类。使用的是这个子类的实例。创建一个SimpleButton的步骤如下。

（1）创建一个Flex项目，命名为“SimpleButtonStu”。在项目下创建FlexStuButtonState类和FlexStuButton类，创建这两个类实际上也是创建两个对应的ActionScript文件。FlexStuButton.as文件如下代码所示。

package flex.stu

{

         //导入包

import flash.display.*;

import flash.display.SimpleButton;

import flash.events.*;

import mx.controls.Alert;

import flex.stu.FlexStuButtonState;

         //声明FlexStuButton类,继承于SimpleButton

         public class FlexStuButton extends SimpleButton

         {

                   //声明为未选中状态

                   public var selected:Boolean = false;

                   //声明一个具有构造参数的构造器

                   public function FlexStuButton(txt:String)

                   {

                            //创建一个抬起状态

                            upState= new FlexStuButtonState(0xFFFFFF, txt);

                            //创建一个按下状态

                            downState = new FlexStuButtonState(0xCCCCCC, txt);

                            //单击的状态

                            hitTestState = upState;

                            //经过的状态

                            overState = downState;

                            //添加一个单击事件

                            addEventListener(MouseEvent.CLICK, buttonClicked);

                   }

                   //创建一个响应单击事件的函数

                   public function buttonClicked(e:Event)

                   {

                   //弹出一个窗口

                            Alert.show("单击了按钮");

                   }

         }

}

SimpleButton的样式可以是任何一种由用户创建的样式，如文本、图片、图形或者动画。在本实例中采用了一个简单的本文加图形的方式。使用了一个Sprite类的子类FlexStuButtonState作为样式类。将SimpleButton的子类FlexStuButton类与FlexStuButtonState类结合在一起使用，就可以实现一个简单按钮的效果。

这里引入了一个mx.controls.Alert类。这个类的作用是弹出一个对话框，用于显示信息。这个类在Flex应用中经常用到。通过这个类可以显示提示信息给用户，也可以使用这个类让用户确认操作的内容。关于Alert类的详细使用方法会在后面的章节详细讲解。在这里使用mx.controls.Alert弹出一个提示对话框。

向FlexStuButton类添加了一个监听器。这个监听器用来响应作用在FlexStuButton上的鼠标单击事件（MouseEvent.CLICK）。当鼠标单击事件发生的时候，调用buttonClicked函数进行处理。FlexStuButtonState.as文件代码如下所示。

package flex.stu

{

         //导入包

         import flash.display.*;

         import flash.text.TextField;

         import flash.text.TextFormat;

         //定义一个继承于Sprite的按钮样式类FlexStuButtonState

         public class FlexStuButtonState extends Sprite

         {

                   //声明一个包可见的TextField实例用于显示按钮上的文本

                   internal var label:TextField;

                   //创建一个构造函数，在构建按钮的时候就传入按钮的颜色和显示文本

                   public function FlexStuButtonState(color:uint, labelText:String)

                   {

                   //创建按钮文本的实例

                   label = new TextField();

                   //将文本内容赋值给TextField实例

                   label.text = labelText;

                   //控制文本的位置

                   label.x = 2;

                   //声明文本格式

                   var format:TextFormat = new TextFormat("bold");

                   //设置文本格式

                   label.setTextFormat(format);

                   //设置按钮的宽度

                   var buttonWidth:Number = label.textWidth + 10;

                   //创建一个按钮的几何图形

                   var background:Shape = new Shape();

                   //填充颜色

                   background.graphics.beginFill(color);

                   //确定边界的颜色和粗细

                   background.graphics.lineStyle(1, 0x000000);

                   //绘画一个矩形作为按钮的形状

                   background.graphics.drawRoundRect(0, 0, buttonWidth, 18, 4);

                   //添加添加背景和文本给按钮

                   addChild(background);

                   addChild(label);

                   }

          }

}

在FlexStuButtonState类中，使用了drawRoundRect方法。使用这个方法绘画出来的是一个矢量图形。这样可以大大减小SWF文件的体积。同时定义了几种状态的样式。这些样式用于区分在使用按钮时候按钮不同显示状态。

（2）打开SimpleButtonStu.mxml文件，修改SimpleButtonStu.mxml代码如下所示。

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" click="addSimpleButton()">

<mx:Script>

         <![CDATA[

                   //引入包

                  import flex.stu.FlexStuButton;

                  //创建一个FlexStuButton的实例       

                   private var flexbutton:FlexStuButton=new FlexStuButton("简单按钮");

                   //创建一个函数添加按钮到舞台上

                   private function addSimpleButton():void

                   {

                            //向舞台上添加按钮            

                            stage.addChild(flexbutton);

                            //调整按钮的位置

                            flexbutton.x=100;

                            flexbutton.y=100;

                   }

         ]]>

</mx:Script>

</mx:Application>

在创建FlexStuButton时，传入一个字符串“简单按钮”来标明按钮显示的文本。通过addSimpleButton函数响应舞台单击事件，并且在addSimpleButton函数中向舞台添加按钮。

（3）保存并运行SimpleButtonStu应用，如图所示。单击舞台后，创建按钮并加添到舞台上，如图所示。

所示。如果单击按钮会弹出一个确认对话框，如图所示。

将鼠标移到出现的按钮之上的时候发现按钮的状态发生改变，如图

 

按钮状态改变是在FlexStuButtonState类中，定义的几个状态颜色切换的效果。而弹出的对话框就是在FlexStuButton类的定义响应click事件中调用的Alert类的show方法显示出来的。