的Flex 4：遍歷舞臺更輕鬆

Question

以下是MXML模塊我生產Flex 4中：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" 
      creationComplete="init()" 
      layout="absolute" width="100%" height="100%"> 

    <fx:Declarations> 
     <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 

    <fx:Style source="BMChartModule.css" /> 

    <s:Panel id="panel" title="Benchmark Results" height="100%" width="100%" dropShadowVisible="false"> 
     <mx:TabNavigator id="tn" height="100%" width="100%" /> 
    </s:Panel> 

    <fx:Script> 
     <![CDATA[ 
      import flash.events.Event; 

      import mx.charts.ColumnChart; 
      import mx.charts.effects.SeriesInterpolate; 
      import mx.controls.Alert; 

      import spark.components.BorderContainer; 
      import spark.components.Button; 
      import spark.components.Label; 
      import spark.components.NavigatorContent; 
      import spark.components.RadioButton; 
      import spark.components.TextInput; 
      import spark.layouts.*; 

      private var xml:XML; 

      private function init():void 
      {    
       var seriesInterpolate:SeriesInterpolate = new SeriesInterpolate(); 
       seriesInterpolate.duration = 1000; 

       xml = parentApplication.model.xml; 
       var sectorList:XMLList = xml.SECTOR; 

       for each(var i:XML in sectorList) 
       {    
        var ncLayout:HorizontalLayout = new HorizontalLayout(); 

        var nc:NavigatorContent = new NavigatorContent(); 
        nc.label = i.@NAME; 
        nc.name = "NC_" + nc.label; 
        nc.layout = ncLayout; 
        tn.addElement(nc); 

        var cC:ColumnChart = new ColumnChart(); 
        cC.percentWidth = 70; 
        cC.name = "CC"; 
        nc.addElement(cC); 

        var bClayout:VerticalLayout = new VerticalLayout(); 

        var bC:BorderContainer = new BorderContainer(); 
        bC.percentWidth = 30; 
        bC.layout = bClayout; 
        nc.addElement(bC); 

        var bClabel:Label = new Label(); 
        bClabel.percentWidth = 100; 
        bClabel.text = "Select a graph to view it in the column chart:"; 

        var dpList:XMLList = sectorList.(@NAME == i.@NAME).DATAPOINT; 
        for each(var j:XML in dpList) 
        {  
         var rB:RadioButton = new RadioButton(); 
         rB.groupName = "dp"; 
         rB.label = j.@NAME; 
         rB.addEventListener(MouseEvent.CLICK, rBclick); 
         bC.addElement(rB); 
        } 

       }   
      } 

      private function rBclick(e:MouseEvent):void 
      { 
       var selectedTab:NavigatorContent = this.tn.selectedChild as NavigatorContent; 
       var colChart:ColumnChart = selectedTab.getChildByName("CC") as ColumnChart; 
       trace(selectedTab.getChildAt(0)); 
      } 
     ]]> 
    </fx:Script> 

</mx:Module> 

我正在寫該功能rBclick重繪柱形圖被點擊單選按鈕時。爲了做到這一點，我需要使用actionscript在舞臺上找到柱形圖。我目前得到了在這裏3行代碼來做到這一點：

  var selectedTab:NavigatorContent = this.tn.selectedChild as NavigatorContent; 
      var colChart:ColumnChart = selectedTab.getChildByName("CC") as ColumnChart; 
      trace(selectedTab.getChildAt(0)); 

前往活動標籤在與TabNavigator是很容易的，但後來selectedTab.getChildAt（0） - 這是我期待成爲圖表 - 是一個「spark.skin.spark.SkinnableContainerSkin」...無論如何，我可以繼續使用這個有點煩人的代碼遍歷樹，但我希望有一個更簡單的方法。

因此，簡而言之，在運行時，我希望儘可能使用盡可能少的代碼，確定活動選項卡中的柱狀圖，以便重新繪製它。任何建議將不勝感激。

Answer 1

看來你可以使用一些抽象。

• 創建擴展HorizontalLayout和包含列圖表，垂直佈局，邊框容器，標籤等
• 裏面，一個新的MXML組件聲明一個公共變量chart爲ColumnChart例如
• 聲明公開init（）方法指定元素的一個項目並初始化組件。
• 兒童加入這個新的MXML組件的實例到TabNavigator

現在，您可以輕鬆地訪問柱形圖爲NewComp(tn.selectedTab).chart