<mx:Repeater> タグは、Repeater コンポーネントを宣言するために使用します。Repeater コンポーネントは、実行時に動的または静的なデータ配列に基づいて 1 つまたは複数のユーザーインターフェイスコンポーネントの繰り返しを処理します。繰り返す対象のコンポーネントには、コントロールまたはコンテナを指定できます。Repeater コンポーネントを使用するには、データバインディングを行って、ランタイム固有の値を記述できるようにする必要があります。データバインディングの詳細については、データの格納を参照してください。

<mx:Repeater> タグは、コントロールタグまたはコンテナタグを使用できるあらゆる場所で使うことができます。ユーザーインターフェイスコンポーネントを繰り返すには、対応するタグを <mx:Repeater> タグ内に配置します。UIComponent クラスから派生したすべてのコンポーネントを繰り返すことができます（<mx:Application> コンテナタグを除く）。さらに、1 つの MXML ドキュメント内で複数の <mx:Repeater> タグを使用したり、<mx:Repeater> タグをネストすることもできます。

MXML での Repeater コンポーネントの宣言

Repeater コンポーネントは、<mx:Repeater> タグ内で宣言します。次の表で、Repeater コンポーネントのプロパティについて説明します。

次の表で、Repeater コンポーネントのイベントについて説明します。

Repeater コンポーネントの基本原則

Repeater コンポーネントを使用して作成できる最も単純な繰り返しは、一定の回数実行される静的ループです。次の Repeater コンポーネントは、4 回実行される単純な for ループをエミュレートしています。短いテキストを印刷し、1 回の実行ごとにカウンタがインクリメントします。

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*">

  <mx:Script>
    <![CDATA[
      [Bindable]
      public var myArray:Array=[1,2,3,4];
    ]]>
  </mx:Script>

  <mx:ArrayCollection id="myAC" source="{myArray}"/>
  <mx:Repeater id="myrep" dataProvider="{myAC}"> 
    <mx:Label id="Label1" text="This is loop #{myrep.currentItem}"/>
  </mx:Repeater>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

実際には、カウンタは配列内のデータではなく、配列内の位置です。配列内にエレメントが 4 つが存在していれば、配列内にどのようなデータでも含めることができ、Repeater コンポーネントが 4 回実行されます。この原則について、次の例で説明します。

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            [Bindable]
            public var myArray:Array=[10,20,30,40];
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="myAC" source="{myArray}"/>

    <mx:Repeater id="myrep" dataProvider="{myAC}"> 
        <mx:Label id="Label1" text="This is loop #{myrep.currentIndex+1}"/>
  </mx:Repeater>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例で印刷するのは、インデックスそのものではなく、現在のインデックスに 1 を加えたものです。これは、配列の最初のエレメントのインデックス値に 0 が割り当てられているからです。

前の 2 つの例では、次のような同一の結果が得られます。

startingIndex プロパティと count プロパティを使用して、実行開始位置と実行回数を変更することもできます。count プロパティには Repeater コンポーネントの実行回数の上限を記述します。count プロパティは、多くの場合 Repeater コンポーネント内のコンテンツの実行回数と一致しますが、一致しない場合もあります。これは、count プロパティの値に関係なく、データプロバイダの最後のエレメントに到達すると Repeater コンポーネントが繰り返しを終了するからです。

次の例は、Repeater コンポーネントでの count プロパティと startingIndex プロパティの使用例を示します。

