Flex 4: Skins ArrayCollection as dataprovider to an ItemRenderer of a List

Objective: I would like to pass Skins to an itemRenderer (which is a Button) of a List, and be able to skin every but开发者_StackOverflowton in that List.

This is what I have:

List:

<s:List itemRenderer="renderers.ItemRenderer" dataProvider="{collectionWorkspace}" />

ArrayCollection:

<s:ArrayCollection id="collectionWorkspace">
    <comp:Layout1 />
    <comp:Layout2 />
    <comp:Layout3 />
    <comp:Layout4 />
    <comp:Layout5 />
</s:ArrayCollection>

The Layouts are Skin classes with HostComponent Button.

ItemRenderer:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:mx="library://ns.adobe.com/flex/halo"
                xmlns:s="library://ns.adobe.com/flex/spark">

    <s:states>
        <s:State name="normal" />
    </s:states>

    <s:Button skinClass="{data}"/>

</s:ItemRenderer>

I get an error (fixed for clarification): Error: Skin for Application....Button1 cannot be found.

You are handing the skinClass property an instance of the skin class, not the actual class (which the button needs to create its own instance of the skin class).

If you can, the best thing to do would be to make collectionWorkspace be an array of Class objects, not of instances.

<s:ArrayCollection id="collectionWorkspace">
    <fx:Class>yourPkg.Layout1</fx:Class>
    <fx:Class>yourPkg.Layout2</fx:Class>
    <fx:Class>yourPkg.Layout3</fx:Class>
    <fx:Class>yourPkg.Layout4</fx:Class>
    <fx:Class>yourPkg.Layout5</fx:Class>
</s:ArrayCollection>

If you can't do that, you should be able to pull out the class of the instance and pass it to the skinClass.

<s:Button skinClass="{Object(data).constructor}"/>

EDIT:

The binding by default won't work because data starts off as null before it gets initialized with the class. If you give it null, you will get the exception. To fix it, you will need to return the default for the time between null and value:

<s:Button skinClass="{data != null ? data as Class : spark.skins.spark.ButtonSkin}"/>

I tried doing this with an ArrayCollection using some button skins. It worked.