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

[Alex Harui]

Renderers are recycled so they must be completely data-driven.  Once you
set the selected property and change the styleName, the List might
repaint and use a different renderer for that line item.  Usually, all
visual aspects of a renderer are driven from the data object and things
like owner.isSelected  and owner.isHighlighted

 

________________________________

From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Jan Huzelius
Sent: Monday, February 25, 2008 6:22 AM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Set selected button on a custom ItemRenderer for a
List

 

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>