Question

I have a simple application:

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

    <mx:ViewStack width="100%" creationPolicy="all">
        <s:NavigatorContent width="100%">
            <local:TestGroup width="100%"/>
        </s:NavigatorContent>
        <s:NavigatorContent width="100%">
            <local:TestGroup width="100%"/>
        </s:NavigatorContent>
    </mx:ViewStack>

</s:Application>

My TestGroup is a bare Spark group. It has creationComplete method, where the width of the group is traced:

<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="group1_creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            protected function group1_creationCompleteHandler(event:FlexEvent):void
            {
                trace("internal group width: " + this.width)
            }

        ]]>
    </fx:Script>
</s:Group>

When I run the application, the first TestGroup has width of 1600 (which is about right), but the second one regardless of creationPolicy="all" and width="100%" is 0 (zero).

It turs out that ms:ViewStack doesn’t set width for components other than the selected one.

What is the logic behind this behavior?
How can I fix it so that my second group has a real width, and I can get it at the creation complete?

Answer 1

You can listen to change event, that will be fired each time the selected group is changing.

Only the current active group will give you her true width, so you can do someThing like this

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

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            protected function onChange(event:Event):void
            {
                if(myViewStack.selectedChild){
                    myViewStack.selectedChild.initMyGroup();  
                }
            }

        ]]>
    </fx:Script>

    <mx:ViewStack id="myViewStack" width="100%" creationPolicy="all" change="onChange()">
        <s:NavigatorContent width="100%">
            <local:TestGroup width="100%"/>
        </s:NavigatorContent>
        <s:NavigatorContent width="100%">
            <local:TestGroup width="100%"/>
        </s:NavigatorContent>
    </mx:ViewStack>

</s:Application>




<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            public function initMyGroup():void
            {
                trace("internal group width: " + this.width)
            }

        ]]>
    </fx:Script>
</s:Group>