How to render a collection of DisplayObject instances in a spark List?

Question

Is it possible to have a Spark List display items from an ArrayCollection of DisplayObjects (i.e.: Canvas)? Something like the code below does not render anything unless I specify an itemRenderer.

<s:List dataProvider="{ displayObjects }"> 
    <s:layout>
        <s:VerticalLayout rowHeight="290" gap="20" />
    </s:layout>
</s:List>

The reason is to leverage the List's drag and drop features for rearranging custom components. Currently, I am using a VGroup (without drag and drop) and do not want to recreate all the drag and drop functionality that you get "for free" with the List control. Other viable solutions can also be accepted.

TIA.

I think your question already contains your solution. You'll have to create a custom itemRenderer to render a DisplayObject. The default itemRenderer is looking to display a string. I'm a bit surprised that nothing is displayed; I would have expected you'd see [object Object] or something similar. — JeffryHouser, Mar 28 '13 at 02:50
You'll have to inject those displayobjects into the itemrenderer though (something like `override public function set data(value:Object):void { if (value) addElement(value); }`). Feels kinda hackish to me. — RIAstar, Mar 28 '13 at 07:29
That won't work because `createChildren` gets called before `data` is set in the itemRenderer. So you end up with `Multiple sets of visual children have been specified for this component (base component definition and derived component definition).` — Carlos Bittencourt, Mar 28 '13 at 17:47

score 0 · Answer 1 · answered Mar 29 '13 at 00:44

Try this:

enter image description here

//Application

<?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" 
           minWidth="955" minHeight="600" 
           creationComplete="init()">
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.containers.Canvas;

        [Bindable]private var displayObjects:ArrayCollection = new ArrayCollection();
        [Bindable]private var size:int = 40;

        private const COLOR:Array = ["0x00ff00", "0xff0000", "0x0000ff", "0xffff00" , "0x00ffff"];

        private function doAddCanvas(colorId:int):Canvas
        {
            var canvas:Canvas = new Canvas();
            canvas.setStyle("backgroundColor", COLOR[colorId]);
            canvas.width = size;
            canvas.height = size;
            return canvas;
        }

        protected function init():void
        {
            for (var i:int = 0; i < 5; i++)
                displayObjects.addItem(doAddCanvas(i));
        }
    ]]>
</fx:Script>

<s:VGroup x="20" y="20">
    <s:List 
        width="100" height="150" 
        dataProvider="{displayObjects}" 
        itemRenderer="com.ListItemRenderer" 
        dragEnabled="true" dropEnabled="true" 
        dragMoveEnabled="true">

        <s:layout>
            <s:VerticalLayout rowHeight="{size}" gap="20" />
        </s:layout>
    </s:List>
</s:VGroup>
</s:Application>

//ItemRenderer

<?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/mx" 
            autoDrawBackground="true">
<fx:Script>
    <![CDATA[
        import mx.containers.Canvas;

        override public function set data(value:Object):void
        {
            if (value != null)
            {
                hgMain.removeAllElements();
                hgMain.addElement(value as Canvas);
            }
            super.data = value;
        }
    ]]>
</fx:Script>

<s:HGroup id="hgMain" width="100%" height="100%"/>

</s:ItemRenderer>

How to render a collection of DisplayObject instances in a spark List?

1 Answers1