| Oracle® Fusion Middleware Oracle ADF FacesによるWebユーザー・インタフェースの開発 12c (12.2.1.2.0) E82917-02 |
|
 前 |
 次 |
この章の内容は次のとおりです。
ADFデータ視覚化コンポーネントには、データの表示および分析を行うための非常にグラフィカルな表形式の機能が用意されています。このコンポーネントでは、次の機能が提供されます。
ADFデータ・コントロールの使用をサポートするADF Facesのフル・コンポーネントです。
データ・コントロール・パネル、JSFビジュアル・エディタ、「プロパティ」ウィンドウおよび「コンポーネント」ウィンドウを使用した宣言設計時作成が提供されます。
データ視覚化コンポーネントには、グラフ、統計図表、ゲージ、NBox、ピボット・テーブルとピボット・フィルタ・バー、地理マップ、テーマ・マップ、ガント・チャート、時系列、階層ビューア、ツリーマップ、サンバースト、ダイアグラムおよびタグ・クラウドがあります。
接頭辞dvt:は、各コンポーネント名の先頭に付いて、そのコンポーネントがADFデータ視覚化ツール(DVT)のタグ・ライブラリに属することを示します。
チャート・コンポーネントには、データを表示するために使用できる10タイプのグラフがあり、合計20種を超えるグラフに1つ以上のバリエーションがあります。チャート・コンポーネントを使用すると、様々なデータ視覚化を作成できます。これにより、様々な方法で複数の軸にある複数のデータ・ポイントを評価できます。たとえば、一群のグラフにより、あるグループからの結果と他のグループからの結果の比較が容易になります。
グラフのカテゴリは、次のとおりです。
面(areaChart): データを塗りつぶされた面として表します。面チャートを使用して、過去12か月の売上げなど、ある期間の傾向を示します。面チャートでは、1つの軸上に最低2グループのデータが必要です。軸には、月などの時間の経過を表すラベルが付けられることがよくあります。
棒(barChart): データを一連の縦棒または横棒で表します。棒グラフを使用して、ある期間の傾向の確認や複数の地域での異なる製品区分の売上げなど、同一時点での項目の比較を行います。
バブル(bubbleChart): 円形のデータ・マーカー(バブル)の位置とサイズでデータを表します。(データ・アイテムが多数あり、全体の関係を表示する場合は特に)バブル・チャートを使用して3種類の値の相関関係を示します。たとえば、バブル・チャートを使用して、従業員の給与(X軸)、経験年数(Y軸)と生産性(バブルのサイズ)をプロットします。このようなチャートでは、生産性を給与および経験と比較して調べることができます。
組合せ(comboChart): 異なるタイプのデータ・マーカー(棒、線または面)を使用して、異なる種類のデータ・アイテムを表示するグラフ。組合せグラフを使用して、棒と線、棒と面、線と面あるいは3つすべての組合せを比較します。
ファンネル(funnelChart): データを円錐形のセクション内のスライスの積み重ねで表します。ファンネル・チャートを使用して、プロセスの段階を表します。ファンネル・チャートには、ある区切りまたは時間の値に対する実際の値と目標の値が必要です。たとえば、ファンネル・チャートを使用して、ソフトウェア開発のライフサイクルの様々な段階の進捗を表します。
折れ線(lineChart): データを線、一連のデータ・ポイントまたは線で結ばれたデータ・ポイントとして表します。折れ線グラフには、グループ内のメンバーごとに最低2つのポイントを表すデータが必要です。たとえば、月単位の折れ線グラフでは、少なくとも2つの月のデータが必要です。通常、特定の色の線は、アメリカ、ヨーロッパ、アジアなどのデータの各グループに関連付けられています。折れ線グラフを使用して、同一期間の項目を比較します。
円(pieChart): 合計に対する比率としてデータ・アイテム・セットを表します。データ・アイテムが円のセクションとして表示され、円が切り分けられたパイのように見えます。円グラフを使用して、各製品ラインからの収益など、全体に対する各部分の関係を表します。
散布(scatterChart): データをデータ・マーカーの位置で表します。散布図を使用して、上位製品の売上げとコストなど、異なる2種類のデータ値の相関関係を表します。多数の項目の全体的な関係を表す場合は特に散布図を使用します。
スパーク(sparkChart): 傾向や変化を1つのデータ値で表す簡単な縮小グラフで、通常、表の列内や関連テキストの行中に表示されます。スパーク・チャートには、基本的な条件付書式設定があります。スパーク・チャートにラベルが含まれていないため、近くの表の列や周囲のテキストによってスパーク・チャートの内容のコンテキストがわかります。
株価(stockChart): 株式取引に関連する情報(特に株価の始値、終値、安値および高値)を表示します。株価チャートは、株式の価格、変動および出来高の傾向を調査するために使用します。選択したチャートのタイプに応じて、各株価マーカーには2つまたは4つの値が表示され、オプションの出来高マーカーは表示されません。出来高を含む場合、出来高はグラフの下部に棒で表示されます。
図22-1に、面グラフ、棒グラフ、バブル・チャート、組合せグラフ、ファンネル・チャート、折れ線グラフ、円グラフおよび散布図の例を示します。
例22-1 ADFデータ視覚化グラフの例
図22-2に、表の列で売上げ傾向を表示する折れ線スパークチャートを示します。
図22-2 売上げ傾向のスパークチャート
その他のユースケースおよび例などの詳細は、「チャート・コンポーネントの使用方法」を参照してください。
統計図表は、他のコンポーネントを一緒に使用して視覚的に効果のある方法でデータを表示するために使用できる汎用的なツールです。いくつかのユースケースがあります。
統計図表は、絶対数に関する文を拡張して視覚的な補助として機能させるために使用できます。図22-3は、付随する文に記述されている絶対値が反映された統計図表を示しています。
図22-3 絶対値を持つ統計図表
統計図表は、母集団の一部分を比較として強調表示するために使用できます。これは比率が小さい場合に最適な効果があります。図22-4は、付随する文で指摘されている点を示すために、20個の人間の形のうちの3つを強調表示するように構成された単一の統計図表を示しています。
図22-4 母集団の一部を示す単純な統計図表
統計図表の別のユースケースは、各部分の分布を強調表示することによって、母集団の部分同士の比較を作成することです。たとえば、図22-5には2012年夏期オリンピックで米国が獲得したメダル数を示すようにそれぞれ構成された3つの統計図表が、デフォルトのフロー・レイアウトに一緒に示されています。3つの統計図表は、メダルのランクに円のサイズが対応するように構成されています。
図22-5 異なるサイズのアイテムを持つ統計図表
統計図表は、一連のシングルトンを順番に使用して、各データ・ポイントの一意の情報が表示されるようにすることもできます。図22-6は、2014年冬期オリンピックでの米国のメダル数を表す統計図表のコレクションを示しています。各統計図表のcount属性には1が設定され、各統計図表のツールチップはメダルを獲得した選手の名前が表示されるように構成されています。
図22-6 一意の情報を持つシングルトン統計図表のコレクション
複数の統計図表を表内に配置して、ビジネス・データを強調表示できます。図22-7は、2011年および2012年のApple製品の販売数を表す表を示しています。各四角形は1000万台を表しています。
図22-7 表内に配置された統計図表
ゲージ(gauge)コンポーネントは、売上げ、在庫レベル、温度または速度などの数量を表すための測定手段です。ゲージには通常1つのデータ値が表示され、多くの場合グラフより効果的です。しきい値を使用すると、ゲージでは、色を使用して許容範囲または非許容範囲などの状態情報を表示できます。
このコンポーネントでは次の種類のゲージを作成できます。
ダイアル: 循環軸上にプロットされたメトリック値を表示します。ゲージの背景属性によって、ゲージの背景が矩形、円形、半円形のいずれで表示されるかが決まります。インジケータは、軸上のダイアル・ゲージのメトリック値を指します。
図22-8に、背景が円、半円および長方形に設定された3つのダイアル・ゲージを示します。3つの例では、ゲージのメトリック値はすべて63です。
図22-8 ダイアル・ゲージの例
LED(電光表示): キー・パフォーマンス・インジケータ(KPI)などの測定値をグラフィカルに表します。LEDゲージには、数種の図形を使用できます。たとえば、ステータスを示すために色を使用する円形または長方形、カラー・インジケータに加えて、上下左右を指す三角形または矢印などです。
図22-9に、様々な図形、サイズおよびしきい値で構成されたLEDゲージを示します。
図22-9 LEDゲージの例
評価: メトリック値を表示し、オプションでメトリック値の入力を受け入れます。このゲージは、通常、映画の星評価など、製品やサービスの評価を示すために使用されます。
図22-10に、星、ダイアモンド、円、長方形および三角形を使用して構成した5評価ゲージを示します。
図22-10 評価ゲージの例
ステータス・メーター: 水平軸、垂直軸または循環軸上にメトリック値を表示します。内側の矩形は、外側の矩形に表示された範囲に対する現在の測定値のレベルを示します。オプションで、ステータス・メーターは、メトリック値が事前定義されたしきい値内のどこに含まれるかを色で示します。
図22-11に、水平ステータス・メーター、円形ステータス・メーター用および垂直ステータス・メーターに構成されたステータス・メーター・ゲージの例を示します。ゲージは、しきい値を使用するように構成されており、これは色でゲージの値が許容範囲内にあるかどうかを示します。
図22-11 ステータス・メーター・ゲージの例
その他のユースケースおよび例などの詳細は、「ゲージ・コンポーネントの使用方法」を参照してください。
nBoxコンポーネントは、データを表すノード、およびそのノードが配置されるセルが含まれるグリッドの2つの部分から構成されます。ノードの数がセルに割り当てられた領域よりも大きい場合、NBoxでは、ユーザーがクリックして追加のノードにアクセスできるインジケータが表示されます。
たとえば、図26-1に示すように、従業員のポテンシャルとパフォーマンスのデータの比較にnBoxコンポーネントを使用できます(行は従業員のポテンシャルを表し、列は従業員のパフォーマンスを表しています)。従業員を表すノードは、適切なセル内にスタンプされています。
図22-12 従業員のポテンシャルとパフォーマンスを比較するNBoxコンポーネント
NBoxノードはまた、属性グループを使用するデータ・セットで、それぞれが一意の値またはグループを表す色、マーカーおよびインジケータでスタイル設定できます。図26-2に、部門、役割および経験によってスタイル設定された従業員ノードのNBoxを示します。
図22-13 属性グループでスタイル設定されたNBoxノード
属性グループを表すNBoxノードは、サイズと数で表示するように構成することもでき、図26-3に示すように、各グリッド・セル内、または図26-4に示すように、すべてのセルに渡って表示できます。
図22-14 セル内でサイズと数で表示されるNBoxノード
図22-15 複数のセルに渡ってサイズと数で表示されるNBoxノード
ピボット・テーブル(pivotTable)では、行または列での複数層のデータ・ラベルをサポートするグリッドを作成します。オプションのピボット・フィルタ・バー(pivotFilterBar)をピボット・テーブルと関連付けることで、行または列のエッジで表示されないデータをフィルタ処理できます。行セットなどの適切なデータ・コントロールにバインドされている場合、このコンポーネントでは、グリッド・データの小計と合計を生成するオプションや、実行時のドリル操作もサポートされます。
ピボット・テーブルでは、あるエッジ(行または列)またはピボット・フィルタ・バー(ページ・エッジ)から別のエッジにデータ・ラベルを切り替え、データの表示を変えることができます。たとえば、あるピボット・テーブルには、最初、行エッジに複数地域にわたる商品売上合計、列エッジに年別の明細が表示されていたとします。実行時に地域と年を切り替えると、数年間の製品の合計売上げデータが、地域ごとに分類されて表示されます。
ピボット・テーブルでは、横方向と縦方向のスクロール、ヘッダーとセルの書式設定およびドラッグ・アンド・ドロップ・ピボットがサポートされています。ピボット・テーブルでは、実行時の行の昇順および降順のグループ・ソートもサポートされます。図22-16に、ピボット・フィルタ・バーのあるピボット・テーブルの例を示します。
図22-16 ピボット・フィルタ・バーのあるピボット・テーブル
その他のユースケースおよび例などの詳細は、「ピボット・テーブル・コンポーネントの使用方法」を参照してください。
地理マップ(map)では、Oracle ADFにOracle Spatialの機能が提供されます。このコンポーネントでは、ビジネス・データをマップ上に表し、1つのマップ上に複数層の情報を重ね合せることができます。このコンポーネントでは、色テーマ、グラフ・テーマ(棒または円グラフ)および点テーマの同時表示がサポートされます。各タイプのテーマはいくつでも作成でき、マップ・ツールバーを使用して、実行時にテーマを選択できます。
地理マップの例として、各州での製品の人気を色の濃さで示す色テーマ、倉庫の在庫レベルを示す円グラフ・テーマおよび各倉庫の正確な位置を示す点テーマを使用した、アメリカの基準となるマップを考えてみます。この3つの全テーマをアメリカ合衆国の地図に重ね合せると、特定の地域で商品の人気度に応じた十分な在庫があるかどうかを簡単に評価できます。図22-17に、色テーマ、円グラフ・テーマおよび点テーマを使用した地理マップを示します。
図22-17 色テーマ、円グラフ・テーマおよび点テーマを使用した地理マップ
その他のユースケースおよび例などの詳細は、 「マップ・コンポーネントの使用方法」を参照してください。
テーマ・マップ(thematicMap)コンポーネントでは、ビジネス・データを定型化された地域内のパターンまたは関連付けられたマーカーとして表し、マップ・ビューア・サービスへの接続は必要ありません。テーマ・マップでは、地理マップでの地理的な詳細なしで、データに焦点を合せます。テーマ・マップは、米国、世界をはじめ、世界の大陸や地域(EMEAやAPACなど)などのあらかじめ作成された基準となるマップとともにパッケージ化されています。テーマ・マップ・コンポーネントでは、基準となるマップを表示するためのマップ・サービスは必要ありません。
たとえば、図22-18に表示されているように、州マップ・レイヤーを備えた基準となる米国のマップを使用して、倉庫と顧客の位置を表示できます(色を使用して高比率、中比率および低比率を示すことが可能)。この例では、データ・バインドされた凡例など、テーマ・マップのデフォルト機能が示されています。
図22-18 倉庫と顧客の比率を表示するテーマ・マップ
その他のユースケースおよび例などの詳細は、 「マップ・コンポーネントの使用方法」を参照してください。
ガント・チャートは(横軸を時間とする)横棒グラフの一種で、リソースまたはタスクが、開始と終了が明確なタイム・フレームに示され、プロジェクトの計画や進捗管理に使用されます。
ガント・チャートは、2つのADFのツリー表とスプリッタの組合せで構成されます。左側の表にはタスクまたはリソースのリストが含まれ、右側の表は1つの列で構成され、特定期間の進捗がグラフ表示されます。
3種類のガント・コンポーネントがあります。
プロジェクト・ガント(projectGantt): タスクを縦に示し、横方向の時間軸にタスクの期間を棒で示すガント・チャートを作成します。
リソース使用率ガント(resourceUtilizationGantt): リソースが割当てを上回っているか下回っているかをグラフィカルに示すガント・チャートを作成します。リソースを縦に示し、横方向の時間軸にその割当てとキャパシティ(オプション)を示します。
スケジュール・ガント(schedulingGantt): リソース管理を示し、手動のスケジュール表をベースにしたガント・チャートを作成します。リソースを縦方向に、対応するアクティビティを横方向の時間軸に表示します。
図22-19 に、スタッフ・リソースとスケジュールを表示したプロジェクト・ガントを示します。
図22-19 プロジェクト・ガント・チャート
その他のユースケースおよび例などの詳細は、「ガント・チャート・コンポーネントの使用方法」を参照してください。
時系列は、時間軸に沿った時系列アイテムとしてのイベントの表示、時系列に表示可能な期間に対応する移動可能な概要ウィンドウ、および時系列の時間増分全体を示した概要時間軸で構成されます。表示可能な時間範囲は、水平方向のズーム制御を使用して変更できます。イベントに対応する各時系列アイテムは、関連付けられた情報やアクションを表示し、時間軸への引出線と概要時間軸内のマーカーで表されます。
たとえば、図22-20の時系列は、従業員の雇用日を時間順に表示するように構成されています。この例では、各イベントを表す時系列アイテムに、イメージとラベル付きテキストを使用して従業員に関する情報を表示しています。概要ウィンドウは、時系列アイテムを表示する時間範囲を定義します。このウィンドウは、ズーム・コントロールを変更するか、ウィンドウの端の位置を変更して拡大または縮小することでサイズを調整できます。選択が構成されている場合は、時系列アイテム、引出線、および概要パネルのイベント・マーカーが強調表示されます。
図22-20 従業員の雇用日の時系列
2つの時系列を使用して最大2系列のイベントを比較できます。図22-21に、10年間にわたる2人の従業員の変化のイベントを比較した2つの時系列を示します。時系列イベントは、3年を超える期間を表す概要ウィンドウに四半期単位の時間軸を使用して表示されています。概要時間軸の赤い線は現在の日付を示しています。
図22-21 従業員の変化イベントを比較した2つの時系列
その他のユースケースおよび例などの詳細は、「時系列コンポーネントの使用方法」を参照してください。
階層ビューア(hierarchyViewer)は、階層データが図中のリンクされたノードのセットとして表示されるコンポーネントです。ノードおよびリンクは、データの要素および関係に対応します。このコンポーネントでは、パンおよびズーム操作、ノードの展開および縮小、ノード内での簡単なADF Facesコンポーネントのレンダリング、そして階層ビューア・データの検索がサポートされています。階層ビューアの一般的な用途は、図22-22に示すような組織図を表示することです。
図22-22 階層ビューアによる組織図
その他のユースケースおよび例などの詳細は、 「階層ビューア・コンポーネントの使用方法」を参照してください。
treemapおよびsunburstコンポーネントは、数量的な階層データを、サイズと色で視覚的に表された2つのディメンションで表示します。ツリーマップおよびサンバーストでは、nodeと呼ばれる形を使用して、階層内のデータを表します。たとえば、ツリーマップまたはサンバーストを使用して地域の四半期ごとの売上げを表示し、売上げ傾向を特定する場合は、ノードのサイズで各地域の売上げ高を示し、ノードの色でその地域の売上げが四半期で増えたか減ったかを示すことができます。
ツリーマップはノードをネストした矩形のセットとして表示します。ツリーのブランチごとに1つの矩形が割り当てられ、そこにサブブランチを表すより小さな矩形が並べられます。
図22-23に、米国の人口調査データを地域ごとにグループ化して表示し、色の属性で平均所得水準を表したツリーマップを示します。人口の多い州は人口の少ない州より大きなノードで表示されます。
図22-23 米国の人口調査データを地域別に表示したツリーマップ
サンバーストは、ノードを矩形レイアウトではなく、放射状に表示し、階層のトップを中心に、深いレベルになると中心から離れて表示します。図22-24に、サンバーストで表示した同じ国勢調査データを示します。
図22-24 米国の人口調査データを地域別に表示したサンバースト
ツリーマップとサンバーストでは、何千ものデータ・ポイントを比較的小さな空間領域に表示できます。各ノードの相対サイズが全体に対する重要度を表しているため、これらのコンポーネントは大規模な階層データ・セットで傾向を特定する場合に適しています。情報の追加ディメンションを表すために、色も使用できます。
階層の1つのレイヤーでサイズと色を使用してデータの2つのメトリックを表示することが主な目的の場合は、ツリーマップを使用します。階層のすべてのレベルでのメトリックを表示する場合、かわりにサンバーストを使用します。エンド・ユーザーが階層を横断してデータの重要な部分を重点的に表示できるように、ドリルを有効にできます。
ツリーマップの情報、およびアプリケーションでのこれらの使用方法の詳細は、「ツリーマップおよびサンバースト・コンポーネントについて」を参照してください。
ダイアグラムでは、ノードに図形が使用され、ノード間の関連を表すリンクに線が使用されます。図33-1に、円およびそれらの関連を表す直線からなる、円形のレイアウト・パターンで構成されたシンプルなダイアグラムを示します。この例には、ダイアグラムのズームのためのデフォルトのコントロール・パネルが含まれています。
図22-25 コントロール・パネルでのノードとリンクのシンプルなダイアグラム
ダイアグラムはまた、マスター/ディテール・リレーションシップで階層データを視覚的に表示するように構成できます。図33-2に、コントロール・パネル、多数のノードおよびノードを接続するリンクを含む実行時の従業員ツリー・ダイアグラムを示します。また図では、異なるズーム・レベルでデータの複数のセットを表示するaf:showDetailItem要素を使用したノード・パネル・カードも示されています。
図22-26 コントロール・パネルでの従業員ツリー・ダイアグラム
ダイアグラム・コンポーネントは、グラフを1次元レイアウトで視覚化するグラフ表示である、アーク・ダイアグラムを表示するように構成することもできます。エッジまたはノード間の接続が円弧で表現され、ノードは単一の軸に沿って表示されます。図33-3は、ヴィクトル・ユーゴーの小説「レ・ミゼラブル」の登場人物を使用した、この書物の同じ章に同時に登場する人物ペア間の同時出現を表示するアーク・ダイアグラムを示しています。
図22-27 登場人物の同時出現を表示するアーク・ダイアグラム
ダイアグラムは、データベース・スキーマを表示するように構成できます。図33-4は、コンテキストおよびナビゲーションのオプションをユーザーに提供するダイアグラムの簡略ビューであるサマリー・ウィンドウを持つ、データベース・スキーマのレイアウト・ダイアグラムを示しています。
図22-28 サマリーを持つデータベース・スキーマのレイアウト・ダイアグラム
ダイアグラムはサンバースト・レイアウトで構成することもでき、定量的な階層データをサイズと色で視覚的に表現し、2つの次元にまたがり表示します。図33-5に、総量を表示する属性グループを使用した、米国の各州の人口移動を表示するダイアグラムを示します。
図22-29 各州の人口移動データの総量を表示するダイアグラム
タグ・クラウドはタグの配列で構成されます。多くのユースケースがあります。
タグ・クラウドは、母集団内のアイテムの相対的な比率の大きさをすばやく評価する場合に最も役に立ちます。たとえば、図22-30は応答者が使用しているソーシャル・メディア・ネットワークを回答した調査の結果を示しています。
図22-30 クラウド・レイアウトを持つ単純なタグ・クラウド
タグ・クラウドは長方形のレイアウトに表示することもできます。これは、正式なデータの場合、Webサイトのタグを検索する場合、またはクラウドを固定されたコンテナ内含める必要がある場合に最も役に立ちます。図22-31は、米国の州の人口の最新の国勢調査データを示しています。タグはツールチップに人口が表示されるように構成されています。
図22-31 長方形のレイアウトを持つタグ・クラウド
タグはグループに分割して、それらのグループを凡例に表示できます。これは基準によってタグをすばやく分割するために役立ちます。たとえば、図22-32は人口の多い州と少ない州のグループに二分した米国の州を示しています。指定された条件では、人口が500万人より少ない州が人口の少ない州、および500万人より多い州が人口の多い州として分類されます。タグ・クラウドは、複雑なグループ化が可能になるように、一致および例外のルールの両方を受け入れます。
図22-32 色付きのグループおよび凡例を持つタグ・クラウド
データ視覚化コンポーネントをデータ・バインドする前に、その他のADF Faces機能を理解しておくと役に立ちます。また、いったんデータ視覚化コンポーネントをページに追加すると、検証やアクセシビリティなどの機能を追加する必要があることに気付く場合があります。データ視覚化コンポーネントで使用されるその他の機能へのリンクは、次のとおりです。
部分ページ・レンダリング: データ視覚化コンポーネントをリフレッシュして、ページの別のコンポーネントで実行されたアクションに基づく新しいデータを表示できます。詳細は、「部分ページ・コンテンツの再レンダリング」を参照してください。
パーソナライズ: ユーザーは実行時にデータ視覚化コンポーネントの表示を変更できますが、ユーザーがカスタマイズできるようにアプリケーションを構成していないかぎり、ユーザーがページを終了するとそれらの値は保持されません。詳細は、「JSFページでのユーザー・カスタマイズの許可」を参照してください。
アクセシビリティ: データ視覚化コンポーネントは、デフォルトでアクセス可能です。データ視覚化コンポーネントのあるアプリケーション・ページを、スクリーン・リーダーのユーザーがアクセスできるように構成できます。詳細は、「アクセス可能なADF Facesページの開発」を参照してください。
タッチ装置: ADF Facesアプリケーションがタッチ装置で動作することがわかれば、その装置に固有のページを作成する作業がベスト・プラクティスになります。詳細は、「ADF Facesを使用したタッチ装置のWebアプリケーションの作成」を参照してください。
スキンおよびスタイル: アプリケーションに適用するADFスキンを使用するか、スタイル関連のプロパティ(styleClassまたはinlineStyle)を使用してCSSスタイル・プロパティを直接適用することで、データ視覚化コンポーネントの外観をカスタマイズできます。詳細は、「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
プレースホルダ・データ・コントロール: 最終的にページのデータ視覚化コンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールの使用を検討します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「プレースホルダ・データ・コントロールを使用したページの設計」の章を参照してください。
データ視覚化コンポーネントでは、データの配信方法、自動部分ページ・レンダリング(PPR)、コンポーネントを表示するために使用されるイメージ・フォーマット、そしてデータの表示および編集方法など、同じ機能の大部分が共有されています。これらのコンポーネントを使用する前に、この共有機能と、その構成方法を理解することが重要です。
グラフ、ゲージ、ガント・チャート、階層ビューア、ピボット・テーブル、サンバースト、テーマ・マップ、時系列およびツリーマップを含むデータ視覚化コンポーネントは、データ・ソースからのデータ配信方法について構成できます。データは、レンダリング直後、データが使用可能になり次第、またはコンポーネントのシェルがレンダリングされた後の遅延フェッチのいずれかで、コンポーネントに配信できます。デフォルトでは、地理マップを除くすべてのデータ視覚化コンポーネントで、コンテンツが使用可能なときにデータ・ソースから配信されるようになっています。これらのコンポーネントのcontentDelivery属性は、デフォルトでwhenAvailableに設定されています。
ガント・チャート、階層ビューア、ピボット・テーブル、サンバースト、時系列およびツリーマップなど、ツリーまたはツリー表モデルに基づくデータ視覚化コンポーネントは仮想化されています。つまり、サーバーでコンポーネント用に存在する一部の行、列またはレベルのみが、クライアントに配信され、表示されます。これらのコンポーネントを構成して、一定の数の行、列またはレベルを一度にデータ・ソースからフェッチします。次の属性を使用して、フェッチ・サイズを構成します。
ガント・チャート:
fetchSize: データ・フェッチ・ブロックの行数を指定します。デフォルト値は25です。
horizontalFetchSize: データがフェッチされる水平データ・ウィンドウのサイズをピクセル数で指定します。このデータ・ウィンドウ内のタスク・バーのみがレンダリングされます。垂直方向への仮想化を実現するfetchSizeとは対照的に、horizontalFetchSizeは水平方向への仮想化を実現します。
階層ビューア:
levelFetchSize: 展開された親ノードごとに、一度にフェッチされて表示される子ノードの数を指定します。階層ビューアに表示される横方向のナビゲーション・コントロールを使用すれば、追加の子ノードをフェッチし、表示できます。デフォルト値は25です。
ピボット・テーブル:
rowFetchSize: 1データ・フェッチ・ブロック内の行数を指定します。デフォルト値は25です。
columnFetchSize: 1データ・フェッチ・ブロック内の列数を指定します。デフォルト値は10です。
サンバースト:
displayLevelsChildren: 初期レンダリング中に表示する子レベルの数を指定します。このプロパティは0ベースです。値0は、ルートの下の子レベルが表示されず、ルート自体は表示されることを意味します。デフォルト値は2で、ルートおよび子の最初の2つのレベルが表示されることを意味します。
時系列:
fetchStartTime: データを現時点でフェッチする時間範囲の開始を指定します。
fetchEndTime: データを現時点でフェッチする時間範囲の終了を指定します。
ツリーマップ:
displayLevelsChildren: 初期レンダリング中に表示する子レベルの数を指定します。このプロパティは0ベースです。値0は、ルートの下の子レベルが表示されず、ルート自体は表示されることを意味します。デフォルト値は2で、ルートおよび子の最初の2つのレベルが表示されることを意味します。
遅延配信の場合、ページにこれらのコンポーネントが1つ以上含まれると、そのページでは最初は標準のライフサイクルが実行されます。ただし、最初のリクエスト時にデータがフェッチされるのではなく、特別な個別の部分ページ・レンダリング(PPR)リクエストが実行され、コンポーネントのフェッチ・サイズの値が返されます。ページのレンダリング直後であるため、レンダー・レスポンス・フェーズのみがコンポーネントに対して実行され、対応するデータのフェッチおよび表示が可能になります。ユーザーのアクションにより後続のデータ・フェッチが実行される場合(別の行セットのためにピボット・テーブル・グリッド内をスクロールするなど)、別のPPRリクエストが実行されます。
コンテンツが使用可能なときに配信されるようにコンテンツ配信を構成すると、フレームワークでは最初のリクエストの間にデータの可用性をチェックし、使用可能であれば、そのデータがコンポーネントに送信されます。使用可能でない場合、データは遅延配信と同じように、別のPPRリクエスト時にロードされます。
パフォーマンスに関するヒント
遅延配信は、データ・フェッチがコストの高い(低速な)操作と予想される場合、たとえば低速で待機時間の長いデータベース接続や、Webサービスなどの低速なデータ・ソースからのデータのフェッチなどに使用する必要があります。ページにデータ視覚化コンポーネント以外のコンポーネントが多数含まれている場合にも、遅延配信を使用します。遅延配信を使用すると、データが使用可能になる前に、初期ページのレイアウト・コンポーネントおよびその他のコンポーネントが最初にレンダリングされます。
ページではデータ視覚化コンポーネントが唯一のコンテキストである場合、あるいはコンポーネントから大量のデータが返される見込みがない場合は、即時配信を使用します。この場合、ユーザー・レスポンス時間がより高速で、サーバーCPU利用率がより高ければ、2番目のリクエストはサーバーに移動しないため、レスポンス時間は遅延配信を使用する場合よりも高速になります(または、場合によっては高速に感じます)。ツリーまたはツリー表モデルに基づくコンポーネントの場合、フェッチ・ブロックとして構成された値のみが最初に返されます。遅延配信と同様に、ユーザーのアクションが後続のデータ・フェッチの原因となる場合は、次の行セットが配信されます。
whenAvailable配信では、最初のレンダリング中にデータが使用可能な場合は即時配信を使用し、データが最初に使用可能でない場合には遅延配信に頼るという柔軟性が高まります。
ツリーまたはツリー表に基づくコンポーネントのフェッチ・サイズの設定の詳細は、「コンテンツ配信」を参照してください。
ADF Facesでは部分ページ・レンダリング(PPR)がサポートされており、ページ上で特定のコンポーネントをレンダリングでき、ページ全体をレンダリングする必要がありません。組込みのPPR機能に加えて、1つのコンポーネントがトリガーとして機能し、別のコンポーネントがリスナーとして機能するように依存関係を設定できるクロスコンポーネント・レンダリングを使用するように、コンポーネントを構成できます。詳細は、「部分ページ・レンダリングについて」を参照してください。
デフォルトでは、ADFデータ視覚化コンポーネントで自動PPRがサポートされ、バックエンド・ビジネス・ロジックの結果として値が変更されるコンポーネントが自動的に再レンダリングされます。アプリケーションでFusionテクノロジ・スタックを使用する場合、任意のページで自動部分ページ・レンダリング機能を有効にできます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の部分ページ・レンダリングとイテレータ・バインディングに関する必知事項を参照してください。
Fusionテクノロジ・スタックには、アクティブ・データ・サービス(ADS)が含まれ、これはサーバー側のプッシュ・フレームワークで、これによりADF FacesコンポーネントおよびADFデータ視覚化コンポーネントのリアルタイムのデータ更新を提供できます。ADF Facesコンポーネントをデータ・ソースにバインドすると、ADSでは、ブラウザ・クライアントに明示的な更新リクエストを要求することなく、ブラウザ・クライアントにデータ更新をプッシュします。
表22-1に、アクティブ・データをサポートするDVTコンポーネントおよび追加詳細がある場所をリストします。
表22-1 アクティブ・データをサポートするDVTコンポーネント
| DVTコンポーネント | コンポーネントの詳細へのリンク |
|---|---|
地理マップ |
|
ピボット・テーブルおよびピボット・フィルタ・バー |
また、アクティブなデータを表示するために |
サンバースト |
|
ツリーマップ |
|
チャート(すべてのタイプ) |
|
ゲージ(すべてのタイプ) |
アクティブ・データ・サービスの使用の詳細は、「非同期バックエンドでのアクティブ・データ・サービスの使用方法」を参照してください。
JDeveloperは、抽象クラスjava.util.ResourceBundleを使用してロケール固有のリソースを提供し、ADF Facesおよびデータ視覚化コンポーネントをローカライズしやすいようにサポートします。
データ視覚化コンポーネントには、コンポーネントの一部であるテキストが含まれている場合があり、たとえばaf:tableコンポーネントでは、データの初期ロード中にaf:tableコンポーネントがデータをフェッチしている間、あるいはユーザーが表をスクロールしている間に、リソース文字列af_table.LABEL_FETCHINGが、ブラウザで表示されるメッセージ・テキストに使用されます。JDeveloperでは、これらのテキスト・リソースを28言語に自動的に変換します。これらのテキスト・リソースは、リソース・バンドルで参照されます。イタリア語を使用するようにブラウザを設定した場合、コンポーネント内に含まれるテキストはすべて自動的にイタリア語で表示されます。
title属性を設定してpieChartコンポーネントのタイトルを定義する場合など、コンポーネントに追加するテキストには、実際のテキストが含まれているリソース・バンドルを指定し、各ロケール版のリソース・バンドルを作成し、<locale-config>要素を追加して、アプリケーションのfaces-config.xmlファイルにデフォルトおよびサポートされるロケールを定義する必要があります。また、アプリケーションのすべてのページでリソース・バンドルを使用できるようにするには、アプリケーションのfaces-config.xmlファイルに<resource-bundle>要素を追加する必要があります。リソース・バンドルを構成および登録すると、式言語(EL)エディタによりバンドルのキーが表示され、アプリケーション・ページでのバンドルの参照が簡単になります。
ADFコンポーネントに追加するテキストのテキスト・リソースを作成するプロセスを簡略化するために、JDeveloperでは、ビジュアル・エディタの変換可能な文字列に関する、リソース・バンドルの自動同期がサポートされています。ビジュアル・エディタまたは「プロパティ」ウィンドウで直接コンポーネントを編集すると、ベース・リソース・バンドルにテキスト・リソースが自動的に作成されます。詳細は、「JDeveloperにおける自動リソース・バンドル統合の使用方法」を参照してください。
注意:
データベースから取得されたテキストは変換されません。
タイトルおよびラベルの子コンポーネントのあるデータ視覚化コンポーネントの場合、属性ドロップダウン・リストを使用して「テキスト・リソースの選択」ダイアログを開き、アプリケーション・リソース・バンドルから変換可能な文字列を選択または追加することにより、テキスト・リソースを作成し、リソース・バンドルに追加することもできます。または、「式ビルダー」を選択して、式言語(EL)エディタを開き、実行時にタイトルまたはラベルのために実行される式を作成することができます。
JDeveloperでは、UI優先開発を使用して任意のデータ視覚化コンポーネントをJSFページに追加し、後からADFデータ・コントロールまたはマネージドBeanを使用して、表示するデータを手動でバインドできます。この場合、「コンポーネント」ウィンドウからページにコンポーネントをドラッグし、「プロパティ」ウィンドウでデータを手動でバインドします。
たとえば、簡単なUI優先開発を使用してページを設計しているときには、「コンポーネント」ウィンドウを使用して棒グラフをJSFページに追加します。ページにチャート・コンポーネントをドラッグ・アンド・ドロップすると、「チャートの作成」ダイアログに使用可能なグラフ・タイプのカテゴリが説明とともに表示され、グラフの作成を視覚的に支援します。グラフの凡例のクイック・スタート・レイアウトも指定できます。図22-33に、デフォルトの棒グラフ・タイプおよびクイック・スタート・レイアウトが選択された棒グラフ用の棒グラフの作成ダイアログを示します。
図22-33 棒グラフの作成ダイアログ
UI優先開発を使用したデータ視覚化コンポーネントの作成、コンポーネント・データ要件の理解、DVT親コンポーネントおよび子コンポーネントの構成、コンポーネントの外観のカスタマイズ、およびコンポーネントへの特殊効果と双方向性の追加の詳細は、このマニュアルのこの部の次の章を参照してください。
または、データ優先開発を使用すれば、データ・バインディングを処理するADFデータ・コントロールを使用してコンポーネントを作成できます。この場合、「データ・コントロール」パネルからデータ・コレクションをドラッグし、データ・バインディング・ダイアログに入力してデータの表示を構成します。
たとえば、データ・コントロール・パネルからデータ・コントロールをドラッグすることで、DVTチャートを作成してデータバインドします。コンポーネント・ギャラリには使用可能なグラフのカテゴリ、タイプおよび説明が表示され、グラフの設計およびクイック・レイアウトの定義が視覚的にサポートされます。図22-34に、データ・コントロールからのグラフの作成で表示されるコンポーネント・ギャラリを示します。
図22-34 チャートのコンポーネント・ギャラリ
作成するグラフのカテゴリおよびタイプを選択後、データ・バインディング・ダイアログを表示し、データ・コレクション属性をチャート・コンポーネントにバインドします。図22-35に、棒グラフを作成してデータバインドするために使用された棒グラフの作成ダイアログを示します。
図22-35 棒グラフの作成ダイアログ
すべてのデータ視覚化コンポーネントは、ADFデータ・コントロールのデータ・コレクションにバインドできます。データ・コントロールへのこれらのコンポーネントのデータ・バインドの詳細および例は、次の参照先を参照してください。
『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータバインドされたチャートの作成に関する項。
『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータバインドされた統計図表の作成に関する項。
『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータ・バインドされたゲージの作成に関する項。
『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータ・バインドされたNBoxコンポーネントの作成に関する項。
『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータ・バインドされたピボット・テーブルの作成に関する項。
注意:
JDeveloperでは、「ピボット・テーブルの作成」ウィザードでピボット・テーブルのデータ・バインドおよび構成のための宣言サポートが提供されます。
『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータ・バインドされた地理マップの作成に関する項。
『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータ・バインドされたテーマ・マップの作成に関する項。
『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータ・バインドされたガント・チャートの作成に関する項。
『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータ・バインドされた時系列の作成に関する項。
『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータ・バインドされた階層ビューアの作成に関する項。
『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータ・バインドされたツリーマップおよびサンバーストの作成に関する項
『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータ・バインドされたダイアグラム・コンポーネントの作成に関する項
『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータバインドされたタグ・クラウドの作成に関する項。
