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

Flexで表組みを使用するには、DataGridを使用します。

基本的な記述

DataGridの基本的な記述方法です。

<mx:DataGrid>
    <mx:ArrayCollection>
        <mx:Object>
            <mx:name>suzuki</mx:name>
            <mx:money>500</mx:money>
            <mx:number>1</mx:number>
        </mx:Object>
        <mx:Object>
            <mx:name>sato</mx:name>
            <mx:money>300</mx:money>
            <mx:number>2</mx:number>
        </mx:Object>
    </mx:ArrayCollection>
</mx:DataGrid>

DataGridタグの中に表組みの元となるデータを記述します。
データはArrayCollectionタグで上記のように記述します。
Objectが一つの行になります。
この際、列の並びは記述順ではなく、アルファベット順になります。
見出しも、タグの名前が自動的に挿入されます。

Objectタグは属性値を使ってデータを指定することもできます。
こちらの記述のほうが短くなります。

<mx:DataGrid>
    <mx:ArrayCollection>
        <mx:Object name="suzuki" money="500" number="1" />
        <mx:Object name="sato" money="300" number="2" />
    </mx:ArrayCollection>
</mx:DataGrid>

列を指定する

列の見出しや順番を指定したい場合はDataGridColumnタグを使用します。
columnsタグ内でDataGridColumnを使用します。

<mx:DataGrid>
    <mx:ArrayCollection>
        <mx:Object name="suzuki" money="500" number="1" />
        <mx:Object name="sato" money="300" number="2" />
    </mx:ArrayCollection>
    <mx:columns>
        <mx:DataGridColumn dataField="name" headerText="名前" />
        <mx:DataGridColumn dataField="money" headerText="金額" />
        <mx:DataGridColumn dataField="number" headerText="番号" />
    </mx:columns>
</mx:DataGrid>

DataGridColumnのdataField属性に表示させたいタグ名を指定します。
DataGridColumnタグの順番で列が表示されます。
headerText属性には見出しとして表示させたいテキストを指定します。

DataGridColumnの属性値を変更することで、列を操作することができます。

DataGridColumn - Adobe Flex リファレンスガイド

データをバインドする

上記のようにDataGrid内ではなく、actionscript上のデータを使用することもできます。
DataGridとデータの記述を分離するわけですね。

■DataGrid側

DataGrid側では、受け取るデータをdataProvider属性値に指定しておきます。

<mx:DataGrid dataProvider="{data_array}">
    <mx:columns>
        <mx:DataGridColumn dataField="name" headerText="名前" />
        <mx:DataGridColumn dataField="money" headerText="金額" />
        <mx:DataGridColumn dataField="number" headerText="番号" />
    </mx:columns>
</mx:DataGrid>

■Script側

Script側では、dataProviderに指定されているデータ名のArrayCollectionを作成します。
作成したArrayCollectionはバインドさせるようにします。

<![CDATA[
    import mx.collections.*;
    // 元となるデータを作成
    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);
    }
]]>

まとめ

DataGridは比較的使用頻度が高いようですね。
データ元にはXMLも使えるようです。（詳しくはまた）
mxmlとデータをどのように分離するか等、いろんな形がありそうなのでその辺もちょっと探っていこうと思います。