My item renderer is not finding property "data."

Question

I'm trying to create a custom button renderer for my list and it keeps saying unidentified property "data." Here is my code.

Renderer:

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

Object calling the renderer:

<s:List x="80" y="88" width="142" height="384" dataProvider="{navigation}" itemRenderer="com.renderers.NavigationRenderer" borderVisible="false"/>

And the array collection holding the data for the list:

[Bindable]
private var navigation:ArrayCollection = new ArrayCollection([
    {label:"Home",state:"Home"},{label:"Tools",state:"Tools"}
]);

What could I be doing wrong?

Answer 1

The spark button does not implement the IDataRenderer interface.

You could easily place your button inside an ItemRenderer class to get access to that interface, or you could create a new item renderer class that extends Button and implements IDataRenderer.

Answer 2

Does the s:Button have a property named data?

Have your renderer extend the ItemRenderer class. More information here.

Your renderer should be something like this:

<?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" >
<s:Button label="{data.label}">
</s:ItemRenderer>

Answer 3

Spark components don't have the data property by default. To use a component as an inderer it should implement the IItemRenderer interface, which the spark Button doesn't.