テンプレートコンポーネントについてでは、MyTemplateComponet というテンプレートコンポーネントの例を示しました。Flex では、主に次の 2 つの方法でテンプレートコンポーネントを作成できます。

• 1 つの方法では、UIComponent や Container. などの一般的なデータ型を使用してプロパティを作成します。
• 別の方法では、IDeferredInstance 型を使用してプロパティを作成します。

テンプレートコンポーネントでの一般的なデータ型の使用

MyTemplateComponent コンポーネントを実装する 1 つの方法（テンプレートコンポーネントについてを参照）では、topRow プロパティと bottomRow プロパティを UIComponent データ型として定義します。このコンポーネントのユーザーは、これらのプロパティに対して UIComponent クラスのインスタンスまたは UIComponent のサブクラスのインスタンスをオブジェクトとして指定できます。

次の例は、MyTemplateComponent を実装するコードです。

<?xml version="1.0"?>
<!-- templating/myComponents/MyTemplateComponent.mxml -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
    initialize="init();">

    <mx:Script>
        <![CDATA[
        
            import mx.containers.HBox;
            import mx.core.UIComponent;
                
            // Define a property for the top component.
            public var topRow:UIComponent;

            // Define an Array of properties for a row of components.
            // Restrict the type of the Array elements 
            // to mx.core.UIComponent.          
            [ArrayElementType("mx.core.UIComponent")]
            public var bottomRow:Array;
    
            private function init():void {            
                // Add the top component to the VBox container.
                addChild(topRow);

                // Create an HBox container. This container 
                // is the parent container of the bottom row of components.
                var controlHBox:HBox = new HBox();

                // Add the bottom row of components 
                // to the HBox container.              
                for (var i:int = 0; i < bottomRow.length; i++)
                    controlHBox.addChild(bottomRow[i]);

                // Add the HBox container to the VBox container.
                addChild(controlHBox);
            }
        ]]>
    </mx:Script>
</mx:VBox>

bottomRow プロパティについては配列として定義します。[ArrayElementType] メタデータタグを含めて、配列要素のデータ型も UIComponent としてコンパイラに指定します。[ArrayElementType] メタデータタグについて詳しくは、カスタムコンポーネントのメタデータタグを参照してください。

テンプレートコンポーネントでの IDeferredInstance の使用

Flex の遅延生成機能では、Flex コンテナにより生成されるのは、ユーザーが最初に目にするコントロールだけです。コンテナの他の子孫コントロールは、ユーザーがそれらのコントロールに移動したときに、Flex によって生成されます。詳しくは、起動時のパフォーマンスの向上を参照してください。

テンプレートコンポーネントで、この遅延生成を利用することもできます。遅延生成を利用するコンポーネントを定義すると、アプリケーションの読み込み時に Flex でコンポーネントとそのプロパティが作成されるのではなく、コンポーネントを使用するアプリケーションの領域に移動したときにそのプロパティが初めて作成されます。この方法は、多数の子コンポーネントを持つ大きなコンポーネントで使用すると便利です。Flex のビューステートでは、この遅延生成機能を使用しています。

次の例では、topRow プロパティと bottomRow プロパティを IDeferredInstance 型として定義することで、テンプレートコンポーネントについてで示した MyTemplateComponent コンポーネントを実装する、MyTemplateComponentDeferred.mxml と呼ばれる別の方法を示します。

<?xml version="1.0"?>
<!-- templating/myComponents/MyTemplateComponentDeferred.mxml -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
    initialize="init();">

    <mx:Script>
        <![CDATA[
        
            import mx.containers.HBox;
            import mx.core.UIComponent;
                
            // Define a deferred property for the top component.
            public var topRow:IDeferredInstance;

            // Define an Array of deferred properties 
            // for a row of components.
            [ArrayElementType("mx.core.IDeferredInstance")]
            public var bottomRow:Array;
    
            private function init():void {  
                // Add the top component to the VBox container.
                // Cast the IDeferredInstance object to UIComponent
                // so that you can add it to the parent container.      
                addChild(UIComponent(topRow.getInstance()));

                // Create an HBox container. This container 
                // is the parent container of the bottom row of components.
                var controlHBox:HBox = new HBox();
                
                // Add the bottom row of components 
                // to the HBox container.              
                for (var i:int = 0; i < bottomRow.length; i++)
            controlHBox.addChild(UIComponent(bottomRow[i].getInstance()));

                // Add the HBox container to the VBox container.
                addChild(controlHBox);
            }
        ]]>
    </mx:Script>
