Introduction to the DataGroup Component in Flex 4

DataGroup is a new component introduced in Flex 4 that is responsible for turning data items like Strings and Objects into visual elements. The process of turning boring old data items into a visual representation is called item rendering. DataGroup is the lightest weight component that deals with item rendering. It has no skin and no concept of selection. A SkinnableDataContainer is exactly the same as a DataGroup except it has a skin and a List provides selection functionality.

Sample Usage

<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark">
 
    <s:DataGroup 
        itemRenderer="spark.skins.spark.DefaultItemRenderer">
 
        <s:layout>
            <s:VerticalLayout />
		</s:layout>
 
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>item 0</fx:String>
                <fx:String>item 1</fx:String>
                <fx:String>item 2</fx:String>
                <fx:String>item 3</fx:String>
            </s:ArrayList>
        </s:dataProvider>
    </s:DataGroup>
 
</s:Application>

This basic code snippet shows off three key concepts that are important when working with a DataGroup.

1. The Data Provider

This is an array of the data items to render. This takes an ArrayCollection, ArrayList, or any other IList.

2. The Item Renderer

Each data item is passed to an item renderer class which returns a visual representation of that data. There are two simple item renderers that ship with Flex 4:

spark.skins.spark.DefaultItemRenderer – a basic “to string” of the data item.
spark.skins.spark.DefaultComplexItemRenderer – doesn’t work with data items, but will display items that already have a visual represenation for example a data provider full of Buttons.

You can define your own item renderer by subclassing the ItemRenderer class. Some examples of this will follow in later posts.

3. The Layout

This defines how each renderer will be laid out on the screen. Here we use a vertical layout, but Flex 4 ships with four choices: HorizontalLayout/VerticalLayout/TileLayout/BasicLayout.

This is a very basic, ugly, useless DataGroup so far, but it demonstrates the minimum needed to get started looking at cooler stuff. In future posts I’m going to be diving deeper into some of the cool features that DataGroup’s provide including building your own item renderers, hooking up scrolling functionality, and dealing with very large data sets efficiently using virtualization.

2 thoughts on “Introduction to the DataGroup Component in Flex 4”

Comments are closed.