2.2.创建一组状态按钮
2.2.1. 问题
我需要提供一系列按钮供用户选择。
2.2.2. 解决办法
使用ToggleButtonBar 组件以及用来创建一组按钮的ArrayCollection。
2.2.3. 讨论
创建一个带ToggleButtonBar 的应用程序来放置创建的一列按钮。ToggleButtonBar 定义了一套用来维护按钮选择状态的纵向或者横向按钮组. 具体方法如下:
当应用程序初始化的时候，initialize 事件会调用initApp 方法。initApp 方法会使用一个ArrayCollection 来设定ToggleButtonBar 实例的数据源dataProvider. 因为ToggleButtonBar实例的dataProvider 属性被限制成ArrayCollection 类型。它会反射出新的按钮来更新显示的内容。
默认情况。ArrayCollection 中组成元素的labe 属性，会被ToggleButtonBar 实例中按钮的标签使用。如果你需要使用任意其他的属性（例如mode）来用作按钮的标签，可以使用ToggleButtonBar 的labelField 属性，代码如下：
ToggleButtonBar 实例的itemClick 事件的处理函数被设定为setMode。ItemClickEvent 类型的事件实例都会被传递到setMode 方法。ItemClickEvent 实例的item 属性引用了dataProvider里面的对应一致的元素。
通常的情况下，当应用程序启动后，ToggleButtonBar 没有选定的按钮，等待用户来选择一个按钮。无论如何，当dataProvider 被赋值后，第一个按钮会被默认选中。幸运的是，Flex3提供了SDK 的源代码，所以你能够使用这些知识来扩展ToggleButtonBar 控件来适应你的需求。ToggleButtonBar 的源代码可以在如下位置找到：
<Flex 3 installation dir>/sdks/3.0.0/frameworks/projects/framework/src/mx/controls/ToggleButtonBar.as
HighlightSelectedNavItem 方法提供了如何来取消按钮的选择的线索。它能获取一个当前选中按钮的引用，并且取消这个按钮的选中状态。
你可以利用从Flex 框架代码中的信息来创建一个特殊版本的ToggleButtonBar，符合特殊的需求。例如，让所有的按钮在开始的时候都是未选中状态。
如下代码展示了一个ToggleButtonBar 类的子类CustomToggleButtonBar 。它是用来实现任意时间改变dataProvider 都会取消选择所有按钮。这里它覆盖了ToggleButtonBar 的dataProvider setter 方法以及使用了一个叫做dataReset 的布尔值用来追踪控件中的dataProvider 是否被重设过。控件中的updateDisplayList 方法也会被覆盖用来实现每次dataProvider 被重设后都会取消选择当前被选中的按钮。在显示列表被更新后，dataReset这个标记会被设置回默认状态。代码如下
简单的操作就能使用新的组件CustomToggleButtonBar 来替换原先的ToggleButtonBar，实现如下：
如你所见，扩展默认的控件来适应你的应用程序的需求实现起来非常之简单。阅读Flex SDK源代码并不是唯一的学习Framework 的方法，但是它也提供了很多扩展默认组件的想法。
需要注意的是，有一些文档没有记录的在mx_internal 命名空间下的特性或者属性/方法之类不要去使用，因为这些都是有可能在未来的SDK 版本中有巨大改变的。
我需要提供一系列按钮供用户选择。
2.2.2. 解决办法
使用ToggleButtonBar 组件以及用来创建一组按钮的ArrayCollection。
2.2.3. 讨论
创建一个带ToggleButtonBar 的应用程序来放置创建的一列按钮。ToggleButtonBar 定义了一套用来维护按钮选择状态的纵向或者横向按钮组. 具体方法如下:
+展开
-XML
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
initialize="initApp(event)">
<mx:ToggleButtonBar id="toggle"
dataProvider="{dataProvider}"
itemClick="setMode(event)"/>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import mx.events.ItemClickEvent;
[Bindable]
private var dataProvider:ArrayCollection;
private function initApp(evt:FlexEvent):void {
var temp:Array = new Array({label:"Show Labels",
mode:"labels"},
{label:"Show Titles",
mode:"titles"});
dataProvider = new ArrayCollection(temp);
}
private function setMode(evt:ItemClickEvent):void {
switch (evt.item.mode) {
case "labels":
trace("George, Tim, Dean");
break;
case "titles":
trace("Vice President, President, Director");
break;
default:
break;
}
}
]]>
</mx:Script>
</mx:Application>
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
initialize="initApp(event)">
<mx:ToggleButtonBar id="toggle"
dataProvider="{dataProvider}"
itemClick="setMode(event)"/>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import mx.events.ItemClickEvent;
[Bindable]
private var dataProvider:ArrayCollection;
private function initApp(evt:FlexEvent):void {
var temp:Array = new Array({label:"Show Labels",
mode:"labels"},
{label:"Show Titles",
mode:"titles"});
dataProvider = new ArrayCollection(temp);
}
private function setMode(evt:ItemClickEvent):void {
switch (evt.item.mode) {
case "labels":
trace("George, Tim, Dean");
break;
case "titles":
trace("Vice President, President, Director");
break;
default:
break;
}
}
]]>
</mx:Script>
</mx:Application>
当应用程序初始化的时候，initialize 事件会调用initApp 方法。initApp 方法会使用一个ArrayCollection 来设定ToggleButtonBar 实例的数据源dataProvider. 因为ToggleButtonBar实例的dataProvider 属性被限制成ArrayCollection 类型。它会反射出新的按钮来更新显示的内容。
默认情况。ArrayCollection 中组成元素的labe 属性，会被ToggleButtonBar 实例中按钮的标签使用。如果你需要使用任意其他的属性（例如mode）来用作按钮的标签，可以使用ToggleButtonBar 的labelField 属性，代码如下：
+展开
-XML
<mx:ToggleButtonBar id="toggle"
dataProvider="{dataProvider}" labelField="mode"
itemClick="setMode(event)"/>
dataProvider="{dataProvider}" labelField="mode"
itemClick="setMode(event)"/>
ToggleButtonBar 实例的itemClick 事件的处理函数被设定为setMode。ItemClickEvent 类型的事件实例都会被传递到setMode 方法。ItemClickEvent 实例的item 属性引用了dataProvider里面的对应一致的元素。
通常的情况下，当应用程序启动后，ToggleButtonBar 没有选定的按钮，等待用户来选择一个按钮。无论如何，当dataProvider 被赋值后，第一个按钮会被默认选中。幸运的是，Flex3提供了SDK 的源代码，所以你能够使用这些知识来扩展ToggleButtonBar 控件来适应你的需求。ToggleButtonBar 的源代码可以在如下位置找到：
<Flex 3 installation dir>/sdks/3.0.0/frameworks/projects/framework/src/mx/controls/ToggleButtonBar.as
HighlightSelectedNavItem 方法提供了如何来取消按钮的选择的线索。它能获取一个当前选中按钮的引用，并且取消这个按钮的选中状态。
+展开
-ActionScript
child = Button(getChildAt(selectedIndex));
child.selected = false;
child.selected = false;
你可以利用从Flex 框架代码中的信息来创建一个特殊版本的ToggleButtonBar，符合特殊的需求。例如，让所有的按钮在开始的时候都是未选中状态。
如下代码展示了一个ToggleButtonBar 类的子类CustomToggleButtonBar 。它是用来实现任意时间改变dataProvider 都会取消选择所有按钮。这里它覆盖了ToggleButtonBar 的dataProvider setter 方法以及使用了一个叫做dataReset 的布尔值用来追踪控件中的dataProvider 是否被重设过。控件中的updateDisplayList 方法也会被覆盖用来实现每次dataProvider 被重设后都会取消选择当前被选中的按钮。在显示列表被更新后，dataReset这个标记会被设置回默认状态。代码如下
+展开
-ActionScript
package {
import mx.controls.Button;
import mx.controls.ToggleButtonBar;
public class CustomToggleButtonBar extends ToggleButtonBar
{
public function CustomToggleButtonBar() {
super();
}
private var dataReset:Boolean = false;
override public function set
dataProvider(value:Object):void {
super.dataProvider = value;
this.dataReset = true;
}
override protected function
updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth,unscaledHeight);
if(this.dataReset) {
if(selectedIndex != -1) {
var child:Button;
child = Button(getChildAt(selectedIndex));
if(child) {
child.selected = false;
this.dataReset = false;
}
}
}
}
}
}
import mx.controls.Button;
import mx.controls.ToggleButtonBar;
public class CustomToggleButtonBar extends ToggleButtonBar
{
public function CustomToggleButtonBar() {
super();
}
private var dataReset:Boolean = false;
override public function set
dataProvider(value:Object):void {
super.dataProvider = value;
this.dataReset = true;
}
override protected function
updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth,unscaledHeight);
if(this.dataReset) {
if(selectedIndex != -1) {
var child:Button;
child = Button(getChildAt(selectedIndex));
if(child) {
child.selected = false;
this.dataReset = false;
}
}
}
}
}
}
简单的操作就能使用新的组件CustomToggleButtonBar 来替换原先的ToggleButtonBar，实现如下：
+展开
-XML
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:local="*"
layout="vertical"
initialize="initApp(event)">
<local:CustomToggleButtonBar id="toggle" selectedIndex="-1"
dataProvider="{dataProvider}" itemClick="setMode(event)"/>
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:local="*"
layout="vertical"
initialize="initApp(event)">
<local:CustomToggleButtonBar id="toggle" selectedIndex="-1"
dataProvider="{dataProvider}" itemClick="setMode(event)"/>
如你所见，扩展默认的控件来适应你的应用程序的需求实现起来非常之简单。阅读Flex SDK源代码并不是唯一的学习Framework 的方法，但是它也提供了很多扩展默认组件的想法。
需要注意的是，有一些文档没有记录的在mx_internal 命名空间下的特性或者属性/方法之类不要去使用，因为这些都是有可能在未来的SDK 版本中有巨大改变的。
加支付宝好友偷能量挖...
