Problem
I have a list of data items that I want to render as a list in my MXML-only application.
Solution
Since the Repeater component no longer exists, I'll use the new Flex 4 DataGroup Container.
Detailed explanation
My application and my data items
Here is my application and the data items I want to render:
<?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/halo" creationComplete="creationCompleteHandler(event)" minWidth="1024" minHeight="768"> <fx:Script> <![CDATA[ import mx.events.FlexEvent; static protected var softwares:Array = [ {name: "Photoshop CS4", color: "#2B75BC"}, {name: "Flash CS4", color: "#951516"}, {name: "Flash Builder 4", color: "#9C9C9C"}, {name: "Illustrator", color: "#E98000"} ]; protected function creationCompleteHandler(e:FlexEvent):void { // init } ]]> </fx:Script></s:Application>Adding the dataGroup component
<s:DataGroup id="dataItemListRenderer" itemRenderer="com.palleas.renderer.DataItemRenderer"> <s:layout> <s:VerticalLayout /> </s:layout></s:DataGroup>As you can see, DataGroup is a basic container with the same main properties:
* dataProvider : this is the IList object (such as ArrayCollection) containing the data items
* itemRenderer : this is how you'll render your item. Here, I'll use a ItemRenderer to render my item (I thought it would be appropriate, huh?)
Setting the item renderer
My itemRenderer extends the ItemRenderer Component. If you want it to work properly, your itemRender must have these two states declared, even if you don't use them:
*normal: this is the default state of your component
*hovered: when the use rolls over the item
*selected: when the item is selected by the user. By default, this is not supported by the DataGroup component, so if you want to render that state, you'll have to use a List instead of a DataGroup.
Here is my item renderer:
<?xml version="1.0" encoding="utf-8"?><s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <s:states> <s:State name="normal" /> <s:State name="hovered" /> <s:State name="selected" /> </s:states>
<s:layout> <s:BasicLayout /> </s:layout> <s:Rect top="0" right="0" bottom="0" left="0" alpha="0.5" alpha.hovered="1"> <s:fill> <s:SolidColor color="{data.color}" /> </s:fill> </s:Rect> <s:SimpleText text="{data.name}" top="10" left="10" bottom="10" right="10"/></s:ItemRenderer>This is just a simple example of how you can use the DataGroup component. This component is kind of restricted as it doesn't automatically display a scrollbar if the dataProvider is too long, but it will be more than enough for a lot a basics applications.
Report abuse
