在自定义flex组件中设置内容区域

Question

我试图定义扩展mx:VBox的自定义组件的内容区域.该组件具有预定义的页眉和页脚(可视子项),我想在中间设置区域以将子项添加到组件.该组件将使用如下:

<custom_component>
     <mx:button/>
</custom_component>

我该如何设置此内容区域？

Answer 1

实际上有几个步骤.

1. 您的自定义组件需要设置其DefaultProperty元数据,以便子项不会与自定义组件本身中的子项冲突.
2. 然后,您需要将它们存放在实例var中,以便稍后添加到您的内容区域,因为将在创建组件子项之前设置属性.
3. 最后,如果指定了多个子项,则DefaultProperty将被传递给一个Array对象(而不是一个UIComponent实例).

所以你的自定义组件看起来像这样:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
    <mx:Metadata>
        [DefaultProperty("content")]
    </mx:Metadata>

    <mx:HBox id="headerBox"/>
    <mx:VBox id="contentBox"/>
    <mx:HBox id="footerBox"/>

    <mx:Script>
        <![CDATA[
            import mx.core.UIComponent;
            private var _contentChildren:Array;

            public function set content(c:*) : void {
                // Allow 1 or more children to be specified
                _contentChildren = (c as Array) || [c];
            }

            override protected function createChildren() : void {
                // Call super so contentBox gets created first
                super.createChildren();

                for each (var child:UIComponent in _contentChildren) {
                    contentBox.addChild(child);
                }
            }
        ]]>
    </mx:Script>
</mx:VBox>