ヘッダーをスキップ
Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド
11gリリース1 (11.1.1.7.0)
B52029-07
  目次へ移動
目次

前
 
次
 

27 ADFピボット・テーブル・コンポーネントの使用

この章では、データ・バインドされたADFピボット・テーブル・コンポーネントを使用してデータを表示する方法とピボット・テーブルのカスタマイズ・オプションについて説明します。

この章では、次の項目について説明します。

ADFピボット・テーブルのデータ・バインディングの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたピボット・テーブルの作成に関する項を参照してください。

27.1 ADFピボット・テーブル・コンポーネントの概要

ADFピボット・テーブル・コンポーネントでは、行および列のグリッド・データを表示します。表計算ソフトウェア同様、このコンポーネントでは、グリッド・データの小計と合計を生成するオプションが用意されています。ピボット・テーブルでは、データ・ラベルや関連するデータ・レイヤーを1つの行エッジまたは列エッジから別のエッジにピボットまたは移動して、データの表示を変えることができるため、インタラクティブな分析がサポートされます。

ピボット・テーブルのインタラクティブな機能は、行ヘッダーと列ヘッダーにネストする複数の属性の表示に基づいています。ドラッグ・アンド・ドロップ操作を使用してこれらの属性のレイアウトを動的に変更できます。

図27-1に、行と列に複数の属性がネストするピボット・テーブルを示します。

図27-1 複数の行および列を持つ売上げピボット・テーブル

行または列を持つ売上げピボット・テーブル

ピボット・フィルタ・バーは、ピボット・テーブルに追加可能なコンポーネントで、ピボット・テーブルのいずれかのエッジに表示されないレイヤーのピボット・テーブル・データをフィルタ処理できます。ユーザーは、ピボット・フィルタ・バーと関連するピボット・テーブル間でこれらのレイヤーをドラッグ・アンド・ドロップして、データの表示を変更することもできます。図27-2に、ピボット・テーブルのピボット・フィルタ・バーを示します。

図27-2 ピボット・フィルタ・バー・コンポーネント

ピボット・フィルタ・バー・コンポーネント

27.1.1 ピボット・テーブルの要素と用語

次のピボット・テーブルの用語のリストでは、売上げピボット・テーブルのサンプルとして図27-1を用語の説明に使用します。

  • エッジ: ピボット・テーブルの軸。次のエッジがあります。

    • 行エッジ: ピボット・テーブル本体の左にある縦軸。図27-1には、行エッジに年と製品の2つのレイヤーがあります。ピボット・テーブルの各行は、特定の年と製品の組合せを表します。

    • 列エッジ: ピボット・テーブル本体の上にある横軸。図27-1には、列エッジに尺度、販路、地理の3つのレイヤーがあります。ピボット・テーブルの各列は、特定の測定値(SalesまたはUnits)、特定の販路インジケータ(All Channels)、特定の地理上の位置(WorldまたはBoston)の組合せを表します。

    • ページ・エッジ: ピボット・フィルタ・バーで表されるエッジで、そのレイヤーを、行エッジおよび列エッジのレイヤーでフィルタ処理またはピボットすることができます。

  • レイヤー: 1つのエッジに表示される、ネストする属性。図27-1では、3つのレイヤーである尺度、販路、地理が列エッジに表示されています。行エッジには、年と製品の2つのレイヤーが表示されています。

  • ヘッダー・セル: 行または列に表示されているデータを示すラベル。行ヘッダーのセルは行エッジに表示され、列ヘッダーのセルは列エッジに表示されます。

  • データ・セル: ヘッダー情報ではなく、データ値を含むピボット・テーブル内のセル。サンプルでは、最初のデータ・セルに、20,000.000という値が含まれています。

  • QDR(修飾データ参照): 行、列または各セルの完全修飾データ参照。たとえば、図27-1では、ピボット・テーブル内の最初のセルのQDRに次の情報が含まれる必要があります。

    • 年: 2007

    • 製品: Tents

    • 尺度: Sales

    • 販路: All Channels

    • 地理: World

27.2 ピボット・テーブルのデータ要件の理解

ピボット・テーブル・コンポーネントでは、データを表示およびやりとりするモデルを使用します。使用される特定のモデル・クラスはoracle.adf.view.faces.bi.model.DataModelです。

行セット(フラット・ファイル)データ・コレクションを使用して、ピボット・テーブルにデータを提供できます。データ・バインディング処理時、「データ・バインディング」ダイアログでピボット・テーブルの行エッジまたは列エッジの目的の場所に各データ要素をドラッグできます。

データ・バインディング時は、ピボット・テーブルの行と列の小計や合計の指定、実行時のドリルダウン操作の指定、重複レコードの集計方法の定義、初期ソート基準の設定などを行うこともできます。

