Wednesday, July 13, 2011

DataGroups in Flex: Part 4 - Virtualization

In this tutorial you will learn about virtualization.

You know that each visual object takes processor time to create and RAM to store. This means that the more visual objects we display - the more CPU time it will take to render and the more RAM the application will use to store all these objects.

Now imagine that we are using a DataGroup with 500 items in the dataset - it would require significant amount of CPU and RAM to render and store these elements. However, we know that these 500 items do not fit in the screen, so we add a scrollbar to the DataGroup.

Normally, this is what happens when the user is scrolling through the elements of a DataGroup (the red frame is the borders of the DataGroup, the user can see everything inside the frame, but not outside it):


As you can see, all the items are rendered, even if they are not visible on the screen at the moment. So, as the user scrolls down, all items just shfit their position so that the user can view them.

With the help of virtualization, we can significally lower the CPU and RAM pressure in this situation. As you can see in the examlpe above, not all items are visible to the user, but all the items are already prerendered. There are 500 items rendered in total.

Virtualization basically creates visual objects only for the elements that can be seen. So, if there are 5 items that can be seen at the same time in the DataGroup, then there is no point in making more items. When the user scrolls, the items that become not visible are recycled and their data is changed so that they now represent a new item that is now visible.


This way we only rendered 5 items in total, and we still can show 500 items of the DataGroup to the user. The impact on the processor and RAM is greatly reduced, but the user visually sees no difference.

To enable virtualization for a DataGroup, all you have to do is set the useVirtualLayout property of the Layout class that you are using to true.

<s:layout>
<s:HorizontalLayout useVirtualLayout="true"/>
</s:layout>

You know that the layout property can be found in other components than DataGroup, however, not all components support virtualization. The group component, for example, doesn't support it. It will not, however, throw an error if you try to set that property - it will simply ignore it and still create all its children, visible or not.

Thanks for reading!

Related:

DataGroups in Flex: Part 1 - Introduction, Using the List component
DataGroups in Flex: Part 2 - Creating a DataGroup
DataGroups in Flex: Part 3 - Creating custom itemRenderer

2 comments:

Anonymous said...

can you share the above movie code?

keremto said...

can you share the source code???

Post a Comment