Width of a group in mx:ViewStack - actionscript-3

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>

Answer 2

The ViewStack is a Multiple-view container. Even though having the creationComplete set to all which is by the way for Single-view containers only, Flex instantiates only the controls that are initially visible for the ViewStack. To achieve your goal, try using other containers aside from ViewStack.
More details can be found here:
http://livedocs.adobe.com/flex/3/html/help.html?content=layoutperformance_05.html

Answer 3

What is the logic behind this behavior?
Because there is no need to render a TestGroup element. If you set creationPlicy for all a flex container will create internal element, but it doesn't mean that the container will set size for the element.
How can I fix it so that my second group has a real width, and I can get it at the creation complete?
Use event updateComplete. Flex dispatches updateComplete events whenever the layout, position, size, or other visual characteristic of the component changes and the component is updated for display. So you will get it when second TestGroup will be selected first time.