4 Replies Latest reply on Apr 11, 2010 10:07 PM by Shongrunden

    Flex 4 ToggleButton selected property not working

    CannotCompute Level 1

      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?

        • 1. Re: Flex 4 ToggleButton selected property not working
          TeotiGraphix Level 3

          Hi,

           

          Are you creating a SkinnableComponent that returns the correct state?

           

          When the state changes in the component are you calling invalidateSkin()?

           

          Mike

          • 2. Re: Flex 4 ToggleButton selected property not working
            CannotCompute Level 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>

            • 3. Re: Flex 4 ToggleButton selected property not working
              CannotCompute Level 1

              I guess the weird thing is that I can't even get the 'change' event to fire unless I click on it.

              • 4. Re: Flex 4 ToggleButton selected property not working
                Shongrunden Adobe Employee

                The change event will only be fired when a user interaction like a click changes the value.  valueCommit will be fired after every change in value whether it was programmatic or via user interaction.

                 

                For example:

                 

                <s:Application
                    xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark">

                 

                    <s:VGroup>
                        <s:Button label="programmatically change the value of tb" click="tb.selected = !tb.selected" />
                        <s:ToggleButton id="tb" change="trace('change')" valueCommit="trace('valueCommit')" />
                    </s:VGroup>
                </s:Application>