ADFピボット・テーブルのデータ・バインディングの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたピボット・テーブルの作成に関する項を参照してください。

27.3 レイヤーのピボット

ピボット・テーブルのレイヤーは、同じエッジの別の場所や異なるエッジにドラッグできます。この操作はピボットと呼ばれ、デフォルトで有効になっています。

レイヤー上にカーソルを置くと、レイヤーのピボット・ハンドルとオプションのピボット・ラベルが表示されます。ピボット・ハンドル上にカーソルを置くと、カーソルは4つの先端が付いた矢印のドラッグ・カーソルに変わります。このハンドルを使用して、レイヤーを新しい場所へドラッグできます。行エッジのレイヤー上にカーソルを置くと、図27-3に示すとおり、そのレイヤーの上にピボット・ハンドルが表示されます。

図27-3 行エッジでのピボット・ハンドルの表示

行エッジでのピボット・ハンドルの表示。

列エッジのレイヤー上にカーソルを置くと、図27-4に示すとおり、そのレイヤーの左にピボット・ハンドルが表示されます。

図27-4 列エッジでのピボット・ハンドルの表示

列エッジでのピボット・ハンドルの表示。

図27-3で時間(年)のピボット・ハンドルを行エッジから列エッジの尺度(Sales)レイヤーと販路レイヤーの間にドラッグすると、ピボット・テーブルは図27-5に示すように変わります。

図27-5 年のピボット後の売上げピボット・テーブル

年をピボットした後の売上げピボット・テーブル。

ピボットはピボット・ラベルおよびピボットを無効にするようにカスタマイズできます。

ピボット・テーブルのピボットをカスタマイズする手順:

  1. 構造ウィンドウでdvt:pivotTableコンポーネントを右クリックし、「プロパティに移動」を選択します。

  2. (オプション)プロパティ・インスペクタの「外観」カテゴリのPivotLabelVisibleフィールドで、ドロップダウン・リストから「false」を選択してピボット・ハンドルのラベルの表示を無効にします。

  3. (オプション)プロパティ・インスペクタの「動作」カテゴリのPivotEnabledフィールドで、ドロップダウン・リストから「false」を選択してピボットを無効にします。

27.4 ピボット・テーブルへの大規模なデータ・セットの表示

ピボット・テーブルは、デフォルトで大規模なデータ・セットに対するオンデマンド・データ・スクロールをサポートします。ピボット・テーブルに表示されているデータのみがロードされます。ユーザーが垂直または水平にスクロールすると、データは新しいピボット・テーブル表示に合せてフェッチまたは破棄されます。図27-6に、オンデマンド・データ・スクロールを使用して大規模なデータ・セットを表示するピボット・テーブルを示します。

図27-6 ピボット・テーブルのオンデマンド・データ・スクロール

ピボット・テーブルのオンデマンド・データ・スクロール

デスクトップ・アプリケーションやタッチ装置のモバイル・ブラウザに対しては、ピボット・テーブルの大規模なデータ・セットのナビゲーション用に、スクロール・バーのかわりにページ・コントロールを構成できます。このコントロールは、データ・フェッチ・サイズを超える行が存在し、かつコンポーネントがそれを含むレイアウト・コンポーネントによって拡大されない場合にのみ使用できます。たとえば、図27-7に示すように、列のページ・コントロールはピボット・テーブルの上部に、行のページ・コントロールはピボット・テーブルの下部に表示されます。

図27-7 ピボット・テーブルの列と行のページ・コントロール

ピボット・テーブルの列と行のページ・コントロール

ADF Faces Webアプリケーションを開発している場合、ピボット・テーブルではデフォルトで、フェッチしているデータのサイズを超えるデータを表示するために垂直または水平のスクロール・バーが使用されます。pivotTableコンポーネントに、かわりにページ・コントロールを構成するには、scrollPolicy属性をpageに設定します。次に例を示します。

scrollPolicy="page"

ただし、標準ADF Faces Webアプリケーションはモバイル・ブラウザで動作しますが、ユーザーの操作が異なり、スクリーン・サイズが制限されるため、アプリケーションをモバイル・ブラウザで実行する必要がある場合は、タッチ装置に固有のバージョンのページを作成する必要があります。詳細は、付録D「ADF Facesを使用したタッチ装置のWebアプリケーションの作成」を参照してください。

デフォルトでは、モバイル・デバイスにレンダリングする場合、ピボット・テーブルにはユーザーが特定の行のページにジャンプできるページ・コントロールが表示されます。モバイル・デバイスにピボット・テーブルを表示するには、次のようにします。

ピボット・テーブルがフロー・コンテナの中にない場合、または属性が正しく設定されていない場合は、ページではなくスクロールバーが表示されます。

