如何将 MXML 子节点放入自定义 Flex 4 组件中？

Question

这是自定义组件的示例。它只是一个带有标题标签和关闭图像 (X) 的框：

<?xml version="1.0"?>
<mx:Canvas ... >
    <s:VGroup>
        <s:Label text="(HEADING TEXT)" ... />

        (INSTANCE MXML)

    </s:VGroup>
    <mx:Image ... />
</mx:Canvas>

在 MXML 文档中使用该组件时，我希望将“(HEADING TEXT)”替换为参数（应该很容易）以及带有多个标签、文本输入、复选框等的“(INSTANCE MXML)”（可能更难）。

我找到了这种基于脚本的方法，但我想要一个更干净的编译时解决方案（如果存在）。有什么建议吗？

Answer 1

MyComponent.mxml：

<?xml version="1.0"?>
<mx:Canvas ... >
    <fx:Script>
        [Bindable]
        public var headingText:String = "Default Heading Text";

    </fx:Script>
    <s:VGroup>
        <s:Label text="{headingText}" ... />

        (INSTANCE MXML)

    </s:VGroup>
    <mx:Image ... />
</mx:Canvas>

这将让您像这样传递标题文本：

 <my:MyComponent headingText="Custom Heading Text" />

您可以对要传递的其他简单值采用相同的方法；只需声明一个公共属性，使其可绑定，然后在组件中使用数据绑定将该属性挂钩到其目的地（或多个目的地）。

您可以对复杂的属性（例如 INSTANCE MXML）执行相同的操作。当您使用它时，它看起来像这样：

<my:MyComponent>
  <my:thePropertyName>
     <s:Label text="whatever..." ... />
     <(OTHER MXML CONTENT) />
  </my:thePropertyName>
  <my:someOtherPropertyName>
    ....
  </my:someOtherPropertyName>
</my:MyComponent>

有关如何实现此功能的示例，您可以查看 spark.components.Group 组件的 mxmlContent 属性弹性框架。源代码太长，无法在这里发布，而且我似乎无法找到直接指向源代码的在线链接；但基本思想是这样的（您可以在 mxml 文件中的 块内执行以下所有操作 - 您不必创建一个纯 AS 类来执行此操作）：

[1]
将属性声明为 Array 类型，并使用元数据 ArrayElementType 来指示您希望数组包含的类型。

[ArrayElementType("mx.core.IVisualElement")]
public function set mxmlContent(value:Array):void {
    _mxmlContent = value;
}
private var _mxmlContent:Array;

[2] 您需要一些逻辑来在运行时循环数组，并将数组的内容添加到组件的显示列表中。 createChildren 重写是触发此操作的好地方。以下内容大致源自 Spark Group 的 setMXMLContent() 方法的实现。它并没有涵盖所有可能的情况，但它会帮助您开始：

override protected function createChildren():void {
    super.createChildren();
    if( _mxmlContent == null ) return;
    for (i = 0; i < _mxmlContent.length; i++) {   
        var elt:IVisualElement = _mxmlContent[i];
        addElement(elt);
    }
}

所以现在您的组件将有一个名为 mxmlContent 的属性，您可以使用以下语法从父 mxml 组件中设置该属性：

<my:MyComponent>
   <my:mxmlContent>
       ... (MXML ELEMENTS HERE) ...
   </my:mxmlContent>
</my:MyComponent> 

您可以通过应用元数据：[DefaultProperty("mxmlContent")] 您的组件类，将新属性设置为组件的默认属性。要从 mxml 执行此操作，只需将元数据定义包装在 元素中。 请参阅此处的 fx:Metadata 示例。

---

将以上所有内容放在一起，您将得到可以像这样使用的东西：

<my:MyComponent headingText="Custom Text Here">
   (CUSTOM MXML CONTENT HERE)
</my:MyComponent>

---

编辑：我应该在这里做一些注释：

1. “Halo”组件（例如mx： Canvas）不支持上面使用的 addElement()，因此您可能需要使用 addChild() 来代替。

2. 您应该（可能）使用 Spark 组件而不是 Halo 组件。意思是，使用 作为基础，而不是 。如果您这样做，那么您的组件将继承上述的 mxmlContent 属性。如果您希望组件拥有自己的“内容”属性（甚至多个内容属性），只需将它们命名为不同的名称即可。

Answer 2

这太棒了。感谢您提供此信息。

由于我不需要对其进行太多控制，因此我稍微简化了这个解决方案。

我们的容器 MyComponent.mxml 的代码：

<s:Group ... >
<fx:Script>
    <![CDATA[

    [Bindable]
    [ArrayElementType("mx.core.IVisualElement")]
    public var content:Array;

    ]]>
</fx:Script>

<s:Group width="100%" height="100%" mxmlContent="{content}" />

和用法：

<myComponents:MyComponent
    xmlns:myComponents="myComponents.*"
>

    <myComponents:content>
        <s:Label />
        <s:Label />
        <AnythingWeWant...
    </myComponents:content>

</myComponents:MyComponent>

希望这对任何人都有帮助。
干杯。