Tree コントロールを使用すると、階層データを展開可能なツリー形式で表示できます。

詳しくは、『Adobe Flex リファレンスガイド』を参照してください。階層データプロバイダについては、階層データオブジェクトを参照してください。

高度な Tree コントロールを使用する際には、次のような内容も重要になってきます。

• 各 Tree ノードの情報に形式を設定する方法と、ユーザーがどのようにノードにデータを入力するかを制御する方法については、アイテムレンダラーとアイテムエディタの使用を参照してください。
• Tree コントロールの内外にオブジェクトをドラッグする方法については、ドラッグ＆ドロップの使用を参照してください。

Tree コントロールについて

Tree コントロールは、「ブランチ」ノードおよび「リーフ」ノードの階層構造になっています。ツリー内の各アイテムはノードと呼ばれ、ノードにはリーフノードとブランチノードがあります。ブランチノードとは、リーフノードまたはブランチノードを含んだノードです。また、空になる（子を持たない）場合もあります。リーフノードとは、ツリー内の各末端にあるノードです。

デフォルトでは、リーフノードはファイルアイコンの横にテキストラベルが表示され、ブランチノードは展開用矢印とフォルダアイコンの横にテキストラベルが表示されます。展開用矢印をユーザーがクリックすると、ノードが展開されて子が表示されます。

次の図は Tree コントロールを示します。

Tree コントロールの作成

MXML では Tree コントロールを <mx:Tree> タグで定義します。Tree クラスは List クラスを拡張したクラスで、Tree コントロールは List コントロールのすべてのプロパティとメソッドを継承します。List コントロールの使用について詳しくは、List コントロールを参照してください。MXML の他の場所（他のタグまたは ActionScript ブロック）のコントロールを参照する場合は、id 値を指定します。

Tree コントロールは通常、XML 構造体などの階層データプロバイダからデータを取得します。動的に変化するデータを Tree コントロールで表す場合は、標準的な ArrayCollection オブジェクトや XMLListCollection オブジェクトなどのコレクションをデータプロバイダとして使用する必要があります。

Tree コントロールでは、データ記述子を使用してデータプロバイダの内容の解析および操作が実行されます。デフォルトでは、Tree コントロールでは DefaultDataDescriptor インスタンスが使用されますが、独自のクラスを作成し、Tree コントロールの dataDescriptor プロパティにそのクラスを指定することができます。

DefaultDataDescriptor クラスでは、次の種類のデータを使用できます。

コレクション  

XMLListCollection、ArrayCollection オブジェクトなどのコレクション実装。DefaultDataDescriptor クラスには、コレクションを効率的に処理できるコードが含まれています。メニューのデータが動的に変化する場合は、必ずコレクションをデータプロバイダとして使用します。そうでないと、Tree コントロールに古いデータが表示される場合があります。

XML  

有効な XML テキストを含むストリングまたは有効な E4X 形式の XML データを格納している、<mx:XML> コンパイル時タグ、<mx:XMLList> コンパイル時タグ、XML オブジェクト、XMLList オブジェクトのいずれか。

その他のオブジェクト 

アイテムの配列、またはアイテムの配列を含むオブジェクトで、ノードの子が children という名前のアイテムに含まれているもの。

DefaultDataDescriptor クラスでは、メニューのデータプロバイダとして <mx:Model> タグを使用することもできますが、すべてのリーフノードは children という名前である必要があります。原則として、バインディングを使用する Tree データプロバイダが必要な場合は <mx:XML> タグまたは <mx:XMLList> タグを使用することをお勧めします。

DefaultDataDescriptor でサポートされる形式の詳細な説明など、階層オブジェクトやデータ記述子について詳しくは、データ記述子と階層データ構造を参照してください。

次のコードには、Tree コントロールの図に示したツリーを定義する 1 つの Tree コントロールが含まれています。ここでは、<mx:XMLList> タグの前後に XMLListCollection ラッパーを使用しています。XMLListCollection を使用すると、MailBox XMLListCollection の内容を変更することで、基になる XML データプロバイダを修正できます。Tree コントロールにはデータの変更が反映されます。この例では、dataProvider が Tree コントロールのデフォルトのプロパティなので、<mx:dataProvider> タグは使用していません。

