How to populate a mx:ViewStack dynamically with a dataProvider for a tabbed navigation?

I'm very sleepy right now, so this is just an example of what I want (obviously this code is wrong):

<?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">

    <fx:Declarations>

        <s:ArrayCollection id="dp"> 
            <fx:Object label="Just a label" text="Bla bla bla..."/>
            <fx:Object label="Just a label" text="Bla bla bla..."/>
            <fx:Object label="Just a label" text="Bla bla bla..."/>
        </s:ArrayCollection>

    </fx:Declarations>

    <s:ButtonBar dataProvider="{tabs}" />

    <mx:ViewStack id="tabs" resizeToContent="true">

        <s:DataGroup dataProvider="{dp}">

            <s:NavigatorContent label="{data.label}">
                <s:Label text="{data.text}"/>
          开发者_Python百科  </s:NavigatorContent>

        </s:DataGroup>

    </mx:ViewStack>

</s:Application>

How can I do something like that? (the NavigationContent will be the itemRenderer and the ButtonBar is very important).

---

You can't put a data group inside of a ViewStack directly... the items need to implement INavigatiorContent.

So, this is about the best I can come up with. It certainly doesn't handle updates to the ArrayCollection or anything more advanced than this, but it is a start.

<s:VGroup>
    <s:ButtonBar dataProvider="{tabs}" />

    <mx:ViewStack id="tabs" resizeToContent="true"  >
        <mx:addedToStage>
            <![CDATA[
                for(var i:int = 0; i < dp.length; i++) {
                    var label:Label = new Label();
                    label.text = dp.getItemAt(i).text;

                    var context:NavigatorContent = new NavigatorContent();
                    context.label = dp.getItemAt(i).label;
                    context.addElement(label);

                    tabs.addChild(context);
                }
            ]]>
        </mx:addedToStage>
    </mx:ViewStack>
</s:VGroup>

If I were to really make this happen, I would create a new class that derives from ViewStack that includes a dataProvider property. Internally, I would listen to changes on the collection so that it would add/remove items. This class would also include an itemRenderer property so that you can define what the tabs look like.

The problem with this is that with tabs, usually, you have specific views that go along with data. You would probably want to include an itemRendererFunction to do the mapping for you.

It would get kind of messy and leaky... but you could make it happen.