AdvancedDataGrid コントロールでは、階層データおよびグループ化データの表示をサポートしています。この表示をサポートするために、AdvancedDataGrid では 1 つの列にナビゲーションツリーを表示します。このツリーを使用して、データ階層を移動することができます。

階層データは、親データアイテムと子データアイテムに構造化されたデータです。階層データを AdvancedDataGrid コントロールに直接渡すことができます。グループ化データは、固有の構造化情報を持たないフラットなデータで始まるデータです。AdvancedDataGrid コントロールにフラットなデータを渡す場合は、そのデータを階層にグループ化するために使用する 1 つまたは複数のデータフィールドを事前に指定します。

次の例は、SimpleHierarchicalData.as ファイルの階層データを示したものです。

[Bindable]
private var dpHierarchy:ArrayCollection = new ArrayCollection([
  {Region:"Southwest", children: [
     {Region:"Arizona", children: [ 
        {Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
        {Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},  
     {Region:"Central California", children: [ 
        {Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},  
     {Region:"Nevada", children: [ 
        {Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},  
     {Region:"Northern California", children: [ 
        {Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
        {Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},  
     {Region:"Southern California", children: [ 
        {Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
        {Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
  ]}
]);

各データが、Region フィールドを含む最上位レベルのオブジェクトと、複数の下位レベルの子で構成されていることに注意してください。各下位レベルの子にも Region フィールドがあり、さらに 1 つまたは複数の子を持っています。次の図は、このデータを表示する AdvancedDataGrid コントロールを示したものです。

この例のコードは、AdvancedDataGrid コントロールのナビゲーションツリーの制御に記載されています。

フラットなデータを階層構造で表示するには、AdvancedDataGrid コントロールにデータを渡す前に、フラットなデータの行をグループ化します。次のコードは、前の図で示された階層データを表示するものですが、ここではデータがフラットなデータ構造として配列されています。

[Bindable]
private var dpFlat:ArrayCollection = new ArrayCollection([
  {Region:"Southwest", Territory:"Arizona", 
      Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
  {Region:"Southwest", Territory:"Arizona", 
      Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},  
  {Region:"Southwest", Territory:"Central California", 
      Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},  
  {Region:"Southwest", Territory:"Nevada", 
      Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},  
  {Region:"Southwest", Territory:"Northern California", 
      Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
  {Region:"Southwest", Territory:"Northern California", 
      Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},  
  {Region:"Southwest", Territory:"Southern California", 
      Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
  {Region:"Southwest", Territory:"Southern California", 
      Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
]);

この例では、各データが個別のレコードで構成されており、固有の構造化情報は持っていません。データをグループ化するには、データを階層構造に配列するために使用する 1 つまたは複数のデータフィールドを指定します。次の図は、フラットなデータがデータの Region フィールドによってグループ化されている AdvancedDataGrid コントロールを示したものです。

この例のコードは、グループ化データの表示に記載されています。

階層データを使用したデータプロバイダの設定

階層データとナビゲーションツリーを表示するように AdvancedDataGrid コントロールを設定するには、HierarchicalData クラスまたは GroupingCollection クラスのインスタンスを dataProvider プロパティに渡します。既に階層構造に配列されたデータの場合は、HierarchicalData クラスを使用します。フラットな構造を持つデータの場合は、GroupingCollection クラスを使用します。GroupingCollection クラスのインスタンスを設定する一部として、フラットなデータを階層構造に配列するために使用する 1 つまたは複数のデータフィールドを指定します。

階層データの表示の詳細については、階層データの表示を参照してください。グループ化データの表示の詳細については、グループ化データの表示を参照してください。

HierarchicalData クラスのインスタンスまたは GroupingCollection クラスのインスタンスは、データプロバイダとして使用可能な任意のデータから作成できます。ただし、データの内部表現は、AdvancedDataGrid コントロールによって次のように変更されます。

• 配列は、ArrayCollection クラスのインスタンスとして内部的に表現されます。
• ArrayCollection クラスは、ArrayCollection クラスのインスタンスとして内部的に表現されます。
• 有効な XML テキストを含むストリングは、XMLListCollection クラスのインスタンスとして内部的に表現されます。
• XMLNode クラスまたは XMLList クラスは、XMLListCollection クラスのインスタンスとして内部的に表現されます。
• ICollectionView インターフェイスを実装するオブジェクトは、ICollectionView インターフェイスのインスタンスとして内部的に表現されます。
• その他のデータ型のオブジェクトは、Array インスタンス内でその単一エントリとしてラップされます。

例えば、配列を使用して HierarchicalData クラスのインスタンスを作成し、この HierarchicalData インスタンスを AdvancedDataGrid.dataProvider プロパティに渡します。このデータを AdvancedDataGrid.dataProvider プロパティから読み戻すと、ArrayCollection インスタンスとして返されます。

データプロバイダ設定後の validateNow() の呼び出し

場合によっては、AdvancedDataGrid コントロールのデータプロバイダを階層データまたはグループ化データに対して設定し、その直後に新しいデータプロバイダに基づいたアクションを実行することもあります。通常、このような状況は、次の例のように dataProvider プロパティを ActionScript で設定した場合に発生します。

adg.dataProvider = groupedCollection;
adg.expandAll();

この例では、AdvancedDataGrid コントロールによる dataProvider プロパティの設定が進行中なので、expandAll() の呼び出しは失敗します。この場合、expandAll() メソッドは dataProvider プロパティの古い値を処理するか、または何も行いません。

このような状況では、データプロバイダの設定後に validateNow() メソッドを挿入する必要があります。validateNow() メソッドは、コントロールのプロパティとレイアウトを検証および更新し、必要に応じて再描画します。次の例では、expandAll() メソッドの前に validateNow() メソッドが挿入されています。

adg.dataProvider = groupedCollection;
adg.validateNow();
adg.expandAll();

アプリケーションのパフォーマンスに影響するので、dataProvider プロパティを設定するたびに validateNow() メソッドを挿入しないでください。このメソッドが必要となるのは、dataProvider プロパティを設定した直後にコントロールの操作を実行する場合だけです。

AdvancedDataGrid コントロールのナビゲーションツリーの制御

AdvancedDataGrid コントロールは、「ツリーデータグリッド」と呼ばれることもあります。これは、コントロールの 1 つの列に展開可能なツリーを表示して、現在可視状態にあるコントロールの行を特定するからです。コントロールの最初の列が、そのコントロールのデータプロバイダのフィールドに関連付けられている場合、ツリーは、通常はコントロールの一番左側の列に表示されます。データプロバイダのデータフィールドは、ツリーノードのラベルのテキストを提供します。

次の例では、階層データおよびグループ化データの表示で示されている階層データ構造を、AdvancedDataGrid コントロールに設定します。このデータは、Region フィールドを含む最上位レベルのオブジェクトと、複数の下位レベルの子で構成されています。各下位レベルの子にも Region フィールドがあり、さらに 1 つまたは複数の子を持っています。

この例の AdvancedDataGrid コントロールでは、「Region」、「Territory Rep」、「Actual」、および「Estimate」という 4 つの列を定義してデータを表示します。

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

  <mx:Script>
    <![CDATA[
          import mx.collections.ArrayCollection;
                    
          include "SimpleHierarchicalData.as";
      ]]>
    </mx:Script>

    <mx:AdvancedDataGrid width="100%" height="100%">
        <mx:dataProvider>
            <mx:HierarchicalData source="{dpHierarchy}"/>
        </mx:dataProvider>
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="Region"/>
            <mx:AdvancedDataGridColumn dataField="Territory_Rep"
                headerText="Territory Rep"/>
            <mx:AdvancedDataGridColumn dataField="Actual"/>
            <mx:AdvancedDataGridColumn dataField="Estimate"/>
        </mx:columns>
    </mx:AdvancedDataGrid>    
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

次の図は、この例で作成した AdvancedDataGrid コントロールを示したものです。フォルダアイコンによってツリーのブランチノードを、ファイルアイコンによってリーフノードを表しています。コントロールの最初の列はデータプロバイダの Region フィールドに関連付けられているので、ツリーラベルには Region フィールドの値が表示されます。

ツリーのリーフアイコンには、ラベルが表示されていないことに注意してください。これは、各「Territory Rep」列のレコードに、Region フィールドが含まれていないからです。

ツリーは、通常はコントロールの一番左側の列に表示されますが、次の例のように、treeColumn プロパティを使用してコントロールの任意の列を指定することができます。

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

  <mx:Script>
    <![CDATA[
          import mx.collections.ArrayCollection;
                
          include "HierarchicalDataCategories.as";
      ]]>
    </mx:Script>

    <mx:AdvancedDataGrid 
        width="100%" height="100%"
        treeColumn="{rep}"> 
        <mx:dataProvider>
            <mx:HierarchicalData source="{dpHierarchy}" 
                childrenField="categories"/>
        </mx:dataProvider>
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="Region"/>
            <mx:AdvancedDataGridColumn id="rep" 
                dataField="Territory_Rep"
                headerText="Territory Rep"/>
            <mx:AdvancedDataGridColumn dataField="Actual"/>
            <mx:AdvancedDataGridColumn dataField="Estimate"/>
        </mx:columns>
    </mx:AdvancedDataGrid>    
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

ナビゲーションツリーのアイコンおよびラベルの設定

ナビゲーションツリーでは、ブランチノードとリーフノードに使用するアイコンおよびラベルを制御することができます。例えば、アイコンを使用せずにラベルのツリーを表示したり、フォルダアイコンだけでツリーを表示したりできます。また、ラベルをまったく表示せずにツリーを表示したり、データフィールドと関連付けられていない独自の列にツリーを表示することも可能です。

次の表では、ツリーアイコンを設定するために使用する AdvancedDataGrid コントロールのスタイルプロパティについて説明します。

次の例では、デフォルトのリーフアイコンを null に設定して非表示にし、フォルダが開いた状態および閉じた状態のアイコンとしてカスタムアイコンを使用します。

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

  <mx:Script>
    <![CDATA[
          import mx.collections.ArrayCollection;
                
          include "SimpleHierarchicalData.as";
      ]]>
    </mx:Script>

    <mx:AdvancedDataGrid width="100%" height="100%" 
        defaultLeafIcon="{null}"
        folderOpenIcon="@Embed(source='assets/folderOpenIcon.jpg')"
        folderClosedIcon="@Embed(source='assets/folderClosedIcon.jpg')">
        <mx:dataProvider>
            <mx:HierarchicalData source="{dpHierarchy}"/>
        </mx:dataProvider>
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="Region"/>
            <mx:AdvancedDataGridColumn dataField="Territory_Rep"
                headerText="Territory Rep"/>
            <mx:AdvancedDataGridColumn dataField="Actual"/>
            <mx:AdvancedDataGridColumn dataField="Estimate"/>
        </mx:columns>
    </mx:AdvancedDataGrid>    
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

また、次の例に示すように、setStyle() メソッドおよび <mx:Style> タグを使用してスタイルを指定することもできます。

<mx:Style>
    AdvancedDataGrid {
        defaultLeafIcon:ClassReference(null);
        folderOpenIcon:Embed(source='assets/folderOpenIcon.jpg');
        folderClosedIcon:Embed(source='assets/folderClosedIcon.jpg');
    }
</mx:Style>

groupIconFunction プロパティおよび groupLabelFunction プロパティの使用

AdvancedDataGrid クラスの groupIconFunction プロパティおよび groupLabelFunction プロパティを使用して、ナビゲーションツリーのリーフノードの表示を制御するコールバック関数を定義します。groupIconFunction プロパティで指定されたコールバック関数がアイコンを制御し、groupLabelFunction プロパティで指定されたコールバック関数がラベルを制御します。

次の例では、groupIconFunction プロパティを使用して、ナビゲーションツリーの最上位ノードにカスタムアイコンを表示します。また、ツリーのその他のリーフノードについては、すべてデフォルトアイコンを表示します。

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

  <mx:Script>
    <![CDATA[
          import mx.collections.ArrayCollection;
                    
          include "SimpleHierarchicalData.as";

         // Embed the icon for the groups.
         [Bindable]
         [Embed(source="assets/topTreeIcon.png")] 
         public var icn:Class;
        
         // Define the groupIconFunction callback function.
         public function myIconFunc(item:Object, depth:int):Class {
             if(depth == 1)
                 // If this is the top-level of the tree, return the icon.
                 return icn;
             else
                 // If this is any other level, return null.
                 return null;
         }
      ]]>
    </mx:Script>

    <mx:AdvancedDataGrid 
        width="100%" height="100%"
        groupIconFunction="myIconFunc">
        <mx:dataProvider>
            <mx:HierarchicalData source="{dpHierarchy}"/>
        </mx:dataProvider>
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="Region"/>
            <mx:AdvancedDataGridColumn dataField="Territory_Rep"
                headerText="Territory Rep"/>
            <mx:AdvancedDataGridColumn dataField="Actual"/>
            <mx:AdvancedDataGridColumn dataField="Estimate"/>
        </mx:columns>
    </mx:AdvancedDataGrid>    
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

ナビゲーションツリーの個別の列の作成

階層データおよびグループ化データの表示の例では、最初の列にデータの Region フィールドも表示されています。そのため、ナビゲーションツリーのノードを展開すると、各ツリーノードのラベルは、その行のデータプロバイダの Region フィールドの値に対応して表示されます。ツリーのリーフノードでは、データプロバイダに Region フィールドの値が含まれていないので、リーフノードのラベルは空白になります。

ナビゲーションツリーは、個別の列に入れることもできます。この列は、次の図に示すように、データフィールドに関連付けられていません。

この例では、データフィールドとツリーが表示されている列は関連付けられていません。そのため、ツリーアイコンにはラベルが表示されません。また、この例では AdvancedDataGrid コントロールの folderClosedIcon、folderOpenIcon、および defaultLeafIcon の各プロパティを null に設定していますが、展開用アイコンは表示されているので、ユーザーがツリーノードを開閉できるようになっています。

この例を実装するコードは次のとおりです。最初の列がデータフィールドに関連付けられていない点に注意してください。この列はデータグリッドの最初の列なので、AdvancedDataGrid コントロールではナビゲーションツリーを表示するために自動的に使用されます。

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

  <mx:Script>
    <![CDATA[
          import mx.collections.ArrayCollection;
                
          include "SimpleHierarchicalData.as";
      ]]>
    </mx:Script>

    <mx:AdvancedDataGrid width="100%" height="100%" 
        folderClosedIcon="{null}" 
        folderOpenIcon="{null}" 
        defaultLeafIcon="{null}">
        <mx:dataProvider>
            <mx:HierarchicalData source="{dpHierarchy}"/>
        </mx:dataProvider>
        <mx:columns>
            <mx:AdvancedDataGridColumn headerText="" width="50"/>
            <mx:AdvancedDataGridColumn dataField="Region"/>
            <mx:AdvancedDataGridColumn dataField="Territory_Rep"
                headerText="Territory Rep"/>
            <mx:AdvancedDataGridColumn dataField="Actual"/>
            <mx:AdvancedDataGridColumn dataField="Estimate"/>
        </mx:columns>
    </mx:AdvancedDataGrid>    
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。