Flex 4 ToggleButton selected property not working

Question

I am trying to set a FlexToggle buttons selected property by state value and it does not work. It only works when I click on the button.
<buttons:MaxRestoreToggleButton id="resizeWindowButton" selected="false" selected.maximized="true"/>
any ideas?

Answer 1

Well I am creating a ToggleButtonSkin and yes, I am calling the invalidateSkinState(); but it still doesnt seem to be working.
<?xml version="1.0" encoding="utf-8"?>
<s:ToggleButton xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx"
  toolTip="Maximize"
  width="20" height="20"
  skinClass="tat.skins.buttons.MaxRestoreToggleButtonSkin" change="{trace('hi');}"
  >
<s:states>
<s:State name="up" enterState="{invalidateSkinState();}"/>
<s:State name="over" stateGroups="overStates" enterState="{invalidateSkinState();}"/>
<s:State name="down" stateGroups="downStates" enterState="{invalidateSkinState();}"/>
<s:State name="disabled" stateGroups="disabledStates"/>
<s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" enterState="{invalidateSkinState();}"/>
<s:State name="overAndSelected" stateGroups="overStates, selectedStates" enterState="{invalidateSkinState();}"/>
<s:State name="downAndSelected" stateGroups="downStates, selectedStates" enterState="{invalidateSkinState();}"/>
<s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
</s:states>
<!-- Skin States -->
<fx:Metadata>
[SkinState('up')]
[SkinState('over')]
[SkinState('down')]
[SkinState("disabled")]
[SkinState('upAndSelected')]
[SkinState('overAndSelected')]
[SkinState('downAndSelected')]
[SkinState("disabledAndSelected")]
</fx:Metadata>
<fx:Declarations>
</fx:Declarations>
<fx:Script>
<![CDATA[
]]>
</fx:Script>
</s:ToggleButton>
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="21" minHeight="21" alpha.disabledStates="0.5" >
    <!-- host component -->
    <fx:Metadata>
    <![CDATA[
        [HostComponent("tat.components.buttons.MaxRestoreToggleButton")]
    ]]>
    </fx:Metadata>
    <fx:Script fb:purpose="styling">
[Bindable]public static var glowColor:uint = 0xFFFFFF;
[Bindable]public static var backgroundColor:uint = 0xFFFFFF;
/* Define the skin elements that should not be colorized.
           For toggle button, the graphics are colorized but the label is not. */
        static private const exclusions:Array = ["labelDisplay"];
         * @private
        override public function get colorizeExclusions():Array {return exclusions;}
         * @private
        override protected function initializationComplete():void
            useChromeColor = true;
            super.initializationComplete();
         * @private
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
            super.updateDisplayList(unscaledWidth, unscaledHeight);
        private var cornerRadius:Number = 2;
    </fx:Script>
    <!-- states -->
    <s:states>
        <s:State name="up" enterState="{this.hostComponent.toolTip='Maximize' }"/>
        <s:State name="over" stateGroups="overStates" enterState="{this.hostComponent.toolTip='Maximize'}"/>
        <s:State name="down" stateGroups="downStates" enterState="{this.hostComponent.toolTip='Maximize'}"/>
        <s:State name="disabled" stateGroups="disabledStates"/>
        <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" enterState="{this.hostComponent.toolTip='Restore'}" />
        <s:State name="overAndSelected" stateGroups="overStates, selectedStates" enterState="{this.hostComponent.toolTip='Restore'}"/>
        <s:State name="downAndSelected" stateGroups="downStates, selectedStates" enterState="{this.hostComponent.toolTip='Restore'}"/>
        <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
    </s:states>
    <!-- layer 1: shadow -->
<s:Rect id="bg" left="0" right="0" top="0" bottom="0" radiusX="2">
<s:fill>
<s:SolidColor color="{backgroundColor}" alpha=".1"/>
</s:fill>
</s:Rect>
<s:Rect id="glow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
<s:fill>
<s:SolidColor color="{glowColor}" alpha.up="0" alpha.selectedUpStates="0" alpha.overStates=".5" alpha.downStates=".2" alpha.disabled="0"/>
</s:fill>
</s:Rect>
<s:BitmapImage source.selectedStates="@Embed('../../../assets/images/windows_16.png')" source="@Embed('../../../assets/images/windows_window_16.png')"
   horizontalCenter="0" verticalCenter="0"/>
</s:SparkSkin>