- 浏览: 195642 次
- 性别:
- 来自: 成都
文章分类
最新评论
-
ZKJABLE:
解决了我的问题。好文要顶!
遭遇了"Call to undefined function socket_create()" -
touya:
非常感谢!果然有效,更改后的结果如下:netbeans_def ...
调整netBeans中文版的字号 -
playfish:
支持楼主翻译,辛苦了.
Flex 3 cookbook翻译: 2.1 监听Button的Click事件 -
ycy303:
专注才能成功。
叽叽歪歪 -
ycy303:
工具:1. flex/flash/air2. php3. ru ...
叽叽歪歪
2.2 生成一系列开关按钮
2.2.1 问题
你需要为用户提供一系列按钮选项
2.2.2 解答
用 ToggleButtonBar 控件和 ArrayCollecton 生成一系列按钮
2.2.3 讨论
为了创建一系列按钮,先生成一个 application ,里面有一个 ToggleButtonBar 控件的实例。 ToggleButtonBar 控件定义一组横的或竖的按钮。这是一种能保持它们的选定或未选状态的按钮,我们称之为开关按钮。如下所示:
<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>
运行效果:
图 2-2-1
当 application 初始化的时候, initialize 事件引用了 initApp 方法。 initApp 方法用源数据创建了名为 dataProvider 的 ArrayCollecton 对象,以供 ToggleButtonBar 使用。由于这个 ToggleButtonBar 实例的 dataProvider 属性绑定到了这个 ArrayCollection 对象,它更新了新按钮的显示内容。默认情况下, ArrayCollecton 里的项目的 label 属性作为 ToggleButtonBar 实例中按钮的标签( label )显示。如果要设置别的属性作为按钮的标签(比如 mode ),就要设置 ToggleButtonBar 的 labelField 属性:
<mx:ToggleButtonBar id="toggle" dataProvider="{dataProvider}" labelField="mode" itemClick="setMode(event)"/>
译者注:从图 2-2-1 可以看出,两个按钮是紧挨着的。这显然不好看。如何调整两个按钮之间的距离呢? ToggleButtonBar 有 horizontalGap 属性,就是调整水平间隔的。比如 horizontalGap="10 " 效果如下:
图 2-2-2
ToggleButtonBar 实例的 itemClick 事件与 setMode 方法关联了。注意一个类型为 ItemClickEvent 的事件被传递进了 setMode 方法。 ItemClickEvent 实例的 item 属性是对作为 dataProvider 的 ArrayCollection 里的对应项的引用。
ToggleButtonBar 的通常的使用情景是在用户选择某个特定的按钮之前,所有的按钮保持未选择状态。可是,默认情况是 dataProvider 被设定后,第一个按钮就是选中状态(在上面图中可以看到)。幸运的是, Flex3 可以让你访问 SDK 源代码,你就可以扩展 ToggleButtonBar 去满足你的需要。 ToggleButtonBar 的源代码可以在如下地方找到:
<Flex 3
installation
dir>/sdks/3.0.0/frameworks/projects/framework/src/mx/controls/
ToggleButtonBar.as
highlightSelectedNavItem 方法里面提供了一种怎样取消选中一个 button 。它首先获取对当前选中 button 的引用,然后设置它的选中状态为 false:
child = Button(getChildAt(selectedIndex)); child.selected = false;
你可以创建一个自定义的 ToggleButtonBar 版本,改进来自框架代码中的信息,来满足你的特定需求。在这儿,就是在启动的时候,让所以的按钮都是未选中状态。
下面的例子是一个扩展自 ToggleButtonBar 的 CustomToggleButtonBar 类。这个类有这样的功能:只要 dataProvider 改变了,所以的按钮都会呈未选中状态。我们可以注意到它覆盖了 dataProvider 的 setter 方法,并用一个 dataReset 布尔标签来跟踪 dataProvider 是否重置。 updateDisplayList 方法也被覆盖,只要 dataProvider 被重置,就让当前选中的按钮呈未选中状态。最后,当显示被更新后, dataReset 标签就被重置为默认的 false 状态。
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; } } } } } }
要使用这个新组件,用 CustomToggleButtonBar 简单地替换 ToggleButtonBar 就可以了。
<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)"/>
图 2-2-3
正如你看到的那样,扩展默认的组件去符合你的需要还是比较容易的。查看 Flex SDK 源代码不仅是一个了解框架内部的好途径,它也为扩展默认组件提供了很大的帮助。不过在使用 mx_niternal 库里面的非正式的属性 / 方法的时候要小心,因为他们在未来的 SDK 版本中很可能会被修改。
发表评论
-
flex的字体问题
2010-07-01 16:48 1106... -
array 与 arrayCollection
2009-03-19 17:20 1921arrayCollection比array高级。增加了一些事件 ... -
调整netBeans中文版的字号
2009-01-20 14:43 1647netBeans6.5中文版界面上的字号太小,看起来很不舒服, ... -
Flex3 cookbook 翻译: 3.2 根据比例设定对象的位置和尺寸
2008-09-18 18:26 14823.2 根据比例设定对象的位置和尺寸 3.2.1 问题 你 ... -
Flex 3 cookbook翻译: 3.1 用布局管理器定位子对象
2008-09-18 00:25 24013 容器 . 容器 (contain ... -
Flex 3 cookbook翻译: 2.14 处理focusIn和focusOut事件
2008-09-17 22:55 32902.14 处理 focusIn 和 focusOut 事件 ... -
Flex 3 cookbook翻译: 2.13 为弹出窗口创建自定义边框
2008-09-17 18:11 30512.13 为弹出窗口创建自定义边框 2.13.1 问 ... -
Flex 3 cookbook翻译: 2.12 显示并定位多个弹出框
2008-09-17 16:07 37722.12 显示并定位多个弹出框 2.12.1 问题 ... -
Flex 3 cookbook翻译: 2.11 使用来自Calendar控件的日期
2008-09-17 01:58 18862.11 使用来自 Calendar ... -
Flex 3 cookbook翻译
2008-09-17 01:28 1304Flex 3 cookbook翻译: 2.1 监听Butto ... -
Flex 3 cookbook翻译: 2.10 在应用中显示一个Alert窗口
2008-09-17 01:23 13512.10 在应用中显示一个 Alert 窗口 2.10 ... -
Flex 3 cookbook: 2.9 为菜单控件创建事件处理器
2008-09-17 00:38 22802.9 为菜单控件创建事件处理器 2.9.1 问题 ... -
Flex 3 cookbook: 2.8 动态填充菜单
2008-09-17 00:05 35612.8 动态填充菜单 2.8.1 问题 你想填充并动态 ... -
Flex 3 cookbook翻译: 2.7 为菜单提供数据
2008-09-16 22:26 10992.7 为菜单提供数据 2.7.1 问题 用 data ... -
Flex 3 cookbook翻译: 2.6 设置控件的labelFunction
2008-09-16 21:30 15032.6 设置 控件的 labelFunction 2. ... -
Flex 3 cookbook翻译: 2.5 设置组件的tab键顺序
2008-09-16 18:34 26252.5 设置组件的 tab 键顺序 2.5.1 问题 ... -
Flex 3 cookbook翻译: 2.4 用SWFLoader载入一个SWF文件
2008-09-16 17:23 50102.4 用 SWFLoader 载入一个 SWF 文件 ... -
Flex 3 cookbook: 2.3 用ColorPicher设置Canvas的颜色
2008-09-16 17:06 30192.3 用 ColorPicher 设置 Canvas ... -
Flex 3 cookbook翻译: 2.1 监听Button的Click事件
2008-09-10 17:10 5344第 2 章 菜单和控件 Flex3 SDK 提供 ... -
为LinkButton组件添加icon(图标)并设定icon和label的位置
2008-09-08 22:49 7524来自:http://blog.flexexamples.com ...
相关推荐
Flex 3 Cookbook 简体中文版是一本专注于Flex 3技术的实用指南,由翻译协作组精心编译并免费传播。这本书旨在帮助开发者深入理解和应用Flex 3框架,包括ActionScript和MXML这两个核心组成部分。 ActionScript是Flex...
《Flex3 Cookbook》是针对Adobe Flex 3这一版本的开发指南,主要涵盖了使用Flex构建富互联网应用程序(RIA)的各种技术和策略。Flex是一个开源框架,它允许开发者使用MXML和ActionScript来创建交互式、高性能的Web...
3. **组件库的使用**:Flex提供了一整套预定义的UI组件,如按钮、文本框、列表等,了解如何创建、自定义和组织这些组件以构建专业级的用户界面。 4. **数据绑定**:学习如何利用Flex的数据绑定机制,实时更新界面...
《Flex 4 Cookbook》是一本由Joshua Noble、Todd Anderson、Garth Braithwaite、Marco Casario 和 Rich Tretola 联合编写的英文书籍,由著名的O'Reilly Media出版,专注于Flex 4技术的实用教程。本书旨在帮助读者...
《Flex 3 Cookbook》是一本专注于Adobe Flex 3开发的实用指南,对于想要深入学习和掌握Flex技术的开发者来说,是一份不可多得的资源。这本书由经验丰富的作者撰写,其翻译质量高,内容准确,避免了常见的翻译错误,...
如果您是用Flex, 很好用的一本書。 Flex 3 Cookbook by Joshua Noble; Todd AndersonPublisher: O'ReillyPub Date: May 6, 2008 Print ISBN-13: 978-0-596-52985-7 Pages: 704 The best way to show off a powerful...
Flex 3 Cookbook 是一本专注于Adobe Flex 3技术的实用指南,旨在帮助开发者深入理解和应用Flex 3框架。Flex 3 是一个用于构建富互联网应用程序(RIA)的开发平台,它结合了MXML和ActionScript 3.0,使得UI设计和编程...
Flex 3 CookBook 简体中文是一本专注于Flex 3技术的中文资源,由翻译协作组共同完成,旨在帮助开发者理解和应用Flex 3。这本书强调了ActionScript和MXML这两种编程语言在Flex应用程序中的核心作用。 ActionScript是...
Flex 4 Cookbook
Flex 3 CookBook源码 Flex 3 CookBook源码
《Flex3 Cookbook》一书由Joshua Noble与Todd Anderson共同编写,是Adobe Developer Library系列的一部分,该系列由O'Reilly Media Inc.与Adobe Systems Inc.合作出版,旨在为使用Adobe技术的开发者提供权威资源。...
3. **组件库**:Flex 3包含大量预定义的UI组件,如按钮、文本框、列表、图表等,这些组件可直接使用,也可自定义扩展,满足不同应用场景的需求。 4. **数据绑定**:Flex 3支持数据绑定,允许开发者将界面元素与数据...
3. **组件库**:Flex 3包含一个广泛的预定义组件集合,如按钮、面板、表格等,这些都是构建用户界面的基础。书里会介绍如何使用和自定义这些组件。 4. **数据绑定**:Flex 3支持数据绑定,使得视图与模型之间的同步...
1. **MXML与ActionScript 3.0**:Flex主要使用两种语言进行开发,MXML是一种声明式语言,用于构建用户界面;ActionScript 3.0是一种面向对象的脚本语言,负责应用程序的逻辑处理。两者结合,使开发者能够既快速设计...