Adobe Flex 3 ヘルプ

AdvancedDataGrid コントロールでのアイテムレンダラーの使用

AdvancedDataGrid コントロールのセルの外観と動作をカスタマイズするには、カスタムアイテムレンダラーとカスタムアイテムエディタを作成します。AdvancedDataGrid コントロールの列にアイテムエディタとアイテムレンダラーを割り当てる手順は、DataGrid コントロールの場合と同じです。アイテムレンダラーとアイテムエディタの概要については、アイテムレンダラーとアイテムエディタの使用を参照してください。

AdvancedDataGrid には、アイテムレンダラーをサポートするための機能が追加されています。これらの機能によって、次のアクションを実行できます。

  • データプロバイダのデータに関連付けられていない行または列の作成。例えば、データプロバイダのデータから概要行を作成できます。
  • 複数の列に対する単一のレンダラーの使用。
  • 単一の列での複数のレンダラーの使用。例えば階層データを表示する場合には、階層での行のレベルに応じて、別のレンダラーを列で使用することができます。

注意: これらの機能がサポートしているのはアイテムレンダラーのみです。アイテムエディタは、DataGrid コントロールと同様に使用します。

アイテムレンダラーの使用

AdvancedDataGrid コントロールのアイテムレンダラーの機能を使用するには、アイテムレンダラーを特定の列ではなく AdvancedDataGrid コントロール自体に割り当てます。この処理には AdvancedDataGrid.rendererProviders プロパティを使用します。次の例では、アイテムレンダラーを「Estimate」列に割り当てています。

<mx:AdvancedDataGrid>
    <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:rendererProviders>
        <mx:AdvancedDataGridRendererProvider 
            columnIndex="3"
            columnSpan="1" 
            renderer="myComponents.EstimateRenderer"/>
    </mx:rendererProviders>
</mx:AdvancedDataGrid>

rendererProviders プロパティには、AdvancedDataGridRendererProvider インスタンスの配列が含まれています。各 AdvancedDataGridRendererProvider インスタンスによって、単一のアイテムレンダラの特性が定義されます。

前の例では、AdvancedDataGridRendererProvider インスタンスによって、EstimateRenderer を列 3（コントロールの最初の列は列 0 になります）に対して使用するように指定されています。また、レンダラーの使用範囲は単一の列に指定されています。columnSpan プロパティを 0 に設定すると、その行のすべての列に対してレンダラーが使用されます。

列インデックスを使用してレンダラーを割り当てるのではなく、次の例に示すように、列の id プロパティを指定し、column プロパティを使用してレンダラーを列に関連付けます。

<mx:AdvancedDataGrid>
    <mx:columns>
        <mx:AdvancedDataGridColumn dataField="Region"/>
        <mx:AdvancedDataGridColumn dataField="Territory_Rep" headerText="Territory Rep"/>
        <mx:AdvancedDataGridColumn dataField="Actual"/>
        <mx:AdvancedDataGridColumn id="estCol" dataField="Estimate"/>
    </mx:columns>

    <mx:rendererProviders>
        <mx:AdvancedDataGridRendererProvider 
            column="{estCol}"
            columnSpan="1" 
            renderer="myComponents.EstimateRenderer"/>
    </mx:rendererProviders>
</mx:AdvancedDataGrid>

depth プロパティを使用すると、AdvancedDataGrid コントロールのナビゲーションツリーの階層の中で、特定のレベルにレンダラーを関連付けることができます。ナビゲーションツリーの最上位ノードの深さは、1 になります。次の例では、ナビゲーションツリーの 3 番目のレベルにレンダラーを関連付けています。

    <mx:rendererProviders>
        <mx:AdvancedDataGridRendererProvider 
            columnIndex="3"
            depth="3" 
            columnSpan="1" 
            renderer="myComponents.EstimateRenderer"/>
    </mx:rendererProviders>

前の例では、ナビゲーションツリーの 3 番目のレベルを展開するまでは、列に対してデフォルトのレンダラーが使用されます。3 番目のレベルでは、EstimateRenderer コンポーネントが使用されます。同じ列に異なるレンダラーを割り当てる場合は、depth プロパティを使用します。depth プロパティでは、ツリーの各レベルで使用するレンダラーを指定します。

レンダラーは、複数の列に対して使用することができます。次の例では、2 列にまたがるレンダラーを作成します。

