« Flash 10.1 coming to Pre, Driod, Nexus One, iPhone … | Main | Please RT: Apple iPad – No Flash Player? #FuckTheIpad »
F3 v. F4: Repeater v DataGroup
| By Rich Tretola | January 11, 2010 | |
| 16,543 views |
Ah, good old repeaters. Well if you have used repeaters in the past you are more likely to say, good riddance Mr. repeater. Repeaters were not only pretty heavy components, but also just a general pain in the butt. So, what does Flex 4 have to help us? DataGroups!
The following examples both use the data below:
1 2 3 4 | userData = new ArrayCollection(); userData.addItem({"fname":"Rich","lname":"Tretola"}); userData.addItem({"fname":"Joe","lname":"Smith"}); userData.addItem({"fname":"Bill","lname":"Johnson"}); |
The Flex 3 example uses a Repeater and custom component named PersonRenderer. The code for each is shown below:
Repeater in main application file (Flex 3)
1 2 3 4 5 | <mx:VBox horizontalCenter="0" verticalCenter="0"> <mx:Repeater id="rep" dataProvider="{userData}"> <local:PersonRenderer person="{rep.currentItem}"/> </mx:Repeater> </mx:VBox> |
PersonRenderer component (Flex 3)
1 2 3 4 5 6 7 8 9 10 | <?xml version="1.0" encoding="utf-8"?> <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" > <mx:Script> <![CDATA[ [Bindable] public var person:Object; ]]> </mx:Script> <mx:Label text="{person.fname} {person.lname}"/> </mx:HBox> |
The Flex 4 example uses a DataGroup and ItemRenderer named PersonRenderer. The code for each is shown below:
DataGroup in main application file (Flex 4)
1 2 3 4 5 6 7 | <s:DataGroup itemRenderer="PersonRenderer" dataProvider="{userData}" verticalCenter="0" horizontalCenter="0"> <s:layout> <s:VerticalLayout/> </s:layout> </s:DataGroup> |
PersonRenderer ItemRenderer (Flex 4)
1 2 3 4 5 | <?xml version="1.0" encoding="utf-8"?> <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <s:Label text="{data.fname} {data.lname}"/> </s:ItemRenderer> |
Related posts:
F3 v. F4: Boxes v Groups
Topics: Flex 3 (Moxie), Flex 4 | 19 Comments »
January 11th, 2010 at 8:19 am
Even though it’s, in my opinion, bad form to manipulate controls / data directly on the renderer itself, if I needed to do it I could expose the mx_internal property, rendererArray in Flex 3. With the DataGroup in Flex 4, is it easier to get direct acces to the rendered components?
Reply to this comment
January 11th, 2010 at 10:19 am
The most important thing about this change for me is that the DataGroup will support virtualization of its renderers (i.e. only create enough renderers required to fill itself) if useVirtualLayout is set to true, unlike Repeaters that would create each item whether its in view or not.
Reply to this comment
January 11th, 2010 at 11:14 am
“With the DataGroup in Flex 4, is it easier to get direct acces to the rendered components?”
You can use getElementAt(index:int):IVisualElement
Reply to this comment
January 11th, 2010 at 11:45 am
Quick Question. Since ItemRenderer is a property you’re setting on the DataGroup, is it assumed that it behaves like ItemRenderers in Flex 3, i.e., they get reused?
I only ever used Repeaters when I actually had to have physical objects to manipulate.
In this case, if DataGroup’s itemRenderers are recylable, then it’s not really the same? Or maybe there’s a way to force an Instance created for each one?
Thanks for clarification
Reply to this comment
January 11th, 2010 at 2:31 pm
@Todd – Yes DataGroup does support layout virtualization and item renderer recycling.
Check out the spec for more details: http://opensource.adobe.com/wiki/display/flexsdk/Spark+Virtualization
If you want to have every renderer created at startup then set useVirtualLayout=”false” in the layout of your DataGroup. If you only want the items in view to be created then set useVirtualLayout to true. Note that item renderer recycling works a little bit differently when using the itemRenderer or itemRendererFunction properties. See this example for more details: http://flexponential.com/2009/07/10/performance-implications-of-the-list-itemrenderer-vs-itemrendererfunction-properties/ This post demonstrates the differences on a spark List component, but a DataGroup works the same way.
Reply to this comment
January 12th, 2010 at 6:17 am
Thanks for the opensource.adobe.com.
I´be never seen before!
Reply to this comment
January 12th, 2010 at 3:57 pm
Thanks… I’ve been following your whole from Flex 3 to Flex 4 tutorials… Thanks a Lot
Reply to this comment
January 14th, 2010 at 8:09 pm
Differences between a Spark List component and DataGroup is that the first one supports scrollbar and item renderer states (hover, selected etc.) by default?
Reply to this comment
January 16th, 2010 at 1:48 am
DataGroup is the simplest spark component that supports item rendering. By default it doesn’t have scrolling enabled or an item renderer hooked up. The spark List has scrolling enabled, an item renderer, and a vertical layout by default. List also introduces the concept of selecting items as well as dragging and dropping items.
Reply to this comment
January 18th, 2010 at 5:25 pm
Thanks for explanation.
Reply to this comment
January 26th, 2010 at 9:00 am
Sometimes different persons are willing to detect even some idea associated with university essay. Thence, we will offer to take the assistance of the essay writing service. In fact, it’s possible to take some stuff from this topic page.
Reply to this comment
February 11th, 2010 at 10:27 pm
Cool website, like what I have read. Will definitely be back to read again.
Reply to this comment
February 11th, 2010 at 10:29 pm
Hi,Excellent post and wonderful blog, I really like this type of interesting articles keep it up.
Reply to this comment
December 15th, 2010 at 9:21 am
[...] v. F4: Using ViewStack, TabNavigator and Accordion F3 v. F4 Tile v TileGroup F3 v. F4: Repeater v DataGroup F3 v. F4: Boxes v [...]
February 5th, 2011 at 6:49 am
Pretty Interesting article…does anyone know if DataGroup support virtualization?
Reply to this comment
Steven Shongrunden Reply:
February 13th, 2011 at 9:29 pm
Yes it does, see comment number 5.
Reply to this comment
February 15th, 2011 at 7:56 am
Hi thanks for useful info. but i have doubt
Can you tel me the difference between the DataGroup and Repeater in case of performance ??
Reply to this comment
July 12th, 2011 at 1:01 pm
Suppose you have a button in the itemRenderer, what’s the best way to handle a click event? Put the click handler in the itemRenderer, or is there a way to put it in the main application file?
thanks,
Reply to this comment
Steven Shongrunden Reply:
July 23rd, 2011 at 3:21 pm
@steve – Check out this thread for some examples: http://forums.adobe.com/thread/570405
Reply to this comment