介绍Flex的ButtonBar和ToggleButtonBar控件
来源:互联网 发布:最常用的nosql数据库 编辑:程序博客网 时间:2024/05/17 23:41
介绍Flex的ButtonBar和ToggleButtonBar控件 2009-04-27 22:13:02
标签:ButtonBarFlex休闲 职场 ToggleButtonBar
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://flexria.blog.51cto.com/753638/153749
简介
BttonBar和ToggleButtonBar控件为相关的按钮定义了一个水平或垂直的、具有公共外观的布局。这两个控件只定义了一个叫做itemClick的事件,该事件在控件中任何按钮被选择的时候调度。
ButtonBar控件定义了一个不持有存储状态的按钮组。当你在一个ButtonBar种选择一个按钮的时候,这个按钮的外观改变为选择状态,当释放这个按钮时,它将返回未选择状态。
ToggleButtonBar控件定义了一个维持其选择或未选择状态的按钮组。在ToggleButtonBar控件中,只有以一个按钮可以处于被选择状态。这意味着当你在ToggleButtonBar控件中选择一个按钮时,这个按钮将一直处于被选择状态,直到你选择了另一个按钮。
如果你设置ToggleButtonBar控件的toggleOnClick属性未true,那么再次选择当前已选择的按钮,将使它返回未选择状态。默认情况下toggleOnClick属性为false。
创建一个ButtonBar控件
<mx:ButtonBarborderStyle="solid"horizontalGap="5">
<mx:dataProvider>
<mx:String>Flash</mx:String>
<mx:String>Director</mx:String>
<mx:String>Dreamweaver</mx:String>
<mx:String>ColdFusion</mx:String>
</mx:dataProvider>
</mx:ButtonBar>
<mx:dataProvider>
<mx:String>Flash</mx:String>
<mx:String>Director</mx:String>
<mx:String>Dreamweaver</mx:String>
<mx:String>ColdFusion</mx:String>
</mx:dataProvider>
</mx:ButtonBar>
要创建一个ToggleButtonBar空间,之需要将<mx:ButtonBart>标签替换为<mx:ToggleButtonBar>标签。对于ToggleButtonBar控件,selectedIndex属性块iedomge当控件被创建的时候,哪个按钮处于被选择状态,默认值是0,即使最左侧的按钮处于被选择状态。设置selectedIndex属性为-1将使所有按钮处于未选择状态。dataProvicer属性定义了按钮的标签。你也可以向dataProvider属性传递一个对象数组,其中每个对象可以有三个字段:label,icon和toolTip。
<mx:ButtonBarborderStyle="solid"horizontalGap="5">
<mx:dataProvider>
<mx:Objectlabel="Flash"icon="@Embed(source='../img/feedicon_001.png')"/>
<mx:Objectlabel="Director"icon="@Embed(source='../img/feedicon_002.png')"/>
<mx:Objectlabel="Dreamweaver"icon="@Embed(source='../img/feedicon_003.png')"/>
<mx:Objectlabel="ColdFusion"icon="@Embed(source='../img/feedicon_004.png')"/>
</mx:dataProvider>
<mx:dataProvider>
<mx:Objectlabel="Flash"icon="@Embed(source='../img/feedicon_001.png')"/>
<mx:Objectlabel="Director"icon="@Embed(source='../img/feedicon_002.png')"/>
<mx:Objectlabel="Dreamweaver"icon="@Embed(source='../img/feedicon_003.png')"/>
<mx:Objectlabel="ColdFusion"icon="@Embed(source='../img/feedicon_004.png')"/>
</mx:dataProvider>
ButtonBar或ToggleButtonBar控件基于dataProvider属性的值创建按钮。即使ButtonBar和ToggleButtonBar是Container的子类,也不要使用Container.addChild()和Container.removeItem()方法来添加或移除按钮,而应使用addItem()和removeItem方法来操作dataProvider属性。ButtonBar或ToggleButtonBar控件可以自动的根据dataProvider属性的变化添加或移除按钮。
处理ButtonBar事件
当你选择一个按钮的时候,ButtonBar和ToggleButtonBar控件将调度一个itemClick事件。传递给事件监听器的event对象的类型为ItemClickEvent。在事件监听器中,你可以通过访问event对象的属性来确定被选择的按钮和其他信息。第一个按钮的索引是0。
<mx:Script>
<![CDATA[
import mx.events.ItemClickEvent;
private var savedIndex:int = 99999;
private function clickHandler(event:ItemClickEvent):void {
if (event.index == savedIndex) {
myTA.text=""
}
else {
savedIndex = event.index;
myTA.text="Selected button index: " + String(event.index) + "\n" + "Selected button label: " +event.label;
}
}
]]>
</mx:Script>
<mx:ToggleButtonBar
borderStyle="solid"
horizontalGap="5"
itemClick="clickHandler(event);"
toggleOnClick="true"
selectedIndex="-1">
<mx:dataProvider>
<mx:String>Flash</mx:String>
<mx:String>Director</mx:String>
<mx:String>Dreamweaver</mx:String>
<mx:String>ColdFusion</mx:String>
</mx:dataProvider>
</mx:ToggleButtonBar>
<mx:TextAreaid="myTA" width="250" height="100"/>
<![CDATA[
import mx.events.ItemClickEvent;
private var savedIndex:int = 99999;
private function clickHandler(event:ItemClickEvent):void {
if (event.index == savedIndex) {
myTA.text=""
}
else {
savedIndex = event.index;
myTA.text="Selected button index: " + String(event.index) + "\n" + "Selected button label: " +event.label;
}
}
]]>
</mx:Script>
<mx:ToggleButtonBar
borderStyle="solid"
horizontalGap="5"
itemClick="clickHandler(event);"
toggleOnClick="true"
selectedIndex="-1">
<mx:dataProvider>
<mx:String>Flash</mx:String>
<mx:String>Director</mx:String>
<mx:String>Dreamweaver</mx:String>
<mx:String>ColdFusion</mx:String>
</mx:dataProvider>
</mx:ToggleButtonBar>
<mx:TextAreaid="myTA" width="250" height="100"/>
- 介绍Flex的ButtonBar和ToggleButtonBar控件
- 介绍Flex的ButtonBar和ToggleButtonBar控件
- Flex中ToggleButtonBar控件设置button的样式
- Flex的ToggleButtonBar出现。。。问题
- Flex学习之路之二十四 Spark ButtonBar 和 TabBar的使用
- Flex样式-ToggleButtonBar篇
- Flex样式-ButtonBar篇
- 在Flex中使用buttonBar
- ToggleButtonBar的使用
- tile布局的ButtonBar
- flex中TabBar、ButtonBar以及ViewStack
- Flex Tree和其他控件的联动
- ToggleButtonBar 的 selectedIndex= -1 问题
- 怎样使用LinearLayout的ButtonBar样式
- flex的控件
- Flex的TabBar控件
- Flex的TabBar控件
- 介绍flex的网址
- 关于Android ListView组件中android:drawSelectorOnTop含义
- 程序员技术练级攻略
- Spring bean生命周期
- 努力成为优秀的工程师
- 修正IE6不支持position:fixed的bug
- 介绍Flex的ButtonBar和ToggleButtonBar控件
- 安卓动作游戏《亡灵杀手 Undead Slayer》攻略
- 《海量数据处理常用思路和方法》
- 三角形类
- stm32 FALSH读写问题
- IOS NSRunloop 的使用
- 产品经理的核心价值
- 程序员必备技能
- Js中的window.parent ,window.top,window.self 详解