祝大家 "圣诞快乐"
就算是在还没有正式release的 Flex SDK 4.5 (Hero) 中我也没有发现有Spark Accordion,所以我就发扬,“自己动手,丰衣足食”的精神,自己开写一个。
先说为什么要创建这个基于spark的accordion控件。大家都知道Flex中有几种默认导航控件: TabBar, ButtonBar, Accordion,他们可以绑定到ViewStack。
做个简单的程序时,这种绑定为我们还来了方便,但在一个很正规的web site,我们要考虑导航和URL的交互(Flex用deeplink来解决),一旦用deeplink机制,则意味着网站导航不仅仅是靠用户在page中click这些导航控件来驱动,用户也可以直接输入URL进行直接定位。这样导航控件和ViewStack的这种封闭的bind关系必须要断开。所有的导航全部交给DeepLink来做,Tabbar, Accordion之类的控件的change事件,将先反映到DeepLink,DeepLink再负责切换viewstack。用户直接输入URL,也会直接反映到DeepLink, DeepLink不仅切换ViewStack,还要正确控制所有导航控件的SelectedIndex。
基本上面的分析,我们可以看出,Flex的Accordion, TabBar, ButtonBar的dataProvider已经没有实际意义,为此我决定做一组以mxmlContent(子可视控件)为DefaultProperty的导航组件,Accordion就是其中之一。
这个Accordion是基于Spark的BorderContainer的, 并且可以将skin和 layout可以分开.
主要的类:
public class Accordion extends BorderContainer;
public class AccordionItem extends BorderContainer;
还有两个皮肤:
AccordionSkin和AccordionItemSkin,大家可以换皮肤
看Demo,右键可以view source:
http://www.smithfox.com/myopensource/accordion/Main.swf
欢迎大家使用,有任何建议或是问题都可以在 http://www.smithfox.com/?e=37 留言。乐意和大家一起学习和交流.
分享到:
相关推荐
本篇文章将基于提供的文件信息深入探讨如何在Flex4中实现一个拥有自定义头部背景图片的Accordion组件,并通过代码示例详细解释其实现过程。 #### 核心知识点一:Accordion组件概述 Accordion组件是一种常见的UI...
在Flex 3.2开发中,分页控件和Accordion组件是两个常用且重要的元素,它们可以帮助用户更有效地管理和展示大量的信息。让我们深入探讨这两个概念及其应用。 分页控件(Paging Control): 在Flex中,分页控件允许...
Spark组件库包括了一系列基本和复杂的UI组件,如按钮、标签、面板、列表等,这些在FLEX4控件学习例子中都有所体现。通过这些实例,你可以学习如何创建、配置、样式化和操作这些控件,从而提升你的Flex开发技能。 1....
Accordion控件是一种常见的用户界面组件,它可以通过折叠和展开各个面板来节省空间。在Flex4中,我们可以轻松地自定义Accordion的头部样式,例如设置一个图片作为背景。 #### 示例分析: 1. **样式定义**:通过`...
**知识点13:借助基于列表的控件显示数据** - **DataGrid控件**: - **labelFunction**: 定义如何显示数据项。 - **dataField属性**: 指定数据字段。 - **防止某列显示不开**: 调整列宽或其他布局属性。 - **...