Error #2025: The supplied DisplayObject must be a child of the caller

Question

I am very new to programming in FLEX. I have inherited a FLEX 4 project that invokes web services to display data to the end user.

My default package has one .MXML file, that has the component references to the Login screen (another .MXML file) and the Main screen (yes, another .MXML file).

The login process works fine. I have 3 tabs, with a 4th tab I am adding now.

The tabs are created using elements within a TabNavigator. I have added a 4th VBOX, like so:

        <mx:VBox label="Data Analysis" width="100%" height="100%">
        <componenets:DeviceLineChart />
    </mx:VBox>

The DeviceLineChart.mxml looks like this:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            xmlns:charts="org.axiis.charts.*"
            layout="absolute"
            creationComplete="start();"
            xmlns:axiis="http://www.axiis.org/2009"
            xmlns:series="org.axiis.charts.series.*"
            xmlns:groupings="org.axiis.charts.groupings.*"
            xmlns:degrafa="http://www.degrafa.com/2008"
            xmlns:states="org.axiis.states.*"
            xmlns:paint="org.axiis.paint.*"
            xmlns:Examples="Examples.*"
            xmlns:axis="org.axiis.charts.axis.*"
            xmlns:labels="org.axiis.charts.labels.*"
            xmlns:utils="org.axiis.utils.*" viewSourceURL="srcview/index.html">

<mx:Style source="styles/Axiis_Examples.css"/>

<mx:Script>
    <![CDATA[
        import org.axiis.data.DataSet;

        private var ds:DataSet = new DataSet();

        public function start():void
        {
            ds.processCsvAsTable(payload, false);

            //LineSeriesGroup expects each unique series as a row
            //Since our data has the time entries on each row (a common format for temporal data) we want to pivot the data
            //This then makes a column for each unique time entrie and a row for each unique column.
            ds.pivotTable(0);
            dataProvider = ds.data.pivot.rows;
            hScale.dataProvider=ds.data.pivot.header.slice(1,dataSlice.value+1);
            hAxis.invalidateDataProvider();
            dc.invalidateDisplayList();
        }

        private function sliceData():void {
            hScale.dataProvider=ds.data.pivot.header.slice(1,dataSlice.value+1);
            hAxis.invalidateDataProvider();
            myLineGroup.invalidateDataProvider();
            dc.invalidateDisplayList(); 
        }

        private function axisLabel(obj:Object):String
        {
            return formatter.format(Number(obj) / 1000);
        }

        private function filterColumns(obj:Object):Boolean
        {
            //Don't want filter fields, trim columns
            if (obj.index < 1 || obj.index > dataSlice.value)
                return false;
            else
                return true;
        }

        private function filterRows(obj:Object):Boolean
        {
            //Trim our rows
            if (obj.pivotName == "Apples")
                return false;
            else
                return true;
        }
    ]]>
</mx:Script>

<mx:String id="payload" source="data/LineSeriesData.csv"/>

<mx:CurrencyFormatter currencySymbol="k"
                      precision="0"
                      id="formatter"
                      alignSymbol="right"
                      useThousandsSeparator="true"/>

<!--  GLOBAL VARIABLES -->
<mx:Object id="dataProvider"/>
<mx:String id="verticalField"/>
<mx:Number id="percentGap">.02</mx:Number>

<!--  EXPRESSIONS -->
<utils:NumericExpression id="tension" value="{slider.value/210}" valueChanged="{if (myLineGroup) dc.invalidateDisplayList();}"/>


<!-- CHART -->
<axiis:LinearScale id="vScale"
                   dataProvider="{dataProvider}"
                   minLayout="0"
                   maxLayout="{myLineGroup.height}"
                   />

<axiis:CategoricalScale id="hScale"
                        minLayout="0"
                        maxLayout="{myLineGroup.width}"
                        />

