Flex - Binding ViewStack selectedChild Property Using a String Value

Question

The attached code example (pseudo code) compiles, but throws this Run-Time Error:

TypeError: Error #2007: Parameter child must be non-null.
    at flash.display::DisplayObjectContainer/getChildIndex()
    at mx.core::Container/getChildIndex()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:2409]
    at mx.containers::ViewStack/set selectedChild()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\containers\ViewStack.as:557]


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            [Bindable]
            private var targetViewName:String = "content";
        ]]>
    </mx:Script>

    <mx:ViewStack id="viewStack" width="100%" height="100%" 
        selectedChild="{Container(viewStack.getChildByName(targetViewName))}">
        <mx:Panel id="welcome" width="100%" height="100%" />

        <mx:Panel id="content" width="100%" height="100%" />
    </mx:ViewStack>
</mx:Application>

Is there some way I can get this to work without having to call a function to set the selectedChild?

Thanks.

Answer 1

tried this:

selectedChild="{this[targetViewName]}">

/Niels

Answer 2

Sorry, /Niels, that doesn't work. Try compiling this code, and you'll see the selectedChild does not change (also you get a compilation warning):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            [Bindable]
            private var targetViewName:String = "content";
        ]]>
    </mx:Script>

    <mx:TabNavigator id="viewStack" width="100%" height="100%" creationPolicy="all" 
        selectedChild="{this[targetViewName]}">
        <mx:Panel id="welcome" width="100%" height="100%" label="welcome" />

        <mx:Panel id="content" width="100%" height="100%" label="content" />
    </mx:TabNavigator>
</mx:Application>

Answer 3

My guess is that this will not work because the binding will be evaluated on initialization when at that time, the viewstack's children have not yet been created. Even with setting the creationPolicy to "all" the problem still occurs.

You will have to set up a binding to the targetViewName when the viewstack is created (and perhaps also its children).

Answer 4

You want to set the selectedChild property once the target is in the display list. Try this:

<mx:TabNavigator id="viewStack" width="100%" height="100%" creationPolicy="all" >
    <mx:Panel id="welcome" width="100%" height="100%" label="welcome" />

    <mx:Panel id="content" width="100%" height="100%" label="content" addedToStage="viewStack.selectedChild = this" />
</mx:TabNavigator>

If you really want to bind selectedChild, then create a bindable function that returns the panel you want selected, but only if it's a child of viewStack.

Answer 5

when selectedChild is fired the viewStack doesn't have any children added so it throws a NullPointerException:

The following will work:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            import mx.core.Container;
            [Bindable]
            private var targetViewName:String = "content";

            private function onClick() : void
            {
                viewStack.selectedChild = Container(viewStack.getChildByName(targetViewName)) ;
            }
        ]]>
    </mx:Script>

    <mx:ViewStack id="viewStack" width="100%" height="100%" >
        <mx:Panel id="welcome" width="100%" height="100%"  title="welcome"/>

        <mx:Panel id="content" width="100%" height="100%" title="content" />
    </mx:ViewStack>

    <mx:Button click="onClick()" label="click" />

</mx:Application>

Answer 6

Sebastien, could you please change your example to something like this:

root stack{stack as child[inner child(button1, button2)], common child 1, common child 2}

in this situation how to connect inner children and common children? I mean if a click in a button inside the inner child (button2) was given how to change the view stack to display the view common child 2 if the button2 within inner child doesn't know about the view common child 2?

Answer 7

<mx:Script>
 <![CDATA[
  import models.ModelLocator;

  [Bindable]
  private var model:ModelLocator = ModelLocator.getInstance();
 ]]>
</mx:Script>

<mx:ViewStack id="videoViewStack" width="100%" height="100%" selectedChild="{this[model._videoViewStack]}" >
 <viewsVideos:AllVideos id="AllVideos" label="Videos"/>
 <viewsVideos:MainVideo id="MainVideo" label="Video"/>
</mx:ViewStack>

this binds a string var I do get a warning but it works