| Oracle® Fusion Middleware Oracle Application Development FrameworkによるFusion Webアプリケーションの開発 12c (12.1.2) E48099-02 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development FrameworkによるFusion Webアプリケーションの開発 12c (12.1.2) E48099-02 |
|
前 |
次 |
この章では、ADFビジネス・コンポーネントでモデル化されたデータから、グラフ・コンポーネントまたはゲージ・コンポーネントを作成する方法について説明します。これらのコンポーネントの作成には、Fusion WebアプリケーションのADFデータ・コントロールとADF Facesコンポーネントを使用します。具体的には、ADFデータ視覚化コンポーネントのareaGraph、barGraph、horizontalBarGraph、bubbleGraph、comboGraph、funnelGraph、lineGraph、paretoGraph、pieGraph、radarGraph、scatterGraph、sparkChart、stockGraphおよびgaugeを使用して、ビジネス・データを視覚的に表現するグラフとゲージを作成する方法について説明します。ここでは、ADFデータ・コントロールを使用して、これらのコンポーネントをデータ優先開発で作成する方法について説明します。
簡単なUI優先開発を使用してページを設計する場合は、グラフやゲージをページに追加してから、データ・バインディングを構成してください。グラフおよびゲージ・コンポーネントのデータ要件、タグ構造、および外観と動作のカスタマイズ・オプションの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「グラフ・コンポーネントの使用方法」の章と「ゲージ・コンポーネントの使用方法」の章を参照してください。
この章には次の項が含まれます:
ADFデータ視覚化コンポーネントは、ビジネス・データを視覚的に表示、分析するための幅広いグラフィック機能と表機能を提供します。コンポーネントをレンダリングできるようにするには、これらのコンポーネントをそれぞれ、データにバインドする必要があります。コンポーネントの外観は表示されるデータによって変わるからです。
グラフ・コンポーネントとゲージ・コンポーネントの両方により、データがレンダリングされます。ただし、グラフ(50種を超えるチャートをサポート)では、複数の軸上の複数のデータ・ポイントを様々な方法で評価できます。豊富な種類のグラフにより、あるグループの結果を別のグループの結果と比較することが容易になります。一方、ゲージでは、単一のデータ・ポイントを重視し、そのポイントを最小、最大およびしきい値インジケータと比較して問題を識別します。
接頭辞dvt:は、各データ視覚化コンポーネント名の先頭に付いて、そのコンポーネントがADFデータ視覚化ツール(DVT)のタグ・ライブラリに属することを示します。
魅力的な外観を備えたデータ視覚化コンポーネントを使用すると、エンド・ユーザーは複雑なビジネス・データを理解して分析できるようになります。このコンポーネントは機能が豊富で、そのまますぐに使用できる対話型のサポートも用意されています。エンド・ユーザーの詳細な説明と各コンポーネントのプレゼンテーション機能の詳細は、次を参照してください。
グラフ・コンポーネント: 『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のエンド・ユーザー機能とプレゼンテーション機能に関する項。
ゲージ・コンポーネント: 『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のゲージ・コンポーネントのエンド・ユーザー機能とプレゼンテーション機能に関する項。
データ視覚化のユースケースと例の詳細は、次を参照してください。
グラフ・コンポーネント: 『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のグラフ・コンポーネントのユースケースと例に関する項。
ゲージ・コンポーネント: 『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のゲージ・コンポーネントのユースケースと例に関する項。
データ視覚化コンポーネントをデータ・バインドする前に、その他のOracle ADF機能について理解しておいてください。また、いったんデータ視覚化コンポーネントをページに追加すると、検証やアクセシビリティなどの機能を追加する必要があることに気付く場合があります。データ視覚化コンポーネントで使用されるその他の機能へのリンクは、次のとおりです。
部分ページ・レンダリング: データ視覚化コンポーネントをリフレッシュして、ページの別のコンポーネントで実行されたアクションに基づく新しいデータを表示できます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「部分ページ・コンテンツの再レンダリング」の章を参照してください。
パーソナライズ: ユーザーは実行時にデータ視覚化コンポーネントの表示を変更できますが、ユーザーがカスタマイズできるようにアプリケーションを構成していないかぎり、ユーザーがページを終了するとそれらの値は保持されません。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「JSFページでのユーザー・カスタマイズの許可」の章を参照してください。
アクセシビリティ: データ視覚化コンポーネントをアクセス可能にできます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「アクセス可能なADF Facesページの開発」の章を参照してください。
スキンおよびスタイル: アプリケーションに適用するADFスキンを使用するか、スタイル関連のプロパティ(styleClassまたはinlineStyle)を使用してCSSスタイル・プロパティを直接適用することで、データ視覚化コンポーネントの外観をカスタマイズできます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「スタイルおよびスキンを使用した外観のカスタマイズ」の章を参照してください。
プレースホルダ・データ・コントロール: 最終的にページのデータ視覚化コンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールの使用を検討します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、第19章「プレースホルダ・データ・コントロールによるページの設計」を参照してください。
「データ・コントロール」パネルから挿入されたデータ・コレクションを使用してグラフを作成する場合は、コンポーネント・ギャラリを使用すると、多数のグラフ・カテゴリ、グラフ・タイプおよびレイアウト・オプションから選択できます。グラフ・カテゴリは、1つ以上の異なるタイプのグラフを1つのグループにまとめたものです。たとえば、「棒」カテゴリには次のタイプのグラフが含まれます。
棒
二重Y棒
分割二重Y棒
パーセント
積上げ棒
二重Y積上げ棒
二重-Y積上げ棒
フローティング積上げ棒
グラフの作成時に表示されるコンポーネント・ギャラリを見てまわり、使用可能なグラフ・カテゴリ、タイプおよびそれぞれの説明を確認してください。図35-1に、「データ・コントロール」パネルを使用しているときにADFグラフ用に表示される、「コンポーネント・ギャラリ」を示します。
|
注意: 一部のグラフのタイプでは、非常に具体的な種類のデータが必要です。選択したグラフのタイプの表示に十分なデータが含まれていないデータ・コレクションにグラフをバインドすると、グラフは表示されず、データが不十分であることを示すメッセージが表示されます。 |
また、「コンポーネント」ウィンドウからグラフ・コンポーネントをドラッグして、グラフを作成することもできます。この方法では、コンポーネントをデータにバインドする前に、グラフのユーザー・インタフェースを設計できます。「グラフの作成」ダイアログが開き、グラフ・タイプ、説明および簡単なレイアウト・オプションが表示されます。UI優先開発を使用したグラフの作成方法の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「グラフ・コンポーネントの使用」の章を参照してください。
表35-1に、グラフのコンポーネント・ギャラリに表示されるカテゴリを示します。各カテゴリには、1つ以上のグラフ・タイプが関連付けられています。
表35-1 コンポーネント・ギャラリのADFグラフ・カテゴリ
| カテゴリ | 説明 |
|---|---|
|
面 |
データが塗りつぶされた面として表されるグラフを作成します。面グラフは、直近12か月の売上など、ある期間にわたる傾向を示すために使用します。面グラフでは、一方の軸に沿って少なくとも2つのグループのデータが必要です。通常、この軸には期間(月など)のラベルが付けられます。 |
|
棒 |
データが一連の垂直な棒として表されるグラフを作成します。ある期間にわたる傾向を調べる場合や、複数のアイテム(複数の地域における異なる商品部門の売上など)を同時に比較する場合に使用します。 |
|
棒(横) |
Y軸に沿って棒を横向きに表示するグラフを作成します。方向を示して傾向の表示や値の比較を可能にするために使用します。 |
|
バブル |
データが丸いデータ・マーカー(バブル)の場所と大きさによって表されるグラフを作成します。3タイプの値の相関を示すために使用します(特に、多数のデータ・アイテムがあり、全般的な関係を確認する場合)。たとえば、従業員の給与(x軸)、経験年数(y軸)および生産性(バブルの大きさ)を図示するためにバブル・グラフを使用します。このようなグラフでは、生産性を給与および経験と比較して調べることができます。 |
|
組合せ |
異なるタイプのデータ・マーカー(棒、線または面)を使用して、異なる種類のデータ・アイテムを表示するグラフを作成します。棒と線、棒と面、線と面またはこの3つすべてを比較するために使用します。 |
|
ファンネル |
1つのプロセス内の複数のステップに関連するデータを図示するグラフを作成します。ステップは、水平な円筒に対して垂直なスライスとして表示されます。特定のステップまたはスライスの実際の値がそのスライスの割当て制限に達すると、そのスライスは塗りつぶされます。通常、ファンネル・グラフでは、ある区切りの値(時間など)に対する実際の値と目標の値が必要です。たとえば、会計年度の四半期という区切りにおいて、あるプロセス(セールス・パイプラインなど)が目標に向かう動きを確認するためにこのコンポーネントを使用します。 |
|
折れ線 |
データが線、一連のデータ・ポイントまたは線で結ばれた複数のデータ・ポイントとして表されるグラフを作成します。折れ線グラフでは、グループ内の各メンバーに対し、少なくとも2つの点のデータが必要です。たとえば、月単位の折れ線グラフでは、少なくとも2つの月のデータが必要です。通常、特定の色の線がデータの各グループ(アメリカ、ヨーロッパ、アジアなど)に関連付けられます。複数のアイテムを同じ期間で比較するために使用します。 |
|
パレート |
データが棒、および棒の累積率を示す線によって表されるグラフを作成します。棒の各セットにより、問題の異なる原因(交通事故による死亡の原因など)が識別されます。それぞれの棒は、最大数の事象から最小数の事象まで、値別に配置されます。パレート・グラフは常に二重y軸グラフになり、最初のy軸は棒が表す値に対応し、2番目のy軸は0から100%の範囲で累計率の値に対応します。パレート・グラフは、問題の原因を識別および比較するために使用します。 |
|
円 |
円が分割され、データの各グループが円の中のスライスとして表されるグラフを作成します。それぞれの商品群から得られる収益など、各区分と全体との関係を示すために使用します。 |
|
レーダー |
円状の線グラフとして表示されるグラフを作成します。直近3年間の毎月の売上など、周期的に起こるパターンを示すために使用します。 |
|
散布図/極 |
データがデータ・マーカーの場所によって表されるグラフを作成します。人気商品の売上とコストなど、2つの異なる種類のデータ値の相関を示すために使用します。散布図は、多数のアイテム間の全般的な関係を確認する際に特に便利です。 |
|
スパークチャート |
表の列に、またはテキストともにインラインでトレンドまたはバリエーションを表したシンプルな要約グラフを作成します。 |
|
株価 |
株価の高値、安値および終値を示すデータでグラフを作成します。また、株価の始値と出来高を必要に応じて表示します。 |
図35-2に、Summit ADFサンプル・アプリケーションの「Orders Dashboard」ページに表示された、縦棒グラフを示します。このグラフは、特定の顧客の各注文を出荷するまでにかかった日数を表示しています。これにより、出荷期間の傾向を簡単に識別できます。
データバインディングの完了後にグラフをカスタマイズする方法の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「グラフの構成」の章を参照してください。
グラフはデータ・コレクションに基づいています。Oracle ADFのデータ・コントロールを使用すると、Jdeveloperでは宣言的なタスクとなります。「データ・コントロール」パネルからJSFページにコレクションをドラッグ・アンド・ドロップし、ダイアログを使用してデータ・コレクションの属性をグラフ内でバインドします。
グラフを描画するには、数値データ・ポイントの単純グリッドが必要です。このグリッドの行ラベルと列ラベルは、グラフ内のコンポーネントを識別するために使用されます。デフォルトでは、行は系列として表示され、列はグループとして表示されます。
データ・コレクション内の属性には、データ値またはデータ値のカテゴリを指定できます。データ値は、棒の高さや散布図のポイントなどのマーカーで表される数値です。データ値のカテゴリは、軸のラベルとして示されるメンバーになるか、ツールチップの追加プロパティとして表示されます。バインディング内で属性が担うロール(データ値またはID)は、データ型(グラフには数値データ値が必要)およびマップされる場所(棒やX軸など)の両方によって決まります。
始める前に:
データ視覚化グラフについて理解しておいてください。詳細は、35.2項「データバインドされたグラフの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、35.1.3項「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
13.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
JSFページを作成します。作成手順は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項を参照してください。
データバインドされた面グラフ、棒グラフまたは折れ線グラフを作成するには:
「データ・コントロール」パネルから、コレクションを選択します。
たとえば、各注文に対する出荷期間を表示する棒グラフを、Summit ADFサンプル・アプリケーションの「Orders Dashboard」ページに作成する場合は、OrdersForCustomerコレクションを選択します。図35-3に、「データ・コントロール」パネル内のOrdersForCustomerコレクションを示します。
コレクションをJSFページにドラッグして、ポップアップ・メニューから「グラフ」を選択します。
「コンポーネント・ギャラリ」で、グラフ・カテゴリとグラフ・タイプを選択して、「OK」をクリックします。
「コンポーネント・ギャラリ」に表示されるグラフ・カテゴリおよびグラフ・タイプの詳細は、表35-1を参照してください。
ダイアログの名前と表示される入力フィールドのラベルは、選択したグラフのカテゴリ、タイプおよびデータ・コレクションに応じて変化します。たとえば、グラフ・カテゴリとして「棒」を選択し、グラフ・タイプとして「棒」を選択すると、表示されるダイアログの名前は「棒グラフの作成」になり、入力フィールドのラベルは「棒」と「X軸」になります。
ダイアログで次のようにして、データを表示するグラフを構成します。
実行時に属性の値をどこに表示するかに応じて、「使用可能」リストから「棒」または「X軸」入力フィールドに属性をドラッグします。
たとえば、X軸に沿って注文日表示するように、Summit ADFサンプル・アプリケーションの棒グラフを構成する場合は、「選択可能」リストからDateOrdered属性をドラッグして、「棒グラフの作成」ダイアログの「X軸」フィールドにドロップします。出荷の時間を棒グラフとして表示するように構成するには、「選択可能」リストからTimeToShip属性をドラッグして、「棒グラフの作成」ダイアログの「棒」フィールドにドロップします。
「属性ラベル」表で、デフォルト値を受け入れるか、「ラベル」フィールドのドロップダウン・リストから値を選択して、実行時に表示されるラベルを指定します。
基になるデータ型に応じて、「ラベル」フィールドで選択可能な項目が決まります。この選択に応じて、属性のラベルをグラフにレンダリングする方法が決まります。詳細は、35.2.3項「属性のラベルの使用に関する必知事項」を参照してください。
棒が表しているデータの表示をY軸に変更する場合は、「Y軸の棒と入替え」ボタンをクリックします。このアクションでは、棒とY軸属性が単純に手動で入れ替えられるのではなく、グラフの系列とグループの間で非表示のデータ・レイヤーが切り替えられます。
「入力済属性」のデフォルトの選択から「名前-値ペア」に変更してデータ・ポイントをコレクションに格納する方法を構成する場合は、「データ形状の変更」ボタンをクリックします。次のオプションを提示するダイアログが表示されます。
入力済属性
コレクション内の各種データ・ポイントは、別々の属性によって表されます。このオプションは、グラフ内のデータ・ポイントの種類が1つのみの場合も有効です。
たとえば、推定値と実際値に対するデータ・ポイントがある場合は、推定値の属性と実際値の属性が異なる場合にのみ、「入力済属性」を選択します。
名前-値ペア
次の2つの属性によって表されるデータ・ポイントが2種類以上あることを示します。データ・ポイントの種類を指定するName属性とデータ値を指定するValue属性です。
たとえば、Name属性に、推定値を表すValue属性の値としてESTがある場合や、実際値を表すValue属性の値としてACTがName属性にある場合があります。
名前/値ペアの使用方法の詳細は、35.2.5項「名前/値ペアの使用方法に関する必知事項」を参照してください。
現在の行をマスター/ディテールに設定を選択して、グラフの行選択リスナーを使用すると、棒、スライスまたは他のグラフ・データ要素をクリックして別のADFコンポーネントのデータを更新できるようになります。
詳細は、35.2.4項「マスター/ディテール処理のグラフの行選択リスナーの使用に関する必知事項」を参照してください。
|
注意: データ・コレクションがマスター/ディテール関係での子コレクションになる場合、ダイアログには「子アクセッサを含める(階層グラフ)」のオプションが含まれるようになります。このオプションは、グラフのキューブ・モデルにツリー・コレクションをマップしていた古いデータ・モデルとの後方互換性を維持するために含まれています。そのため、通常は、このボックスを選択する必要はありません。 |
図35-4に示す「棒グラフの作成」ダイアログは、OrdersForCustomerデータ・コレクションのDateOrdered属性とTimeToShip属性のデータを基にして、Summit ADFサンプル・アプリケーションの出荷期間棒グラフを生成します。
オプションで、「プレビュー」タブをクリックして、棒グラフとそのデータを現在の設定でプレビューできます。必要に応じて、「構成」タブをクリックし、棒グラフの仕様を調整できます。
「OK」をクリックします。
データ・バインディング・ダイアログに必要事項を入力した後で、「プロパティ」ウィンドウを使用してグラフ属性の設定を指定できます。また、グラフ・タグに関連付けられた子タグを使用してグラフをさらにカスタマイズできます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のグラフの構成に関する項を参照してください。
|
注意:
|
グラフを「データ・コントロール」パネルからドロップすると、次の処理が行われます。
グラフのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
UIコンポーネントに必要なコードをJSFページに追加します。
JDeveloperにより生成されるデータ・バインディングXMLは、選択したグラフのタイプによって変わります。XMLは、作成する具体的なグラフ・タイプの物理モデルを表しています。例35-1は、ページ定義ファイルにJDeveloperが生成したバインディングを示しています。この例では、OrdersForCustomerデータ・コレクションのDateOrdered属性とTimeToShip属性のデータを基にして縦棒グラフが作成されています。
例35-1 ADF棒グラフのバインディングXML
<graph IterBinding="OrdersForCustomerIterator" id="OrdersForCustomer"
xmlns="http://xmlns.oracle.com/adfm/dvt" type="BAR_VERT_CLUST">
<graphDataMap convert="false" leafOnly="true">
<series>
<data>
<item value="TimeToShip"/>
</data>
</series>
<groups>
<item value="DateShipped"/>
</groups>
</graphDataMap>
</graph>
例35-2に、OrdersForCustomerデータ・コレクションをJSFページにドラッグしたときに縦棒グラフ用に生成されるコードを示します。
例35-2 ADF棒グラフのJSFコード
<dvt:barGraph id="graph2" value="#{bindings.OrdersForCustomer.graphModel}"
subType="BAR_VERT_CLUST">
<dvt:background>
<dvt:specialEffects/>
</dvt:background>
<dvt:graphPlotArea/>
<dvt:seriesSet>
<dvt:series/>
</dvt:seriesSet>
<dvt:o1Axis/>
<dvt:y1Axis/>
<dvt:legendArea automaticPlacement="AP_NEVER"/>
<dvt:attributeFormat name="TimeToShip" id="af3">
<af:convertNumber pattern="#{bindings.OrdersForCustomer1.hints.TimeToShip.format}"
groupingUsed="false"/>
</dvt:attributeFormat>
<dvt:attributeFormat name="DateOrdered" id="af4">
<af:convertDateTime pattern="#{bindings.OrdersForCustomer1.hints.DateOrdered.format}"/>
</dvt:attributeFormat>
</dvt:barGraph>
|
注意: データ優先開発を使用してグラフを作成すると、JDeveloperはページの非文字列カテゴリの属性ごとに、 この |
「グラフの作成」ダイアログで属性のラベルを構成するときに、「ラベル」フィールドで選択できる項目は基になるデータ型によって決まります。この選択に応じて、属性のラベルをグラフにレンダリングする方法が決まります。
属性がデータ値を表している場合、「ラベル」フィールドの選択肢は次のようになります。
「属性名の使用」: 基になるViewObjectに含まれる該当の属性のUIHintsから取得したラベルを使用して値を文字列としてレンダリングする場合に選択します。これはデフォルト選択です。
「ラベルなし」: ラベルをレンダリングしない場合は、これを選択します。メトリックが1つで、結果として表示されたグラフを説明する独自の説明テキストをページに表示する場合に、この選択肢は役に立ちます。
「テキスト・リソースの選択」: 「テキスト・リソースの選択」ダイアログを開いて、ラベルに使用するテキスト・リソースを選択または追加するには、これを選択します。テキスト・リソースは、アプリケーション・リソース・バンドルからの翻訳可能な文字列です。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
「式ビルダー」: 「式ビルダー」ダイアログを開いて、実行時に該当のラベルについて実行する式を作成するには、これを選択します。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
属性がデータ値のカテゴリを表す場合は、次の選択肢があります。
「属性値の使用」: カテゴリ・ラベルとして属性値をレンダリングする場合に選択します。これはデフォルト選択です。
ドロップダウン・リストで、ラベルの代替の属性を選択します。たとえば、従業員IDのかわりに従業員名をラベルに使用します。
グラフの行選択リスナー(マスター・ビューとして機能)を使用すると、棒、スライスまたは他のグラフ・データ要素をクリックして別のADFコンポーネント(ディテール・ビューとして機能)のデータを更新できるようになります。たとえば、グラフ内で特定の商品売上を表す棒をクリックすると、その商品に関する詳細な売上データがピボット・テーブルに表示されます。
このマスター/ディテール処理を宣言的に実現するには、次の要件を満たす必要があります。
次のように、同じデータ・コントロールを使用して両方のビューにデータを提供する必要があります。
グラフを行セットとしてデータ・コントロールの親コレクションにバインドします(例: DepartmentsView)。
もう1つのADFビュー(テーブル、ピボット・テーブルなど)をデータ・コントロールの依存ディテール・コレクションにバインドします(例: EmployeesView)。
「グラフの作成」ダイアログで「マスター/ディテールの現在行の設定」を選択して、グラフ・タグのclickListener属性の値を自動設定し、すでにグラフ・バインディングの一部になっているprocessClickメソッドを使用します。
たとえば、グラフ・タグのvalue属性がvalue="#{bindings.myGraph.graphModel}"の場合は、clickListener属性をclickListener="#{bindings.myGraph.graphModel.processClick}"に設定します。
グラフのデータ要素のクリックを処理するためのJavaコードを記述する必要はありません。グラフ・バインディングに対するprocessClickイベントが、グラフのデータ・コンポーネントに対するクリック・イベントを認識し、必要な処理を実行します。
データ・コントロールを使用してグラフを構成する場合、デフォルトでは、データ・バインディング・ダイアログで入力済属性がサポートされるため、コレクション内の各種データ・ポイントは各種属性によって表されます。たとえば、複数製品の売上げとコストに関するデータ・ポイントがある場合、データ・コレクション内で1つ目の属性が各製品の売上げデータ用で、2つ目の属性が各製品のコスト用である場合にのみ入力済属性を使用します。
入力済属性のデータ形状は、グラフ内のデータ・ポイントの種類が1つのみの場合も有効です。図35-5に入力済属性のデータ形状を示します。
データ・バインディング・ダイアログで「データ形状の変更」を選択し、ダイアログで名前/値ペアをサポートするように変更できます。ここで、データ・ポイントの名前を指定するName属性とデータ値を指定するValue属性という2つの属性によって表されるデータ・ポイントは2種類以上あります。この場合、専用の属性にはそれぞれ、各種データ・ポイントを識別する値があります。たとえば、メトリック属性は、データ・コレクションに各製品の売上とコストについての値を保持します。図35-6に名前/値ペアのデータ形状のデータ・コレクションを示します。
名前/値ペアのデータ形状を使用する場合は、グラフ・データ・バインディング・ダイアログで次の値を指定します。
名前属性: Name属性を表すデータ・コレクション内の属性で、その一意の値によりデータ・ポイントが各種メトリックにカテゴリ分けされます。
値属性: グラフに描画された数値データ・ポイントを表すデータ・コレクション内の属性。各データ・ポイントは、対応するName属性値によって特定のメトリックにカテゴリ分けされます。
ダイアログでの定義に従って、グラフ・タイプに関連するフィールドにValue属性の値を指定します。たとえば、バブル・グラフでは、「バブルの色」と「バブル・ツールチップ」を指定します。値はデータ・コレクション内の属性、つまり、データ・ポイントを特定のメトリックにカテゴリ分けするために実行時に使用されるName属性の一意の値を表すデータ値として指定できます。
1つ以上の値を追加するには、「追加」ドロップダウン・リストから「データ値」を選択します。各データ値は、データ・ポイントを特定のメトリックにカテゴリ分けするために実行時に使用されるName属性の一意の値を表します。Name属性で使用可能なすべてのメトリックを選択する必要はありません。
入力フィールドで属性やデータ値を指定した後で、任意の属性を右クリックし、「右に移動」、「左に移動」、「削除」または「データ値の編集」などのアクションに対応するポップアップ・メニューを表示できます。
たとえば、図35-7に示すように、名前/値ペアの形状でデータの単一数値列を使用して、データ・コレクションにバインドされた、始値、高値、低値、終値を表示する株価グラフを作成できます。
データ・コレクションが、入力済の属性ではなく、一連の名前/値ペアで配列されているグラフを作成できます。たとえば、複数のデータ・ポイントと複数の属性を持つデータを持つ1つの数値列に株価の値を配列することで、これらのポイントを指定できるようになります。
図35-8に、名前/値ペアで配列したデータ・コレクションの例を示します。MarketDateごとに、Measure属性は、Data属性に格納された値の名前(OPEN、HIGH、LOW、CLOSEおよびVOLUME)を保持しています。
始める前に:
データ視覚化グラフについて理解しておいてください。詳細は、35.2項「データバインドされたグラフの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、35.1.3項「データ視覚化コンポーネントの追加機能」を参照してください。
また、名前/値ペアのデータ形状について理解しておくとよいでしょう。詳細は、35.2.5項「名前/値ペアの使用方法に関する必知事項」を参照してください。
次のタスクを完了する必要があります。
13.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
JSFページを作成します。作成手順は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項を参照してください。
名前/値ペアのデータ形状を使用してグラフを作成する手順は次のとおりです。
「データ・コントロール」パネルから、コレクションを選択します。
1週間分の始値、高値、安値および終値の株価を表示するグラフを作成する例では、コレクションSStockPriceView1を選択します。図35-9に、「データ・コントロール」パネルでのSStockPriceView1コレクションを示します。
コレクションをJSFページにドラッグして、ポップアップ・メニューから「グラフ」を選択します。
「コンポーネント・ギャラリ」で、「株価」グラフ・カテゴリを選択し、次にグラフのタイプ「出来高と始値 - 高値 - 安値 - 終値のローソク足」を選択してから「OK」をクリックします。
次の操作を実行し、名前/値ペアのデータ形状をサポートするようにダイアログを変更します。
「データ形状の変更」をクリックします。
「チャート・データ形状の変更」ダイアログで、「名前-値ペア」を選択して「OK」をクリックします。
プロンプトが表示されたら、選択した内容を確認します。
変更したダイアログで次の操作を実行し、データを表示するグラフを構成します。
「名前属性」には、名前/値ペアの名前を保持する属性を選択します。
たとえば、図35-8のデータ・コレクションを使用して株価グラフを作成するには、ドロップダウン・リストから「Measure」を選択します。
「値属性」には、名前/値ペアのデータを保持する属性を指定します。
たとえば、図35-8のデータ・コレクションを使用して株価グラフを作成するには、ドロップダウン・リストから「Data」を選択します。
「グラフの値」表で、デフォルト値を受け入れるか、「ラベル」フィールドのドロップダウン・リストから値を選択して、実行時に表示されるラベルを指定します。
基になるデータ型に応じて、「ラベル」フィールドで選択可能な項目が決まります。この選択に応じて、属性のラベルをグラフにレンダリングする方法が決まります。詳細は、35.2.3項「属性のラベルの使用に関する必知事項」を参照してください。
現在の行をマスター/ディテールに設定を選択して、グラフの行選択リスナーを使用すると、棒、スライスまたは他のグラフ・データ要素をクリックして別のADFコンポーネントのデータを更新できるようになります。詳細は、35.2.4項「マスター/ディテール処理のグラフの行選択リスナーの使用に関する必知事項」を参照してください。
|
注意: データ・コレクションがマスター/ディテール関係での子コレクションになる場合、ダイアログには「子アクセッサを含める(階層グラフ)」のオプションが含まれるようになります。このオプションは、グラフのキューブ・モデルにツリー・コレクションをマップしていた古いデータ・モデルとの後方互換性を維持するために含まれています。そのため、通常は、このボックスを選択する必要はありません。 |
図35-10に、SStockPriceView1コレクションのMeasure属性を使用してグラフを生成する「株式グラフの作成」ダイアログを示します。
オプションで、「プレビュー」タブをクリックして、株式グラフとそのデータを現在の設定でプレビューできます。必要に応じて、「構成」タブをクリックし、株式グラフの仕様を調整できます。
「OK」をクリックします。
スパーク・チャートは、表の列に、またはテキストともにインラインでトレンドまたはバリエーションを表したシンプルな要約グラフです。折れ線スパーク・チャート、棒スパーク・チャートおよび面スパーク・チャートには、単一系列のデータ値が必要です。図35-11に、表の列に描画された折れ線スパーク・チャートの例を示します。
フローティング棒スパーク・チャートには、データ値の系列がフローティング・オフセットに1つ、棒の値のために1つの、合計2つ必要です。図35-12に、フローティング棒スパークチャートの例を示します。
スパーク・チャートを作成するには、「データ・コントロール・パネル」からデータ・コントロールを挿入します。図35-13に、「データ・コントロール」パネルからページ上にsparkchartコンポーネントをドラッグしたときに表示される「コンポーネント・ギャラリ」を示します。
バインディング・ダイアログで、選択したスパーク・チャート・タイプで表示する値を指定するように求められます。折れ線スパーク・チャート、棒スパーク・チャートおよび面スパーク・チャートには、変動する株価などの単一系列のデータ値が必要です。フローティング棒スパークチャートには、データ値の系列がフローティング・オフセットに1つ、棒の値のために1つの合計2つ必要です。たとえば、フローティング積上げ棒スパーク・チャートの作成ダイアログでは、次のように指定します。
「棒の高さ」: 棒の値に使用するデータ値を選択するには、これを使用します。
「棒のフロート」: フロート・オフセット、つまり軸とフローティング棒との間の距離に使用するデータ値を選択するには、これを使用します。
図35-14に、設定済のフローティング積上げ棒スパーク・チャートの作成ダイアログを示します。
簡単なUI優先開発のシナリオでは、「コンポーネント」ウィンドウを使用してスパーク・チャートを挿入してから、そのチャートをデータにバインドします。
スパークチャートにデータを提供するには、次のいずれかの方法を使用します。
円グラフには1つのデータ・グループが表示され、個別の系列を各区分で表します。このグラフ・タイプには、複数の行(区分ごとに1つの行)を持つ1つの列が必要になります。複数円グラフでは、データのグループ(つまり列)ごとに1つの円が表示されます。円グラフは、1つのデータ・ポイントのみで作成することもできますが、このようなグラフは意味をなさない場合があります。円-棒グラフの場合は、各区分が系列の合計を表します。このような1区分のデータの詳細は、パーセントの積上げ棒によって示されます。
図35-15に、Summit ADFサンプル・アプリケーションの円グラフを示します。このグラフは、各蓄積場所おける受注品目の在庫を、その品目の合計在庫の割合として表示します。ユーザーが各区分の上にマウス・ポインタを移動すると、その場所での実際の数量を示すツールチップが表示されます。この例のデータ列は、受注品目の合計在庫を表し、それぞれの区分は各備蓄場所でのインベントリ・レベルを表しています。
始める前に:
データ視覚化グラフについて理解しておいてください。詳細は、35.2項「データバインドされたグラフの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、35.1.3項「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
13.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
JSFページを作成します。作成手順は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項を参照してください。
データバインドされた円グラフを作成するには:
「データ・コントロール」パネルから、コレクションを選択します。
たとえば、Summit ADFサンプル・アプリケーションの「Summit Customer Management」ページに、各備蓄場所でのインベントリ・レベルを表示する円グラフを作成する場合は、「BackOfficeAppModuleDataControl」→「Customers」→「OrdersForCustomer」→「ItemsForOrder」→「InventoryForOrderItem」コレクションの順に選択します。図35-16に、「データ・コントロール」パネルのInventoryForOrderItemコレクションを示します。
コレクションをJSFページにドラッグして、ポップアップ・メニューから「グラフ」を選択します。
「コンポーネント・ギャラリ」で、「円」グラフ・カテゴリとグラフ・タイプを選択してから、「OK」をクリックします。
たとえば、図35-15の円グラフを作成する場合は、「円」グラフ・カテゴリと「円」グラフ・タイプを選択します。
「円グラフの作成」ダイアログで次の操作を実行し、データを表示する円グラフを構成します。
「円」フィールドのドロップダウン・メニューから、データの列に表示する属性を選択します。
たとえば、インベントリ・レベルを表示するようにSummit ADFサンプル・アプリケーションの円グラフを構成する場合は、「円」フィールドのドロップダウン・メニューからAmountInStock属性を選択します。
実行時に属性の値をどこに表示するかに応じて、「使用可能」リストから「区分」フィールドに属性をドラッグします。
たとえば、受注品目の各備蓄場所におけるインベントリ・レベルを表示するように、Summit ADFサンプル・アプリケーションの円グラフを構成する場合は、「円グラフの作成」ダイアログで、「使用可能」リストからCity属性をドラッグして「区分」フィールドにドロップします。
「属性ラベル」表で、デフォルト値を受け入れるか、「ラベル」フィールドのドロップダウン・リストから値を選択して、実行時に表示されるラベルを指定します。
基になるデータ型に応じて、「ラベル」フィールドで選択可能な項目が決まります。この選択に応じて、属性のラベルをグラフにレンダリングする方法が決まります。詳細は、35.2.3項「属性のラベルの使用に関する必知事項」を参照してください。
現在の行をマスター/ディテールに設定を選択して、グラフの行選択リスナーを使用すると、棒、スライスまたは他のグラフ・データ要素をクリックして別のADFコンポーネントのデータを更新できるようになります。
詳細は、35.2.4項「マスター/ディテール処理のグラフの行選択リスナーの使用に関する必知事項」を参照してください。
|
注意: データ・コレクションがマスター/ディテール関係での子コレクションになる場合、ダイアログには「子アクセッサを含める(階層グラフ)」のオプションが含まれるようになります。このオプションは、グラフのキューブ・モデルにツリー・コレクションをマップしていた古いデータ・モデルとの後方互換性を維持するために含まれています。そのため、通常は、このボックスを選択する必要はありません。 |
「入力済属性」のデフォルトの選択から「名前-値ペア」に変更してデータ・ポイントをコレクションに格納する方法を構成する場合は、「データ形状の変更」ボタンをクリックします。
名前/値ペアの使用方法の詳細は、35.2.5項「名前/値ペアの使用方法に関する必知事項」を参照してください。
図35-17に示す「円グラフの作成」ダイアログでは、InventoryForOrderItemコレクションのAmountInStock属性とCity属性を使用して円グラフを生成します。
「プレビュー」タブを必要に応じてクリックすることで、現在の設定での円グラフとそのデータをプレビューできます。必要に応じて、「構成」タブをクリックし、株式グラフの仕様を調整できます。
「OK」をクリックします。
データ・バインディング・ダイアログに必要事項を入力した後で、「プロパティ」ウィンドウを使用してグラフ属性の設定を指定できます。また、グラフ・タグに関連付けられた子タグを使用してグラフをさらにカスタマイズできます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のグラフの構成に関する項を参照してください。
面、線またはマーカーで表示されるデータの詳細なビューを表示するように、データバインドされたグラフを構成できます。
図35-18に、棒グラフの簡単な例を示します。この棒グラフには全従業員の給与合計がSummit組織内の部門別に表示されます。部門のIDの上にマウス・ポインタを重ねると、そのIDがドリル可能であることを示すツールチップが表示されます。部門IDをクリックすると、ページが切り替わり、その部門に所属する各従業員の名前と給与が表示されます。
データバインドされたグラフをドリル可能にするには、グラフのdrillingEnabled属性をtrueに設定します。デフォルト値はfalseです。
また、グラフのページ定義ファイルを更新してドリル階層を定義し、集計データの表示方法を指定する必要があります。
図35-18のグラフは、ADF DVTコンポーネントについてのSummitサンプル・アプリケーションのデータ・コントロールにバインドされています。このデータ・コントロールには、各従業員の部門ID、姓および給与が保持されています。グラフをドリル可能にするために、階層の詳細を追加し、初期ページの集計値として給与合計を指定するようにグラフのページ定義ファイルが変更されています。
例35-6に、ドリル構成前のページ定義ファイル内のバインディングを示します。
例35-6 ドリル前のページ定義を示したサンプル・コード
<graph IterBinding="SEmpView1Iterator" id="SEmpView1"
xmlns="http://xmlns.oracle.com/adfm/dvt"
type="BAR_VERT_CLUST">
<graphDataMap convert="false" leafOnly="true">
<series>
<data>
<item value="Salary"/>
</data>
</series>
<groups>
<item value="DeptId"/>
</groups>
</graphDataMap>
</graph>
例35-7に、ドリル・サポート用に構成された同一ページ定義ファイルを示します。強調表示された部分は、ドリル・サポートの有効化のために追加されたエントリです。
例35-7 ドリル用に構成されたページ定義を示したサンプル・コード
<graph IterBinding="SEmpView1Iterator" id="SEmpView1"
xmlns="http://xmlns.oracle.com/adfm/dvt"
type="BAR_VERT_CLUST">
<graphDataMap convert="false" leafOnly="true">
<hierarchies>
<item value="DeptId">
<child value="LastName"/>
</item>
</hierarchies>
<drills type="REPLACE"/>
<series>
<data aggregateDuplicates="true" defaultAggregateType="SUM">
<item value="Salary"/>
</data>
</series>
<groups>
<item value="DeptId"/>
</groups>
</graphDataMap>
</graph>
始める前に:
データバインド・グラフについて理解しておくと役立ちます。詳細は、35.2項「データバインドされたグラフの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、35.1.3項「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
13.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
JSFページを作成します。作成手順は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項を参照してください。
35.2項「データバインドされたグラフの作成」の手順に従い、データバインドされたグラフを作成します。
図35-18の棒グラフの例では、組織内の各従業員に関する情報を保持するSummit ADF DVTサンプル・アプリケーションのデータ・コントロールを使用しています。図35-19に、データ・コントロールの例を示します。
データバインドされたグラフにドリル・サポートを構成するには:
「構造」ウィンドウで、dvt:typeGraphノードを右クリックし、「ページ定義に移動」を選択します。
ページ定義のソース・ビューで、graphDataMapにhierarchies要素を追加し、ドリル階層の親子関係を定義します。
例35-7では、アイテムDeptIdは階層のトップ・レベルであるため、グラフが最初にレンダリングされるときに表示されます。子はLastNameとして定義されており、ユーザーがグラフ上で部門IDをドリルすると表示されます。
ドリル・レベルを追加するには、別のitemをhierarchiesに追加します。最初のitemの子の値を2つ目のitemの新しい値として使用し、さらにドリル・レベルの値を2つ目のitemの子として追加します。例35-8に、2つのレベルのドリル用に構成されたグラフのhierarchiesエントリを示します。この例では、年次データから四半期別データ、月次データまでドリルできます。
drills要素をgraphDataMapに追加し、typeをREPLACEに設定します。
<drills type="REPLACE"/>
このドリル・タイプでは、ドリル対象上にある行セットがフィルタ処理され、ターゲットとその兄弟がターゲットの子と置き換わります。これは、グラフがサポートする唯一のドリル・タイプです。
defaultAggregateTypeをgraphDataMapのdataに追加します。
defaultAggregateTypeによって、グラフが最初に表示されるときのデータの集計方法が決まります。例35-7では、defaultAggregateTypeがSUMに設定されているため、部署内の全従業員の給与合計がグラフに表示されます。
defaultAggregateTypeは、AVERAGE、COUNT、MAX、MEDIAN、MIN, NONE、STDDEV、またはVARIANCEにも設定できます。
すべての重複を集計する場合は、例35-7に示したように、dataにaggregateDuplicatesを追加し、これをtrueに設定します。
変更したページ定義ファイルを保存します。
構造ウィンドウで「dvt:<type>Graph」コンポーネントを右クリックし、「プロパティに移動」を選択します。
「動作」セクションを展開し、DrillingEnabled属性のドロップダウン・メニューから「true」を選択します。
ゲージでは、各データ・ポイントに対し、そのデータ・ポイントが許容範囲の内と外のどちらに含まれるかが示されます。データバインドされた1つのゲージ・コンポーネントは、使用するデータ・コレクション内の行数に応じて、単一のゲージまたは一連のゲージ全部を作成できます。コレクション内の各行には、単一のゲージに対する値が含まれます。
ゲージ用のコンポーネント・ギャラリを使用すると、次のゲージのカテゴリから選択できます。
ダイアル: タスクのメトリック値を構成可能な弧に沿って示します。
ステータス・メーター:矩形のバーに沿ってタスクの進度または測定値のレベルを示します。
ステータス・メーター(垂直):タスクの進行状況やある指標のレベルを長方形の棒に沿って示します。
LED:キー・パフォーマンス・インディケータ(KPI)などの指標を図示します。LEDゲージでは、良好(上矢印)、適正(左矢印または右矢印)、不良(下矢印)を示す矢印など、数種類の図形を使用できます。
これらのカテゴリにはそれぞれ、多数の様々なタイプのゲージが含まれます。単一ゲージの作成時に表示されるコンポーネント・ギャラリを詳しく調べて、使用可能なすべてのゲージ、カテゴリ・タイプおよびそれぞれの説明を確認してください。図35-20に、ADFゲージ用に表示されるコンポーネント・ギャラリを示します。
データ・バインディングのプロセスは、作成するゲージのタイプに関係なく、基本的に同じです。必要なものは、メトリック値(つまり、ゲージで示す指標)のみです。ただし、データ・コレクション内の行に最大、最小、しきい値などの範囲情報が含まれている場合は、その値をゲージにバインドして動的な設定を示すことができます。ゲージの上部または下部ラベルで使用する情報がデータ・コレクション内に含まれている場合も、その値をゲージにバインドできます。
データ・バインディングの完了後にケージをカスタマイズする方法の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「ゲージ・コンポーネントの使用方法」の章を参照してください。
ADFゲージ・コンポーネントを使用して、悪いから良いまで変化する値範囲(しきい値)を指定した、背景に対するダイアル・ゲージを作成できます。ゲージのインジケータではメトリックの現在の値が示される一方、図形によってその値のステータスを簡単に評価できます。
図35-21に示す単一のダイアル・ゲージは、Summit ADF DVTサンプル・アプリケーションの在庫品目についてのAmountInStockデータからゲージを作成した場合に表示されます。AmountInStockメトリックの値(650)は、ゲージの下側のラベルに表示されます。ゲージの値の範囲は0から1500です。しきい値の範囲は、品目のReorderPoint属性(625)とMaxInStock属性(1100)に格納された値で定義され、不足状態(再発注ポイント以下)は赤色、適性状態(再発注点と最大インベントリ・レベルの間)は緑色に塗りつぶされます。また、品目の最大インベントリ・レベルを超過する値は黄色に塗りつぶされます。
データ・コントロールを使用してダイアル・ゲージを作成する場合は、ゲージ・コンポーネントをデータ・コレクションの属性にバインドします。JDeveloperを使用すると、「データ・コントロール」パネルから属性をドラッグ・アンド・ドロップすることで、この処理を宣言的に実行できます。属性をドラッグ・アンド・ドロップした後で、ダイアル・ゲージの作成ダイアログを使用してゲージを構成します。
図35-22に示すダイアル・ゲージの作成ダイアログは、図35-21に示した在庫数量ダイアル・ゲージ用に構成されていて、図35-20に示したゲージ・タイプとクイック・スタート・レイアウトを使用しています。
始める前に:
データバインドされたデータ視覚化ゲージについて理解しておいてください。詳細は、35.3項「データバインドされたゲージの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、35.1.3項「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
13.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
JSFページを作成します。作成手順は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項を参照してください。
データバインドされたダイアル・ゲージを作成するには:
「データ・コントロール」パネルから、コレクションの属性を選択します。
たとえば、Summit ADF DVTサンプル・アプリケーションに、在庫品目のインベントリ・レベルについて表示するダイアル・ゲージを作成する場合は、ProductInventoryView1コレクションのAmountInStock属性を選択します。図35-23は、AmountInStock属性を選択している「データ・コントロール」パネルのProductInventoryView1コレクションを示しています。
JSFページに属性をドラッグして、ポップアップ・メニューから「ゲージ」を選択します。
「コンポーネント・ギャラリ」で、ゲージのカテゴリとタイプおよびクイック・スタート・レイアウトを選択して、「OK」をクリックします。
ダイアル・ゲージの作成ダイアログで、「構成」タブをクリックして、次の操作を実行します。
「メトリック」ボックスで、データ・コレクション内の列がゲージで図示する実際の値を保持していることを確認します。このダイアログで必須なのは、この値のみです。
最小ボックスで、ゲージ範囲の最小値がデータ・コレクションに格納されている場合は、この値が含まれている列を選択します。または、範囲の最小数を指定します。値の指定を省略すると、最小値が自動的に計算され、デフォルト設定は0になります。
最大ボックスで、ゲージ範囲の最大値がデータ・コレクションに格納されている場合は、この値が含まれている列を選択します。または、範囲の最大数を指定します。値の指定を省略すると、最大値が自動的に計算され、デフォルト設定は100になります。
ゲージの上部ラベルに表示する値がデータ・コレクションに格納されている場合は、「上部ラベルの表示」セクションで、「上部ラベルの表示」チェック・ボックスを選択します。
表示するラベルは、「ラベル」ドロップダウン・メニューから選択します。必要に応じて、「位置」ドロップダウン・メニューから「内部ゲージ」を選択して、ラベルをゲージの内側に配置します。
ゲージの下部ラベルに表示する値がデータ・コレクションに格納されている場合は、「下部ラベルの表示」セクションで、「下部ラベルの表示」チェック・ボックスを選択します。
表示するラベルは、「ラベル」ドロップダウン・メニューから選択します。必要に応じて、「位置」ドロップダウン・メニューから「内部ゲージ」を選択して、ラベルをゲージの内側に配置します。
ゲージのメトリック・ラベルに表示するメトリック値がデータ・コレクションに格納されている場合は、「メトリック・ラベルの表示」セクションで、「メトリック・ラベルの表示」チェック・ボックスを選択します。
「メトリック・ラベルの表示」ドロップダウン・リストから、ラベルをゲージの内側に配置する「内部ゲージ」を選択するか、ラベルをゲージの下側に配置する「下のゲージ」を選択します。メトリック・ラベルと下部ラベルを同時に表示するには、「下部ラベル付き」を選択してから、「下部ラベルの表示」セクションの「下部ラベルの表示」を選択します。
しきい値を含むクイック・スタート・レイアウトを選択した場合は、「しきい値属性」リストで、threshold1とthreshold2の値を指定します。静的な値を入力するか、しきい値のドロップダウン・メニューから選択可能な属性を選択します。
|
注意: ゲージの上部、下部およびしきい値の各ラベルは、「テキスト・リソースの選択」ダイアログを使用してリソース・バンドルからテキスト・リソースを指定するように構成することも、「EL式」ビルダーを使用して実行時にラベル・テキストを評価することもできます。どちらのダイアログも、ラベル・フィールドのドロップダウン・リストを使用して開きます。 |
オプションで、「プレビュー」タブをクリックして、ゲージとそのデータを現在の設定でプレビューできます。必要に応じて、「構成」タブをクリックし、ゲージの仕様を調整できます。
「OK」をクリックします。
「プロパティ」ウィンドウでは、ゲージのバインディングの完了後に、ゲージ・タグおよびその子タグの追加属性の値を設定して、コンポーネントをカスタマイズできます。たとえば、スケーリングなしで在庫数量を表示するように在庫数量ゲージを構成する場合は、メトリックのscaling属性とティック・ラベルをnoneに設定します。
また、既存のゲージ・バインディングを確認して調整するには、そのゲージ・コンポーネントの「プロパティ」ウィンドウで「編集」アイコンをクリックします。
データ・バインディングの完了後にケージをカスタマイズする方法の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「ゲージ・コンポーネントの使用方法」の章を参照してください。
ゲージを「データ・コントロール」パネルからドロップすると、次の処理が行われます。
ゲージのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
UIコンポーネントに必要なコードをJSFページに追加します。
例35-9に示すバインディングは、倉庫内にある製品のインベントリ・レベルを表示するダイアル・ゲージ用にJDeveloperが生成したものです。このコード例では、ゲージ・メトリックの値をProductInventoryView1データ・コレクション内のAmountInStock属性から動的に取得して、ゲージ・メトリックのしきい値を同じコレクション内のReorderPoint属性とMaxInStock属性から動的に取得することを示しています。
例35-9 ダイアル・ゲージのバインディング
<parameters/>
<executables>
<variableIterator id="variables"/>
<iterator Binds="ProductInventoryView1" RangeSize="1"
DataControl="AppModuleDataControl"
id="ProductInventoryView1Iterator"/>
</executables>
<bindings>
<attributeValues IterBinding="ProductInventoryView1Iterator" id="AmountInStock">
<AttrNames>
<Item Value="AmountInStock"/>
</AttrNames>
</attributeValues>
<attributeValues id="ReorderPoint" IterBinding="ProductInventoryView1Iterator">
<AttrNames>
<Item Value="ReorderPoint"/>
</AttrNames>
</attributeValues>
<attributeValues id="MaxInStock" IterBinding="ProductInventoryView1Iterator">
<AttrNames>
<Item Value="MaxInStock"/>
</AttrNames>
</attributeValues>
<attributeValues id="Name" IterBinding="ProductInventoryView1Iterator">
<AttrNames>
<Item Value="Name"/>
</AttrNames>
</attributeValues>
</bindings>
例35-10に、ダイアル・ゲージに対してJDeveloperによりJSFページに生成されたコードを示します。<dvt:thresholdSet>要素は、しきい値ごとに<dvt:threshold>要素を1つ指定しています。
例35-10 ダイアル・ゲージのJSFページのコード
<dvt:gauge id="gauge1" value="#{bindings.AmountInStock.inputValue}"
gaugeType="DIAL" minValue="0"
maxValue="1500" shortDesc="Amount In Stock Gauge">
<dvt:gaugeBackground>
<dvt:specialEffects/>
</dvt:gaugeBackground>
<dvt:thresholdSet>
<dvt:threshold fillColor="#d62800"
thresholdMaxValue="#{bindings.ReorderPoint.inputValue}"/>
<dvt:threshold fillColor="#63a500"
thresholdMaxValue="#{bindings.MaxInStock.inputValue}"/>
<dvt:threshold fillColor="#e7e700"/>
</dvt:thresholdSet>
<dvt:gaugeFrame/>
<dvt:indicator/>
<dvt:indicatorBase/>
<dvt:gaugePlotArea/>
<dvt:tickLabel scaling="none"/>
<dvt:tickMark/>
<dvt:topLabel position="LP_ABOVE_GAUGE" text="#{bindings.Name.inputValue}"/>
<dvt:bottomLabel position="LP_BELOW_GAUGE"
text="#{bindings.AmountInStock.hints.label}"/>
<dvt:metricLabel position="LP_WITH_BOTTOM_LABEL" scaling="none">
<af:convertNumber pattern="#{bindings.AmountInStock.format}"/>
</dvt:metricLabel>
</dvt:gauge>
|
注意: また、データ・コレクション内の属性のかわりに、コレクションにゲージをバインドすることもできます。たとえば、ダイアル・ゲージを作成するために、 |
ADFゲージ・コンポーネントを使用して、ステータス・メーター・ゲージを作成します。このゲージでは、外側の四角形が示している範囲に対する現在の測定レベルを内側の四角形が表しています。ステータス・メーター・ゲージのグラフィックにより、測定の状態や進行状況を簡単に評価することができます。
図35-24に、ステータス・メーター・ゲージのセットを示します。これらのゲージは、製品を備蓄する各倉庫でのインベントリ・レベルを表しています。ユーザーが、ページの左側にあるナビゲーション・コントロールを使用して製品のリストを巡回すると、ゲージ・セットは、現在選択中の製品を備蓄している各倉庫と、それらの各倉庫のインベントリ・レベルを反映するように変化します。
このゲージ・セットは、1つのゲージ・コンポーネントをデータ・コレクション(SInventoryView2)にバインドした結果として生成されます。このデータ・コレクションは、製品を備蓄する倉庫ごとのデータ行を保持しています。各行により、セットに1つのゲージが生成されます。ページの左側にあるフォームは、SProductView1データ・コレクションにバインドされたADFフォームです。
図35-25は、図35-24に表示されているADFフォームとゲージ・セットのデータ・コントロールを示しています。SProductView1データ・コレクションとSInventoryView2データ・コレクションとの間の階層関係に注目してください。この関係により、ゲージ・セットのデータは、ユーザーがフォームのナビゲーション・コントロールを使用して巡回すると自動的に更新されます。
データ・コントロールを使用してステータス・メーター・ゲージ・セットを作成するには、複数のデータ行を含むデータ・コレクションにゲージ・コンポーネントをバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。
始める前に:
データバインドされたデータ視覚化ゲージについて理解しておいてください。詳細は、35.3項「データバインドされたゲージの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、35.1.3項「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
13.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
JSFページを作成します。作成手順は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項を参照してください。
ゲージをサポートするために必要な別のコンポーネントを追加します。
たとえば、図35-24に示したゲージ・セットは、ADFフォームで選択した行に基づいてデータを表示します。この例に基づいたフォームを作成するには、SProductView1コレクションをページにドラッグして、ポップアップ・メニューから「フォーム」→「ADFフォーム」を選択します。
図35-26に、必要事項を入力した「フォーム・フィールドの編集」ダイアログを示します。ダイアログのヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。ADFフォームの詳細は、28.3.1項「データ・コントロール・コレクションを使用したフォームの作成方法」を参照してください。
データバインドされたステータス・メーター・ゲージ・セットを作成するには:
「データ・コントロール」パネルから、コレクションを選択します。
たとえば、Summit ADF DVTサンプル・アプリケーションにステータス・メーター・ゲージ・セットを作成して、指定した製品を備蓄しているすべての倉庫の在庫数量を表示する場合は、SInventoryView2コレクションを選択します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「ゲージ」を選択します。
コンポーネント・ギャラリで、次のようにします。
「カテゴリ」リストで、「ステータス・メーター」または「ステータス・メーター(垂直)」を選択します。
作成するゲージのタイプを選択します。
ゲージ・セットを指定するには、ゲージ・セットを含んでいるゲージ・タイプを選択します。図35-27に、水平ステータス・メーター・ゲージ・セットが選択された「コンポーネント・ギャラリ」を示します。
実行時のゲージのクイック・スタート・レイアウトを選択します。
「OK」をクリックします。
表示される「ゲージの作成」ダイアログで、次に説明しているように値を選択します。
「メトリック」ドロップダウン・リストから属性バインディングを選択します。この属性バインディングには、ゲージで図示する実際の値が含まれます。
たとえば、Summit ADF DVTゲージ・セットの例を複製する場合は、AmountInStock属性を選択します。
「最小」フィールドに、ゲージ範囲の最小値がデータ・コレクションに格納されている場合は、最小値を入力します。
「最大」フィールドに、ゲージ範囲の最大値がデータ・コレクションに格納されている場合は、最大値を入力します。
ゲージの上部ラベルに表示する値がデータ・コレクションに格納されている場合は、「上部ラベルの表示」セクションで、「上部ラベルの表示」チェック・ボックスを選択します。
表示するラベルは、「ラベル」ドロップダウン・メニューから選択します。必要に応じて、「位置」ドロップダウン・メニューから「内部ゲージ」を選択して、ラベルをゲージの内側に配置します。
ゲージの下部ラベルに表示する値がデータ・コレクションに格納されている場合は、「下部ラベルの表示」セクションで、「下部ラベルの表示」チェック・ボックスを選択します。
表示するラベルは、「ラベル」ドロップダウン・メニューから選択します。必要に応じて、「位置」ドロップダウン・メニューから「内部ゲージ」を選択して、ラベルをゲージの内側に配置します。
ゲージのメトリック・ラベルに表示する値がデータ・コレクションに格納されている場合は、「メトリック・ラベルの表示」ボックスで、「メトリック・ラベルの表示」チェック・ボックスを選択します。
「メトリック・ラベルの表示」ドロップダウン・リストから、ラベルをゲージの内側に配置する「内部ゲージ」を選択するか、ラベルをゲージの下側に配置する「下のゲージ」を選択します。メトリック・ラベルと下部ラベルを同時に表示するには、「下部ラベル付き」を選択してから、「下部ラベルの表示」セクションの「下部ラベルの表示」を選択します。
しきい値を含むクイック・スタート・レイアウトを選択した場合は、threshold1とthreshold2に値を入力します。ゲージの最大値と等しいしきい値を入力してはいけません。ゲージの最大値は、自動的にしきい値設定として扱われます。
|
注意: ゲージ、上位、下位およびしきい値の各ラベルを構成し、「テキスト・リソースの選択」ダイアログを使用してリソース・バンドルからテキスト・リソースを指定したり、EL式ビルダーを使用して実行時にラベル・テキストを評価できます。どちらのダイアログも、ラベル・フィールドのドロップダウン・リストを使用して開きます。 |
オプションで、「プレビュー」タブをクリックして、ゲージとそのデータを現在の設定でプレビューできます。必要に応じて、「構成」タブをクリックし、ゲージの仕様を調整します。
図35-28に、図35-24で示したステータス・メーター・ゲージ・セットの設定を示します。このダイアログでは、必須のメトリック値を設定する以外にも、データ・コレクションのReorderPoint属性とMaxInStock属性に基づいたしきい値を設定し、配置位置、データ・ソース、上部や下部の表示およびメトリックのラベルを指定します。
「OK」をクリックします。
「プロパティ」ウィンドウでは、ゲージのバインディング完了後に、ゲージ・タグおよびその子タグの追加属性の値を設定することで、コンポーネントを必要に応じてカスタマイズできます。
データ・バインディングの完了後に、ゲージをカスタマイズする方法の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のゲージ・コンポーネントの使用に関する項を参照してください。
ゲージ・セットを「データ・コントロール」パネルからドロップすると、次の処理が行われます。
ゲージ・セットのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
UIコンポーネントに必要なコードをJSFページに追加します。
例35-11に、各倉庫のインベントリ・レベルを表示するステータス・メーター・ゲージ・セット(図35-24を参照)に生成された行セット・バインディングを示します。この例では、ゲージ・メトリック属性とデータ・コレクション内のQuantityOnHand値との間に作成された値バインディングが示されています。また、Bottom Label属性とデータ・コレクション内のWarehouseName値の間の値バインディングも示されています。
例35-11 ADFステータス・メーター・ゲージ・セットのバインディング・コード
<gauge IterBinding="SInventoryView2Iterator" id="SInventoryView2"
xmlns="http://xmlns.oracle.com/adfm/dvt"
type="STATUSMETER">
<gaugeDataMap convert="false">
<item type="metric" value="AmountInStock"/>
<item type="topLabel" value="WarehouseId"/>
<item type="bottomLabel" value="Name"/>
<thresholds>
<item value="ReorderPoint"/>
<item value="MaxInStock"/>
</thresholds>
</gaugeDataMap>
</gauge>
例35-12に、倉庫での特定の製品についてのインベントリ・レベルを示すステータス・メーター・ゲージ・セット用にJSFページに生成されるコードを示します。gaugeSetColumnCount属性は、ゲージを2列で表示することを指定します。
例35-12 ADFステータス・メーター・ゲージ・セットのJSFページのコード
<dvt:gauge id="gauge1" value="#{bindings.SInventoryView2.gaugeModel}"
gaugeType="STATUSMETER" gaugeSetDirection="GSD_ACROSS"
gaugeSetColumnCount="2" shortDesc="Sample Gauge Set"
inlineStyle="width:500px; height:500px;" gaugeSetAlignment="GSA_TOP">
<dvt:gaugeBackground>
<dvt:specialEffects/>
</dvt:gaugeBackground>
<dvt:thresholdSet>
<dvt:threshold fillColor="#d62800" text="Reorder Time"/>
<dvt:threshold fillColor="#63a500" text="Levels OK"/>
<dvt:threshold fillColor="#e7e700" text="Over Stock"/>
</dvt:thresholdSet>
<dvt:indicatorBar/>
<dvt:gaugePlotArea/>
<dvt:tickLabel scaling="none"/>
<dvt:tickMark/>
<dvt:topLabel position="LP_ABOVE_GAUGE"/>
<dvt:bottomLabel position="LP_BELOW_GAUGE"/>
<dvt:gaugeLegendTitle text="Legend"/>
<dvt:gaugeLegendArea position="LAP_RIGHT"/>
<dvt:metricLabel position="LP_WITH_BOTTOM_LABEL" scaling="none"/>
</dvt:gauge>
データバインドされたADF表に、データバインドされたダイアル、LEDまたはステータス・メーターのゲージを追加するには、表を編集または作成しているときに、列コンテンツを指定する際にgaugeコンポーネントを選択します。
図35-29に、表の一部を示します。この表は、倉庫内のすべての製品をADF DVTサンプル・アプリケーションに表示します。この例では、AmountInStock列に、各製品の在庫数量を示すステータス・メーター・ゲージが組み込まれています。
データバインドされたADF表にゲージを追加するには、「データ・コントロール」パネルからJSFページに、ゲージ・メトリックを含むデータ・コレクションをドラッグして、作成するゲージのタイプを指定します。
始める前に:
データバインドされたデータ視覚化ゲージについて理解しておいてください。詳細は、35.3項「データバインドされたゲージの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、35.1.3項「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
13.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
JSFページを作成します。作成手順は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項を参照してください。
データバインドされたADF表にゲージを組み込むには:
「データ・コントロール」パネルから、ADF表に使用するコレクションを選択します。
たとえば、Summit ADF DVTサンプル・アプリケーションに、倉庫内の製品ごとのインベントリ・レベルを表示する表を作成する場合は、ProductInventoryView1コレクションを選択します。図35-30に、「データ・コントロール」パネル内のProductInventoryView1コレクションを示します。
JSFページにコレクションをドラッグし、ポップアップ・メニューから「表」→「ADF表」を選択します。
「表の列の編集」ダイアログで、ゲージ・メトリックを表す列を選択します。
たとえば、ゲージ・メトリックとして使用する列にAmountInStock列を選択します。
「使用するコンポーネント」メニューから、作成するゲージのタイプを選択します。
たとえば、「ゲージ・ステータス・メーター」を選択すると、表にステータス・メーターが追加されます。
表の構成を完了します。
ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
図35-31は、図35-29に示した表の必要事項を入力したダイアログです。このダイアログでは、AmountInStock列に「ゲージ・ステータス・メーター」が選択されています。
「OK」をクリックして、JSFページに表を追加します。
「プロパティ」ウィンドウでは、表のバインディング完了後に、ゲージ・タグおよびその子タグの追加属性の値を設定してコンポーネントをカスタマイズできます。たとえば、スケーリングなしで在庫数量を表示するようにゲージを構成する場合は、メトリック・ラベルのscaling属性をnoneに設定します。
既存の表バインディングを確認して調整するには、表コンポーネントの「プロパティ」ウィンドウで「編集」アイコンをクリックします。
データ・バインディングの完了後にケージをカスタマイズする方法の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「ゲージ・コンポーネントの使用方法」の章を参照してください。
データバインドされたADF表の作成方法および構成方法の詳細は、第29章「ADFによるデータバインドされた表の作成」を参照してください。
データバインドされたADF表にゲージを組み込むと、ゲージのメトリック属性がページ定義ファイルに追加され、JSFページのUIコンポーネントが更新されます。
例35-13は、図35-29で示したADF表のバインディングです。
例35-13 ADF表内のステータス・メーター・ゲージのバインディング
<parameters/>
<executables>
<variableIterator id="variables"/>
<iterator Binds="ProductInventoryView2" RangeSize="25"
DataControl="AppModuleDataControl"
id="ProductInventoryView2Iterator"/>
<searchRegion Binds="ProductInventoryView2Iterator" Criteria=""
Customizer="oracle.jbo.uicli.binding.JUSearchBindingCustomizer"
id="ProductInventoryView2Query"/>
</executables>
<bindings>
<tree IterBinding="ProductInventoryView2Iterator" id="ProductInventoryView2">
<nodeDefinition DefName="model.ProductInventoryView"
Name="ProductInventoryView20">
<AttrNames>
<Item Value="Name"/>
<Item Value="AmountInStock"/>
<Item Value="MaxInStock"/>
<Item Value="OutOfStockExplanation"/>
<Item Value="ProductId"/>
<Item Value="ReorderPoint"/>
<Item Value="RestockDate"/>
<Item Value="WarehouseId"/>
<Item Value="Id"/>
<Item Value="ShortDesc"/>
</AttrNames>
</nodeDefinition>
</tree>
</bindings>
例35-14に、ADF表のJSFページに追加されたコードを示します。gauge要素は、太字で強調してあります。簡潔にするために、表の最初の3列のみを表示しています。
例35-14 データバインドされた表にゲージを表示するJSFページのサンプル・コード
<af:table value="#{bindings.ProductInventoryView2.collectionModel}" var="row"
rows="#{bindings.ProductInventoryView2.rangeSize}"
emptyText="#{bindings.ProductInventoryView2.viewable ?
'No data to display.' : 'Access Denied.'}"
fetchSize="#{bindings.ProductInventoryView2.rangeSize}"
rowBandingInterval="0"
filterModel="#{bindings.ProductInventoryView2Query.queryDescriptor}"
queryListener="#{bindings.ProductInventoryView2Query.processQuery}"
filterVisible="true" varStatus="vs"
selectionListener="#{bindings.ProductInventoryView2.collectionModel.makeCurrent}"
rowSelection="multiple" id="t1">
<af:column sortProperty="#{bindings.ProductInventoryView2.hints.ProductId.name}"
filterable="true" sortable="true"
headerText="#{bindings.ProductInventoryView2.hints.ProductId.label}"
id="c5" width="57">
<af:outputText value="#{row.ProductId}"
shortDesc="#{bindings.ProductInventoryView2.hints.ProductId.tooltip}"
id="ot4">
<af:convertNumber groupingUsed="false"
pattern="#{bindings.ProductInventoryView2.hints.ProductId.format}"/>
</af:outputText>
</af:column>
<af:column sortProperty="#{bindings.ProductInventoryView2.hints.Name.name}"
filterable="true" sortable="true"
headerText="#{bindings.ProductInventoryView2.hints.Name.label}"
id="c1" width="143">
<af:outputText value="#{row.Name}"
shortDesc="#{bindings.ProductInventoryView2.hints.Name.tooltip}" id="ot1"/>
</af:column>
<af:column sortProperty="#{bindings.ProductInventoryView2.hints.ShortDesc.name}"
filterable="true" sortable="true"
headerText="#{bindings.ProductInventoryView2.hints.ShortDesc.label}"
id="c10" width="100">
<af:outputText value="#{row.ShortDesc}"
shortDesc="#{bindings.ProductInventoryView2.hints.ShortDesc.tooltip}"
id="ot9"/>
</af:column>
<af:column sortProperty="#{bindings.ProductInventoryView2.hints.AmountInStock.name}"
filterable="true" sortable="true"
headerText="#{bindings.ProductInventoryView2.hints.AmountInStock.label}"
id="c2" width="138">
<dvt:gauge value="#{row.bindings.AmountInStock.inputValue}"
gaugeType="STATUSMETER"
inlineStyle="height:60px; width:80px;"
shortDesc="#{bindings.ProductInventoryView2.hints.AmountInStock.tooltip}"
id="g1" ledStyle="LS_RECTANGLE">
<dvt:topLabel position="LP_NONE"/>
<dvt:metricLabel position="LP_INSIDE_GAUGE" scaling="none">
<af:convertNumber pattern="#{row.bindings.AmountInStock.format}"/>
</dvt:metricLabel>
<dvt:bottomLabel position="LP_NONE"/>
</dvt:gauge>
</af:column>
... remaining columns omitted
</af:table>