<?xml version="1.0"?>
<!-- dpcontrols/TreeSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
   <mx:Tree id="tree1" labelField="@label" showRoot="true" width="160">
      <mx:XMLListCollection id="MailBox">
         <mx:XMLList>
            <folder label="Mail">
               <folder label="INBOX"/>
               <folder label="Personal Folder">
                  <Pfolder label="Business" />
                  <Pfolder label="Demo" /> 
                     <Pfolder label="Personal" isBranch="true" /> 
                     <Pfolder label="Saved Mail" /> 
                  </folder>
                  <folder label="Sent" />
                  <folder label="Trash" />
            </folder>
         </mx:XMLList>
      </mx:XMLListCollection>
   </mx:Tree>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

XML データでツリーのノードを表すタグの名前は何でも構いません。Tree コントロールは XML を読み取って、ネストされたノード間の関係に応じて階層を表示します。XML の有効な構造については、階層データオブジェクトを参照してください。

一部のデータプロバイダには、単一の「ルート」ノードというトップレベルノードがあります。その他のデータプロバイダはノードのリストになっており、ルートノードはありません。場合によっては、ルートノードを Tree のルートとして表示しないほうがよいこともあります。ツリーでルートノードを非表示にするには、showRoot プロパティに false を指定します。これはデータプロバイダの内容には影響を与えず、Tree の表示方法だけが変わります。showRoot プロパティを false に指定できるのは、ルートのあるデータプロバイダだけです。つまり、XML およびオブジェクトベースのデータプロバイダのみになります。

ブランチノードは複数の子ノードを持つことができ、デフォルトで展開用矢印とフォルダアイコンが表示されます。ユーザーは展開用矢印を使用して、フォルダを開閉します。リーフノードはデフォルトでファイルアイコンとして表示され、このノードには子ノードを含めることはできません。

Tree コントロールで XML 以外のデータプロバイダのノードを表示するとき、デフォルトでは、ノードの label プロパティをテキストラベルとして使用します。ただし E4X XML ベースのデータプロバイダを使用する場合は、ラベルが label という名前の属性で指定されていても、ラベルフィールドを指定する必要があります。ラベルフィールドを指定するには、labelField プロパティを使用します。例えばラベルフィールドが label 属性の場合は、labelField="@label" を指定します。

Tree コントロールのイベント処理

通常、Tree コントロールに対するユーザーの操作への応答はイベントで処理します。Tree コントロールは List コントロールから派生しているので、List コントロールに対して定義されているすべてのイベントを使用できます。Tree コントロールは、Event.change や TreeEvent.itemOpen を含めて、Event クラスと TreeEvent クラスのイベントもいくつか送出します。次の例では、change イベントおよび itemOpen イベントのイベントハンドラを定義しています。

<?xml version="1.0"?>
<!-- dpcontrols/TreeEvents.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
   <mx:Script>
      <![CDATA[
         import flash.events.*;
         import mx.events.*;
         import mx.controls.*;

         private function changeEvt(event:Event):void {
            var theData:String = ""
            if (event.currentTarget.selectedItem.@data) {
               theData = " Data: " + event.currentTarget.selectedItem.@data;
            }
            forChange.text = event.currentTarget.selectedItem.@label +
               theData; 
         }

      private function itemOpenEvt(event:TreeEvent):void {
         forOpen.text = event.item.@label;
      }
   ]]>
   </mx:Script>

   <mx:Tree id="XMLtree1" width="150" height="170"
          labelField="@label" itemOpen="itemOpenEvt(event);" 
          change="changeEvt(event);">
      <mx:XMLListCollection id="MailBox">
         <mx:XMLList>
            <node label="Mail" data="100">
               <node label="Inbox" data="70"/>
               <node label="Personal Folder" data="10">
                  <node label="Business" data="2"/>
                  <node label="Demo" data="3"/>
                  <node label="Personal" data="0" isBranch="true" />
                  <node label="Saved Mail" data="5" />
               </node>
               <node label="Sent" data="15"/>
               <node label="Trash" data="5"/>
            </node>
         </mx:XMLList>
      </mx:XMLListCollection>
   </mx:Tree>

   <mx:Label text="Change Event:" />
   <mx:TextArea id="forChange" width="150" />
   <mx:Label text="Open Event:" />
   <mx:TextArea id="forOpen" width="150" />
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、change イベントと itemOpen イベントのイベントリスナーを定義しています。Tree コントロールでは、ユーザーがツリーアイテムを選択すると change イベントがブロードキャストされ、ユーザーがブランチノードを展開すると itemOpen イベントがブロードキャストされます。いずれのイベントでも、イベントハンドラによって TextArea コントロールにラベルが表示されます。設定されている場合には、データプロパティも表示されます。

