论坛首页 编程语言技术论坛

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

浏览 3180 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2010-12-25   最后修改:2010-12-25

祝大家 "圣诞快乐" 


[说明: 本文为 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 原创, 转载请注明原文, 谢谢]

 

 

论坛首页 编程语言技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics