[flexcoders] Set selected button on a custom ItemRenderer for a List

[Jan Huzelius]

Hi,

I have a List component that uses a custom renderer.
This renderer contains a button component. The button is skinned using
styles sheets.

I want to be able to show a selected state on the button that is selected
but having no luck.

I'm using Flex 3 and the skin for the button is done in Flash using the new
Flash CS3 component Kit and then imported into FlexBuilder using the new
artWork wizard.

Please see the code below. Thanks for any pointers:

/* skin for the button */

     <mx:Style>

.leftTabItemSkin{
skin: Embed(skinClass="Button_skin");
        }

     </mx:Style>}

/* List */

            <comps:VList top="6"
                id="vList"
                dataProvider="{_sectionCollection.array}"
                itemRenderer="{setRenderer()}"
                backgroundAlpha="0"
                width="100%"
                change="{selectionChanged(event)}"
                useRollOver="false"
                rowHeight="65"
                horizontalScrollPolicy="off"
                verticalScrollPolicy="off"
                borderStyle="none"
                creationComplete="{this.selectedIndex = _selectedIndex}"
                />

/* ItemRenderer, other code ommited */



        public override function get data( ): Object
        {
            return _dataProvider;
        }
        public override function set data( data:Object ) : void
        {
            _dataProvider = Section ( data );
        }

        public function set selected(value:Boolean):void
        {
            _selected = value;
            if (value)
            {
                mainCanvas.styleName = 'tabSelectedSkin';
            }
            else
            {
                mainCanvas.styleName = 'tabUpSkin';
            }
        }

        public function get selected():Boolean
        {
            return _selected;
        }

         ]]>
     </mx:Script>


     <mx:Canvas id="mainCanvas" width="61" height="57" right="0"
         verticalScrollPolicy="off"
         horizontalScrollPolicy="off" mouseChildren="true">

        <mx:Button styleName="leftTabItemSkin" id="itemButton" width="61"
height="57" />

         <mx:Image autoLoad="true" source="{_dataProvider.thumb}"
scaleContent="false" verticalCenter="0" horizontalCenter="-2.5" />

     </mx:Canvas>