スクロール・バーまたはページ・コントロールを使用して大規模なデータ・セットを表示する場合は、各行ヘッダー・レイヤーの上、および各列ヘッダー・レイヤーの横に常にラベルが表示されるようにピボット・テーブルを構成することで、読みやすさを高めることもできます。pivotTableコンポーネントで行および列ヘッダーのラベルを常に表示するように構成するには、layerLabelMode属性をrenderedに設定します。デフォルト値はhiddenです。

27.5 ピボット・テーブルでの選択の使用

ピボット・テーブルで選択すると、ピボット・テーブルの1つ以上のセルを選択できます。行ヘッダー、列ヘッダーまたはデータ・セルを含めて3つの領域のいずれか1つのみを一度に選択できます。

現在選択されているセルに基づいて、アプリケーションはポップアップ・メニューのカスタマイズされたコンテンツの表示などの機能を実装できます。例27-1に、現在選択されているヘッダー・セルを取得するためのサンプル・コードを示します。

例27-1 選択されているヘッダー・セルを取得するためのサンプル・コード

UIPivotTable pt = getPivotTable()
if (pt == null)
    return null;
HeaderCellSelectionSet headerCells = null;
if (pt.getSelection().getColumnHeaderCells().size() > 0) {
    headerCells = pt.getSelection().getColumnHeaderCells();
} else if (pt.getSelection().getRowHeaderCells().size() > 0) {
    headerCells = pt.getSelection().getRowHeaderCells();
}

実行時にデータ・セルを選択すると、図27-8に示すように、セルが強調表示されます。

図27-8 選択されたデータ・セル

選択されたデータ・セル

セルをダブルクリックするか、セルを選択して[F2]キーを押すことで、編集可能なデータ・セルが開き編集できます。図27-9に示すように、直接編集する場合に選択したデータ・セルが表示されます。

図27-9 直接編集用に開かれたデータ・セル

直接編集用に開かれたデータ・セル。

図27-10に示すように、ドロップダウン・リストで編集する場合に選択したデータ・セルが表示されます。

図27-10 ドロップダウン・リスト編集用に開かれたデータ・セル

ドロップダウン・リスト編集用に開かれたデータ・セル

データ・セルの編集の有効化の詳細は、27.12項「ピボット・テーブルのデータ・セルのスタンプと編集」を参照してください。

27.6 ピボット・テーブルでのソート

ピボット・テーブルは、ピボット・テーブル内のデータのソートをサポートしています。ソートが有効な場合、列ヘッダーの最も内側のレイヤー上にカーソルを置くと、昇順および降順のソート・アイコンが表示されます。デフォルトでは、dvt:pivotTableコンポーネントのsortMode属性はgroupedに設定されているため、データは行エッジの最も外側のレイヤーを基準にグループ化されて効率的にソートされます。図27-11に、ピボット・テーブルの「World」売上げ列のソート・アイコンを示します。この場合、データは年の行エッジの最も外側のレイヤーを基準にグループ化されています。

図27-11 ピボット・テーブルの昇順および降順ソート・アイコン

ピボット・テーブルの昇順および降順ソート・アイコン

27.7 ピボット・テーブルのサイズ

ピボット・テーブルの作成時、そのピボット・テーブル全体のサイズはデフォルト設定で決まります。ピボット・テーブルでは、全体サイズで使用できる領域内で行、列およびレイヤーのサイズが自動的に決まります。ピボット・テーブル全体のサイズを変更することも、その行、列およびレイヤーのサイズを変更することもできます。

27.7.1 ピボット・テーブル全体のサイズの設定方法

ピボット・テーブルのデフォルト・サイズは、横300ピクセル、縦300ピクセルです。ピクセルを入力するかわりに、横、縦、あるいはその両方にパーセンテージの値を指定できます。このパーセンテージ値は、ピボット・テーブルで使用するページの割当て分を指します。

ピボット・テーブルのデフォルト設定をカスタマイズする手順:

  1. ビジュアル・エディタで、ピボット・テーブルを含むページを表示します。

  2. 「ソース」をクリックしてJSPXページのXMLコードを表示します。

  3. pivotTableタグのinlineStyle属性に、コードinlineStyle="width:value1;height:value2"を入力します。ここで、value1は、ピボット・テーブルの幅の単位タイプを含む整数、value2は、ピボット・テーブルの高さの単位タイプを含む整数です。

例27-2に、表の幅をページ・サイズの50パーセントに、表の高さを400ピクセルに指定するinlineStyle属性の設定を示します。

例27-2 ピボット・テーブルのサイズをカスタマイズするXMLコード

<dvt:pivotTable
.
.
.
   inlineStyle="width:50%;height:400px">
</dvt:pivotTable>

27.7.2 行、列およびレイヤーのサイズを変更する方法

ピボット・テーブルは、初期表示の際は、行、列、レイヤーのサイズが自動設定されます。行、列またはレイヤーのサイズは、行セパレータ、列セパレータまたはレイヤー・セパレータを新しい位置にドラッグすることで、実行時に変更できます。

