F3 v. F4: Using ViewStack, TabNavigator and Accordion

You have probably used mx:ViewStack, mx:TabNavigator and mx:Accordion somewhere in your Flex development efforts over the last 5+ years and had code that looks like this:

<mx:TabNavigator width="400" height="200" horizontalCenter="0" y="15">
    <mx:VBox label="Tab 1">
        <mx:Label text="This is tab 1"/>
    </mx:VBox>
    <mx:VBox label="Tab 2">
        <mx:Label text="This is tab 2"/>
    </mx:VBox>
    <mx:VBox label="Tab 3">
        <mx:Label text="This is tab 3"/>
    </mx:VBox>
</mx:TabNavigator>
   
<mx:Accordion width="400" height="200" horizontalCenter="0" y="225">
    <mx:VBox label="Accordion 1">
        <mx:Label text="This is Accordion 1"/>
    </mx:VBox>
    <mx:VBox label="Accordion 2">
        <mx:Label text="This is Accordion 2"/>
    </mx:VBox>
    <mx:VBox label="Accordion 3">
        <mx:Label text="This is Accordion 3"/>
    </mx:VBox>
</mx:Accordion>

Perhaps you would like to continue to use TabNavigator and Accordion within your Flex 4 efforts but you would like the children to be Spark components. Since there is no equivalent to these components yet within Spark, you will need still need to use the mx namespace within your Flex 4 application. If you have tried something like this:

<mx:TabNavigator width="400" height="200" horizontalCenter="0" y="15">
    <s:VGroup>
        <s:Label text="This is tab 1"/>
    </s:VGroup>
    <s:VGroup>
        <s:Label text="This is tab 2"/>
    </s:VGroup>
    <s:VGroup>
        <s:Label text="This is tab 3"/>
    </s:VGroup>
</mx:TabNavigator>
   
<mx:Accordion width="400" height="200" horizontalCenter="0" y="225">
    <s:VGroup>
        <s:Label text="This is Accordion 1"/>
    </s:VGroup>
    <s:VGroup>
        <s:Label text="This is Accordion 2"/>
    </s:VGroup>
    <s:VGroup>
        <s:Label text="This is Accordion 3"/>
    </s:VGroup>
</mx:Accordion>

You will have received an error that said “The children of Halo navigators must implement INavigatorContent.“. So, what does this mean? Are you screwed and forced to start over and redesign your UI? No, the fix is easy, just wrap your Spark components in a Spark NavigatorContent component.

<mx:TabNavigator width="400" height="200" horizontalCenter="0" y="15">
    <s:NavigatorContent label="Tab 1">
        <s:VGroup>
            <s:Label text="This is tab 1"/>
        </s:VGroup>
    </s:NavigatorContent>
    <s:NavigatorContent label="Tab 2">
        <s:VGroup>
            <s:Label text="This is tab 2"/>
        </s:VGroup>
    </s:NavigatorContent>
    <s:NavigatorContent label="Tab 3">
        <s:VGroup>
            <s:Label text="This is tab 3"/>
        </s:VGroup>
    </s:NavigatorContent>
</mx:TabNavigator>
   
<mx:Accordion width="400" height="200" horizontalCenter="0" y="225">
    <s:NavigatorContent label="Accordion 1">
        <s:VGroup>
            <s:Label text="This is Accordion 1"/>
        </s:VGroup>
    </s:NavigatorContent>
    <s:NavigatorContent label="Accordion 2">
        <s:VGroup>
            <s:Label text="This is Accordion 2"/>
        </s:VGroup>
    </s:NavigatorContent>
    <s:NavigatorContent label="Accordion 3">
        <s:VGroup>
            <s:Label text="This is Accordion 3"/>
        </s:VGroup>
    </s:NavigatorContent>
</mx:Accordion>