ツリーノードの展開

デフォルトでは、ツリーを最初に開いたときにはツリーのルートノードまたはノードが表示されます。ツリーを開いたときにノードを展開した状態で表示したい場合は、Tree コントロールの expandItem() メソッドを使用します。Tree コントロールのイベント処理の例を次のように変更すると、expandItem() メソッドが Tree コントロールの creationComplete イベントリスナーの一部として呼び出され、ツリーのルートノードが展開されます。

<mx:Script>
    <![CDATA[
.
.
.
        private function initTree():void {
            XMLTree1.expandItem(MailBox.getItemAt(0), true);
            forOpen.text=XMLTree1.openItems[0].@label;
        }
        ]]>
    </mx:Script>

<mx:Tree id="tree1" ... creationComplete="initTree();" >
    ...
</mx:Tree>

この例では、Tree コントロールの initialize イベントではなく、creationComplete イベントを使用する必要があります。これは、creationComplete イベントが実行されるまでは、データプロバイダが完全に初期化されて使用できる状態にはならないからです。

Tree コントロールの openItems プロパティは、展開されたすべてのツリーノードを含む配列です。例のコードに含まれる次の行は、ツリー内で最初かつ唯一の開いているアイテムのラベルを表示します。

forOpen.text=XMLTree1.openItems[0].@label;

ただしこの例では、expandItem() メソッドで itemOpen イベントを送出するように設定すれば、openItems ボックスを取得して最初の開いているアイテムを示すこともできます。これは、expandItem() メソッドのオプションの第 4 パラメータを true. に指定すれば実行できます。第 4 パラメータが true の場合、アイテムが開かれると、ツリーから open イベントが送出されます。次の例は、第 4 パラメータの使用方法を示したものです。

XMLTree1.expandItem(MailBox.getItemAt(0), true, false, true);

プログラムで Tree コントロールのノードを移動して、Tree のデータプロバイダにおける深度を知ることなくノードを開くことができます。これを行う 1 つの方法は、ノードの XML オブジェクトの children() メソッドを使用してノードに子があるかどうかテストすることです。expandItem() メソッドを使用してノードを開くことができます。

次の例では、クエリ文字列パラメータの値に基づいて Tree コントロールのノードを開きます。例えば、app_url?0=1&1=2&2=0 をアプリケーションに渡すと、ツリーの最上位レベルの 2 番目のアイテム、第 2 レベルの 3 番目のアイテム、および第 3 レベルの最初のアイテムが、Flex により開かれます（ノードはゼロベースです）。

