全部博文（118）
分类：
2010-07-29 22:38:00
Button控件使用指南
1.Button控件的介绍
Button恐怕是使用最频繁的元件，它的作用非常明了，就是响应用户的鼠标行为，触发预定义的时间监听器（通过监听器可以得到程序现在所执行的事件方法）。执行一段任务以便对用户的交互作出响应，比如当用户点击一个按钮时在控制台输出名称列表.
Button控件具有下列默认特征：
|
特征 |
说明 |
|
默认大小 |
此大小足以包含标签文本及任何图标 |
|
最小大小 |
0个像素 |
|
最大大小 |
无限制 |
主要区别：弹出按钮的弹出控件一般与Flex列表或菜单绑定。
组件的继承关系：
Button—>UIComponent—>FlexSprite—>Sprite—> DisplayObjectContainer —>InteractiveObject—> DisplayObject—> EventDispatcher—> Object
一下是一些按钮类的继承关系
UIComponent->Button
UIComponent->Button->CheckBox
UIComponent->Button->RadioButton
Object->EventDispatcher->RadioButtonGroup 这个比较特别
UIComponent->Button->LinkButton
UIComponent->Button->PopUpButton 弹出一个菜单
UIComponent->Button->PopUpButton->PopUpMenuButton 数据源自动转成一个菜单
PopUpButton比Button多了一个pop-up button可以弹出Menu或List,通过属性Popup指定
参考文献：Flex组件的继承关系
http://www.cnblogs.com/bjsky/archive/2009/09/17/1568653.html
|
名称 |
分类 |
说明 |
|
emphasized |
属性 |
按钮处于弹起状态时周围是否会有边框，默认为false |
|
label |
属性 |
要在button控件上显示的文本 |
|
data |
属性 |
使用数据绑定将data属性的字段绑定到（用作项目编辑器）的组件（详见3.6） |
|
Selected |
属性 |
切换按钮处于禁用（false）还是启用（true）状态 |
|
selectedfield |
属性 |
Data属性中用于为button控件的selected属性指定值的字段的名称 |
|
Icon |
属性 |
图标数组包含对已创建的所有图标的引用（详见实例3.3） |
|
enable |
属性 |
组件是否可以接受用户交互（继承的公共属性）详见实例3.3 |
|
Textfield（待解） |
属性 |
呈示此button的标签的内部UITextField对象 |
|
autorepeat |
属性 |
指定在用户按住鼠标按键时是否重复分派buttonDown事件（详见实例3.5） |
|
click |
事件 |
当用户单击button控件时分派（详见实例3.1） |
|
datachange |
事件 |
当data属性更改时进行分派（详见3.6） |
|
doubleclick |
事件 |
当用户双击button控件时分派（详见实例3.4） |
方法：
其中id定义按钮控件的名称，label定义按钮所显示的文本，color定义其文本颜色，width定义其宽度。
功能：点击按钮后执行该事件
代码：
import flash.events.Event;
private function printMessage(event:Event):void {
message.text += event.target.label + " pressed" + "\n";
}
]]>
注释：
每当用户点击这个按钮，Flex 框架会发布一个MouseEvent.CLICK 事件。上面这行代码设定了在每次click 事件被发布的时候，都去调用printMessage 方法，然后一个按钮的label值就被创建以及输出到了控制台中。需要注意的是，MouseEvent 类型的事件实例会被自动传递到处理的函数。根据发出的事件，查询此对象可以获得更多关于该事件本身的信息。
参考文献：
【1】控件的基本用法
详细代码：click.mxml
动态演示：click.html
功能：实现在按钮上设置图像
第一种是在Flex应用中创建一个变量，利用[Bindable]和[Embed] ，在代码中以参数形式传入制定图标（icon）的路径，然后利用类似icon="{Icon}"的代码嵌入到按钮中。第二种是利用@Embed()和参数中指定图标的路径
关键代码：
[Bindable]
[Embed(source="tupian/over_bt.jpg")]
private var Icon:Class;
]]>
方法1：
icon="{Icon}" />
方法2：
icon="@Embed('tupian/over_bt.jpg')" />
详细代码请见“2.mxml”
演示效果如下：data.html
功能:通过按钮上设置图像，并且设置按钮分别在四种状态下的图像。
主要代码：
private function checkBoxInteract():void
{
if (chkBox.selected == true)
{
animBtn.enabled=true;
}
else
{
animBtn.enabled=false;
}
}
注释：这个函数主要实现的功能是设置按钮是否可以接受交互
icon="@Embed(source='tupian/normal_bt.jpg')"
overIcon="@Embed(source='tupian/over_bt.jpg')"
downIcon="@Embed(source='tupian/click_bt.jpg')"
"注释：这段代码主要是按钮呈现的四种状态时的图像
详细代码：请见“icon.mxml”
动态演示效果：icon.html
功能：通过doubleClickEnabled属性，监听按钮(Button)doubleClick。
主要代码：
private function button_click(evt:MouseEvent):void {
appendText(evt.type);
}
private function button_doubleClick(evt:MouseEvent):void {
appendText(evt.type);
}
注释：定义了单击事件，和双击鼠标的方法。
private function appendText(str:String):void {
var now:Date = new Date();
textArea.text += "[" + now.toTimeString() + "] " + str + "\n";
textArea.validateNow();
textArea.verticalScrollPosition = textArea.maxVerticalScrollPosition;
}
详细代码请见“doubleclickenable。xml”
演示效果如下：doubleclick.html
参考文献：
组件学习：http://blog.minidx.com/2009/01/01/1859.html
功能：通过调用autoRepeat属性和buttonDown事件，当用户按下鼠标，并且保持按下状态，该按钮一直执行鼠标按下时的动作，直到结束。
关键代码：
<mx:Button id="leftButton"
label="left"
autoRepeat="true"
repeatDelay="{button_repeatDelay.value}"
repeatInterval="{button_repeatInterval.value}"
buttonDown="moveLeft(box)" />
<mx:Button id="rightButton"
label="right"
autoRepeat="true"
repeatDelay="{button_repeatDelay.value}"
repeatInterval="{button_repeatInterval.value}"
buttonDown="moveRight(box)" />
mx:HBox>
详细代码请见“autorepeat.mxml”
演示效果如下：
参考文献：flex中文实例
http://blog.minidx.com/2008/07/19/1096.html
当您将某个组件[A1] ，可借助data属性向该组件传递值。不要以MXML方式设置此属性。
此属性用作数据绑定的源。修改此属性后，将调度datachange事件
Data属性的实现：
IDataRenderer 接口用于为具有 data 属性的组件定义接口。 系统使用 data 属性将要呈现或编辑的数据传递给以下组件：在 list 控件（如 List、HorizontalList、TileList、DataGrid 和 Tree 控件）中的项呈示器或项目编辑器中使用的组件，或者用作图表中呈示器的组件。组件必须实现 IDataRenderer，以便主机组件可以传递此信息。所有 Flex 容器和许多 Flex 组件都实现 IDataRenderer 和 data 属性。
在 list 控件中，Flex 将项呈示器或项目编辑器的 data 属性设置为数据提供程序中对应于正在呈现或编辑的项目的元素。对于 DataGrid 控件，data 属性包含 DataGrid 控件整行的而不仅仅是该项目的数据提供程序元素。
若要实现此接口，需定义 setter 和 getter 方法以实现 data 属性。通常，setter 方法将 data 属性的值写入内部变量并分派 dataChange 事件，而 getter 方法返回内部变量的当前值，如下例所示：
private var _data:Object;
[Bindable("dataChange")]
public function get data():Object {
return _data;
}
public function set data(value:Object):void {
_data = value;
dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
}
参考文献：® Flex 4.1 语言参考
？？
