Effortless Flex 4 Development: Datagroup
From the book
From the book
From the book
The DataGroup Component
There is one more data-driven component I want to discuss, the DataGroup. This component wasn't addressed in Chapter 5 because it requires item renderers. But the DataGroup is easy to use because it's really just a bare-bones List. I say "bare-bones" because the DataGroup lacks default item renderers and scrollbars, so without customization a DataGroup won't do anything. On the other hand, it performs well because it has no additional overhead, and you can implement just the features you require. A DataGroup can be used like a List, to merely display information, but a DataGroup can also display visual components, which is to say it can take MXML as all or part of its data source.
Creating a DataGroup
The minimal syntax for creating a DataGroup is
<s:DataGroup dataProvider="{someData}" itemRenderer="someRenderer" />
The itemRenderer property needs to be assigned an actual item renderer. There are two already defined: spark.skins.spark.DefaultItemRenderer and spark.skins.spark.ComplexItemRenderer. The former renders simple text; the latter renders visual controls. You can see an example of rendering MXML in the Adobe documentation and tutorials.
You'll often use a DataGroup with a custom item renderer you've created using the steps already outlined. The renderer could be defined in an external MXML file, in the Declarations section, or even inline. This DataGroup will look similar to the earlier List, but without an outline or scrollbars (Figure 6.16):
<s:DataGroup dataProvider="{myBooks}">
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:HGroup gap="5" paddingTop="15">
<mx:Image source="{data.image}" />
<s:Label text="{data.title}" fontSize="16" />
<s:Label text="({data.year})" fontSize="12" />
</s:HGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:DataGroup>
)
As with the earlier item renderer examples, the renderer makes use of the data object to access each item to be displayed.
Controlling the Layout
The DataGroup, like a List, has a layout property that can be used to display the DataGroup in different ways. Note that the default layout is BasicLayout, which is absolute positioning. This means that each item being displayed will be placed on top of the previous one, unless special measures are taken. In order to create the layout shown in Figure 6.16, I had to apply the VerticalLayout:
<s:DataGroup dataProvider="{myBooks}">
<s:layout>
<s:VerticalLayout />
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:HGroup gap="5" paddingTop="15">
<mx:Image source="{data.image}" />
<s:Label text="{data.title}" fontSize="16" />
<s:Label text="({data.year})" fontSize="12" />
</s:HGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:DataGroup>