Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1(11.1.1) B52029-02 |
|
戻る |
次へ |
この章では、データ・バインドされたADFピボット・テーブル・コンポーネントを使用してデータを表示する方法とピボット・テーブルのカスタマイズ・オプションについて説明します。
この章に含まれる項は次のとおりです。
ADFピボット・テーブルのデータ・バインディングの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたADFピボット・テーブルの作成に関する項を参照してください。
ADFピボット・テーブル・コンポーネントでは、行および列のグリッド・データを表示します。表計算ソフトウェア同様、このコンポーネントでは、グリッド・データの小計と合計を生成するオプションが用意されています。他の表や表計算ソフトウェアとは異なり、ピボット・テーブルでは、データ・ラベルを一方のエッジから他方のエッジに切り替えてデータの表示を変えることができ、インタラクティブな分析がサポートされます。
ピボット・テーブルのインタラクティブな機能は、行ヘッダーと列ヘッダーにネストする複数の属性の表示に基づいています。ドラッグ・アンド・ドロップ操作を使用してこれらの属性のレイアウトを動的に変更できます。
図26-1に、行と列に複数の属性がネストするピボット・テーブルを示します。
ピボット・テーブルは、大規模なデータ・セットに対するオンデマンド・データ・スクロールをサポートします。ピボット・テーブルに表示されているデータのみがロードされます。ユーザーが垂直または水平にスクロールすると、データは新しいピボット・テーブル表示に合せてフェッチまたは破棄されます。図26-2に、オンデマンド・データ・スクロールを使用して大規模なデータ・セットを表示するピボット・テーブルを示します。
次のピボット・テーブルの用語のリストでは、売上げピボット・テーブルのサンプルとして図26-1を用語の説明に使用します。
行: ピボット・テーブル本体の行の左にある縦軸。サンプルでは、行エッジには年と製品の2つの行が含まれていて、ピボット・テーブルの各行で年と製品が表されています。
列: ピボット・テーブル本体の列の上に表示される横軸。サンプルでは、ピボット・テーブルの列エッジに尺度(SalesおよびUnits)、販路(All Channels)および地理的位置(WorldまたはBoston)の3つのレイヤーが含まれています。
レイヤー: 1つのエッジに表示される、ネストする属性。サンプルでは、列エッジに尺度、販路、地理的位置という3つのレイヤーが表示されています。行エッジには、年と製品の2つのレイヤーが表示されています。
ヘッダー・セル: 行または列に表示されているデータを示すラベル。行ヘッダーは行エッジに表示され、列ヘッダーは列エッジに表示されます。
データ・セル: ヘッダー情報ではなく、データ値を含むピボット・テーブル内のセル。サンプルでは、最初のデータ・セルに、20,000.000という値が含まれています。
QDR(修飾データ参照): 完全修飾データ参照を行、列または個々のセルにマップする引数。たとえば、サンプルの売上げピボット・テーブルでは、表内の最初のセルのQDRに次の情報が含まれる必要があります。
年: 2007
製品: Tents
尺度: Sales
販路: All Channels
地理: World
ピボット・テーブル・コンポーネントでは、データを表示およびやりとりするモデルを使用します。使用される特定のモデル・クラスはoracle.adf.view.faces.bi.model.DataModel
です。
行セット(フラット・ファイル)データ・コレクションを使用して、ピボット・テーブルにデータを提供できます。データ・バインディング処理時、「データ・バインディング」ダイアログでピボット・テーブルの行エッジまたは列エッジの目的の場所に各データ要素をドラッグできます。
データ・バインディング時、ピボット・テーブルの列の小計と合計も指定できます。
ADFピボット・テーブルのデータ・バインディングの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたADFピボット・テーブルの作成に関する項を参照してください。
ピボット・テーブルのレイヤーを同じ行エッジまたは列エッジの異なる場所または別の行エッジまたは列エッジにドラッグできます。たとえば、列エッジの地理レイヤーをドラッグし、行エッジの任意の場所にドロップできます。ピボット・テーブルのピボットはデフォルトで有効化されています。
マウスでカーソルをレイヤーの上に置くと、レイヤーのハンドルが表示され、カーソルが四方向矢印のドラッグ・カーソルに変わります。このハンドルを使用して、レイヤーを新しい場所へドラッグできます。行エッジのレイヤー上にカーソルを置くと、図26-3に示すとおり、そのレイヤーの上にハンドルが表示されます。列エッジのレイヤー上にカーソルを置くと、図26-4に示すとおり、そのレイヤーの左にハンドルが表示されます。
図26-3で年のレイヤー・ハンドルを行エッジから列エッジの尺度レイヤーと販路レイヤーの間にドラッグすると、ピボット・テーブルは図26-5に示すように変わります。
ピボットはピボット・ラベルおよびピボットを無効にするようにカスタマイズできます。
構造ウィンドウでdvt:pivotTable
コンポーネントを右クリックし、「プロパティに移動」を選択します。
(オプション)プロパティ・インスペクタの「外観」カテゴリのPivotLabelVisible
フィールドで、ドロップダウン・リストから「false」を選択してピボット・ハンドルのラベルの表示を無効にします。
(オプション)プロパティ・インスペクタの「動作」カテゴリのPivotEnabled
フィールドで、ドロップダウン・リストから「false」を選択してピボットを無効にします。
ユーザーはピボット・テーブルで複数のセルを選択できます。行ヘッダー、列ヘッダーまたはデータ・セルを含めて3つの領域のいずれか1つのみを一度に選択できます。
現在選択されているセルに基づいて、アプリケーションはポップアップ・メニューのカスタマイズされたコンテンツの表示などの機能を実装できます。例26-1に、現在選択されているヘッダー・セルを取得するためのサンプル・コードを示します。
例26-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(); }
ピボット・テーブルは、ピボット・テーブル内のデータのソートをサポートしています。ソートが有効化されているときにユーザーが列ヘッダー上にカーソルを置くと、昇順および降順ソート・アイコンが表示されます。デフォルトで、dvt:pivotTable
コンポーネントのsortMode
属性はgrouped
に設定されているため、行エッジの一番外側のレイヤーによってグループ化されたデータは効率的にソートされます。図26-6に、ピボット・テーブルの"World Sales"列のソート・アイコンを示します。ここでデータは"Year"列エッジの一番外側のレイヤーによってグループ化されています。
ピボット・テーブルの作成時、そのピボット・テーブル全体のサイズはデフォルト設定で決まります。ピボット・テーブルでは、全体サイズで使用できる領域内で行、列およびレイヤーのサイズが自動的に決まります。ピボット・テーブル全体のサイズを変更することも、その行、列およびレイヤーのサイズを変更することもできます。
ピボット・テーブルのデフォルト・サイズは、横300ピクセル、縦300ピクセルです。ピクセルを入力するかわりに、横、縦、あるいはその両方にパーセンテージの値を指定できます。このパーセンテージ値は、ピボット・テーブルで使用するページの割当て分を指します。
ピボット・テーブルのデフォルト設定をカスタマイズする手順:
ビジュアル・エディタで、ピボット・テーブルを含むページを表示します。
「ソース」をクリックしてJSPXページのXMLコードを表示します。
pivotTable
タグのinlineStyle
属性に、コードinlineStyle="width:value1;height:value2"
を入力します。ここで、value1
は、ピボット・テーブルの幅をピクセル値またはページに対するパーセンテージで表す整数、value2
は、ピボット・テーブルの高さをピクセル値またはページに対するパーセンテージで表す整数です。
例26-2に、表の幅をページ・サイズの50パーセントに、表の高さを400ピクセルに指定するinlineStyle
属性の設定を示します。
ピボット・テーブルでは、設計時に行、列およびレイヤーのサイズが自動的に決まります。行、列およびレイヤーのサイズは、行セパレータ、列セパレータまたはレイヤー・セパレータを新しい位置にドラッグすることで、実行時に変更できます。
行、列およびレイヤーのサイズを実行時に変更する手順:
行のサイズを変更する場合、次のようにします。
行ヘッダーでサイズを変更する行とその次の行の間のセパレータにカーソルを置きます。
カーソルが両方向の矢印に変わったら、クリックして目的の位置にドラッグします。
列のサイズを変更する場合、次のようにします。
列ヘッダーでサイズを変更する列とその次の列の間のセパレータにカーソルを置きます。
カーソルが両方向の矢印に変わったら、列セパレータをクリックして目的の位置にドラッグします。
レイヤーのサイズを変更する場合、次のようにします。
レイヤー・ヘッダーでサイズを変更するレイヤーとその次のレイヤーの間のセパレータにカーソルを置きます。
カーソルが両方向の矢印に変わったら、クリックして目的の位置にドラッグします。
ピボット・テーブルを他のADFコンポーネントに接続すると、部分ページ・レンダリング(PPR)を使用してチェック・ボックスによってトリガーされるピボット・テーブルの合計を表示できます。PPRでは、ページの特定のコンポーネントのみが再レンダリングされ、ページ全体をリフレッシュする必要がありません。PPRの詳細は、第7章「部分ページ・レンダリングの概要」を参照してください。
別のコンポーネントで発生したイベントに基づいてコンポーネントを再レンダリングするには、どのコンポーネントがトリガーかを宣言する必要があります。partialTriggers
属性を使用してピボット・テーブルの部分更新をトリガーするコンポーネントのIDのリストを提供します。ピボット・テーブルはトリガー・コンポーネントをリスニングし、いずれかのトリガー・コンポーネントがなんらかの更新を発生させるイベントを受信すると、ピボット・テーブルも更新されます。
例26-3に、チェック・ボックスがトリガーされたときに、合計を表示することによってピボット・テーブルを更新するサンプル・コードを示します。トリガー・コンポーネントはIDをpartialTriggers
値として使用します。
ピボット・テーブルのすべてのセルは、ヘッダー・セルまたはデータ・セルのいずれかです。セルをレンダリングする前、ピボット・テーブルではメソッド式がコールされます。dvt:pivotTable
タグの次の属性にメソッド式を指定することで、ピボット・テーブルのヘッダー・セルとデータ・セルのコンテンツをカスタマイズできます。
ヘッダー・セルには、次のいずれかの属性を使用します。
headerFormat
: ヘッダー・セルのコンテンツをカスタマイズする書式設定ルールの作成に使用します。
headerFormatManager
: アプリケーションのピボット・テーブルのヘッダー・セルの書式設定ルールに、カスタムの状態保存を指定する必要がある場合にのみ使用します。
データ・セルには、次のいずれかの属性を使用します。
dataFormat
: データ・セルのコンテンツをカスタマイズする書式設定ルールの作成に使用します。
dataFormatManager
: アプリケーションのピボット・テーブルのデータ・セルの書式設定ルールに、カスタムの状態保存を指定する必要がある場合にのみ使用します。
データ・セルのコンテンツのカスタマイズを指定するには、oracle.dss.adf.view.faces.bi.component.pivotTable.CellFormat
のインスタンスを返すメソッド式をコーディングする必要があります。
データ・セルにCellFormatオブジェクトのインスタンスを作成する手順:
書式設定するデータ・セルに対し、oracle.adf.view.faces.bi.component.pivotTable.DataCellContext
オブジェクトを作成します。DataCellContext
メソッドは、コンストラクタに次のパラメータを必要とします。
model
: ピボット・テーブルで使用されるdataModel
の名前。
row
: 操作対象のデータ・セルを含むゼロベースの行を指定する整数。
column
: 書式設定対象のデータ・セルを含むゼロベースの列を指定する整数。
qdr
: 書式設定対象のデータ・セルの完全修飾参照であるQDR
。
value
: 書式設定対象のデータ・セルの値を含むjava.lang.Object
。
ピボット・テーブルのdataFormat
属性のメソッド式にDataCellContext
を渡します。
メソッド式に、ピボット・テーブルのデータ・セルに適用する書式を指定するコードを記述します。このメソッド式はCellFormat
オブジェクトを返す必要があります。
CellFormat
オブジェクトのインスタンスには次の引数を指定できます。
コンバータ: javax.faces.convert.Converter
のインスタンス。セルの原値の数値、日付またはテキストの書式設定に使用されます。
CSSスタイル: セルのCSSスタイルの変更に使用されます。たとえば、この引数を使用して、セルの背景色を変更します。
CSSテキスト・スタイル: セルのテキストのCSSスタイルの変更に使用されます。たとえば、この引数を使用してテキストをボールドに設定します。
新規の原値: データ・モデルから返されるセルの基礎となる値の変更に使用されます。たとえば、州名の略記をフル・ネームに変更するよう選択できます。このケースでは、略記NYがNew Yorkに変更されます。
図26-7に、製品および製品カテゴリについて生成された売上げ合計のピボット・テーブルを示します。このピボット・テーブルでは、合計を含む行のテキストがボールド(テキスト・スタイルの変更)で、背景が影付き(スタイルの変更)で表示されます。この変更は、ピボット・テーブルの行ヘッダー・セルとデータ・セルの両方に表示されます。合計の行ヘッダーには、Sales Totalというテキストが含まれています。
ピボット・テーブルには、データ・セルのストップライト書式設定と条件付き書式設定も示されています。詳細は、26.8.4項「ピボット・テーブルでのストップライト書式設定と条件付き書式設定の作成」を参照してください。
例26-4に、必要なカスタム書式を生成するサンプル・コードを示します。この例には、dvt:pivotTable
タグのdataFormat
属性とheaderFormat
属性の両方にメソッド式のコードが含まれています。
例26-4 ピボット・テーブルのスタイルおよびテキスト・スタイルを変更するサンプル・コード
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; }
ピボット・テーブルのセルのストップライト書式設定と条件付き書式設定は、セルのコンテンツをカスタマイズする一例です。この種のカスタマイズでは、ユーザーはストップライト書式設定に関連付ける高値と低値を指定するようアプリケーションから要求されることがあります。通常、3つの色が次のように使用されます。
高値以上の値は緑に色付けされ、問題がないことを示します。
高値と低値の間の値は黄色に色付けされ、高度な基準に達していないことが警告されます。
低値以下の値は赤に色付けされ、最低限許容されるレベルに達していないことを示します。
図26-7に、最低限、許容範囲および基準以下の州の売上げに対するストップライト書式設定付きのデータ・セルを示します。
例26-5に、合計を表示しないピボット・テーブルでストップライト書式設定を行うコードを示します。合計を表示するピボット・テーブルでストップライト書式設定を行う場合は、(合計の行を扱う)例26-4のコードとストップライト書式設定と条件付き書式設定のコードを組み合せます。
例26-5 ストップライト書式設定と条件付き書式設定のサンプル・コード
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; }
ピボット・テーブル・データ・セルのコンテンツは、dvt:dataCell
子コンポーネントを使用してカスタマイズして、読取り専用コンポーネントまたは入力コンポーネントを各データ・セルに配置できます。ピボット・テーブルの各データ・セルの子コンポーネントを作成するかわりに、各データ・セルはピボット・テーブルの行などのデータ属性ごとに1回、繰り返しレンダリングまたはスタンプ設定されます。アクティビティのないすべてのコンポーネント、およびEditableValueHolder
またはActionSource
インタフェースを実装する大半のコンポーネントなど、特定のタイプのコンポーネントのみがサポートされます。スタンプ設定を使用して、データ・セルのカスタムCSSスタイルを指定することもできます。
子コンポーネントにスタンプが設定されるたびに、現在のセルのデータがEL式のデータ・セル・コンポーネントによって使用されるvar
プロパティにコピーされます。ピボット・テーブルのレンダリングが完了したら、var
プロパティは削除されるか前の値に戻ります。
データ・セルの編集は、dvt:dataCell
の子コンポーネントとして入力コンポーネントを使用することによって有効化されます。実行時に、ピボット・テーブルのセルをダブルクリックすることによって編集するセルを開くことができます。
例26-6に、データ・セルのスタンプ設定のサンプル・コードを示します。
例26-6 データ・セルのスタンプ設定のサンプル・コード
<dvt:pivotTable var="cellData" varStatus="cellStatus"> <!--This is an example of using an input component in a data cell. At runtime double-click to edit the cell.--> <dvt:dataCell dataAttribute="Sales"> <af:inputText value="#{cellData.dataValue}" /> </dvt:dataCell> <!--This is an example of using custom CSS styling in a data cell.--> <dvt:dataCell dataAttribute="Weight"> <af:outputText value="#{cellData.dataValue}" inlineStyle="#{cellStatus.cellFormat.textStyle}"/> </dvt:dataCell> <!-- This is an example of using the dataAttribute attribute to determine the type of input component inside data cell based on different measures.--> <dvt:dataCell dataAttribute="Available"> <af:selectBooleanCheckbox id="idselectbooleancheckbox" label="Availability" text="Item Available"autoSubmit="true" value="#{cellData.dataValue}"/> </dvt:dataCell> <!-- This is the default data cell that will be used for data attributes other than the ones specified before--> <dvt:dataCell> <af:outputText value="#{cellData.dataValue}" /> </dvt:dataCell> </dvt:pivotTable>
図26-8に、結果のピボット・テーブルを示します。
注意: キューブ内のセルのセットに値を一時的または完全に書き戻す操作(書戻しと呼ばれる)を行うには、ピボット・テーブルが書戻し操作をサポートするデータ・コントロールまたはデータ・モデルにバインドされている必要があります。行セット・ベースのデータ・コントロールはキューブに変換されるため、書戻し操作をサポートできません。 |
データ・セルのスタンプ設定では、dvt:dataCell
タグを使用し、af:image
、af:icon
またはaf:commandImageLink
を子タグとして使用してデータ・セルのカスタム・イメージを指定できます。例26-7に、ピボット・テーブル・データ・セルで、af:commandImageLink
をカスタム・イメージとして使用するサンプル・コードを示します。
例26-7 データ・セルへのカスタム・イメージの使用
<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)