MXML 类的子元素未出现答案

【问题标题】：child elements of MXML class not appearingMXML 类的子元素未出现
【发布时间】：2011-03-04 16:50:01
【问题描述】：

我正在开发一个简单的任务/日历工具，可以将任务动态添加到画布中。这是 Main.mxml 中定义的主应用程序，它本质上只是一个 Canvas 和一个用于添加任务的按钮：

    <?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>

我希望我的任务是带有标签和按钮的 BorderContainers，在外部 mxml 中定义，可以简单地实例化并添加到 Main.mxml 中的画布中。这是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>

问题是当我向 Canvas 添加一个 Task 实例时，子项（按钮和标签）不会出现。我尝试在 Canvas 和 BorderContainer 上设置 creationPolicy="all"，但它仍然不起作用。我已经阅读了一堆关于人们在类完全加载之前访问他们的类成员时遇到问题的帖子，但我想做的只是看到标签和按钮出现在 BorderContainer 中。

谢谢。

【问题讨论】：

您使用 mx 应用程序和画布而不是 Spark 应用程序和组是否有某些原因？我认为您的部分问题可能是在 Spark 中您使用 addElement 而不是 addChild。不过不太确定，因为我尽量避免混合和匹配 mx 和 Spark。

标签： apache-flex class mxml children instantiation

【解决方案1】：

如果您想将 mx 和 spark 控件混合在一起，您需要将 flex 3 mx 命名空间移至较新的命名空间。

这是您的 main.mxml，带有新的 mx 命名空间 (library://ns.adobe.com/flex/mx)，并添加了 fx 命名空间来处理脚本块：

<?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>

尽管正如其他人评论的那样，您可以将所有内容移至 spark - 如果您这样做，请务必将 addChild 调用更改为 addElement。

【讨论】：

谢谢。我是 Flex 的新手，我猜这只是因为我使用了我在网上找到的旧代码 sn-ps 的混搭。我把所有东西都换成了火花组件，现在我又回到了正轨。

【解决方案2】：

似乎将 spark 组件添加到 mx:canvas 永远不会触发创建 spark 组件的子组件所需的代码。以下是适合您的解决方法：

<?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>

【讨论】：