Flex 4: Traversing the Stage More Easily
- by Steve
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.
