child elements of MXML class not appearing - apache-flex

Question

I'm working on a simple task/calendar tool where tasks can be added dynamically to a canvas. Here is the main application as defined in Main.mxml, which is essentially just a Canvas and a button for adding a task:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Canvas id="MainCanvas" borderStyle="solid" width="300" height="300">
<mx:Button click="CreateTask();" label="create task" />
</mx:Canvas>
<mx:Script>
<![CDATA[
import Task;
private function CreateTask( ) : void
{
// create the task object
var thisTask:Task = new Task();
// add the task to the canvas
var taskUI : DisplayObject = MainCanvas.addChild( thisTask );
// position the task ui
taskUI.y = 50;
}
]]>
</mx:Script>
</mx:Application>
I want my tasks to be BorderContainers with a label and a button, defined in an external mxml, that can simply be instantiated and added to the canvas in Main.mxml. Here is Tasks.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:s="library://ns.adobe.com/flex/spark" cornerRadius="10">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Label id="NameLabel" text="task name" />
<s:Button label="Button 1"/>
</s:BorderContainer>
The problem is that when I add a Task instance to the Canvas, the children (the button and label) don't appear. I tried setting creationPolicy="all" on both the Canvas and the BorderContainer, but it still didn't work. I've read a bunch of posts about people having issues accessing members of their class before the class is fully loading, but all I want to do is SEE that Label and Button show up inside the BorderContainer.
Thanks.

Answer 1

You need to move off of the flex 3 mx namespace to the newer namespace if you want to mix mx and spark controls together.
Here's your main.mxml with the new mx namespace (library://ns.adobe.com/flex/mx), and the fx namespace added to handle the script block:
<?xml version="1.0" encoding="utf-8"?>
<mx: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" >
<fx:Script>
<![CDATA[
import Task;
private function CreateTask( ) : void
{
// create the task object
var thisTask:Task = new Task();
// add the task to the canvas
var taskUI : DisplayObject = MainCanvas.addChild( thisTask );
// position the task ui
taskUI.y = 50;
}
]]>
</fx:Script>
<mx:Canvas id="MainCanvas" borderStyle="solid" width="300" height="300">
<mx:Button click="CreateTask();" label="create task" />
</mx:Canvas>
</mx:Application>
Although as other people have commented, you could just move everything over to spark - if you do that, be sure to change the addChild call to addElement.

Answer 2

It appears that adding spark component to an mx:canvas never triggers the code necessary to create the spark component's children. Here is a workaround for you:
<?xml version = "1.0" encoding = "utf-8"?>
<s:BorderContainer
xmlns:mx = "http://www.adobe.com/2006/mxml"
xmlns:s = "library://ns.adobe.com/flex/spark"
cornerRadius = "10"
creationComplete = "{addElement(poorUseOfContainers)}">
<s:HGroup id = "poorUseOfContainers"
width = "100%" height = "100%">
<s:Label id = "NameLabel"
text = "task name" />
<s:Button label = "Button 1" />
</s:HGroup>
</s:BorderContainer>