| Oracle® Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド 11g リリース2(11.1.2.3.0) B69399-02 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド 11g リリース2(11.1.2.3.0) B69399-02 |
|
前 |
次 |
この章では、「データ・コントロール」パネルおよびADFデータバインディングを使用して、データバインドされたADFデータ視覚化コンポーネントを作成する方法について説明します。これらのコンポーネントを使用すると、様々なグラフ、各種ゲージ、ピボット・テーブル、複数レイヤーの情報を持つ地理マップ、各種ガント・チャート、階層ビューアを使用してデータを表示および分析できるようになります。
この章の内容は次のとおりです。
ADFデータ視覚化コンポーネントは、ビジネス・データを視覚的に表示、分析するための幅広いグラフィック機能と表機能を提供します。コンポーネントをレンダリングできるようにするには、これらのコンポーネントをそれぞれ、データにバインドする必要があります。コンポーネントの外観は表示されるデータによって変わるからです。この章では、各コンポーネントをデータ・ソースにバインドする方法について説明します。
グラフ・コンポーネントとゲージ・コンポーネントの両方により、データがレンダリングされます。ただし、グラフ(50種を超えるチャートをサポート)では、複数の軸上の複数のデータ・ポイントを様々な方法で評価できます。豊富な種類のグラフにより、あるグループの結果を別のグループの結果と比較することが容易になります。一方、ゲージでは、単一のデータ・ポイントを重視し、そのポイントを最小、最大およびしきい値インジケータと比較して問題を識別します。
ピボット・テーブル・コンポーネントでは、複数レイヤーのデータ・ラベルをグリッドの行エッジまたは列エッジでサポートするグリッドが生成されます。オプションのピボット・フィルタ・バーは使用可能なピボット・テーブル・データをフィルタリングするページ・エッジを表します。このコンポーネントには、グリッド・データの小計および合計を自動的に生成するオプションもあります。ピボット・テーブルを使用すると、データ・レイヤーをあるエッジから別のエッジに切り替えてデータの表示を変更できます。たとえば、あるピボット・テーブルには、最初、行エッジに複数地域にわたる商品売上合計、列エッジに年別の明細が表示されていたとします。実行時に地域と年を切り替えると、複数年にわたる商品売上合計の地域別明細が表示されます。実行時に、エンド・ユーザーは内部列ラベルに表示されるボタンをクリックして、昇順または降順で行をソートできます。
地理マップ・コンポーネントはビジネス・データを空間的に表現し、1つのマップ上に複数層(テーマとも呼ばれる)の情報を重ね合せられるようにします。たとえば、アメリカ合衆国のマップでは、色の明度を変えて各州における商品の人気を示すカラー・テーマ、商品カテゴリ内での売上を示す円グラフ・テーマ、各倉庫の正確な場所を識別する点テーマなどを使用できます。この3つの全テーマをアメリカ合衆国の地図に重ね合せると、特定の地域で商品の人気度に応じた十分な在庫があるかどうかを簡単に評価できます。地理マップでは、Oracle MapViewerサービスへの接続が必要です。また、オプションで地理的および政治的な詳細情報を表示するためのジオコーダ・サービスにも接続できます。
テーマ・マップ・コンポーネントでは、ビジネス・データをスタイル設定されたエリア内にパターンまたは関連付けられたマーカーとして表し、Oracle MapViewerサービスへの接続は必要ありません。テーマ・マップでは、地理マップでの地理的な詳細なしで、データに焦点を合せます。テーマ・マップは、米国、世界をはじめ、世界の大陸や地域(EMEAやAPACなど)などのあらかじめ作成されたベース・マップとともにパッケージ化されています。それぞれのベース・マップには、いくつかのリージョンのセットと、都市の固定セットが1つ含まれます。リージョンまたは都市の1つのセットはレイヤーと呼ばれます。各レイヤーは、データ・コレクションにバインドし、データを色やパターンの塗りつぶし、またはデータ・マーカー、あるいはその両方で表すためにスタイルを設定できます。実行時には、テーマ・マップでドリルが有効になっていないかぎり、一度に表示できるのは1つのマップ・レイヤーとその関連するデータのみです。
ADFガント・チャート・コンポーネントには、プロジェクト・ガント・チャート(プロジェクト管理を重視)、スケジュール・ガント・チャート、およびリソース使用率ガント・チャート(どちらもリソース管理を重視)の3種類があります。それぞれのガント・チャートでは、次のリージョンを分割線と組み合せて表示します。
リスト・リージョンの内容: 分割線の左側には、タスクのリスト(プロジェクト・ガント・チャートの場合)またはリソースのリスト(リソース使用率ガント・チャートとスケジュール・ガント・チャートの場合)が表示されます。このリージョンでは、ツリー表モデルを使用して、任意の数の関連情報の列を追加で表示できます。
グラフ・リージョンの内容: 分割線の右側には、時間の経過に伴うタスクの進行状況、リソース使用率またはリソースの進行状況のグラフを示す領域があります。ガント・チャートでは時間軸を拡大または縮小できるため、必要な期間にわたって管理情報を参照できます。
ADF階層ビューア・コンポーネントは、リンクされた形状のセットとして階層データを表示した対話型グラフィックを生成します。形状とリンクはデータの要素と関係に対応します。たとえば、階層ビューア・コンポーネントを、従業員データに基づく組織図の生成に使用することができます。実行時、エンド・ユーザーはグラフィックをパンおよびズームし、このグラフィックが表示している管理階層を展開、選択、およびナビゲートすることができます。
データ視覚化コンポーネントをレンダリングできるようにするには、これらのコンポーネントをそれぞれ、データにバインドする必要があります。これはコンポーネントの外観は表示されるデータによって変わるからです。この章では、各コンポーネントをデータ・ソースにバインドする方法について説明します。
接頭辞dvt:は、各データ視覚化コンポーネント名の先頭に付いて、そのコンポーネントがADFデータ視覚化ツール(DVT)のタグ・ライブラリに属することを示します。
魅力的な外観を備えたデータ視覚化コンポーネントを使用すると、エンド・ユーザーは複雑なビジネス・データを理解して分析できるようになります。このコンポーネントは機能が豊富で、そのまますぐに使用できる対話型のサポートも用意されています。エンド・ユーザーの詳細な説明と各コンポーネントのプレゼンテーション機能の詳細は、次を参照してください。
グラフ・コンポーネント: 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のエンド・ユーザーとグラフの表示機能に関する項を参照してください。
ゲージ・コンポーネント: 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のエンド・ユーザーとゲージの表示機能に関する項を参照してください。
ピボット・テーブルとピボット・フィルタ・バーのコンポーネント: 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のエンド・ユーザーとピボット・テーブルの表示機能に関する項を参照してください。
地理マップ・コンポーネントとテーマ・マップ・コンポーネント: 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のエンド・ユーザーとマップの表示機能に関する項を参照してください。
ガント・チャート・コンポーネント: 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のエンド・ユーザーとガント・チャートの表示機能に関する項を参照してください。
階層ビュー・コンポーネント: 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のエンド・ユーザーと階層ビューアの表示機能に関する項を参照してください。
データ視覚化コンポーネントのユースケースと例の詳細は、次を参照してください。
グラフ・コンポーネント: 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のグラフ・コンポーネントのユースケースと例に関する項を参照してください。
ゲージ・コンポーネント: 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のゲージ・コンポーネントのユースケースと例に関する項を参照してください。
ピボット・テーブルとピボット・フィルタ・バーのコンポーネント: 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のピボット・テーブルとピボット・フィルタ・バーのコンポ―ネントのユースケースと例に関する項を参照してください。
地理マップおよびテーマ・マップのコンポーネント: 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のマップ・コンポーネントのユースケースと例に関する項を参照してください。
ガント・チャート・コンポーネント: 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のガント・チャート・コンポーネントのユースケースと例に関する項を参照してください。
階層ビュー・コンポーネント: 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の階層ビュー・コンポーネントのユースケースと例に関する項を参照してください。
データ視覚化コンポーネントをデータ・バインドする前に、その他のADF Faces機能を理解しておくと役に立ちます。また、いったんデータ視覚化コンポーネントをページに追加すると、検証やアクセシビリティなどの機能を追加する必要があることに気付く場合があります。データ視覚化コンポーネントで使用されるその他の機能へのリンクは、次のとおりです。
部分ページ・レンダリング: 他のコンポーネントで実行されたアクションに基づく新しいデータをページ上に表示するために、DVTコンポーネントをリフレッシュできます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「部分ページ・コンテンツのレンダリング」を参照してください。
パーソナライズ: ユーザーは実行時にDVTコンポーネントの表示を変更できますが、ユーザーがカスタマイズできるようにアプリケーションを構成していないかぎり、ユーザーがページを終了するとそれらの値は保持されません。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「JSFページのユーザー・カスタマイズの許可」を参照してください。
アクセシビリティ: DVTコンポーネントをアクセス可能にできます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「アクセス可能なADF Facesページの開発」を参照してください。
スキンおよびスタイル: アプリケーションに適用するADFスキンを使用するか、スタイル関連のプロパティ(styleClassまたはinlineStyle)を使用してCSSスタイル・プロパティを直接適用することにより、DVTコンポーネントの外観をカスタマイズできます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
プレースホルダ・データ・コントロール: 最終的にページのDVTコンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールの使用を検討します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、第17章「プレースホルダ・データ・コントロールによるページの設計」を参照してください。
「データ・コントロール」パネルから挿入されたデータ・コレクションを使用してグラフを作成する場合は、コンポーネント・ギャラリを使用すると、多数のグラフ・カテゴリ、グラフ・タイプおよびレイアウト・オプションから選択できます。グラフ・カテゴリは、1つ以上の異なるタイプのグラフを1つのグループにまとめたものです。たとえば、「棒」カテゴリには次のタイプのグラフが含まれます。
棒
二重Y棒
分割二重Y棒
パーセント
積上げ棒
二重Y積上げ棒
二重-Y積上げ棒
フローティング積上げ棒
グラフの作成時に表示されるコンポーネント・ギャラリを見てまわり、使用可能なグラフ・カテゴリ、タイプおよびそれぞれの説明を確認してください。図33-1に、「データ・コントロール」パネルを使用しているときにADFグラフ用に表示されるコンポーネント・ギャラリを示します。
|
注意: 一部のグラフのタイプでは、非常に具体的な種類のデータが必要です。選択したグラフのタイプの表示に十分なデータが含まれていないデータ・コレクションにグラフをバインドすると、グラフは表示されず、データが不十分であることを示すメッセージが表示されます。 |
また、コンポーネント・パレットからグラフ・コンポーネントをドラッグして、グラフを作成することもできます。この方法では、コンポーネントをデータにバインドする前に、グラフのユーザー・インタフェースを設計できます。コンポーネント・ギャラリが開き、グラフ・タイプ、説明および簡単なレイアウト・オプションが表示されます。
表33-1に、グラフのコンポーネント・ギャラリに表示されるカテゴリを示します。各カテゴリには、1つ以上のグラフ・タイプが関連付けられています。
表33-1 コンポーネント・ギャラリのADFグラフ・カテゴリ
| カテゴリ | 説明 |
|---|---|
|
面 |
データが塗りつぶされた面として表されるグラフを作成します。面グラフは、直近12か月の売上など、ある期間にわたる傾向を示すために使用します。面グラフでは、一方の軸に沿って少なくとも2つのグループのデータが必要です。通常、この軸には期間(月など)のラベルが付けられます。 |
|
棒 |
データが一連の垂直な棒として表されるグラフを作成します。ある期間にわたる傾向を調べる場合や、複数のアイテム(複数の地域における異なる商品部門の売上など)を同時に比較する場合に使用します。 |
|
棒(横) |
Y軸に沿って棒を横向きに表示するグラフを作成します。方向を示して傾向の表示や値の比較を可能にするために使用します。 |
|
バブル |
データが丸いデータ・マーカー(バブル)の場所と大きさによって表されるグラフを作成します。3タイプの値の相関を示すために使用します(特に、多数のデータ・アイテムがあり、全般的な関係を確認する場合)。たとえば、従業員の給与(x軸)、経験年数(y軸)および生産性(バブルの大きさ)を図示するためにバブル・グラフを使用します。このようなグラフでは、生産性を給与および経験と比較して調べることができます。 |
|
組合せ |
異なるタイプのデータ・マーカー(棒、線または面)を使用して、異なる種類のデータ・アイテムを表示するグラフを作成します。棒と線、棒と面、線と面またはこの3つすべてを比較するために使用します。 |
|
ファンネル |
1つのプロセス内の複数のステップに関連するデータを図示するグラフを作成します。ステップは、水平な円筒に対して垂直なスライスとして表示されます。特定のステップまたはスライスの実際の値がそのスライスの割当て制限に達すると、そのスライスは塗りつぶされます。通常、ファンネル・グラフでは、ある区切りの値(時間など)に対する実際の値と目標の値が必要です。たとえば、会計年度の四半期という区切りにおいて、あるプロセス(セールス・パイプラインなど)が目標に向かう動きを確認するためにこのコンポーネントを使用します。 |
|
折れ線 |
データが線、一連のデータ・ポイントまたは線で結ばれた複数のデータ・ポイントとして表されるグラフを作成します。折れ線グラフでは、グループ内の各メンバーに対し、少なくとも2つの点のデータが必要です。たとえば、月単位の折れ線グラフでは、少なくとも2つの月のデータが必要です。通常、特定の色の線がデータの各グループ(アメリカ、ヨーロッパ、アジアなど)に関連付けられます。複数のアイテムを同じ期間で比較するために使用します。 |
|
パレート |
データが棒、および棒の累積率を示す線によって表されるグラフを作成します。棒の各セットにより、問題の異なる原因(交通事故による死亡の原因など)が識別されます。それぞれの棒は、最大数の事象から最小数の事象まで、値別に配置されます。パレート・グラフは常に二重y軸グラフになり、最初のy軸は棒が表す値に対応し、2番目のy軸は0から100%の範囲で累計率の値に対応します。パレート・グラフは、問題の原因を識別および比較するために使用します。 |
|
円 |
円が分割され、データの各グループが円の中のスライスとして表されるグラフを作成します。それぞれの商品群から得られる収益など、各区分と全体との関係を示すために使用します。 |
|
レーダー |
円状の線グラフとして表示されるグラフを作成します。直近3年間の毎月の売上など、周期的に起こるパターンを示すために使用します。 |
|
散布図/極 |
データがデータ・マーカーの場所によって表されるグラフを作成します。人気商品の売上とコストなど、2つの異なる種類のデータ値の相関を示すために使用します。散布図は、多数のアイテム間の全般的な関係を確認する際に特に便利です。 |
|
スパークチャート |
表の列に、またはテキストともにインラインでトレンドまたはバリエーションを表したシンプルな要約グラフを作成します。 |
|
株価 |
データが株式の高値、安値および終値を示すグラフを作成します。それぞれの株式マーカーにより、3つの異なる値が表示されます。 |
図33-2は、StoreFrontModuleアプリケーションの「Hot Items Statistics」ページに表示される横棒グラフを示しています。このグラフでは、各商品の注文数が表示されるため、最も頻繁に注文されている商品を簡単に識別できます。
データ・バインディングの完了後にグラフをカスタマイズする方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「グラフ・コンポーネントの使用」を参照してください。
グラフはデータ・コレクションに基づいています。Oracle ADFのデータ・コントロールを使用すると、Jdeveloperでは宣言的なタスクとなります。「データ・コントロール」パネルからJSFページにコレクションをドラッグ・アンド・ドロップし、ダイアログを使用してデータ・コレクションの属性をグラフ内でバインドします。
データ・コレクション内の属性には、データ値またはデータ値のカテゴリを指定できます。データ値は、棒の高さや散布図のポイントなどのマーカーで表される数値です。データ値のカテゴリは、軸のラベルとして示されるメンバーになるか、ツールチップの追加プロパティとして表示されます。バインディング内で属性が担うロール(データ値またはID)は、データ型(グラフには数値データ値が必要)およびマップされる場所(棒やX軸など)の両方によって決まります。
データバインドされたグラフを作成する手順:
「データ・コントロール」パネルから、コレクションを選択します。
たとえば、StoreFrontModuleアプリケーションの「Hot Items Statistics」ページで各商品に対する注文数を表示する棒グラフを作成するには、ProductOrdersCountコレクションを選択します。図33-3に、「データ・コントロール」パネルでのProductOrdersCountコレクションを示します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「グラフ」を選択してコンポーネント・ギャラリを表示します。
コンポーネント・ギャラリからグラフ・カテゴリおよびグラフ・タイプを選択し、「OK」をクリックします。
コンポーネント・ギャラリに表示されるグラフ・カテゴリおよびグラフ・タイプの詳細は、表33-1を参照してください。
表示されるダイアログの名前および入力フィールドのラベルは、選択したグラフのカテゴリおよびタイプによって異なります。たとえば、カテゴリとして「棒(横)」を、タイプとして「棒」を選択した場合、表示されるダイアログの名前は「横棒グラフの作成」で、入力フィールドには「棒」というラベルがつけられます。
ダイアログで次のようにして、データを表示するグラフを構成します。
実行時に属性の値をどこに表示するかに応じて、「使用可能」リストから「棒」または「X軸」入力フィールドに属性をドラッグします。
「属性ラベル」表で、デフォルト値を受け入れるか、「ラベル」フィールドのドロップダウン・リストから値を選択して、実行時に表示されるラベルを指定します。
属性がデータ値を表す場合は、「ラベル」フィールドの選択内容により、属性のラベルをグラフにレンダリングする方法が決まります。
「属性名の使用」: 基礎となるViewObjectに属する該当の属性のUIヒントから取得したラベルを使用して値を文字列としてレンダリングするには、これを選択します。これはデフォルト選択です。
「ラベルなし」: ラベルをレンダリングしない場合は、これを選択します。メトリックが1つで、結果として表示されたグラフを説明する独自の説明テキストをページに表示する場合に、この選択肢は役に立ちます。
「テキスト・リソースの選択」: 「テキスト・リソースの選択」ダイアログを開いて、ラベルに使用するテキスト・リソースを選択または追加するには、これを選択します。テキスト・リソースは、アプリケーション・リソース・バンドルからの翻訳可能な文字列です。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
「式ビルダー」: 「式ビルダー」ダイアログを開いて、実行時に該当のラベルについて実行する式を作成するには、これを選択します。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
属性がデータ値のカテゴリを表す場合は、次の選択肢があります。
「属性名の使用」: 基礎となるViewObjectに属する該当の属性のUIヒントから取得したラベルを使用して値を文字列としてレンダリングするには、これを選択します。これはデフォルト選択です。
ドロップダウン・リストで、ラベルの代替の属性を選択します。たとえば、従業員IDのかわりに従業員名を使用します。
棒が表しているデータの表示をY軸に変更する場合は、「Y軸の棒と入替え」ボタンをクリックします。このアクションでは、棒とY軸属性が単純に手動で入れ替えられるのではなく、グラフの系列とグループの間で非表示のデータ・レイヤーが切り替えられます。
「入力済属性」のデフォルトの選択から「名前-値ペア」に変更してデータ・ポイントをコレクションに格納する方法を構成する場合は、「データ形状の変更」ボタンをクリックします。次のオプションを提示するダイアログが表示されます。
入力済属性
コレクション内の各種データ・ポイントは、別々の属性によって表されます。このオプションは、グラフ内のデータ・ポイントの種類が1つのみの場合も有効です。
たとえば、推定値と実際値に対するデータ・ポイントがある場合は、推定値の属性と実際値の属性が異なる場合にのみ、「入力済属性」を選択します。
名前-値ペア
次の2つの属性によって表されるデータ・ポイントが2種類以上あることを示します。データ・ポイントの種類を指定するName属性とデータ値を指定するValue属性です。
たとえば、Name属性に、推定値を表すValue属性の値としてESTがある場合や、実際値を表すValue属性の値としてACTがName属性にある場合があります。
現在の行をマスター/ディテールに設定を選択して、グラフの行選択リスナーを使用すると、棒、スライスまたは他のグラフ・データ要素をクリックして別のADFコンポーネントのデータを更新できるようになります。詳細は、33.2.3項「マスター/ディテール処理のグラフの行選択リスナーの使用について」を参照してください。
図33-4は、ProductOrdersCountデータ・コレクションにあるItemsOrdered属性のデータを使用してグラフを生成する「横棒グラフの作成」ダイアログを示しています。ProductName属性は、表示されたデータにラベルを提供します。
オプションで、「プレビュー」タブをクリックして、棒グラフとそのデータを現在の設定でプレビューできます。必要に応じて、「構成」タブをクリックし、棒グラフの仕様を調整できます。
「OK」をクリックします。
データ・バインディング・ダイアログの完了後は、プロパティ・インスペクタを使用してグラフ属性の設定を指定できます。また、グラフ・タグに関連付けられた子タグを使用してグラフをさらにカスタマイズできます。
|
注意:
|
グラフを「データ・コントロール」パネルからドロップすると、次の処理が行われます。
グラフのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
UIコンポーネントに必要なコードをJSFページに追加します。
JDeveloperにより生成されるデータ・バインディングXMLは、選択したグラフのタイプによって変わります。XMLは、作成する具体的なグラフ・タイプの物理モデルを表しています。例33-1はページ定義ファイルにJDeveloperが生成したバインディングを示しています。ここでは、ProductOrdersCountデータ・コレクションにあるItemsOrdered属性のデータを使用して横棒グラフが作成されています。
例33-1 ADF棒(横)グラフのバインディングXML
<graph IterBinding="ProductOrdersCountIterator" id="ProductOrdersCount"
xmlns="http://xmlns.oracle.com/adfm/dvt" type="BAR_HORIZ_CLUST">
<graphDataMap convert="false" leafOnly="true">
<series>
<data>
<item value="ItemsOrdered"/>
</data>
</series>
<groups>
<item value="ProductName"/>
</groups>
</graphDataMap>
</graph>
例33-2に、ProductOrdersCountデータ・コレクションをJSFページにドラッグしたときに横棒グラフに対して生成されるコードを示します。
例33-2 ADF棒(横)グラフのJSFコード
<dvt:horizontalBarGraph id="horizontalBarGraph1"
value="#{bindings.ProductOrdersCount.graphModel}"
subType="BAR_HORIZ_CLUST"
threeDEffect="true"
imageHeight="450" imageWidth="500">
<dvt:background>
<dvt:specialEffects/>
</dvt:background>
<dvt:graphPlotArea/>
<dvt:seriesSet>
<dvt:series/>
</dvt:seriesSet>
<dvt:o1Axis/>
<dvt:y1Axis/>
<dvt:legendArea automaticPlacement="AP_NEVER"
position="LAP_BOTTOM"/>
</dvt:horizontalBarGraph>
グラフの行選択リスナー(マスター・ビューとして機能)を使用すると、棒、スライスまたは他のグラフ・データ要素をクリックして別のADFコンポーネント(ディテール・ビューとして機能)のデータを更新できるようになります。たとえば、グラフで特定の商品売上を表す棒をクリックすると、その商品に関する詳細な売上データがピボット・テーブルで表示されます。
このマスター/ディテール処理を宣言的に実現するには、次の要件を満たす必要があります。
次のように、同じデータ・コントロールを使用して両方のビューにデータを提供する必要があります。
グラフを行セットとしてデータ・コントロールの親コレクションにバインドします(例: DepartmentsView)。
もう1つのADFビュー(テーブル、ピボット・テーブルなど)をデータ・コントロールの依存ディテール・コレクションにバインドします(例: EmployeesView)。
「<グラフのタイプ>グラフの作成」ダイアログで現在の行をマスター/ディテールに設定を選択して、グラフ・タグのclickListener属性の値を自動設定し、すでにグラフ・バインディングの一部になっているprocessClickメソッドを使用します。
たとえば、グラフ・タグのvalue属性がvalue="#{bindings.myGraph.graphModel}"の場合は、clickListener属性をclickListener="#{bindings.myGraph.graphModel.processClick}"に設定します。
グラフのデータ要素のクリックを処理するためのJavaコードを記述する必要はありません。グラフ・バインディングに対するprocessClickイベントが、グラフのデータ・コンポーネントに対するクリック・イベントを認識し、必要な処理を実行します。
データ・コントロールを使用してグラフを構成する場合、デフォルトでは、データ・バインディング・ダイアログで入力済属性がサポートされるため、コレクション内の各種データ・ポイントは各種属性によって表されます。たとえば、複数製品の売上げとコストに関するデータ・ポイントがある場合、データ・コレクション内で1つ目の属性が各製品の売上げデータ用で、2つ目の属性が各製品のコスト用である場合にのみ入力済属性を使用します。
入力済属性のデータ形状は、グラフ内のデータ・ポイントの種類が1つのみの場合も有効です。図33-5に入力済属性のデータ形状を示します。
データ・バインディング・ダイアログで「データ形状の変更」を選択し、ダイアログで名前/値ペアをサポートするように変更できます。ここで、データ・ポイントの種類を指定するName属性とデータ値を指定するValue属性という2つの属性によって表されるデータ・ポイントは2種類以上あります。この場合、専用の属性にはそれぞれ、各種データ・ポイントを識別する値があります。たとえば、コード測定属性には、データ・コレクション内に各製品の売上げとコストに関する値があります。図33-6に名前/値ペアのデータ形状のデータ・コレクションを示します。
名前/値ペアのデータ形状を使用する場合は、グラフ・データ・バインディング・ダイアログで次の値を指定します。
名前属性: Name属性を表すデータ・コレクション内の属性で、その一意の値によりデータ・ポイントが各種メトリックにカテゴリ分けされます。
値属性: グラフに描画された数値データ・ポイントを表すデータ・コレクション内の属性。各データ・ポイントは、対応するName属性値によって特定のメトリックにカテゴリ分けされます。
ダイアログでの定義に従って、グラフ・タイプに関連するフィールドにValue属性の値を指定します。たとえば、バブル・グラフでは、「バブルの色」と「バブル・ツールチップ」を指定します。値はデータ・コレクション内の属性、つまり、データ・ポイントを特定のメトリックにカテゴリ分けするために実行時に使用されるName属性の一意の値を表すデータ値として指定できます。1つ以上のデータ値を指定する必要がありますが、Name属性で使用可能なすべてのメトリックを選択する必要はありません。
1つ以上の値を追加するには、「追加」ドロップダウン・リストから「データ値」を選択します。各データ値は、データ・ポイントを特定のメトリックにカテゴリ分けするために実行時に使用されるName属性の一意の値を表します。Name属性で使用可能なすべてのメトリックを選択する必要はありません。
入力フィールドで属性やデータ値を指定した後、任意の属性を右クリックし、「右に移動」、「左に移動」、「削除」または「データ値の編集」などのアクションに対応するポップアップ・メニューを表示できます。
たとえば、図33-7に示すように、名前/値ペアの形状でデータの単一数値列を使用して、データ・コレクションにバインドされた、始値、高値、低値、終値を表示する株価グラフを作成できます。
データ・コレクションが名前/値ペアのデータ形状で配置されているグラフを作成できます。たとえば、図33-7のデータ・コレクションに示すように、株価を複数のデータ・ポイントと複数の属性を持つデータの単一数値列に配置して、これらのポイントを指定できます。
前提作業
名前/値ペアについて
名前/値ペアのデータ形状を使用してグラフを作成する手順は次のとおりです。
「データ・コントロール」パネルから、コレクションを選択します。
1週間分の始値、高値、低値および終値の株価を表示するグラフを作成する例では、コレクションStockSingleFactColView1を選択します。図33-8に、「データ・コントロール」パネルでのStockSingleFactColView1コレクションを示します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「グラフ」を選択してコンポーネント・ギャラリを表示します。
「コンポーネント・ギャラリ」で、「株価」グラフ・カテゴリを選択し、次にグラフのタイプ「出来高と始値 - 高値 - 安値 - 終値のローソク足」を選択してから「OK」をクリックします。
次の操作を実行し、名前/値ペアのデータ形状をサポートするようにダイアログを変更します。
「データ形状の変更」をクリックします。
「チャート・データ形状の変更」ダイアログで、「名前-値ペア」を選択して「OK」をクリックします。
プロンプトが表示されたら、選択した内容を確認します。
変更したダイアログで次の操作を実行し、データを表示するグラフを構成します。
「名前属性」に、属性カテゴリ「メジャー」をドロップダウン・リストから選択します。
「値属性」に、データ属性「始値」、「高値」、「安値」および「終値」に対応する名前属性の値をドロップダウン・リストから指定します。
「グラフの値」表で、デフォルト値を受け入れるか、「ラベル」フィールドのドロップダウン・リストから値を選択して、実行時に表示されるラベルを指定します。
属性がデータ値を表す場合は、「ラベル」フィールドの選択内容により、属性のラベルをグラフにレンダリングする方法が決まります。
「属性名の使用」: 基礎となるViewObjectに属する該当の属性のUIヒントから取得したラベルを使用して値を文字列としてレンダリングするには、これを選択します。これはデフォルト選択です。
「ラベルなし」: ラベルをレンダリングしない場合は、これを選択します。メトリックが1つで、結果として表示されたグラフを説明する独自の説明テキストをページに表示する場合に、この選択肢は役に立ちます。
「テキスト・リソースの選択」: 「テキスト・リソースの選択」ダイアログを開いて、ラベルに使用するテキスト・リソースを選択または追加するには、これを選択します。テキスト・リソースは、アプリケーション・リソース・バンドルからの翻訳可能な文字列です。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
「式ビルダー」: 「式ビルダー」ダイアログを開いて、実行時に該当のラベルについて実行する式を作成するには、これを選択します。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
属性がデータ値のカテゴリを表す場合は、次の選択肢があります。
「属性名の使用」: 基礎となるViewObjectに属する該当の属性のUIヒントから取得したラベルを使用して値を文字列としてレンダリングするには、これを選択します。これはデフォルト選択です。
ドロップダウン・リストで、ラベルの代替の属性を選択します。たとえば、従業員IDのかわりに従業員名を使用します。
現在の行をマスター/ディテールに設定を選択して、グラフの行選択リスナーを使用すると、棒、スライスまたは他のグラフ・データ要素をクリックして別のADFコンポーネントのデータを更新できるようになります。詳細は、33.2.3項「マスター/ディテール処理のグラフの行選択リスナーの使用について」を参照してください。
図33-9に、コレクションの属性を使用してグラフを生成する「株式グラフの作成」ダイアログを示します。
オプションで、「プレビュー」タブをクリックして、株式グラフとそのデータを現在の設定でプレビューできます。必要に応じて、「構成」タブをクリックし、株式グラフの仕様を調整できます。
「OK」をクリックします。
スパーク・チャートは、表の列に、またはテキストともにインラインでトレンドまたはバリエーションを表したシンプルな要約グラフです。折れ線スパーク・チャート、棒スパーク・チャートおよび面スパーク・チャートには、単一系列のデータ値が必要です。図33-10に、表の列に描画された折れ線スパーク・チャートの例を示します。
フローティング棒スパーク・チャートには、データ値の系列がフローティング・オフセットに1つ、棒の値のために1つの、合計2つ必要です。図33-11に、フローティング棒スパークチャートの例を示します。
最初にシンプルUIを開発するシナリオでは、「コンポーネント・パレット」を使用してスパーク・チャートを挿入し、その後データにバインドできます。
スパークチャートにデータを提供するには、次のいずれかの方法を使用します。
子dvt:sparkItemタグでデータを静的に指定します。例33-3に、スパークチャートに静的データを提供する例を示します。
子dvt:sparkItemタグでEL式を使用してデータを指定します。例33-4に、EL式を使用してデータを提供する例を示します。
テーブルで子アクセッサを使用してデータを指定します。例33-5に、af:iteratorを使用して、データ・コレクション・モデルrow.stockValuesからすパークチャート・データを提供する例を示します。
また、「データ・コントロール・パネル」からデータ・コントロールを挿入してスパーク・チャートを作成することもできます。図33-12に、「データ・コントロール」パネルからページ上にスパーク・チャート・コンポーネントをドラッグしたときに表示されるコンポーネント・ギャラリを示します。
バインディング・ダイアログで、選択したスパーク・チャート・タイプで表示する値を指定するように求められます。折れ線スパーク・チャート、棒スパーク・チャートおよび面スパーク・チャートには、変動する株価などの単一系列のデータ値が必要です。フローティング棒スパークチャートには、データ値の系列がフローティング・オフセットに1つ、棒の値のために1つの合計2つ必要です。たとえば、フローティング積上げ棒スパーク・チャートの作成ダイアログでは、次のように指定します。
「棒の高さ」: 棒の値に使用するデータ値を選択するには、これを使用します。
「棒のフロート」: フロート・オフセット、つまり軸とフローティング棒との間の距離に使用するデータ値を選択するには、これを使用します。
図33-13に、設定済のフローティング積上げ棒スパーク・チャートの作成ダイアログを示します。
面、線またはマーカーで表示されるデータの詳細なビューを表示するように、データバインドされたグラフを構成できます。
図33-14に、棒グラフの簡単な例を示します。この棒グラフには全従業員の給与合計が組織内の部門別に表示されます。部門IDの上にマウスのカーソルを重ねると、そのIDがドリル可能であることを示すツールチップがグラフに表示されます。部門IDをクリックすると、ページが切り替わり、その部門に所属する各従業員の名前と給与が表示されます。
データバインドされたグラフをドリル可能にするには、<type>GraphコンポーネントのdrillingEnabled属性をtrueに設定します。デフォルト値はfalseです。
また、グラフのページ定義ファイルを更新してドリル階層を定義し、集計データの表示方法を指定する必要があります。
図33-14のグラフは、各従業員の部門ID、姓および給与を含むデータ・コントロールにバインドされています。グラフをドリル可能にするために、階層の詳細を追加し、初期ページの集計値として給与合計を指定するようにグラフのページ定義ファイルが変更されています。
例33-6に、ドリル構成前のページ定義ファイル内のバインディングを示します。
例33-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>
例33-7に、ドリル・サポート用に構成された同一ページ定義ファイルを示します。強調表示された部分は、ドリル・サポートの有効化のために追加されたエントリです。
例33-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>
作業を始める前に、次のようにします。
データバインド・グラフについて理解しておくと役立ちます。詳細は、33.2項「データバインドされたグラフの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、33.1.3項「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
9.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のJSFページの作成方法に関する項の手順に従い、JSFページを作成します。
33.2項「データバインドされたグラフの作成」の手順に従い、データバインドされたグラフを作成します。
図33-14の棒グラフの例では、組織内の各従業員に関する情報を含むデータ・コントロールを使用しています。図33-15に、データ・コントロールの例を示します。
データバインドされたグラフにドリル・サポートを構成する手順:
構造ウィンドウで「dvt:<type>Graph」コンポーネントを右クリックし、「ページ定義に移動」を選択します。
ページ定義のソース・ビューで、graphDataMapにhierarchies要素を追加し、ドリル階層の親子関係を定義します。
例33-7では、アイテムDeptIdは階層のトップ・レベルであるため、グラフが最初にレンダリングされるときに表示されます。子はLastNameとして定義されており、ユーザーがグラフ上で部門IDをドリルすると表示されます。
ドリル・レベルを追加するには、別のitemをhierarchiesに追加します。最初のitemの子の値を2つ目のitemの新しい値として使用し、さらにドリル・レベルの値を2つ目のitemの子として追加します。例33-8に、2つのレベルのドリル用に構成されたグラフのhierarchiesエントリを示します。この例では、年次データから四半期別データ、月次データまでドリルできます。
drills要素をgraphDataMapに追加し、typeをREPLACEに設定します。
<drills type="REPLACE"/>
このドリル・タイプでは、ドリル対象上にある行セットがフィルタ処理され、ターゲットとその兄弟がターゲットの子と置き換わります。これは、グラフがサポートする唯一のドリル・タイプです。
defaultAggregateTypeをgraphDataMapのdataに追加します。
defaultAggregateTypeによって、グラフが最初に表示されるときのデータの集計方法が決まります。例33-7では、defaultAggregateTypeがSUMに設定されているため、部署内の全従業員の給与合計がグラフに表示されます。
defaultAggregateTypeは、AVERAGE、COUNT、MAX、MEDIAN、MIN, NONE、STDDEV、またはVARIANCEにも設定できます。
すべての重複を集計する場合は、例33-7に示したように、dataにaggregateDuplicatesを追加し、これをtrueに設定します。
変更したページ定義ファイルを保存します。
構造ウィンドウで「dvt:<type>Graph」コンポーネントを右クリックし、「プロパティに移動」を選択します。
「動作」セクションを展開し、DrillingEnabled属性のドロップダウン・メニューから「true」を選択します。
ゲージでは、各データ・ポイントに対し、そのデータ・ポイントが許容範囲の内と外のどちらに含まれるかが示されます。データバインドされた1つのゲージ・コンポーネントは、使用するデータ・コレクション内の行数に応じて、単一のゲージまたは一連のゲージ全部を作成できます。コレクション内の各行には、単一のゲージに対する値が含まれます。
ゲージ用のコンポーネント・ギャラリを使用すると、次のゲージのカテゴリから選択できます。
ダイアル: タスクのメトリック値を構成可能な弧に沿って示します。
ステータス・メーター:矩形のバーに沿ってタスクの進度または測定値のレベルを示します。
ステータス・メーター(垂直):タスクの進行状況やある指標のレベルを長方形の棒に沿って示します。
LED:キー・パフォーマンス・インディケータ(KPI)などの指標を図示します。LEDゲージでは、良好(上矢印)、適正(左矢印または右矢印)、不良(下矢印)を示す矢印など、数種類の図形を使用できます。
これらのカテゴリにはそれぞれ、多数の様々なタイプのゲージが含まれます。ゲージの作成時に表示されるコンポーネント・ギャラリを見てまわり、使用可能なすべてのゲージ、カテゴリ・タイプおよびそれぞれの説明を確認してください。図33-16に、ADFゲージ用に表示されるコンポーネント・ギャラリを示します。
データ・バインディングのプロセスは、作成するゲージのタイプに関係なく、基本的に同じです。必要なものは、メトリック値(つまり、ゲージで示す指標)のみです。ただし、データ・コレクション内の行に最大、最小、しきい値などの範囲情報が含まれている場合は、その値をゲージにバインドして動的な設定を示すことができます。ゲージの上部または下部ラベルで使用する情報がデータ・コレクション内に含まれている場合も、その値をゲージにバインドできます。
データ・バインディングの完了後にゲージをカスタマイズする方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「ゲージ・コンポーネントの使用」を参照してください。
ADFゲージ・コンポーネントを使用して、悪いから良いまで変化する値範囲(しきい値)を指定した、背景に対するダイアル・ゲージを作成できます。ゲージのインジケータではメトリックの現在の値が示される一方、図形によってその値のステータスを簡単に評価できます。
図33-17は、WarrantyPeriodMonthsデータを格納するコレクションからゲージを作成した場合に表示される、単一のダイアル・ゲージを示しています。表示されているゲージは1つのみであるため、このデータ・コレクションに含まれているのは単一行のデータのみです。メトリックの値(ここでは6)は、ゲージの下のラベルに表示されています。ゲージの値の範囲は0から24です。しきい値の範囲は8、16、24で、不良(8未満)は赤、適正(8から16)は黄、優良(17以上)は緑で塗りつぶされています。
データ・コントロールを使用してダイアル・ゲージを作成するには、ゲージ・コンポーネントをコレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。
データバインドされたダイアル・ゲージを作成する手順:
「データ・コントロール」パネルから、コレクションを選択します。
たとえば、特定の倉庫にある商品に対する現在の月単位の保証期間を表示するダイアル・ゲージをStoreFrontModuleアプリケーションで作成するには、WarehouseStockLevelsコレクションを選択します。図33-18に、「データ・コントロール」パネルでのWarehouseStockLevelsコレクションを示します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「ゲージ」を選択します。
「コンポーネント・ギャラリ」ダイアログで、カテゴリ、ゲージのタイプおよびクイック・スタート・レイアウトを選択して、「OK」をクリックします。
このダイアログの「構成」タブで、次の操作を行います。
「メトリック」ボックスで、ゲージで図示する実際の値を含むデータ・コレクション内の列を選択します。このダイアログで必須なのは、この値のみです。
最小ボックスで、ゲージ範囲の最小値がデータ・コレクションに格納されている場合は、この値が含まれている列を選択します。
最大ボックスで、ゲージ範囲の最大値がデータ・コレクションに格納されている場合は、この値が含まれている列を選択します。
「上位ラベル」ボックスで、ゲージの上部ラベルに表示する値がデータ・コレクションに格納されている場合は、この値が含まれている列を選択します。
「下位ラベル」ボックスで、ゲージの下部ラベルに表示する値がデータ・コレクションに格納されている場合は、この値が含まれている列を選択します。
「しきい値属性」リストで、しきい値を指定する場合は、「追加」アイコンをクリックしてしきい値ごとに1行挿入し、その行に値を指定します。ゲージでは最大値を自動的にしきい値設定として扱うため、ゲージの最大値に等しいしきい値は作成しないでください。
|
注意: ゲージ、上位、下位およびしきい値の各ラベルを構成し、「テキスト・リソースの選択」ダイアログを使用してリソース・バンドルからテキスト・リソースを指定したり、EL式ビルダーを使用して実行時にラベル・テキストを評価できます。どちらのダイアログも、ラベル・フィールドのドロップダウン・リストを使用して開きます。 |
オプションで、「プレビュー」タブをクリックして、ゲージとそのデータを現在の設定でプレビューできます。必要に応じて、「構成」タブをクリックし、ゲージの仕様を調整できます。
「OK」をクリックします。
「ゲージの編集」ダイアログで、WarehouseStockLevelsのゲージ・バインディングを調査および調整できます。図33-19に、「プロパティ・インスペクタ」で「編集」アイコンをクリックしたときに表示される、gaugeコンポーネントのダイアログを示します。
|
注意: データソースおよびメトリック・データ値は必須です。このダイアログの他のデータ値はオプションであり、プロパティ・インスペクタを使用してゲージ・コンポーネントに指定できます。 |
ゲージのバインディングの完了後は、プロパティ・インスペクタで、ゲージ・タグおよびその子タグの追加属性の値を設定し、コンポーネントをカスタマイズできます。
ゲージを「データ・コントロール」パネルからドロップすると、次の処理が行われます。
ゲージのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
UIコンポーネントに必要なコードをJSFページに追加します。
例33-9に、倉庫内の商品に対する月単位の保証期間を表示するダイアル・ゲージに生成された行セット・バインディングを示します。このコード例では、ゲージ・メトリックがデータ・コレクション内のWarrantyPeriodMonths列から動的に値を受け取り、残りデータ値が静的に設定されていることを示しています。
例33-9 ダイアル・ゲージのバインディング
<gauge IterBinding="WarehouseStockLevelsIterator" id="WarehouseStockLevels"
xmlns="http://xmlns.oracle.com/adfm/dvt">
<gaugeDataMap>
<item type="threshold" value="8" valueType="literal"/>
<item type="threshold" value="16" valueType="literal"/>
<item type="metric" value="WarrantyPeriodMonths"/>
<item type="minimum" value="0" valueType="literal"/>
<item type="maximum" value="24" valueType="literal"/>
<item type="topLabel"
value="${adfBundle['view.ViewControllerBundle'].
WARRANTY_(MONTHS))" valueType="literal"/>
</gaugeDataMap>
</gauge>
例33-10に、ダイアル・ゲージに対してJDeveloperによりJSFページに生成されたコードを示します。<dvt:thresholdSet>要素は、しきい値ごとに<dvt:threshold>要素を1つ指定しています。しきい値範囲の色は、fillColor属性の値で指定されるとおり、赤、黄および緑にデフォルト設定されています。<dvt:indicator>要素は、使用するインジケータとしてIT_NEEDLEを指定しています。これにより、実行時に針がレンダリングされます。<dvt:indicator>のデフォルト値では、線(IT_LINE)がレンダリングされます。
例33-10 ADFダイアル・ゲージのJSFページのコード
<dvt:gauge id="gauge1"
value="#{bindings.WarehouseStockLevels.gaugeModel}"
gaugeType="DIAL" imageFormat="FLASH">
<dvt:gaugeBackground>
<dvt:specialEffects fillType="FT_GRADIENT">
<dvt:gradientStopStyle/>
</dvt:specialEffects>
</dvt:gaugeBackground>
<dvt:thresholdSet>
<dvt:threshold text="Low" fillColor="#d62800"/>
<dvt:threshold text="Medium" fillColor="#ffcf21"/>
<dvt:threshold text="High" fillColor="#84ae31"/>
</dvt:thresholdSet>
<dvt:gaugeFrame/>
<dvt:indicator type="IT_NEEDLE"/>
<dvt:indicatorBase/>
<dvt:gaugePlotArea/>
<dvt:tickLabel/>
<dvt:tickMark/>
<dvt:topLabel/>
<dvt:bottomLabel/>
<dvt:metricLabel position="LP_WITH_BOTTOM_LABEL"/>
</dvt:gauge>
ADFゲージ・コンポーネントを使用して、ステータス・メーター・ゲージを作成します。このゲージでは、外側の四角形が示している範囲に対する現在の測定レベルを内側の四角形が表しています。ステータス・メーター・ゲージのグラフィックにより、測定の状態や進行状況を簡単に評価することができます。
図33-20は、いくつかの倉庫における在庫レベルを表す一連のステータス・メーター・ゲージを示しています。このゲージ・セットは、1つのゲージ・コンポーネントをデータ・コレクション(WarehouseStockLevels)にバインドした結果として生成されます。このデータ・コレクションには、各倉庫につき1行のデータが含まれています。各行により、セットに1つのゲージが生成されます。セット内のすべてのゲージは最小値(0)から最大値(1500)までの同じ範囲値を共有し、しきい値が500、1000および1500に設定されています。セット内の各ゲージでは、それが表す倉庫の名前と、その倉庫の在庫メトリックが下部ラベルに表示されています。
データ・コントロールを使用してステータス・メーター・ゲージ・セットを作成するには、複数のデータ行を含むデータ・コレクションにゲージ・コンポーネントをバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。
データバインドされたステータス・メーター・ゲージを作成する手順:
「データ・コントロール」パネルから、コレクションを選択します。
たとえば、倉庫の在庫量を表示するステータス・メーター・ゲージをStoreFrontModuleアプリケーションで作成するには、WarehouseStockLevelsコレクションを選択します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「ゲージ」を選択します。
コンポーネント・ギャラリで、次のようにします。
「カテゴリ」リストで、「ステータス・メーター」または「ステータス・メーター(垂直)」を選択します。
作成するゲージのタイプを選択します。
実行時のゲージのクイック・スタート・レイアウトを選択します。
「OK」をクリックします。
表示される「ゲージの作成」ダイアログで、次に説明しているように値を選択します。
「メトリック」ドロップダウン・リストから属性バインディングを選択します。この属性バインディングには、ゲージで図示する実際の値が含まれます。
「最小」フィールドに、ゲージ範囲の最小値がデータ・コレクションに格納されている場合は、最小値を入力します。
「最大」フィールドに、ゲージ範囲の最大値がデータ・コレクションに格納されている場合は、最大値を入力します。
「上位ラベル」フィールドで、実行時にゲージの上部にラベルを表示する場合は、値を入力または選択します。
「下位ラベル」フィールドで、実行時にゲージの下部にラベルを表示する場合は、値を入力または選択します。
「しきい値属性」リストで、しきい値を指定する場合は、「追加」アイコンをクリックしてしきい値ごとに1行挿入し、そのしきい値の値を指定します。ゲージでは最大値を自動的にしきい値設定として扱うため、ゲージの最大値に等しいしきい値は作成しないでください。
|
注意: ゲージ、上位、下位およびしきい値の各ラベルを構成し、「テキスト・リソースの選択」ダイアログを使用してリソース・バンドルからテキスト・リソースを指定したり、EL式ビルダーを使用して実行時にラベル・テキストを評価できます。どちらのダイアログも、ラベル・フィールドのドロップダウン・リストを使用して開きます。 |
オプションで、「プレビュー」タブをクリックして、ゲージとそのデータを現在の設定でプレビューできます。必要に応じて、「構成」タブをクリックし、ゲージの仕様を調整します。
図33-21に、図33-20で示したステータス・メーター・ゲージ・セットの設定を示します。このダイアログでは、必要なメトリック値の他に、しきい値とゲージの下部ラベルに表示される倉庫の名前を設定しています。
「OK」をクリックします。
ゲージのバインディングの完了後は、プロパティ・インスペクタで、必要に応じてゲージ・タグおよびその子タグの追加属性の値を設定し、コンポーネントをカスタマイズできます。
ゲージを「データ・コントロール」パネルからドロップすると、次の処理が行われます。
ゲージのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
UIコンポーネントに必要なコードをJSFページに追加します。
例33-11に、各倉庫の在庫レベルを表示するステータス・メーター・ゲージ・セット(図33-21を参照)に生成された行セット・バインディングを示します。この例では、ゲージ・メトリック属性とデータ・コレクション内のQuantityOnHand値との間に作成された値バインディングが示されています。また、Bottom Label属性とデータ・コレクション内のWarehouseName値の間の値バインディングも示されています。
例33-11 ADFステータス・メーター・ゲージ・セットのバインディング・コード
<gauge IterBinding="WarehouseStockLevelsIterator" id="WarehouseStockLevels"
xmlns="http://xmlns.oracle.com/adfm/dvt">
<gaugeDataMap>
<item type="threshold" value="500" valueType="literal"/>
<item type="threshold" value="1000" valueType="literal"/>
<item type="metric" value="QuantityOnHand"/>
<item type="minimum" value="0" valueType="literal"/>
<item type="maximum" value="1500" valueType="literal"/>
<item type="bottomLabel" value="WarehouseName"/>
</gaugeDataMap>
</gauge>
例33-12に、倉庫の在庫レベルを示すステータス・メーター・ゲージ・セットに対してJSFページで生成されるコードを示します。gaugeSetColumnCount属性は、ゲージを2列で表示することを指定します。また、このコードは、Low、MediumおよびHighの3つのしきい値を指定します。簡潔にするため、inlineStyle属性の値は省略されています。
例33-12 ADFステータス・メーター・ゲージ・セットのJSFページのコード
<dvt:gauge id="gauge1"
value="#{bindings.WarehouseStockLevels.gaugeModel}"
gaugeType="STATUSMETER" imageFormat="FLASH">
<dvt:gaugeBackground>
<dvt:specialEffects fillType="FT_GRADIENT">
<dvt:gradientStopStyle/>
</dvt:specialEffects>
</dvt:gaugeBackground>
<dvt:thresholdSet>
<dvt:threshold text="Low" fillColor="#d62800"/>
<dvt:threshold text="Medium" fillColor="#ffcf21"/>
<dvt:threshold text="High" fillColor="#84ae31"/>
</dvt:thresholdSet>
<dvt:indicatorBar/>
<dvt:gaugePlotArea/>
<dvt:tickLabel/>
<dvt:tickMark/>
<dvt:topLabel/>
<dvt:bottomLabel/>
<dvt:metricLabel position="LP_WITH_BOTTOM_LABEL"/>
</dvt:gauge>
ADFピボット・テーブルでは、ネストされた行および列の無制限の層により、グリッド・レイアウトにデータを表示します。ピボット・テーブルでは、使用可能なピボット・テーブル・データをフィルタするページ・エッジを表すオプションのピボット・フィルタ・バーをサポートしています。ピボット・テーブルの構造は次のとおりです。
列エッジ: 1つ以上の情報レイヤーを持つピボット・テーブル上の横軸。
行エッジ: 1つ以上の情報レイヤーを持つピボット・テーブル左側の縦軸。
ページ・エッジ: ピボット・テーブルで、データの表示をフィルタするために、0個以上の情報レイヤーを持つオプションのピボット・フィルタ・バー。
データ本体: ピボット・テーブルのセルに表示される1つ以上の指標(つまり、データ値)。
図33-22は、売上を示すピボット・テーブルです。データ本体に売上高と個数、列エッジに地理データ・レイヤー、行エッジに年データ・レイヤーと商品データ・レイヤーが表示されています。ページ・エッジのピボット・フィルタ・バーには販路フィルタが表示されています。
このピボット・テーブルの例では図33-23に示すCSVファイルのデータに基づいてデータを集計します。
ピボット・テーブルの作成ウィザードは、ピボット・テーブルをデータバインドし、構成するための宣言的サポートを提供します。ウィザードページでは、次の操作を行うことができます。
ピボット・テーブルの初期レイアウトの指定
ピボット・フィルタ・バーの関連付けと構成
データ・レイヤーに対する代替ラベルの指定
ドリルの挿入またはフィルタの設定
データ値の集計の定義
カテゴリおよびデータ・ソートの構成
ピボット・テーブルの実際のデータ・プレビュー
ウィザードの先頭ページでピボット・テーブルのレイアウトを行うと、2ページめ以降で対応するエントリが初期化されます。ウィザードのページを進めるに従って、「戻る」ボタンおよび「次へ」ボタンを使用して、ピボット・テーブルを調整できます。ウィザード・ページの後半では、「終了」をクリックして、構成オプションをスキップすることもできます。
データバインディングの完了後にピボット・テーブルをカスタマイズする方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「ピボット・テーブル・コンポーネントの使用」を参照してください。
データ・コントロールを使用してピボット・テーブルを作成するには、ピボット・テーブル・コンポーネントをコレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。
|
ヒント: また、コンポーネント・パレットからピボット・テーブル・コンポーネントをドラッグして、ピボット・テーブルを作成することもできます。この方法では、コンポーネントをデータにバインドする前に、ピボット・テーブルのユーザー・インタフェースを設計できます。 |
図33-22に示したサンプルの売上ピボット・テーブルの作成をデモンストレーションするために、プレースホルダ・データ・コントロールが作成され、図33-23のCSVファイルのデータ・タイプが定義されました。詳細は、17.4項「プレースホルダ・データ・コントロールの使用」を参照してください。
データバインドされたピボット・テーブルを作成する手順:
「データ・コントロール」パネルから、コレクションを選択します。
たとえば、商品別に年ごとの売上高と売上個数を表示したピボット・テーブルを作成するには、図33-24に示すように、「データ・コントロール」パネルでptExamplePlaceholderコレクション用に定義されたptExampleDataを選択できます。
データ・コレクションをJSFページにドラッグし、ポップアップ・メニューから「表」→「ADFピボット・テーブル」を選択します。
ピボット・テーブルの作成ウィザードの「表示属性の選択」ページで、次のようにして、ピボット・テーブルの初期レイアウトを指定します。
ピボット・フィルタ・バーとピボット・テーブルを関連付ける場合は、「ピボット・フィルタ・バーの作成」を選択します。必要に応じて、「使用可能な属性」リストからページ・エッジに属性をドラッグして、フィルタの初期ディスプレイを設定します。設定しなかった場合、空のピボット・フィルタ・バーが作成されます。
|
注意: ウィザードの完了後に、ピボット・フィルタ・バーを追加したり削除できます。それには、「プロパティ・インスペクタ」で |
初期レイアウトでは、属性を「使用可能な属性」リストからピボット・テーブルのレイアウトにドラッグし、ピボット・テーブルの列、行、ページ・エッジおよびデータ本体の属性を選択します。
ピボット・テーブル・レイアウトでは、データ・ラベルは、セル内のデータ(データ値)を表し、行エッジ、列エッジまたはページ・エッジのヘッダー・ラベルとして表示されるピボット・テーブルのレイヤーのことをいいます。ピボット・テーブルのデータ本体にドラッグした属性のラベルは、「データ・ラベル」レイヤーに表示されます。
データ・ラベルは、列エッジ、行エッジまたはページ・エッジ上の任意の場所にドラッグできます。また、属性を同じエッジ上の別の場所や、別のエッジ上にドラッグすることも可能です。
レイアウトで属性を配置または移動するためにドラッグ操作を使用するかわりに、属性を右クリックするか、[Shift]を押しながら[F10]を押して、ポップアップ・メニュー・オプションを表示することもできます。図33-25に、地理属性のポップアップ・メニュー・オプションを示します。
|
注意: 属性の間に存在しうるドリル・パスは、行エッジ、列エッジ、およびページ・エッジに複数の属性をレイアウトするときに定義されます。このようなドリル・パスは、実行時にピボット・テーブルのドリルをサポートするために後で有効化できます。 |
「入力済属性」のデフォルトの選択から「名前-値ペア」に変更してデータ・ポイントをコレクションに格納する方法を構成する場合は、「データ形状の変更」ボタンをクリックします。次のオプションを提示するダイアログが表示されます。
入力済属性
コレクション内の各種データ・ポイントは、別々の属性によって表されます。このオプションは、ピボット・テーブル内のデータ・ポイントの種類が1つのみの場合も有効です。
たとえば、推定値と実際値に対するデータ・ポイントがある場合は、推定値の属性と実際値の属性が異なる場合にのみ、「入力済属性」を選択します。
名前-値ペア
次の2つの属性によって表されるデータ・ポイントが2種類以上あることを示します。データ・ポイントの種類を指定するName属性とデータ値を指定するValue属性です。
たとえば、Name属性に、推定値を表すValue属性の値としてESTがある場合や、実際値を表すValue属性の値としてACTがName属性にある場合があります。
たとえば、図33-22の売上げピボット・テーブルの初期レイアウトを指定するには、図33-26にあるように、ページ・エッジにChannel属性、行エッジにYear属性とProduct属性、データ本文にSales属性とUnits属性(データ・ラベル)、列エッジにGeography属性をドラッグし、「ピボット・フィルタ・バーの作成」を選択します。
ウィザードの「表示属性の選択」ページにレイアウトされた属性に対して代替ラベルまたは値を指定する場合は、「属性ラベルの指定」ページを使用して、次の手順を実行します。
「データ値」エリアでデータ値の代替ラベルを指定するには、実行時にその属性のヘッダー・セルにスタンプされているデフォルトの「データ属性名の使用」テキスト・ラベルを変更します。テキストを直接入力する、ピボット・テーブルでデータ値を1つ使用する場合のように「ラベルなし」を選択してヘッダー・セルを抑制する、リソース・バンドルからテキスト・リソースを指定する、またはEL式ビルダーを使用して実行時にラベル・テキストを評価することが可能です。
|
注意: 「プロジェクト・プロパティ」→「リソース・バンドル」ページを「バンドルの自動同期化」に構成した場合は、かわりのラベル文字列を入力できます。すると、デザイン・タイム・コードにより、翻訳可能なテキスト・リソースが作成されます。 |
「カテゴリ」エリアで属性カテゴリの代替ラベルを指定するには、「属性の表示名」列で、実行時にその属性のヘッダー・セルにスタンプされているデフォルトの「属性名の使用」テキスト・ラベルを変更します。テキストを直接入力できますし、リソース・バンドルからテキスト・リソースを指定したり、EL式ビルダーを使用して実行時にラベル・テキストを評価できます。ラベルは、実行時、ピボット・ハンドルに表示されます。
|
注意: 「プロジェクト・プロパティ」→「リソース・バンドル」ページを「バンドルの自動同期化」に構成した場合は、かわりのラベル文字列を入力できます。すると、デザイン・タイム・コードにより、翻訳可能なテキスト・リソースが作成されます。 |
また、「属性の表示名」列で別の属性を選択して、属性カテゴリに代替値を指定することもできます。たとえば、データ・コレクションでProductId属性を使用して、ピボット・テーブルをレイアウトしながら、ProductName属性値を実行時にピボット・テーブル・ヘッダーに表示し、情報をさらに読みやすくすることもできます。
たとえば、図33-22の売上げピボット・テーブルのYear属性に代替ラベルを指定するには、図33-27に示すように「属性の表示名」フィールドにテキスト(Time)を入力します。
実行時に、ピボット・テーブルでドリル操作を公開する必要がある場合は、ピボット・テーブルの作成ウィザードの「ドリルの構成」ページを使用して、次のいずれかのオプションを有効にします。
「ドリルの挿入」を選択すると、兄弟および集計データを保持しながら、詳細なデータを折りたたまれたビューまたは展開されたビューに表示できます。実行時、ドリル・アイコンは親属性の表示ラベル内に表示されます。
展開されたビューで、親属性の総計を子属性の前または後のどちらに表示するかを指定するには、「親行の挿入」を使用します。
ドリルの挿入を有効にするには、次の手順の実行も必要です。
有効化するドリル・パスを選択します。ドリル・パスは、ウィザードの「表示属性の選択」ページにある属性レイアウトに基づいて設定されます。
ウィザードの「集計の構成」ページで集計を設定します。
たとえば、図33-28のピボット・テーブルは、ドリルの挿入を使用して、Yearデータ・レイヤーのビューを展開しています。各年の売上の集計値(2007年52,500ドル、2006年544,150ドル)および売上個数(2007年410個、2006年507個)は、製品の上にある行に表示されます。
「ドリルのフィルタ」を選択すると、兄弟および集計データを保持せずに、詳細なデータを折りたたまれたビューまたは展開されたビューに表示できます。実行時、ドリル・アイコンは親属性の表示ラベル内で有効化されます。
ドリルのフィルタはデータ・レイヤー属性の詳細にビューの焦点を当てます。たとえば、図33-29のピボット・テーブルは、ドリルのフィルタ機能を使用して、Year(2007)データ・レイヤーのビューを展開し、総売上高(52,500)および売上げ個数(410)を表示する一方、それ以外の年のデータとすべての年の総計の両方をフィルタアウトして表示から除外しています。
「ドリルのフィルタ」を有効化するには、有効化するドリル・パスを選択する必要があります。ドリル・パスは、ウィザードの「表示属性の選択」ページにある属性レイアウトに基づいて設定されます。
たとえば、図33-22の売上げピボット・テーブルでドリルの挿入を有効化するには、図33-30に示すように、ウィザードの「ドリルの構成」ページに必要事項を入力します。
ピボット・テーブルでデータの合計と小計を集計する方法を定義するには、ピボット・テーブルの作成ウィザードの「集計の構成」の1ページまたは2ページとも使用します。
デフォルトでは、ピボット・テーブルに表示されている属性によってデータ・コレクションの各行が一意に識別されない場合、重複行のデータを集計してピボット・テーブルの単一のセルに折りたたむことができます。また、特定のデータ項目では、デフォルトの集計タイプを無視することもできます。
ピボット・テーブルでのデータの集計方法を指定するには、「データ集計」ページで次の手順を実行します。
重複行を処理するためのデフォルト集計方法を変更する場合は、「デフォルトの関数」ドロップダウン・リストを使用して、値を指定します。有効な値は、Sum、Average、Count、Maximum、Minimum、Standard Deviation、MedianおよびVarianceです。
特定のデータ値について、デフォルトの集計タイプを無視する場合は、「追加」アイコンをクリックして、使用可能な属性のために1行挿入します。次に、各属性の「関数」列で、集計に使用する数学演算を選択します。使用可能なオプションは、Sum、Average、Count、Maximum、Minimum、Standard Deviation、MedianおよびVarianceです。この属性は、ピボット・テーブルに複数のデータ値(SalesやUnitsなど)がバインドされている場合のみ有効です。
たとえば、図33-22の売上げピボット・テーブルにあるUnitsデータ値のデフォルト集計タイプを無視するには、図33-31に示すように、「追加」アイコンを使用してUnits属性を追加し、「データ集計」ページの「関数」列でAverageを選択します。
また、ピボット・テーブルの列エッジ、行エッジまたはページ・エッジに追加された属性カテゴリについて、合計と小計を定義することもできます。「カテゴリの合計」ページで、「追加」アイコンを使用して、各属性を挿入するか、「すべての集計」を選択して、使用可能な属性をすべて追加してから、次の手順を実行します。
「属性」列で、合計する属性を選択します。
「関数」列で、集計に使用する数学演算を選択します。使用可能なオプションは、Sum、Average、Count、Maximum、Minimum、Standard Deviation、MedianおよびVarianceです。
「属性」列で参照しているアイテムを基準として、集計結果を表示する位置を示す値を「合計の挿入」列で選択します。有効な値はBefore、AfterまたはReplaceです。
「合計ラベル」列に、集計のラベルとして使用するテキストを入力します。テキストを直接入力できますし、リソース・バンドルからテキスト・リソースを指定したり、EL式ビルダーを使用して実行時にラベル・テキストを評価できます。
|
注意: 「プロジェクト・プロパティ」→「リソース・バンドル」ページを「バンドルの自動同期化」に構成した場合は、かわりのラベル文字列を入力できます。すると、デザイン・タイム・コードにより、翻訳可能なテキスト・リソースが作成されます。 |
|
注意: 読取り専用の「ドリル挿入の合計」表には、ピボット・テーブルでドリルの挿入を有効にした結果として、自動的に定義されたカテゴリ合計が表示されます。 |
たとえば、図33-22の売上げピボット・テーブルでGeographyデータ・レイヤーとYearデータ・レイヤーの合計を定義するには、「関数」列で「Sum」、「合計の挿入」列で「After」を選択し、図33-32に示すように、「カテゴリの合計」ページの属性それぞれについて、「合計ラベル」列にテキスト(「地域合計」と「年合計」)を入力します。
実行時に結果として得られたピボット・テーブルで特定の年の値を展開すると、直前のウィザードページのドリルの挿入オプションで指定したレイアウトと設定に基づいて子値から計算された合計が自動的に保存されます。
ピボット・テーブルでソートを設定するには、ピボット・テーブルの作成ウィザードの「ソートの構成」の1ページまたは2ページとも使用します。
デフォルトでは、ピボット・テーブルのデータは、最初は外部行データ・レイヤーの値に基づいてソートされます。任意の行エッジ、列エッジまたはページ・エッジのデータ・レイヤーにソート順序を指定することができます。このようなソートをカテゴリ・ソートと呼びます。実行時に、データ・レイヤーを異なるエッジにピボットした場合、指定されたカテゴリのソート順序が使用されます。
ウィザードの「表示属性の選択」ページでデータ本文にマップされた属性を並べることはできますが、データ・ラベル(データ値)のカテゴリ・ソートは指定できません。たとえば、図33-26はSalesおよびUnitsのデータ値を使ったピボット・テーブルのレイヤーを示しています。これらのメジャーのカテゴリ・ソートは指定できませんが、図33-22のように、実行時にピボット・テーブルのデータ本文に表示される値の順序は指定できます。
また、ピボット・テーブルをレンダリングするときに、データ本文でのデータ値の初期ソート順序を指定することもできます。これはデータ・ソートと呼ばれます。
カテゴリごとにソートを設定するには、「カテゴリ・ソート」ページの「追加」アイコンを使用して、設定の対象となる各行エッジ、列エッジまたはページ・エッジの属性を追加し、その後、次の手順を実行します。
「ソート属性」列で、ピボット・テーブル・ヘッダーの実際値に基づいてアルファベット順でソートすることを指定するにはデフォルトのUse Attribute Valueをそのまま使用します。ソート順序をカスタマイズするには、ドロップダウン・リストからかわりのソート順序属性を指定します。たとえば、基礎となる問合せに、収益性別製品ランキングのランク計算が含まれている場合、ProductRank別に降順で製品が表示されるように指定できます。
「初期ソート順序」列で、初期ソート方向を選択します。有効な値はASCENDINGまたはDESCENDINGです。
たとえば、図33-33は、列エッジにはChannelデータ・レイヤーを降順、行エッジにはYearデータ・レイヤーを昇順で表示するように構成されたウィザードの「カテゴリ・ソート」ページを示しています。
実行時に表示されるピボット・テーブルは図33-34のとおりです。
データのソートを構成するには、「データ・ソート」ページで、次の手順を実行します。
ピボット・テーブルがレンダリングされたときのデータの初期ソート順序を指定するには、「列でソート」を選択します。
「初期ソート順序」ドロップダウン・リストで、初期ソート方向を選択します。有効な値はASCENDINGおよびDESCENDINGです。
「シーケンスNull」ドロップダウン・リストで、NULL値をソートの先頭に表示する場合はFirst、NULL値をソートの最後に表示する場合はLastを指定します。
「初期ソート列」表で、「レイヤー属性」列に表示される各データ・レイヤーの「値」列にデータ値を指定します。
たとえば、図33-35は、Units/World/Canoesデータ値に基づいて、年ごとにグループ化されたChannelデータ・レイヤーをソートするように構成された「データ・ソート」ページを示しています。
実行時、ピボット・テーブルは最初に図33-36のようにレンダリングされます。
ピボット・テーブルの作成ウィザードの「ピボット・テーブルのプレビュー」ページで、ピボット・テーブルに表示されるデータをそのときの設定でプレビューできます。プレビューでは、コードのコンパイルや実行は不要です。プレビューが希望どおりでない場合は、バインディング・ウィザード・ページで設定を変更し、「プレビュー」ページに再び戻ってデータが意図したとおりに表示されることを確認します。
図33-37は、図33-22に示す売上げピボット・テーブルに対するウィザードの「ピボット・テーブルのプレビュー」ページを示しています。
ピボット・テーブルを「データ・コントロール」パネルからドロップすると、次の処理が行われます。
ピボット・テーブルのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
UIコンポーネントに必要なコードをJSFページに追加します。
「データ・コントロール」パネルからピボット・テーブルを作成すると、ページ定義ファイルがバインディングを使って更新されます。例33-13に、地域内の商品売上げと売上げ個数を年別に表示するピボット・テーブルに生成された行セット・バインディングを示します。ピボット・テーブルのデータ・マップには次の要素が含まれます。
<columns>: 各列項目を適切な順番で定義します
<rows>: 各行項目を適切な順番で定義します
<pages>: ピボット・フィルタ・バーに組入れられる項目を定義します
<aggregatedItems>: 項目の合計と小計を定義します
<hierarchies>: 2つの項目間で考えられるドリル・パスを定義します
<sorts>: ピボット・テーブル・データのカテゴリ・ソートと初期ソート順序を定義します
重複する行のデフォルト・データ集計方法は、<data>要素で指定します。重複の集計の詳細は、33.4.3項「ピボット・テーブルの属性の集計について」を参照してください。
ソート操作の詳細は、33.4.4項「ピボット・テーブルへの初期ソートの指定について」を参照してください。
例33-13 ADFピボット・テーブルのバインディングXML
<pivotTable IterBinding="ptExampleDataIterator" id="ptExampleData"
xmlns="http://xmlns.oracle.com/adfm/dvt"
ChangeEventPolicy="ppr">
<pivotTableDataMap>
<columns>
<item value="Geography"
itemLabel="${adfBundle['view.ViewControllerBundle'].
LOCATION"/>
<data aggregateDuplicates="true" defaultAggregateType="SUM">
<item value="Sales"/>
<item value="Units" aggregateType="AVERAGE"/>
</data>
</columns>
<rows>
<item value="Year"/>
</rows>
<pages>
<item value="Channel"/>
</pages>
<aggregatedItems>
<item aggregateLocation="AFTER" aggregateType="SUM" value="Geography"
aggregateLabel="${adfBundle['view.ViewControllerBundle'].
TOTAL_GEOGRAPHY"/>
<item aggregateLocation="AFTER" aggregateType="SUM" value="Year"
aggregateLabel="${adfBundle['view.ViewControllerBundle'].
TOTAL_ACROSS_YEARS}"/>
</aggregatedItems>
<drills type="INSERT"/>
<hierarchies>
<item value="Year" location="BEFORE">
<child value="Product"
label="${adfBundle['view.ViewControllerBundle'].PRODUCT"/>
</item>
</hierarchies>
<sorts>
<categorySort item="Channel" direction="DESCENDING"/>
<categorySort item="Year" direction="ASCENDING"/>
<qdrSliceSort direction="DESCENDING" edge="rows" grouped="true"
nullsFirst="true">
<item name="Geography" value="World"/>
</qdrSliceSort>
</sorts>
</pivotTableDataMap>
</pivotTable>
「データ・コントロール」パネルを使ってピボット・テーブルを作成すると、必要なコードがページに追加されます。例33-14に、売上のピボット・テーブルと関連するピボット・フィルタ・バーに対してJSFページで生成されるコードを示します。
例33-14 ピボット・テーブルおよびピボット・フィルタ・バーのJSFページのXMLコード
<dvt:pivotFilterBar id="pt1pivotFilterBar"
value="#{bindings.ptExampleData.pivotFilterBarModel}"
modelName="pt1Model"/>
<dvt:pivotTable id="pt1" value="#{bindings.ptExampleData.pivotTableModel}"
modelName="pivotTableModel"
var="cellData" varStatus="cellStatus">
<dvt:headerCell>
<af:switcher facetName="#{cellData.layerName}" defaultFacet="Default" id="s1">
<f:facet name="DataLayer">
<af:outputText value="#{cellData.label}" id="ot1"/>
</f:facet>
<f:facet name="Year">
<af:outputText value="#{cellData.dataValue}" id="ot2">
<af:convertNumber groupingUsed="false"
pattern="#{bindings.ptExampleData.
hints.Gnp.format}"/>
</af:outputText>
</f:facet>
<f:facet name="Product">
<af:outputText value="#{cellData.dataValue}" id="ot3"/>
</f:facet>
<f:facet name="Default">
<af:outputText value="#{cellData.dataValue}" id="ot4"/>
</f:facet>
</af:switcher>
</dvt:headerCell>
<dvt:dataCell>
<af:switcher facetName="#{cellStatus.members.DataLayer.value}"
defaultFacet="Default" id="s2">
<f:facet name="Sales">
<af:outputText value="#{cellData.dataValue}" id="ot5">
<af:convertNumber groupingUsed="false"
pattern="#{bindings.ptExampleData.
hints.Population.format}"/>
</af:outputText>
</f:facet>
<f:facet name="Default">
<af:outputText value="#{cellData.dataValue}" id="ot6"/>
</f:facet>
</af:switcher>
</dvt:dataCell>
</dvt:pivotTable>
ピボット・テーブルに表示するために選択した属性によってデータ・コレクションの各行が一意に識別されない場合、重複行のデータを集計してピボット・テーブルの単一のセルに折りたたむことができます。
たとえば、図33-22に示すデータ・コレクションの行に店舗IDも含まれていた場合、商品、販路および地理の特定の組合せにおける全店舗のデータ行をピボット・テーブルの単一のセルに折りたたむ必要があります。
ピボット・テーブルには、重複するデータ行の計算の制御に使用できる次のオプションのデータ・バインディング属性があります。
aggregateDuplicates: <data>要素のブール型プロパティ。重複行でデータ値を集計するために、バインディング実行時に特殊処理を有効化するかどうかを決定します。この属性が指定されていない場合、falseであると判断されます。
defaultAggregateType: 重複を処理するためのデフォルト集計方法を指定する<data>要素の文字列プロパティ。有効な値は、SUM、AVERAGE、COUNT、MIN、MAX、STDDEV、MEDIANおよびVARIANCEです。aggregateDuplicatesがtrueで、defaultAggregateTypeが指定されていない場合、SUMであると判断されます。
aggregateType: <item>要素の文字列プロパティ。特定のデータ項目のデフォルト集計タイプをオーバーライドすることができます。この属性は、ピボット・テーブルに複数のデータ値(SalesやUnitsなど)がバインドされている場合のみ有効です。
デフォルトでは、ピボット・テーブルはSUM演算を使用してデータ・コレクション内で重複するデータ行のデータ値を集計し、ピボット・テーブルの単一のセル値を生成します。つまり、aggregateDuplicates属性はtrueに設定され、defaultAggregateTypeはSUMであると判断されます。
例33-13に示す<data>要素は、このようなデフォルトの集計の例です。
ピボット・テーブルで別の数学演算を使用して重複行のデータ値を集計する場合は、defaultAggregateTypeを目的の演算に設定します。
例33-15に、defaultAggregateTypeがSUMに設定されているデータ要素を示します。この演算は、商品、販路および州の一意の組合せごとに全店舗の売上合計を表示する場合に適しています。
例33-15 重複行のカスタム集計のバインディングXML
<pivotTable IterBinding="SalesPivotTable1Iterator" id="SalesPivotTable11"
xmlns="http://xmlns.oracle.com/adfm/dvt">
<pivotTableDataMap>
<columns>
<data aggregateDuplicates="true" defaultAggregateType="SUM">
<item value="Sales"/>
</data>
<item value="Geography"/>
</columns>
<rows>
<item value="Channel"/>
<item value="Product"/>
</rows>
<aggregatedItems>
<item aggregateLocation="After" aggregateType="AVERAGE"
value="Product" aggregateLabel="Average"/>
</aggregatedItems>
</pivotTableDataMap>
</pivotTable>
売上や店舗の平均規模(平方フィート単位)など複数のデータ値がピボット・テーブルにあり、重複行の売上データ値を合計する一方、平方フィートのデータ値を平均化する場合は、次のようにします。
<data>要素で、defaultAggregateTypeをSUMに設定します。
平方フィート属性の<item>要素で、aggregateTypeをAVERAGEに設定します。
例33-16に、PivotTableDataMap要素でラップされた<columns>要素を示します。<data>要素には、集計のデフォルトの属性が指定されています。これらは、特殊なカスタムaggregateType属性が指定されていないデータ・アイテムすべてに適用されます。
デフォルトでは、ピボット・テーブルのデータは、最初は外部行データ・レイヤーの値に基づいてソートされます。任意の行アイテム、列アイテムまたはページ・アイテムのデータ・レイヤーにソート順序を指定することができます。このようなソートをカテゴリ・ソートと呼びます。実行時に、データ・レイヤーを異なるエッジにピボットした場合、指定されたカテゴリのソート順序が使用されます。sorts要素内にcategorySort要素を挿入し、表33-2に示すように属性の値を設定します。
表33-2 categorySort要素の属性値
| 属性 | 説明 |
|---|---|
|
|
カテゴリ・ソートを設定する列アイテム、行アイテムまたはページ・アイテムを指定します。この属性の値は必須です。 |
|
|
初期のソート方向を指定します。有効な値は |
また、ピボット・テーブルをレンダリングするときに、データ本文でのデータ値の初期ソート順序を指定することもできます。これはデータ・ソートと呼ばれます。デフォルトの動作は、ページ定義ファイルでピボット・テーブル・バインディングのpivotTableDataMap要素内にsorts要素を挿入すると変更できます。sorts要素内にqdrSliceSort要素を挿入し、表33-3に示すように属性の値を設定します。
表33-3 qdrSliceSort要素の属性値
| 属性 | 説明 |
|---|---|
|
|
初期のソート方向を指定します。有効な値は |
|
|
|
|
|
親のスライスをソートする場合は |
|
|
NULL値をソートの先頭に表示する場合は |
1つ以上のitemタグをqdrSliceSortタグに挿入します。itemタグは、ソート対象の値が取得されるのとは逆のエッジ上にスライスを指定します。たとえば、ソート行がデータに基づいている場合は、各レイヤーのitemタグを列エッジで指定する必要があります。表33-4に示すように属性の値を設定します。
ADF地理マップは、Oracle Spatialの機能をOracle ADF内で提供するADFデータ視覚化コンポーネントです。このコンポーネントでは、ユーザーはビジネス・データを地理マップ上に表し、1つのマップ上に複数層の情報(テーマと呼ばれる)を重ね合せることができます。これらのレイヤーは、棒グラフ、円グラフ、カラー、点および事前定義済テーマといった任意のテーマとして表すことができます。
図33-38は、アメリカ合衆国内のある地域のベース・マップとともに次のテーマを使用した地理マップ・コンポーネントを示しています。
カラー・テーマ: このテーマでは、選択した商品について、商品の人気に基づいて州を色付けします。色の範囲は緑(その商品の人気が最高であることを表す)から赤(その商品の人気が最低であることを表す)までです。
円グラフ・テーマ: このテーマでは、各州で人気のある商品カテゴリを示す円グラフをその州に表示します。この例の円グラフでは、Media、OfficeおよびElectronicsという3つの商品カテゴリを円のスライスとして示しています。
点テーマ: このテーマでは、倉庫を点として識別します。各点に対し、選択した商品のその倉庫での在庫レベルを示すアイコンが表示されます。表示されるアイコンは、在庫レベルが低、中、高といった各在庫範囲で異なります。
地理マップ・コンポーネントは、複数のデータ・セットを表示するために、複数のマップを1ページ上に配置する必要がないという点が、他のADFデータ視覚化コンポーネントとは異なります。このコンポーネントは、複数のグラフを1ページ上に配置できるグラフなどのコンポーネントとは対照的です。かわりに、複数のデータセットの空間的な相互関係を示すか、特定の点に対して別々のテーマでレイヤー化された異なる属性を表示します。
地理マップ・コンポーネント自体はデータにバインドされません。しかし、各マップのテーマは独自のデータバインディングを持っています。
ベース・マップは、開発者が作成したテーマをADF地図コンポーネントでレイヤー化する背景となります。
Oracle Spatialでは、管理者は1つ以上のテーマで構成されるベース・マップを作成します。管理者は、ベース・マップのテーマの可視性を制御します。ベース・マップを拡大および縮小すると、ベース・マップの様々なテーマが表示/非表示になります。ADF地図コンポーネントのレベルでは、管理者がベース・マップに作成したテーマの表示を、開発者がズーム係数を使用して制御することはできません。
複数のテーマをADF地図にオーバーレイする際は、そのテーマに関連するコンポーネントのmaxZoomおよびminZoomプロパティを設定することでテーマの可視性を制御できます。実行時には、「マップ」ツールバーの表示メニューまたはページに作成した他のADFコンポーネントを使用してカスタム・テーマを表示/非表示にすることもできます。
データ・バインディングの完了後に地理マップをカスタマイズする方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「地理マップ・コンポーネントの使用」を参照してください。
地図を作成するには、まず地図を構成し(つまり、ベース・マップを選択し、処理用のURLを提供)、次に地図のテーマをデータ・コレクションにバインドします。JDeveloperでは、作成するテーマに対して「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を行うことができます。
マップ点テーマを作成する際、マップに表示される点のスタイルをカスタマイズするオプションがあります。様々な点スタイルごとに、mapPointStyleItemタグを使用できます。
データバインドされた点テーマを使用して地図を作成する手順:
「データ・コントロール」パネルから、コレクションを選択します。
図33-39に、「データ・コントロール」パネルでWarehouseStockLevelsByProduct1コレクションを選択し、各倉庫点の在庫量を表すイメージを表示する点テーマを使用した地理マップを作成する例を示します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「地理マップ」→「マップおよび点のテーマ」を選択します。
マップをページにまだ構成していない場合は、次に表示される「地理マップの作成」ダイアログで「新規」アイコンをクリックし、「地理マップ・コンフィギュレーションの作成」ダイアログを表示して次のようにします。
「ID」フィールドに、マップ・コンフィギュレーションの一意のIDを入力します。
「MapViewer URL」フィールドに、Oracle MapViewerサービスのURLを入力します。
「ジオコーダURL」フィールドで、マップ作成用に住所を緯度と経度の座標に変換するGeocoder WebサービスのURLを選択します。
|
注意: ジオコーダのURLは、住所の経度および緯度情報をまだ持っていない場合のみ必要です。 |
「OK」をクリックしてダイアログを閉じ、「地理マップの作成」ダイアログに戻ります。
「マップ」ページで、地図コンポーネントのベース・マップを選択し、地図で使用する他の設定を次の手順で選択します。
データソース・リストで、ベース・マップの選択元となるマップのコレクションを選択します。
「基準となるマップ」リストから、地理マップ・コンポーネントの背景となるマップを選択します。
「開始X」フィールドと「開始Y」フィールドの値を指定するには、マップのイメージをクリックしてマップをプレビュー・ウィンドウ内の中央に配置します。
左上角のマップ・ナビゲータの矢印を使用すると、マップを適切な方向に移動できます。
オプションで、プレビュー・ウィンドウのスライド矢印を使用して、地図のズーム係数を調整します。
「OK」をクリックしてダイアログを閉じ、「点マップ・テーマの作成」ダイアログを表示します。
「テーマID」フィールドに、点マップ・テーマの一意のIDを入力します。
「位置」セクションで、点の位置を「住所」で指定するか、x座標とy座標(経度と緯度)のペアで指定するかを選択します。
選択する位置によって、位置セクションに表示されるコントロールが決まります。
|
ヒント: 地図上にデータを表現するには、住所コントロールを使用するよりも、xおよびy座標を使用するほうが効率的です。これは、住所コントロールはジオコーダでxおよびy座標に変換する必要があるからです。データ・コレクションの行が100行を超える場合は、パフォーマンスを向上するために、xおよびy座標を使用してください。 |
xとyの点の位置に対し、次のアイテムを表すデータ・コレクションから属性を選択します。
X(経度):マップ上の点の水平位置。
Y(緯度):マップ上の点の垂直位置。
ラベル:情報ウィンドウの上部に表示される点のラベル。点をクリックすると表示されます。
「点データ」セクションで、点、そのラベルおよび点のスタイル(オプション)に関連するデータを指定する次の情報を入力します。
「データ」フィールドで、点に関連付けられているデータ行(QuantityOnHandなど)を選択します。
「ラベル」フィールドに、点をクリックすると、情報ウィンドウでデータ値の前に表示されるテキストを入力します。ラベルに使用するテキスト・リソースを入力できます。テキスト・リソースは、リソース・バンドルからの翻訳可能な文字列または実行時に実行されるEL式のいずれかにできます。ドロップダウン・リストを使用して、「テキスト・リソースの選択」または「式ビルダー」ダイアログを選択します。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
オプションで、「カテゴリ」フィールドで、点の適切なスタイルの検索に使用するデータ列を選択します。「カテゴリ」で値を選択すると、その値はこの点テーマのバインディングに格納された後、この点テーマ用に作成するmapPointStyleItemタグのitemValue属性と照合されます。
|
注意: 点のスタイルの検索にカテゴリとして使用する列がデータにない場合、 |
マスター/ディテール関係を有効にする場合は、「行選択の有効化」を選択します。これは、地理マップのデータ・コレクションが、ページ上の別のUIコンポーネントに表示されるディテール・ビューとのマスター/ディテール関係においてマスターである場合に便利です。このオプションを選択すると、SelectionListener属性とclickListener属性の両方が有効になります。
「OK」をクリックします。
図33-40に、各倉庫点の在庫量を表すイメージを表示する点テーマを使用した地理マップの「点マップ・テーマの作成」ダイアログを示します。
特定のマップ点テーマで使用する点スタイル・アイテムを作成するために使用できる様々なオプションがあります。これらのオプションは次のとおりです。
すべてのデータ・ポイントに対する単一イメージ
データ・ポイント・カテゴリごとに異なるイメージ
データ値の低、中および高範囲を表すイメージ
マップ点テーマのデータ・バインディングを作成すると、そのマップ・テーマのすべての点に対して使用される単一の組込みイメージを選択できるようになります。プロパティ・インスペクタで、mapPointThemeタグのbuiltInImage属性でこの選択を実行できます。この属性のデフォルト値は、オレンジ色の球です。
あるいは、「点マップ・テーマの作成」ダイアログの「カテゴリ」に値を指定した場合は、一連の点スタイル・アイテムを作成して各カテゴリのデータ・ポイントを表す別のイメージを決定する必要もあります。その場合、点スタイル・アイテムのタグで最小/最大値を使用しないでください。かわりに、点スタイル・アイテムのタグのitemValue属性に、「カテゴリ」に指定したデータ列のエントリと一致する値を設定します。
地理マップの点テーマでは、「カテゴリ」に値を指定しない場合でも、mapPointThemeタグのmapPointStyleItem子タグを使用して値の範囲(低、中、高など)とその範囲を表すイメージを指定できます。この指定をすると、各点は、その点のデータ値が含まれる範囲を識別するイメージによって表されます。
次の手順では、点テーマを使用して地図がすでに作成されていることを前提としています。
データ値の低、中および高範囲を表す点スタイル・アイテムをマップ点テーマに追加する手順:
構造ウィンドウで、dvt:mapPointThemeタグを右クリックし、「dvt:mapPointThemeの中に挿入」→「点スタイルのアイテム」を選択します。
「点スタイルのアイテム」のプロパティ・インスペクタで、表33-5「点スタイル・アイテムのプロパティ」に示すように値を設定します。
表33-5 点スタイル・アイテムのプロパティ
| プロパティ | 設定値 |
|---|---|
|
|
点スタイル・アイテムの一意のIDを指定します。 |
|
|
定義するデータ範囲の最小値を指定します。 |
|
|
定義するデータ範囲の最大値を指定します。 |
|
|
ユーザーが点アイテムの上にカーソルを置いたときに表示されるテキストを指定します。たとえば、低い在庫レベルの点アイテムを定義する場合は、このプロパティの値として |
|
|
イメージ・ファイルへのURLを指定するか、ドロップダウン・リストから選択します。実行時に、指定したイメージはマップ上に表示され、MinValueおよびMaxValueプロパティによって指定されたデータ範囲を表します。 あるいは、「その他」セクションに表示されるBuiltInImageドロップダウン・リストによって参照される様々な事前定義済イメージの1つを選択できます。 |
|
|
イメージ・ファイルへのURLを指定するか、ドロップダウン・リストから選択します。実行時に、指定したイメージは、ユーザーが点アイテムの上にカーソルを置くと表示されます。 |
|
|
イメージ・ファイルへのURLを指定するか、ドロップダウン・リストから選択します。実行時に、指定したイメージは、ユーザーが点アイテムを選択すると表示されます。 |
手順1および2でデータ値の低範囲についてデータ値の範囲を定義した場合は、手順1および2を繰り返して、データ値の中および高範囲を適切な値で定義します。
|
注意:
|
地図と点テーマ(この場合は、地図に追加された初期テーマ)を「データ・コントロール」パネルからドロップすると、次の処理が行われます。
点テーマのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
地理マップ・コンポーネントに必要なタグをJSFページに追加します。
地理マップ・タグ内の必要な点テーマの子タグをJSFページに追加します。
例33-17に、地理マップの点テーマに生成された行セット・バインディングを示します。
例33-17 点テーマのバインディングXML
<mapTheme IterBinding="WarehouseStockLevelsByProduct1Iterator"
id="WarehouseStockLevelsByProduct1"
xmlns="http://xmlns.oracle.com/adfm/dvt">
<mapThemeDataMap convert="false" mapThemeType="point">
<data>
<item value="QuantityOnHand"
label="${adfBundle['view.ViewControllerBundle'].PRODUCT_QUANTITY"/>
</data>
<item type="lat_long" latitude="Latitude"
longitude="Longitude"
label="${adfBundle['view.ViewControllerBundle'].WAREHOUSE_NAME"/>
</mapthemeDataMap>
</mapTheme>
例33-18に、地理マップおよびその点テーマに対してJSFページで生成されるXMLコードを示します。このコードは、データ値に基づいて次の3種類の点スタイル設定が含まれています。
最初の点スタイル設定(ps0)は、500未満の値に適用されます。この点スタイルでは、非常に低い在庫レベルのイメージが表示され、対応するツールチップ情報が示されます。
2番目の点スタイル設定(ps1)は、500から1000の値に適用されます。この点スタイルでは、低い在庫レベルのイメージが表示され、対応するツールチップ情報が示されます。
最後の点スタイル設定(ps2)は、1000から1600の値に適用されます。この点スタイルでは、高い在庫レベルのイメージが表示され、対応するツールチップ情報が示されます。
例33-18 JSFページの地理マップと点テーマのXMLコード
<dvt:map id="map1"
mapServerConfigId="mapConfig1"
inlineStyle="width:850px;height:490px"
startingX="-96.0"
baseMapName="ELOCATION_MERCATOR.WORLD_MAP"
startingY="37.0" zoomBarPosition="WEST"
showScaleBar="false"
<dvt:mapPointTheme id="mapPointTheme1"
shortLabel="#{viewcontrollerBundle.WAREHOUSE_STOCK_LEVELS}"
value="#{bindings.WarehouseStockLevelsByProduct1.geoMapModel}"
rendered="#{AppState.showPointTheme}">
<dvt:mapPointStyleItem id="ps0"
minValue="0"
maxValue="500"
imageURL="/images/low.png"
selectedImageURL="/images/lowSelected.png"
shortLabel="#{viewcontrollerBundle.VERY_LOW_
INVENTORY}"/>
<dvt:mapPointStyleItem id="ps1"
minValue="500"
maxValue="1000"
imageURL="/images/medium.png"
selectedImageURL="/images/mediumSelected.png"
shortLabel="#{viewcontrollerBundle.LOW_INVENTORY}"/>
<dvt:mapPointStyleItem id="ps2"
minValue="1000"
maxValue="1600"
imageURL="/images/regularGreen.png"
selectedImageURL="/images/regularGreenSelected.png"
shortLabel="#{viewcontrollerBundle.HIGH_INVENTORY}"/>
</dvt:mapPointTheme>
</dvt:map>
マップ点のカスタムHTMLおよびカスタム・イメージを指定する場合、dvt:mapPointThemeタグのcustomPointCallback属性を使用してこのカスタマイズを実現できます。
|
重要: マップ点テーマの |
コールバックを使用してマップ点のスタイルをカスタマイズする手順:
目的の点のカスタマイズを実行するメソッドをJavaで記述します。
このメソッドをマップのマネージドBeanに格納します。
マネージドBeanの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「マネージドBeanの作成と使用」の項を参照してください。
マップ点テーマのデータ・バインディングの完了後に、プロパティ・インスペクタを使用してマネージドBeanのメソッドへの参照をdvt:mapPointThemeタグのcustomPointCallback属性に指定します。
たとえば、マネージドBeanの名前がMapSampleBean、メソッドの名前がsetCustomPointStyleの場合、その参照は#{mapSampleBean.CustomPointStyle}となります。
地図の作成時は、任意の順序でのテーマ(点、カラーおよびグラフ)の作成を選択できます。
次の手順では、地理マップがすでに構成されていることを前提にしています。したがって、マップ・コンポーネントから、地図を構成するためのダイアログは表示されません。そのかわり、カラー・テーマを作成するためのダイアログのみ表示されます。
データバインドされたカラー・テーマを地図に追加する手順:
「データ・コントロール」パネルから、コレクションを選択します。
図33-41に、「データ・コントロール」パネルでProductPopularity1コレクションを選択し、地域(州など)における商品の人気を色別に示すカラー・マップ・テーマを作成する例を示します。
地理マップ・コンポーネントをすでに含んでいるJSFページにコレクションをドラッグし、ポップアップ・メニューから「地理マップ」→「カラー・テーマ」を選択します。
次に表示される「カラー・マップ・テーマの作成」ダイアログで、マップ・テーマの一意のIDを「ID」フィールドに入力します。
ベース・マップ・テーマ・セクションで、地理マップで使用するベース・マップのカラー・テーマを次のように指定します。
「名前」フィールドで、ベース・マップ・テーマの名前を選択します。
「位置」では、選択したベース・マップ・テーマ内の位置の列に対応するデータ・コレクション内の位置の列を選択します。
オプションで、「サンプル・テーマ・データの表示」をクリックし、「サンプル・テーマ・データ」ダイアログを表示します。このダイアログでは、実際のデータの先頭のいくつかの行を確認できるため、適切な位置列を指定できます。
たとえば、アメリカ合衆国のマップの州で構成される地域のデータを確認するには、図33-42で示すように、MAP_STATES_NAMEを選択できます。
|
注意: Oracle Spatialの管理者はサンプル・データの表示を無効にできます。このボタンが使用できない場合は、管理者に連絡して指示を求めてください。 |
「外観」セクションで、カラー・テーマの外観を次のように指定します。
「データ・バケット数」に、この地理マップのデータのグループ数を入力します。各グループは、色別にコード化されます。この数の指定後は、最小値と最大値に色を指定できます。他の値の色は、RGBアルゴリズムを使用して自動的に選択されます。
「最小値の色」で、最小値の色を選択します。
「最大値の色」で、最大値の色を選択します。
「データ」セクションで、コレクション内のデータに関する次の情報を指定します。
「位置」では、ベース・マップ・テーマから選択した位置列の値に対応するデータ・コレクション内の列を選択します。
「ロケーション・ラベル」では、位置列の値に関連付けられているラベルを含むデータ・コレクション内の列を選択します。これらのラベルは、色をクリックしたときまたは色の上にカーソルを置いたときに表示される情報ウィンドウに表示されます。
「データ・ラベル」には、色をクリックしたときまたは色の上にカーソルを置いたときに表示される情報ウィンドウおよびツールチップでのデータの説明に使用されるラベルを入力します。たとえば、情報ウィンドウでは、データ値の前にProduct Popularityなどのラベルを表示できます。データ・ラベルに使用するテキスト・リソースを入力することもできます。テキスト・リソースは、リソース・バンドルからの翻訳可能な文字列または動的ラベル用に実行時に実行されるEL式のいずれかにできます。ドロップダウン・リストを使用して、「テキスト・リソースの選択」または「式ビルダー」ダイアログを選択します。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
「行選択の有効化」は、マスター/ディテール関係を有効にする場合にのみ使用します。これは、マップ・テーマのデータ・コレクションが、ページ上の別のUIコンポーネントに表示されるディテール・ビューとのマスター/ディテール関係においてマスターである場合に便利です。
図33-43に、商品の人気を州別のカラー・テーマで示す「カラー・マップ・テーマの作成」ダイアログを示します。
カラー・テーマを「データ・コントロール」パネルから既存の地図にドロップすると、次の処理が行われます。
カラー・テーマのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
地理マップ・タグ内の必要なカラー・テーマの子タグをJSFページに追加します。
例33-19に、地理マップのカラー・テーマに生成された行セット・バインディングを示しています。
例33-19 カラー・テーマのバインディングXML
<mapTheme IterBinding="ProductPopularity1Iterator" id="ProductPopularity1"
xmlns="http://xmlns.oracle.com/adfm/dvt">
<mapThemeDataMap mapThemeType="color">
<data>
<item value="CountAddressesStateProvince"
label="${adfBundle['view.ViewControllerBundle'].POPULARITY"/
</data>
<item type="location" value="StateProvince"
label="${adfBundle['view.ViewControllerBundle'].STATE_PROVINCE"/
</mapThemeDataMap>
</mapTheme>
例33-20に、アメリカ合衆国のマップ上の各州における商品の人気を表すカラー・テーマに対してJSFページで生成されるXMLコードを示します。
例33-20 JSFページのカラー・テーマのXMLコード
<dvt:mapColorTheme id="mapColorTheme1"
themeName="MAP_STATES_NAME"
shortLabel="#{viewcontrollerBundle.PRODUCT_POPULARITY}"
value="#{bindings.ProductPopularity1.geoMapModel}"
locationColumn="POLYGON_NAME"
minColor="#ff0000"
maxColor="#008200"
bucketCount="5"/>
</dvt:mapColorTheme>
マップ・カラー・テーマのデータ・バインディング時には、データ・バケットに対する最小値の色および最大値の色のみを指定できます。最小値から最大値までのバケットの色は、マップがアルゴリズムを使用して決定します。しかし、データ・バインディングを完了すると、各データ・バケットに使用する正確な色を指定できるようになります。
オブジェクト・インスペクタで、dvt:mapColorThemeタグのcolorList属性を使用して各バケットの色を指定できます。色の配列をこの属性にバインドするか、セミコロンのセパレータを使用して色の文字列を指定できます。
たとえば、この属性の値を#ff0000;#00ff00;#0000ffに設定した場合、最初のバケットは赤、2番目のバケットは緑、3番目のバケットは青となります。
地図の作成時は、任意の順序でのテーマ(点、カラーおよびグラフ)の作成を選択できます。ただし、ADF地図コンポーネント上で一度に表示できるグラフ・テーマ(円または棒)は1つのみです。
次の手順では、地理マップがすでに構成されていることを前提にしています。したがって、マップ・コンポーネントから、地図を構成するためのダイアログは表示されません。そのかわり、円グラフを作成するためのダイアログのみ表示されます。
データバインドされた円グラフ・テーマを地図に追加する手順:
「データ・コントロール」パネルから、コレクションを選択します。
図33-44に、PopularCategories1を選択し、ある州で人気のある製品カテゴリを表すために、既存の地図マップ・コンポーネントに円棒テーマを作成する例を示します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「作成」→「円グラフ・テーマ」を選択します。
次に表示される円グラフ・テーマ・バインディングの作成ダイアログで、操作する新しいテーマとベース・マップのテーマの要素を次の手順で識別します。
「テーマID」で、作成する円グラフ・テーマの一意のIDを入力します。
ベース・マップ・テーマ・セクションで、ベース・マップの名前と、円グラフを配置する地域を選択します。
「外観」セクションで、「データ」の下で次のようにします。
「位置」では、選択したベース・マップ・テーマ内の位置の列に対応するデータ・コレクション内の位置の列を選択します。
必要に応じて、適切な位置の列を識別できるように、「サンプル・テーマ・データの表示」をクリックして実際のデータの最初の数行を確認します。
「ロケーション・ラベル」では、データ・コレクション内の位置のラベルを含むデータ・コレクション内の列を選択します。
「シリーズ属性」のグリッドで、作成中の円グラフで表す値を含む各属性を入力します。
各シリーズ属性の横に、シリーズ属性のデータ値のラベルとして使用するテキストを入力します。
「行選択の有効化」は、関連するコンポーネントで行を選択可能にする場合にのみ選択します。このコンポーネントは、作成中の地図に関連するデータ・コレクションにリンクされているコンポーネントがページに含まれる場合に使用します。
「OK」をクリックします。
図33-45に、商品の人気を州別の円グラフ・テーマで示す「円グラフ・マップ・テーマの作成」ダイアログの入力が完了した状態を示します。
円グラフ・テーマを「データ・コントロール」パネルから既存の地図にドロップすると、次の処理が行われます。
円グラフ・テーマのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
マップXML内で必要な円グラフ・テーマのコードをJSFページに追加します。
例33-21に、地理マップの円グラフ・テーマに生成された行セット・バインディングを示します。
例33-21 円グラフ・テーマのバインディングXML
<mapTheme IterBinding="PopularCategoriesByState1Iterator"
id="PopularCategoriesByState1"
xmlns="http://xmlns.oracle.com/adfm/dvt">
<mapThemeDataMap mapThemeType="pieChart">
<item type="location" value="StateProvince" label="StateProvince"/>
<data>
<item value="AudioVideo"
label="${adfBundle['view.ViewControllerBundle'].AUDIO_VIDEO}"/>
<item value="CellPhones"
label="${adfBundle['view.ViewControllerBundle'].CELL_PHONES}"/>
<item value="Games"
label="${adfBundle['view.ViewControllerBundle'].GAMES}"/>
</data>
</mapThemeDataMap>
</mapTheme>
例33-22に、地理マップの円グラフ・テーマに対してJSFページで生成されるXMLコードを示します。
例33-22 JSFページの円グラフ・テーマのコード
<dvt:mapPieGraphTheme id="mapPieGraphTheme1"
themeName="MAP_STATES_NAME"
shortLabel="#{viewcontrollerBundle.POPULAR_CATEGORIES}"
pieRadius="10"
styleName="comet"
value="#{bindings.PopularCategoriesByState1.geoMapModel}"
locationColumn="POLYGON_ID"/>
</dvt:mapPieGraphTheme>
テーマ・マップでは、ビジネス・データをスタイル設定されたエリア内にパターンまたは関連付けられたマーカーとして表し、リモートのOracle MapViewerサービスへの接続は必要ありません。テーマ・マップでは、地理マップでの地理的な詳細なしで、データに焦点を合せます。
テーマ・マップは、米国、世界をはじめ、世界の大陸や地域(EMEAやAPACなど)などのあらかじめ作成されたベース・マップとともにパッケージ化されています。それぞれのベース・マップには、いくつかのリージョンのセットと、都市の固定セットが1つ含まれます。リージョンまたは都市の1つのセットはレイヤーと呼ばれます。各レイヤーは、データ・コレクションにバインドし、データを色やパターンの塗りつぶし、またはデータ・マーカー、あるいはその両方で表すためにスタイルを設定できます。実行時には、テーマ・マップでドリルが有効になっていないかぎり、一度に表示できるのは1つのマップ・レイヤーとその関連するデータのみです。
テーマ・マップに表示されるデータは、データ・コレクションに基づいています。ADFデータ・コントロールを使用すると、JDeveloperではデータ・バインディングが宣言的なタスクとなります。「データ・コントロール」パネルからJSFページにコレクションをドラッグ・アンド・ドロップし、「コンポーネント・ギャラリ」を使用してデータを表示するベース・マップとマップ・レイヤーを選択します。レイヤー・ブラウザおよびバインディング・ダイアログを使用して、テーマ・マップでデータ・コレクション属性をデータ・レイヤーにバインドできます。
マップ・レイヤーをデータ・コレクションのデータ行に関連付けるには、スタンプを使用します。スタンプを使用すれば、データ・モデル内の各データ行をスタイル(色またはパターンなど)、マーカー(円形または四角形など)、またはイメージにより識別できます。スタンプを使用すると、テーマ・マップではエリア、マーカーまたはイメージごとに子コンポーネントが作成されません。むしろ、コンポーネントのコンテンツは、データ・コレクションの行など、データ属性ごとに1回、繰り返しレンダリングされるか、スタンプされます。
テーマ・マップのエンド・ユーザーとプレゼンテーション機能、ユースケース、タグ構造およびテーマ・マップへの特殊機能の追加に関する詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のテーマ・マップ・コンポーネントの使用方法に関する項を参照してください。
マップ・エリアをスタイル設定してデータを視覚的に表示することにより、ベース・マップのリージョン・レイヤーに関連付けられたビジネス・データを表示するテーマ・マップを作成できます。
たとえば、米国の基準となるマップを州のマップ・レイヤーとともに使用すれば、特定ブランドのソフト・ドリンクに対する各州の好みを図33-46のように色で表示できます。この例では、「データ・コントロール」パネルおよびテーマ・マップのバインディング・ダイアログを使用する場合の、データにバインドされた凡例およびスタイル設定されたエリアに関連付けられたラベルなど、テーマ・マップのデフォルトの機能を示しています。
thematicMapコンポーネントは、モデルを使用して、基になるリストのデータにアクセスします。固有のモデル・クラスはoracle.adf.view.rich.model.CollectionModelです。java.util.List、java.util.Arrayおよびjavax.faces.model.DataModelなど、その他のモデル・インスタンスも使用できます。データ・レイヤーではインスタンスがCollectionModelに自動的に変換されます。
作業を始める前に、次のようにします。
テーマ・マップの属性やテーマ・マップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のテーマ・マップの構成に関する項を参照してください。
テーマ・マップに表示するデータを表すADFデータ・コントロールまたはADFマネージドBeanはすでに用意されています。
「データ・コントロール」パネルを使用してテーマ・マップを作成する手順は次のとおりです。
「データ・コントロール」パネルから、データ・コレクションを選択します。
図33-47に、「データ・コントロール」パネルでTmapStatesView1コレクションを選択し、特定の製品に対する州ごとの好みを色を使用して表すテーマ・マップを作成する例を示します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「テーマ・マップ」を選択します。
「コンポーネント・ギャラリ」で、データ表示のために構成するベース・マップに関連付けられたマップ・レイヤーを選択します。この例では、米国のベース・マップで州のマップ・レイヤーが選択されています。図33-48に、米国の州のマップ・レイヤーが選択されているコンポーネント・ギャラリを示します。
デフォルトでは、選択したマップ・レイヤーに面データ・レイヤーや点データ・レイヤーを追加するための「データ・レイヤーの作成」ダイアログが開きます。この例では、面データ・レイヤーが構成されます。点データ・レイヤーの追加および構成の詳細は、33.6.4項「テーマ・マップにデータ・レイヤーを追加する方法」を参照してください。
「データ・レイヤーの作成」ダイアログで、次のように入力します。
「レイヤーID」: 定義するデータ・レイヤーの一意の名前を入力します。デフォルトでは、一意の連番のID、つまりdl1、dl2などになります。
「面」: このオプションを選択して、面データ・レイヤーをマップ・レイヤーに追加します。
「エリア・レイヤー」: データ・レイヤーを追加するマップ・レイヤーを参照します。この例では、「USA(州)」マップ・レイヤーを参照します。
「位置」: データ・レイヤー内のエリアに対応するデータの位置を決定する、データ・モデル内の列を表す属性を選択します。位置は、データが表示されるベース・マップのリージョンのIDです。詳細は、33.6.3項「基準となるマップの位置IDについて」を参照してください。
「マスター/ディテールの現在行の設定」: マスター/ディテール関係を有効化する場合に選択します。これは、テーマ・マップのデータ・コレクションが、ページ上の別のUIコンポーネントに表示されるディテール・ビューとのマスター/ディテール関係においてマスターである場合に便利です。詳細は、33.6.6項「マスター/ディテール関係の構成について」を参照してください。
図33-49に、設定済の「データ・レイヤーの作成」ダイアログを示します。
areaDataLayerコンポーネントを表す面データ・レイヤーおよびareaコンポーネントを表すエリアが、レイヤー・ブラウザ階層に追加されます。図33-50に、面データ・レイヤーおよびエリアをマップ・レイヤーに追加した後で展開したレイヤー・ブラウザを示します。
レイヤー・ブラウザで、面データ・レイヤーを開き、スタイル設定するエリアを選択し、「編集」アイコンをクリックして「エリアの構成」ダイアログを開きます。
|
注意: テーマ・マップ・レイヤー内のすべてのエリアについてデフォルトのスタンプを使用してエリアを構成することも、子 |
「エリアの構成」ダイアログの「属性グループ」ページで、次のように入力します。
「グループ化ルール」: この表を使用して、データ・コレクション内のデータのカテゴリ・グループのスタイルを指定します。「追加」アイコンを使用して、カテゴリ・グループのルールを構成する表に行を追加し、「削除」アイコンを使用して選択した行を表から削除します。各グループ化ルールはattributeGroupsコンポーネントとして表され、一意の連番ID(ag1、ag2など)が割り当てられます。
表に追加された行ごとに、次のように入力します。
「値でグループ化」: データ値のグループ化に使用するデータ・セットの列を表す属性を入力するか、ドロップダウン・リストを使用して選択します。たとえば、Categoryは、各種ソフト・ドリンクの州別の好みを表します。
|
注意: 選択した属性は、カテゴリ化できる離散値で構成される必要があります。たとえば、40から45までの数値範囲は自動的にはグループ化されません。 |
「エリア・プロパティ」: 該当のエリアのスタイル設定に使用するプロパティをドロップダウン・リストを使用して選択します。エリアは、色、パターン、不透明度またはこれら有効値の任意の組合せを使用してスタイル設定できます。ダイアログのドロップダウン・リストから「複数の属性の選択」を選択し、値の組合せを指定します。
各プロパティに生成されるデフォルトのスタイル値は、ADFスキンのCSSスタイル・プロパティを使用して定義されます。各attributeGroupsタイプには、スキンで定義されたデフォルトのランプがあり、索引ベースのプロパティを目的の値に設定することによりカスタマイズできます。詳細は、33.6.7.4項「属性グループのデフォルトのスタイル値について」を参照してください。
「凡例ラベル」: テキストを入力するか、テーマ・マップの凡例のカテゴリ・グループに使用するテキストを表す属性をドロップダウン・リストを使用して選択します。ドロップダウン・リストから「式ビルダー」を選択し、EL式を作成して凡例テキストを指定することもできます。詳細は、33.6.8項「データバインドされた凡例の作成」を参照してください。
「値固有のルール>>」: クリックして、データ・セットのカテゴリ・グループに1つ以上のデータ値の詳細を指定する際に使用する「一致ルール」表および「例外ルール」表を開きます。たとえば、一致ルールを使用すると、あらかじめ設定されている色範囲のかわりに、#00ffff色(淡緑青色)を使用して、ドクターペッパーに対する好みをすべての州についてスタイル設定できます。
|
注意: これらの表で指定された一致ルールや例外ルールは、「グループ化ルール」表で定義された設定に優先します。 |
「一致ルール」: このオプションを使用して、データ・コレクション内のデータ・グループの1つ以上のデータ値に一致するスタイル・ルールを指定します。「追加」アイコンを使用して、カテゴリ・グループの一致ルールを構成する表に行を追加し、「削除」アイコンを使用して選択した行を表から削除します。各一致ルールはattributeMatchRuleコンポーネントとして表され、一意の連番ID(amr1、amr2など)が割り当てられます。プロパティとプロパティ値は、子f:attributeタグで定義されます。たとえば、次のように入力します。
<dvt:attributeMatchRule id="amrl" group="Mountain Dew"> <f:attribute name="color" value="#ffff00"/> </dvt:attributeMatchRule>
表に追加された行ごとに、次のように入力します。
「グループ値」: この一致ルールの実行をトリガーする「値でグループ化」属性の値を入力します。この例では、ソフト・ドリンクの好みに関するデータ・コレクション属性には、Dr Pepper、7 Upなどの値が含まれます。
「プロパティ」: 該当のデータ値のスタイル設定に使用するプロパティをドロップダウン・リストを使用して選択します。エリアは、色、パターンまたは不透明度の値を使用してスタイル設定できます。ここで選択したプロパティは、「グループ化ルール」属性の「エリア・プロパティ」に表示されるプロパティ・タイプのいずれかに一致する必要があります。
「プロパティ値」: 入力するかドロップダウン・リストを使用して、値をプロパティに割り当てます。一致オーバーライドにより指定された値が、グループ化ルールによって返された事前作成のランプ内にもある場合、その値はオーバーライドでのみ使用され、事前作成のランプではスキップされます。
色の有効な値は、RGB16進数色です。
パターンの有効値として、12個の事前作成されたパターン(smallChecker、largeDiamond、smallDiagonalRight、largeCrosshatchなど)から選択することもできます。塗りつぶし色が指定されている場合は、パターンはその色、背景色はデフォルトの白で表示されます。
不透明度の有効な値範囲は、0.0(透明)から1.0(不透明)です。
「例外ルール」: データ・セット内のカテゴリ・グループのスタイル・ルールについて1つ以上の例外を指定します。「追加」アイコンを使用して、例外ルールを構成する表に行追加し、「削除」アイコンを使用して任意の行を表から削除します。各例外ルールはattributeExceptionRuleコンポーネントとして表され、一意の連番ID(aer1、aer2など)が割り当てられます。プロパティとプロパティ値は、子f:attributeタグで定義されます。たとえば、次のように入力します。
<dvt:attributeExceptionRule id="aer1" condition="#{row.name=='TX'}"
label="Texas">
<f:attribute name="color" value="#ff00ff"/>
</dvt:attributeExceptionRule>
表に追加された行ごとに、次のように入力します。
「条件」: EL式を入力するか、ドロップダウン・リストを使用して「式ビルダー」ダイアログを開き、EL式を作成します。この式は、特定の条件を満たす場合にスタイル・プロパティ値を別の値に置き換えます。たとえば、次のように入力します。
#{row.Sales gt 100000}
「プロパティ」: 該当のデータ値のスタイル設定に使用するプロパティをドロップダウン・リストを使用して選択します。エリアは、色、パターンまたは不透明度の値を使用してスタイル設定できます。ここで選択したプロパティは、「グループ化ルール」属性の「エリア・プロパティ」に表示されるプロパティ・タイプのいずれかに一致する必要があります。
「プロパティ値」: 入力するかドロップダウン・リストを使用して、値をプロパティに割り当てます。一致オーバーライドにより指定された値が、グループ化ルールによって返された事前作成のランプ内にもある場合、その値はオーバーライドでのみ使用され、事前作成のランプではスキップされます。
色の有効な値は、RGB16進数色です。
パターンの有効値として、12個の事前作成されたパターン(smallChecker、largeDiamond、smallDiagonalRight、largeCrosshatchなど)から選択することもできます。塗りつぶし色が指定されている場合は、パターンはその色、背景色はデフォルトの白で表示されます。
不透明度の有効な値範囲は、0.0(透明)から1.0(不透明)です。
「凡例ラベル」: 凡例ラベルに使用するテキスト・リソースを入力します。テキスト・リソースは、リソース・バンドルからの翻訳可能な文字列または実行時に実行されるEL式のいずれかにできます。ドロップダウン・リストを使用して、「テキスト・リソースの選択」または「式ビルダー」ダイアログを選択します。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
|
注意: テキスト・リソース・オプションは、固定エリアでのみ使用可能です。行数が変動するエリアでは、EL式を使用して行数変動キーを取得し、リソース・バンドルでテキスト・リソースを検索します。たとえば、次のようになります。
#{viewController.ResourceBundle[row.label]}
|
「メッセージ」: エリアの構成に関連付けられたアラートを必要に応じて確認したり消去します。
図33-51に、設定済の「エリアの構成」ダイアログを示します。メッセージ・ペインの警告は、ダイアログの「デフォルト・スタンプ」ページで指定されているデフォルトのエリアの色が、「グループ化ルール」で指定された色や、「属性グループ」ページで指定された値固有のオーバーライドで上書きされることをユーザーにアラートします。
ベース・マップの地理階層で使用可能なリージョンを表すその他のマップ・レイヤーを追加したり、テーマ・マップの作成に使用したものと同じデータ・コレクションを使用して面データ・レイヤーや点データ・レイヤーを関連付できます。レイヤー・ブラウザでは、マップ・レイヤー、面データ・レイヤーと点データ・レイヤー、スタイル設定されたエリアとマーカーの論理的構造を表します。レイヤー・ブラウザを使用して次を実行します。
ベース・マップの地理階層のその他のマップ・レイヤーをテーマ・マップに追加します。
下位レベルのリージョンを使用して、カスタム・レイヤーにリージョンを集約することにより、ベース・マップの地理階層でカスタム・マップ・レイヤーを定義します。詳細は、33.6.9項「カスタム・マップ・レイヤーの定義方法」を参照してください。
(グローバルまたはマップ・レイヤー固有の)面データ・レイヤーや点のデータ・レイヤーを追加、編集または削除します。詳細は、33.6.4項「テーマ・マップにデータ・レイヤーを追加する方法」を参照してください。
スタイル設定したエリアやマーカーを追加、編集または削除します。詳細は、33.6.7項「データを表示するためのエリア、マーカーおよびイメージのスタイル設定」を参照してください。
データ・コントロールを使用してテーマ・マップを作成すると、デフォルトのマップ・ラベルや凡例の表示をカスタマイズし、相互作用力やアニメーション効果を追加できます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』を参照してください。
ADFデータ・コントロールを使用してテーマ・マップを作成すると、JDeveloperにより、次が実行されます。
JSFページのページ定義ファイルでテーマ・マップのバインディングが定義されます。
DVTテーマ・マップ・コンポーネント用のコードがJSFページに挿入されます。
例33-23に、図33-46に例示したテーマ・マップの場合の、JSFページのページ定義ファイルに定義されたバインディングを示します。
例33-23 ページ定義ファイルのXMLバインディング
<bindings>
<tree IterBinding="TmapStatesView1Iterator" id="TmapStatesView1">
<nodeDefinition DefName="model.TmapStatesView">
<AttrNames>
<Item Value="Abbrev"/>
<Item Value="Category"/>
<Item Value="Color"/>
<Item Value="Data"/>
<Item Value="Id"/>
<Item Value="Name"/>
</AttrNames>
</nodeDefinition>
</tree>
</bindings>
例33-24に、図33-46に例示されたテーマ・マップの場合の、JSFページに挿入されるコードを示します。
例33-24 テーマ・マップ・コンポーネントのJSFコード
<dvt:thematicMap id="tm1" basemap="usa">
<dvt:areaLayer layer="states" id="al1">
<dvt:areaDataLayer id="dl1"
value="#{bindings.TmapStatesView1.collectionModel}" var="row">
<dvt:areaLocation name="#{row.Name}" id="al2">
<dvt:area id="a1">
<dvt:attributeGroups id="ag1" value="#{row.Category}" type="color"
label="#{row.Category}">
<dvt:attributeMatchRule id="amr1" group="Mountain Dew">
<f:attribute name="color" value="#ffff00"/>
</dvt:attributeMatchRule>
<dvt:attributeMatchRule id="amr2" group="Sunkist">
<f:attribute name="color" value="#ff00ff"/>
</dvt:attributeMatchRule>
<dvt:attributeMatchRule id="amr3" group="Dr Pepper">
<f:attribute name="color" value="#00ffff"/>
</dvt:attributeMatchRule>
<dvt:attributeMatchRule id="amr4" group="7 Up">
<f:attribute name="color" value="#00ff00"/>
</dvt:attributeMatchRule>
<dvt:attributeMatchRule id="amr5" group="Pepsi">
<f:attribute name="color" value="#0000ff"/>
</dvt:attributeMatchRule>
<dvt:attributeMatchRule id="amr6" group="Coke">
<f:attribute name="color" value="#ff0000"/>
</dvt:attributeMatchRule>
</dvt:attributeGroups>
</dvt:area>
</dvt:areaLocation>
</dvt:areaDataLayer>
</dvt:areaLayer>
<dvt:legend id="l1">
<dvt:legendSection source="al1:dl1:ag1" id="ls1"/>
</dvt:legend>
</dvt:thematicMap>
テーマ・マップ・コンポーネント用に用意されている基準となる各マップには、一連のリージョンを表す事前に作成された複数のマップ・レイヤーがあります。たとえば、基準となるworldマップには、continents用のマップ・レイヤーとcountries用の別のレイヤーが含まれています。下位レベルのマップ・レイヤーのリージョンは、集約されて地理的階層内の次のレベルを構成します。マップ・レイヤーは、areaLayerコンポーネントのlayer属性で指定されます。
データ・コレクションをテーマ・マップにバインドする際、データが表示される基準となるマップからリージョンのマップ位置IDを使用してエリアまたはポイント・データの位置を指定する列を、データ・モデルに指定する必要があります。エリアの位置はareaLocationコンポーネントのname属性で指定され、ポイントの位置は、type属性がpointNameに設定されている場合、pointLocationコンポーネントのpointName属性で指定されます。
米国の基準となるマップでは、位置IDは次のネーミング・ルールによって決まります。
countryレイヤー: USA
statesレイヤー: 2文字の郵便用の略号を使用します。たとえば、Massachusettsの位置IDはMAで、Texasの位置IDはTXです。
countiesレイヤー: statesレイヤー位置IDの後に、アンダースコア、国名を続けます。すべて大文字にし、英字以外の文字はアンダースコアに置き換えます。たとえば、MassachusettsのMiddlesex郡の位置IDはMA_MIDDLESEXで、TexasのRed River郡の位置IDはTX_RED_RIVERです。
citiesレイヤー: statesレイヤー位置IDの後に、アンダースコア、都市名を続けます。すべて大文字にし、英字以外の文字はアンダースコアに置き換えます。たとえば、MassachusettsのBostonの位置IDはMA_BOSTONで、TexasのSan Antonio位置IDはTX_SAN_ANTONIOです。
他の基準となるマップでは、位置IDは次のネーミング・ルールによって決まります。
continentsレイヤー: world、africa、asia、australia、europe、northAmericaおよびsouthAmericaの基準となるマップでは、AF(アフリカ)、AS(アジア)、AU(オーストラリア)、EU(ヨーロッパ)、NA(北米)およびSA(南米)となります。
worldRegionsレイヤー: worldRegions、apac、emea、latinAmericaおよびusaAndCanadaの基準となるマップでは、APAC(アジア太平洋)、EMEA(ヨーロッパおよび中近東)、LAT(中南米)、NA(米国およびカナダ)となります。
countriesレイヤー: ISO 3166-1 alpha-3国名コードを使用します。たとえば、カナダの位置IDはCANで、中国の位置IDはCHNです。
citiesレイヤー: 3文字のcountries位置IDの後に、アンダースコア、都市名を続けます。すべて大文字にし、英字以外の文字はアンダースコアに置き換えます。たとえば、カナダのTorontoの位置IDはCAN_TORONTO、米国のLos Angelesの位置IDはUSA_LOS_ANGELESです。
事前作成されたマップ・レイヤーごとに、すべてのテーマ・マップの基準となるマップの位置IDを記載したカンマ区切りの値(CSV)ファイルをダウンロードできます。これらのリンクは、areaLocationコンポーネントのname属性のタグ・ドキュメントで検索します。データ視覚化コンポーネントのタグ・ドキュメントにアクセスするには、「構造」ウィンドウで該当のコンポーネントを選択し、「プロパティ・インスペクタ」でヘルプ・ボタンをクリックします。
データ・レイヤーを使用して、マップ・レイヤーをデータ・コレクションに関連付けます。スタンプを使用すれば、データ・モデル内の各データ行をスタイル(色またはパターンなど)、マーカー(円形または四角形など)、またはイメージにより識別できます。実行時にマップ・レイヤーが表示される場合は、データはスタイル設定されたエリア、マーカーまたはイメージとして表示されます。
マップ・レイヤーは、1つの面データ・レイヤーあるいは1つ以上の点データ・レイヤーを使用して、データを表示できます。面データ・レイヤーは、エリア、マーカーまたはイメージを使用してスタイル設定できます。点データ・レイヤーは、マーカーまたはイメージを使用してスタイル設定できます。
点データ・レイヤーが、特定のマップ・レイヤーの子としてではなくthematicMapの直接の子としてベース・マップに関連付けられている場合は、データは常時表示され、グローバル・ポイント・レイヤーと呼ばれます。
作業を始める前に、次のようにします。
テーマ・マップの属性やテーマ・マップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のテーマ・マップの構成に関する項を参照してください。
ページにすでにテーマ・マップが存在している必要があります。ない場合は、この章の指示に従ってテーマ・マップを作成します。詳細は、33.6.1項「ADFデータ・コントロールを使用してテーマ・マップを作成する方法」を参照してください。
面データ・レイヤーをマップ・レイヤーに追加する手順は次のとおりです。
ビジュアル・エディタでテーマ・マップを選択します。
レイヤー・ブラウザで、データ・コレクションの行をバインドするマップ・レイヤーを選択します。ビジュアル・エディタでレイヤー・ブラウザが表示されない場合は、マップの内部で右クリックして「レイヤー・ブラウザを開く」を選択します。
「追加」アイコンのドロップダウン・リストで「データ・レイヤーの追加」を選択し、「データ・レイヤーの作成」ダイアログを開きます。
「データ・レイヤーの作成」ダイアログで、次のように入力します。
「レイヤーID」: 定義するデータ・レイヤーの一意の名前を入力します。デフォルトでは、一意の連番のID、つまりdl1、dl2などになります。
「データを今すぐバインド」: このオプションを選択して「参照」をクリックし、「ピッカー」ダイアログ→データ・コントロールの定義ページを表示します。データ・レイヤーへのデータのバインドに使用するADFデータ・コントロールで、データ・コレクションを選択します。
|
注意: または、「式ビルダー」ページを使用して、面データ・レイヤーやエリアのバインドに使用するADFマネージドBeanを選択できます。残りの各フィールドに「式ビルダー」ダイアログを使用することもできます。 |
「面」: このオプションを選択して、面データ・レイヤーをマップ・レイヤーに追加します。
「エリア・レイヤー」: データ・レイヤーを追加するマップ・レイヤーを参照します。
「位置」: データ・レイヤーのエリアに対応するデータ位置を決定する、データ・モデルの列を表す属性を選択します。位置は、データが表示されるベース・マップのリージョンのIDです。詳細は、33.6.3項「基準となるマップの位置IDについて」を参照してください。
「マスター/ディテールの現在行の設定」: マスター/ディテール関係を有効化する場合に選択します。これは、テーマ・マップのデータ・コレクションが、ページ上の別のUIコンポーネントに表示されるディテール・ビューとのマスター/ディテール関係においてマスターである場合に便利です。詳細は、33.6.6項「マスター/ディテール関係の構成について」を参照してください。
図33-52に、設定済の面データ・レイヤーの作成ダイアログを示します。
デフォルトでは、areaDataLayerコンポーネントを表す面データ・レイヤーおよびareaコンポーネントを表すエリアが、レイヤー・ブラウザ階層に追加されます。例33-25に、面データ・レイヤーをマップ・レイヤーに追加する際にJSFページに追加されるコードを示します。
例33-25 JSFページの面データ・レイヤーのコード
<dvt:thematicMap id="tm1" basemap="usa">
<dvt:areaLayer layer="counties" id="al1">
<dvt:areaDataLayer id="dl2"
value="#{bindings.TmapStatesView11.collectionModel}"
var="row">
<dvt:areaLocation name="#{row.Name}" id="al2">
<dvt:area id="a1"/>
</dvt:areaLocation>
</dvt:areaDataLayer>
</dvt:areaLayer>
...
</dvt:thematicMap>
点データ・レイヤーをマップ・レイヤーに追加する手順は次のとおりです。
ビジュアル・エディタでテーマ・マップを選択します。
レイヤー・ブラウザで、データ・レイヤーをバインドするマップ・レイヤーを選択します。ビジュアル・エディタでレイヤー・ブラウザが表示されない場合は、マップの内部で右クリックして「レイヤー・ブラウザを開く」を選択します。
「追加」アイコンのドロップダウン・リストで「データ・レイヤーの追加」を選択し、「データ・レイヤーの作成」ダイアログを開きます。
|
注意: テーマ・マップに常時表示されるグローバル・ポイント・レイヤーを作成する場合は、「グローバル・ポイント・レイヤーの作成」を選択します。 |
「データ・レイヤーの作成」ダイアログで、次のように入力します。
「レイヤーID」: 定義するデータ・レイヤーの一意のIDを入力します。デフォルトでは、一意の連番のID、つまりdl1、dl2などになります。
「データを今すぐバインド」: このオプションを選択して「参照」をクリックし、「ピッカー」ダイアログ→データ・コントロールの定義ページを表示します。データ・レイヤーへのデータのバインドに使用するADFデータ・コントロールで、データ・コレクションを選択します。
|
注意: または、「式ビルダー」ページを使用して、点データ・レイヤーやマーカーのバインドに使用するADFマネージドBeanを選択できます。残りの各フィールドに「式ビルダー」ダイアログを使用することもできます。 |
「点」: このオプションを選択して、点データ・レイヤーをマップ・レイヤーに追加します。
「エリア・レイヤー」: ドロップダウン・リストを使用してデータ・レイヤーを関連付けるマップ・レイヤーを選択します。「すべて」を選択すると、点データ・レイヤーがグローバル・ポイント・レイヤーとして構成され、常時表示されるようになります。使用可能なマップ・レイヤーを選択した場合は、点データ・レイヤーはそのマップ・レイヤーが表示された場合のみ表示されます。
「データ・タイプ」: 次のいずれかを選択します。
「市区町村」: ベース・マップの名前付きポイントにマッピングされる、データ・コレクション内の名前付きポイント(市区町村など)を表すpointNameデータ型を使用するには、これを選択します。
「座標」: pointXとpointYを組み合せてポイントの位置を定義する、データ・コレクション内の列を表すpointXYデータ型を使用するには、これを選択します。
「位置」: 市区町村データ型が指定されている場合にのみ使用可能です。ドロップダウン・リストを使用して、データ・レイヤーのポイントに対応するデータの位置を決定する、データ・モデルの列を表す属性を選択します。位置は、データが表示されるベース・マップのポイントのIDです。詳細は、33.6.3項「基準となるマップの位置IDについて」を参照してください。
「経度」: 座標データ型が指定されている場合に使用可能です。ドロップダウン・リストを使用して、経度、つまりマーカーのpointXを表すデータ・コレクションの属性を選択します。
「緯度」: 座標データ型が指定されている場合に使用可能です。ドロップダウン・リストを使用して、緯度、つまりマーカーのpointYを表すデータ・コレクションの属性を選択します。
「マスター/ディテールの現在行の設定」: マスター/ディテール関係を有効化する場合に選択します。これは、テーマ・マップのデータ・コレクションが、ページ上の別のUIコンポーネントに表示されるディテール・ビューとのマスター/ディテール関係においてマスターである場合に便利です。詳細は、33.6.6項「マスター/ディテール関係の構成について」を参照してください。
図33-53に、データ型がpointNameの、設定済の点データ・レイヤーの作成ダイアログを示します。
デフォルトでは、pointDataLayerコンポーネントを表す点・データ・レイヤーおよびmarkerコンポーネントを表すマーカーが、レイヤー・ブラウザ階層に追加されます。例33-26に、点データ・レイヤーをマップ・レイヤーに追加する際にJSFページに追加されるコードを示します。
例33-26 JSFページの点データ・レイヤーのコード
<dvt:thematicMap id="tm1" basemap="usa">
<dvt:areaLayer layer="states" id="al1">
<dvt:pointDataLayer id="dl1"
value="#{bindings.TmapCitiesView11.collectionModel}"
var="row">
<dvt:pointLocation type="pointName" pointName="#{row.City}" id="pl1">
<dvt:marker id="m2"/>
</dvt:pointLocation>
</dvt:pointDataLayer>
</dvt:areaLayer>
...
</dvt:thematicMap>
例33-27に、グローバル・ポイント・データ・レイヤーをテーマ・マップに追加する際にJSFページに追加されるコードを示します。
例33-27 JSFページのグローバル・ポイント・データ・レイヤーのコード
<dvt:thematicMap>
<areaLayer layer="states" id="al1"/>
<dvt:pointDataLayer id="dl2"
value="#{bindings.TmapCitiesView12.collectionModel}"
var="row">
<dvt:pointLocation type="pointXY" pointX="#{row.Longitude}"
pointY="#{row.Latitude}" id="pl2">
<dvt:marker id="m3"/>
</dvt:pointLocation>
</dvt:pointDataLayer>
...
</dvt:thematicMap>
面データ・レイヤーまたは点データ・レイヤーをテーマ・マップに追加したら、エリア、マーカーまたはイメージを使用してデータをスタイル設定します。詳細は、33.6.7項「データを表示するためのエリア、マーカーおよびイメージのスタイル設定」を参照してください。
各種マップ・レイヤーの関連するデータ・ビューを備えたテーマ・マップは、上位と下位のデータ・ビュー間でドリルを実行するように構成できます。たとえば、図33-64に示すように、テーマ・マップでは、米国の州別の売上げカテゴリのデータを郡別にドリルダウンして表示できます。州や郡を選択した場合は、ポップアップ・メニューの選択やコントロール・パネルの設定により、ドリルアップやドリルダウンが開始されます。
テーマ・マップ・エリアのドリルを宣言的に実現するには、次の要件を満たす必要があります。
ドリル階層の各マップ・レイヤー(areaLayer)について、その子であるareaDataLayerを該当するマップ・レイヤーの関連データを定義するデータ・コントロールにバインドする必要があります。
マップ・レイヤー・ドリル階層の各areaDataLayerのselectionMode属性は、singleまたはmultipleに設定されている必要があります。
下位レベルのマップ・レイヤー・ドリル階層のareaを構成し、上位レベルのマップ・レイヤーのareaコンポーネントと同じデフォルトのスタンプやカテゴリ属性のスタイルを使用してデータを表示する必要があります。
thematicMapコンポーネントのdrilling属性はonに設定する必要があります。
|
注意: テーマ・マップでドリルが有効な場合は、カスタム・レイヤーとカスタム・レイヤーの集約に使用するマップ・レイヤー間のドリルが可能です。 |
作業を始める前に、次のようにします。
テーマ・マップの属性やテーマ・マップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のテーマ・マップの構成に関する項を参照してください。
ページにすでにテーマ・マップが存在している必要があります。ない場合は、この章の指示に従ってテーマ・マップを作成します。詳細は、33.6.1項「ADFデータ・コントロールを使用してテーマ・マップを作成する方法」を参照してください。
ドリル階層の各データ・レイヤーのデータ・モデルを定義するデータ・コントロールはすでに用意されています。
テーマ・マップ・エリアを構成してドリルを可能にする手順は次のとおりです。
構造ウィンドウで、dvt:thematicMapコンポーネントを選択します。
プロパティ・インスペクタで「動作」セクションを展開します。このセクションを使用して、次の属性を設定します。
Drilling: テーマ・マップ・レイヤー間でデータ・ビューのドリルを有効にするために使用します。ドロップダウン・リストから「オン」を選択して、ドリルを有効にします。デフォルト値は「オフ」です。
MaintainDrill: (オプション)新しいエリアをドリルするときに、以前にドリルしたエリアのドリル状態を維持するために、オプションのtrue値を指定するために使用します。デフォルト値は「false」です。
DrillBehavior: (オプション)ドリル対象のエリアでオプションのzoomToFit効果を指定するために使用します。デフォルト値は指定なしです。
レイヤー・ブラウザで、希望のドリル階層にある各「エリア・レイヤー」コンポーネントを選択し、次を実行します。
「追加」アイコンを選択し、「データ・レイヤーの追加」を選択して「データ・レイヤーの作成」ダイアログを開きます。ダイアログを設定して面データ・レイヤーを追加し、このデータ・レイヤーを該当のマップ・レイヤーのデータ・コントロールにバインドします。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
|
注意: 面データ・レイヤーがすでに存在する場合は、「編集」アイコンを選択してデータ・コントロールへのバインディングを確定します。 |
プロパティ・インスペクタで、「動作」セクションを展開し、SelectionMode属性をsingleまたはmultipleに設定します。
レイヤー・ブラウザで、希望のドリル階層にある各「面データ・レイヤー」コンポーネントを選択し、次を実行します。
「追加」アイコンを選択し、「エリアの追加」を選択して「エリアの構成」ダイアログを開きます。ダイアログを設定してデフォルトのスタンプを定義するか、属性グループを使用して該当のマップ・レイヤーのエリアをスタイル設定します。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
|
注意: エリアがすでに存在する場合は、「編集」アイコンを選択してエリアのスタイル設定を確定します。 |
図33-53に、売上げカテゴリのデータを表示するようにスタイル設定されたエリアを持つ米国の州と郡のマップ・レイヤーに対し、ドリルを有効化したサンプル・コードを示します。
例33-28 ドリル構成のサンプル・コード
<dvt:thematicMap id="thematicMap"
basemap="usa"
drilling="on"
maintainDrill="true"
drillBehavior="zoomToFit"
animationOnDisplay="none"
<dvt:areaLayer id="al1" layer="states">
<dvt:areaDataLayer id="adl1"
selectionMode="single"
contentDeliver="immediate"
value="#{row.state}"
var="row"
var="rowStatus">
<dvt:areaLocation id="areaLocS" name="#{row.stname}">
<dvt:area id="a1" fillColor="#{row.state}"/>
</dvt:areaLocation>
</dvt:areaDataLayer>
</dvt:areaLayer>
<dvt:areaLayer id="al2" layer="counties">
<dvt:areaDataLayer id="adl2"
selectionMode="single"
contentDelivery="immediate"
value="#{row.county}"
var="row"
varStatus="rowStatus">
<dvt:areaLocation id="areaLocC" name="#{row.coname}">
<dvt:area id="a2" fillColor="#{row.county}"/>
</dvt:areaLocation>
</dvt:areaDataLayer>
</dvt:areaLayer>
...
</dvt:thematicMap>
テーマ・マップを構成し、表などの、ページ上の別のUIコンポーネントにその関連するデータを表示できます。この構成では、テーマ・マップのデータ・コレクションが、別のUIコンポーネントに表示されるディテール・ビューとのマスター/ディテール関係でのマスターとなります。図33-54に、州ごとの失業率を表示するテーマ・マップを示します。ユーザーは、1つ以上の州を選択してデータのディテール・ビューを表に表示できます。
このマスター/ディテール処理を宣言的に実現するには、次の要件を満たす必要があります。
次のように、同じデータ・コレクションを使用して両方のビューにデータを提供する必要があります。
テーマ・マップareaDataLayerまたはpointDataLayerをデータ・コレクションにバインドします。その属性は、テーマ・マップ・レイヤーでエリアまたはマーカーによってスタイル設定されるデータを表します。
その他のADFコンポーネント(表など)を同じデータ・コレクションにバインドします。
「データ・レイヤーの作成」ダイアログで現在の行をマスター/ディテールに設定を選択し、テーマ・マップareaLayerコンポーネントのselectionListener属性に値を自動的に設定し、すでにテーマ・マップ・バインディングの一部であるprocessSelectionメソッドを使用します。
たとえば、テーマ・マップの面データ・レイヤー・コンポーネントのvalue属性がvalue="#{stateData.employmentData}"である場合は、selectionListener属性は次のように設定されます。
selectionListener="#{stateData.employmentData.processSelection}".
areaDataLayerまたはpointDataLayerコンポーネントのselectionMode属性が、テーマ・マップの要件に応じてsingleまたはmultipleに設定されていることを確認します。
面データ・レイヤーを使用してマップ・レイヤーをデータ・コレクションに関連付けます。スタンプを使用すれば、データ・モデル内の各データ行をスタイル(色またはパターンなど)、マーカー(円形または四角形など)、またはイメージにより識別できます。
点データ・レイヤーを使用してマップ上のポイントのセットをデータ・コレクションに関連付けます。データ・ポイントは、マップ・レイヤー内の名前付きポイント(米国マップ内の都市など)、または経度と緯度により、指定できます。スタンプを使用すれば、データ・モデル内の各データ行をマーカー(円形や四角形など)またはイメージにより識別できます。
テーマ・マップareaLayer内のすべてのエリアについてデフォルトのスタンプを使用してエリアを構成することも、子attributeGroupsタグを使用して、データ・セット内のカテゴリ・グループに基づいてスタイル属性タイプを自動的に生成することもできます。areaタグとattributeGroupsタグの両方で、同じスタイル属性が設定されている場合は、attributeGroupsスタイル・タイプが優先されます。
デフォルトでは、面データ・レイヤーを追加すると、構成可能なエリアがレイヤー・ブラウザに追加されます。レイヤー・ブラウザを使用して、追加のエリアやマーカーを面データ・レイヤーに追加したり、マーカーを点データ・レイヤーに追加できます。レイヤー・ブラウザは、マップ・レイヤー、面データ・レイヤーと点データ・レイヤー、テーマ・マップに構成されたエリアやマーカーの論理的構造を反映します。
たとえば、図33-55に示すように、デフォルトのスタンプを使用すると、usaベース・マップのstatesレイヤーですべての州を赤色で表示するようにスタイル設定できます。
作業を始める前に、次のようにします。
テーマ・マップの属性やテーマ・マップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のテーマ・マップの構成に関する項を参照してください。
ページにすでにテーマ・マップが存在している必要があります。ない場合は、この章の指示に従ってテーマ・マップを作成します。詳細は、33.6.1項「ADFデータ・コントロールを使用してテーマ・マップを作成する方法」を参照してください。
デフォルトのスタンプを使用してエリアをスタイル設定する手順は次のとおりです。
レイヤー・ブラウザで、構成しているマップ・レイヤー内部のエリア位置にあるエリアを選択します。
「編集」アイコンを選択して「エリアの構成」ダイアログを開きます。
「エリアの構成」ダイアログの「デフォルト・スタンプ」ページで、次のように入力します。
「位置」: デフォルトでは、データ・レイヤーのエリアに対応するデータの位置を決定する、データ・モデルの列を表す属性です。位置は、データが表示されるベース・マップのリージョンのIDです。この読取り専用フィールドには、スタンプされたエリアをベース・マップのリージョンにマップするEL式が表示されます。詳細は、33.6.3項「基準となるマップの位置IDについて」を参照してください。
「色」: (オプション)ドロップダウン・リストからエリアの塗りつぶし色を選択します。有効な値は、RGB16進数です。ドロップダウン・リストから「カスタム・カラー」を選択し、「カラー・ピッカー」ダイアログを開きます。
「パターン」: (オプション)ドロップダウン・リストから12個の事前作成されたパターンのいずれかを選択し、エリアをスタイル設定します。たとえば、smallChecker、largeDiamond、smallDiagonalRight、largeCrosshatchなどがあります。塗りつぶし色が指定されている場合は、パターンはその色、背景色はデフォルトの白で表示されます。
「不透明度」: (オプション)エリアの塗りつぶし色の不透明度を指定します。有効値の範囲は、0.0(透明)から1.0(不透明)です。
「凡例に含める」: 検索アイコンを使用して「テキスト・リソースの選択」ダイアログを開き、凡例テキストに使用するアプリケーション・テキスト・リソースを選択または作成します。テキスト・リソースは、リソース・バンドルからの翻訳可能な文字列または実行時に実行されるEL式のいずれかにできます。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
|
注意: テキスト・リソース・オプションは、固定エリアでのみ使用可能です。行数が変動するエリアでは、EL式を使用して行数変動キーを取得し、リソース・バンドルでテキスト・リソースを検索します。たとえば、次のようになります。
#{viewController.ResourceBundle[row.label]}
|
「メッセージ」: エリアの構成に関連付けられたアラートを必要に応じて確認したり消去します。
図33-56に、「エリアの構成」ダイアログの「デフォルト・スタンプ」ページを示します。
例33-29に、構成したエリアのJSFページに挿入されるコードを示します。
例33-29 デフォルト・スタンプで構成したエリアのサンプル・コード
<dvt:thematicMap id="tm1" basemap="usa">
<dvt:areaLayer layer="states" id="al1">
<dvt:areaDataLayer id="dl1"
value="#{bindings.TmapStatesView1.collectionModel}"
var="row">
<dvt:areaLocation name="#{row.Name}" id="al2">
<dvt:area id="a1" fillColor="#ff0000">
<f:attribute name="legendLabel"
value="#{Bundle.US_STATES}"/>
</dvt:area>
</dvt:areaLocation>
</dvt:areaDataLayer>
</dvt:areaLayer>
</dvt:thematicMap>
データ・コレクション内のデータのカテゴリ・グループを使用してエリアをスタイル設定する場合は、「エリアの構成」ダイアログの「属性グループ」ページを使用します。サンプル・コードを含めた「属性グループ」ページの使用方法の詳細は、33.6.1項「ADFデータ・コントロールを使用してテーマ・マップを作成する方法」に記載のユースケースを参照してください。
テーマ・マップ・レイヤー内のすべてのマーカーについてデフォルトのスタンプを使用してマーカーを構成することも、子attributeGroupsタグを使用して、データ・セット内のカテゴリ・グループに基づいてスタイル属性タイプを自動的に生成することもできます。markerタグとattributeGroupsタグの両方で、同じスタイル属性が設定されている場合は、attributeGroupsスタイル・タイプが優先されます。
デフォルトでは、点データ・レイヤーを追加すると、構成可能なマーカー要素がレイヤー・ブラウザに追加されます。レイヤー・ブラウザを使用して、追加のエリアやマーカーを面データ・レイヤーに追加したり、マーカーを点データ・レイヤーに追加できます。レイヤー・ブラウザは、マップ・レイヤー、面データ・レイヤーと点データ・レイヤー、テーマ・マップに構成されたエリアやマーカーの論理的構造を反映します。
たとえば、図33-57に示すように、デフォルトのスタンプを使用すると、米国のベース・マップの州レイヤーに事前定義されているすべての市区町村を、赤丸を付けることにより識別できます。この例では、マーカーは点データ・レイヤー上でスタイル設定されています。面データ・レイヤー上でのマーカーのスタイル設定も同様です。
作業を始める前に、次のようにします。
テーマ・マップの属性やテーマ・マップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のテーマ・マップの構成に関する項を参照してください。
ページにすでにテーマ・マップが存在している必要があります。ない場合は、この章の指示に従ってテーマ・マップを作成します。詳細は、33.6.1項「ADFデータ・コントロールを使用してテーマ・マップを作成する方法」を参照してください。
デフォルトのスタンプを使用してマーカーをスタイル設定する手順は次のとおりです。
レイヤー・ブラウザで、構成しているマップ・レイヤー内部のポイント位置にあるマーカーを選択します。
「編集」アイコンを選択して「マーカーの構成」ダイアログを開きます。
「マーカーの構成」ダイアログの「デフォルト・スタンプ」ページで、次のように入力します。
「位置」: デフォルトでは、データ・レイヤーのマーカーに対応するデータの位置を決定する、データ・モデルの列を表す属性です。位置は、データが表示されるベース・マップのポイントのIDです。この読取り専用フィールドには、スタンプされたマーカーをベース・マップのポイントにマップするEL式が表示されます。詳細は、33.6.3項「基準となるマップの位置IDについて」を参照してください。
「色」: (オプション)ドロップダウン・リストからマーカーの塗りつぶし色を選択します。有効な値は、RGB16進数です。ドロップダウン・リストから「カスタム・カラー」を選択し、「カラー・ピッカー」ダイアログを開きます。
「パターン」: (オプション)ドロップダウン・リストから12個の事前作成されたパターンのいずれかを選択し、マーカーをスタイル設定します。たとえば、smallChecker、largeDiamond、smallDiagonalRight、largeCrosshatchなどがあります。塗りつぶし色が指定されている場合は、パターンはその色、背景色はデフォルトの白で表示されます。
「不透明度」: (オプション)マーカーの塗りつぶし色の不透明度を指定します。有効値の範囲は、0.0(透明)から1.0(不透明)です。
「図形」: (オプション)マーカーの形状を選択します。有効な値は、円(デフォルト)、四角、正符号、ひし形、上向き三角形、下向き三角形および人型です。
オプションで、「カスタム形状」フィールドを使用して、マーカーに使用するためにScalable Vector Graphics (SVG)ファイルに対してshapePath値を指定します。パスを入力するか、「検索」アイコンを使用して「SVGファイルの選択」ダイアログを開き、ファイルの場所にナビゲートします。このオプションは、「図形」フィールドでデフォルトの図形が選択されている場合にのみ使用できます。
形状は、CSSスタイル・プロパティを使用して指定することもできます。事前定義のマーカーの形状は上書きでき、カスタム・マーカー用のSVGファイルのパスは、shapePath属性を使用せずに定義できます。詳細は、33.6.7.3項「マーカーのスタイル設定について」を参照してください。
「サイズ」: (オプション)マーカーをデフォルトのサイズから拡大縮小するためのパーセンテージを、「スケールX」(水平方向)および「スケールY」(垂直方向)に入力します。パーセンテージが浮動小数に変換されます。たとえば、マーカーの幅を2倍にするには、「スケールX」を200に設定します。すると、タグに2.0と書き込まれます。また、高さを半分にするには、「スケールY」を50に設定します。すると、タグに0.5と書き込まれます。
「凡例に含める」: 凡例ラベルに使用するテキスト・リソースを入力します。テキスト・リソースは、リソース・バンドルからの翻訳可能な文字列または実行時に実行されるEL式のいずれかにできます。ドロップダウン・リストを使用して、「テキスト・リソースの選択」または「式ビルダー」ダイアログを選択します。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
|
注意: テキスト・リソース・オプションは、固定エリアでのみ使用可能です。行数が変動するエリアでは、EL式を使用して行数変動キーを取得し、リソース・バンドルでテキスト・リソースを検索します。たとえば、次のようになります。
#{viewController.ResourceBundle[row.label]}
|
「メッセージ」: マーカーの構成に関連付けられたメッセージを確認したり消去します。
図33-58に、「マーカーの構成」ダイアログの「デフォルト・スタンプ」ページを示します。
例33-30に、構成したマーカーのJSFページに挿入されるコードを示します。
例33-30 デフォルト・スタンプで構成したマーカーのサンプル・コード
<dvt:thematicMap id="tm1" basemap="usa">
<dvt:areaLayer layer="states" id="al1">
<dvt:pointDataLayer id="dl2"
value="#{bindings.TmapCitiesView1.collectionModel}"
var="row">
<<dvt:pointLocation type="pointName" pointName="#{row.City}" id="pl1">
<dvt:marker id="m2" fillColor="#ff0000">
<f:attribute name="legendLabel"
value="#{Bundle.US_CITIES}"/>
</dvt:marker>
</dvt:pointLocation>
</dvt:pointDataLayer>
</dvt:areaLayer>
</dvt:thematicMap>
データ・コレクション内のデータのカテゴリ・グループを使用してマーカーをスタイル設定する場合は、「マーカーの構成」ダイアログの「属性グループ」ページを使用します。マーカーは、点データ・レイヤーまたは面データ・レイヤーに対して構成できます。
データのカテゴリ・グループを使用してマーカーをスタイル設定する手順は次のとおりです。
レイヤー・ブラウザで、構成しているマップ・レイヤー内部のマーカー位置にあるマーカーを選択します。
「編集」アイコンを選択して「マーカーの構成」ダイアログを開きます。
「マーカーの構成」ダイアログの「属性グループ」ページで、次のように入力します。
「グループ化ルール」: この表を使用して、データ・コレクション内のデータのカテゴリ・グループのスタイルを指定します。「追加」アイコンを使用して、カテゴリ・グループのルールを構成する表に行を追加し、「削除」アイコンを使用して選択した行を表から削除します。各グループ化ルールはattributeGroupsコンポーネントとして表され、一意の連番ID(ag1、ag2など)が割り当てられます。
表に追加された行ごとに、次のように入力します。
「値でグループ化」: データ値のグループ化に使用するデータ・セットの列を表す属性を入力するか、ドロップダウン・リストを使用して選択します。
|
注意: 選択した属性は、カテゴリ化できる離散値で構成される必要があります。たとえば、40から45までの数値範囲は自動的にはグループ化されません。 |
「マーカー・プロパティ」: 該当のマーカーのスタイル設定に使用するプロパティをドロップダウン・リストを使用して選択します。マーカーは、色、パターン、不透明度、スケールX、スケールYまたはこれら有効値の任意の組合せを使用してスタイル設定できます。ダイアログのドロップダウン・リストから「複数の属性の選択」を選択し、値の組合せを指定します。
各プロパティに生成されるデフォルトのスタイル値は、ADFスキンのCSSスタイル・プロパティを使用して定義されます。各attributeGroupsタイプには、スキンで定義されたデフォルトのランプがあり、索引ベースのプロパティを目的の値に設定することによりカスタマイズできます。詳細は、33.6.7.4項「属性グループのデフォルトのスタイル値について」を参照してください。
「凡例ラベル」: テキストを入力するか、テーマ・マップの凡例のカテゴリ・グループに使用するテキストを表す属性をドロップダウン・リストを使用して選択します。ドロップダウン・リストから「式ビルダー」を選択し、EL式を作成して凡例テキストを指定することもできます。詳細は、33.6.8項「データバインドされた凡例の作成」を参照してください。
「値固有のルール>>」: クリックして、データ・セットのカテゴリ・グループに1つ以上のデータ値の詳細を指定する際に使用する「一致ルール」表および「例外ルール」表を開きます。
|
注意: これらの表で指定された一致ルールや例外ルールは、「グループ化ルール」表で定義された設定に優先します。 |
「一致ルール」: このオプションを使用して、データ・コレクション内のデータ・グループの1つ以上のデータ値に一致するスタイル・ルールを指定します。「追加」アイコンを使用して、カテゴリ・グループの一致ルールを構成する表に行を追加し、「削除」アイコンを使用して選択した行を表から削除します。各一致ルールはattributeMatchRuleコンポーネントとして表され、一意の連番ID(amr1、amr2など)が割り当てられます。プロパティとプロパティ値は、子f:attributeタグで定義されます。たとえば、次のように入力します。
<dvt:attributeMatchRule id="amrl" group="Mountain Dew"> <f:attribute name="color" value="#ffff00"/> </dvt:attributeMatchRule>
表に追加された行ごとに、次のように入力します。
「グループ値」: この一致ルールの実行をトリガーする「値でグループ化」属性の値を入力します。
「プロパティ」: 該当のデータ値のスタイル設定に使用するプロパティをドロップダウン・リストを使用して選択します。マーカーは、色、パターン、不透明度、スケールX、スケールYまたはこれら有効値の任意の組合せを使用してスタイル設定できます。ここで選択したプロパティは、「グループ化ルール」属性の「マーカー・プロパティ」に表示されるプロパティ・タイプのいずれかに一致する必要があります。
「プロパティ値」: 入力するかドロップダウン・リストを使用して、値をプロパティに割り当てます。一致オーバーライドにより指定された値が、グループ化ルールによって返された事前作成のランプ内にもある場合、その値はオーバーライドでのみ使用され、事前作成のランプではスキップされます。
色の有効な値は、RGB16進数色です。
パターンの有効値として、12個の事前作成されたパターン(smallChecker、largeDiamond、smallDiagonalRight、largeCrosshatchなど)から選択することもできます。塗りつぶし色が指定されている場合は、パターンはその色、背景色はデフォルトの白で表示されます。
不透明度の有効な値範囲は、0.0(透明)から1.0(不透明)です。
スケールXおよびスケールYの有効値はパーセンテージで、これはその後浮動小数に変換されます。
「例外ルール」: データ・セットのカテゴリ・グループのスタイル・ルールについて1つ以上の例外を指定します。「追加」アイコンを使用して、例外ルールを構成する表に行追加し、「削除」アイコンを使用して任意の行を表から削除します。各例外ルールはattributeExceptionRuleコンポーネントとして表され、一意の連番ID(aer1、aer2など)が割り当てられます。プロパティとプロパティ値は、子f:attributeタグで定義されます。たとえば、次のように入力します。
<dvt:attributeExceptionRule id="aer1" condition="#{row.name=='TX'}"
label="Texas">
<f:attribute name="color" value="#ff00ff"/>
</dvt:attributeExceptionRule>
表に追加された行ごとに、次のように入力します。
「条件」: EL式を入力するか、ドロップダウン・リストを使用して「式ビルダー」ダイアログを開き、EL式を作成します。この式は、特定の条件を満たす場合にスタイル・プロパティ値を別の値に置き換えます。たとえば、次のように入力します。
#{row.Sales gt 100000}
「プロパティ」: 該当のデータ値のスタイル設定に使用するプロパティをドロップダウン・リストを使用して選択します。マーカーは、色、パターン、不透明度、スケールXまたはスケールYを使用してスタイル設定できます。ここで選択したプロパティは、「グループ化ルール」属性の「マーカー・プロパティ」に表示されるプロパティ・タイプのいずれかに一致する必要があります。
「プロパティ値」: 入力するかドロップダウン・リストを使用して、値をプロパティに割り当てます。一致オーバーライドにより指定された値が、グループ化ルールによって返された事前作成のランプ内にもある場合、その値はオーバーライドでのみ使用され、事前作成のランプではスキップされます。
色の有効な値は、RGB16進数色です。
パターンの有効値として、12個の事前作成されたパターン(smallChecker、largeDiamond、smallDiagonalRight、largeCrosshatchなど)から選択することもできます。塗りつぶし色が指定されている場合は、パターンはその色、背景色はデフォルトの白で表示されます。
不透明度の有効な値範囲は、0.0(透明)から1.0(不透明)です。
スケールXおよびスケールYの有効値は、100から500までのパーセンテージです。このパーセンテージはその後、1.0から5.0までの浮動小数に変換されます。
「凡例ラベル」: 凡例ラベルに使用するテキスト・リソースを入力します。テキスト・リソースは、リソース・バンドルからの翻訳可能な文字列または実行時に実行されるEL式のいずれかにできます。ドロップダウン・リストを使用して、「テキスト・リソースの選択」または「式ビルダー」ダイアログを選択します。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
|
注意: テキスト・リソース・オプションは、固定エリアでのみ使用可能です。行数が変動するエリアでは、EL式を使用して行数変動キーを取得し、リソース・バンドルでテキスト・リソースを検索します。たとえば、次のようになります。
#{viewController.ResourceBundle[row.label]}
|
「メッセージ」: マーカーの構成に関連付けられたアラートを必要に応じて確認したり消去します。
たとえば、図33-59に示すように、面データ・レイヤーでマーカーを使用してデータのカテゴリ・グループを色で表示できます。
例33-31に、色別のマーカー属性グループのサンプル・コードを示します。
例33-31 色別のマーカー属性グループのサンプル・コード
<dvt:thematicMap basemap="usa" id="tm1"
<dvt:areaLayer layer="states" id="al1" labelDisplay="off">
<dvt:areaDataLayer id="dl1" var="row" value="#{stateData.colorModel}">
<dvt:areaLocation id="al2" name="#{row.name}">
<dvt:marker id="m1"
scaleX="3.0"
scaleY="3.0"
shape="circle">
<dvt:attributeGroups id="ag1" type="color" value="#{row.category}"
label="#{row.category}"/>
</dvt:marker>
</dvt:areaLocation>
</dvt:areaDataLayer>
</dvt:areaLayer>
<dvt:legend id="l1">
<f:facet name="separator"/>
<dvt:legendSection id="ls1" label="Category" source="ag1"/>
</dvt:legend>
</dvt:thematicMap>
マーカーに色、形状などの複数の属性を指定してデータのカテゴリ・グループを表示することもできます。また、特定の条件を満たした場合にグループ化ルールに例外を表示できます。図33-60に、色と形状を使用してカテゴリ・グループを表示したテーマ・マップ(例外のTexas州を含む)を示します。
例33-32に、例外ルールが設定された複数のマーカー属性グループのサンプル・コードを示します。
例33-32 例外ルールが設定された複数のマーカー属性グループのサンプル・コード
<dvt:thematicMap basemap="usa" id="tm2"
<dvt:areaLayer layer="states" id="al1" labelDisplay="off">
<dvt:areaDataLayer id="dl1" var="row" value="#{stateData.colorModel}">
<dvt:areaLocation id="al2" name="#{row.name}">
<dvt:marker id="m1"
scaleX="3.0"
scaleY="3.0"
shape="circle">
<dvt:attributeGroups id="ag1" type="shape color" value="#{row.category}"
label="#{row.category}">
<dvt:attributeExceptionRule id="aer1" condition="#{row.name=='TX'}"
label="Texas">
<f:attribute name="color" value="#ff00ff"/>
</dvt:exceptionRule>
</dvt:attributeGroups>
</dvt:marker>
</dvt:areaLocation>
</dvt:areaDataLayer>
</dvt:areaLayer>
<dvt:legend id="l1">
<f:facet name="separator"/>
<dvt:legendSection id="ls1" label="Category" source="ag1"/>
</dvt:legend>
</dvt:thematicMap>
テーマ・マップでは、事前定義された7つの形状セット(circle、squareなど)をサポートしており、これらはmarkerコンポーネントのshape属性を使用して指定できます。カスタム・マーカーの場合、shapePath属性を使用してSVGファイルのパスを指定すると、事前定義の形状のかわりに表示されます。
マーカーの形状は、ADFスキン内のCSSスタイル・プロパティを使用して指定することもできます。テーマ・マップ・スタイルのプロパティを使用すれば、事前定義のマーカーの形状は上書きでき、カスタム・マーカーのSVGファイルのパスは、shapePath属性を使用せずに定義できます。スタイル・プロパティを使用する場合、事前定義とカスタムの両方の形状の定義にmarkerコンポーネントのshape属性が使用されます。
その形状の汎用またはコンポーネント固有のスタイル・プロパティがADFスキンで指定されている場合、事前定義の形状は上書きされます。たとえば、テーマ・マップ・コンポーネントのスタイル・プロパティで次のようにnewCircle.svgファイルを指定することにより、事前定義のcircle形状を上書きできます。
af|dvt-thematicMap::shape-circle{
-tr-path: url(/resources/path/newCircle.svg);
}
JSFページでは、markerコンポーネントのshape属性は次のように設定されます。
<dvt:marker id="m1" shape="circle"/>
markerコンポーネントのshape属性でカスタム形状を指定するには、形状スタイル・プロパティ名でcustomの接頭辞を使用する必要があります。たとえば、カスタム形状がcustomNameという名前の場合、ADFスキン・ファイルで汎用の.AFDVTShapeCustomName:aliasスタイル・プロパティか、次のようにSVGファイルを指す-tr-pathプロパティを指定したテーマ・マップ固有のaf|dvt-thematicMap::shape-customNameのいずれかを定義する必要があります。
af|dvt-thematicMap::shape-customName{
-tr-path: url(/resource/path/newCShape.svg);
}
JSFページでは、マーカー・コンポーネントの形状属性は次のように設定されます。
<dvt:marker id="m1" shape="customName"/>
ADFスキンおよびスタイル・プロパティ使用の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「スタイルおよびスキンを使用した外観のカスタマイズ」の章を参照してください。
attributeGroupsコンポーネントは、データ・コレクション内のデータのカテゴリ・グループに基づいて色または形状などのスタイル・プロパティ値を生成するために使用します。データ・モデルでグループ化の基準となる列を表す属性に基づき、attributeGroupsコンポーネントにより、データ内の一意の値またはグループごとにスタイル値を生成できます。
値を生成するスタイル・プロパティのタイプは、attributeGroupsコンポーネントのtype属性で指定します。areaコンポーネントに対してサポートされているタイプは、color、patternおよびopacityです。markerコンポーネントに対してサポートされているタイプは、color、shape、pattern、opacity、scaleXおよびscaleYです。これらのタイプは、一意のデータ値ごとに複数のスタイル・プロパティを生成するために、スペース区切りのリストにまとめることができます。
生成されるデフォルトのスタイル値は、ADFスキンのCSSスタイル・プロパティを使用して定義されます。各attributeGroupsタイプには、ADFスキンで定義されたデフォルトのランプがあり、索引ベースのセレクタを目的の値に設定することによりカスタマイズできます。例33-33に、CSSスタイル・プロパティを使用するサンプル・コードを示します。そのコードでは、CSSスタイル・プロパティを使用して属性グループを指定します。
例33-33 CSSスタイル・プロパティを使用した属性グループ
af|dvt-attributeGroups::shape1{
-tr-shape: square;
}
af|dvt-attributeGroups::shape2{
-tr-shape: square;
}
...
af|dvt-attributeGroups::color1{
-tr-fill-color: #003366;
}
属性グループ・タイプごとのデフォルトのランプを表33-6に示します。
表33-6 テーマ・マップ属性グループのデフォルトのランプ
| タイプ | デフォルトのランプ |
|---|---|
|
|
j |
|
|
|
|
|
|
|
|
|
|
|
|
ADFスキンおよびスタイル・プロパティ使用の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「スタイルおよびスキンを使用した外観のカスタマイズ」の章を参照してください。
イメージを使用して、テーマ・マップに表示されるデータをスタイル設定できます。スタンプを使用すれば、データ・モデル内の各データ行をイメージにより識別できます。イメージは、面データ・レイヤーまたは点データ・レイヤーのどちらかに関連付けることができます。
たとえば、図33-61に示すように、面データ・レイヤーで家屋のイメージを使用して、米国ベース・マップの州マップ・レイヤー上で主要な位置を識別できます。
作業を始める前に、次のようにします。
テーマ・マップの属性やテーマ・マップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のテーマ・マップの構成に関する項を参照してください。
ページにすでにテーマ・マップが存在している必要があります。ない場合は、この章の指示に従ってテーマ・マップを作成します。詳細は、33.6.1項「ADFデータ・コントロールを使用してテーマ・マップを作成する方法」を参照してください。
イメージを使用してデータを表示する手順は次のとおりです。
レイヤー・ブラウザで、イメージを構成してデータを表示する面データ・レイヤーまたは点データ・レイヤーを選択します。
「構造」ウィンドウで、面または点データ・レイヤーの子であるareaLocationまたはpointLocationコンポーネントを右クリックし、「dvt:areaLocationの中に挿入」または「dvt:pointLocationの中に挿入」→「イメージ」を選択して「イメージの挿入」ダイアログを開きます。
「イメージの挿入」ダイアログで、次のように入力します。
「ソース」: イメージ・ソースの場所を指定するURIを入力します。ドロップダウン・メニューを使用して「編集」を選択し、「プロパティの編集: ソース」ダイアログまたは式ビルダーを開き、イメージ・ソースの場所を指定できます。
「短い説明」: スクリーン・リーダーのユーザー用のaltテキストとして使用される、イメージの短い説明を入力します。
例33-34に、イメージを使用してデータを表示するためのサンプル・コードを示します。
例33-34 イメージ構成のサンプル・コード
<dvt:thematicMap id="thematicMap" imageFormat="flash" basemap="usa"
summary="Thematic map showing the important real estate markets">
<dvt:legend label="Legend">
<dvt:legendSection source="areaLayer:dataLayer:img1"/>
</dvt:legend>
<dvt:areaLayer id="areaLayer" layer="states">
<dvt:areaDataLayer id="dataLayer" contentDelivery="immediate"
value="#{tmapBean.colorModel}"
var="row"varStatus="rowStatus">
<dvt:areaLocation id="dataLoc" name="#{row.name}">
<af:image id="img1" source="/resources/images/geoMap/mansion.gif"
rendered="#{row.category == 'category1'}"
shortDesc="House image">
<f:attribute name="legendLabel" value="Prime location"/>
</af:image>
</dvt:areaLocation>
</dvt:areaDataLayer>
</dvt:areaLayer>
</dvt:thematicMap>
スケーラブル・ベクター・グラフィック(SVG)が、テーマ・マップのマーカーのカスタム形状作成のためのファイル形式としてサポートされています。
カスタム形状によってサポートされていないSVG機能には次のものがあります。
SVGファイル内のイメージ・タグ。SVGのベクター形状を使用して、すべてを宣言する必要があります。
パターンによる塗りつぶし
ストロークのグラデーション
凡例には、シンボルとラベルのペア表記による、テーマ・マップのスタイル設定されたデータに関する説明表が付いています。テーマ・マップの凡例コンポーネント(legend)では、色、形状、カスタム形状、塗りつぶしパターン、不透明度、イメージおよびサイズのシンボルをサポートしています。1つ以上の子凡例アイテム・コンポーネント(legendSection)のソースは、テーマ・マップに表示するデータをスタイル設定するためにスタンプされる、テーマ・マップのarea、marker、attributeGroupsまたはaf:imageコンポーネントです。凡例セクションの構造では、コンテンツの順序付けと外観に対する制御をサポートしています。showLegendSectionコンポーネントを使用して、凡例アイテムを公開可能なセクションにまとめることができます。図33-62に、マップのエリアおよびマーカーの公開可能なセクションを設定した凡例を示します。
attributeGroupsコンポーネントからの凡例アイテムにより、エリアまたはマーカーの属性タイプを異なるセクションに自動的に分割できます。セパレータ・ファセットを指定して、凡例セクション間にセパレータを描画できます。図33-63に、色、形状、塗りつぶしパターン、不透明度およびサイズに関する属性グループを使用し、各セクション間にセパレータを描画した凡例を示します。
凡例は、Flash(デフォルト)およびPNGイメージ形式のどちらでも表示できます。この両形式では、双方向ロケールをサポートしています。PNG形式にレンダリングすると、たとえば、テーマ・マップを印刷する場合に凡例の公開可能なセクションはサポートされず、凡例アイテムが公開として表示されます。
「データ・コントロール」パネルとテーマ・マップ・バインディング・ダイアログを使用してテーマ・マップを作成すると、凡例のデータ・バインディングが作成されます。テーマ・マップのすべてのエリアについて、1つのエリアまたはマーカーをデフォルトのスタンプとして構成した場合は、静的テキスト・リソースを凡例の固定エリアまたはマーカーに割り当てることができます。
行数が変動するデータを表示するデフォルトのスタンプに対し、EL式を使用して凡例テキストおよびマネージドBean(オプション)を割り当て、行数変動キーを取得してリソース・バンドルでテキスト・リソースを検索できます。例33-35に、エリアとマーカーのスタンプの凡例エントリを生成するコード・サンプルを示します。このコードは、行数が変動するエリアおよびテキスト・リソースが割り当てられた固定マーカーの公開可能なセクションを示しています。
例33-35 エリアおよびマーカー・スタンプの凡例のサンプル・コード
<dvt:thematicMap id="tm1" basemap="usa" ...>
<dvt:legend label=“Legend“>
<dvt:showLegendGroupLabel label="Voting Majority">
<dvt:legendSection id="ls1" source="al1:adl1:areaStamp“/>
</dvt:showLegendGroupLabel>
<dvt:legendSection id="ls2" source="al1:adl1:fixedMarker">
</dvt:legend>
<dvt:areaLayer id="al1" layer="states">
<dvt:areaDataLayer id="adl1"...>
<dvt:areaLocation id="aloc1" ,,,>
<dvt:area id="areaStamp">
fillColor="#{row.value > 50 ? tmapLegendBean,color1 :
tmapLegendBean.color2}"
<f:attribute name="legendLabel" value="#{row.value > 50 ?
'Candidate 2' : 'Candidate 1'}" />
<dvt:marker id=“fixedMarker“ shape=“human” fillColor=“"#FF9900"
scaleX="3" scaleY="3">
<f:attribute name="legendLabel“
value="#{Bundle.Office_Locations}"/>
</dvt:marker>
</dvt:areaLocation>
</dvt:areaDataLayer>
</dvt:area>
</dvt:thematicMap>
エリアまたはマーカーを構成し、属性グループを使用してデータ・コレクション内のデータのカテゴリ・グループのスタイルを指定する場合は、EL式を使用して凡例テキストおよびマネージドBean(オプション)を割り当て、行数変動キーを取得してリソース・バンドルでテキスト・リソースを検索できます。
属性グループに一致ルールを指定した場合は、凡例テキストはgroup属性で指定されます。例外ルールを指定する場合は、アプリケーション・リソース・バンドルからのテキスト・リソースを指定できます。例33-36に、一致ルールと例外ルールの両方が組み込まれ、凡例セクション間にセパレータを指定した属性グループを使用する凡例のサンプル・コードを示します。
例33-36 属性グループを使用した凡例のサンプル・コード
<dvt:thematicMap id="tm1" basemap="usa" ...>
<dvt:legend id="l1" label="Legend">
<f:facet name="separator"
<af:separator/>
<dvt:legendSection id="ls1" source="al1:adl1:attributeGroupColor" />
<dvt:legendSection id="ls2" source="al1:adl1:attributeGroupShape" />
<dvt:legendSection id="ls3" source="al1:adl1:attributeGroupPattern" />
<dvt:legendSection id="ls4" source="al1:adl1:attributeGroupOpacity" />>
</dvt:legend>
<dvt:areaLayer id="al1" layer="states">
<dvt:areaDataLayer id="adl1" value=" " var=" " ...>
<dvt:areaLocation id="dataLoc" name="#{row.name}">
<dvt:marker id="m1"... >
<dvt:attributeGroups id="attributeGroupColor" type="color"
label="#{row.category1}" value="#{row.category1}" />
<dvt:attributeMatchRule id="amrl" group="Mountain Dew">
<f:attribute name="color" value="#ffff00"/>
</dvt:attributeMatchRule>
<dvt:attributeGroups id="attributeGroupShape" type="shape"
label="#{row.category2}" value="#{row.category2}" />
<dvt:attributeExceptionRule id="aer1" condition="#{row.name=='TX'}"
label="#{viewcontroller.Texas}">
<f:attribute name="shape" value="human"/>
</dvt:exceptionRule>
<dvt:attributeGroups id="attributeGroupShape" type="pattern"
label="#{row.category3}" ... />
<dvt:attributeGroups id="attributeGroupShape" type="opacity"
label="#{row.category4}" ... />
</dvt:marker>
</dvt:areaLocation>
</dvt:areaDataLayer>
</dvt:areaLayer>
</dvt:thematicMap>
テーマ・マップの凡例エリアまたはマーカーを、他のマップ・レイヤーと同様の方法でカスタム・リージョンで構成します。カスタム・マップ・レイヤーの凡例のサンプル・コードを示します。
例33-37 カスタム・マップ・レイヤーの凡例のサンプル・コード
<dvt:thematicMap>
<dvt:legend>
<dvt:legendSection label=“Sales Regions” source="customAreaStamp"/>
</dvt:legend>
...
<dvt:customAreaLayer id="crl1“>
...
</dvt:customAreaLayer>
<dvt:areaLayer layer="crl1">
<dvt:areaDataLayer var="row”>
<dvt:areaLocation name="#{row.name}" id="al1">
<dvt:area id=“customAreaStamp" fillColor="#{row.color}“>
<f:attribute name="legendLabel“ value=“#{row.name}"/>
</dvt:area>
</dvt:areaLocation>
</dvt:areaDataLayer>
</dvt:areaLayer>
</dvt:thematicMap
ADFスキンを使用して、テーマ・マップの凡例の外観をカスタマイズできます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
カスタム・マップ・レイヤーを固有のリージョン・データから定義し、テーマ・マップの自然の地理階層に挿入できます。カスタム・レイヤーは、事前定義のマップ・レイヤーを開き、下位レベルのリージョンを集約することで作成され、カスタム・レイヤー内に新規のリージョンが形成されます。定義したカスタム・マップ・レイヤーは、他のマップ・レイヤーと同じように使用されます。
たとえば、図33-64に示すように、米国リージョンのカスタム・マップ・レイヤーに米国北東部、中西部、西部および南部という地理的なリージョンを定義できます。この図では、米国リージョンのカスタム・レイヤーは米国のベース・マップの州レイヤーから拡張されています。レイヤー内の新しいエリアは、州レイヤーの州から集約されます。米国南部リージョンのラベルには、そのリージョンにある州が一覧で表示されます。米国中西部のリージョンは、下位レベルの郡リージョンの売上げカテゴリを表示するまでドリルダウンされています。ドリルの詳細は、33.6.5項「テーマ・マップにドリルを構成する方法」を参照してください。
customAreaLayerコンポーネントは、モデルを使用して、基になるリストのデータにアクセスします。固有のモデル・クラスはoracle.adf.view.rich.model.CollectionModelです。java.util.List、java.util.Arrayおよびjavax.faces.model.DataModelなど、その他のモデル・インスタンスも使用できます。customAreaLayerは、インスタンスをCollectionModelに自動的に変換します。
作業を始める前に、次のようにします。
テーマ・マップの属性やテーマ・マップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のテーマ・マップの構成に関する項を参照してください。
拡張対象の事前定義のベース・マップで集約したエリアを定義するADFデータ・コントロールまたはADFマネージドBeanは、すでに用意されています。
ページにすでにテーマ・マップが存在している必要があります。ない場合は、この章の指示に従ってテーマ・マップを作成します。詳細は、33.6.1項「ADFデータ・コントロールを使用してテーマ・マップを作成する方法」を参照してください。
カスタム・マップ・レイヤーを追加および構成する手順は次のとおりです。
ビジュアル・エディタでテーマ・マップを選択します。
レイヤー・ブラウザの「追加」アイコンのドロップダウン・リストでカスタム・レイヤーの追加を選択し、「カスタム・レイヤーの作成」ダイアログを開きます。ビジュアル・エディタでレイヤー・ブラウザが表示されない場合は、マップ内で右クリックして「レイヤー・ブラウザを開く」を選択します。
「カスタム・レイヤーの作成」ダイアログで、次のように入力します。
「データを今すぐバインド」: このオプションを選択して「参照」をクリックし、「ピッカー」ダイアログ→データ・コントロールの定義ページを表示します。カスタム・レイヤーやエリアのデータバインドに使用するADFデータ・コントロールで、データ・コレクションを選択します。
|
注意: または、「式ビルダー」ページを使用して、カスタム・レイヤーやエリアのバインドに使用するADFマネージドBeanを選択できます。残りの各フィールドに「式ビルダー」ダイアログを使用することもできます。 |
「レイヤーID」: customAreaLayerコンポーネントの一意のIDを入力します。たとえば、米国を集約リージョン(北西部、中西部、西部、南部)に分割する場合は、対応するID(NE、MW、WおよびS)を使用してこれらのリージョンを定義できます。
「拡張」: 検索アイコンを使用して、カスタム・レイヤーにエリアを集約する際に使用できる組込みマップ・レイヤーを表示します。カスタム・レイヤーによって拡張されるマップ・レイヤーを選択します。
「エリア・リスト」: ドロップダウン・リストを使用して、カスタム・マップ・レイヤーでのエリアの集約に使用する下位レベルのマップ・リージョンのリストを表すデータ・コレクション属性を選択します。値のカンマ区切りリストでは、「拡張」属性に定義されているマップ・レイヤーのリージョンを集約します。
「エリアID」: ドロップダウン・リストを使用して、カスタム・マップ・レイヤーでのエリアの集約に使用する下位レベルのマップ・リージョンの一意のIDを表すデータ・コレクション属性を選択します。デフォルトでは、一意のID(ca1、ca2など)は、customAreaコンポーネントで使用されます。
「エリア・ラベル」: ドロップダウン・リストを使用して、カスタム・マップ・レイヤーでのエリアの集約に使用する下位レベルのマップ・リージョンの名前を表すデータ・コレクション属性を選択します。実行時に、集約したリージョンのカンマ区切りリストがラベルに表示されます。
図33-65に、設定済の「カスタム・レイヤーの作成」ダイアログを示します。
図33-66に、カスタム・レイヤー定義後のレイヤー・ブラウザを示します。レイヤー構造では、カスタム・レイヤーcal1は、マップ・レイヤーal1で参照されます。ここで、面データ・レイヤーまたは点データ・レイヤーを追加してデータを表示します。詳細は、33.6.4項「テーマ・マップにデータ・レイヤーを追加する方法」を参照してください。
例33-38に、JSFページに挿入されるコードを示します。
例33-38 カスタム・マップ・レイヤーのコード
<dvt:thematicMap>
...
<dvt:areaLayer layer="states" id="al1"/>
<dvt:areaLayer layer="cal1" id="al3"/>
<dvt:customAreaLayer id="cal1"
value="#{bindings.TmapStatesView.collectionModel}"
var="row"
extendsLayer="states">
<dvt:customArea areaId="#{row.RowID}" areaList="#{row.RowID}"
label="#{row.RowID}" id="ca1"/>
</dvt:customAreaLayer>
...
</dvt:thematicMap>
カスタム・レイヤーを構成してマップ・レイヤー階層に追加すると、他のマップ・レイヤーと同様の方法でそのマップ・レイヤーを使用できるようになります。たとえば、図33-64に示すようにテーマ・マップを作成するには、次を実行する必要があります。
テーマ・マップでドリルをサポートするように構成します。詳細は、33.6.5項「テーマ・マップにドリルを構成する方法」を参照してください。
|
注意: テーマ・マップでドリルが有効な場合は、カスタム・レイヤーとカスタム・レイヤーの集約に使用するマップ・レイヤー間のドリルが可能です。その際、どちらのレイヤーもデータ表示を構成する必要はありません。 |
郡データ・ビューに面データ・レイヤーを追加し、構成します。詳細は、33.6.4項「テーマ・マップにデータ・レイヤーを追加する方法」を参照してください。
エリア・コンポーネントを追加してスタイル設定し、各マップ・レイヤーの関連するデータを表示します。詳細は、33.6.7項「データを表示するためのエリア、マーカーおよびイメージのスタイル設定」を参照してください。
テーマ・マップの凡例を構成します。詳細は、33.6.8項「データバインドされた凡例の作成」を参照してください。
例33-39に、テーマ・マップでカスタム・レイヤーを使用するためのサンプル・コードを示します。
例33-39 テーマ・マップでカスタム・レイヤーを使用するためのサンプル・コード
<dvt:thematicMap id="thematicMap" imageFormat="flash" basemap="usa" drilling="on"
maintainDrill="true"
controlPanelBehavior="initExpanded" summary="US Custom Regions">
<dvt:customAreaLayer id="crl1" value="#{tmapRegions.collectionModel}" var="row"
varStatus="rowStatus"
extendsLayer="states">
<dvt:customArea areaId="#{row.name}" label="#{row.name}"
areaList="#{row.regions}" id="ca1"/>
</dvt:customAreaLayer>
<dvt:areaLayer id="custom" layer="crl1">
<dvt:areaDataLayer contentDelivery="immediate"
value="#{tmapRegions.collectionModel}"
selectionMode="single"
var="row" varStatus="rowStatus" id="adl1">
<dvt:areaLocation name="#{row.name}" id="al1">
<dvt:area fillColor="#{row.color}" shortDesc="#{row.regions}"
id="a1" value="#{row.name}"/>
</dvt:areaLocation>
</dvt:areaDataLayer>
</dvt:areaLayer>
<dvt:areaLayer id="areaLayerS" layer="states"
<dvt:areaDataLayer id="dataLayerS" selectionMode="multiple"
contentDelivery="immediate"
value="#{tmapStates.collectionModel}" var="row"
varStatus="rowStatus">
<dvt:areaLocation id="areaLocS" name="#{row.name}">
<dvt:area id="area1S" fillColor="#{row.color}"></dvt:area>
</dvt:areaLocation>
</dvt:areaDataLayer>
</dvt:areaLayer>
<dvt:areaLayer id="areaLayer" layer="counties">
<dvt:areaDataLayer id="dataLayer" selectionMode="single"
contentDelivery="immediate"
value="#{tmapCounty.collectionModel}" var="row"
varStatus="rowStatus">
<dvt:areaLocation id="areaLoc" name="#{row.name}">
<dvt:area id="area1" fillColor="#{row.color}"
value="#{row.category}"></dvt:area>
</dvt:areaLocation>
</dvt:areaDataLayer>
</dvt:areaLayer>
<dvt:legend label="Sales Regions" id="l1">
<dvt:legendSection source="custom:adl1:a1" id="ls1"/>
<dvt:legendSection label="Counties" source="areaLayer:dataLayer:areaLoc"
id="ls3"/>
</dvt:legend>
</dvt:thematicMap>
ガント・チャートは、棒グラフの1種です(横軸が時間を表します)。このグラフは、プロジェクトの計画および追跡において、開始と終了が明確な時間枠内でタスクまたはリソースを示すために使用されます。
ガント・チャートを作成する場合は、次のタイプから選択できます。
プロジェクト
プロジェクト・ガント・チャートは、タスクを垂直に示し、各タスクの期間を水平な時間軸上に棒として示します。
リソースの使用率
リソース使用率ガント・チャートは、リソースの割当てが超過なのか未満なのかを図示します。リソースを垂直に示し、その割当てと容量(オプション)を水平な時間軸上に示します。
スケジューリング
このガント・チャートは手動のスケジュール表をベースにし、リソースを縦に表示し、対応するアクティビティを横方向の時間軸に表示します。リソースの例としては、要員、マシン、部屋などがあります。
データバインディングの完了後にガント・チャートをカスタマイズする方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「ADFガント・チャート・コンポーネントの使用」を参照してください。
プロジェクト・ガント・チャートでは、タスクの値を指定する必要があります。オプションで、分割タスク、サブタスク、再帰タスクおよびタスク間の依存性の値も指定できます(データ・コレクションにこの追加情報に対するアクセッサがある場合)。
プロジェクト・ガント・チャートは、全体的な開始時間および終了時間と、主および副時間軸の値に対するデフォルト値を使用して表示されます。プロジェクト・ガント・チャートでは、主時間軸はデフォルトで週に設定され、副時間軸は日に設定されます。
図33-67は、各タスクが入力される1つの注文となっているプロジェクト・ガント・チャートを示しています。分割線の左側のリスト・リージョンには、注文の担当者の名前が入力された列と、注文日および出荷日が入力された列が示されています。分割線の右側のグラフ・リージョンでは、各注文の注文日から出荷日までの水平な棒がガント・チャートで表示されています。
データ・コントロールを使用してプロジェクト・ガント・チャートを作成するには、プロジェクト・ガント・チャート・コンポーネントをデータ・コレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。
|
ヒント: プロジェクト・ガント・チャート・コンポーネントをコンポーネント・パレットからドラッグし、「プロジェクト・ガントの作成」ダイアログの入力を完了することでも、プロジェクト・ガント・チャートを作成できます。この方法では、コンポーネントをデータにバインドする前に、ガント・チャートのユーザー・インタフェースを設計できます。 |
データバインドされたプロジェクト・ガント・チャートを作成する手順:
「データ・コントロール」パネルから、データ・コレクションを選択します。ガント・チャートでは、行セット・コレクション(タスクのフラット・リストを生成)または基本的なツリー・コレクション(タスクの階層リストを生成)を選択できます。
図33-68に、「データ・コントロール」パネルでOrderShippingSummary1コレクションを選択し、注文の出荷の進行状況を表示するプロジェクト・ガント・チャートを作成する例を示します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「ガント」→「プロジェクト」を選択します。
次に表示される「プロジェクト・ガントの作成」ダイアログで、次のようにして、ダイアログの上部にあるページ内のタスク関連のコントロールを、データ・コレクション内の対応する列にリンクします。
ダイアログの上部にある「タスク」ページでは、「タスクID」、「開始時間」、「終了時間」の各コントロールに対応するデータ・コレクション内の列を選択します。ダイアログで「詳細の表示」をクリックして、データ・コレクションでコントロール「実際の開始」、「実際の終了」、「%完了」、「完了」、「クリティカル」、「コンテナ」に対応する列を追加で選択できます。
オプションで、タスク・タイプにマップするデータ・コレクション内の列を選択できます。タスク・タイプをデータ・コレクション内の列にバインドしない場合、すべてのタスクはデフォルトで標準になります。タスク・タイプは、ガント・チャートにレンダリングされる際のタスクの棒の外観を制御します。
プロジェクト・ガント・チャート・コンポーネントでは、サマリー、標準およびマイルストンのタスク・タイプがサポートされます。データ・コレクションは、これらのタスク・タイプを戻すように構成します。
データ・コレクションにサブタスクのアクセッサがある場合は、ダイアログの「サブタスク」ページを使用してサブタスク・アクセッサを選択し、「サブタスクID」、「開始時間」、「終了時間」の各コントロールに対応するデータ・コレクション内の列を選択できます。オプションで、サブタスク・タイプにマップするデータ・コレクション内の列を選択できます。サブタスク・タイプをデータにバインドしない場合、すべてのサブタスクはデフォルトで標準になります。
プロジェクト・ガント・チャート・コンポーネントでは、サマリー、標準およびマイルストンのタスク・タイプがサポートされます。データ・コレクションは、これらのタスク・タイプを戻すように構成します。
サブタスクをバインドしないと、ガント・チャートはタスクの階層ビューをレンダリングできません。サブタスクをバインドすると、ガント・チャートの階層ビューでタスクからサブタスクにドリルダウンできます。
データ・コレクションに依存タスクのアクセッサがある場合は、ダイアログの「依存タスク」ページを使用して依存タスク・アクセッサを選択し、「依存性のタイプ」、「元タスクID」、「先タスクID」の各コントロールに対応するデータ・コレクション内の列を選択できます。
依存タスクは、終了時間と開始時間の間の依存性によってリンクされます。
プロジェクト・ガント・チャート・コンポーネントでは、fs(終了から開始へ)、ss(開始から開始へ)、ff(終了から終了へ)およびsf(開始から終了へ)の依存性タイプがサポートされます。データ・コレクションは、これらの依存性タイプを戻すように構成します。
データ・コレクションに分割タスクのアクセッサがある場合は、ダイアログの「分割タスク」ページを使用して分割タスク・アクセッサを選択し、「分割タスクID」、「開始時間」、「終了時間」の各コントロールに対応するデータ・コレクション内の列を選択できます。
データ・コレクションに再帰タスクのアクセッサがある場合は、ダイアログの「再帰タスク」ページを使用して再帰タスク・アクセッサを選択し、「再帰タスクID」、「タイプ」、「開始時間」、「終了時間」の各コントロールに対応するデータ・コレクション内の列を選択できます。
このダイアログの「外観」ページを使用して、タスク・バーの「ラベル」に対応する属性と、タスク・バーに関連付けるアイコンを3個まで指定します。
「表の列」セクションでは、ガント・チャートのリスト・リージョンに表示される列を指定します。表示するそれぞれの列に対して、1行の情報を指定します。新規行を追加するには、「新規」アイコンを使用します。ガント・チャート・リストで列を表示する順序のとおりに行を配置するには、矢印アイコンを使用します。
|
注意: 「表の列」セクションで指定する最初の行により、リスト・リージョンのノード・スタンプ列が指定されます。ノード・スタンプ列は、サブタスク・コレクションがある場合に開閉できる列です。 |
各行について、次のアイテムを指定します。
ラベルの表示: ガント・チャート・リストの列のヘッダーの値を選択します。<default>を選択すると、ヘッダーのテキストはデータ・バインディングから自動的に取得されます。
値バインディング: ガント・チャート・リストの列に使用するデータ・コレクション内の列を選択します。選択できる値は、タスク・グループの場合と同じです。
使用するコンポーネント: ガント・チャート・リストのセルに表示するコンポーネントのタイプを選択します。デフォルトは、ADF出力テキスト・コンポーネントです。
「OK」をクリックします。
ガント・チャートに凡例を含めるには、構造ウィンドウでproject Gantt chartノードを右クリックし、「dvt:projectGanttの中に挿入」→「凡例」を選択します。
凡例には、それぞれの記号に関する情報と、各タスク・タイプを表すカラー・コード化された棒が示されます。また、ガント・チャートで選択されているタスクに関する詳細情報も示されます。
図33-69に、注文の出荷のデータ・コレクションからプロジェクト・ガント・ダイアログを作成する際に使用されるダイアログを示します。
データ・バインディング・ダイアログの完了後は、プロパティ・インスペクタを使用してプロジェクト・ガント・チャートの追加属性の値を指定できます。
プロジェクト・ガント・チャートを「データ・コントロール」パネルからドロップすると、次の処理が行われます。
ガント・チャートのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
UIコンポーネントに必要なコードをJSFページに追加します。
例33-40に、出荷された注文を表示するプロジェクト・ガント・チャートに生成された行セット・バインディングを示します。このコード例では、タスクおよびサブタスクについて、属性とともに定義されたノードがあることを示しています。また、依存タスク、分割タスクおよび再帰タスクについて、属性なしで定義されたノードがあります。
例33-40 プロジェクト・ガント・チャートのバインディング
<bindings>
<gantt IterBinding="OrderShippingSummary2Iterator" id="GanttProjectView1"
xmlns="http://xmlns.oracle.com/adfm/dvt">
<ganttDataMap>
<nodeDefinition DefName="oracle.fod.model.OrderShippingSummary"
type="Tasks">
<AttrNames>
<Item Value="TaskId" type="taskId"/>
<Item Value="StartDate" type="startTime"/>
<Item Value="EndDate" type="endTime"/>
<Item Value="TaskType" type="taskType"/>
</AttrNames>
</nodeDefinition>
<nodeDefinition type="subTasks">
<AttrNames/>
</nodeDefinition>
<nodeDefinition type="Dependents">
<AttrNames/>
</nodeDefinition>
<nodeDefinition type="SplitTasks">
<AttrNames/>
</nodeDefinition>
<nodeDefinition type="RecurringTasks">
<AttrNames/>
</nodeDefinition>
</ganttDataMap>
</gantt>
</bindings>
例33-41に、ADFプロジェクト・ガント・チャートに対してJSFページで生成されるコードを示します。このタグ・コードには、プロジェクト・ガント・チャートの全体的な開始および終了時間に対する設定が含まれています。また、主軸(週)および副軸(日)に対するデフォルトの時間軸の設定も示されています。さらに、ガント・チャートのリスト・リージョンに表示される各列に対する指定もリストされています。簡潔にするため、OrderStatusCodeおよびShippedDateのaf:column要素のコードは省略されています。
例33-41 プロジェクト・ガント・チャートのJSFページのコード
<dvt:projectGantt id="projectGantt1"
value="#{bindings.OrderShippingSummary2.projectGanttModel}"
var="row"
startTime="2011-04-15" endTime="2011-07-14">
<f:facet name="major">
<dvt:timeAxis scale="weeks" id="ta1"/>
</f:facet>
<f:facet name="minor">
<dvt:timeAxis scale="days" id="ta2"/>
</f:facet>
<f:facet name="nodeStamp">
<af:column
sortProperty="#{bindings.OrderShippingSummary2.hints.FirstName.name}"
sortable="false"
headerText="#{bindings.OrderShippingSummary2.hints.FirstName.label}"
id="c1">
<af:outputText value="#{row.FirstName}" id="ot1"/>
</af:column>
</f:facet>
<af:column sortProperty="LastName" sortable="false"
headerText="#{bindings.OrderShippingSummary2.hints.LastName.label}">
<af:outputText value="#{row.LastName}"/>
</af:column>
<af:column sortProperty="OrderDate" sortable="false"
headerText="#{bindings.OrderShippingSummary2.hints.OrderDate.label}">
<af:outputText value="#{row.OrderDate}">
<af:convertDateTime
pattern="#{bindings.OrderShippingSummary2.hints.OrderDate.format}"/>
</af:outputText>
</af:column>
<af:column sortProperty="ShippedDate" sortable="false"
headerText="#{bindings.OrderShippingSummary2.hints.ShippedDate.label}">
<af:outputText value="#{row.ShippedDate}">
<af:convertDateTime
pattern="#{bindings.OrderShippingSummary2.hints.ShippedDate.format}"/>
</af:outputText>
</af:column>
<af:column sortProperty="TaskType" sortable="false"
headerText="#{bindings.OrderShippingSummary2.hints.TaskType.label}">
<af:outputText value="#{row.TaskType}"/>
</af:column>
</projectGantt>
サマリー・タスクは、タスクのグループ(通常はサブタスク)に対する開始時間と終了時間を示します。サマリー・タスクの移動や拡張はできません。ただし、いずれかのサブタスクの日付が変更された場合は、アプリケーションでサマリー・タスクの時間を再計算する必要があります。
タスク期間の変更を検出するには、メソッド・バインディング式をガント・チャート・コンポーネントのDataChangeListener属性に指定してイベント・ハンドラを登録します。ガント・チャートのデータを変更する可能性のある処理が発生すると、タイプがoracle.adf.view.faces.bi.event.DataChangeEventのイベントが起動されます。このイベントには、データ変更に関する情報が含まれ、登録済のイベント・リスナーに対して起動されます。このリスナーにより、新しい値の検証および基礎となるデータ・モデルの更新が行われます。
更新が完了すると、ガント・チャートは古いデータ(更新が失敗した場合)または新しいデータでリフレッシュされます。ガント・チャートでは部分ページ・レンダリングを使用するため、ガント・チャートのみがリフレッシュされ、ページ全体はリフレッシュされません。
パーセント完了は、タスクの完了率を示す内部の棒として表すことができます。内部の棒の長さは、データ・オブジェクトによって返されるパーセント完了に基づいて計算されます。
プロジェクト・ガント・チャートのデータ・バインディング・ダイアログには、パーセント完了値を入力できるコントロールはありませんが、パーセント完了のレンダリングにはこの値が必要です。ただし、ガント・チャート・データ・オブジェクトにはpercentComplete属性が含まれています。
パーセント完了の整数を指定するには、タイプがTasksであるnodeDefinitionに新しい属性マッピングを追加する必要があります。たとえば、データ・コレクションにPercentDoneという名前の列がある場合、属性マッピングは<Item Value="PercentDone" type="percentComplete"/>のようになります。
例33-42に、例33-40で示したプロジェクト・ガント・チャート・バインディングのうち、タイプがTasksのnodeDefinitionのデータ・バインディング・コードに追加されたパーセント完了の属性マッピングを示します。
例33-42 パーセント完了を使用したプロジェクト・ガント・チャートのバインディング
<bindings>
<nodeDefinition DefName="oracle.fod.model.OrderShippingSummary"
type="Tasks">
<AttrNames>
<Item Value="PersonId" type="taskId"/>
<Item Value="OrderDate" type="startTime"/>
<Item Value="TaskType" type="taskType"/>
<Item Value="ShippedDate" type="endTime"/>
<Item Value="PercentDone" type="percentComplete"/>
</AttrNames>
</nodeDefinition>
</bindings>
パーセントではなく日付を指定できるようにする別の属性(completedThrough)があります。ガント・チャート・データ・オブジェクトは、completedThrough属性が参照する日付に基づいてパーセント完了を計算します。たとえば、データ・コレクションにPercentDoneという名前の列がある場合、属性マッピングは<Item Value="PercentDone" type="completedThrough"/>のようになります。
分散は、2つの水平な棒でレンダリングされます。一方の棒は、タスクの基本の(元の)開始および終了時間を表します。他方の棒は、タスクの実際の開始および終了時間を表します。プロジェクト・ガント・チャートのデータ・バインディング・ダイアログで、基本の開始時間と終了時間に対するバインディング情報を入力します。
ガント・チャートのデータ・バインディング・ダイアログには、ガント・チャートの実際の開始時間と終了時間を入力できるコントロールはありませんが、分散のレンダリングにはこの値が必要です。ただし、ガント・チャート・データ・オブジェクトにはactualStartおよびactualEnd属性が含まれています。
実際の開始および終了時間を指定するには、2つの新しい属性マッピングをタイプがTasksのnodeDefinitionに追加する必要があります。たとえば、データ・コレクションにActualStartDateおよびActualEndDateという名前の列がある場合、属性マッピングは例33-43のようになります。
例33-43 実際の開始および終了の属性マッピング
<Item Value="ActualStartDate" type="actualStart"/> <Item Value="ActualEndDate" type="actualEnd"/>
例33-44に、プロジェクト・ガント・チャートのタイプがTasksのnodeDefinitionのデータ・バインディング・コードに追加された実際の開始および終了の属性マッピングを示します。
例33-44 実際の開始および終了を使用したプロジェクト・ガント・チャートのバインディング
<nodeDefinition DefName="oracle.fod.model.OrderShippingSummary"
type="Tasks">
<AttrNames>
<Item Value="PersonId" type="taskId"/>
<Item Value="OrderDate" type="startTime"/>
<Item Value="TaskType" type="taskType"/>
<Item Value="ShippedDate" type="endTime"/>
<Item Value="ActualStartDate" type="actualStart"/>
<Item Value="ActualEndDate" type="actualEnd"/>
</AttrNames>
</nodeDefinition>
リソース使用率ガント・チャートでは、リソースのID、時間のID、リソース使用率の開始および終了時間を指定する必要があります。オプションで、サブリソースのデータ値を指定できます。
リソース使用率ガント・チャートは、主および副時間軸の値に対するデフォルト値を使用して表示されます。リソース使用率ガント・チャートでは、主時間軸はデフォルトで週に設定され、副時間軸は日に設定されます。
図33-70は、各リソースと、リソースの使用中に表示できる関連付けられたカレンダを示すリソース使用率ガント・チャートを示しています。
データ・コントロールを使用してリソース使用率ガント・チャートを作成するには、リソース使用率コンポーネントをデータ・コレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグしてJSFページにドロップし、宣言的にこの処理を実行できます。
|
ヒント: リソース使用率ガント・チャート・コンポーネントをコンポーネント・パレットからドラッグし、「リソース使用率ガントの作成」ダイアログの入力を完了することでも、リソース使用率ガント・チャートを作成できます。この方法では、コンポーネントをデータにバインドする前に、ガント・チャートのユーザー・インタフェースを設計できます。 |
リソース使用率ガント・チャートを作成する手順:
「データ・コントロール」パネルから、データ・コレクションを選択します。ガント・チャートでは、行セット・コレクションまたは基本的なツリー・コレクションを選択できます。
図33-71に、「データ・コントロール」パネルでGanttRugResourcesView1コレクションを選択し、リソースの使用率を表示するリソース使用率ガント・チャートを作成する例を示します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「ガント」→「リソース使用率」を選択します。
「リソース使用率ガントの作成」ダイアログで、リソースおよび時間関連のコントロールを、データ・コレクション内の対応する列にリンクします。
「リソースID」では、リソースの一意のIDに対応するデータ・コレクション内の列を選択します。
「時間バケット」ページでは、リソースに割り当てられた時間バケットを含む「バケット・アクセッサ」ドロップダウン・リストから値を選択し、時間の単位に対応する「バケット日」ドロップダウン・リストから値を選択します。
「バケット・メトリック」リストでは、必要に応じて、時間バケット内のバーとして表示される属性を指定することができます。「バケット・メトリック」リストで指定した属性はバーの高さの計算に使用されるため、個々の属性は数値タイプでなければなりません。
「表の列」リストでは、分割線の左側のリソース使用率ガント・チャートのリスト・リージョンに表示される列を指定します。表示するそれぞれの列に対して、1行の情報を指定します。新規行を追加するには、「新規」アイコンを使用します。リソース使用率リストで列を表示する順序のとおりに行を配置するには、矢印アイコンを使用します。各行に、ラベルの表示、値バインディングおよび使用するコンポーネントの値を指定します。
データ・コレクションにサブリソースのアクセッサがある場合は、「サブリソース」ページを使用してサブリソース・アクセッサおよびリソースIDを選択できます。
「OK」をクリックします。
図33-72に、プロジェクトで使用可能なリソースのデータ・コレクションからリソース使用率ガント・チャートを作成するために使用するダイアログを示します。
リソース使用率ガント・チャートを「データ・コントロール」パネルからJSFページにドロップすると、次の処理が行われます。
リソース使用率ガント・チャートのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
UIコンポーネントに必要なコードをJSFページに追加します。
例33-45に、図33-72に示すリソース使用率ガント・チャートに生成された行セット・バインディングを示します。
例33-45 リソース使用率ガント・チャートのバインディングXML
<gantt IterBinding="GanttRugResourcesView2Iterator"
id="GanttRugResourcesView2"
xmlns="http://xmlns.oracle.com/adfm/dvt">
<ganttDataMap>
<nodeDefinition DefName="model.GanttRugResourcesView" type="Resources">
<AttrNames>
<Item Value="ResourceId" type="resourceId"/>
</AttrNames>
<Accessors>
<Item Value="GanttRugTimebucketsView2" type="timeBuckets"/>
</Accessors>
</nodeDefinition>
<nodeDefinition type="TimeBuckets"
DefName="model.GanttRugTimebucketsView">
<AttrNames>
<Item Value="TimeDaily" type="time"/>
<Item type="metric" Value="Available"/>
<Item type="metric" Value="Setup"/>
<Item type="metric" Value="Used"/>
</AttrNames>
</nodeDefinition>
<nodeDefinition type="Subresources">
<AttrNames/>
</nodeDefinition>
</ganttDataMap>
</gantt>
例33-46に、リソース使用率ガント・チャートに対してJSFページで生成されるコードを示します。このタグ・コードには、リソース使用率ガント・チャートの全体的な開始および終了時間に対する設定が含まれています。これらの設定は手動で編集する必要があります。また、主時間軸(週)および副時間軸(日)に対する時間軸の設定も示されています。さらに、リソース使用率ガント・チャートのリスト・リージョンに表示される各列に対する指定もリストされています。
例33-46 リソース使用率ガント・チャートのJSFページのコード
<dvt:resourceUtilizationGantt id="resourceUtilizationGantt1"
value="#{bindings.GanttRugResourcesView2.
resourceUtilizationGanttModel}"
var="row"
metrics="#{bindings.GanttRugResourcesView2.metrics}"
taskbarFormatManager="#{bindings.
GanttRugResourcesView2.
resourceUtilizationGanttTaskbarFormatManager}"
startTime="2011-02-03"
endTime="2011-02-29">
<f:facet name="major">
<dvt:timeAxis scale="weeks"/>
</f:facet>
<f:facet name="minor">
<dvt:timeAxis scale="days"/>
</f:facet>
<f:facet name="nodeStamp">
<af:column sortProperty="ResourceId" sortable="false"
headerText="#{bindings.GanttRugResourcesView2.hints.ResourceId.label}">
<af:outputText value="#{row.ResourceId}"/>
</af:column>
</f:facet>
<af:column sortProperty="ResourceName" sortable="false"
headerText="#{bindings.GanttRugResourcesView2.hints.ResourceName.label}">
<af:outputText value="#{row.ResourceName}"/>
</af:column>
<af:column sortProperty="ServiceRegion" sortable="false"
headerText="#{bindings.GanttRugResourcesView2.hints.ServiceRegion.label}">
<af:outputText value="#{row.ServiceRegion}"/>
</af:column>
</dvt:resourceUtilizationGantt>
スケジュール・ガント・チャートでは、リソースのID、タスクのID、タスクの開始および終了時間を指定する必要があります。オプションで、サブリソース、再帰タスク、分割タスクおよびタスク間の依存性のデータ値を指定できます。
スケジュール・ガント・チャートは、全体的な開始および終了時間と、主および副時間軸の値に対するデフォルト値を使用して表示されます。スケジュール・ガント・チャートでは、主時間軸はデフォルトで週に設定され、副時間軸は日に設定されます。
図33-73は、各リソースと、そのリソースが担当するすべての注文をリストするスケジュール・ガント・チャートを示しています。プロジェクト・ガント・チャートでは各タスクが個別の線上にリストされますが、スケジュール・ガント・チャートでは特定のリソースのすべてのタスクが同じ線上に表示されます。
データ・コントロールを使用してスケジュール・ガント・チャートを作成するには、schedulingGanttタグをデータ・コレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。
データバインドされたスケジュール・ガント・チャートを作成する手順:
「データ・コントロール」パネルから、データ・コレクションを選択します。ガント・チャートでは、行セット・コレクションまたは基本的なツリー・コレクションを選択できます。
図33-74に、Personsデータ・コレクションを選択し、各リソースが担当する注文を表示するスケジュール・ガント・チャートを作成する例を示します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「ガント」→「スケジュール」を選択します。
次に表示される「スケジュール・ガントの作成」ダイアログで、次のようにして、ダイアログの上部にあるリソースおよびタスク関連のコントロールを、データ・コレクション内の対応する列にリンクします。
「リソースID」では、リソースの一意のIDに対応するデータ・コレクション内の列を選択します。
「タスク」ページでは、リソースに割り当てられたタスクを含む「タスク・アクセッサ」ドロップダウン・リストから値を選択します。「タスクID」、「開始時間」および「終了時間」の各コントロールに対応するデータ・コレクション内の列を選択します。オプションで、タスク・タイプにマップするデータ列を指定できます。タスク・タイプをデータにバインドしない場合、すべてのタスク・タイプはデフォルトで標準になります。
データ・コレクションに依存タスクを保持するアクセッサがある場合は、ダイアログの「依存タスク」ページを使用して依存タスク・アクセッサを選択し、「依存性のタイプ」、「元タスクID」、「先タスクID」の各コントロールに対応するデータ・コレクション内の列を選択できます。
データ・コレクションに分割タスクのアクセッサがある場合は、ダイアログの「分割タスク」ページを使用して分割タスク・アクセッサを選択し、「分割タスクID」、「開始時間」、「終了時間」の各コントロールに対応するデータ・コレクション内の列を選択できます。
データ・コレクションに再帰タスクのアクセッサがある場合は、ダイアログの「再帰タスク」ページを使用して再帰タスク・アクセッサを選択し、「再帰タスクID」、「タイプ」、「開始時間」、「終了時間」の各コントロールに対応するデータ・コレクション内の列を選択できます。
データ・コレクションにサブリソース(下位レベルのリソース)のアクセッサがある場合は、「サブリソース」ページを使用して適切なアクセッサを指定し、サブリソースの一意のIDを含むデータ列を選択できます。
たとえば、管理者がリソースで、管理者の直属の部下がサブリソースになる場合があります。データにサブリソースが含まれる場合は、リソースを開いてサブリソースを検索することができます。
「表の列」セクションでは、分割線の左側のガント・チャートのリスト・リージョンに表示される列を指定します。表示するそれぞれの列に対して、1行の情報を指定します。新規行を追加するには、「新規」アイコンを使用します。ガント・チャート・リストで列を表示する順序のとおりに行を配置するには、矢印アイコンを使用します。各行について、次のアイテムを指定します。
ラベルの表示: ガント・チャート・リストの列のヘッダーの値を選択します。<default>を選択すると、ヘッダーのテキストはデータ・バインディングから自動的に取得されます。
値バインディング: ガント・チャート・リストの列に使用するデータ・コレクション内の列を選択します。選択できる値は、タスク・グループの場合と同じです。
使用するコンポーネント: ガント・チャート・リストのセルに表示するコンポーネントのタイプを選択します。デフォルトは、「ADF出力テキスト」コンポーネントです。
「OK」をクリックして、「スケジュール・ガントの作成」ダイアログを閉じます。
JSFページの構造ウィンドウでdvt:schedulingGantt要素を選択し、プロパティ・インスペクタでdvt:schedulingGantt要素の次の属性に対して日付を設定します。
StartTime
EndTime
指定した日付により、実行時にスケジュール・ガント・チャートに表示される初期ビューが決定されます。
図33-75に、注文の出荷を担当するリソースのデータ・コレクションからスケジュール・ガント・チャートを作成する際に使用されるダイアログを示します。
スケジュール・ガント・チャートを「データ・コントロール」パネルからドロップすると、次の処理が行われます。
ガント・チャートのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
UIコンポーネントに必要なコードをJSFページに追加します。
例33-47に、リソースおよび出荷された注文を表示するスケジュール・ガント・チャートに生成された行セット・バインディングを示します。
例33-47 スケジュール・ガント・チャートのバインディングXML
<gantt IterBinding="PersonsIterator" id="Persons"
xmlns="http://xmlns.oracle.com/adfm/dvt">
<ganttDataMap>
<nodeDefinition DefName="oracle.fodemo.storefront.store.queries.PersonsVO"
type="Resources">
<AttrNames>
<Item Value="PersonId" type="resourceId"/>
</AttrNames>
<Accessors>
<Item Value="OrdersVO" type="tasks"/>
</Accessors>
</nodeDefinition>
<nodeDefinition type="Tasks"
DefName="oracle.fodemo.storefront.store.queries.OrdersVO">
<AttrNames>
<Item Value="OrderId" type="taskId"/>
<Item Value="OrderDate" type="startTime"/>
<Item Value="OrderStatusCode" type="taskType"/>
<Item Value="OrderShippedDate" type="endTime"/>
</AttrNames>
</nodeDefinition>
<nodeDefinition type="Dependents">
<AttrNames/>
</nodeDefinition>
<nodeDefinition type="SplitTasks">
<AttrNames/>
</nodeDefinition>
<nodeDefinition type="RecurringTasks">
<AttrNames/>
</nodeDefinition>
<nodeDefinition type="Subresources">
<AttrNames/>
</nodeDefinition>
</ganttDataMap
</gantt>
例33-48に、スケジュール・ガント・チャートに対してJSFページで生成されるコードを示します。このタグ・コードには、スケジュール・ガント・チャートの全体的な開始および終了時間に対する設定が含まれています。また、主時間軸(月)および副時間軸(週)に対する時間軸の設定も示されています。さらに、ガント・チャートのリスト・リージョンに表示される各列に対する指定もリストされています。簡潔にするため、MembershipId、EmailおよびPhoneNumberのaf:column要素のコードは省略されています。
例33-48 スケジュール・ガント・チャートのJSFページのコード
<dvt:schedulingGantt id="schedulingGantt1"
value="#{bindings.Persons.schedulingGanttModel}"
var="row" startTime="2011-03-29"
endTime="2011-05-30"
taskbarFormatManager="#{GanttBean.taskbarFormatManager}">
<f:facet name="major">
<dvt:timeAxis scale="months"/>
</f:facet>
<f:facet name="minor">
<dvt:timeAxis scale="weeks"/>
</f:facet>
<f:facet name="nodeStamp">
<af:column sortProperty="FirstName" sortable="false"
headerText="#{bindings.Persons.hints.FirstName.label}">
<af:outputText value="#{row.FirstName}"/>
</af:column>
</f:facet>
<af:column sortProperty="LastName" sortable="false"
headerText="#{bindings.Persons.hints.LastName.label}">
<af:outputText value="#{row.LastName}"/>
</af:column>
...
<dvt:ganttLegend/>
</dvt:schedulingGantt>
階層ビューアは、データ内に親子関係の存在するデータを視覚的に表現するADFデータ視覚化コンポーネントです。組織図、ネットワーク・ダイアグラム、ソーシャル・ネットワークや類似の視覚的表現を表示する場合には、このコンポーネントが有益です。
階層ビューアでは、ノードと呼ばれる形状を使用して、階層内のデータを参照します。ノードの形状とコンテンツは、ノードの視覚的レイアウトと同様に構成可能です。ノードは、1つのパネル・カード内に複数のビューを表示できます。
図33-76に、組織図をレンダリングする階層ビューア・コンポーネントの実行時ビューを示します。
作成する階層ビューア・コンポーネント(dvt:hierarchyViewer)はそれぞれ次の要素を持つことができます。
1つ以上のノード要素(dvt:node)
1つ以上のリンク要素(dvt:link)
階層ビューア・コンポーネントとともに、必要に応じて、カード要素(dvt:panelCard)を使用することもできます。パネル・カードは、アニメーションを使用して、ノード要素により参照される複数のコンテンツ・セットを動的に切り替える方法を提供します。たとえば、コンテンツを水平方向にスライドさせたり、ノードをめくったりすることができます。
階層ビューアのエンド・ユーザー機能とプレゼンテーション機能、ユースケース、タグ構造、階層ビューアへの特殊機能の追加の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「階層ビューア・コンポーネントの使用方法」を参照してください。
階層ビューアは、1つ以上のディテール・コレクションと1つのマスター・データ・コレクションとの間にマスター/ディテール関係が存在するデータ・コレクションに基づいています。Oracle ADFのデータ・コントロールを使用すると、Jdeveloperでは宣言的なタスクとなります。「データ・コントロール」パネルから、1つ以上のルート・ノードを生成するデータ・コレクションをドラッグして、JSFページにドロップします。
作業を始める前に、次のようにします。
階層ビューアの属性や階層ビューアの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の階層ビューア・コンポーネントの構成に関する項を参照してください。
階層ビューアに表示するデータを表すADFデータ・コントロールまたはADFマネージドBeanはすでに用意されています。
「データ・コントロール」パネルを使用して階層ビューアを作成する手順は次のとおりです。
「データ・コントロール」パネルから、コレクションを選択します。
図33-77に、「データ・コントロール」パネルでHvtestView1コレクションを選択し、組織図の従業員データを表す階層ビューアを作成する例を示します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「階層ビューア」を選択します。
「コンポーネント・ギャラリ」で、作成する階層ビューアのレイアウトを選択します。図33-78に、上から下の垂直方向レイアウトが選択されたコンポーネント・ギャラリを示します。
「階層ビューアの作成」ダイアログで、次のように入力します。
「階層」: 実行時のダイアグラムにノードとして含めるコレクションを選択します。デフォルトでは、ルート・コレクションが選択されます。
「ノード」: 「階層」リストで選択したコレクションごとに、利用可能なズーム・レベルを1つ以上使用して、タイトル・エリアで属性を、各パネル・カードでタイトルと属性を構成します。デフォルトでは、ズーム・レベルが100%のノードは次のアルゴリズムに準拠します。
データ・コレクションの最初の3つの属性をタイトル・エリアに割り当てます。
次の2つの属性を最初のパネル・カードに割り当てます。
その次の2つの属性を2番目のパネル・カードに割り当て、さらに同様にしてすべての属性をパネル・カードに割り当てます。
「新規」アイコンをクリックし、ノードの選択に応じて、新しいパネル・カード、属性またはイメージをノードに追加します。既存の要素を選択したら、矢印アイコン(上へ、下へ、一番上、一番下)を使用して要素を並べ替えるか、「削除」アイコンを使用して選択した要素を削除します。
パネル・カード、属性またはイメージを選択し、該当の要素について次のオプションを1つ以上構成します。
「テキスト」: パネル・カード要素に使用可能です。タイトル・エリア要素には使用できません。階層のパネル・カード・タイトルにテキストを入力するか、ドロップダウン・リストから「テキスト・リソースの選択」を選択して、該当のタイトルに使用するテキスト・リソースを選択または追加します。テキスト・リソースは、アプリケーション・リソース・バンドルからの翻訳可能な文字列です。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
「属性」: 属性要素とイメージ要素に使用可能です。ドロップダウン・リストから、階層ビューアのノードに表示する値を表すデータ・コレクションの属性を選択します。
「ラベル」: 属性に使用可能です。タイトル・エリアに割り当てられているデフォルトの属性には使用できません。ドロップダウン・リストから、階層ビューアのノードで該当の要素に表示するラベルを表すデータ・コレクションの属性を選択します。デフォルトの「属性名の使用」を選択し、基礎となるViewObjectに属する該当の属性のUIヒントから取得したラベルを使用して文字列として値をレンダリングできますし、「ラベルなし」を選択し属性のラベルをレンダリングしなかったり、「テキスト・リソースの選択」を選択し、「テキスト・リソースの選択」ダイアログを開いてラベルに使用するテキスト・リソースを選択または追加できます。テキスト・リソースは、アプリケーション・リソース・バンドルからの翻訳可能な文字列です。
「コンポーネント」: 属性に使用可能です。ノードにデータを表示するために使用するコンポーネントのタイプを選択します。有効な値は、「ラベル付ADF出力テキスト」、「ADF出力テキスト」、「ラベル付ADF出力フォーマット済」およびADF出力フォーマット済テキストです。これらのコンポーネントの使用方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「出力コンポーネントの使用方法」を参照してください。
ズーム・レベルが75%、50%および25%のページを使用して、各ページ・レベルでの階層の展開表示を指定します。「ズーム・レベルの追加」を選択してページ・レベルを有効にします。デフォルトでは、ノード属性とパネル・カードをノードに割り当てるアルゴリズムは、100%のズーム・レベルの場合と同様です。
|
注意: 階層ビューア・コンポーネントは4種類のズーム・レベルを定義します。これらのズーム・レベルを変更したり、新しいズーム・レベルを作成したりすることはできません。デフォルトのズーム・レベルは100%です。 |
「サンプル」: 階層ビューア・ノードのサンプル・アウトラインの構成不能な表示です。タイトル・エリアなどのエリアや属性は、ノード・エリアで選択されている場合にはサンプルで強調表示されます。
「OK」をクリックします。
図33-79は、HvtestView1という名前のデータ・コレクションのデータを使用して階層ビューアを作成したときに表示される「階層ビューアの作成」ダイアログです。
「階層ビューアの作成」ダイアログを設定したら、プロパティ・インスペクタを使用して階層ビューア属性を設定します。また、階層ビューア・タグに関連付けられた子タグを使用して、さらに階層ビューアをカスタマイズすることもできます。
階層ビューアをビジュアル・エディタで編集する場合は、その表示は実行時の表示と機能とほぼ同じになります。パネル・カード間を移動し、パネル・カードやタイトル・エリア内でスタンプされた要素を使用することにより、属性を並べ替えたり、「データ・コントロール」パネルからインポートされた新たな属性をバインドできます。
階層ビューアを「データ・コントロール」パネルから作成すると、次の処理が行われます。
JSFページのページ定義ファイルで階層ビューアのバインディングを作成
階層ビューア・コンポーネントのJSFページに必要なタグを追加
例33-49は、階層ビューア・コンポーネントについてJDeveloperにより生成されたバインディングを表示します。マスター/ディテール・ツリーのノードにデータを移入するためのルールは、ノード定義として定義されます。次の例では、2つのノード定義が生成されます。これらのノード定義はそれぞれ、ビュー・オブジェクト1つとそれに関連する属性を参照しています。また、このコード例はアクセッサ(HvtestView)も参照しています。
例33-49 階層ビューアのバインディング
<tree IterBinding="HvtestView1Iterator" id="HvtestView1">
<nodeDefinition DefName="model.HvtestView"> Name="HvtestView10">
<AttrNames>
<Item Value="Adress"/>
<Item Value="Email"/>
<Item Value="Lastname"/>
<Item Value="Thumburl"/>
<Item Value="Firstname"/>
<Item Value="Title"/>
<Item Value="Managerid"/>
<Item Value="Id"/>
<Item Value="Phone"/>
<Item Value="City"/>
<Item Value="State"/>
</AttrNames>
<Accessors>
<Item Value="HvtestView"/>
</Accessors>
</nodeDefinition>
<nodeDefinition DefName="model.HvtestView">
<AttrNames>
<ittem Value="Adress"/>
<Item Value="Email"/>
<Item Value="Lastname"/>
<Item Value="Thumburl"/>
<Item Value="Firstname"/>
<Item Value="Title"/>
<Item Value="Managerid"/>
<Item Value="Id"/>
<Item Value="Phone"/>
<Item Value="City"/>
<Item Value="State"/>
</AttrNames>
<Accessors>
<Item Value="ManageridHvtestView"/>
</Accessors>
</nodeDefinition>
</tree>
例33-50は、例33-49のページ定義ファイルに関連付けられているJSFページで生成されるコードを示しています。簡潔にするため、ファセット要素zoom75、zoom50およびzoom25のコードは省略されています。<af:panelGroupLayout>、<af:spacer/>、<af:separator/>などの要素からのコードの一部も省略されています。
この例は、HvtestView1ツリー・バインディングを参照する階層ビューア・コンポーネントを示しています。これには、ノード(dvt:node)コンポーネントが含まれ、このコンポーネントにはパネル・カード・コンポーネント(dvt:panelCard)が含まれます。このパネル・カード・コンポーネントは、ノードにより参照されたコンテンツの表示を変更するときに使用されるエフェクトとして、slide_horzを定義しています。
階層ビューアを作成すると、図33-79に示す「階層の作成」ダイアログを使用して、コンポーネントのレイアウトを変更したり、パネル・カードなどのコンポーネントをさらに追加できます。このダイアログを開くには、hierarchyViewerコンポーネントのプロパティ・インスペクタで「編集」アイコンを使用します。また、ビジュアル・エディタで階層ビューア・コンポーネントのコードを直接編集するか、プロパティ・インスペクタで値を設定して、レイアウトをカスタマイズすることもできます。「コンポーネント・パレット」を使用して、パネル・カードなどのコンポーネントを追加できます。
例33-50 階層ビューアのJSFページのコード
<dvt:hierarchyViewer inlineStyle="width:100%;height:600px;" id="hv1" var="node"
value="#{bindings.HvtestView1.treeModel}"
selectionListener="#{bindings.HvtestView1.
treeModel.makeCurrent}"
featuresOff="nodeDetail" layout="hier_vert_top"
levelFetchSize="#{bindings.HvtestView1.rangeSize}"
summary="Emplyee Organizational Chart"/>
<dvt:link linkType="orthogonalRounded" id="l1"/>
<dvt:node type="model.HvtestView" width="233" height="233" id="n1">
<f:facet name="zoom100">
<af:image source="#{node.Image}" inlineStyle="width:85px;height:120px;"
inlineStyle="font-weight:bold;font-size:14px"
id="ot1"/>
<af:outputText value="#{node.Firstname}"
inlineStyle="font-size:14px"
id="ot2"/>
<af:outputText value="#{node.Lastname}"
inlineStyle="font-style:italic;font-size:14px"
id="ot3"/>
<dvt:panelCard effect="slide_horz" id="pc1">
<af:showDetailItem text="#{viewcontrollerBundle.CONTACT_INFO}"
id="sdi1">
<af:panelFormLayout inlineStyle="padding:5px;" id="pfl1">
<af:goLink text="#{viewcontrollerBundle.EMAIL}"
destination="mailto:#{node.bindings.Email.inputValue}"/>
<af:panelLabelAndMessage label="#{viewcontrollerBundle.PHONE_NUMBER}"
labelStyle="font-size:14px;color:#5A6A7A"
id="plam3">
<af:outputText value="#{node.Phone}"
inlineStyle="font-size:14px;color:#383A47" id="ot5"/>
</af:panelLabelAndMessage>
</af:panelFormLayout>
</af:showDetailItem>
<af:showDetailItem text="#{viewcontrollerBundle.REPORTING}" id="sdi2">
<af:panelFormLayout inlineStyle="padding:5px;" id="pfl2">
<af:outputText value="#{node.Title}"
inlineStyle="font-size:14px"
id="ot6"/>
<af:panelLabelAndMessage label="#{viewcontrollerBundle.MANAGER}"
labelStyle="font-size:14px"
id="plam4">
<af:outputText value="#{node.Managerid}"
inlineStyle="font-size:14px;color:#383A47" id="ot7">
<af:convertNumber groupingUsed="false"
pattern="#{bindings.HvtestView1.hints.Managerid.format}"/>
</af:outputText>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{viewcontrollerBundle.EMPLOYEE_ID}"
labelStyle="font-size:14px" id="plam5">
<af:outputText value="#{node.Id}"
inlineStyle="font-size:14px" id="ot8">
<af:convertNumber groupingUsed="false"
pattern="#{bindings.HvtestView1.hints.Id.format}"/>
</af:outputText>
</af:panelLabelAndMessage>
</af:panelFormLayout>
</af:showDetailItem>
<af:showDetailItem text="#{viewcontrollerBundle.ADDRESS}" id="sdi3">
<af:panelFormLayout inlineStyle="padding:5px;" id="pfl3">
<af:panelLabelAndMessage label="#{viewcontrollerBundle.ADDRESS}"
labelStyle="font-size:14px" idd="plam6">
<af:outputText value="#{node.Adress}"
inlineStyle="font-size:14px" id="ot9"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{viewcontrollerBundle.STATE}"
labelStyle="font-size:14px" id-"palm7">
<af:outputText value="#{node.State}"
inlineStyle="font-size:14px" id="ot10"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="#{viewcontrollerBundle.CITY}"
labelStyle="font-size:14px" id="plam8">
<af:outputText value="#{node.City}"
inlineStyle="font-size:14px" id="ot11"/>
</af:panelLabelAndMessage>
</af:panelFormLayout>
</af:showDetailItem>
</dvt:panelCard>
</f:facet>
</dvt:node>
</dvt:hierarchyViewer>
階層ビューアの検索機能は、階層ビューア・データ・モデルの基本であるデータ・コレクションの検索可能属性または列に基づいています。Oracle ADFのデータ・コントロールで定義された問合せ結果コレクションを使用すると、Jdeveloperでは宣言的なタスクとなります。ExecuteWithParams操作をドラッグして、このページの既存の階層ビューア・コンポーネントにドロップします。
作業を始める前に、次のようにします。
ページ上にデータバインドされた階層ビューア・コンポーネントを配置します。
階層ビューアのルート・ノードを取得する問合せを検証します。
たとえば、図33-80では、EMPNO列でルート・ノードを取得しています。
検索を実行するビュー・オブジェクトを作成します。
たとえば、図33-81はEmployeesSearchResultsビュー・オブジェクトを示していますが、このオブジェクトは任意の値と一致させるためにデフォルト値の%、および列に対する完全一致を指定する比較値=を使用して、データ・コレクションのJob列に基づく検索を実行します。
ビュー・オブジェクトの作成の詳細は、5.2.1項「エンティティ・ベースのビュー・オブジェクトの作成方法」を参照してください。
階層ビューアでデータバインドされた検索を作成する手順:
「データ・コントロール」パネルから、問合せ結果に対応するコレクションを選択し、「操作」ノードを展開してExecuteWithParams操作を表示します。
ExecuteWithParams操作をドラッグして、ビジュアル・エディタの階層ビューア、または「構造」ウィンドウのコンポーネント上にドロップします。かわりに、このパラメータを階層ビューアにドラッグすることもできます。
表示される「階層ビューア検索の作成」ダイアログで、「追加」アイコンを使用して、「検索結果」パネルに表示する結果リストを指定し、その後、各結果について次の指定を行います。
ラベルの表示: 階層内のノードのヘッダー値を選択します。<default>を選択すると、ヘッダーのテキストはデータ・バインディングから自動的に取得されます。
値バインディング: 階層ビューアのツリーにあるノードに使用するデータ・コレクション内の列を選択します。
使用するコンポーネント: ノードに表示するコンポーネントのタイプを選択します。デフォルトは、ADF出力テキスト・コンポーネントです。
既存のフィールドの選択後、矢印アイコン(Up、Down、Top、Bottom)を使用して、結果を並べ替えるか、または「削除」アイコンを使用して、結果を削除します。
「操作」ドロップダウン・リストで、検索結果が選択されたときに使用する階層ルート・データ・コレクションを選択します。有効な値は次のとおりです。
removeRowWithKey: 入力フィールドによって指定された値から変換されたStringとして行キーを使用し、バインドされたデータ・コレクションのデータ・オブジェクトを削除します。
setCurrentRowWithKey: 入力フィールドで指定された値から変換したStringとして行キーを設定します。行キーは、バインドされたデータ・コレクション内のデータ・オブジェクトの現状設定に使用されます。
setCurrentRowWithKeyValue: キーの値を使用して、イテレータの現在のオブジェクトを設定します。
ExecuteWithParams: パラメータとして渡される名前付きバインド変数に値を設定します。
「パラメータ・マッピング」表で、「結果属性」列のドロップダウン・リストを使用して、「階層パラメータ」列に表示されるパラメータにマップする結果コレクション属性を選択します。
図33-82は、EmployeesSearchResults1という名前のデータ・コレクションのデータを使用して階層ビューアを作成したときに表示される「階層ビューア検索の作成」ダイアログです。
実行時に、検索結果がEnameとJobの表にまとめられます。図33-83は、ユーザが「検索」ボックスに「MANAGER」と入力したときに表示される「検索結果」パネルを示します。