<?xml version="1.0"?>
<!-- repeater\StartingIndexCount.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 


    <mx:Script>
        <![CDATA[
            [Bindable]
            public var myArray:Array=[100,200,300,400,500,600];
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="myAC" source="{myArray}"/>

    <mx:Repeater id="myrep" dataProvider="{myAC}" count="6"> 
        <mx:Label id="Label1" 
            text="Value: {myrep.currentItem}, Loop #{myrep.currentIndex+1} 
                of {myrep.count}"/>
    </mx:Repeater> 

    <mx:HRule/>

    <mx:Repeater id="myrep2" dataProvider="{myAC}" 
            count="4" startingIndex="1"> 
        <mx:Label id="Label2" 
            text="Value: {myrep2.currentItem}, 
                Loop #{myrep2.currentIndex-myrep2.startingIndex+1} 
                of {myrep2.count}"/>
    </mx:Repeater> 

    <mx:HRule/>

    <mx:Repeater id="myrep3" dataProvider="{myAC}" count="6"
            startingIndex="3"> 
        <mx:Label id="Label3" 
            text="Value: {myrep3.currentItem}, 
                Loop #{myrep3.currentIndex-myrep3.startingIndex+1} 
                of {myrep3.count}"/>
     </mx:Repeater> 
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、次の出力が生成されます。

最初の Repeater コンポーネントはデータプロバイダのすべてのエレメントを最初から最後までループし、最後のループ後に終了します。2 つ目の Repeater コンポーネントはデータプロバイダの 2 番目のエレメントから開始し、4 回繰り返して、5 番目のエレメントで終了します。3 つ目の Repeater コンポーネントはデータプロバイダの 4 番目のエレメントから開始し、データプロバイダの配列の最後に到達するまで繰り返して、終了します。count プロパティは 6 に設定されていますが、実際の繰り返し回数は 3 です。

Repeater コンポーネントを使用した動的ループの作成

Repeater コンポーネントの基本原則で説明した原則は、動的データプロバイダにも適用できます。唯一の違いは、データ配列のソースが異なる点です。配列が、アプリケーションに直接書き込まれた静的配列ではなく、<mx:Model> タグで定義されて、XML ファイルや Web サービス、リモートオブジェクトなどのソースから渡されます。実行時にデータが収集および評価され、データプロバイダのエレメントの数と値、および Repeater コンポーネントのビヘイビアが決定されます。

次の例の <mx:Repeater> タグは、XML ファイル内のすべての製品に対して RadioButton コントロールを繰り返します。

<?xml version="1.0"?>
<!-- repeater\DynamicLoop.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    initialize="catalogService.send();">

    <mx:HTTPService id="catalogService" url="../assets/repeater/catalog.xml"
            resultFormat="e4x"/>

    <mx:XMLListCollection id="myXC"
            source="{catalogService.lastResult.product}"/>

    <mx:Repeater id="r" dataProvider="{myXC}">
        <mx:RadioButton id="Radio" label="{r.currentItem.name}"
                width="150"/>
    </mx:Repeater>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

catalog.xml の内容が次のとおりであると仮定します。

<?xml version="1.0"?>
<!-- assets\catalog.xml -->
<products>
  <product>
    <name>Name</name>
    <price>Price</price>
    <freeship>Free Shipping?</freeship>
  </product>
  <product>
    <name>Whirlygig</name>
    <price>5</price>
    <freeship>false</freeship>
  </product>
  <product>
    <name>Tilty Thingy</name>
    <price>15</price>
    <freeship>true</freeship>
  </product>
<product>
    <name>Really Big Blocks</name>
    <price>25</price>
    <freeship>true</freeship>
  </product>
</products>

Flex によって次の出力が表示されます。

この場合も、count プロパティを使用して繰り返し回数の上限を指定できます。startingIndex プロパティを使用すると、データプロバイダの先頭でスキップするエントリを指定できます。

前の例では、XML ファイルの最初の製品エントリに、他のアプリケーションが列ヘッダを作成するために使用するメタデータが含まれています。このエントリにラジオボタンをつけて表示する必要はないので、次のコード例のように、Repeater コンポーネントをデータプロバイダの 2 番目のエレメントから開始します。

<?xml version="1.0"?>
<!-- repeater\StartSecondElement.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    initialize="catalogService.send();"> 

    <mx:HTTPService id="catalogService" url="../assets/repeater/catalog.xml"
            resultFormat="e4x"/>
            
    <mx:XMLListCollection id="myXC"
            source="{catalogService.lastResult.product}"/>
            
    <mx:Repeater id="r" dataProvider="{myXC}"
            startingIndex="1">
        <mx:RadioButton id="Radio" label="{r.currentItem.name}"
            width="150"/>
    </mx:Repeater>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

前の例では、次の出力が生成されます。

繰り返されるコンポーネントの参照

繰り返されるコンポーネントのそれぞれのインスタンスを参照するには、次の例に示すように、インデックス id 参照を使用します。

<?xml version="1.0"?> 
<!-- repeater\RefRepeatedComponents.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

            public function labelTrace():void {
                for (var i:int = 0; i < nameLabel.length; i++)
                    trace(nameLabel[i].text);
            }
        ]]>
    </mx:Script>

    <mx:Model id="catalog" source="../assets/repeater/catalog.xml"/>
    <mx:ArrayCollection id="myAC" source="{catalog.product}"/>
    <mx:Label id="title" text="Products:"/>
    
    <mx:Repeater id="r" dataProvider="{myAC}" startingIndex="1">
        <mx:Label id="nameLabel"
            text="{r.currentItem.name}: ${r.currentItem.price}"
            width="200"/>
    </mx:Repeater>
    <mx:Button label="Trace" click="labelTrace();"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、繰り返される Label コントロールの id は nameLabel です。作成されるそれぞれの nameLabel インスタンスはこの id を持ちます。それぞれの Label インスタンスは、nameLabel[0]、nameLabel[1] などのように参照します。nameLabel インスタンスの数の合計は、nameLabel.length として参照します。for ループは、nameLabel Array オブジェクト内の各 Label コントロールの text プロパティをトレースします。mm.cfg ファイルでそのように定義している場合は、labelTrace() メソッドが各製品の名前と価格をシステムログにプリントします。

