« Flex2 コントロール - DataGrid - | トップページ | Flex2のDataGridにXMLデータをバインドする Part2 »

2006年7月27日 (木)

Flex2のDataGridにXMLデータをバインドする

DataGridなどは、サーバーのデータを動的にバインドして使用するケースがほとんどだと思います。
そこで、サーバーではASP.NETのDataSetをXMLとして返し、それをDataGridのバインドするケースを想定したサンプルを作成してみました。
サンプルページ
example.mxml

まず、サーバーではC#で以下のようなコードを記述してDataSetを作成しそれをXMLとして返すことにします。
private void Page_Load(object sender, System.EventArgs e)
{
    DataSet ds = new DataSet("DataSet");
    DataTable dt = new DataTable("DataTable");
    dt.Columns.Add("Column1");
    dt.Columns.Add("Column2");
    dt.Columns.Add("Column3");

    DataRow dr = dt.NewRow();
    dr[0] = "Row1 Column1";
    dr[1] = "Row1 Column2";
    dr[2] = "Row1 Column3";
    dt.Rows.Add(dr);

    dr = dt.NewRow();
    dr[0] = "Row2 Column1";
    dr[1] = "Row2 Column2";
    dr[2] = "Row2 Column3";
    dt.Rows.Add(dr);

    dr = dt.NewRow();
    dr[0] = "Row3 Column1";
    dr[1] = "Row3 Column2";
    dr[2] = "Row3 Column3";
    dt.Rows.Add(dr);

    ds.Tables.Add(dt);

    Response.ContentType = "text/xml";
    ds.WriteXml(Response.OutputStream);
    Response.End();
}
生成されるXML

このデータを、DataGridにバインドするんですが、サーバーからデータを取得するには主にURLLoaderクラスを使用するようですが、 今回のサンプルでは、HTTPServiceクラスを使用してデータを取得してみます。
MXMLは以下のようになります。
<mx:HTTPService id="dataRequest" url="DataSetBind.aspx" />
<mx:DataGrid id="grid" width="400"
    dataProvider="{dataRequest.lastResult.DataSet.DataTable}">
    <mx:columns>
        <mx:DataGridColumn dataField="Column1" headerText="Column1" width="300" />
        <mx:DataGridColumn dataField="Column2" headerText="Column2" width="100" />
    </mx:columns>
</mx:DataGrid>
<mx:Button label="データを取得" click="dataRequest.send();" />
ボタンをクリックすると HTTPService の send メソッドが呼ばれて、url に指定しているページからデータを取得します。
リクエストの method はデフォルトでは GET です。
取得したデータには HTTPService の lastResult プロパティからアクセスできますので、そのデータを DataGrid の dataProvider に 指定することで、データ取得と同時に自動的にバインドされます。

dataProvider には dataRequest.lastResult.DataSet.DataTable と記述してありますが、これは HTTPService クラスが取得したXMLデータを パースして、XMLのタグ名と同じ名前のプロパティを持ち、かつXMLと同じツリー構造のオブジェクトを自動生成して返しているため、 このように簡単にXMLの要素を指定することが出来ます。
このデータ形式は、HTTPService の resultFormat を指定することで変更することが出来ます。

ActionScript 3 では E4X をサポートしていて、XMLデータに同様の 記述でアクセスできますが、上記のサンプルではE4XでXMLListにアクセスしているのではありませんので ご注意下さい。

以上のように、簡単にサーバーのXMLデータをバインドすることが出来ました。
ただし、Flash でも基本的には Ajax と同様に他のドメインのサーバーからデータを取得することは出来ません。

|

« Flex2 コントロール - DataGrid - | トップページ | Flex2のDataGridにXMLデータをバインドする Part2 »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/11113004

この記事へのトラックバック一覧です: Flex2のDataGridにXMLデータをバインドする:

« Flex2 コントロール - DataGrid - | トップページ | Flex2のDataGridにXMLデータをバインドする Part2 »