<?xml version="1.0"?>
<!-- dpcontrols/DrillIntoTree.mxml -->
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" 
    creationComplete="initApp();">
    
    <mx:Script>
      <![CDATA[
        import mx.collections.XMLListCollection;
        
        [Bindable]
        private var treeData:XML =
            <root>
                <node label="Monkeys">
                    <node label="South America">
                        <node label="Coastal"/>
                        <node label="Inland"/>
                    </node>
                    <node label="Africa" isBranch="true"/>
                    <node label="Asia" isBranch="true"/>
                </node>
                <node label="Sharks">
                    <node label="South America" isBranch="true"/>
                    <node label="Africa" isBranch="true"/>
                    <node label="Asia" >
                        <node label="Coastal"/>
                        <node label="Inland"/>
                    </node>
                </node>
            </root>;
            
        private var openSequence:Array = [];

        private function initApp():void {
            /*  Parse URL and place values into openSequence Array.
                This lets you pass any integers on the query string, 
                in any order. So:
                http://localhost/flex/flex2/DrillIntoTree.swf?0=1&1=2&2=0
                results in an array of selections like this:
                0:1
                1:2
                2:0
                Non-ints are ignored.
                The Array is then used to drill down into the tree.
            */
           var paramLength:int = 0;
           for (var s:String in Application.application.parameters) {
               if (!isNaN(Number(s))) {
                    openSequence[s] = Application.application.parameters[s];
                    paramLength += 1;                   
               }
            }
            openTree();
        }
        
        private function openTree():void {
            var nodeList:XMLListCollection = 
                myTree.dataProvider as XMLListCollection;
            var node:XMLList = nodeList.source;
            for(var i:int=0; i < openSequence.length; i++) {
                var j:int = openSequence[i];
                var n:XML = node[j];
                if( n.children() != null ) {
                    myTree.expandItem(n,true,false);
                    node = n.children();
                } else {
                    break;
                }
            }
            if( n != null ) myTree.selectedItem = n;
        }
      ]]>
    </mx:Script>
    
    <mx:Tree id="myTree" 
        y="50" 
        width="221" 
        height="257" 
        horizontalCenter="0"
        dataProvider="{treeData.node}"
        labelField="@label"/>    
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

Tree コントロールのアイコンの指定

Tree コントロールでは、4 つの方法でノードアイコンを指定できます。

• folderOpenIcon、folderClosedIcon、および defaultLeafIcon の各プロパティ
• データプロバイダのノードアイコンのフィールド
• setItemItcon() メソッド
• iconFunction プロパティ

アイコンプロパティの使用

folderOpenIcon、folderClosedIcon、および defaultLeafIcon の各プロパティを使用して、Tree コントロールのアイコンを制御できます。例えば、次のコードでは、デフォルトのリーフアイコン、ブランチノードを開いた状態および閉じた状態の各アイコンを指定しています。

<mx:Tree folderOpenIcon="@Embed(source='open.jpg')"folderClosedIcon="@Embed(source='closed.jpg')"defaultLeafIcon="@Embed(source='def.jpg')"> 

アイコンフィールドの使用

XML を使用して Tree のデータを設定する場合は、次のようにして、各 Tree リーフの隣に表示するアイコンを指定できます。

<?xml version="1.0"?>
<!-- dpcontrols/TreeIconField.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

   <mx:Script>
      <![CDATA[
         [Bindable]
         [Embed(source="assets/radioIcon.jpg")] 
         public var iconSymbol1:Class; 
         [Bindable]
         [Embed(source="assets/topIcon.jpg")] 
         public var iconSymbol2:Class; 
      ]]>
   </mx:Script>

   <mx:Tree iconField="@icon" labelField="@label" showRoot="false" 
      width="160">
      <mx:XMLList>
         <node label="New">
            <node label="HTML Document" icon="iconSymbol2"/>
            <node label="Text Document" icon="iconSymbol2"/>
         </node>
         <node label="Close" icon="iconSymbol1"/>
      </mx:XMLList>
   </mx:Tree>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、iconField プロパティを使用して、アイコンを格納する各アイテムのフィールドを指定しています。Embed メタデータを使用してアイコンを読み込み、それを XML 定義内で参照しています。アイコンフィールドを使用して個々のブランチノードのアイコンを指定することはできません。代わりに、Tree コントロールの folderOpenIcon プロパティと folderClosedIcon プロパティを使用する必要があります。これらのプロパティは、すべての開いているブランチおよび閉じているブランチに使用されるアイコンを指定します。または、setItemIcon() メソッドを使用して、個々のノードアイコンを設定する必要があります。