繰り返される子コンポーネントの参照

配列内でコンテナが繰り返されてインデックス付けされると、その子もインデックス付けされます。例えば、次の MXML コードでは、VBox コンテナ vb[0] の子 Label コントロールを nameLabel[0] および shipLabel[0] として参照します。子を参照するためのシンタックスは、親を参照する場合のシンタックスと同じです。

<?xml version="1.0"?>
<!-- repeater\RefRepeatedChildComponents.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 

    <mx:Script>
        <![CDATA[
        
            public function labelTrace():void {
                for (var i:int = 0; i < nameLabel.length; i++)
                    trace(nameLabel[i].text);
            }
        ]]>
    </mx:Script>

    <mx:Model id="catalog" source="../assets/repeater/catalog.xml"/>
    <mx:Label id="title" text="Products:"/>

    <mx:Repeater id="r" dataProvider="{catalog.product}" 
            startingIndex="1">
        <mx:VBox id="vb">
            <mx:Label id="nameLabel"
                text="{r.currentItem.name}: ${r.currentItem.price}"
                width="200"/>
            <mx:Label id="shipLabel" 
                text="Free shipping: {r.currentItem.freeship}"/>
            <mx:Spacer/>
        </mx:VBox>
    </mx:Repeater>

    <mx:Button label="Trace" click="labelTrace();"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

ネストされた Repeater コンポーネントの参照

<mx:Repeater> タグがネストされている場合、内側の <mx:Repeater> タグがインデックス付き Repeater コンポーネントとなります。例えば、次の MXML コードでは、ネストされている Repeater コンポーネントに r2[0]、r2[1]、... のようにアクセスします。子を参照するためのシンタックスは、親を参照する場合のシンタックスと同じです。

<?xml version="1.0"?>
<!-- repeater\RefNestedComponents.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 

  <mx:Script>
    <![CDATA[
    
      public function labelTrace():void {
        for (var i:int = 0; i < nameLabel.length; i++)
         for (var j:int = 0; j < nameLabel[i].length; j++)
          trace(nameLabel[i][j].text);
      }
    ]]>
  </mx:Script>

  <mx:Model id="data">
    <color>
      <colorName>Red</colorName>
      <colorName>Yellow</colorName>
      <colorName>Blue</colorName>
    </color>
  </mx:Model>

  <mx:Model id="catalog" source="../assets/repeater/catalog.xml"/>
  <mx:ArrayCollection id="myAC1" source="{catalog.product}"/>
  <mx:ArrayCollection id="myAC2" source="{data.colorName}"/>

  <mx:Label id="title" text="Products:"/>

  <mx:Repeater id="r" dataProvider="{myAC1}" startingIndex="1">
    <mx:Repeater id="r2" dataProvider="{myAC2}">
      <mx:Label id="nameLabel" text="{r2.currentItem}
          {r.currentItem.name}: ${r.currentItem.price}" width="200"/>
    </mx:Repeater>
  </mx:Repeater>

  <mx:Button label="Trace" click="labelTrace();"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

このアプリケーションでは、ユーザーが Button コントロールをクリックすると、色および価格と共に製品の一覧がシステムログに書き込まれ（mm.cfg ファイルでそのように定義している場合）、次のように画面に表示されます。

前に示した例では、Label コントロールのインスタンスは、複数の Repeater コンポーネント内に存在するので、複数のインデックスが付けられています。例えば、インデックス nameLabel[1][2] は、r の 2 回目の繰り返しおよび r2 の 3 回目の繰り返しによって生成された Label コントロールへの参照を含みます。

Repeater コンポーネントのイベントハンドラ