<mx:AdvancedDataGrid>
    <mx:columns>
        <mx:AdvancedDataGridColumn dataField="Region"/>
        <mx:AdvancedDataGridColumn dataField="Territory_Rep" headerText="Territory Rep"/>
        <mx:AdvancedDataGridColumn id="actCol" dataField="Actual"/>
        <mx:AdvancedDataGridColumn dataField="Estimate"/>
    </mx:columns>

    <mx:rendererProviders>
        <mx:AdvancedDataGridRendererProvider 
            column="{actCol}"
            depth="3" 
            columnSpan="2" 
            renderer="myComponents.SummaryRenderer"/>
    </mx:rendererProviders>
</mx:AdvancedDataGrid>

前の例では、「Actual」列および「Estimate」列に対して単一のレンダラーを使用し、これらの列のデータを組み合わせたビューを表示しました。SummaryRenderer コンポーネントの実装については、レンダラーを使用した列データの生成を参照してください。

次の表は、レンダラーの設定に使用する AdvancedDataGridRendererProvider クラスのプロパティの一覧です。

プロパティ

説明
column

レンダラーを使用する対象となる列の ID です。このプロパティを省略する場合は、columnIndex プロパティを使用して列を指定できます。
columnIndex

レンダラーを使用する対象となる列インデックスです。最初の列のインデックスは 0 になります。
columnSpan

レンダラーを使用する列の数です。すべての列で使用する場合は、このプロパティを 0 に設定します。デフォルト値は 1 です。
dataField

レンダラーに対応するデータプロバイダのデータフィールドです。このプロパティはオプションです。
depth

レンダラーを使用するツリーの深さです。ツリーの最上位ノードの深さは 1 になります。ツリーのすべてのノードではなく、特定の深さまで展開された場合にのみレンダラーを使用する場合は、このプロパティを使用します。デフォルトでは、ツリーのすべてのレベルに対してレンダラーが使用されます。
renderer

レンダラーです。
rowSpan

レンダラーを使用する行の数です。デフォルト値は 1 です。

レンダラーを使用した列データの生成

次の例は、アイテムレンダラーを使用して AdvancedDataGrid コントロールの「Difference」列の値を計算した結果を示したものです。