<axiis:DataCanvas width="80%"
                  id="dc"
                  top="120"
                  bottom="100"
                  horizontalCenter="0"
                  strokes="{strokes}"
                  fills="{fills}"
                  palettes="{palettes}"
                  showDataTips="true">

    <!-- Background -->
    <axiis:backgroundGeometries>
        <axis:VAxis id="vAxis"
                    verticalScale="{vScale}"
                    tickStroke="{axisStroke}"
                    width="{dc.width}"
                    height="{myLineGroup.height}"
                    showDataTips="false"
                    fontFamily="Myriad Pro"
                    fontColor="0"
                    fontSize="14"
                    tickGap="5"
                    majorTickSpacing="50"
                    labelFunction="{axisLabel}"/>
        <axiis:HCategoryAxis id="hAxis"
                             x="{myLineGroup.x}"
                             categoryScale="{this.hScale}"
                             width="{myLineGroup.width}"
                             dataProvider="{hScale.dataProvider}"
                             height="50"
                             y="{myLineGroup.height}"/>
        <degrafa:Line x="0"
                      x1="{myLineGroup.x+myLineGroup.width}"
                      y="{myLineGroup.height}"
                      y1="{myLineGroup.height}"
                      stroke="{axisStroke}"/>
    </axiis:backgroundGeometries>

    <!-- Layouts -->
    <axiis:layouts>
        <groupings:LineSeriesGroup id="myLineGroup"
                                   x="12"
                                   y="0"
                                   height="{dc.height-70}"
                                   width="{dc.width}"
                                   tension="{tension.value}"
                                   markerColor="{areaPalette.currentColor}"
                                   dataFilterFunction="{filterRows}"
                                   showArea="{area.selected}"
                                   plotFilterFunction="{filterColumns}"
                                   markerSize="8"
                                   showMarker="{showMarker.selected}"
                                   mode="{int(layoutGroup.selectedValue)}"
                                   dataProvider="{dataProvider}"
                                   plotCollection="columns"
                                   dataField="value"
                                   labelField="pivotName"
                                   xDataField="name"
                                   plotLabelField="name"
                                   verticalScale="{vScale}"
                                   horizontalScale="{hScale}"
                                   stroke="{myStroke}"
                                   fill="{areaFill}"
                                   enableRollOver="true"/>
    </axiis:layouts>
</axiis:DataCanvas>

<!--  FILLS & STROKES -->

<mx:Array id="palettes">
    <paint:LayoutAutoPalette id="outerPalette" layout="{myLineGroup}" colorFrom="0xCC3333" colorTo="0x3333CC"/>
    <paint:LayoutAutoPalette id="clusterPalette" layout="{myLineGroup}" colorFrom="{outerPalette.currentColor}" colorTo="{outerPalette.currentColor | 0x337f00}"/>
    <paint:LayoutAutoPalette id="areaPalette" layout="{myLineGroup}" colorFrom="0x3333CC" colorTo="0xCC3333"/>
</mx:Array>
<mx:Array id="fills">
    <degrafa:LinearGradientFill id="areaFill" angle="90" enableEvents="false">
        <degrafa:GradientStop color="{areaPalette.currentColor}" alpha=".95"/>
        <degrafa:GradientStop color="{areaPalette.currentColor | 0x999933}" alpha=".65"/>
    </degrafa:LinearGradientFill>
    <degrafa:LinearGradientFill id="clusterFill" angle="45" enableEvents="false">
        <degrafa:GradientStop color="{clusterPalette.currentColor}"/>
        <degrafa:GradientStop color="{clusterPalette.currentColor | 0xFFFFFF}" alpha=".85"/>
    </degrafa:LinearGradientFill>
</mx:Array>
<mx:Array id="strokes">
    <degrafa:LinearGradientStroke id="colStroke" pixelHinting="true" angle="45" enableEvents="false">
        <degrafa:GradientStop color="0xFFFFFF" alpha=".7"/>
        <degrafa:GradientStop color="0xFFFFFF" alpha=".3"/>
    </degrafa:LinearGradientStroke>
    <degrafa:SolidStroke color="0xFFFFFF" alpha=".3"/>
    <degrafa:SolidStroke color="0x222222" id="axisStroke" pixelHinting="true"/>
    <degrafa:SolidStroke color="{areaPalette.currentColor}"
                         id="myStroke"
                         weight="1"
                         alpha="1"
                         caps="none"
                         pixelHinting="true"/>
</mx:Array>

<!-- DISPLAY OBJECTS -->