setItemIcon() メソッドの使用

setItemIcon() メソッドでは、ツリーのアイテムにアイコン、または開いたアイコンと閉じたアイコンの両方を指定できます。このメソッドを使用すれば、個々のブランチやノードにアイコンを動的に指定および変更できます。この関数について詳しくは、『ActionScript 3.0 リファレンスガイド』の「setItemIcon()」を参照してください。次の例では、最初のブランチノードの開かれたおよび閉じたノードアイコンと、2 番目のブランチ（リーフを持たないもの）のアイコンを設定します。

<?xml version="1.0"?>
<!-- dpcontrols/TreeItemIcon.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

   <mx:Script>
      <![CDATA[
         [Bindable]
         [Embed(source="assets/radioIcon.jpg")] 
         public var iconSymbol1:Class; 
         [Bindable]
         [Embed(source="assets/topIcon.jpg")] 
         public var iconSymbol2:Class; 
         
         private function setIcons():void {
            myTree.setItemIcon(myTree.dataProvider.getItemAt(0), 
               iconSymbol1, iconSymbol2);
            myTree.setItemIcon(myTree.dataProvider.getItemAt(1), 
               iconSymbol2, null);
         }
      ]]>
   </mx:Script>

   <mx:Tree id="myTree" labelField="@label" showRoot="false" 
      width="160" initialize="setIcons();">
      <mx:XMLList>
         <node label="New">
            <node label="HTML Document"/>
            <node label="Text Document"/>
         </node>
         <node label="Close"/>
      </mx:XMLList>
   </mx:Tree>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

アイコン関数の使用

Tree コントロールの iconFunction プロパティを使用すれば、ツリーのすべてのアイコンを動的に設定する関数を指定できます。Flex のコントロールで iconFunction プロパティを使用する方法については、List コントロールへのアイコンの指定を参照してください。

特定のノードに展開される Tree コントロールの表示

Tree コントロールは、デフォルトでは、初期化時に折り畳まれた状態ですが、次の例のように、選択した特定のノードを展開するように初期化できます。このアプリケーションでは、Tree コントロールを作成した後に initTree() メソッドを呼び出します。このメソッドは Tree コントロールのルートノードを展開し、その selectedIndex プロパティを特定のノードのインデックス番号に設定します。

<?xml version="1.0"?>
<!-- dpcontrols/TreeOpenNode.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            import flash.events.*;
            import mx.events.*;
            import mx.controls.*;
            private function initTree():void {

                XMLTree1.expandItem(MailBox.getItemAt(0), true);
                XMLTree1.selectedIndex = 2;
            }
        ]]>
    </mx:Script>

    <mx:Tree id="XMLTree1" width="150" height="170"
             labelField="@label" creationComplete="initTree();">

        <mx:XMLListCollection id="MailBox">
            <mx:XMLList>
                <node label="Mail" data="100">

                    <node label="Inbox" data="70"/>
                    <node label="Personal Folder" data="10">
                        <node label="Business" data="2"/>
                        <node label="Demo" data="3"/>
                        <node label="Saved Mail" data="5" />
                    </node>
                    <node label="Sent" data="15"/>
                    <node label="Trash" data="5"/>
                 </node>
            </mx:XMLList>
        </mx:XMLListCollection>
    </mx:Tree>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

リーフノードの実行時の追加と削除

Tree コントロールに対して、実行時にリーフノードを追加および削除できます。このような変更を行うコードの例を次に示します。このアプリケーションでは、会社の部署（department）および従業員（employee）を表す、定義済みのブランチとリーフノードを使用して Tree コントロールを初期化します。実行時に、Operations という部署のブランチに、従業員を表すリーフノードを動的に追加できます。任意のリーフノードを、実行時に作成したものを含めて、削除することもできます。

