adobe flash buider (flex4): Error #2025 or Error: addChild() is not available in this class. Instead, use addElement()

Question

Hi, I'm a complete newbie to Flex, so apologies for my dumbness. I've searched for an answer but haven't found anything that seems to be doing the trick.

What I'm trying to do: port this example http://www.adobe.com/devnet/air/flex/articles/flex_air_codebase_print.html to Flash Builder 4.

All seems to be fine but for one thing. When I use the original code for the Air application

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 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="onApplicationComplete()">
<fx:Script>
    <![CDATA[
        private static const neededForCompilation:AirGeneralImplementation = null;
        private function onApplicationComplete():void
        {
            var can:MainCanvas = new MainCanvas();
            this.addChild(can); 
            can.labelMessage = "Loaded in an AIR Application ";
        }
    ]]>
</fx:Script>

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


</s:WindowedApplication>

I get this run time error

Error: addChild() is not available in this class. Instead, use addElement() or modify the skin, if you have one. at spark.components.supportClasses::SkinnableComponent/addChild()[E:\dev\4.0.0\frameworks\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:1038]

If I substitute the code with

this.addElement(can);

Everything loads well but the first time I try to press any of the buttons on the main canvas I get the following run time 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.0.0\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:437]

here's the super simple code for the main canvas

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               creationComplete="init();">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script source="main.as" />
    <mx:Label id="lblMessage" text="The UI from the shared Flex app BothCode" x="433" y="112"/>
    <s:Button x="433" y="141" click="saveFile();" label="Save File"/>
    <s:Button x="601" y="141" click="GeneralFactory.getGeneralInstance().airOnlyFunctionality();" label="Air Only"/>
</s:Application>

Any help would be immensely appreciated. And any pointers to how to setup a project that can compile in both Air and Flash while sharing the same code, all for Flex 4, would also be immensely appreciated.

thank you!

Answer 1

The code on that link was written using the flex 3.5 sdk or below. You are using the new flex 4 sdk ( which is the default for Flash Builder ). You can do the following:
1. step into the code do any necessary changes to make it work for flex 4 sdk.
2. setup a new project using the flex 3 sdk ( select "Use a specific SDK" and choose the Flex 3 from the dropdown box in the "New Project" window)
I would suggest going for the second option, make it work and once you've stepped a little deeper into flex 4 you can do the 1st option.

Cheers.

Answer 2

I ran into the same problem using that tutorial for Flex 4. I did the same thing as you and used the <s:Application> component for the Main Canvas. However the tutorial uses a <mx:VBox>, the solution I found was to change the Main Canvas from an <s:Application> to an <s:Group>. The problem seems to be embedding an Application within an Application.