Flex 4: Traversant la scène Plus facilement

Question

Voici un module MXML je produis dans 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> 

J'écris cette fonction rBclick pour redessiner le graphique à colonnes lorsqu'un bouton radio est cliqué. Pour ce faire, je dois trouver le tableau à colonnes sur la scène en utilisant actionscript. J'ai actuellement obtenu 3 lignes de code ici pour le faire:

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

Se rendre à l'onglet actif dans le tabnavigator est assez facile, mais selectedTab.getChildAt (0) - que je me attendais à la chart - est un "spark.skin.spark.SkinnableContainerSkin" ... de toute façon, je peux continuer à traverser l'arbre en utilisant ce code quelque peu ennuyeux, mais j'espère qu'il y a un moyen plus simple. Donc, en bref, au moment de l'exécution, je veux, avec le moins de code possible, identifier le graphique à colonnes dans l'onglet actif afin que je puisse le redessiner. Tout avis serait grandement apprécié.

Answer 1

Il semble que vous pouvez utiliser une certaine abstraction.

• Créer un nouveau composant MXML qui étend HorizontalLayout et contient le graphique à colonnes, disposition verticale, contenant de la frontière, l'étiquette etc.
• intérieur que, déclarer une variable publique chart pour le ColumnChart exemple
• Déclare public init() méthode qu'un élément de SECTOR élément et initialise le composant.
• Ajouter des instances de ce nouveau composant MXML que les enfants à la TabNavigator

Maintenant, vous pouvez facilement accéder au tableau des colonnes comme NewComp(tn.selectedTab).chart