child elements of MXML class not appearing

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.

---

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.

---

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>