行、列およびレイヤーのサイズを実行時に変更する手順:

  1. 行のサイズを変更する場合、次のようにします。

    1. 行ヘッダーでサイズを変更する行とその次の行の間のセパレータにカーソルを置きます。

    2. カーソルが両方向の矢印に変わったら、行セパレータをクリックして目的の位置にドラッグします。

  2. 列のサイズを変更する場合、次のようにします。

    1. 列ヘッダーでサイズを変更する列とその次の列の間のセパレータにカーソルを置きます。

    2. カーソルが両方向の矢印に変わったら、列セパレータをクリックして目的の位置にドラッグします。

  3. レイヤーのサイズを変更する場合、次のようにします。

    1. 行または列ヘッダーでサイズを変更するレイヤーとその次のレイヤーの間のセパレータにカーソルを置きます。

    2. カーソルが両方向の矢印に変わったら、レイヤー・セパレータをクリックして目的の位置にドラッグします。

27.7.3 行、列およびレイヤーのサイズの変更について

行、列またはレイヤーのサイズを変更した場合、ピボット操作を実行するまで、サイズは新しいサイズのままです。ピボット操作後、新しいサイズはクリアされ、ピボット・テーブルの行、列およびレイヤーは元のサイズに戻ります。

ピボット操作を行わない場合、セッション中は新しいサイズのままになります。ただし、MDS(メタデータ・サービス)のカスタマイズでこれらのサイズを保存することはできません。

27.8 部分ページ・レンダリングによるピボット・テーブルの更新

ピボット・テーブルを更新できます。たとえば、部分ページ・レンダリング(PPR)を使用してチェック・ボックスによってトリガーされるピボット・テーブルの合計を表示できます。PPRを使用すると、ページ全体をリフレッシュせずにページ上の特定のコンポーネントのみをレンダリングできます。PPRの詳細は、第7章「部分ページ・レンダリングの概要」を参照してください。

別のコンポーネントで発生したイベントに基づいてコンポーネントを再レンダリングするには、どのコンポーネントがトリガーかを宣言する必要があります。partialTriggers属性を使用してピボット・テーブルの部分更新をトリガーするコンポーネントのIDのリストを提供します。ピボット・テーブルはトリガー・コンポーネントをリスニングし、いずれかのトリガー・コンポーネントがなんらかの更新を発生させるイベントを受信すると、ピボット・テーブルも更新されます。

例27-3に、チェック・ボックスがトリガーされたときに、合計を表示することによってピボット・テーブルを更新するサンプル・コードを示します。トリガー・コンポーネントはIDをpartialTriggers値として使用します。

例27-3 ピボット・テーブルの部分更新

<dvt:pivotTable id="goodPT"
    value="#{richPivotTableModel.dataModel}"
    partialTriggers="showTotals"/>

  <af:selectBooleanCheckbox id="showTotals" autoSubmit="true" label="Show Totals"
    value="#{richPivotTableModel.totalsEnabled}"/>

27.9 ピボット・テーブルからのエクスポート

ピボット・テーブルのデータは、Microsoft Excelスプレッドシートにエクスポートできます。コマンド・ボタンやコマンド・リンクなどのアクション・ソースを作成し、dvt:exportPivotTableDataコンポーネントを追加して、エクスポートするデータと関連付けます。ピボット・テーブル全体がエクスポートされるように、またはユーザーが選択した行のみがエクスポートされるようにdvt:exportPivotTableDataコンポーネントを構成できます。たとえば、図27-12に、ユーザーがExcelスプレッドシートにデータをエクスポートできるコマンド・ボタン・コンポーネントが含まれるピボット・テーブルを示します。

図27-12 Excelへのエクスポート・コマンド・ボタンが表示されたピボット・テーブル

Excelへのエクスポート・ボタンが表示されたピボット・テーブル

ユーザーがコマンド・ボタンをクリックすると、すべての行と列はエクスポートされ、デフォルトでタグのfilename属性に指定されたファイルにExcel形式で書き込まれます。または、ユーザーが選択した行のみがエクスポートされるように、exportedData属性をselectedに設定して、dvt:exportPivotTableDataコンポーネントを構成することも可能です。例27-4に、「Excelにエクスポート」コマンド・ボタンのサンプル・コードを示します。

例27-4 「Excelにエクスポート」コマンド・ボタンのサンプル・コード

<af:commandButton text="Export To Excel" immediate="true">
  <dvt:exportPivotTableData type="excelHTML" exportedId="goodPT"
           filename="updated_export.xls" title="PivotTable export"/>
</af:commandButton>

図27-13に、結果のExcelスプレッドシートを示します。

図27-13 ピボット・テーブルからExcelスプレッドシートへのエクスポート

