How can I access child members of a tabNavigator created via ActionScript at run time?

I am creating a tabNavigator object in mxml.开发者_StackOverflow中文版

TabNavigator contains navigatorContent objects.

Each NavigatorContent further contains multiple hGroups with three radio buttons in it.

All these elements are populated in the tabNavigator via actionScript code dynamically.

I need to select the second radio button within an hgroup, but am not sure how to do this.

<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);
    }
}

Can anyone please help out on this?

Regards

Aparna

you did not post the data structure, i hope i got it right. The following demo creates and populates a TabNavigator with three NavigatorContent instances containing series of RadioButtons that can be selected using the method 'getHGroupById'. I am sure it is possible to realize something like this using Bindable Data and ItemRenderes, probably the better solution. *Nicholas

The Application:

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

Finally the MyHGroup Component used in this example. Create a new MXML File name MyHGroup.mxml and paste the following code.

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