<mx:HBox id="myBox" bottom="50" horizontalCenter="0">
    <mx:HBox>
        <mx:Label text="Line Curve" textAlign="right" verticalCenter="0"/>
        <mx:HSlider width="80"
                    id="slider"
                    minimum="1"
                    maximum="80"
                    value="35"
                    liveDragging="true"
                    showTrackHighlight="false"
                    verticalCenter="-5"/>
    </mx:HBox>
    <mx:Label text="|"/>
    <mx:HBox>
        <mx:Label text="% Data" textAlign="right" verticalCenter="0"/>
        <mx:HSlider width="80"
                    id="dataSlice"
                    minimum="3"
                    maximum="220"
                    value="30"
                    snapInterval="1"
                    change="{sliceData();}"
                    showTrackHighlight="false"
                    verticalCenter="-5"/>
    </mx:HBox>
    <mx:HBox>
        <mx:Label text="Label Rotation" textAlign="right" verticalCenter="0"/>
        <mx:HSlider width="80"
                    id="labelRotate"
                    minimum="0"
                    maximum="90"
                    value="0"
                    snapInterval="1"
                    change="{hAxis.labelRotation=labelRotate.value;dc.invalidateDisplayList();}"
                    showTrackHighlight="false"
                    verticalCenter="-5"/>
    </mx:HBox>
    <mx:Label text="|"/>
    <mx:HBox>
        <mx:Label text="Area" textAlign="right" verticalCenter="0"/>
        <mx:CheckBox id="area" change="{dc.invalidateDisplayList();}" selected="true"/>
    </mx:HBox>
    <mx:Label text="|"/>
    <mx:HBox>
        <mx:Label text="Marker" textAlign="right" verticalCenter="0"/>
        <mx:CheckBox id="showMarker" change="{dc.invalidateDisplayList();}"/>
    </mx:HBox>
    <mx:Label text="|"/>
    <mx:Spacer width="20"/>
    <mx:HBox>
        <mx:RadioButtonGroup id="layoutGroup" change="{dc.invalidateDisplayList();}"/>
        <mx:RadioButton label="Overlay" group="{layoutGroup}" value="{LineSeriesGroup.MODE_BASELINE}" selected="true"/>
        <mx:RadioButton label="Stack" group="{layoutGroup}" value="{LineSeriesGroup.MODE_STACK_ZERO}"/>
        <mx:RadioButton label="Flow" group="{layoutGroup}" value="{LineSeriesGroup.MODE_STACK_FLOW}"/>
    </mx:HBox>
</mx:HBox></mx:Application>

I have implemented an Axiis Line Chart into my project, which I think is pretty cool. But I am having some trouble with implementing it, as the LineChart was originally written in FLEX 3 (and my project being FLEX 4). It finally displays correctly (with all data supplied) but I cannot click on anything on the LineChart without receiving an error.

I would like to point out that this is not a duplicate question, as a similar question has been answered on stackoverflow here. My question is eerily similar, except my project already uses the "" namespace from what I can tell, which is mentioned as "the fix" in the previous stackoverflow answer. Maybe I am not using the namespace correctly, in the correct places? I am unsure and can post more of my components and their code if necessary. I might be speaking greek here, or might be confusing some of you, but I am only 6 days into my FLEX development lifespan, so please excuse my ignorance as this is a completely new field for me.

I was able to get my hands on the .SWC files needed for the FLEX 4 upgrade for Axiis and Degrafa4, thanks to some really nice guys working on the open source projects for these tools. You can find those files here.

I currently receive the error:

ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller. at flash.display::DisplayObjectContainer/getChildIndex() at mx.managers::SystemManager/getChildIndex()[E:\dev\4.x\frameworks\projects\framework\src\mx\managers\SystemManager.as:1665] at mx.managers.systemClasses::ActiveWindowManager/mouseDownHandler()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\systemClasses\ActiveWindowManager.as:471] Blockquote

This error only occurs on my 4th tab/VBOX, which contains the Axiis LineChart. Once a user has clicked on the chart the errors appear on all UI components, wherever I click.

If you google the error message, most people resolve it by changing explicit code that adds or removes UI objects. This is not my case at all, there is no explicit adding or removing in my code that I could change. This leads me to believe this is a namespace/framework/library problem, or that my project is not designed correctly from a UI/Canvas/Namespace standpoint. I am not familiar enough with FLEX 4 to know where to use the Spark, MXML, MX namespaces (s,fx, mx), etc.

Any help or ideas are appreciated, as this bug is a current show stopper. Thanks!

Also, I have been notified that many of the code referencing "

Answer 1

Why is "DeviceLineChart" an <mx:Application>? If you aren't doing any fancy loading of sub-applications you might want to just change it to a <mx:Canvas> instead. If you do plan to load these dynamically you want to be looking at using Module Loader. What you are telling Flex is that there are two applications running inside your system, there are a few singletons like SystemManager that don't work when you use two applications without using a loading system to do it.