ピボット・テーブルからExcelスプレッドシートへのエクスポート

注意:

ファイルがファイルの拡張子で指定された形式と異なる旨の警告がExcelで表示される場合があります。この警告は無視して問題ありません。


27.10 印刷、電子メールまたは添付ファイル・モードでのピボット・テーブルの表示

ADF Facesでは、印刷、電子メール、または電子メールへの添付ファイル用の簡略化されたモードで、ADF Faces WebアプリケーションからJSFページを出力できます。たとえば、ユーザーがページ(またはページの一部)を印刷できるようにし、ただしWebブラウザでレンダリングされているとおりにページを印刷するのではなく、スクロール・バーやボタンなど、印刷ページに必要ないアイテムを削除することができます。ページが電子メールで送信される場合は、電子メール・クライアントが正しく表示できるようにページを簡略化する必要があります。このような出力用に簡略化されたページを作成する場合の詳細は、第35章「様々な出力モードの使用」を参照してください。

添付ファイル・モードで出力するJSFページにピボット・テーブルとピボット・フィルタ・バーが表示されている場合は、次のようになります。

27.11 ピボット・テーブルのセルのコンテンツのカスタマイズ

ピボット・テーブルのすべてのセルは、ヘッダー・セルまたはデータ・セルのいずれかです。セルをレンダリングする前、ピボット・テーブルではメソッド式がコールされます。dvt:pivotTableタグの次の属性にメソッド式を指定することで、ピボット・テーブルのヘッダー・セルとデータ・セルのコンテンツをカスタマイズできます。

27.11.1 データ・セルに対するCellFormatオブジェクトの作成方法

データ・セルのコンテンツのカスタマイズを指定するには、oracle.dss.adf.view.faces.bi.component.pivotTable.CellFormatのインスタンスを返すメソッド式をコーディングする必要があります。

データ・セルにCellFormatオブジェクトのインスタンスを作成する手順:

  1. 書式設定するデータ・セルに対し、oracle.adf.view.faces.bi.component.pivotTable.DataCellContextオブジェクトを作成します。DataCellContextメソッドは、コンストラクタに次のパラメータを必要とします。

    • model: ピボット・テーブルで使用されるdataModelの名前。

    • row: 操作対象のデータ・セルを含むゼロベースの行を指定する整数。

    • column: 書式設定対象のデータ・セルを含むゼロベースの列を指定する整数。

    • qdr: 書式設定対象のデータ・セルの完全修飾参照であるQDR

    • value: 書式設定対象のデータ・セルの値を含むjava.lang.Object

  2. ピボット・テーブルのdataFormat属性のメソッド式にDataCellContextを渡します。

  3. メソッド式に、ピボット・テーブルのデータ・セルに適用する書式を指定するコードを記述します。このメソッド式はCellFormatオブジェクトを返す必要があります。

27.11.2 CellFormatオブジェクトの作成方法

CellFormatオブジェクトのインスタンスには次の引数を指定できます。

  • コンバータ: javax.faces.convert.Converterのインスタンス。セルの原値の数値、日付またはテキストの書式設定に使用されます。

  • CSSスタイル: セルのCSSスタイルの変更に使用されます。たとえば、この引数を使用して、セルの背景色を変更します。

  • CSSテキスト・スタイル: セルのテキストのCSSスタイルの変更に使用されます。たとえば、この引数を使用してテキストをボールドに設定します。

  • 新規の原値: データ・モデルから返されるセルの基礎となる値の変更に使用されます。たとえば、州名の略記をフル・ネームに変更するよう選択できます。このケースでは、略記NYがNew Yorkに変更されます。

27.11.3 書式とテキスト・スタイルの変更方法

書式とテキスト・スタイルを適用して、ピボット・テーブルに表示されるデータの特徴を強調表示することができます。図27-14に、製品および製品カテゴリについて生成された売上げ合計のピボット・テーブルを示します。このピボット・テーブルでは、合計を含む行のテキストが太字(テキスト・スタイルの変更)で、背景が影付き(スタイルの変更)で表示されます。この変更は、ピボット・テーブルの行ヘッダー・セルとデータ・セルの両方に表示されます。合計の行ヘッダーには、Sales Totalというテキストが含まれています。

ピボット・テーブルには、データ・セルのストップライト書式設定と条件付き書式設定も示されています。詳細は、27.11.4項「ピボット・テーブルでのストップライト書式設定と条件付書式設定の作成方法」を参照してください。

図27-14 製品カテゴリごとの売上げデータ

製品カテゴリごとの売上げデータ

例27-5に、ストップライト書式設定ではなく、売上げの合計に必要なカスタム書式を作成するサンプル・コードを示します。この例には、dvt:pivotTableタグのdataFormat属性とheaderFormat属性の両方にメソッド式のコードが含まれています。ピボット・テーブルにストップライトの書式設定も含める場合は、例27-6のコードを含めます。

