カスタムFlex 4コンポーネント内にMXML子ノードを配置する方法は？

Question

カスタムコンポーネントの例を次に示します。

が

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

     (INSTANCE MXML) 

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

MXMLドキュメント内のコンポーネントを使用する場合は、私が持っているしたいと思います「（HEADING TEXT）」をパラメータで置き換える（：それはちょうどタイトルラベルと箱と近い画像（X）であります簡単なものでなければなりません）と、いくつかのラベル、テキスト入力、チェックボックスなど（おそらくもっと難しい）を持つ "（INSTANCE MXML）"があります。

私はthis script-based methodを見つけましたが、クリーナーを希望しますコンパイル時に解決策が存在する場合はそれがあります。助言がありますか？

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> 

あなたはこのようheadingTextに通してやる：

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

これを実装する方法の例については、Flexフレームワークでspark.components.GroupコンポーネントのmxmlContentプロパティをチェックアウトすることができます。ソースは長すぎてここに投稿することはできません。ソースに直接オンラインリンクを見つけることはできません。基本的な考え方はこれです（これを行うには、mxmlファイルの<fx:Script>ブロック内で次のすべてを行うことができます）。

[1] プロパティをタイプArrayとして、メタデータArrayElementTypeを使用して、配列に含めるタイプを指定します。

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

[2]あなたは、実行時に配列をループにロジックを少し必要とし、コンポーネントの表示リストに配列の内容を追加します。 createChildrenオーバーライドはこれをトリガするのに適しています。以下は、火花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); 
    } 
} 

だから今、あなたのコンポーネントを使用すると、構文を使用して、親MXMLコンポーネントから設定することができた、mxmlContentというプロパティを持っているでしょう。

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

メタデータ：[DefaultProperty("mxmlContent")]をコンポーネントクラスに適用すると、新しいプロパティをコンポーネントのdefault propertyに追加できます。 mxmlからこれを行うには、<fx:Metadata>要素にメタデータ定義をラップするだけです。 see here for example of fx:Metadata。

---

は、上記のすべて一緒に入れて、あなたがこのように使用することができます何かを得るでしょう：

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

---

編集：

：私はここでノートのカップルを作る必要があります

1. "Halo"コンポーネント（mx:Canvasなど）はをサポートしていませんと同じですので、代わりにaddChild()を使用します。

2. ハローコンポーネントの代わりにスパークコンポーネントを使用する（おそらく）必要があります。意味は、<mx:Canvas>の代わりに<s:Group>をベースに使用してください。これを行うと、コンポーネントは上記の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> 

希望、これは誰にも役立ちます。 乾杯。