Problem
In List based controls from Flex Framework, we aren't allowed to create itemRenderers with different size
Solution
We can create subclass of Box (for example VBox) and fill it with our ItemRenderers
Detailed explanation
In this example we simply create VBox subclass, which has properties like itemRenderer and dataProvider to populate it. Here is code:
package eu.orangeflash.controls
{
import mx.containers.VBox;
import mx.controls.Label;
import mx.core.*;public class ListView extends VBox
{
protected var dp:Object;
protected var itemFactory:IFactory;
public function ListView()
{
//TODO: implement function
super();
setDefaults();
}
[Bindable]
[Inspectable]
public function set dataProvider(value:Object):void
{
dp = value;
createItems();
}
public function get dataProvider():Object
{
return dp;
}
[Bindable]
[Inspectable]
public function set itemRenderer(value:IFactory):void
{
itemFactory = value;
if(dataProvider != null)
{
createItems();
}
}
public function get itemRenderer():IFactory
{
return itemFactory;
}
protected function createItems(keepOld:Boolean = false):void
{
if(!keepOld)
{
removeAllChildren();
}
for each(var data:Object in dp)
{
var renderer:IDataRenderer = addChild(itemFactory.newInstance()) as IDataRenderer;
renderer.data = data;
}
}
protected function setDefaults():void
{
itemFactory = new ClassFactory(Label);
}
}
}
And we can create instance of this easily with MXML syntax:
<controls:ListView id="list" itemRenderer="{new ClassFactory(render.ImageRenderer)}" dataProvider="{['assets/1.jpg','assets/2.jpg','assets/3.jpg','assets/4.jpg','assets/5.jpg']}" width="800" height="800"/> Here is example of ListView with image item renderer:
