代码之家 › 专栏 › 技术社区 › Kricket

Flex 4中的自定义MXML容器

flex4 actionscript-3

Kricket · 技术社区 · 16 年前

我想制作一个定制容器,可以在MXML中使用,比如:

<local:MyContainer>
  <s:Label/>
  <s:Button/>
  ...
</local:MyContainer>

…但我希望能够捕捉添加孩子的时间,这样我就可以控制像when&它们被添加的地方。

我尝试重写addChild()、addChildAt()、addElement()、addElementAt(),(扩展Group类),但它们仅在您专门使用这些函数添加元素时才会触发-应用程序启动,标签、按钮等最终出现在MyContainer中,而不调用这些函数。

如何通过MXML控制子组件的添加?我是不是走错了路-我应该写一个自定义的布局和/或皮肤代替?

2 回复 | 直到 16 年前

hering Robyn Liu 16 年前

您可以尝试覆盖 mxmlContent-Array . 可能这是用来代替addChild()。。。

Alessandro Minoccheri 13 年前

我刚发现这个很管用,可能对你有帮助。它有一个缺点。设计器将显示一条错误消息“已为标记指定多组可视子级”。

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import avmplus.getQualifiedClassName;

            import flash.utils.getDefinitionByName;

            import mx.core.IVisualElement;
            import mx.core.UIComponent;

            import spark.layouts.BasicLayout;
            import spark.layouts.VerticalLayout;

            private var customMxmlContent : Array = null;
            private var customInitializeDone : Boolean = false;
            override public function set mxmlContent(value:Array) : void {

                if(!customInitializeDone) {
                    // customInitializeDone == false:
                    // this is called when the elements that are defined in THIS
                    // mxml file are added to mxmlContent. 
                    super.mxmlContent = value;
                    customInitializeDone = true;

                } else { 
                    // customInitializeDone:
                    // called when the elements from another mxmls file are added.
                    // Another file uses this component in this way:
                    /*
                    <views:RoundedGroup width="100%">
                        <views:layout>
                            <s:VerticalLayout/>
                        </views:layout>

                        <s:Button label="1234" />
                        <s:Button label="5678" />
                    </views:RoundedGroup>
                     */
                    // Here it is redirected to the innerGroup
                    // if you do not do this, the content of THIS mxml file is
                    // replaced by the other content
                    for(var i:uint=0; i < value.length; i++) {
                        innerGroup.addElement(value[i] as IVisualElement);
                    }
                }

                // Reset the layout 
                if(this.layout != null) {
                    // find out the layout class that is applied to this
                    var layClass : Class =  getDefinitionByName(getQualifiedClassName(this.layout)) as Class;
                    // and apply it to innerGroup instead
                    innerGroup.layout = new layClass();
                    // and reset the layout of this to a BasicLayout to get the Rect to the correct
                    // position and the innerGroup above the Rect
                    this.layout = new BasicLayout();
                }
            }
        ]]>
    </fx:Script>

        <s:Rect left="10" right="10" top="10" height="100%"  radiusX="11" radiusY="11">
            <s:fill>
                <s:SolidColor color="0xB7C8A8" />
            </s:fill>
            <s:stroke>
                <s:SolidColorStroke color="0xABABAB" weight="1" />
            </s:stroke>
        </s:Rect>

        <!-- Items are added within set mxmlContent to this VGroup container -->
        <s:Group id="innerGroup" left="10" right="10" top="10" />
</s:Group>