Flex 3:Feature Introductions: List and Data Effects
From Adobe Labs
Data change effects in Flex 3 make it possible to apply animated visual effects to item renderers in data driven controls when the data in the data provider changes. For example, when a item is deleted from a collection, the renderer for that item might fade out and shrink. The goal of this feature was not only to enhance the visual appeal and customizability of Flex's data driven controls, but also to make them more usable. As with effects elsewhere in Flex, smooth transitions can help users notice and understand changes that are occurring.
Currently, data change effects are implemented for List and TileList (including HorizontalList), and for collection events of kind ADD, REMOVE, and REPLACE. They are not turned on by default, but there are two default effects (DefaultListEffect for List, DefaultTileListEffect for TileList) that can be applied easily.
To apply a default effect to a List or TileList, set the style itemsChangeEffect to either an appropriate class or an instance of an appropriate class. This can be done in the style block, like this:
<mx:Style>
TileList {
items-change-effect:ClassReference('mx.effects.DefaultTileListEffect');
}
</mx:Style>
or inline, like this:
<mx:TileList itemsChangeEffect="{DefaultTileListEffect}"/>
or (using an instance with custom parameter values instead of a class reference):
<mx:TileList>
<mx:itemsChangeEffect>
<mx:DefaultTileListEffect fadeOutDuration="250" fadeInDuration="350" moveDuration="500" />
</mx:itemsChangeEffect>
</mx:TileList>
For List, you'd use DefaultListEffect instead of DefaultTileListEffect. The sample file ListEffect1.mxml shows this in action.
A couple pointers on using the default effects:
- For DefaultListEffect to work properly, variableRowHeight must be set to true on the List control. (This is because the effect involves growing and shrinking the renderers for added and removed items).
- The new ListBase property offscreenExtraRowsOrColumns helps to eliminate visual glitches in data effects. It is primarily useful for TileLists, when using the default effects. Setting this property to a small even number such as 2 or 4, or possibly larger if many items may be deleted at once, is recommended.
In addition to using the default effects, you can also write your own, in MXML. See the documentation for information, or start with the default list data effects. The example CustomTileListEffect.mxml shows a custom effect applied to a TileList.
In Flex 3 beta 2, dataChangeEffect was declared as a Style on ListBase. This has changed in beta 3 to itemsChangeEffect, which is declared as an Effect on List and TileList.
