如何在运行时访问通过 ActionScript 创建的 tabNavigator 的子成员？

Question

我正在 mxml 中创建 tabNavigator 对象。

TabNavigator 包含 navigatorContent 对象。

每个 NavigatorContent 还包含多个 hGroup，其中包含三个单选按钮。

所有这些元素都通过actionScript 代码动态填充在tabNavigator 中。

我需要选择 hgroup 中的第二个单选按钮，但我不确定如何执行此操作。

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

有人可以帮忙吗？

问候

阿帕纳

Answer 1

您没有发布数据结构，我希望我是对的。以下演示使用三个 NavigatorContent 实例创建并填充 TabNavigator，其中包含一系列可使用“getHGroupById”方法进行选择的 RadioButton。
我确信使用 Bindable Data 和 ItemRenderes 可以实现类似的东西，这可能是更好的解决方案。
*Nicholas

应用程序：

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

最后是本示例中使用的 MyHGroup 组件。创建一个新的 MXML 文件名称 MyHGroup.mxml 并粘贴以下代码。

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