Flex 4: Traversing the Stage More Easily

Question

The following is a MXML Module I am producing in 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>

I'm writing this function rBclick to redraw the column chart when a radio button is clicked. In order to do this I need to find the column chart on the stage using actionscript. I've currently got 3 lines of code in here to do this:

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

Getting to the active tab in the tabnavigator is easy enough, but then selectedTab.getChildAt(0) - which I was expecting to be the chart - is a "spark.skin.spark.SkinnableContainerSkin"...anyway, I can continue to traverse the tree using this somewhat annoying code, but I'm hoping there is an easier way.

So in short, at run time I want to, with as little code as possible, identify the column chart in the active tab so I can redraw it. Any advice would be greatly appreciated.

Answer 1

It seems you can use some abstraction.

• Create a new mxml component that extends HorizontalLayout and contains the column chart, vertical layout, border container, label etc.
• Inside that, declare a public variable chart for the ColumnChart instance
• Declare a public init() method that an item of SECTOR element and initializes the component.
• Add instances of this new mxml component as children to the TabNavigator

Now you can easily access the column chart as NewComp(tn.selectedTab).chart