ÉAÉCÉeÉÄÉåÉìÉ_ÉâÅ[ÇšégópǵǾÅuDifferenceÅvóÒÇÃåvéZ

この例では、diffCol の id を使用して列を定義しています。diffCol は、データプロバイダのデータフィールドに関連付けられていません。その代わりに、rendererProvider プロパティを使用してアイテムレンダラーを列に割り当てます。アイテムレンダラーは「Actual」列と「Estimate」列の値の差を計算し、「Territory Rep」列の各担当者の実売上高が見積もりを上回っているか下回っているかに応じてメッセージを表示します。

この例を実装するコードは次のとおりです。

<?xml version="1.0"?>
<!-- dpcontrols/adg/HierarchicalADGSimpleRenderer.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:AdvancedDataGridColumn id="diffCol" 
                headerText="Difference"/>
        </mx:columns>

        <mx:rendererProviders>
            <mx:AdvancedDataGridRendererProvider column="{diffCol}"
                depth="3" renderer="myComponents.SummaryRenderer"/>
        </mx:rendererProviders>
    </mx:AdvancedDataGrid>
</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

SummaryRenderer コンポーネントを表示するコードを次に示します。

<?xml version="1.0"?>
<!-- dpcontrols/adg/myComponents/SummaryRenderer.mxml -->
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml" textAlign="center">
    <mx:Script>
        <![CDATA[

        override public function set data(value:Object):void
        {
            // Calculate the difference.
            var diff:Number = 
                Number(value["Actual"]) - Number(value["Estimate"]);
            if (diff < 0)
            {
                // If Estimate was greater than Actual, 
                // display results in red.
                setStyle("color", "red");
                text = "Undersold by " + usdFormatter.format(diff);
            }
            else
            {
                // If Estimate was less than Actual, 
                // display results in green.
                setStyle("color", "green");
                text = "Exceeded estimate by " + usdFormatter.format(diff);
            }
        }
        ]]>
    </mx:Script>
    
    <mx:CurrencyFormatter id="usdFormatter" precision="2" 
        currencySymbol="$" decimalSeparatorFrom="."
        decimalSeparatorTo="." useNegativeSign="true" 
        useThousandsSeparator="true" alignSymbol="left"/>
</mx:Label>

行全体にまたがるアイテムレンダラーの使用

アイテムレンダラーを階層データセットで使用し、データの行全体を表示することができます。次の図は、階層データセットの detail フィールドから取得したデータを表示する PieChart コントロールを示したものです。各行には担当者の売上高に関する詳細な情報が含まれており、円グラフの区分としてレンダリングされます。

äKëwÉfÅ[É^ÉZÉbÉgÇà detail ÉtÉBÅ[ÉãÉhÇｩÇÁéÊìæǵǾÉfÅ[É^Çšï\é¶Ç²ÇÈ PieChart ÉRÉìÉgÉçÅ[Éã

この例を実装するコードは次のとおりです。

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

  <mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
                             
      [Bindable]
      private var dpHierarchy:ArrayCollection= new ArrayCollection([
        {name:"Barbara Jennings", region: "Arizona", total:70, children:[  
          {detail:[{amount:5},{amount:10},{amount:20},{amount:45}]}]},
        {name:"Dana Binn", region: "Arizona", total:130,  children:[ 
          {detail:[{amount:15},{amount:25},{amount:35},{amount:55}]}]},
        {name:"Joe Smith", region: "California", total:229,  children:[ 
          {detail:[{amount:26},{amount:32},{amount:73},{amount:123}]}]},
        {name:"Alice Treu", region: "California", total:230, children:[ 
          {detail:[{amount:159},{amount:235},{amount:135},{amount:155}]}
        ]}
      ]);                                            
    ]]>
  </mx:Script>

  <mx:AdvancedDataGrid id="myADG" 
    width="100%" height="100%" 
    variableRowHeight="true">
    <mx:dataProvider>
       <mx:HierarchicalData source="{dpHierarchy}"/>
    </mx:dataProvider>
    <mx:columns>
        <mx:AdvancedDataGridColumn dataField="name" headerText="Name"/>
        <mx:AdvancedDataGridColumn dataField="total" headerText="Total"/>
    </mx:columns>   
        
    <mx:rendererProviders>            
        <mx:AdvancedDataGridRendererProvider 
            dataField="detail" 
            renderer="myComponents.ChartRenderer" 
            columnIndex="0"
            columnSpan="0"/>         
    </mx:rendererProviders>   
  </mx:AdvancedDataGrid>
</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

ChartRenderer.mxml コンポーネントをレンダリングするコードは次のとおりです。

<?xml version="1.0"?>
<!-- dpcontrols/adg/myComponents/ChartRenderer.mxml -->
<mx:VBox height="200" width="100%" xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:PieChart dataProvider="{data.detail}"
        width="100%"
        height="100%"
        showDataTips="true">
        <mx:series>
            <mx:PieSeries labelPosition="callout" field="amount"  />
        </mx:series>
    </mx:PieChart>    
</mx:VBox>

PieChart コントロールを列で表示するように、この例を変更することができます。次の例では、コントロールに「Detail」列を追加し、コントロールの列 2 に対してアイテムレンダラーを使用するように指定します。

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

  <mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
                             
      [Bindable]
      private var dpHierarchy:ArrayCollection= new ArrayCollection([
        {name:"Barbara Jennings", region: "Arizona", total:70, children:[  
          {detail:[{amount:5},{amount:10},{amount:20},{amount:45}]}]},
        {name:"Dana Binn", region: "Arizona", total:130,  children:[ 
          {detail:[{amount:15},{amount:25},{amount:35},{amount:55}]}]},
        {name:"Joe Smith", region: "California", total:229,  children:[ 
          {detail:[{amount:26},{amount:32},{amount:73},{amount:123}]}]},
        {name:"Alice Treu", region: "California", total:230, children:[ 
          {detail:[{amount:159},{amount:235},{amount:135},{amount:155}]}
        ]}
      ]);                                            
    ]]>
  </mx:Script>

  <mx:AdvancedDataGrid id="myADG" 
    width="100%" height="100%" 
    variableRowHeight="true">
    <mx:dataProvider>
       <mx:HierarchicalData source="{dpHierarchy}"/>
    </mx:dataProvider>
    <mx:columns>
        <mx:AdvancedDataGridColumn dataField="name" headerText="Name"/>
        <mx:AdvancedDataGridColumn dataField="total" headerText="Total"/>
        <mx:AdvancedDataGridColumn dataField="detail" headerText="Detail"/>
    </mx:columns>   
        
    <mx:rendererProviders>            
        <mx:AdvancedDataGridRendererProvider 
            dataField="detail" 
            renderer="myComponents.ChartRenderer" 
            columnIndex="2"/>         
    </mx:rendererProviders>   
  </mx:AdvancedDataGrid>
</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

 

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート