Question

I have a window in which I want to add/remove component and resize the window accordingly based on states. but for some reason it’s ignoring the first resize.
here’s a sample code

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       minWidth="450"
                       minHeight="355"
                       currentState="{stateBox.selected ? 'one' : 'two'}"
                       currentStateChange="handleStateChange(event.oldState, event.newState)">

    <fx:Script>
        <![CDATA[
            private function handleStateChange(oldState:String, newState:String):void 
            {
                if (oldState == "two") {
                    width   -= 341;
                    minWidth    = 450;
                } else {
                    width   += 341;
                    minWidth    = 791;
                }
            }
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="one" />
        <s:State name="two" />
    </s:states>
    <s:Rect id="rect1" top="0" left="0" right="0" right.two="341"  bottom="0" >
        <s:fill>
            <s:SolidColor color="0xDDDDDD" />
        </s:fill>
    </s:Rect>

    <s:Rect id="rect2" top="0" bottom="0" width="341" right="0" includeIn="two" >
        <s:fill>
            <s:SolidColor color="0x000000" />
        </s:fill>
    </s:Rect>

    <s:CheckBox id="stateBox" label="change state" />
</s:WindowedApplication>

Idea is that when the state change to ‘two’, I want to add rect2 to display and increase the minWidth and size of the window. And when the state change to ‘one’, i want to remove rect2 from display and resize the window. This seems to work except the window doesn’t shrink on the very first time the state change from “two” to “one” but works as expected afterwards. I’m not sure why it’s ignoring first time I reduce the width. I also tried changing nativeWindow.bounds directly but that didn’t work either.

Originally I just tried setting minWidth based on state (minWidth.one=”450 minWidth.two=”791″) but that caused window to grow on left and shrink on right which caused the window to move left whenever the state changed. so then I just moved the window to right whenever state changed but that caused some flicker that I didn’t want.

does anyone have any idea why this might be happening? or a good solution for my problem?

Answer 1

Try flipping these lines around from:

                width   -= 341;
                minWidth    = 450;

to:

                minWidth    = 450;
                width   -= 341;

I think the problem is with the way that condition is setup in general…. I’m going to copy your code and modify it how I would go about doing this and repost as an edit, but you could try the above suggestion (I believe you may be setting the width lower than the minimum width then reducing the minWidth so the setting of the width in the first place would have been set to a width that isn’t valid according to the current minWidth, think you may only see this the first time around due to timing with validation.

EDIT(ed twice, add locking the window size by setting min and max heights equal to the set height):

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       minHeight="355"
                       maxHeight="355"
                       minWidth="450"
                       width.two="791"
                       width.one="450"
                       minWidth.one="450"
                       minWidth.two="791"
                       maxWidth.one="450"
                       maxWidth.two="791">

    <fx:Script>
        <![CDATA[
            protected function stateBox_changeHandler(event:Event):void
            {
                // TODO Auto-generated method stub
                currentState=stateBox.selected ? 'two' : 'one';
            }
        ]]>
    </fx:Script>

    <s:states>
        <s:State name="one"/>
        <s:State name="two"/>
    </s:states>

    <s:HGroup width="100%"
              height="100%"
              gap="0">
        <s:Rect width="450"
                height="100%">
            <s:fill>
                <s:SolidColor color="0xff0000"/>
            </s:fill>
        </s:Rect>

        <s:Rect width="341"
                height="100%"
                includeIn="two">
            <s:fill>
                <s:SolidColor color="0x000000"/>
            </s:fill>
        </s:Rect>
    </s:HGroup>

    <s:CheckBox id="stateBox"
                label="change state"
                change="stateBox_changeHandler(event)"/>
</s:WindowedApplication>

Does this achieve the desired behavior ^ (sorry I know I changed a lot of code but this is just how I would approach it, maybe this won’t work because of other explicit sizing you need to set but seems to achieve the goal to me)