この例の XML には、department と employee の 2 つの異なるエレメント名が含まれています。Tree コントロールのラベル関数である treeLabel() は、これらのエレメントタイプに表示するテキストを決定します。このラベル関数は、E4X シンタックスを使用して、部署名または従業員名のいずれかを返します。これらの値は addEmployee() メソッドおよび removeEmployee() メソッドで使用されます。

従業員を業務部門に追加する場合、addEmployee() メソッドは E4X シンタックスを使用し、title 属性の値に基づいて業務部門ノードを取得し、XMLList 型である dept 変数に保存します。次に、dept.appendChild() を呼び出して子ノードを業務ノードに追加します。

従業員を削除する場合は、removeEmployee() メソッドを使用します。このメソッドは、XML 型 node 変数に現在選択されているアイテムを格納します。このメソッドは、選択されたアイテムが従業員ノードかどうかを判断するために、node.localName() メソッドを呼び出します。アイテムが従業員ノードの場合、そのノードは削除されます。

<?xml version="1.0"?>
<!-- dpcontrols/TreeAddRemoveNode.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            import mx.collections.XMLListCollection;
            
            [Bindable]
            private var company:XML =
              <list>
                <department title="Finance" code="200">
                    <employee name="John H"/>

                    <employee name="Sam K"/>
                </department>
                <department title="Operations" code="400">

                    <employee name="Bill C"/>
                    <employee name="Jill W"/>
                </department>                    
                <department title="Engineering" code="300">

                    <employee name="Erin M"/>
                    <employee name="Ann B"/>
                </department>                                
              </list>;
              
            [Bindable]
            private var companyData:XMLListCollection = 
                new XMLListCollection(company.department);
            
            private function treeLabel(item:Object):String
            {

                var node:XML = XML(item);
                if( node.localName() == "department" )

                    return node.@title;
                else
                    return node.@name;
            }

            private function addEmployee():void
            {
                var newNode:XML = <employee/>;
                newNode.@name = empName.text;
                var dept:XMLList =company.department.(@title == "Operations");
                if( dept.length() > 0 ) {

                    dept[0].appendChild(newNode);
                    empName.text = "";
                }
            }

            private function removeEmployee():void
            {
                var node:XML = XML(tree.selectedItem);
                if( node == null ) return;
                if( node.localName() != "employee" ) return;
            
                var children:XMLList = XMLList(node.parent()).children();
                for(var i:Number=0; i < children.length(); i++) {

                    if( children[i].@name == node.@name ) {
                        delete children[i];
                    }
                }
            }
        ]]>
    </mx:Script>
    
    <mx:Tree id="tree" 
        top="72" left="50" 
        dataProvider="{companyData}"
        labelFunction="treeLabel"
        height="224" width="179"/>

    <mx:HBox>        
        <mx:Button 
            label="Add Operations Employee" 
            click="addEmployee();"/>
        <mx:TextInput id="empName"/>
    </mx:HBox>
    
    <mx:Button 
        label="Remove Selected Employee" 
        click="removeEmployee();"/>    
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

ユーザーによるツリーの操作

ユーザーは、ツリーコントロールのラベルを編集できます。コントロールでは様々なキーボード操作および編集キーもサポートされています。

実行時のノードラベル編集

Tree コントロールの editable プロパティを true に設定すれば、実行時にノードラベルを編集できます。ノードラベルを編集するには、ユーザーはノードを選択してから、新しいラベルを入力するか、既存のラベルテキストを編集します。

ラベルの編集のために、Tree コントロールの List スーパークラスでは次のイベントを使用しています。これらのイベントは ListEvent クラスに属しています。

これらのイベントは通常、カスタムのアイテムエディタで使用されます。詳しくは、アイテムレンダラーとアイテムエディタの使用を参照してください。

キーボード入力によるラベルの編集

Tree の editable プロパティを true に設定した場合、以下のキーを使用してラベルを編集できます。

キーによるツリー操作

Tree コントロールが編集不可能な場合、クリックまたは Tab キーによってフォーカスを Tree コントロールに移したら、次のキーを使用して Tree コントロールを制御できます。