css,javascript,actionscriptを中心に勉強したことをまとめるブログ

以前から謎だったArrayとArrayCollectionの違いについて調べてみます。
違いというかArrayCollectionって何っていう感じでしょうか。
これはXMLListCollectionにも言えますが。

コレクションについて

あえず、ArrayCollectionやXMLListCollectionってなんだろうということですが、Flexのヘルプに書かれていました。

コレクションは、Array や XMLList オブジェクトなどのデータソースオブジェクトに格納されたデータにアクセスしたり、このようなデータを表現したりするための一貫した方法を提供するオブジェクトです。コレクションにより、Flex コンポーネントと、そのコンポーネントの生成に使用するデータオブジェクトのと間に抽象レベルが提供されます。

ということみたいです。
ArrayやXMLListというのは通常のデータ（元となるデータ）。で、コレクションっていうのはそのデータのラッパーオブジェクトっていうことですね。
元データ色々な機能を追加したオブジェクトっていうことでしょうか。
追加される機能としては、以下のものになります。

• 生データソースにより提供される処理から独立した一貫したデータ処理セットを提供します。
• 基になるデータが変化したときに、コンポーネントが適切に更新されます。
• リモートデータソースから到達するページングデータを処理するためのメカニズムを提供します。
• ソートしたデータや開発者の提供するメソッドによってフィルタしたデータを表す具体的な「ビュー」を提供します。
• 1 つのコレクションを使用して、同じデータソースから複数のコンポーネントにデータを格納できます。
• コレクションを使用することで、コンポーネントのデータソースを実行時に切り替えることができます。また、データソースの内容を変更して、そのデータソースを使用するすべてのコンポーネントに変更を反映することもできます。
• コレクションのメソッドを使用して、基になるデータソース内のデータにアクセスできます。

（ヘルプより抜粋）
いろいろな機能がありますね。
その中でも重要な点をピックアップしました

基になるデータが変化したとき、コンポーネントが適切に更新される

ここが実は重要で、DataGrid等のデータにArrayやXMLListを使わないほうが良い理由でもあります。

まず、ArrayCollectionを使用した場合。
ArrayCollectionが持っている要素の追加・削除メソッドを使ってコレクションを変更できます。
そして、DataGridもあわせて変化します。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()" pageTitle="要素の追加・削除：コレクション">
<mx:Script>
<![CDATA[
    import mx.collections.*;
    import mx.controls.Alert;
    // 元となるデータを作成
    private var def_array:Array = [
        {name:'suzuki',money:500,number:1},
        {name:'sato',money:300,number:2}
    ];

    // データをバインドさせる
    [Bindable]
    public var data_array:ArrayCollection;

    // ArrayCollectionを作成する
    public function init():void{
        data_array = new ArrayCollection(def_array);
    }

    private function btn_click_add():void{
        data_array.addItemAt({name:'suzuki',money:500,number:1},1);
    }
    private function btn_click_remove():void{
        if(dg.selectedIndex >= 0){
            data_array.removeItemAt(dg.selectedIndex);
        }
    }
    ]]>
</mx:Script>
<mx:DataGrid dataProvider="{data_array}" id="dg">
        <mx:columns>
            <mx:DataGridColumn dataField="name" headerText="名前" />
            <mx:DataGridColumn dataField="money" headerText="金額" />
            <mx:DataGridColumn dataField="number" headerText="番号" />
        </mx:columns>
    </mx:DataGrid>
<mx:Button label="要素の追加" click="btn_click_add()" />
<mx:Button label="要素の削除" click="btn_click_remove()" />
</mx:Application>

同じことをArrayでやろうとする。
Arrayにももちろん要素の追加や削除メソッドがあります。
しかし、そのメソッドを使用してもDataGridが変化することはありません。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()" pageTitle="要素の追加・削除：コレクション">
<mx:Script>
<![CDATA[
    import mx.collections.*;
    import mx.controls.Alert;
    // 元となるデータを作成
    [Bindable]
    private var def_array:Array = [
        {name:'suzuki',money:500,number:1},
        {name:'sato',money:300,number:2}
    ];

    private function btn_click_add():void{
        def_array.push( { name:'suzuki', money:500, number:1 } );
    }
    private function btn_click_remove():void{
        if(dg.selectedIndex >= 0){
            def_array.splice(dg.selectedIndex);
        }
    }
    ]]>
</mx:Script>
<mx:DataGrid dataProvider="{def_array}" id="dg">
        <mx:columns>
            <mx:DataGridColumn dataField="name" headerText="名前" />
            <mx:DataGridColumn dataField="money" headerText="金額" />
            <mx:DataGridColumn dataField="number" headerText="番号" />
        </mx:columns>
    </mx:DataGrid>
<mx:Button label="要素の追加" click="btn_click_add()" />
<mx:Button label="要素の削除" click="btn_click_remove()" />
</mx:Application>

自動的に反映はしてくれないんですね。
ここがArrayCollectionやXMLListCollectionを使う理由のひとつになりそうです。

ただ、DataGridはArrayを読み込んだ時点で自動的にArrayCollectionを生成します。
ですので、読み込んだデータがArrayでも生成されたArrayCollectionを操作することで、同じような効果を出すことができます。
生成されたArrayCollectionはdataProviderを通して操作します。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()" pageTitle="要素の追加・削除：コレクション">
<mx:Script>
<![CDATA[
    import mx.collections.*;
    import mx.controls.Alert;
    // 元となるデータを作成
    [Bindable]
    private var def_array:Array = [
        {name:'suzuki',money:500,number:1},
        {name:'sato',money:300,number:2}
    ];

    private function btn_click_add():void{
        dg.dataProvider.addItemAt({name:'suzuki',money:500,number:1},1);
    }
    private function btn_click_remove():void{
        if(dg.selectedIndex >= 0){
            dg.dataProvider.removeItemAt(dg.selectedIndex);
        }
    }
    ]]>
</mx:Script>
<mx:DataGrid dataProvider="{def_array}" id="dg">
        <mx:columns>
            <mx:DataGridColumn dataField="name" headerText="名前" />
            <mx:DataGridColumn dataField="money" headerText="金額" />
            <mx:DataGridColumn dataField="number" headerText="番号" />
        </mx:columns>
    </mx:DataGrid>
<mx:Button label="要素の追加" click="btn_click_add()" />
<mx:Button label="要素の削除" click="btn_click_remove()" />
</mx:Application>

まとめ

他にも便利な機能がいろいろあるようです。
その機能を使えるようにするためにコレクションを有効活用しましょう。