Repeater コンポーネントの繰り返しが行われているとき、作成された繰り返しオブジェクトは、Repeater コンポーネントのその時点の currentItem プロパティにバインドできます。このプロパティは、Repeater コンポーネントの繰り返しと共に変化します。イベントハンドラ内ではバインディング式を使用できず、繰り返されるコンポーネントのすべてのインスタンスは同じイベントハンドラを共有する必要があるので、click="doSomething({r.currentItem})" のようなコードを書いて、それぞれのインスタンスに独自のイベントハンドラを持たせることはできません。

繰り返されるコンポーネントおよび繰り返される Repeater コンポーネントは、getRepeaterItem() メソッドを持ちます。このメソッドは、オブジェクトを生成するために使用された dataProvider プロパティ内のアイテムを返します。Repeater コンポーネントの繰り返しが完了すると、getRepeaterItem() メソッドを使用して、currentItem プロパティに基づいてイベントハンドラが行うべき処理を判定できます。そのためには、event.currentTarget.getRepeaterItem() メソッドをイベントハンドラに渡します。getRepeaterItem() メソッドは、オプションのインデックスを受け取ります。このインデックスは、ネストされている Repeater コンポーネントがある場合に、どの Repeater コンポーネントを使用するかを指定します。インデックス 0 は、最も外側の Repeater コンポーネントです。インデックスの引数を指定しない場合は、最も内側の Repeater コンポーネントが暗黙的に指定されます。

次は、getRepeaterItem() メソッドの使用例です。ユーザーが個々の繰り返された Button コントロールをクリックすると、それに対応するデータモデルの colorName 値が Button コントロールのラベルに表示されます。

<?xml version="1.0"?> 
<!-- repeater\GetItem.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

  <mx:Script> 
    <![CDATA[
      public function clicker(cName:String):void { 
         foolabel.text=cName; 
       }  
    ]]>
  </mx:Script> 

  <mx:Label id="foolabel" text="foo"></mx:Label> 
 
  <mx:Model id="data"> 
    <color>
      <colorName>Red</colorName> 
      <colorName>Yellow</colorName> 
      <colorName>Blue</colorName>
    </color>
  </mx:Model> 
  <mx:ArrayCollection id="myAC" source="{data.colorName}"/>

  <mx:Repeater id="myrep" dataProvider="{myAC}"> 
    <mx:Button click="clicker(event.currentTarget.getRepeaterItem());"
      label="{myrep.currentItem}"/> 
  </mx:Repeater> 
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

ユーザーが「Yellow」ボタンをクリックすると次のような画面が表示されます。

次の例のコードでは、getRepeaterItem() メソッドを使用して、ユーザーによってクリックされた各 Button コントロールの特定の URL を表示します。イベントハンドラ内ではバインディング式を使用できないので、Button コントロールは共通のデータ駆動型クリックハンドラを共有する必要があります。ただし、getRepeaterItem() メソッドを使用すると、各 Button コントロールの機能を変更できます。

<?xml version="1.0"?>
<!-- repeater\DisplayURL.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

  <mx:Script>
    <![CDATA[
      [Bindable]
      public var dp:Array = [ { label: "Flex",
        url: "http://www.adobe.com/flex" },
        { label: "Flash", url: "http://www.adobe.com/flash" } ];
    ]]>
  </mx:Script>

  <mx:ArrayCollection id="myAC" source="{dp}"/>
  <mx:Repeater id="r" dataProvider="{myAC}">
    <mx:Button label="{r.currentItem.label}" 
       click="navigateToURL(
        new URLRequest(event.currentTarget.getRepeaterItem().url), '_blank');"/>
  </mx:Repeater>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

実行すると、「Flex」と「Adobe® Flash®」の 2 つのボタンが表示されます。いずれかのボタンをクリックすると、選択した方の製品ページがブラウザの新しいウィンドウに表示されます。

繰り返されるコンポーネントの特定のインスタンスへのアクセス

繰り返されるコンポーネントおよび繰り返される Repeater コンポーネントは、3 つのプロパティを持ちます。これらのプロパティを使用することによって、繰り返されるオブジェクトの特定のインスタンスを動的に追跡したり、どの Repeater コンポーネントによってオブジェクトのインスタンスが生成されたかを調べたり、それぞれの Repeater コンポーネントによってどの dataProvider アイテムが使用されたかを調べることができます。これらのプロパティについて次の表で説明します。

