Comment remplir un mx: ViewStack dynamiquement avec un dataProvider pour une navigation par onglets?

Question

Je suis juste très somnolent maintenant, il en est ainsi juste un exemple de ce que je veux (évidemment ce code est erroné):

<?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}"/> 
      </s:NavigatorContent> 

     </s:DataGroup> 

    </mx:ViewStack> 

</s:Application> 

Comment puis-je faire quelque chose comme ça? (le contenu de navigation sera le itemRenderer et le ButtonBar est très important).

Answer 1

Vous ne pouvez pas mettre un groupe de données à l'intérieur d'un ViewStack directement ... les éléments doivent implémenter INavigatiorContent.

Donc, c'est à peu près le meilleur que je peux trouver. Il ne gère certainement pas les mises à jour au ArrayCollection ou quelque chose de plus avancé que cela, mais c'est un début.

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

Si je devais vraiment faire cela arrive, je crée une nouvelle classe qui dérive de ViewStack qui comprend une propriété dataProvider. En interne, j'écouterais les modifications apportées à la collection pour ajouter/supprimer des éléments. Cette classe inclut également une propriété itemRenderer afin que vous puissiez définir à quoi ressemblent les onglets. Le problème avec ceci est qu'avec les onglets, généralement, vous avez des vues spécifiques qui vont avec les données. Vous voudrez probablement inclure un itemRendererFunction pour faire le mappage pour vous.

Il deviendrait un peu salissant et qui fuit ... mais vous pourriez y arriver.