Sunday, July 10, 2011

DataGroups in Flex: Part 1 - Introduction, Using the List component

In this tutorial we are going to start learning about DataGroups. Specifically, we will learn about ways of displaying data using the List component.

We have used different data elements in the previous tutorials, such as Arrays, XMLLists, XMLListCollections and ArrayCollections. We have learned the basics of using these objects, adding and removing data from them, and of course, retreive information the dataset to display it to the user.

In Flex, there are components that can be used to display the contents of a datset by generating a visual element for each element in that dataset. One of those components is already known to you, and that is the List component.

The List component takes the data that is passed to its dataProvider property, and creates an array of text elements, where each element represents an element in the dataset. We've learned, that if we pass an Object with multiple properties as the dataProvider, we can specify the property that we want to display in the labelField attribute.

For example, if we have a dataset like this:

<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>

We could use the list to display the first names of each person in the list by setting the labelField property to "firstname":

<s:List dataProvider="{myAC}" labelField="firstname" />

The whole code and the results would be:

<?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">
   
<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:List dataProvider="{myAC}" labelField="firstname" />

</s:Application>


However, this is sometimes not enough information. There is no way to make the labelField display more than one property of the Object. However, there's a labelFunction property for that.

We can use the labelFunction property to display a String that can be generated from any properties of the Object. For example, we could display the full name and the age of the person by using a function like this:

private function displayFullname(evt:Object):String{
return evt.firstname + " " + evt.lastname + " (" + evt.age + ")";
}

And then passing it as the value of the labelFunction property:

<s:List dataProvider="{myAC}" labelField="firstname" labelFunction="displayFullname" />

The full code and the results:

<?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>

<fx:Script>
<![CDATA[
private function displayFullname(evt:Object):String{
return evt.firstname + " " + evt.lastname + " (" + evt.age + ")";
}
]]>
</fx:Script>

<s:List dataProvider="{myAC}" labelField="firstname" labelFunction="displayFullname" />

</s:Application>


As you can see, we have created a template that the List component used for each element in the dataset. The DataGroup class is pretty similar.

In fact, it could be said that DataGroup is the base component for List, because List is a version of a DataGroup with more functionality, that allows the user to select an item from the dataset and lets the developer determine which item has the user selected. Because of this functionality, the List component is also much more limited than DataGroup.

That's logical - the List component was created with a goal in mind - to give the developers the ability to display some text dataset elements that can be selected by the user, so this component shouldn't be used for anything more, like, for example, displaying the pictures of the people in our list along with their names.

For these situations, you should use the DataGroup component, which we will learn about in this tutorial series.

Thanks for reading!

Related:

DataGroups in Flex: Part 2 - Creating a DataGroup
DataGroups in Flex: Part 3 - Creating custom itemRenderer
DataGroups in Flex: Part 4 - Virtualization

No comments:

Post a Comment