次に示すサンプルアプリケーションでは、repeaters プロパティを使用して、外側と内側の Repeater コンポーネントの各インデックス値のラベルがついた Button コントロールのいずれか 1 つをユーザーがクリックしたときに、Alert コントロールに Repeater コンポーネントの id 値を表示します。repeaters プロパティを使用して、内側の Repeater コンポーネントの id 値を取得しています。

<?xml version="1.0"?>
<!-- repeater\RepeatersProp.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 

  <mx:Script>
    <![CDATA[
      import mx.controls.Alert;
      [Bindable]
      public var myArray:Array=[1,2];
    ]]>
  </mx:Script>

  <mx:ArrayCollection id="myAC" source="{myArray}"/>
  <mx:Repeater  id="repeater1" dataProvider="{myAC}">
    <mx:Repeater  id="repeater2" dataProvider="{myAC}">
      <mx:Button
        label="[{repeater1.currentIndex},{repeater2.currentIndex}]"
        click="Alert.show(event.target.repeaters[1].id);"/>
    </mx:Repeater>
  </mx:Repeater>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

前の例では、ユーザーが 3 つ目のボタンをクリックすると次の結果が生成されます。

次に示すサンプルアプリケーションでは、繰り返される Button および TextInput コントロールのセット内の対応する Button コントロールがユーザーによってクリックされたときに、instanceIndices プロパティを使用して、TextInput コントロールの text プロパティを設定します。この場合、適切なオブジェクトを動的に取得する必要があるので、instanceIndices プロパティを使用する必要があります。id 値を使用してオブジェクトを取得することはできません。

次の例に、Button コントロールがユーザーによってクリックされたときに instanceIndices プロパティを使用して TextInput コントロールの text プロパティを設定する方法を示します。パラメータ event.target.instanceIndices は、対応する TextInput コントロールのインデックスを取得します。

<?xml version="1.0"?>
<!-- repeater\InstanceIndicesProp.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

  <mx:Script>
    <![CDATA[
      [Bindable]
      public var myArray:Array=[1,2,3,4,5,6,7,8];
    ]]>
  </mx:Script>

  <mx:ArrayCollection id="myAC" source="{myArray}"/>
  <mx:Repeater id="list" dataProvider="{myAC}" count="4" startingIndex="2">
    <mx:HBox>
      <mx:Button label="Click Me"
        click="myText[event.target.instanceIndices].text=
        event.target.instanceIndices.toString();"/>
      <mx:TextInput id="myText"/>
    </mx:HBox>
  </mx:Repeater>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、ユーザーが 2 つ目と 4 つ目のボタンをクリックすると次のようになります。

次の例では、ユーザーが Button コントロールをクリックしたときに、instanceIndices プロパティの代わりに repeaterIndices プロパティを使用して TextInput コントロールの text プロパティを設定する方法を示します。event.target.repeaterIndices の値は、Repeater コンポーネントの現在のインデックスに基づいています。Repeater コンポーネントの startingIndex プロパティは 2 に設定されるので、常に 0 から始まる event.target.instanceIndices 値には一致しません。

<?xml version="1.0"?>
<!-- repeater\RepeaterIndicesProp.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 

  <mx:Script>
    <![CDATA[
      [Bindable]
      public var myArray:Array = [1,2,3,4,5,6,7,8];
    ]]>
  </mx:Script>

  <mx:Repeater id="list" dataProvider="{myArray}" 
    startingIndex="2" count="4">
  <mx:HBox>
    <mx:Button id="b" label="Click Me"
      click="myText[event.target.repeaterIndices-list.startingIndex].text=
        event.target.repeaterIndices.toString();"/>
      <mx:TextInput id="myText"/>
    </mx:HBox>
  </mx:Repeater>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この場合、ボタンをクリックすると、ループの現在の繰り返しではなく、データプロバイダの現在のエレメントがプリントされます。

いずれの場合も、ユーザーが 2 つ目と 4 つ目のボタンをクリックすると次のようになります。

カスタム MXML コンポーネント内での Repeater コンポーネントの使用

<mx:Repeater> タグは、アプリケーションファイル内で使用するのと同じ方法で、MXML コンポーネント定義内で使用できます。この MXML コンポーネントを他の MXML ファイル内でタグとして使用すると、繰り返されたアイテムが表示されます。個々の繰り返しアイテムには、アイテムの配列インデックス番号を使ってアクセスできます。これは、アプリケーションファイル内に定義された繰り返しアイテムに対するアクセス方法と同じです。

