Remove child content from ViewStack in Flex 4

Question

In my example below, when I click "Add Content", new stack content is loaded into the ViewStack as expected. But when I then click "Close Content", I'm expecting it to close the newly created content inside the ViewStack and switch to the "defaultContent" content.

Can anyone tell me where I'm going wrong please? Thanks in advance.

// TestProject.mxml (application)
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <fx:Script>
        <![CDATA[
            import com.NewContent;

            private function addContent():void
            {
                var content:NewContent = new NewContent();
                var navContent:NavigatorContent = new NavigatorContent();
                navContent.id = 'newContent';
                navContent.label = 'newContent';
                navContent.width = Number('100%');
                navContent.height = Number('100%');
                navContent.addElement(content);

                viewStack.addElement(navContent);
                viewStack.selectedChild = navContent;
            }
        ]]>
    </fx:Script>
    <mx:ViewStack id="viewStack" width="100%" height="100%">
        <s:NavigatorContent id="defaultContent"
                            label="defaultContent">
            <s:Button click="addContent()" label="Add Content"/>
        </s:NavigatorContent>
    </mx:ViewStack>
</s:WindowedApplication>

// NewContent.mxml (component)
<?xml version="1.0" encoding="utf-8"?>
<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"
         width="100%" height="100%">
    <fx:Script>
        <![CDATA[
            import mx.core.FlexGlobals;
            private function closeContent():void
            {
                FlexGlobals.topLevelApplication.viewStack.removeChild('newContent');
                FlexGlobals.topLevelApplication.viewStack.selectedChild = 'defaultContent';
            }
        ]]>
    </fx:Script>
    <s:Button click="closeContent()" label="Close Content"/>
</s:Group>

Answer 1

selectedChild expects the child itself, not the label.

Instead - try this:

public function removeContent():void
{
     Viewstack(this.parent).selectedIndex = 0;
     this.parent.removeChild(this);
}

Note - it's generally reccomended to avoid using FlexGlobals.topLevelApplication, as it leads to a very tightly coupled & fragile application.

Answer 2

Sorted it...

// TestProject.mxml (application)
private function addContent():void
{
    var content:NewContent = new NewContent();
    content.addEventListener("removeMe",onRemove,false,0,true);
    var navContent:NavigatorContent = new NavigatorContent();
    navContent.id = 'newContent';
    navContent.label = 'newContent';
    navContent.width = Number('100%');
    navContent.height = Number('100%');
    navContent.addElement(content);

    viewStack.addElement(navContent);
    viewStack.selectedChild = navContent;

private function onRemove(event:Event):void
{
    var content:NewContent = event.currentTarget as NewContent;
    content.removeEventListener("removeMe",onRemove,false);
    viewStack.removeChild(content.parent.parent.parent);
}

// NewContent.mxml (component)
public function removeContent():void
{
    dispatchEvent(new Event("removeMe"));
}