Apache flex 如何在自定义Flex 4组件中放置MXML子节点？

下面是一个自定义组件的示例。它只是一个带有标题标签和闭合图像（X）的框：

（实例MXML）

在MXML文档中使用组件时，我希望将“（标题文本）”替换为一个参数（应该很容易），并将“（实例MXML）”替换为几个标签、文本输入、复选框等（可能更难）

我已经找到了，但是我想要一个更干净的编译时解决方案（如果有的话）。有什么建议吗？

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>

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

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

    ]]>
</fx:Script>

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

[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);
    }
}

通过应用元数据：

[DefaultProperty（“mxmlContent”）]

组件类，可以将新属性设置为组件的

默认属性。要从mxml执行此操作，只需将元数据定义包装在
元素中


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

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

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


（此处为自定义MXML内容）


编辑：我应该在这里做几个注释：

“Halo”组件（如
mx:Canvas
）不支持上面使用的
addElement（）
，因此您可能需要使用
addChild（）

您应该（可能）使用火花组件而不是光晕组件。也就是说，使用
作为基础，而不是
。如果执行此操作，则组件将继承上述
mxmlContent
属性。如果您希望组件具有自己的“内容”属性（甚至多个内容属性），只需将它们命名为不同的名称即可

这太棒了。谢谢你的信息

因为我不需要对它进行太多的控制，所以我将这个解决方案简化了一点

我们的容器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>

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


好吧，这并不完全是一个编译时解决方案，但可能无法避免运行时处理。你当然应该得到很多感谢，因为没有其他人离你更近了，我会接受这个答案。@W3Coder:谢谢你接受。我知道您想要一个编译时解决方案，但是——除了构建自己的代码生成器之外——根本无法实现。不过值得一提的是：这与flex框架处理子内容所使用的方法相同，因此以这种方式编写的组件应该与任何编译时解决方案一样高效。祝你好运如果你发现有任何不同/更好的解决方案，请回来告诉我们。好帖子。正是我需要的！卡米尔，谢谢你发布你的代码。。。这样做非常简单。如果在MyComponent.mxml中添加
[DefaultProperty（“content”）]
，则可以在使用该类时删除
标记。见上文。
<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>