Search code examples
apache-flexflex4flex-spark

How to clear the explicit width and height of a Group


I have a group that sizes to the contents it contains but to perform a transition using Tweener I have to set the width and height properties. After the animation is done how would I clear the explicit width and height properties so that the Group goes back to sizing based on it's contents?

Before:

<s:Group ><content.../></s:Group>

Code:

width = 250;
height = 250;
Tweener.addTween(this, {width:500, height:500, time:0.25, onComplete:openAnimationComplete});

After the tween the Group is effectively set to 500x500 as if it were this:

<s:Group width="500" height="500" ><content /></s:Group>

I want it to return to this:

<s:Group ><content /></s:Group>

UPDATE
Test code using solution from Flextras:

<fx:Script>
    <![CDATA[
        protected function button1_clickHandler(event:MouseEvent):void
        {
            var w:Object = myGroup.width;
            var h:Object = myGroup.height;

            if (myGroup.width!=300) {
                myGroup.width = 300;
                myGroup.height = 300;
            }
            else {
                myGroup.width = NaN;
                myGroup.height = NaN;

                w = myGroup.width; // NaN
                h = myGroup.height; // NaN

                //myGroup.validateNow()
                if (myGroup.parent is IInvalidating) {
                    IInvalidating(myGroup.parent).validateNow();
                }

                w = myGroup.width; // 600
                h = myGroup.height; // 100
            }


        }
    ]]>
</fx:Script>

<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<s:Group id="myGroup" minHeight="0" minWidth="0" clipAndEnableScrolling="true">     
    <s:Button width="600" height="100" label="here is a button" click="button1_clickHandler(event)"/>
</s:Group>

Solution

  • Set the height and width to NaN; which would effectively tell the Flex Framework "I have no idea what this value is" and will then execute the measure() event during the next time the component renders itself; causing it to update the measuredHeight and measuredWidth properties; which will in turn be used by the parent container to size the group.