Flex viewstack children includeIn works funny

Question

I have a viewstack with childrens which I want to show/hide depending on the state the application is

    <?xml version="1.0" encoding="utf-8"?>
<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:eworx="com.eworx.*"
               xmlns:view="com.eworx.view.*" 
               xmlns:components="com.eworx.view.components.*"
               skinClass="com.eworx.view.skins.MainAppSkin" 
               xmlns:layouts="com.eworx.view.layouts.*"
               currentState="login"
               initialize="init(event)"
               creationComplete="complete(event)" 
               width="100%" 
               height="100%">


    <fx:Style source="assets/css/screen.css" />
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.core.FlexGlobals;
            import mx.events.FlexEvent;

            import nl.demonsters.debugger.MonsterDebugger;

            private var debugger:MonsterDebugger;

            [Bindable]
            public var apiUrl:String;

            [Bindable]
            public var customerType:String;



            protected function init(event:FlexEvent):void
            {
                debugger = new MonsterDebugger(this);
            }

            protected function complete(event:FlexEvent):void
            {
                var activated:Boolean = FlexGlobals.topLevelApplication.parameters.activated;
                var passwordReset:Boolean = FlexGlobals.topLevelApplication.parameters.passwordReset;
                var message:String = FlexGlobals.topLevelApplication.parameters.message;

                apiUrl = FlexGlobals.topLevelApplication.parameters.apiUrl;

                if(activated)
                {
                    Alert.show(message,"Notice");
                }

                if(passwordReset)
                {
                    Alert.show(message,"Notice");
                }

                systemManager.addEventListener(MouseEvent.MOUSE_WHEEL,onMouseWheel,true);

            }

            private function onMouseWheel(e:MouseEvent):void
            {
                e.delta *= 5;
            }

        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <eworx:Seven7Context contextView="{this}" />
        <s:Fade id="fadeIn" alphaFrom="0" alphaTo="1" duration="300" />
        <s:Fade id="fadeOut" alphaFrom="1" alphaTo="0" duration="300" />
        <s:Rotate3D id="r3d" angleYFrom="0" angleYTo="360"  duration="300" />
    </fx:Declarations>

    <s:states>
        <s:State name="login" />
        <s:State name="wholesale"  />
        <s:State name="retail"  />
    </s:states>

    <view:LoginForm id="loginForm" includeIn="login" horizontalCenter="0" verticalCenter="0" />

    <s:Group excludeFrom="login" width="960" horizontalCenter="0">

        <s:BitmapImage width="100%" height="42" x="13" y="80" source="@Embed('assets/garnish/bar.png')" />
        <mx:Image source="assets/garnish/logo.png" top="23" />

        <s:HGroup verticalAlign="middle" x="198" y="47">
            <s:TabBar  skinClass="MainMenuTabBarSkin" dataProvider="{vs}"  buttonMode="true"/>
            <mx:LinkButton id="logout" label="Logout" click="{currentState='login'}" />
        </s:HGroup>

        <s:HGroup top="0" right="0" gap="1" verticalAlign="top">
            <components:OfferList />
            <components:MarginBuildersTrack />
            <components:CartTrack top="0" />
        </s:HGroup>

        <mx:ViewStack 
            id="vs" 
            top="120"
            horizontalCenter="0" 
            width="960" 
            height="100%" 
            resizeToContent="true" >
            <view:HomePage showEffect="{fadeIn}" hideEffect="{fadeOut}" label="Home" />
            <view:ShowroomPage showEffect="{fadeIn}" hideEffect="{fadeOut}" label="Showroom" />
            <view:CataloguePage showEffect="{fadeIn}" hideEffect="{fadeOut}" label="Catalogue" />
            <!--<view:IncentivesPage showEffect="{fadeIn}" hideEffect="{fadeOut}" label="Incentives" />-->
            <view:RetailCustomerProfilePage includeIn="retail" showEffect="{fadeIn}" hideEffect="{fadeOut}" label="My Profile" />
            <view:WholesaleCustomerProfilePage includeIn="wholesale" showEffect="{fadeIn}" hideEffect="{fadeOut}" label="My Profile" />
            <view:ClientsPage excludeFrom="retail,login" showEffect="{fadeIn}" hideEffect="{fadeOut}" label="My Clients" />
            <view:CartPage showEffect="{fadeIn}" hideEffect="{fadeOut}" label="My Cart" />
            <view:OrdersPage showEffect="{fadeIn}" hideEffect="{fadeOut}" label="My Orders" />
        </mx:ViewStack>
    </s:Group>

</s:Application>

AS you can see I inlude the retail customer view in the retail state and the wholesale customer view in the wholesale state. The problem is that when I run my app they don't appear on neither state.

Any ideas?

Answer 1

This is an odd approach to me. The whole purpose of the ViewStack is to only show one item at once. This is a very odd approach.

I see you have a tabbar whose dataProvider is the ViewStack. However, your ViewStack is not created as a bindable property on the component, and you never seem to set up an initial state. So, I theorize that this is happening:

1. App Loads in default state, which is the empty string
2. ViewSTack and/or TabBar are initialized without those children
3. App state changes for some reason
4. TabBar does not update

CreationPolicy may come into play too, but I'm not sure. You'll have to step through the code to figure out what's going on. I would strongly recommend you consider an alternate approach to this. Possibly creating the tabbar navigator dataProvider manually based on user security settings or the current state.