Flex4 vs Flex3: DataGroup vs Repeater

Repeater太老土了！如果你过去使用过它，你会发出这种感概。现在，我们终于要摆脱它了。
Repeater不仅有沉重的组件，而且接合使用很不方便。那么，Flex 4中有什么可以帮助我们吗？DataGroups
下面的例子都会用到这个数据：

1. userData = new ArrayCollection();
   
2.     userData.addItem({"fname":"Rich","lname":"Tretola"});
   
3.     userData.addItem({"fname":"Joe","lname":"Smith"});
   
4.     userData.addItem({"fname":"Bill","lname":"Johnson"});

复制代码

Flex 3的例子使用了Repeater和一个名为PersonRenderer的自定义组件：
主文件中的Repeater(Flex 3)：

1. <mx:VBox horizontalCenter="0" verticalCenter="0">
   
2.     <mx:Repeater id="rep" dataProvider="{userData}">
   
3.         <local:PersonRenderer person="{rep.currentItem}"/>
   
4.     </mx:Repeater>
   
5. </mx:VBox>

复制代码

PersonRenderer 组件(Flex 3):

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" >
   
3.     <mx:Script>
   
4.         <![CDATA[
   
5.             [Bindable]
   
6.             public var person:Object;
   
7.         ]]>
   
8.     </mx:Script>
   
9.     <mx:Label text="{person.fname} {person.lname}"/>
   
10. </mx:HBox>

复制代码

 

使用了DataGroup和ItemRenderer的Flex4例子。代码如下：
主文件中的DataGroup:

1. <s:DataGroup itemRenderer="PersonRenderer"
   
2.              dataProvider="{userData}"
   
3.              verticalCenter="0" horizontalCenter="0">
   
4.     <s:layout>
   
5.         <s:VerticalLayout/>
   
6.     </s:layout>
   
7. </s:DataGroup>

复制代码

PersonRenderer ItemRenderer (Flex 4):

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
   
3.             xmlns:s="library://ns.adobe.com/flex/spark">
   
4.     <s:Label text="{data.fname} {data.lname}"/>
   
5. </s:ItemRenderer>

复制代码