</mx:VBox>

IDeferredInstance インターフェイスは、getInstance() という 1 つのメソッドを定義します。Flex は、コンポーネントのインスタンスを作成するときに getInstance() メソッドを呼び出してプロパティを初期化します。getInstance() メソッドへの以降の呼び出しに対しては、プロパティ値への参照が返されます。

MXML では、コンパイラが IDeferredInstance 型のプロパティの値宣言を検出すると、そのプロパティへの値を作成して割り当てるコードを生成せずに、IDeferredInstance の実装オブジェクトを作成して割り当てるコードを生成し、実行時に値を生成します。

IDeferredInstance 型のプロパティにはデータ型を渡すことができます。テンプレートコンポーネントについての例では、topRow プロパティに Label コントロールを、bottomRow プロパティに 3 つの Button コントロールを渡しています。

この例で、addChild() メソッドは、topRow と bottomRow をパラメータとして使用し、UIComponent にキャストしています。このキャストが必要な理由は、addChild() メソッドが IUIComponent インターフェイスを実装するオブジェクトだけをコンテナに追加できること、および DeferredInstance.getInstance() メソッドが Object 型の値を返すことにあります。

IDeferredInstance インターフェイスを使用したプロパティの定義

IDeferredInstance 型のコンポーネントプロパティ値を定義できます。

汎用プロパティの定義

関連付けられたデータ型を持たない汎用プロパティを定義するには、次の例に示すように、そのデータ型を IDeferredInstance として定義します。

// Define a deferred property for the top component.
public var topRow:IDeferredInstance;

これにより、コンポーネントのユーザーは、任意のデータ型のオブジェクトをプロパティに指定できます。この場合、ユーザーから渡された値のデータ型が正しいことをコンポーネントの実装で確認する必要があります。

プロパティのデータ型の制限

IDeferredInstance 型のプロパティとして許容されるデータ型を指定するには、次の例に示すように、[InstanceType] メタデータタグを使用します。

// Define a deferred property for the top component.
[InstanceType("mx.controls.Label")]
public var topRow:IDeferredInstance;

Flex コンパイラは、ユーザーが指定されたデータ型の値のみをプロパティに指定していることを検証します。次の例では、コンポーネントのユーザーが topRow プロパティを mx.controls.Label 以外のデータ型の値に設定すると、コンパイラからエラーメッセージが発行されます。

テンプレートプロパティの配列の定義

次の例に示すように、テンプレートプロパティの配列を定義することができます。

// Define an Array of deferred properties for a row of components.
// Do not restrict the type of the component.
[ArrayElementType("mx.core.IDeferredInstance")]
public var bottomRow:Array;

// Define an Array of deferred properties for a row of components.
// Restrict the type of the component to mx.controls.Button.
[InstanceType("mx.controls.Button")]
[ArrayElementType("mx.core.IDeferredInstance")]
public var bottomRow:Array;

最初の例では、任意のデータ型の値を bottomRow プロパティに割り当てることができます。各配列要素の getInstance() メソッドは、その要素が使用されるまで呼び出されません。

2 番目の例では、mx.controls.Button 型の値のみを割り当てることができます。各配列要素はアプリケーションの読み込み時に作成されます。次のテンプレートコンポーネントは、コンポーネントの型を mx.controls.Button 型に制限する、MyTemplateComponent の別の実装方法を示しています。

<?xml version="1.0"?>
<!-- templating/myComponents/MyTemplateComponentDeferredSpecific.mxml -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
    initialize="init();">
    
    <mx:Script>
        <![CDATA[
        
            import mx.containers.HBox;
            import mx.core.UIComponent;
                
            [InstanceType("mx.controls.Label")]
            public var topRow:IDeferredInstance;

            // Define an Array of deferred properties 
            // for a row of components.
            // Restrict the type of the component 
            // to mx.controls.Button.
            [InstanceType("mx.controls.Button")]
            [ArrayElementType("mx.core.IDeferredInstance")]
            public var bottomRow:Array;
    
            private function init():void {            
                addChild(UIComponent(topRow.getInstance()));

                var controlHBox:HBox = new HBox();
                for (var i:int = 0; i < bottomRow.length; i++)
            controlHBox.addChild(UIComponent(bottomRow[i].getInstance()));

                addChild(controlHBox);
            }
        ]]>
    </mx:Script>
</mx:VBox>