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

DataGridのデータ元にXMLを使うこともできるようです。

DataGrid内に直接記述

DataGrid内に直接XMLを記述するには、dataProvider内にXMLListの形式で記述します。
※root要素がありませんので注意。

<mx:DataGrid width="100%">
    <mx:dataProvider>
        <mx:XMLList>
            <person>
                <name>suzuki</name>
                <money>500</money>
                <number>1</number>
            </person>
            <person>
                <name>sato</name>
                <money>300</money>
                <number>2</number>
            </person>
        </mx:XMLList>
    </mx:dataProvider>
    <mx:columns>
        <mx:DataGridColumn dataField="name" headerText="名前" />
        <mx:DataGridColumn dataField="money" headerText="金額" />
        <mx:DataGridColumn dataField="number" headerText="番号" />
    </mx:columns>
</mx:DataGrid>

XMLデータを記述する際には、XMLListとXMLListCollectionと2つのクラスが存在する。
ArrayとArrayCollectionのときのように、XMLListCollectionのほうが様々なメソッドが用意されているようなので、こちらを使用するのが良いらしい。

上記の場合、指定しているのはXMLListになる。
しかし、DataGridのdataProviderにセットした時点でどうやら自動的にXMLListCollectionに変換をするらしい。

同一ファイル内のXMLを使用する

上記のXMLListをDataGridから外に出し、id値をつける。
そのid値をDataGridのdataProviderにバインドさせる。

<mx:XMLList id="data_xml">
    <person>
        <name>suzuki</name>
        <money>500</money>
        <number>1</number>
    </person>
    <person>
        <name>sato</name>
        <money>300</money>
        <number>2</number>
    </person>
</mx:XMLList>

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

Script内で作成したXMLを使用する

actionscript内で生成したXMLを使用する場合は、XMLをXMLListCollectionに変換したものをバインドさせる。

■Script側

<mx:Script>
<![CDATA[

// XMLデータ
[Bindable]
private var def_xml:XML =
    <root>
        <person>
            <name>suzuki</name>
            <money>500</money>
            <number>1</number>
        </person>
        <person>
            <name>sato</name>
            <money>300</money>
            <number>2</number>
        </person>
    </root>;

// XMLListCollectionを作成する
[Bindable]
private var data_xml:XMLListCollection = new XMLListCollection(def_xml.person);

]]>
</mx:Script>

■mxml側

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

外部ファイルのXMLを使用する

外部のXMLファイルを読み込む。

1. HTTPServiceタグで読み込むXMLを指定する。
2. Applicationが読み込まれた時点で、リクエストを送りファイルを取得する。
3. DataGridのdataProviderに返されたXMLを指定する。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" styleName="plain" creationComplete="Request.send()">
    <mx:HTTPService id="Request" url="data/name.xml" useProxy="false" />
    <mx:Panel width="100%">
        <mx:DataGrid width="100%" dataProvider="{Request.lastResult.data.person}">
            <mx:columns>
                <mx:DataGridColumn dataField="name" headerText="名前" />
                <mx:DataGridColumn dataField="money" headerText="金額" />
                <mx:DataGridColumn dataField="number" headerText="番号" />
            </mx:columns>
        </mx:DataGrid>
    </mx:Panel>
</mx:Application>

HttpServiceについてはまた調べてみます。

サンプル

まとめ

XMLも使えるといろいろと便利そうです。
Arrayのときもそうだったんですが、XML、XMLList、XMLListCollectionの違いをちゃんと知らないとごっちゃになります。
なかなか難しいです・・・。

参考サイト

第11回　Flexが備えるMXMLコンポーネント（Part6：データグリッド） - ITPro