例27-5 ピボット・テーブルのスタイルおよびテキスト・スタイルを変更するサンプル・コード

public CellFormat getDataFormat(DataCellContext cxt)
{
    CellFormat cellFormat = new CellFormat(null, null, null);
    QDR qdr = cxt.getQDR();
    //Obtain a reference to the product category column.
    Object productCateg = qdr.getDimMember("ProductCategory");
     //Obtain a reference to the product column.
    Object product = qdr.getDimMember("ProductId");

     if (productCateg != null && productCateg.toString().equals("Sales Total")) 
      {
       cellFormat.setTextStyle("font-weight:bold")
       cellFormat.setStyle("background-color:#C0C0C0");
      }
     else if (product != null && product.toString().equals("Sales Total")
      {
       cellFormat.setTextStyle("font-weight:bold");
       cellFormat.setStyle("background-color:#C0C0C0");
      }
    return cellFormat;
}


public CellFormat getHeaderFormat(HeaderCellContext cxt) 
{
  if (cxt.getValue() != null) 
   {
    String header = cxt.getValue().toString();
    if (header.equals("Sales Total")) 
     {
        return new CellFormat(null, "background-color:#C0C0C0", 
                              "font-weight:bold");
      }
    }
    return null;
  }

27.11.4 ピボット・テーブルでのストップライト書式設定と条件付書式設定の作成方法

ピボット・テーブルのセルのストップライト書式設定と条件付き書式設定は、セルのコンテンツをカスタマイズする一例です。この種のカスタマイズでは、ユーザーはストップライト書式設定に関連付ける高値と低値を指定するようアプリケーションから要求されることがあります。通常、3つの色が次のように使用されます。

  • 高値以上の値は緑に色付けされ、問題がないことを示します。

  • 高値と低値の間の値は黄色に色付けされ、高度な基準に達していないことが警告されます。

  • 低値以下の値は赤に色付けされ、最低限許容されるレベルに達していないことを示します。

図27-14に、最低限、許容範囲および基準以下の州の売上げに対するストップライト書式設定付きのデータ・セルを示します。

例27-6に、合計を表示しないピボット・テーブルでストップライト書式設定を行うコードを示します。合計を表示するピボット・テーブルでストップライト書式設定を行う場合は、(合計の行を扱う)例27-5のコードとストップライト書式設定と条件付き書式設定のコードを組み合せます。

例27-6 ストップライト書式設定と条件付き書式設定のサンプル・コード

public CellFormat getDataFormat(DataCellContext cxt)
{
   //Use low and high values provided by the application.
  double low = m_rangeValues.getMinimum().doubleValue() * 100;
  double high = m_rangeValues.getMaximum().doubleValue() * 100;

  CellFormat cellFormat = new CellFormat(null, null, null);

 // Create stoplight format
 if (isStoplightingEnabled()) 
 {
   String color = null;
   Object value = cxt.getValue();
   if (value != null && value instanceof Number) 
   {
       double dVal = ((Number)value).doubleValue();
       if (dVal <= low) 
       {
         color = "background-color:" + ColorUtils.colorToHTML(m_belowColor) + ";";
       }
       else if (dVal > low && dVal <= high) 
       {
         color = "background-color:" + ColorUtils.colorToHTML(m_goodColor) + ";";
       }
       else if (dVal > high) 
       {
         color = "background-color:" + ColorUtils.colorToHTML(m_aboveColor) + ";";
       }
    }
    cellFormat.setStyle(color);
  }
    return cellFormat;
}

27.12 ピボット・テーブルのデータ・セルのスタンプ設定および編集

ピボット・テーブル・データ・セルのコンテンツは、dvt:dataCell子コンポーネントを使用してスタンプ設定して、読取り専用コンポーネントまたは入力コンポーネントを各データ・セルに配置できます。スタンプを使用する場合、子コンポーネントは、ピボット・テーブルのすべてのデータ・セルに作成されるわけではありません。正しくは、dvt:dataCellコンポーネントのコンテンツが、ピボット・テーブルの行などのデータ属性ごとに1回、繰り返しレンダリング(スタンプ)されます。アクティビティのないすべてのコンポーネント、およびEditableValueHolderまたはActionSourceインタフェースを実装する大半のコンポーネントなど、特定のタイプのコンポーネントのみがサポートされます。スタンプ設定を使用して、データ・セルのカスタムCSSスタイルを指定することもできます。

子コンポーネントにスタンプが設定されるたびに、現在のセルのデータがEL式のデータ・セル・コンポーネントによって使用されるvarプロパティにコピーされます。ピボット・テーブルのレンダリングが完了したら、varプロパティは削除されるか前の値に戻ります。

データ・セルの編集は、dvt:dataCellの子コンポーネントとして入力コンポーネントを使用することによって有効化されます。ピボット・テーブルでセルをダブルクリックするか、セルを選択して[F2]キーを押すことで、実行時にセルを開いて編集できます。

例27-7に、データ・セルのスタンプ設定のサンプル・コードを示します。

例27-7 データ・セルのスタンプ設定のサンプル・コード

<dvt:pivotTable var="cellData" varStatus="cellStatus">
  <dvt:dataCell>
    <af:switcher defaultFacet="default" facetName="#{cellStatus.members.MeasDim.value}">
      <f:facet name="Sales">
        <af:inputText value="#{cellData.dataValue}"   />
      </f:facet>
      <f:facet name="Weight">
        <af:outputText value="#{cellData.dataValue}" inlineStyle="#{cellStatus.cellFormat.textStyle}"/>
      </f:facet>
      <f:facet name="Available">
        <af:selectBooleanCheckbox id="idselectbooleancheckbox" label="Availability" text="Item Available" autoSubmit="true" value="#{cellData.dataValue}"/>
      </f:facet>
      <f:facet name="default">
        <af:outputText  value="#{cellData.dataValue}"   />
      </f:facet>
    </af:switcher>
  </dvt:dataCell>
</dvt:pivotTable>

図27-15に、結果のピボット・テーブルを示します。

図27-15 データ・セルのスタンプ設定を使用したピボット・テーブル

データ・セルのスタンプ設定を使用したピボット・テーブル

注意:

キューブ内のセルのセットに値を一時的または完全に書き戻す操作(書戻しと呼ばれる)を行うには、ピボット・テーブルが書戻し操作をサポートするデータ・コントロールまたはデータ・モデルにバインドされている必要があります。行セット・ベースのデータ・コントロールはキューブに変換されるため、書戻し操作をサポートできません。


27.12.1 データ・セルのカスタム・イメージの指定方法

データ・セルのスタンプ設定では、dvt:dataCellタグを使用し、af:imageaf:iconまたはaf:commandImageLinkを子タグとして使用してデータ・セルのカスタム・イメージを指定できます。例27-8に、ピボット・テーブル・データ・セルで、af:commandImageLinkをカスタム・イメージとして使用するサンプル・コードを示します。

例27-8 データ・セルへのカスタム・イメージの使用

<dvt:pivotTable var="cellData" varStatus="cellStatus">
  
  <!-- This is the default data cell that will be used for all data attributes-->
  <dvt:dataCell>
    <af:commandImageLink text="Go"
                     icon="/images/go.gif"
                     actionListener="#{pivotTableBean.imageLinkClick}"/>    
    <af:outputText  value="#{cellData.dataValue}"   />
  </dvt:dataCell>
</dvt:pivotTable>

イメージに関連するアクションは登録されたリスナー、actionListenerを使用して処理されます。Beanクラスでは、イメージ・リンクがクリックされると呼び出されるメソッドを次のように指定します。

public void imageLinkClick (javax.faces.event.ActionEvent.action)

27.12.2 ヘッダー・セルのイメージ、アイコン、リンクおよび読取り専用コンテンツの指定方法

データ・セルでスタンプ設定を使用する場合と同様に、dvt:headerCell子コンポーネントでヘッダー・セルのコンテンツをカスタマイズして、各ヘッダー・セルに読取り専用コンポーネントを配置できます。af:outputTextaf:imageaf:iconaf:commandImageLinkおよびaf:commandLinkなどの読取り専用コンポーネントまたは編集不可コンポーネントのみがサポートされます。

デフォルトでは、ヘッダー・セルの長いテキスト文字列の折返しはサポートされません。dvt:headerCellコンポーネントのwhiteSpace属性を使用して、この設定をデフォルトのnoWrapからnormalに変更することにより、ヘッダー・セルの折返しを指定できます。

例27-9に、ピボット・テーブルのヘッダー・セルで、af:outputTextに折返しを使用し、af:commandImageLinkaf:iconをそれぞれカスタム・イメージおよびカスタム・アイコンとして使用するサンプル・コードを示します。

例27-9 ヘッダー・セルでのカスタム・コンポーネントの使用

<dvt:pivotTable id="goodPT"
                   binding="#{pivotTableHeaderCellDemo.pivotTable}"
                   contentDelivery="immediate"
                   value="#{pivotTableHeaderCellDemo.dataModel}"
                   var="cellData"
                   varStatus="cellStatus">
<!-- header cell components -->
<dvt:headerCell whiteSpace="normal">
   <af:switcher defaultFacet="default" facetName="#{cellData.layerName}">
     <f:facet name="Geography">
       <af:outputText value="#{cellData.label}"
          shortDesc="#{cellData.label}"/>
       <af:icon name="info" shortDesc="#{cellData.indent}" />
     </f:facet>
       <f:facet name="Channel">
       <af:outputText value="#{cellData.label}"  />
       <af:commandImageLink shortDesc="Sample commandImageLink"
         icon="/resources/images/pivotTableCSVDemo/smily-normal.gif"
         hoverIcon="/resources/images/pivotTableCSVDemo/smily-glasses.gif"
         />
       <af:commandButton text="Go to Tag Guide page" immediate="true"
         action="guide" />
      </f:facet>
 
      <f:facet name="Product">
        <af:outputText value="#{cellData.label}" />
        <af:commandButton text="Go to Tag Guide page" immediate="true"
         action="guide" />
      </f:facet>
 
      <f:facet name ="default">
        <af:commandLink text="#{cellData.label}"
         immediate="true" action="guide"/>
      </f:facet>
    </af:switcher>
  </dvt:headerCell>
...
</dvt:pivotTable>

図27-16に、結果のピボット・テーブルを示します。

図27-16 カスタマイズされたヘッダー・セルを含むピボット・テーブル

カスタマイズされたヘッダー・セルを含むピボット・テーブル

27.13 ピボット・テーブルでのピボット・フィルタ・バーの使用

ピボット・フィルタ・バーを追加することで、ピボット・テーブルのデータ・フィルタ機能を強化できます。ピボット・テーブルの行エッジまたは列エッジにまだ表示されていないデータのゼロ個以上のレイヤーは、ページ・エッジに表示されます。図27-17に、ピボット・テーブルに表示されるデータのフィルタ処理に使用可能なレイヤー(コンポーネントおよび地理上の位置)を含むピボット・フィルタ・バーを示します。

図27-17 データ・レイヤー・フィルタを含むピボット・フィルタ・バー

データ・レイヤー・フィルタを含むピボット・フィルタ・バー。

行エッジ、列エッジまたはページ・エッジ間でレイヤーをピボットして、ピボット・テーブルのデータの表示を変更することもできます。必要に応じて、ピボット・ハンドルを使用してエッジ間でレイヤーをドラッグします。図27-18に、販路データ・レイヤーがページ・エッジにピボットされる場合に変更されたピボット・テーブルとピボット・フィルタ・バーを示します。

図27-18 ピボット後のピボット・テーブルとピボット・フィルタ・バー

ピボット後のピボット・テーブルとピボット・フィルタ・バー

27.13.1 ピボット・フィルタ・バーとピボット・テーブルを関連付ける方法

ピボット・フィルタ・バー・コンポーネントdvt:pivotFilterBarと、ピボット・テーブル・コンポーネントdvt:pivotTableを関連付けるには、両方のコンポーネントが連携するようにデータ・モデルと関連するプロパティを構成します。図27-10に、ピボット・フィルタ・バーとピボット・テーブルを関連付けるサンプル・コードを示します。

例27-10 ピボット・フィルタ・バーのサンプル・コード

<dvt:pivotFilterBar id="pf1" value="#{binding.pt.pivotFilterBarModel}"
     modelName="pt1Model"/>
<dvt:pivotTable id="pt1" value="#{binding.pt.dataModel}"  modelName="pt1Model"
     partialTriggers="pf1"/>

次のいずれかの方法で、ピボット・フィルタ・バーとピボット・テーブルを関連付けることができます。

  • データ・コントロール・パネルを使用してピボット・テーブルを作成します。

    データ・コントロール・パネルのデータ・コレクションをドラッグしてページにピボット・テーブルを作成する場合、ピボット・テーブルの作成ウィザードの「表示属性の選択」ページには、ピボット・テーブルと関連付けるピボット・フィルタ・バーを作成するオプションがあります。ページ・エッジのデータ・レイヤーを表すゼロ個以上の属性を指定するように選択できます。データ・モデルと関連するプロパティは、自動で構成されます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたピボット・テーブルの作成に関する項を参照してください。

  • データにバインドされるピボット・テーブルにピボット・フィルタ・バーを追加します。

    コンポーネント・パレットの「ADFデータ視覚化」ページで、データ・コレクションにバインドされているdvt:pivotTable要素の上にdvt:pivotFilterBar要素をドラッグできます。このインスタンスでは、ピボット・フィルタ・バーとピボット・テーブルが連携するように、データ・モデルと関連するプロパティを構成する必要があります。

  • データにバインドされないピボット・テーブルにピボット・フィルタ・バーを追加します。

    コンポーネント・パレットの「ピボット・テーブル」パネルの「ADFデータ視覚化」ページで、データ・コレクションにバインドされていないdvt:pivotTable要素の上にdvt:pivotFilterBar要素をドラッグできます。このインスタンスでは、ピボット・フィルタ・バーとピボット・テーブルが連携するように、データ・モデルと関連するプロパティを構成する必要があります。