Flex は、アイテムのリストの表示に使用できるいくつかのコントロールをサポートしています。これらのコントロールを使用すると、アイテムリストをスクロールし、リストからアイテムを選択できるようになります。Flex リストコンポーネントはすべて ListBase クラスから派生したもので、次のようなコントロールがあります。

• DataGrid
• HorizontalList
• List
• Menu
• MenuBar
• TileList
• Tree

List コントロールは、データプロバイダからデータを取得します。「データプロバイダ」とは、Array または XMLList オブジェクトなどのデータオブジェクトを含むコレクションです。例えば、Tree コントロールはデータプロバイダからデータを読み取ることにより、ツリー構造と各ツリーノードに割り当てられた関連データを定義します。「コレクション」とは、データオブジェクト内のデータアイテムのアクセス、ソート、フィルタおよび変更を行うための一連のメソッドを含むオブジェクトです。Array ベースおよび XMLList ベースのデータを操作するための標準のコレクション型は、それぞれ ArrayCollection および XMLListCollection クラスです。

コレクションでは、Flex コンポーネントとそこに格納されるデータとの間で一定レベルの抽象関係が作成されます。同じコレクションから複数のコンポーネントを読み込み、コンポーネントが実行時にデータプロバイダとして使用するコレクションを切り替えるか、コレクションをデータプロバイダとして使用するすべてのコンポーネントで、変更内容が反映されるようにコレクションを変更することができます。

データプロバイダをモデルとすれば、Flex コンポーネントはそのモデルのビューと考えることができます。モデルとビューを分離することにより、変更が生じたときに両方を修正するのではなく、どちらか一方だけを修正するだけで済むというメリットが生まれます。それぞれのリストコントロールにはデータの表示を制御するデフォルトのメカニズム（ビュー）があり、そのデフォルトはオーバーライドできます。デフォルトビューをオーバーライドするには、カスタム「アイテムレンダラー」を作成します。

アイテムレンダラーを使用してデータ表示を制御する以外に、DataGrid、List、Tree の各コントロールでも、ユーザーにデータを編集させることができます。例えば、DataGrid コントロールの Quantity 列をショッピングカートに使用している場合、ユーザーにこの列を更新させることができます。データ表示と同様に、リストコントロールには、ユーザーのデータ編集を可能にするデフォルトメカニズムがあり、このメカニズムはカスタム「アイテムエディタ」を作成するとオーバーライドできます。

デフォルトのアイテムレンダリングとセル編集

それぞれのリストベースのコントロールには、そのコントロールのために定義されたデフォルトのアイテムレンダラーがあります。最も単純なアイテムレンダラーは DataGridItemRenderer クラスで、DataGrid コントロールのアイテムレンダラーを定義します。このアイテムレンダラーでは、データプロバイダの各エレメントはテキストストリングであると見なされます。

その他のアイテムレンダラーには、ListItemRenderer、MenuItemRenderer、MenuBarItem、TileListItemRenderer、TreeItemRenderer などがあります。デフォルトでは、これらのアイテムレンダラーはイメージをテキストに組み合わせます。

例えば、次の図はデフォルトのアイテムレンダラーを使用して 3 つのアイテムを表示する List コントロールを示しています。

この例では、List コントロールはデフォルトのアイテムレンダラーを使用して、アラスカ、アラバマおよびアーカンソーの郵便番号を示す 3 つのストリングを表示しています。この List コントロールを作成するには、次のコードを使用します。

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

    <mx:List width="50" height ="75"> 
        <mx:dataProvider>
            <mx:String>AK</mx:String>
            <mx:String>AL</mx:String>
            <mx:String>AR</mx:String>
        </mx:dataProvider>
    </mx:List>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例で使用されるデータはインライン静的データなので、ArrayCollection インスタンス内に明示的にラップする必要はありません。ただし、変化することがあるデータを扱う場合は、常にコレクションを明示的に指定するようにするのが適切です。詳しくは、データプロバイダおよびコレクションの使用を参照してください。