次の例では、childComp という名前の MXML コンポーネント内の Button コントロールが、dp という名前の Array オブジェクトのすべてのエレメントに対して繰り返されます。

<?xml version="1.0"?>
<!-- repeater\myComponents\CustButton.mxml -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">

  <mx:Script>
    <![CDATA[
      [Bindable]
      public var dp:Array=[1,2,3,4];
    ]]>
  </mx:Script>

  <mx:ArrayCollection id="myAC" source="{dp}"/>
    
  <mx:Repeater id="r" dataProvider="{myAC}">
    <mx:Button id="repbutton" label="button {r.currentItem}"/>
  </mx:Repeater>
</mx:VBox>

次の例のアプリケーションファイルでは、childComp コンポーネントを使用して、配列内の各エレメントに対して 1 つずつ、合計 4 つの Button コントロールを表示します。getLabelRep() 関数は、配列の 2 番目の Button のラベルテキストを表示します。

<?xml version="1.0"?>
<!-- repeater\RepeatCustButton.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComp="myComponents.*">

  <mx:Script>
    <![CDATA[
      import mx.controls.Alert;
      public function getLabelRep():void {
        Alert.show(comp.repbutton[1].label);
      }
    ]]>
  </mx:Script>
    
  <MyComp:CustButton id="comp"/>

  <mx:Button label="Get label of Repeated element" width="200"
    click="getLabelRep();"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

前の例では、ユーザーが最後のボタンをクリックすると次の出力が生成されます。

データ型に基づくコンポーネントの動的な作成

Repeater コンポーネントを使用すると、データのセット内の特定のアイテムに対して、異なる型のコンポーネントを動的に作成できます。Repeater コンポーネントは、実行時に repeat イベントをブロードキャストします。さらに、このイベントは、currentIndex プロパティと currentItem プロパティが設定された後にブロードキャストされます。このとき、repeat イベントのイベントハンドラ関数を呼び出すことによって、それぞれのデータアイテムに基づいて異なる型のコンポーネントを動的に作成できます。

Repeater コンポーネントの実行

Repeater コンポーネントは、インスタンス化されたときに最初に実行されます。Repeater コンポーネントに dataProvider プロパティが存在する場合は、子、子の子というように再帰的にインスタンス化が行われます。

Repeater コンポーネントは、dataProvider、startingIndex、または count の各プロパティが ActionScript 内で明示的に設定または変更されたとき、あるいはデータバインディングによって暗黙的に設定されたときに、再び実行されます。dataProvider プロパティが Web サービスの結果にバインドされている場合、Repeater コンポーネントは Web サービスから結果が返されたときに再び実行されます。また、Repeater コンポーネントは、startingIndex 値を徐々に増加させて dataProvider プロパティを変化させたときにも実行されます。次に例を示します。

r.startingIndex += r.count;

Repeater コンポーネントが再実行されると、以前に作成された子がすべて破棄された後（recycleChildren プロパティが false に設定されている場合）、現在の dataProvider プロパティに基づいて子が再インスタンス化されます。このとき、コンテナ内の子の数が変更される場合があります。その場合、変更された子の数に合わせて、コンテナのレイアウトも変更されます。

Repeater コンポーネント内での子の再作成

recycleChildren プロパティは、Repeater コンポーネントが再実行されたときに、Repeater コンポーネントの子を再作成するかどうかを制御します。recycleChildren プロパティを false に設定すると、dataProvider を入れ替えたとき、または並べ替えたときに、Repeater コンポーネントがすべてのオブジェクトを再作成するので、パフォーマンスが低下します。dataProvider を変更しても Repeater コンポーネントの子が再作成されないことが確実な場合のみ、このプロパティを true に設定してください。

繰り返されるインスタンスに古い状態情報が保持されないよう、recycleChildren プロパティのデフォルトの値は false です。例えば、Repeater コンポーネントを使用して写真イメージを表示するとします。それぞれの Image コントロールには、プリントの注文枚数を示す NumericStepper コントロールが関連付けられているとします。ここで、状態情報には、dataProvider から渡されるもの（イメージなど）と、ユーザーの操作によって設定されるもの（印刷枚数など）があります。recycleChildren プロパティを true に設定し、Repeater コンポーネントの startingIndex 値を徐々に増加させて写真間を移動すると、それに応じて Image コントロールが新しいイメージにバインドされますが、NumericStepper コントロールは古い情報を保持したままになります。