Thursday, April 21, 2011

Flex - TileList vs Tile

The DataGroup and SkinnableDataContainer, using a TileLayout class, replace the Flex 3 technique of using a repeater and the Tile container. A repeater in Flex 3 was a simple mechanism for looping over a collection of data (such as an array), which could be used to dynamically create child display objects in a container such as a Tile.

As a general guideline, TileList is usually the more logical way to go. Using a TileList consumes less memory and produces a faster initial response, because it renders only the viewable portion of the data. As you scroll to bring more items into view, they must be rendered on the fly, causing a momentary blank spot in their place (hint: one way of mitigating this is to display a little swirling loader icon until the item is rendered), increasing the lag time between scroll movement and a repainted window.

In contrast to the way item renderers are handled by List-based components, a Tile renders all children at once, whether it’s within the dimensions of the stage’s current viewport or not. If you have a decent number of items to be rendered, be careful if you go this route, because the stage won’t paint itself until every display object (including all those renderers!) has completed the component lifecycle (see Flex in Action chapter 17 for more on this) and is ready to be displayed. On a slower connection, this could take a long time. On the plus side, once the render is complete, scrolling is seamless, with the only real limitation now being the hardware resources available (for example, scrolling fast will make CPU usage go up a lot because graphics rendering unfortunately can’t be offloaded to the graphics processor, and so the Flash Player is limited to a single thread on the main CPU to render everything on the stage).

No comments: