Monday, July 11, 2011

DataGroups in Flex: Part 2 - Creating a DataGroup

In this tutorial we will learn how to create and use a DataGroup component.

In the previous tutorial we have learned how to use the List component to display data from a dataset of Objects. Let's use the same dataset here:

<fx:Declarations>
<mx:ArrayCollection id="myAC">
<fx:Object firstname="John" lastname="Jackson" age="25" />
<fx:Object firstname="Bob" lastname="Thompson" age="30" />
<fx:Object firstname="Andy" lastname="Doyle" age="30" />
</mx:ArrayCollection>
</fx:Declarations>

To create a DataGroup object, we need to give it an itemRenderer. For now, let's set its itemRenderer property to the default item renderer class path. To assign a dataset to a DataGroup, we can use the dataProvider property, just like with the List component. I will also set the layout of this DataGroup to vertical layout.

In the end, this is what we get:

<?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/mx"
   width="120" height="120">
   
<fx:Declarations>
<mx:ArrayCollection id="myAC">
<fx:Object firstname="John" lastname="Jackson" age="25" />
<fx:Object firstname="Bob" lastname="Thompson" age="30" />
<fx:Object firstname="Andy" lastname="Doyle" age="30" />
</mx:ArrayCollection>
</fx:Declarations>

<s:DataGroup itemRenderer="spark.skins.spark.DefaultItemRenderer" dataProvider="{myAC}">
<s:layout>
<s:VerticalLayout />
</s:layout>
</s:DataGroup>

</s:Application>

Now, if you run the code, you will see this:


As you can see, what we got is a List-like component, which displays the object's type instead of its values. You might think this looks exactly as the List component, but you would be mistaken - there is no selection functionality in a DataGroup. There is also no such property like labelField in this component.

Now let's try changing our data set a little. Let's turn it from the array of Objects in to an array of simple String objects.

<fx:Declarations>
<mx:ArrayCollection id="myAC">
<fx:String>John</fx:String>
<fx:String>Bob</fx:String>
<fx:String>Andy</fx:String>
</mx:ArrayCollection>
</fx:Declarations>

Now if you run the code you will get these results:


Now we can actually see some values. However, this only worked when our elements were simple String values.

This happens because of the itemRenderer we specified. An itemRenderer is basically an object that is responsible for displaying the data from one dataset's element. The default itemRenderer just takes the one value and displays it. It is possible to create custom itemRenderers though, and this is where we can do whatever we want without limitations. We can use the itemRenderer to take the values from the element's data and display it in any way we want.

If you have read my tutorials about DataGrids in AS3, you are familiar with a class called CellRenderer, and you have probably noticed that the idea behind the cell renderers and item renderers is the same. We will start making our own custom itemRenderers in the next tutorial.

Thanks for reading!

Related:

DataGroups in Flex: Part 1 - Introduction, Using the List component
DataGroups in Flex: Part 3 - Creating custom itemRenderer
DataGroups in Flex: Part 4 - Virtualization

No comments:

Post a Comment