プログラマのためのFlash遊び方

第8回 Flexで本格Webアプリケーションを作ってみよう

この記事を読むのに必要な時間:およそ 6.5 分

dataProviderを使ってデータを表示する

Flexの数あるコンポーネントの中でも強力なのが,TreeコンポーネントやDataGridコンポーネントです。これらのコンポーネントは,dataProviderというプロパティにXMLやオブジェクトを渡すだけで中身を表示するという,面白い特徴を持っています。

Treeコンポーネントを使う

まずは,Treeコンポーネントを使ってみましょう。Treeコンポーネントは階層構造を表示するためのコンポーネントです。

<?xml version="1.0" encoding="UTF-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    applicationComplete="init()">
    <mx:Script>
        <![CDATA[
            private function init():void {
                var xml:XML = <node label="ルート">
                    <node label="1">
                        <node label="1-1"/>
                        <node label="1-2"/>
                    </node>
                    <node label="2"/>
                </node>;

                tree1.dataProvider = xml;
            }
        ]]>
    </mx:Script>
    <mx:Tree id="tree1" width="200" height="100"
        labelField="@label"/>
</mx:Application>

<mx:Application>タグでappCompleteイベントが発生したときにinit()メソッドが呼ばれるようにイベント登録しています。appCompleteはアプリケーションの初期化が完了したときに1度だけ発生するイベントです。

init()メソッドでは,xmlという変数にXMLを格納しています。ActionScript 3.0では,このようにソースコードの中にXMLを記述できます(ECMAScriptでXMLを扱うためのE4Xという仕様で定義されている機能です)⁠

次に,TreeコンポーネントのdataProviderプロパティにxmlを設定しています。結果として,XMLの構造と同じツリー構造ができあがります。

<mx:Tree>タグでは,labelFieldプロパティが@labelに設定されているため,XMLのlabel属性の値がツリーに表示されています(@labelの@はE4Xで属性のことを表します)⁠

XMLをサーバからロードする

先ほどはXMLをソースコードに埋め込みましたが,サーバから動的にロードするようにしてみましょう。

データをロードするには,ActionScript 3.0のURLLoaderクラスを利用します。先ほどのソースコードの,<mx:Script>タグの中を次のように書き換えました。

    import flash.events.Event;
    import flash.net.URLLoader;
    import flash.net.URLRequest;

    private function init():void {
        var req:URLRequest = new URLRequest("test.xml");

        var loader:URLLoader = new URLLoader();
        loader.load(req);
        loader.addEventListener("complete", function(event:Event):void {
            tree1.dataProvider = XML(loader.data);
        });
    }

XMLファイルは次のような内容です。

<node label="ルート">
    <node label="1">
        <node label="1-1"/>
        <node label="1-2"/>
    </node>
    <node label="2"/>
</node>

Flash同じ場所にtest.xmlとして保存します。文字コードをUTF-8にするのを忘れないでください。

これで,サーバのXMLを動的に読み込んで表示するようになりました。試しに,XMLを書き換えてFlashを再度表示してみると,変更後のXMLに応じた表示に変わっていると思います。

CGIを使ってtest.xmlの表示を切り替えるようにすれば,すぐにでも動的なコンテンツが作れそうですね。

DataGridコンポーネントを使う

次は表形式のデータを表示するDataGridコンポーネントです。

<?xml version="1.0" encoding="UTF-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    applicationComplete="init()">
    <mx:Script>
        <![CDATA[
            private function init():void {
                var xml:XML = <data>
                    <item name="名前1" value="値1"/>
                    <item name="名前2" value="値2"/>
                    <item name="名前3" value="値3"/>
                </data>;

                grid1.dataProvider = xml.item;
            }
        ]]>
    </mx:Script>
    <mx:DataGrid id="grid1" width="200" height="100">
        <mx:columns>
            <mx:DataGridColumn dataField="@name" headerText="名前"/>
            <mx:DataGridColumn dataField="@value" headerText="値"/>
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

<mx:DataGrid>タグの子タグとして,列の設定を記述しています。ここでは,⁠名前」「値」の2つの列を表示します。dataField属性はそれぞれ,@nameと@valueに設定しています。そのため,XMLのname属性とvalue属性がそれぞれの列に表示されます。

先ほどと同じように,init()メソッドでXMLをDataGridオブジェクトのdataProviderプロパティに設定しています。xml.itemというのは,XMLの子ノードのうち,itemノードの一覧を表すE4Xの表現です。

この結果,次のような表示になります。

行のヘッダ部分をクリックするとソートされますし,ヘッダ部分をドラッグして列を並び替えることもできます。とても高機能ですね。

このように簡単に見栄えよくデータを表示できるところがFlexのコンポーネントの大きな魅力です。

著者プロフィール

最田健一(さいたけんいち)

有限会社 CO-CONV勤務のプログラマ。京都在住の京都好き。趣味で ActionScript 3.0やFlex 2を触っていたら,いつの間にか仕事でも使うことになっていた。個人ブログは「てっく煮ブログ」。

URLhttp://tech.nitoyon.com/

コメント

コメントの記入