次の例では、DataGrid コントロールのデータプロバイダに、アーチスト、アルバム名および価格を表示するフィールドが含まれています。これらの各フィールドは、データをテキストとして表示するデフォルトのアイテムレンダラーを使用して、DataGrid コントロールに表示されています。

次のコードを使用すると、前の図に示した例が作成されます。

<?xml version="1.0"?>
<!-- itemRenderers\dataGrid\DGDefaultRenderer.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
    
    <mx:Script>
        <![CDATA[
          import mx.collections.ArrayCollection;
        
          [Bindable]
          private var initDG:ArrayCollection = new ArrayCollection([
            {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
            {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99}
          ]);            
        ]]>
    </mx:Script>

    <mx:Panel paddingTop="10" paddingBottom="10" 
        paddingLeft="10" paddingRight="10">

        <mx:DataGrid id="myGrid" dataProvider="{initDG}" 
            width="100%" editable="true"> 
            <mx:columns>
                <mx:DataGridColumn dataField="Artist" resizable="true"/>
                <mx:DataGridColumn dataField="Album" resizable="true"/>
                <mx:DataGridColumn dataField="Price" resizable="true"/>
            </mx:columns>       
        </mx:DataGrid>  
    </mx:Panel>    
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

編集可能なコンポーネントを使用すると、リストコントロールのデータを変更して、その変更内容を、コントロールの基になるデータプロバイダに戻せます。DataGrid、List、Tree の各コントロールには、editable という名前のプロパティがあり、このプロパティが true に設定されている場合、セルの内容を編集できます。デフォルトでは、リストコントロールは TextInput コントロールをアイテムエディタとして使用します。つまりリストコントロールでセルを選択すると、次の図のように、セルの現在の内容を含む TextInput コントロールが自動的に開き、内容を編集できるようになります。

この図では、デフォルトのアイテムエディタを使用して、DataGrid コントロールの最初のアルバムの価格を編集しています。

アイテムエディタについて詳しくは、アイテムエディタの操作を参照してください。

カスタムアイテムレンダラーとカスタムアイテムエディタの使用

リストコンポーネントの表示を制御するには、カスタムアイテムレンダラーまたはカスタムアイテムエディタを作成します。カスタムアイテムレンダラーとカスタムアイテムエディタでもリストコントロールの基になる機能を使用しますが、この 2 つを使用すると、データの表示と編集を制御できるようになります。カスタムアイテムレンダーとカスタムアイテムエディタには、次のようないくつかの利点があります。

• テキストの表示をユーザーによりわかりやすい外観に変えることで、さらに効果的なユーザーインターフェイスを作成できます。
• 複数のエレメントを、ラベルやイメージなどの 1 つのリストアイテムに組み込めます。
• データの表示をプログラムで制御できます。

次の List コントロールは、デフォルトのアイテムレンダリングとセル編集で説明している List コントロールを変更したものです。この例では、カスタムアイテムレンダラーを使用して、州名、州都および各州の公式ウェブサイトの URL をそれぞれのリストアイテムに表示しています。

この例のコードについては、例：アイテムレンダラーを List コントロールと共に使用するを参照してください。

次の図では、DataGrid コントロールの最初と 3 番目の列にデフォルトのアイテムレンダラーを使用しています。また、2 番目の列にはカスタムアイテムレンダラーを使用して、DataGrid コントロールにアルバムカバーとアルバムタイトルを表示しています。

この例のコードについては、複雑なインラインアイテムレンダラーまたはインラインアイテムエディタの作成を参照してください。

カスタムアイテムレンダラーを定義してセルの表示を制御できるのと同じように、カスタムアイテムエディタを使用してセルの内容を編集できます。例えば、カスタムアイテムレンダラーでイメージを表示する場合、ComboBox コントロールを使用するカスタムアイテムエディタを定義して、使用可能なイメージのリストからユーザーにイメージを選択させることができます。または、次に示す例の右側のように、CheckBox コントロールを使用して、セルの true または false の値をユーザーに設定させることもできます。

この例のコードについては、単純なアイテムエディタコンポーネントの作成を参照してください。

アイテムレンダラーを使用していても、そのコントロールにアイテムエディタが存在しないこともあります。多くの場合、コントロールは表示専用で、編集できません。

また、対応するアイテムレンダラーを使用せずに、アイテムエディタを使用することもできます。例えば、デフォルトのアイテムレンダラーを使用して、男性や女性または true や false などの情報をテキストとして表示できます。ただし、その後でカスタムアイテムエディタを ComboBox コントロールと共に使用し、値の変更時にセルに入力できる値の選択肢を表示することができます。

アイテムレンダラーとアイテムエディタのアーキテクチャ

アイテムレンダラーまたはアイテムエディタでリストコントロールの内容を正しく処理するため、リストコントロールからアイテムレンダラーまたはアイテムエディタに情報を渡せるようにする必要があります。また、アイテムエディタからリストコントロールに更新された情報を戻せるようにします。

次の図は、リストコントロールとアイテムレンダラーまたはアイテムエディタとの関係を示しています。

アイテムレンダラーまたはアイテムエディタに情報を渡すために、Flex では、アイテムレンダラーまたはアイテムエディタの data プロパティにセルデータが設定されます。前の図に、アイテムレンダラーまたはアイテムエディタにデータを渡すために使用されている data プロパティが示されています。

デフォルトでは、アイテムエディタからリストコントロールに戻せる値は、編集されたセルの新しい値になる 1 つだけです。複数の値を戻すには、リストコントロールにデータを戻す追加のコードを作成する必要があります。詳しくは、例：アイテムエディタからの複数の値の取得を参照してください。

アイテムレンダラーまたはアイテムエディタで使用する Flex コンポーネントのうち、リストコントロールのセルデータにアクセスする必要があるものには、IDataRenderer インターフェイスを実装し、data プロパティをサポートする必要があります。リストコントロールから渡されたデータにアクセスする必要がなければ、data プロパティをサポートしないコンポーネントでも、アイテムレンダラーで使用できます。

data プロパティの内容は、次の表に示すようにコントロールのタイプによって異なります。

アイテムエディタについて詳しくは、アイテムエディタの操作を参照してください。

アイテムレンダラーとアイテムエディタのインターフェイスについて

Flex のアイテムレンダラーとアイテムエディタのアーキテクチャは、複数のインターフェイスによって定義されます。アイテムレンダラーやアイテムエディタとして使用できる Flex コンポーネントは、これらのインターフェイスを実装します。独自のカスタムコンポーネントを作成して、アイテムレンダラーまたはアイテムエディタとして使用する場合は、使用目的に応じて、これらのインターフェイスをコンポーネントに実装する必要があります。

次の表で、アイテムレンダラーとアイテムエディタで使用するインターフェイスについて説明します。

アイテムレンダラーとアイテムエディタを使用したアプリケーションレイアウト

TileList コントロールと HorizontalList コントロールを除くすべてのリストコントロールは、そのコンテンツのデフォルトの高さと幅を計算する際に、アイテムレンダラーを無視します。デフォルトでは、アイテムレンダラーは、コントロールの幅の長さいっぱい、または DataGrid コントロールの列の幅の長さにサイズ変更されます。そのため、デフォルト以外のサイズを必要とするカスタムアイテムレンダラーを定義する場合は、コントロールのサイズを明示的に指定する必要があります。

List コントロールや Tree コントロールなどの垂直方向のコントロールは、rowHeight プロパティを使用してデフォルトのセルの高さを決定します。行ごとに高さが異なる場合は、variableRowHeight プロパティを true に設定することもできます。この設定を行わないと、Flex によって各セルの高さが 20 ピクセルに設定されます。

HorizontalList コントロールの場合、columnWidth プロパティの値が指定されていれば、Flex はこの値を使用します。TileList コントロールの場合、Flex は columnWidth プロパティと rowHeight プロパティの値を使用します。これらのプロパティを省略すると、Flex はコントロールのデータプロバイダを調べ、アイテムレンダラーが指定されている場合はそのサイズも含めて、各セルのデフォルトのサイズを決定します。これ以外の場合、Flex は各セルの高さと幅を 50 ピクセルに設定します。