How to put MXML child nodes in a Flex 4 custom component?

Question

Here is an example of a custom component. This is just a box with a name tag and a close image (X):

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

        (INSTANCE MXML)

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

When using a component in an MXML document, I would like for ((HEADING TEXT) "to be replaced with a parameter (should be simple), as well as" (INSTANCE MXML) "with several labels, text inputs, checkboxes, etc. (maybe harder).

I found this script method , but I would like to use a cleaner compile time solution if one exists. Any suggestions?

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>

Text :

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

, , mxmlContent spark.components.Group flex. , , - ; ( <fx:Script> mxml - AS-):

[1] Array, ArrayElementType, , .

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

[2] . createChildren . setMXMLContent() Group. , :

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> 

default property , : [DefaultProperty("mxmlContent")] . mxml, <fx:Metadata>. . , , fx: .

---

, , :

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

---

: :

• "Halo" (, mx:Canvas) addElement(), , , , addChild().

• () . , <s:Group> <mx:Canvas>. , mxmlContent, . , content ( ), - .

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>

, . .