Home >
One of the new components that I am a fan of in Flex 4 is the DataGroup. "Why?" you may wonder... Well, the DataGroup is essentially the "repeater done right" (not my words, but I'll repeat them). The DataGroup allows you to easily create sets of objects based on the contents of a collection (ArrayCollection, XMLListCollection, or any other ICollectionView implementation), and even support virtualized data layouts.
Repeaters worked great for some scenarios, but also could end up creating lots of objects that would be computationally expensive, or could introduce memory leaks. However, Spark/Flex 4 DataGroups and layouts support data virtualization.
First, a little bit about virtualization from http://opensource.adobe.com/wiki/display/flexsdk/Spark+Virtualization"
Virtualization is an optimization for layout and rendering that reduces the footprint and startup time for containers with large numbers of items.
Developers will choose virtualized layout when the cost of creating or measuring a DataGroup is prohibitive because of the number of data items or the complexity of the data items' ItemRenderers.
When using virtualized layouts, an object is not created for every object in your collection. Instead, only enough objects are created to handle what needs to be displayed onscreen. Display objects that are no longer visible are recycled to display other data within the view, so a collection that contains 10,000 elements, may only require 10 renderers, which are recycled when scrolling through the data. This way, startup time is faster, and there is less overhead when scrolling through the data.
Enabling virtualized layouts is a simple as setting the useVirtualLayout property on a Layout object, within a DataGroup.
You can check it out below. The example shows a scrollable layout of 1000 GUID strings, only enough item renderers are created to display what is currently visible onscreen; this is starts up quickly, scrolls smoothly, and is responsive.
And here's the code that makes it all work. The key to the virutalized layout is the useVirtualLayout="true" attribute on the VerticalLayout inside of the DataGroup.
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
creationComplete="application1_creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.utils.UIDUtil;
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
[Bindable]
private var collection : ArrayCollection;
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
collection = new ArrayCollection();
collection.disableAutoUpdate();
for ( var x:int = 0; x < 1000; x++ )
{
collection.addItem( UIDUtil.createUID() );
}
collection.enableAutoUpdate();
}
]]>
</fx:Script>
<s:Scroller width="100%" height="100%">
<s:DataGroup dataProvider="{ collection }" id="dataGroup" width="100%" height="100%">
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer width="100%" height="25">
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
</s:states>
<s:Rect height="25" radiusX="10" width="100%" radiusY="10">
<s:fill>
<s:SolidColor color="#7fff7f" color.hovered="#FF6666"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x4769C4" caps="none" joints="miter" miterLimit="4" weight="1"/>
</s:stroke>
</s:Rect>
<s:RichText top="5" text="{ data }" horizontalCenter="0" />
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
<s:layout>
<s:VerticalLayout useVirtualLayout="true" />
</s:layout>
</s:DataGroup>
</s:Scroller>
</s:Application>
___________________________________
Andrew Trice
Principal Architect
Cynergy Systems
http://www.cynergysystems.com
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
Thats so cool! Thanks for the tip!
This may "scroll smoothly" but it flickers quite a bit when you drag the scrollbar. Most clients would probably log that as a bug. Any idea how to make that flickering stop?
I was unable to reproduce this flickering when building the sample code with a recent trunk build (4.0.0.9253).
I believe this was the issue: http://bugs.adobe.com/jira/browse/SDK-20962
Try updating to a recent build and see if the flickering goes away.
How would virtualization compare to data paging with the built in ColdFusion methods in Flash Builder 4? I am looking to tie a database to a photogallery that uses custom item renders and paging.
Also - what would be another example other than a scrollable list? Just trying to wrap my brain around this! Thanks.
Jeff
Hi Jeff,
Layout virtualization in Flex is responsible for only rendering items that are in view.
Data paging has less to do with rendering, but rather how much of a collection is loaded in at one time. So if you have a collection with 10,000,000 entries it might take forever to send that data across the network at once. Instead you can use data paging to only load in 10,000 items and then load in the next 10,000 only when they are needed, for example when someone scrolls down far enough in your list.
There are other spark components that support virtualization like DataGroup, SkinnableDataContainer, and DropDownList.
Hi Steven,
Thanks for the reply. The reason I ask is because I need to figure out a solution for data paging with a Spark List, and I was wondering if the virtualization is an alternative option. I guess it is not. Any thoughts or known solutions for data paging with a Spark List as the native data paging built in is only available for data grids and some Halo components.
Thanks
Jeff
Hi Steven,
Thanks for the reply. The reason I ask is because I need to figure out a solution for data paging with a Spark List, and I was wondering if the virtualization is an alternative option. I guess it is not. Any thoughts or known solutions for data paging with a Spark List as the native data paging built in is only available for data grids and some Halo components.
Thanks
Jeff
I believe that data paging in a spark List is a planned feature in the Flex 4 release and might even be checked in already (tho I'm not sure how much testing has been done on it).