| Flex 2 開発ガイド > Flex アプリケーションのユーザーインターフェイスの作成 > データプロバイダおよびコレクションの使用 > ICollectionView インターフェイスのメソッドとプロパティの使用 | |||
ICollectionView インターフェイスは、基になるデータソースの "ビュー" をアイテムのコレクションとして表します。このインターフェイスの主な機能は次のとおりです。
ICollectionView インターフェイスのメソッドとプロパティは、次のクラスまたはプロパティで直接使用できます。
dataProvider プロパティ以降のセクションでは、リストコレクションを使用した基本的な ICollectionView の処理について説明しますが、階層コレクションについても同様の処理を適用できる場合があります。
ICollectionView インターフェイスを使用して、データプロバイダ内のデータのソートとフィルタを実行できます。こうすると、コレクションによって表されるビューが、基になるデータの並べ替えられたサブセットになります。この操作はデータプロバイダの内容には影響を与えず、コレクションビューで表されるサブセットのみを変更します。これは結果的に、コレクションを使用するコントロールの表示を変更することになります。
Sort クラスを使用すると、コレクション内のデータをソートできます。データのソートで使用する複数のフィールド、ソート結果の重複の除去、およびソートの順序付けに使用するカスタム比較関数を指定できます。また、Sort クラスを使用してコレクション内のアイテムを検索することもできます。Sort クラスを作成したとき、またはそのプロパティを変更したときは、結果を表示するコレクションに対して refresh() メソッドを呼び出す必要があります。
SortField クラスは、ソートで使用するフィールドを指定するために使用します。SortField オブジェクトを作成し、それを Sort クラスオブジェクトの fields 配列に設定します。
次の例は、コレクションをソートする関数を示します。この例の myAC は、ラベルフィールドと名前フィールドを含むオブジェクトの Array のコレクションビューです。第 1 ソートフィールドは area フィールドで、大文字と小文字を区別しない降順ソートを指定し、第 2 ソートフィールドは label フィールドで、大文字と小文字を区別した昇順ソートを指定しています。このコードは、コレクションを特定の順序でソートして表示するコントロールの initialize イベントハンドラとして呼び出すことができます。
// ICollectionView を降順にソートする
public function sortAC():void {
// ソートオブジェクトを作成する
var sortA:Sort = new Sort();
// area フィールドでソートしてから、label フィールドでソートする
// 2 番目のパラメータは、大文字と小文字を区別せずにソートすることを指定する
// 3 番目のパラメータ (true) は、降順ソートを指定する
sortA.fields=[new SortField("area", true, true),
new SortField("label")];
myAC.sort=sortA;
// コレクションビューを更新してソート結果を表示する
myAC.refresh();
}
フィルタ関数は、ICollection ビューをデータプロバイダソースのサブセットに制限する場合に使用します。この関数は、コレクションのアイテムに対応する Object パラメータを 1 つ受け取り、コレクションビューにそのアイテムを含めるかどうかを指定する Boolean 値を返す必要があります。ソートと同様、フィルタ関数を指定または変更したときは、フィルタ結果を表示するコレクションに対して refresh() メソッドを呼び出す必要があります。たとえば、ストリング配列のコレクションビューの内容を M で始まるストリングのみに制限するには、次のフィルタ関数を使用します。
public function stateFilterFunc(item:Object):Boolean
{
return item >= "M" && item < "N";
}
次の例は、フィルタ関数とソートの使用方法を示します。ボタンを使用して、コレクションのソート、フィルタ、またはその両方を実行できます。[Reset] ボタンを使用すると、コレクションビューが元の状態に戻ります。
<?xml version="1.0"?>
<!-- dpcontrols\SortFilterArrayCollection.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="600">
<mx:Script>
<![CDATA[
import mx.collections.*;
// Function to sort the ICollectionView
// in ascending order.
public function sortAC():void {
var sortA:Sort = new Sort();
sortA.fields=[new SortField("label")];
myAC.sort=sortA;
//Refresh the collection view to show the sort.
myAC.refresh();
}
// Function to filter out all items with labels
// that are not in the range of M-N.
public function stateFilterFunc(item:Object):Boolean {
return item.label >= "M" && item.label < "O";
}
// Function to apply the filter function the ICollectionView.
public function filterAC():void {
myAC.filterFunction=stateFilterFunc;
//Refresh the collection view to apply the filter.
myAC.refresh();
}
// Function to Reset the view to its original state.
public function resetAC():void {
myAC.filterFunction=null;
myAC.sort=null;
//Refresh the collection view.
myAC.refresh();
}
]]>
</mx:Script>
<!-- An ArrayCollection with an array of objects. -->
<mx:ArrayCollection id="myAC">
<mx:Array id="myArray">
<mx:Object label="LA" data="Baton Rouge"/>
<mx:Object label="NH" data="Concord"/>
<mx:Object label="TX" data="Austin"/>
<mx:Object label="MA" data="Boston"/>
<mx:Object label="AZ" data="Phoenix"/>
<mx:Object label="OR" data="Salem"/>
<mx:Object label="FL" data="Tallahassee"/>
<mx:Object label="MN" data="Saint Paul"/>
<mx:Object label="NY" data="Albany"/>
</mx:Array>
</mx:ArrayCollection>
<!-- Buttons to filter, sort, or reset the view in the second ComboBox
control. -->
<mx:HBox width="100%">
<mx:Button id="sortButton" label="Sort" click="sortAC();"/>
<mx:Button id="filterButton" label="Filter" click="filterAC();"/>
<mx:Button id="resetButton" label="Reset" click="resetAC();"/>
</mx:HBox>
<mx:HBox width="100%">
<!-- A ComboBox populated by the underlying Array object.
This control shows that Array retains its original order. -->
<mx:ComboBox id="cb2" rowCount="10" dataProvider="{myArray}"/>
<!-- A ComboBox populated by the collection view of the Array. -->
<mx:ComboBox id="cb1" rowCount="10" dataProvider="{myAC}"/>
</mx:HBox>
</mx:Application>
もっと複雑な、DataGrid コントロールをソートする例については、例 : DataGrid の複数列のソートを参照してください。この例では、データの初期ソートを行い、列見出しをクリックしたときにカスタムソートを実行します。
Flex 2.01