Flex Accordion控件的数据绑定

关键词：Accordion，数据绑定，动态生成，Repeater
在flex中Accordion控件人气很高，因为这个控件很简单的就实现了类似QQ的效果，让许多开发人员情有独钟。在很多场合需要我们根据得到的数据来与之绑定，动态的改变Accordion控件的内容与结构。如果用AS代码根据数据来初始化Accordion控件是完全可以的，但是实现起来比较复杂。于是我们希望能够用flex的数据绑定，轻松的初始化Accordion控件。可惜的是，Accordion控件中并没有提供dataProvider属性来让我们进行数据绑定。不过没关系，flex中还提供了一个强大的控件Repeater。接下来我就说一下如何使用Repeater来动态生成Accordion。
一、 数据源的数据类型。
数据源也就是希望绑定到Accordion控件上的数据。一般情况下应该是树形结构，Accordion中的容器并且这些容器中还应该有一些内容。在此我推荐使用xml，xml表示树形结构非常容易，而且flex对xml的操作非常简单。以下为xml数据源的一个例子：
<mx:XML id="menuLst"> <menus> <item id="01" label="System"> <item id="0101" label="sys1"/> <item id="0102" label="sys2"/> </item> <item id="021" label="Manager"> <item id="0201" label="man1"/> <item id="0202" label="man2"/> </item> </menus> </mx:XML>

希望的结果是Accordion控件中生成连个标签名字为“System”和“Manager”，并且每个标签下面都有各自的内容，例如system标签下面有“sys1”和“sys2”。
二、 Accordion与Repeater结合
Accordion控件内部对象都是容器对象，而Repeater可以和数据绑定，根据数据源来生成n个容器对象，这样的结合可以说是完美。编码行式如下：

<mx:Accordion x="78" y="10" width="200" height="200"> <mx:Repeater id="rep" dataProvider="{menuLst.item}"> <mx:Canvas width="100%" height="100%" label="{rep.currentItem.@label}"> <mx:List width="100%" height="100%" dataProvider="{rep.currentItem.item.@label}"/> </mx:Canvas> </mx:Repeater> </mx:Accordion>

Accordion 标签中添加Repeater标签，Repeater标签中再添加一个Canvas标签。表示Repeater会根据绑定的数据源动态生成n个Canvas对象作为Accordion对象的成员。Repeater标签的dataProvider属性与XML对象menuLst进行绑定后，Repeater会根据menuLst的内容生产两个Canvas对象。Canvas对象的label属性为当前xml节点的label属性。当前xml节点应该是这个形式的内容：

<item id="01" label="System"> <item id="0101" label="sys1"/> <item id="0102" label="sys2"/> </item>

然后还需要把xml节点的叶子节点显示出来，叶子节点的xml应该是这个形式：

<item id="0101" label="sys1"/>

在此我使用了List控件，设置List控件的dataProvider属性为rep.currentItem.item.@label就指的是“sys1”这个级别的内容了。完整的代码如下所示：

<?xml version="1.0"?> <!-- printing/DGPrintCustomComp.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*"> <mx:Panel id="p" width="408" height="318" layout="absolute"> <mx:Accordion x="78" y="10" width="200" height="200"> <mx:Repeater id="rep" dataProvider="{menuLst.item}"> <mx:Canvas width="100%" height="100%" label="{rep.currentItem.@label}"> <mx:List width="100%" height="100%" dataProvider="{rep.currentItem.item.@label}"/> </mx:Canvas> </mx:Repeater> </mx:Accordion> </mx:Panel> <mx:XML id="menuLst"> <menus> <item id="01" label="System"> <item id="0101" label="sys1"/> <item id="0102" label="sys2"/> </item> <item id="021" label="Manager"> <item id="0201" label="man1"/> <item id="0202" label="man2"/> </item> </menus> </mx:XML> </mx:Application>

效果图：