Tree †

ツリーは、木構造のデータを表示するのに適したコントロールです。標準コンポーネントです。

基本的な使い方 †

ツリー(Tree)は、木構造のデータを表示するのに適したコントロールです。 Windowsのエクスプローラーでフォルダ構造を表すのに使われているのも、木構造です。

Flex Builderの設定メニューでも、見ることができますが、設定画面でもよく使われています。

以下のようなタグをソースに挿入します。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Tree x="10" y="10"
        labelField="@label" width="273" height="264">
        <mx:XMLListCollection>
            <mx:XMLList>
                <folder label="八百屋">
                    <item label="キャベツ"/>
                    <item label="レンコン"/>
                </folder>
                <folder label="薬局">
                    <item label="クリーム"/>
                    <item label="石鹸"/>
                </folder>
            </mx:XMLList>
        </mx:XMLListCollection>
    </mx:Tree>
</mx:Application>

ML形式は、木構造のデータとも言えるので、Treeコントロールでは、自然な形で、ツリー構造を指定することができます。

Treeの属性で「labelField="@label"」と書いていますが、これは、XMLの属性でラベルの名前をどうするのかを指定するものです。この属性を省略すると、XML自体が表示されてしまいます。

また、リストで見たのと同じように、 dataProviderを使って、別の場所に書いたデータを表示させることもできます。

リストでは、ArrayCollection クラスを dataProvider に指定しましたが、ツリー(Tree)では、XMLListCollection クラスを指定します。

以下のプログラムは、上のものとまったく同じ動作をするものです。

file:Tree2.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <!-- データ構造の記述　-->
    <mx:XMLListCollection id="goods_xml">
        <mx:XMLList>
            <folder label="八百屋">
                <item label="キャベツ"/>
                <item label="レンコン"/>
            </folder>
            <folder label="薬局">
                <item label="クリーム"/>
                <item label="石鹸"/>
            </folder>
        </mx:XMLList>
    </mx:XMLListCollection>
    <!-- Tree コントロール -->
    <mx:Tree x="10" y="10"
        labelField="@label"
        width="273" height="264"
        dataProvider="{goods_xml}"/>
</mx:Application>

まとめ †

• Treeコントロールを使うと木構造を表示できます。
• TreeのdataProviderには、XMLListCollection型のデータを指定します。
• TreeのselectedItemからプロパティにアクセスするには「@name」のように書きます