Wie kann ich zur Laufzeit auf untergeordnete Mitglieder eines tabNavigator zugreifen, der mit ActionScript erstellt wurde?

Question

Ich erstelle ein tabNavigator Objekt in mxml.

TabNavigator enthält navigatorContent-Objekte.

Jeder NavigatorContent enthält mehrere hGroups mit drei Optionsfeldern.

Alle diese Elemente werden im tabNavigator über ActionScript-Code dynamisch aufgefüllt.

Ich muss das zweite Optionsfeld innerhalb einer hgroup auswählen, bin mir aber nicht sicher, wie das geht.

<mx:TabNavigator id="tabNav" height="100" width="500" creationComplete="init();" creationPolicy="all"> 
</mx:TabNavigator> 

private function init():void 
{ 
    for(var i:int=0;i<=int(arrColl_items[arrColl_items.length - 1][1]); 
    i++) 
    { 
     //after reading from xml var navContent:NavigatorContent = new NavigatorContent(); 
     for (var j:int=0;j<arrColl_items.length;j++) 
     { 
      if(arrColl_items[j][1] == i) 
      { 
       var hgrp:HGroup = new HGroup(); 
       hgrp.id = String(arrColl_items[j][0]); 
       var rdBut1:RadioButton=new RadioButton(); 
       hgrp.addElement(rdBut1); 
       rdBut1.addEventListener(MouseEvent.CLICK, setrdBut1); 
       var rdBut2:RadioButton=new RadioButton(); 
       hgrp.addElement(rdBut2); 
       rdBut2.addEventListener(MouseEvent.CLICK, setrdBut2); 
       var rdBut3:RadioButton=new RadioButton(); 
       hgrp.addElement(rdBut3); 
       rdBut3.addEventListener(MouseEvent.CLICK, setrdBut3); 
      } 
     } 
     navContent.addElement(hgrp); 
     tabNav.addChildAt(navContent,i); 
    } 
} 

Kann mir bitte jemand dabei helfen?

Grüße

Aparna

Answer 1

Sie die Datenstruktur keine Beiträge haben, ich hoffe, dass ich es richtig verstanden habe. Die folgende Demo erstellt und füllt einen TabNavigator mit drei NavigatorContent-Instanzen, die eine Reihe von RadioButtons enthalten, die mit der Methode 'getHGroupById' ausgewählt werden können. Ich bin mir sicher, dass es möglich ist, etwas Ähnliches mit Bindable Data und ItemRenderes zu realisieren, wahrscheinlich die bessere Lösung. * Nicholas

Die Anwendung:

<?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" minWidth="955" minHeight="600"> 
    <fx:Declarations> 
     <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 
    <mx:TabNavigator id="tabNav" height="300" width="300" creationComplete="__init();" creationPolicy="all"> 
    </mx:TabNavigator> 
    <fx:Script> 
     <![CDATA[ 
      import mx.collections.ArrayCollection;   
      import spark.components.NavigatorContent; 
      import spark.components.VGroup; 

      /** 
      * The Data Structure, as I understood it 
      * perhaps you have to adapt the code if 
      * this does not match your desired structure 
      * or hierarchy 
      * */ 
      private var arrColl_items:ArrayCollection = new ArrayCollection(
       [ 
        new ArrayCollection(    
         // 1st NavigatorContent 
         [ 
          {id:"0",label:"HGroup_1.1"}, 
          {id:"1",label:"HGroup_1.2"} 
         ] 
        ), 
        new ArrayCollection(      
         // 2nd NavigatorContent 
         [ 
          {id:"2",label:"HGroup_2.1"}, 
          {id:"3",label:"HGroup_2.2"}, 
          {id:"4",label:"HGroup_2.3"} 
         ] 
        ), 
        new ArrayCollection(
         // 3rd NavigatorContent 
         [ 
          {id:"5",label:"HGroup_3.2"}, 
          {id:"6",label:"HGroup_3.3"}, 
          {id:"7",label:"HGroup_3.4"}, 
          {id:"8",label:"HGroup_3.5"}, 
          {id:"9",label:"HGroup_3.5"} 
         ] 
        ) 

       ] 
      ); 

      /** 
      * Invoked on creationComplete 
      * */ 
      private function __init():void 
      { 
       // lets add some navigatorContent 
       for(var i:int=0;i<arrColl_items.length;i++){ 
        // create the navigatorContent 
        var navContent:NavigatorContent = new NavigatorContent();     
        navContent.label = "navContent_"+i; 

        // add a VGroup 
        var vgrp:VGroup = new VGroup(); 
        vgrp.id = "vGroup"; 

        // and now we add custom HGroup Components called MyHGroup 
        for (var j:int=0;j<arrColl_items[i].length;j++) 
        { 
         var hgrp:MyHGroup = new MyHGroup(); 
         hgrp.id = arrColl_items[i][j].id; 
         hgrp.label.text = arrColl_items[i][j].label;       
         vgrp.addElement(hgrp); 
        }     
        navContent.addElement(vgrp); 
        tabNav.addElementAt(navContent,i); 
       } 

       // Accessing the radioButtons is now possible 
       // using the getHGroupById Method 
       getHGroupById("0").rb1.selected = true; 
       getHGroupById("1").rb2.selected = true; 
       getHGroupById("3").rb3.selected = true; 
       getHGroupById("7").rb1.selected = true; 

       // I added a RadioGroup within MyHGroup, lets read the selectedValue 
       trace(getHGroupById("0").rbGroup.selectedValue); 
      } 


      /** 
      * getHGroupById 
      * Method that runs through the Data Structure 
      * and returns a MyHGroup Class with the given id 
      * @param $id:String The id of the MyHGroup Class you want to fetch 
      * @return MyHGroup or null if non existent 
      * 
      * */ 
      public function getHGroupById($id:String):MyHGroup{ 
       // running through the NavigatorContent Instances 
       for(var i:uint=0; i<tabNav.numElements; i++){ 
        var navContent:NavigatorContent = NavigatorContent(tabNav.getElementAt(i));     
        // running through the HGroups within a VGroup 
        for(var j:uint=0; j<VGroup(navContent.getElementAt(0)).numElements; j++){      
         var hgrp:MyHGroup = VGroup(navContent.getElementAt(0)).getElementAt(j) as MyHGroup;      
         if(hgrp.id==$id)return hgrp; 
        } 
       } 
       return null; 
      } 
     ]]> 
    </fx:Script>  
</s:Application> 

Schließlich wird die MyHGroup Komponente in diesem Beispiel verwendet. Erstellen Sie einen neuen MXML-Dateinamen MyHGroup.mxml und fügen Sie den folgenden Code ein.

<?xml version="1.0" encoding="utf-8"?> 
<!-- Create a new MXML File name MyHGroup and add this code --> 
<s:HGroup 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="200" height="20" paddingLeft="10" > 

    <fx:Declarations>    
     <!-- The RadioGroup the Buttons will be linked with --> 
     <s:RadioButtonGroup id="rbGroup"/>   
    </fx:Declarations> 

    <!-- Some fancy label --> 
    <s:Label id="label" height="20" verticalAlign="middle"/> 

    <!-- Your Radio Buttons --> 
    <s:RadioButton id="rb1" group="{rbGroup}"/> 
    <s:RadioButton id="rb2" group="{rbGroup}"/> 
    <s:RadioButton id="rb3" group="{rbGroup}"/> 
</s:HGroup>