`
smithfox
  • 浏览: 56410 次
  • 性别: Icon_minigender_1
  • 来自: hf
社区版块
存档分类
最新评论

[原] 基于 Flex 4 spark 的 accordion 控件

阅读更多

祝大家 "圣诞快乐" 


[说明: 本文为 http://www.smithfox.com/?e=37 原创, 转载请注明原文, 谢谢]

就算是在还没有正式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  留言。乐意和大家一起学习和交流.

[说明: 本文为 http://www.smithfox.com/?e=37 原创, 转载请注明原文, 谢谢]

 

 

分享到:
评论

相关推荐

    Flex4中头部背景图片的Accordion

    本篇文章将基于提供的文件信息深入探讨如何在Flex4中实现一个拥有自定义头部背景图片的Accordion组件,并通过代码示例详细解释其实现过程。 #### 核心知识点一:Accordion组件概述 Accordion组件是一种常见的UI...

    flex3.2分页控件以及通过flexlib自定义Accordion

    在Flex 3.2开发中,分页控件和Accordion组件是两个常用且重要的元素,它们可以帮助用户更有效地管理和展示大量的信息。让我们深入探讨这两个概念及其应用。 分页控件(Paging Control): 在Flex中,分页控件允许...

    FLEX4控件学习例子

    Spark组件库包括了一系列基本和复杂的UI组件,如按钮、标签、面板、列表等,这些在FLEX4控件学习例子中都有所体现。通过这些实例,你可以学习如何创建、配置、样式化和操作这些控件,从而提升你的Flex开发技能。 1....

    Flex各种超酷实例代码大全

    Accordion控件是一种常见的用户界面组件,它可以通过折叠和展开各个面板来节省空间。在Flex4中,我们可以轻松地自定义Accordion的头部样式,例如设置一个图片作为背景。 #### 示例分析: 1. **样式定义**:通过`...

    flex4.5学习笔记

    **知识点13:借助基于列表的控件显示数据** - **DataGrid控件**: - **labelFunction**: 定义如何显示数据项。 - **dataField属性**: 指定数据字段。 - **防止某列显示不开**: 调整列宽或其他布局属性。 - **...

Global site tag (gtag.js) - Google Analytics