ここ最近はずっとFlexの勉強をしていて、なんとかUIをmxmlで少し書けるようになりました。
最初はPanelとかVBoxとか知らないことばかりで手こずった、、。
今日はFlexでXMLを扱う練習。E4Xも併せて勉強中。
今回扱うXMLデータの内容は、

<root>
    <Person>
        <FirstName>ミク</FirstName>
        <LastName>初音</LastName>
        <Gender>女性</Gender>
        <Age>16</Age>
        <Height>158cm</Height>
        <Weight>42kg</Weight>
    </Person>
    <Person>
        <FirstName>リン</FirstName>
        <LastName>鏡音</LastName>
        <Gender>女性</Gender>
        <Age>14</Age>
        <Height>152cm</Height>
        <Weight>43kg</Weight>
    </Person>
    <Person>
        <FirstName>レン</FirstName>
        <LastName>鏡音</LastName>
        <Gender>男性</Gender>
        <Age>14</Age>
        <Height>156cm</Height>
        <Weight>47kg</Weight>
    </Person>
</root>

こんな感じです。
とりあえず結果のswfを貼ります。DataGridにデータを表示させます。

今回はXMLのデータをmxml内に直接記述して、それをdataProviderにバインディングしています。

  <mx:Panel title="XMLListCollection Binding Test" layout="vertical" >

    <mx:Label text="XMLの要素をフィールドとしてDataGridにセット"/>
    <mx:DataGrid dataProvider="{_xElementCollection}">
        <mx:columns>
            <mx:DataGridColumn headerText="苗字" dataField="LastName" width="60"/>
            <mx:DataGridColumn headerText="名前" dataField="FirstName" width="60"/>
            <mx:DataGridColumn headerText="性別" dataField="Gender" width="40"/>
            <mx:DataGridColumn headerText="年齢" dataField="Age" width="40"/>
            <mx:DataGridColumn headerText="身長" dataField="Height" width="60"/>
            <mx:DataGridColumn headerText="体重" dataField="Weight" width="60"/>
        </mx:columns>
    </mx:DataGrid>

  </mx:Panel>

  <mx:Script>
        <![CDATA[

            import mx.collections.XMLListCollection;

            // XMLデータ（フィールド項目を要素として定義）
            [Bindable]
            private var _xElements:XML =
                    <root>
                        <Person>
                            <FirstName>ミク</FirstName>
                            <LastName>初音</LastName>
                            <Gender>女性</Gender>
                            <Age>16</Age>
                            <Height>158cm</Height>
                            <Weight>42kg</Weight>
                        </Person>
                        <Person>
                            <FirstName>リン</FirstName>
                            <LastName>鏡音</LastName>
                            <Gender>女性</Gender>
                            <Age>14</Age>
                            <Height>152cm</Height>
                            <Weight>43kg</Weight>
                        </Person>
                        <Person>
                            <FirstName>レン</FirstName>
                            <LastName>鏡音</LastName>
                            <Gender>男性</Gender>
                            <Age>14</Age>
                            <Height>156cm</Height>
                            <Weight>47kg</Weight>
                        </Person>
                    </root>;

            // 上記のフィールド項目を要素として定義したXML（XMLList）を使用したXMLListCollection
            [Bindable]
            private var _xElementCollection:XMLListCollection = new XMLListCollection(_xElements.Person);

        ]]>
  </mx:Script>

XMLListCollectionっていうのは、XMLListを基にしたコレクション。そのままです。
_xElements.Personは３つの Personノードを含む XMLList オブジェクトになります。
なので、XMLListCollectionには「_xElements.Person」をセットします。
XMLクラスとXMLListクラスの違いは、XML クラスはルートノードを一つしか持たないけれど、 XMLList クラスは複数持つことができるということ。(ここでは3つのPersonノードがXMLListのルートノードになる)

このように、E4XのXMLクラスにはchild()メソッドやappendChild()メソッドでDOMのように操作することも可能ですが、プロパティアクセスのようにドット(.)演算子でノード名をつなげてアクセスすることもできます。
これは便利。あと、XMLデータをリテラルで割り当てられるというのが新鮮ですね。

Tags: actionscript, flex, xml