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

[Tracy Spratt]

What determines if the button for a particular row is "selected"?

 

Item renderer state must be data driven. Usually you store the necessary
data in a local variable, assigned in the set data() override, then call
invalidateProperties().  Then in commitProperties, you use the local
data to set the state of the UI.

 

Tracy

 

________________________________

From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Jan Huzelius
Sent: Monday, February 25, 2008 9: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>