| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11g リリース2(11.1.2.4.0) B66719-05 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11g リリース2(11.1.2.4.0) B66719-05 |
|
前 |
次 |
この章では、ADF Facesデータ視覚化mapおよびthematicMapコンポーネントを使用して、地理およびテーマ・マップでデータを表示する方法について説明します。アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用して、地理マップのテーマ、テーマ・マップの領域、ポイント・データ・レイヤーを作成し、データを表示できます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「データバインドされたADFデータ視覚化コンポーネントの作成」の章を参照してください。
この章では、次の項目について説明します。
地理マップでは、1つのマップに重ね合せた1つ以上のインタラクティブな情報レイヤー(テーマ)でビジネス・データを表します。地理マップには、リモートのOracle Application Server (AS) MapViewerサービスのURL、およびアドレス・データを経度と緯度に変換する必要がある場合はオプションでジオコーダ・サービスのURLを含む構成が必要です。
テーマ・マップでは、ビジネス・データをスタイル設定されたエリア内にパターンまたは関連付けられたマーカーとして表し、Oracle MapViewerサービスへの接続は必要ありません。テーマ・マップでは、地理マップでの地理的な詳細なしで、データに焦点を合せます。
ADFデータ視覚化マップおよびテーマ・マップ・コンポーネントには、パンおよびズーム、凡例表示などのエンド・ユーザー用の一連の機能が用意されています。また、状態管理などの一連のプレゼンテーション機能も備わっています。
地理マップをどのように使用し、どのようにカスタマイズできるかを理解するには、次の要素と機能について復習すると役に立ちます。
ビューポート: 地理マップおよびそのプレゼンテーション機能用のコンテナ。デフォルトのサイズは600 x 375ピクセルで、カスタマイズ可能です。
基準となるマップ: 背景の地理データ、ズーム・レベルと、国、都市、道路などのアイテムの外観と存在。デフォルトでは、地理マップはリモートのOracle MapViewerサービスから基準となるマップを使用します。基準となるマップには、たとえば、オフィス・ビルのフロア・マップなど、MapViewerおよびMap Builderを使用して構成できる任意のイメージを使用できます。
ズーム制御: マップの左上隅にレンダリングされるパン・アイコンとズーム・スライダ。図25-1に、最小に縮小された(ズーム・レベルが0に設定された)マップのズーム制御を示します。ゼロではマップ全体が表示されます。
ズーム制御の位置と初期設定は、mapコンポーネントでカスタマイズできます。マップのツールバーにある「表示」メニューにより、ズーム制御の表示を指定できます。デフォルトでは、マップの初期ズーム・レベルは0に設定されています。
パン・アイコン: ズーム制御の上部にある(東西南北、北東、北西、南東および南西を指す矢印の付いた)アイコン。このアイコンを使用して、特定の方向にマップ全体を移動できます。
ズーム・スライダ: 大縮尺ズーム用のサム付きスライダと1レベルのズーム用のアイコン。プラスのアイコンを使用して一度に1レベルズーム・インし、マイナスのアイコンを使用して一度に1レベルズーム・アウトします。サムがスライダの下部にある場合、ズーム・レベルはゼロです。
スケール: マップの左下隅の情報パネルの下、コピーライトの上に表示される2つの横方向のバー。図25-2に、スケールを示します。上のバーはマイル(mi)を表し、下のバーはキロメートル(km)を表します。マイル・バーの上およびキロメートル・バーの下には、[距離] [単位]の形式でラベルが表示されます。ズーム・レベルの変更やマップのパンに応じて、バーの長さと距離の値が変わります。
情報パネル:スケールの上の左下隅に緯度と経度を表示します。図25-2に、情報パネルを示します。デフォルトでは、情報パネルは表示されません。このパネルは、「表示」メニューから、またはツールバー上の「情報」ボタンをクリックして表示できます。
測定パネル:現在使用しているツールバーのツールに応じて、距離、領域、半径のいずれかが表示されます。[ラベル] [値] [単位]の形式で、情報パネルの右にテキストが表示されます。図25-3に、距離測定の測定パネルを示します。領域測定および半径測定は、適切なラベルを使用して同様に表示されます。
次のツールによって、測定パネルに情報が示されます。
領域測定:「面」、「長方形選択」または「マルチポイント選択」ツールがアクティブの場合にのみ表示されます。
距離測定:「距離」ツールがアクティブの場合にのみ表示されます。
半径測定:「円形選択」ツールがアクティブの場合にのみ表示されます。
コピーライト: マップの左下隅に表示され、mapコンポーネントでカスタマイズできるテキストが含まれます。
概要マップ: 図25-4に示すような、メイン・マップの縮小表示で構成されます。このマップは、メイン・マップの右下隅に表示され、パン・ツールまたはパン・アイコンを使用せずにメイン・マップの表示領域を変更できます。
次のアイテムは、概要マップの一部です。
レチクル: メイン・マップの縮小表示内を移動できる小さなウィンドウとして表示されます。縮小マップ内の網線の位置によって、メイン・マップの表示可能領域が決まります。網線を移動すると、メイン・マップが自動的に更新されます。
「表示/非表示」アイコン:概要マップが表示されている場合、左上隅に表示されます。「表示/非表示」アイコンをクリックすると、概要マップが非表示になり、アイコンのみがメイン・マップの右下隅に表示されます。
ツールバー: マップおよびマップのテーマの表示を調整するユーザー制御を提供するためにマップと関連して表示されます。
ツールバーには、次の要素が次に示す順で含まれています。
表示: 表示するテーマの制御、表示する特定のテーマの選択、ズーム制御、凡例、情報パネルおよび凡例を表示するかどうかの決定を行います。図25-5に、「表示」メニューのサンプルを示します。
「表示」メニューの「テーマ」オプションを選択すると、複数のテーマがある場合に地理マップを構成するためのダイアログが開きます。図25-6に、マップの「テーマ」ダイアログのサンプルを示します。
ツールバーのボタン: 地理マップと対話する次のユーザー制御を提供します。
パン: ビュー内でのドラッグ・アンド・ドロップ操作により、マップをパンするために使用します。
ズーム: マップ・ビューでのズーム・インまたはズーム・アウトに使用します。
選択: マップ上の定形(矩形、円形または多角形)領域または点を選択するために使用します。選択内のテーマは強調表示されます。
測定: マップの距離およびエリアの測定ツールの非表示または表示を切り替えるために使用します。
凡例: マップの凡例の非表示または表示を切り替えるために使用します。
情報パネル: マップの情報パネルの非表示または表示を切り替えるために使用します。
図25-7に、マップのツールバー・ボタンによってサポートされる機能を示します。
テーマ・マップをどのように使用し、どのようにカスタマイズできるかを理解するには、次の要素と機能について復習すると役に立ちます。
ビューポート: テーマ・マップおよびそのプレゼンテーション機能用のコンテナ。デフォルトのサイズは600 x 375ピクセルで、カスタマイズ可能です。
ベース・マップ: 背景の地理上のエリア。それぞれの基準となるマップには、いくつかのリージョンのセットと、点として示される都市の固定セットが1つ含まれます。リージョンまたは都市の1つのセットはレイヤーと呼ばれます。一度に表示できるのは1つの基準となるマップと1つのレイヤーのみですが、ドリルが有効な場合は例外です。テーマ・マップ用に事前に作成された基準となるマップには次のものがあります。
米国
米国およびカナダ
世界
アフリカ
アジア
ヨーロッパ
北米
中米
南米
アジア太平洋(APAC)
ヨーロッパ、中東およびアフリカ(EMEA)
世界のリージョン
レイヤーとラベル: それぞれの基準となるマップには、地理的階層でレベルを表すいくつかのリージョンが含まれています。たとえば、米国マップでは、階層は国→州→郡→都市です。階層関係ではリージョン内のドリルをサポートしています。表示されるとき、基準となるマップに関連付けられた都市レイヤー内の都市は、データ・ポイントとして表示されます。デフォルトでは、1つのレイヤー内の各リージョンには、カスタマイズ可能なラベルが表示されます。
テーマ・マップでは、1つ以上のカスタム・エリア・レイヤー、既存のエリア・レイヤーまたは別のカスタム・リージョンのいずれかに基づく名前付きのリージョン・グループがサポートされます。カスタム・リージョンは、基準となるマップの地理階層に自然にぴったり収まります。たとえば、郡レイヤーに基づくカスタム・エリア・レイヤーは、階層内で米国の州と米国の郡との間に表示されます。
データ・レイヤー: 各レイヤーは、データ・コレクションにバインドし、データを色やパターンの塗りつぶし、またはデータ・マーカー、あるいはその両方で表すためにスタイルを設定できます。マップ・レイヤーには、一度に1つのデータ・レイヤーのみ表示できるのに対し、データ・マーカーは複数を同時に表示できます。データ・レイヤーは、地理エリア、あるいは経度と緯度またはX座標とY座標としてマップの位置に関連付けられた点により定義できます。
データ・マーカーとラベル: データ・マーカーは、データ・コレクションにバインドされ、リージョンまたは都市レイヤーに関連付けて、データをthematicMapコンポーネントで使用可能な形状、カスタム形状またはグラフィック・ファイルとして表すことができます。データ・マーカーは、経度と緯度またはX座標とY座標としてマップの位置に関連付けることもできます。デフォルトでは、各データ・マーカーにはラベルが表示されます。
コントロール・パネル: ユーザーが次の操作を制御できるようにするオプション・ツールです。
パンおよびズーム制御: マップをパンさせ、マップをビュー内でズームし中央揃えするために使用します。
ズームしてあわせる: ビューポート内でマップの全表示を中央揃えしてぴったり合せるために使用します。
ズーム・ボタン: テーマ・マップのビュー上でズーム・インまたはズーム・アウトするために使用します。
コントロール・パネルの表示/非表示ボタン: コントロール・パネルの表示または非表示の切り替えに使用します。
リセット・ボタン: テーマ・マップでドリルが有効な場合に使用可能です。マップをリセットして、リージョンでドリルがない状態で表示するために使用します。
ドリル・ボタン: テーマ・マップでドリルが有効な場合に使用可能です。上または下を指す矢印を使用して、マップ・リージョン内でドリル・アップ・またはドリル・ダウンします。
図25-8に、マップでのドリルが有効なコントロール・パネルを示します。
コンテキスト・メニュー: デフォルトでは、テーマ・マップにビューポートの背景、マップ・リージョンおよびデータ・マーカーのコンテキスト・メニューが表示されます。カスタム・コンテキスト・メニューの項目は、デフォルトのメニューに追加できます。
図25-9に、マップ・ビューポートのデフォルトのコンテキスト・メニューを示します。データ・マーカーにも同じメニュー項目が使用できます。
図25-10に、マップ・リージョンのコンテキスト・メニューを示します。
状態の管理: デフォルトでは、テーマ・マップに加えられた表示の変更(中央揃え、ズーム、選択およびドリルなど)の状態は、数セッションにわたり持続し、印刷にも引き継がれます。
イメージの形式: デフォルトでは、テーマ・マップは、Flash Playerを使用して表示され、印刷時にはPortable Network Graphics (PNG)の出力形式が使用されます。FlashおよびPNGイメージ形式のどちらもでも、双方向ロケールがサポートされています。静的レンダリング(Flash表示のパンおよびズーム状態の維持など)は、印刷可能なPNGイメージで完全にサポートされます。
印刷: テーマ・マップは、マップ内のズームまたはパンの状態を維持したまま、PNG出力形式を使用して印刷されます。
アニメーション: デフォルトでは、テーマ・マップは、マップに関連付けられたデータが変更されるときや、リージョンがマップでドリルされるときに、マップの初期レンダリング上でアニメーション化されます。
ドリル: 有効な場合、地理的階層の次のレイヤーのドリルが表示されます。たとえば、ある州リージョンをダブルクリックすると、その州内の郡が表示されます。ドリルが有効な場合、ドリル・アイコンがコントロール・パネルに追加されます。
ドラッグ・アンド・ドロップ: マップは、これらの操作をサポートするように構成できます。
選択したマップ・リージョンまたはデータ・マーカーを、別のページ・コンポーネントにドラッグします。
データ・マーカーをマップ上のある場所から別の場所に移動します。
データ要素を別ページ・コンポーネントからマップ・リージョンまたはデータ・マーカーにドラッグします。
機能の無効化: マップのズーム、ズームして合せる、パンなどのエンド・ユーザー機能は、テーマ・マップで無効にできます。無効にした場合、コントロールはコントロール・パネルから削除されます。
ツールチップ: デフォルトでは、テーマ・マップのツールチップにより、カーソルをマップ上で移動した場合、ユーザーはマップの位置や関連付けられたデータの方向に導かれます。
地理マップもテーマ・マップもデータを表示するために設計されています。違いは、地理マップでは、道路または川などの詳細付きで最上の状態で表示されるデータに重点を置き、そのためOracle MapViewerサービスや、オプションでジオコーダ・サービスに対して構成をする必要がある点です。テーマ・マップでは、地理的詳細の見た目がごちゃごちゃした状態をなくした、データの傾向またはパターンに重点を置くため、Oracle MapViewerやジオコーダ・サービスに対する構成は不要です。
地図マップでは、各種のマップ・テーマがサポートされており、それらはそれぞれデータ・コレクションにバインドする必要があります。次の種類のマップ・テーマが使用できます。
色:地域に適用されます。たとえば、ある地域の州の人口を表したり、地域の州での製品の人気を表す色のレンジを色テーマで指定できます。地理マップには、異なるズーム・レベルで表示される複数の色テーマを使用できます。たとえば、色テーマはズーム・レベル1から5では州の人口を表し、ズーム・レベル6から10では郡の収入中央値を表すことができます。
点:マップ内で個々の緯度および経度の位置を表示します。たとえば、点テーマで倉庫の場所をマップに示します。表示するポイントのスタイルをカスタマイズする場合、倉庫のセット内の在庫の種類(電気製品、家庭用品、園芸用品)を区別するためにそれぞれ異なるイメージを使用するよう選択できます。
グラフ:任意の数の円グラフ・テーマと棒グラフ・テーマを作成します。ただし、一度に表示できるグラフ・テーマは1つのみです。マップ・ツールバーの「表示」メニューからテーマを選択します。グラフ・テーマでは、州や郡など特定の地域に関連する統計を表示できます。たとえば、グラフ・テーマで州でのいくつかの製品の売上げの値を表示できます。
図25-11に、色、ポイントおよびグラフ・テーマを使用した地理マップを示します。
図25-12に、カスタマイズした棒グラフ・テーマを使用した地図マップを示します。
テーマ・マップでは、地理的位置に関連付けられたデータの傾向またはパターンが表示されます。データは、たとえばデータ値に基づいた塗りつぶし色を使用したり、マーカーをリージョンに関連付けたり、あるいはその両方により、リージョンごとにスタイル設定されます。
図25-13に、米国の州ごとの失業率を表示するテーマ・マップを示します。マップには、失業率が2.0-4.0パーセントの州が複数選択されている状態が表示されています。
図25-14に、南米の主要都市の規模の段階的シンボルを表示するテーマ・マップを示します。
マップ・コンポーネントを実装する前に、その他のADF Faces機能を理解しておくと役に立ちます。また、いったんマップ・コンポーネントをページ追加すると、検証やアクセシビリティなどの機能を追加する必要があることに気付く場合があります。マップ・コンポーネントで使用できるその他の機能へのリンクは、次のとおりです。
部分ページ・レンダリング: 他のコンポーネントで実行されたアクションに基づく新しいデータをページ上に表示するために、マップをリフレッシュできます。詳細は、第8章「部分ページ・コンテンツの再レンダリング」を参照してください。
パーソナライズ: 有効な場合、ユーザーは実行時にマップの表示方法を変更できますが、アプリケーションがユーザーのカスタマイズを許可するように構成されていないかぎり、ユーザーがページを終了するとそれらの値は保持されません。詳細は、第32章「JSFページでのユーザー・カスタマイズの許可」を参照してください。
アクセシビリティ: マップ・コンポーネントをアクセス可能にできます。詳細は、第30章「アクセス可能なADF Facesページの開発」を参照してください。
スキンおよびスタイル: アプリケーションに適用するADFスキンを使用するか、スタイル関連のプロパティ(styleClassまたはinlineStyle)を使用してCSSスタイル・プロパティを直接適用することにより、マップ・コンポーネントの外観をカスタマイズできます。詳細は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
コンテンツ配信: テーマ・マップ・エリアおよび点データ・レイヤーを、contentDelivery属性を使用して、データ・ソースから特定の行数をフェッチするように構成できます。詳細は、12.2.2項「コンテンツの配信」を参照してください。
自動データ・バインディング: アプリケーションでFusionテクノロジ・スタックが使用されている場合、ADFビジネス・コンポーネントの構成に基づいて、自動的にバインドされたマップを作成できます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「データバインドされたゲージの作成」の章を参照してください。
|
注意: 最終的にページのUIコンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールを使用します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のプレースホルダ・データ・コントロールを使用したページの設計に関する項を参照してください。 |
さらに、データ視覚化コンポーネントでは、データの配信方法、自動部分ページ・レンダリング(PPR)、イメージ形式、そしてデータの表示および編集方法など、同じ機能の大部分が共有されています。詳細は、21.2項「データ視覚化コンポーネントの共通機能」を参照してください。
マップを作成する際、管理者がOracle SpatialのMap Builderツールを使用してすでに構成してある基準となるマップを選択するよう求められます。構成時、マップの管理者は、マップでサポートされるズーム・レベルを定義します。このレベルによって、地理マップのズーム機能も決まります。
管理者は、Map Builderツールを使用して、事前定義のマップ・テーマを作成することもできます。たとえば、事前定義のテーマでは、地域を示すために特定の色を使用することがあります。地理マップ・コンポーネントで、これらの事前定義マップ・テーマを選択できますが、テーマは基準となるマップの一部であるため、変更はできません。
基準となるマップは、地理マップ・コンポーネントを使用して情報のインタラクティブ・テーマ・レイヤーを構築する背景となります。テーマは必要に応じていくつでも作成できますが、最低1つはマップ・テーマを定義する必要があります。
地理マップには次のデータ要件があります。
マップ構成の要件:
Map Viewer URL:Oracle Application Server MapViewerサービスのURLを指定する必要があります。このサービスは、ADF地理マップ・コンポーネントのレイヤーの背景である、基準となるマップの実行に必要です。OracleAS MapViewerは、Oracle Spatialで管理される空間データを使用してマップをレンダリングするプログラミング・ツールです。URLは次のとおりです。
http://elocation.oracle.com/mapviewer
ジオコーダURL:住所を座標に変換する場合、ジオコーダのURLを地理マップに指定する必要があります。ジオコーダは、住所をマッピング用の経緯度座標に変換するWebサービスです。URLは次のとおりです。
http://elocation.oracle.com/geocoder/gcserver
基準となるマップ:OracleAS MapViewerのMap Builderツールで作成された基準となるマップが必要です。この基準となるマップは、マップ・テーマが要望どおりに機能する詳細レベルで多角形を定義する必要があります。たとえば、特定の地域の各州にグラフを作成するために使用する円グラフ・テーマまたは棒グラフ・テーマがある場合、特定のズーム・レベルでこれらのすべての州に多角形を定義する基準となるマップを持つ必要があります。1つの多角形には1つのグラフのみを表示できます。
マップ・テーマ: マップ・テーマはそれぞれ1つのデータ・コレクションにバインドする必要があります。データ・コレクションには、基準となるマップの同様の情報にバインド可能な位置情報が含まれる必要があります。
地理マップには、親コンポーネント、マップ子コンポーネントおよびマップ・テーマを変更するコンポーネントがあります。接頭辞dvt:は、各マップ・コンポーネント名の先頭に付いて、そのコンポーネントがADFデータ視覚化ツール(DVT)のタグ・ライブラリに属することを示します。次のマップ・コンポーネントを構成できます。
マップ(map): マップのメイン・コンポーネント。他のデータ視覚化コンポーネントと異なり、マップ・コンポーネントはデータにバインドされません。かわりに、すべてのマップ・テーマ子コンポーネントが、個々にデータ・コレクションにバインドされます。マップ・コンポーネントには、基準となるマップのID、Oracle Application Server MapViewerサービスを実行しているリモート・サーバーのURL、住所をマッピング用の経緯度座標に変換するジオコーダWebサービスのURLなどのマップに関する一般的な情報が含まれます。
マップ・コンポーネントでは、次のマップ子コンポーネントをサポートしています。
色テーマ(mapColorTheme): データ・コレクションにバインドするマップ・レイヤー。色テーマは、基準となるマップ上のリージョンを識別するために使用できます。
点テーマ(mapPointTheme): データ・コレクションにバインドするマップ・レイヤー。点テーマで、マップ上の個々の位置が識別されます。
特定のデータ値範囲に属する点を表すイメージをカスタマイズする場合に、オプションで、子マップ点スタイル・コンポーネント(mapPointStyleItem)を使用できます。複数のイメージを定義するには、各イメージのコンポーネントを作成し、関連付けるデータ値の範囲とイメージを指定します。
棒グラフ・テーマ(mapBarGraphTheme): データ・コレクションにバインドするマップ・レイヤー。このテーマでは、地点に棒グラフが表示され、その地点に関連する複数のデータ値を表します。たとえば、このタグを使用して、倉庫の位置に在庫レベルを示すグラフを表示します。
マップ棒グラフの棒の色をカスタマイズする場合は、オプションで、マップ棒グラフ・シリーズ・セット・コンポーネント(mapBarSeriesSet)を使用して、マップ棒グラフ・シリーズ・コンポーネント(mapBarSeriesItem)をラップします。各マップ棒グラフ・コンポーネントで、マップ棒グラフの1つの棒の色がカスタマイズされます。
円グラフ・テーマ(mapPieGraphTheme): データ・コレクションにバインドするマップ・レイヤー。このテーマでは、特定の地点に円グラフが表示され、その地点の複数の値を表します。たとえば、このタグを使用して、倉庫の位置に在庫レベルを示すグラフを表示します。
マップ円グラフのスライスの色をカスタマイズする場合は、オプションでマップ円スライス・セット・コンポーネント(mapPieSliceSet)を使用して、マップ円スライス・コンポーネント(mapPieSliceItem)をラップします。各マップ円スライス・コンポーネントで、マップ円グラフの1スライスの色がカスタマイズされます。
事前定義のグラフ・テーマ(predefinedTheme): データベースにマップ・メタデータとともに格納されているマップ管理者ツールを使用して定義されるマップ・レイヤー。事前定義のテーマ・タグは、独自のカスタムOracle AS MapViewerインスタンスがあり、MapViewerで直接レンダリングできる大きいデータセットを表示する必要がある場合に使用します。
マップの凡例(mapLegend): マップを作成すると、自動的に作成されます。このコンポーネントを使用してマップの凡例をカスタマイズします。
概要マップ(mapOverview): マップを作成すると、自動的に作成されます。このタグを使用して、マップの右下隅に表示される概要マップをカスタマイズできます。
ツールバー(mapToolbar): マップを含むJSFページの任意の位置にマップ・ツールバーを配置する親コンポーネント。このツールバーには、ツールバーに関連付けられているマップを指すmapID属性が含まれます。ツールバーによって、マップの凡例を表示する機能、選択や距離の測定を行う機能などのマップとの実行時の重要な相互作用が実行されます。マップ・ツールバー・タグには子コンポーネントはありません。
簡単なUI優先開発を使用してページを設計しているときには、コンポーネント・パレットを使用して地理マップをJSFページに追加します。ページに地理マップ・コンポーネントをドラッグ・アンド・ドロップすると、Oracle MapViewerサービスと、オプションでジオコーダ・サービスを構成するように要求されます。
構成を完了して、ページに地理マップが追加されると、プロパティ・インスペクタを使用して、マップに追加の表示属性を構成できます。
プロパティ・インスペクタで、各属性フィールドのドロップダウン・メニューを使用して、プロパティの説明、およびEL式ビルダーまたはその他の専用ダイアログの表示などのオプションを表示できます。図25-15に、テーマ・マップ・コンポーネントmapServerConfigId属性のドロップダウン・メニューを示します。
|
注意: アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用して地理マップを作成でき、バインドが自動的に行われます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた地理マップの作成に関する項を参照してください。 |
始める前に:
地理マップの属性や地理マップの子コンポーネントが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、25.2.1項「地理マップ・コンポーネントの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、25.1.3項「マップ・コンポーネントの追加機能」を参照してください。
ページに地理マップを追加する手順:
コンポーネント・パレットで、「ADFデータ視覚化」ページの「マップ」パネルから「地理マップ」をページにドラッグ・アンド・ドロップし、「地理マップの作成」ダイアログを開きます。ダイアログの「マップ」ページを使用して、次の2つの方法のいずれかで「マップ構成」を指定します。
ドロップダウン・リストを使用して、使用可能な構成を選択します。
「追加」アイコンをクリックして、「地理マップ構成の作成」ダイアログを開きます。
ダイアログで「MapViewer URL」と「ジオコーダURL」をそれぞれのドロップダウン・リストから指定するか、「追加」アイコンをクリックしてそれぞれのURLに対して「URL接続の作成」ダイアログを開きます。
|
注意: Oracle AS MapViewerサービスには次のURLを使用します: Oracle AS Geocoderサービスには次のURLを使用します: |
ダイアログでヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。各ダイアログで構成の作成を完了すると、その設定が「地理マップの作成」ダイアログに反映されます。図25-16に、指定を完了したダイアログのサンプルを示します。
必要に応じて、マップの「プレビュー」コントロール・パネルを使用して、基準となるマップの中央揃えおよびズームのレベルを調整します。「リフレッシュ」をクリックすると、「開始X」(中央のX座標)、「開始Y」(中央のY座標)および「ズーム・レベル」(初期ズーム・レベル)の値が更新されます。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
|
注意: 必要に応じて、「地理マップの作成」ダイアログの「テーマ」ページを使用して、マップ上でデータを表示するための色、点、棒グラフまたは円グラフ・テーマを追加し構成します。 「データ・コントロール」パネルとテーマ・バインディング・ダイアログを使用して地理マップを作成すると、データ・バインディングが自動的に作成されます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた地理マップの作成に関する項を参照してください。 |
プロパティ・インスペクタで、地理マップの属性を表示します。ヘルプ・ボタンを使用して、mapコンポーネントの完全なタグ・ドキュメントを表示します。
「外観」セクションを開きます。このセクションを使用して、次の属性を設定します。
ShowScaleBar: マップ・スケール・バーの表示の指定に使用します。デフォルト値はfalseです。
ZoomBarPosition: マップ・ズーム・バーの位置の指定に使用します。デフォルト値は、マップの左側に配置する「左」です。その他の有効値は、マップの右側に配置する「右」と、ズーム・バーを表示しない「none」です。
AutoZoomThemeId: マップ・ビューおよびズーム・レベルが初期マップ表示上で中央揃えされるテーマのIDの指定に使用します。「AutoZoomStrategy」で設定された値は、マップでどのように中央およびズーム・レベルが調整されるかを決めるために使用されます。
ShowInfoArea: 情報エリアの表示の指定に使用します。デフォルト値はtrueです。
MapZoom: 地理マップの初期ズーム・レベルの指定に使用します。ズーム・レベルは、ベース・マップの一部としてマップ・キャッシュ・インスタンスで定義されます。
Unit: 地理マップで使用する測定単位の指定に使用します。デフォルト値は「マイル」です。この属性は「メートル」に設定することもできます。
「選択」サブセクション: 面(矩形、円形、多角形)および点の外観選択ツールの定義には、このサブセクションの属性を使用します。詳細は、25.3.3項「マップ選択のカスタマイズおよび使用方法」を参照してください。
「その他」セクションを開きます。このセクションを使用して、次の属性を設定します。
AutoZoomStrategy: マップの中心とズーム・レベルがどのように調整されるかの指定に使用します。「AutoZoomStrategy」値が「MAXZOOM」(デフォルト)に設定されている場合、マップは最大レベルまでズームされ、「AutoZoomThemeId」内のすべてのオブジェクトが表示されます。「AutoZoomStrategy」が「CENTERATZOOMLEVEL」に設定されている場合、マップの中心がAutoZoomThemeId内のテーマに設定され、「MapZoom」属性の値が開始ズーム・レベルとして使用されます。
Summary: 地理マップの説明を入力します。この説明は、スクリーン・リーダーのユーザーがアクセスします。
コンポーネント・パレットを使用してページに地理マップを追加すると、JDeveloperによりJSFページにコードが追加されます。例25-1に、JSFページに追加されるコードを示します。
例25-1 JSFページに追加された地理マップ
<dvt:map startingY="46.06" startingX="-78.67" mapZoom="1"
mapServerConfigId="mapConfig2"
baseMapName="ELOCATION_MERCATOR.WORLD_MAP"
inlineStyle="width:600px; height:375px;" id="m2">
<f:facet name="rtPopup"/>
<f:facet name="popup"/>
</dvt:map>
|
注意: JDeveloperにより、2つのポップアップ・ファセットが自動的に挿入されます。 |
次に、ADFデータ・コントロール・パネルおよびテーマ・バインディング・ダイアログを使用して、データを色、点、円グラフまたは棒グラフ・テーマで表示するように、地理マップを構成できます。データ表示のための地理マップの構成の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた地理マップの作成に関する項を参照してください。
マップのサイズ、マップの中心およびマップ・サイズのズームの設定、ズーム方法、選択リージョンの外観、およびマップの凡例の表示などの地理表示属性をカスタマイズできます。
dvt:mapタグのinlineStyle属性を使用して、マップの幅と高さを制御できます。
始める前に:
マップの属性やマップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、25.2.1項「地理マップ・コンポーネントの構成」を参照してください。
ページにすでにマップが存在している必要があります。ない場合は、この章の指示に従ってマップを作成します。詳細は、25.2.2項「ページへの地理マップの追加方法」を参照してください。
マップのサイズを調整する手順:
構造ウィンドウで「dvt:map」コンポーネントを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「スタイル」セクションを開きます。「InlineStyle」属性でマップの初期サイズを指定します。
たとえば、幅600ピクセルおよび高さ400ピクセルを指定するには、次の設定を使用します。
width:600px;height:400px
ページの使用可能な幅および高さの半分を使用するマップの場合、次の設定を使用します。
width:50%;height:50%
|
ベスト・プラクティスのヒント:
|
初期ズーム・レベル、開始位置、初期マップ・テーマおよびズーム方法の地理マップ表示属性をカスタマイズできます。
始める前に:
マップの属性やマップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、25.2.1項「地理マップ・コンポーネントの構成」を参照してください。
ページにすでにマップが存在している必要があります。ない場合は、この章の指示に従ってマップを作成します。詳細は、25.2.2項「ページへの地理マップの追加方法」を参照してください。
マップでデータを表示するために、少なくとも1つのマップの色、点、円グラフまたは棒グラフ・テーマがすでに構成されている必要があります。
マップの初期ズームおよび開始位置を制御する手順:
構造ウィンドウで「dvt:map」コンポーネントを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「外観」セクションを開きます。このセクションを使用して、次の属性を設定します。
AutoZoomThemeID: 表示される最初のテーマのIDを入力します。
ZoomBarStrategy: 「AutoZoomThemeId」のすべてのオブジェクトが表示される最大レベルまでズーム・ダウンするようマップに指示するデフォルト値「MAXZOOM」を選択するか、「AutoZoomThemeId」のテーマを中心とし、ズーム・レベルを「MapZoom」属性の値に設定するようマップに指示する「CENTERATZOOMLEVEL」を選択します。
マップの開始位置を変更するには、「StartingX」と「StartingY」にそれぞれ緯度と経度を入力します。
MapZoom: マップの初期ズーム・レベルを入力します。この設定は、ズーム・バー・ストラテジCENTERATZOOMLEVELに必要です。
|
注意:
|
地理マップには、データを色、円グラフおよび棒グラフのテーマで表示するマップ・エリア用の選択ツールが用意されています。デフォルトでは、選択ツールはマップ・ツールバー上にあり、長方形、円形、多角形または点の選択オプションが含まれています。図25-17に、1つの色テーマでマップ内の1つのエリアを選択するための多角形ツールの使用例を示します。
ユーザーが、mapToolbar上の長方形ツール、円形ツール、多角形ツールまたはポイント・ツールを使用して、colorTheme、barGraphThemeおよびpieGraphThemeで選択するときの選択ツールで使用される属性をカスタマイズできます。
始める前に:
マップの属性やマップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、25.2.1項「地理マップ・コンポーネントの構成」を参照してください。
ページにすでにマップが存在している必要があります。ない場合は、この章の指示に従ってマップを作成します。詳細は、25.2.2項「ページへの地理マップの追加方法」を参照してください。
マップでデータを表示するために、少なくとも1つのマップの色、点、円グラフまたは棒グラフ・テーマがすでに構成されている必要があります。
マップ選択ツール属性をカスタマイズする手順:
構造ウィンドウで「dvt:map」コンポーネントを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「外観」セクションを開きます。このセクションを使用して、次の属性を設定します。
SelectionFillColor: 選択されたリージョンに適用する塗りつぶしの色の指定に使用します。有効な値はRGB 16進数です。たとえば、黒を指定するには、color="#000000"とします。デフォルト値は#49E0F6です。
SelectionStrokeColor: 選択されたリージョンに適用する線の色の指定に使用します。有効な値はRGB 16進数です。たとえば、デフォルトの色の黒を指定するには、color="#000000"とします。
SelectionOpacity: 選択されたリージョンに適用する塗りつぶしの色の不透明度の指定に使用します。有効な値の範囲は0から100で、0は100%の透明、100は不透明です。デフォルト値は40です。
エンド・ユーザーが選択ツールをクリックし、そのツールを使用してマップ上のあるエリアを強調表示すると、そのエリア内のデータ値は、表などの別のUI要素内に表示するか、選択リスナーを使用して、情報パネル内で合計することができます。
図25-18に、赤の色で縁取られたエリア内で州が選択されているマップを示します。このエリアの関連情報は、関連付けられた表に表示されています。
長方形選択ツールなどのマップ選択ツールによって選択されたマップ・エリアに関連付けられている値を合計する選択リスナーを使用できます。合計はマップの下の領域に表示されます。バッキングBeanメソッド内で引数にMapSelectionEventをとるクラスを指定する必要があります。例25-2に、バッキングBeanのサンプル・コードを示します。
例25-2 選択リスナー用のバッキングBeanのサンプル・コード
package view;
import java.util.Iterator;
import oracle.adf.view.faces.bi.component.geoMap.DataContent;
import oracle.adf.view.faces.bi.event.MapSelectionEvent;
public class SelectionListener {
private double m_total = 0.0;
public SelectionListener() {
}
public void processSelection(MapSelectionEvent mapSelectionEvent) {
// Add event code here...
m_total = 0.0;
Iterator selIterator = mapSelectionEvent.getIterator();
while (selIterator.hasNext())
{
DataContent dataContent = (DataContent) selIterator.next();
if (dataContent.getValues() != null)
{
Double allData[] = dataContent.getValues();
m_total += allData[0];
}
}
}
public double getTotal () {
return m_total;
}
public void setTotal (double total) {
m_total = total;
}
}
マップの選択値を合計する選択リスナーを設定する手順:
構造ウィンドウで「dvt:map」コンポーネントを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで「動作」セクションを展開します。SelectionListener属性に、バッキングBeanを指すメソッド参照を入力します。次に例を示します。
#{eventBean.processSelection}
マップの凡例は、マップのテーマ・データをシンボルとラベルの組合せで説明します。凡例はデフォルトで、マップの初期表示上のポップアップに表示され、マップのツールバーを追加して構成すると、ユーザーが凡例のツールバー・ボタンをクリックしたときに、マップの凡例がウィンドウに表示されるようにすることができます。複数のテーマを構成すると、テーマごとに凡例を表示するために、ドロップダウン・リストを使用できます。図25-19に、複数のテーマの1つの凡例が表示されたマップを示します。
始める前に:
マップの属性やマップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、25.2.1項「地理マップ・コンポーネントの構成」を参照してください。
ページにすでにマップが存在している必要があります。ない場合は、この章の指示に従ってマップを作成します。詳細は、25.2.2項「ページへの地理マップの追加方法」を参照してください。
マップでデータを表示するために、少なくとも1つのマップの色、点、円グラフまたは棒グラフ・テーマがすでに構成されている必要があります。
マップの凡例をカスタマイズする手順:
構造ウィンドウで、「dvt:map」コンポーネントを右クリックし、「dvt:mapの中に挿入」→「凡例」を選択します。
プロパティ・インスペクタで、「共通」セクションを開きます。このセクションで、次の属性を設定します。
InitialShown: マップの初期表示上のポップアップにマップの凡例を表示するかどうかの指定に使用します。デフォルト値はtrueです。
Width: 凡例の幅を入力します。デフォルト値は200pxです。
Height: 凡例の高さを入力します。デフォルト値は150pxです。
PointThemeLabel: 凡例でマップの点テーマに使用するラベルを入力します。すべての点テーマがドロップダウン・リストの1つのオプションとして表示されます。デフォルト値は「点テーマ」です。
NumberOfColumns: 凡例の色マップ・テーマの色を表示するために使用する列の数を入力します。
たとえば、色テーマで15種類の色を指定し、この属性の値を3に設定すると、そのテーマの凡例には5つの行が表示され、各行に3つの列が表示されます。
それぞれの地理マップ・テーマ、色、点、円グラフおよび棒グラフは、マップ・テーマ・バインディング・ダイアログ、テーマ・タグの属性またはテーマ・タグの子タグのいずれか1つ以上を使用してカスタマイズできます。
すべてのマップ・テーマについて、基準となるマップの関連するズーム・レベルに合うズーム・レベルがテーマで指定されていることを確認する必要があります。たとえば、基準となるマップで6から8のズーム・レベルでのみ郡が表示される場合、郡ごとのポイントまたはグラフを表示するテーマには、6から8のズーム・レベルのみを適用します。
始める前に:
マップの属性やマップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、25.2.1項「地理マップ・コンポーネントの構成」を参照してください。
ページにすでにマップが存在している必要があります。ない場合は、この章の指示に従ってマップを作成します。詳細は、25.2.2項「ページへの地理マップの追加方法」を参照してください。
マップでデータを表示するために、少なくとも1つのマップの色、点、円グラフまたは棒グラフ・テーマがすでに構成されている必要があります。
マップ・テーマのズーム・レベルをカスタマイズする手順:
構造ウィンドウでカスタマイズする「dvt:mapColorTheme」、「dvt:mapPointTheme」、「dvt:mapBarGraphTheme」または「dvt:mapPieGraphTheme」コンポーネントを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「外観」セクションを開きます。「MinZoom」および「MaxZoom」属性には、希望する低ズーム値と高ズーム値をそれぞれ入力します。
テーマが凡例または「表示」メニュー、テーマ選択ダイアログに表示される際、デフォルトでは、マップ・テーマのID属性がラベルとして使用されます。shortLabelおよびmenuLabel属性を使用してテーマのタイプ(色、点、棒グラフまたは円グラフ)とデータ(人口、売上げ、在庫など)の両方がわかるラベルを作成し、使用可能なテーマをユーザーが簡単に認識できるようにマップ・テーマ・ラベルをカスタマイズできます。
これらの属性を使用してテーマのタイプ(色、点、棒グラフまたは円グラフ)とデータ(人口、売上げ、在庫など)の両方がわかるラベルを作成し、使用可能なテーマをユーザーが簡単に認識できるようにします。
始める前に:
マップの属性やマップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、25.2.1項「地理マップ・コンポーネントの構成」を参照してください。
ページにすでにマップが存在している必要があります。ない場合は、この章の指示に従ってマップを作成します。詳細は、25.2.2項「ページへの地理マップの追加方法」を参照してください。
マップでデータを表示するために、少なくとも1つのマップの色、点、円グラフまたは棒グラフ・テーマがすでに構成されている必要があります。
マップ・テーマのラベルをカスタマイズする手順:
構造ウィンドウでカスタマイズする「dvt:mapColorTheme」、「dvt:mapPointTheme」、「dvt:mapBarGraphTheme」または「dvt:mapPieGraphTheme」コンポーネントを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「外観」セクションを開きます。このセクションを使用して、次の属性を設定します。
ShortLabel: マップ凡例に表示される際のテーマのレベルの指定に使用します。
MenuLabel: 「表示」メニューのテーマ選択ダイアログでのテーマのラベルの指定に使用します。
たとえば、人口に応じてニュー・イングランドの州を色付けする色テーマの場合、次のテキストを入力します。
shortLabel="Color - Population, NE Region"
色マップ・テーマを作成する際、背景レイヤーに使用する色をカスタマイズできます。最小レンジと最大レンジに関連付ける色を指定し、テーマに使用する色レンジの数を指定できます。たとえば、色がマップ上の人口と関連する場合、人口が最も少ないエリアには最小色が表示され、人口が最も多いエリアには最大色が表示されます。最小色と最大色の間の色のグラデーションが、これらの値の間のレンジに表示されます。
始める前に:
マップの属性やマップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、25.2.1項「地理マップ・コンポーネントの構成」を参照してください。
ページにすでにマップが存在している必要があります。ない場合は、この章の指示に従ってマップを作成します。詳細は、25.2.2項「ページへの地理マップの追加方法」を参照してください。
マップでデータを表示するために、1つのマップの色テーマがすでに構成されている必要があります。
色マップ・テーマの色をカスタマイズする手順:
構造ウィンドウで「dvt:mapColorTheme」コンポーネントを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「テーマ・データ」セクションを開きます。このセクションを使用して、次の属性を設定します。
データ値の最小レンジと最大レンジに関連付けられているデフォルト色を変更する場合は、MinColor属性とMaxColor属性の色をそれぞれ選択します。
このテーマのデフォルトの色レンジの数を変更する場合は、BucketCount属性の整数を変更します。
たとえば、<dvt:mapColorTheme minColor="#000000" maxColor= "#ffffff" bucketCount="5"/>の場合、5つのバケットの色は#000000、#444444、#888888、#bbbbbb、#ffffffになります。
または、各バケットの色を指定できます。複数のバケットの色を指定するには、mapColorThemeのColorList属性に、属性への色配列をバインドするか、セミコロンで区切った文字列を使用します。色はRGB16進数を使用して指定できます。
たとえば、値がcolorList="#ff0000;#00ff00;#0000ff"の場合、最初のバケットの値は赤、2番目のバケットの値は緑、3番目のバケットの値は青になります。
マップの点テーマでは、デフォルトのイメージを使用して各ポイントが示されます。ただし、マップの点テーマで使用するカスタム・イメージごとにmapPointStyleItemコンポーネントを使用すれば、1つの点テーマに複数のカスタム・イメージを指定し、各イメージが表すデータ値の範囲を指定できます。
始める前に:
マップの属性やマップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、25.2.1項「地理マップ・コンポーネントの構成」を参照してください。
ページにすでにマップが存在している必要があります。ない場合は、この章の指示に従ってマップを作成します。詳細は、25.2.2項「ページへの地理マップの追加方法」を参照してください。
マップでデータを表示するために、1つのマップの点テーマがすでに構成されている必要があります。
マップ点テーマのポイントのイメージをカスタマイズする手順:
構造ウィンドウで「dvt:mapPointTheme」コンポーネントを右クリックし、「dvt:mapPointThemeの中に挿入」→「点スタイルのアイテム」を選択します。
プロパティ・インスペクタで、「共通」セクションを開きます。このセクションを使用して、次の属性を設定します。
ImageURL: マップでこのカスタム・イメージに対するデータ値の範囲内のポイントに表示するイメージ・ファイルのパスの指定に使用します。または、属性ドロップダウン・メニューから「編集」を選択して、イメージ・ファイルに移動するためのダイアログを開くことができます。
MaxValueおよびMinValue: それぞれの属性に最小値と最大値を入力して、このカスタム・イメージが表すデータ値の範囲の指定に使用します。
Id: 定義するカスタム・イメージの一意の識別子を入力します。
ShortLabel: このタグで表される範囲内のポイント上にユーザーがカーソルを置いたときに実際のデータ値の前に表示される説明テキストの指定に使用します。
たとえば、最小データ値範囲内のカスタム・ポイントに、次のテキストを入力します。
Low Inventory
HoverURL: オプションで、エンド・ユーザーがマップ上のイメージにマウスを移動したときに使用する別のイメージのパスを指定します。
SelectedURL: オプションで、エンド・ユーザーがマップ上のイメージを選択したときに使用する別イメージのパスを指定します。
点テーマに対して作成するカスタム・イメージごとにステップ2を繰り返します。
点テーマに対するデータ値の範囲を表すカスタム・イメージの指定に点スタイル・アイテム・コンポーネントを使用すると、子mapPointStyleItemタグが親mapPointThemeタグ内で定義されます。例25-3に、各倉庫ポイントの在庫の範囲を表す3つのカスタム・ポイント・イメージを持つマップ点テーマに対し、JSFページに生成されるコードを示します。
最初の点スタイル設定(ps0)は、500を超えない値に適用されます。この点スタイルでは、非常に少ない在庫用のイメージを表示し、対応するツールチップ情報が示されます。
2番目の点スタイル設定(ps1)は、500から1000の値に適用されます。この点スタイルでは、少ない在庫用のイメージを表示し、対応するツールチップ情報が示されます。
最後の点スタイル設定(ps2)は、1000から1600の値に適用されます。この点スタイルでは、多い在庫用のイメージを表示し、対応するツールチップ情報が示されます。
例25-3 カスタム・ポイント・イメージを使用するマップ点テーマのコード
<dvt:map id="map1"
...
<dvt:mapPointTheme id="mapPointTheme1"
shortLabel="Warehouse Inventory"
value="{bindings.WarehouseStockLevelsByProduct1.geoMapModel}">
<dvt:mapPointStyleItem id="ps0" minValue="0"
maxValue="500"
imageURL="/images/low.png"
selectedImageURL="/images/lowSelected.png"
shortLabel="Very Low Inventory"/>
<dvt:mapPointStyleItem id="ps1" minValue="500"
maxValue="1000"
imageURL="/images/medium.png"
selectedImageURL="/images/mediumSelected.png"
shortLabel="Low Inventory"/>
<dvt:mapPointStyleItem id="ps2" minValue="1000"
maxValue="1600"
imageURL="/images/regularGreen.png"
selectedImageURL="/images/regularGreenSelected.png"
shortLabel="High Inventory"/>
</dvt:mapPointTheme>
</dvt:map>
マップ棒グラフ・テーマを作成すると、デフォルトの色がグラフの棒に割り当てられます。棒の色はカスタマイズできます。1つのmapBarSeriesSetタグを使用して、棒グラフ・テーマのすべてのmapBarSeriesItemタグをラップし、グラフ内の棒ごとにmapBarSeriesItemタグを挿入します。
始める前に:
マップの属性やマップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、25.2.1項「地理マップ・コンポーネントの構成」を参照してください。
ページにすでにマップが存在している必要があります。ない場合は、この章の指示に従ってマップを作成します。詳細は、25.2.2項「ページへの地理マップの追加方法」を参照してください。
マップでデータを表示するために、1つのマップの棒グラフ・テーマがすでに構成されている必要があります。
マップ棒グラフ・テーマの棒の色をカスタマイズする手順:
構造ウィンドウで「dvt:mapBarGraphTheme」タグを右クリックし、「dvt:mapBarGraphThemeの中に挿入」→マップ棒グラフ系列セットを選択します。
このタグに設定する属性はありません。個々の棒系列アイテムのタグのラップに使用されます。
構造ウィンドウで「dvt:mapBarSeriesSet」タグを右クリックし、「dvt:mapBarSeriesSetの中に挿入」→マップ棒グラフ系列セットと選択します。
プロパティ・インスペクタで次の属性を設定します。
Id: 棒グラフ系列アイテムの一意のIDを入力します。
Color: 棒に使用する一意の色を入力します。有効な値は、RGB16進数色です。または、属性ドロップダウン・メニューから「編集」を選択して、「プロパティの編集: 色」ダイアログを開くことができます。
グラフ内の棒ごとにステップ3を繰り返します。
|
注意: グラフ内の棒の順序を見つけ、変更するには、 |
「棒グラフ・マップ・テーマ・バインディングの編集」ダイアログを使用してマップ棒グラフ・テーマ内の棒をカスタマイズすると、棒の順序にはダイアログの「系列属性」列のエントリの順序が反映されます。例25-4に、マップ棒グラフの棒をカスタマイズする場合にJSFページに生成されるサンプル・ソース・コードを示します。
マップ円グラフ・テーマを作成すると、デフォルトの色がグラフのスライスに割り当てられます。スライスの色はカスタマイズできます。1つのmapPieSliceSetタグを使用して、円グラフ・テーマのすべてのmapPieSliceItemタグをラップし、グラフ内のスライスごとにmapPieSliceItemタグを挿入します。
始める前に:
マップの属性やマップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、25.2.1項「地理マップ・コンポーネントの構成」を参照してください。
ページにすでにマップが存在している必要があります。ない場合は、この章の指示に従ってマップを作成します。詳細は、25.2.2項「ページへの地理マップの追加方法」を参照してください。
マップでデータを表示するために、1つのマップの円グラフ・テーマがすでに構成されている必要があります。
マップ円グラフ・テーマのスライスの色をカスタマイズする手順:
構造ウィンドウで「dvt:mapPieGraphTheme」タグを右クリックし、「dvt:mapPieGraphThemeの中に挿入」→「円グラフのスライスの設定」を選択します。
このタグに設定する属性はありません。個々の円グラフ・アイテムのタグのラップに使用されます。
構造ウィンドウで「dvt:mapPieSliceSet」ノードを右クリックし、「dvt:mapPieSliceSetの中に挿入」→「円グラフの区分のアイテム」を選択します。
プロパティ・インスペクタで次の属性を設定します。
ID: 円スライス・アイテムの一意のIDを入力します。
色: 円スライスに使用する一意の色を入力します。有効な値は、RGB16進数色です。または、属性ドロップダウン・メニューから「編集」を選択して、「プロパティの編集: 色」ダイアログを開くことができます。
グラフ内の円スライスごとにステップ3を繰り返します。
|
注意: グラフ内のスライスの順序を見つけ、変更するには、 |
円グラフ・マップ・テーマ・バインディングの編集ダイアログを使用してマップ円グラフ・テーマ内のスライスをカスタマイズすると、スライスの順序にはダイアログの「円グラフの区分の属性」列のエントリの順序が反映されます。例25-5に、マップ円グラフのスライスをカスタマイズする場合にJSFページに生成されるサンプル・コードを示します。
例25-5 マップ円グラフのスライスをカスタマイズする場合のコード
<dvt:map
...
<dvt:mapPieGraphTheme
...
<dvt:mapPieSliceSet>
<dvt:mapPieSliceItem color="#ffffff" id="slice1"/>
<dvt:mapPieSliceItem color="#ffff00" id="slice2"/>
<dvt:mapPieSliceItem color="#ff0000" id="slice3"/>
</dvt:mapPieSliceSet>
</dvt:mapPieGraphTheme>
</dvt:map>
地理マップを作成する際、凡例と情報パネルの表示やテーマの選択(同じタイプの複数のテーマがある場合)を行ったり、距離測定、領域測定または選択ツールを使用したりするために、マップ・ツールバーを追加し構成することもできます。図25-20に、マップ・ツールバーを示します。
ツールバーの機能の詳細は、25.1.1.1項「地理マップのエンド・ユーザー機能およびプレゼンテーション機能」を参照してください。
マップ・ツールバーは別のコンポーネントで、JSFページでマップの上にも下にも配置できます。
始める前に:
マップの属性やマップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、25.2.1項「地理マップ・コンポーネントの構成」を参照してください。
ページにすでにマップが存在している必要があります。ない場合は、この章の指示に従ってマップを作成します。詳細は、25.2.2項「ページへの地理マップの追加方法」を参照してください。
マップ・ツールバーを追加し構成する手順:
構造ウィンドウで「dvt:map」ノードを右クリックし、「dvt:mapの前に挿入」または「dvt:mapの後ろに挿入」→「ADFデータ視覚化」を選択します。
ADFデータ視覚化アイテムダイアログで、「ツールバー」を選択して、「マップ・ツールバーの作成」ダイアログを開きます。
ドロップダウン・リストから、このツールバーが動作するマップのIDを選択し、「OK」をクリックします。
プロパティ・インスペクタで、「共通」セクションを開きます。このセクションで、次の属性を設定します。
ShowDistanceTools: ツールバー上で距離ツールを使用可能にするかどうかの指定に使用します。デフォルト値はtrueです。
ShowSelectThemeDialog: ツールバーの「表示」メニューで「テーマの選択」ダイアログを使用可能にするかどうかの指定に使用します。デフォルト値はtrueです。
ShowSelectThemeMenuItem: ツールバーの「表示」メニューで「テーマの選択」オプションを使用可能にするかどうかの指定に使用します。デフォルト値はtrueです。
ShowSelectionTools: ツールバーでエリア長方形、円形、多角形またはポイント・ツールなどの選択ツールを使用可能にするかどうかの指定に使用します。デフォルト値はtrueです。
ShowViewMenu: ツールバーで「表示」メニューを使用可能にするかどうかの指定に使用します。デフォルトはtrueです。
ShowZoomTools: ツールバーでズーム・インおよびズーム・アウト・ツールを使用可能にするかどうかの指定に使用します。デフォルトはtrueです。
ツールバーをマップに追加すると、次のようになります。
JSFページのマップの上または下に、指定したとおりツールバーが表示されます。デフォルトでは、1つ以上のツールの可視性を変更しないかぎり、ツールバーにはすべてのツールが含まれます。
ソース・コードが生成され、JSFページでマップのコードの上または下に表示されます。
例25-6に、IDがmap_usのマップに関連付けられているツールバーのサンプル・コードを示します。例では、マップのコードの位置を示しています。
テーマ・マップでデータを表示するには、名前付きのデータ・コレクションが必要です。データ・コレクションとは、データ・モデルでのデータ・オブジェクトのセット(行セット)を意味します。データ・コレクション内の各オブジェクトは、データ・モデル内の特定の構造化データ・アイテムを示します。
テーマ・マップには、基準となる地理マップを指定する親コンポーネントと、色、パターンまたはマーカー、あるいはその両方でマップ・リージョンのスタイルを設定する、またはマップに凡例を追加するために使用される子コンポーネントがあります。接頭辞dvt:は、各テーマ・マップ・コンポーネント名の先頭に付いて、そのコンポーネントがADFデータ視覚化ツール(DVT)のタグ・ライブラリに属することを示します。次のマップ・コンポーネントを構成できます。
テーマ・マップ・コンポーネント(thematicMap): データが表示される基準となるマップの指定に使用されるメインのテーマ・マップ・コンポーネント。テーマ・マップは、米国、世界をはじめ、世界の大陸や地域(EMEAやAPACなど)などのあらかじめ作成された基準となるマップとともにパッケージ化されています。テーマ・マップ・コンポーネントでは、基準となるマップを表示するためのマップ・サービスは必要ありません。
レイヤー(areaLayer): 基準となるマップで表示されるレイヤーの指定に使用します。各areaLayerコンポーネントは、単一のレイヤー、たとえば、基準となるUSAマップ内の州またはポイント(都市)を参照し、areaLayerタグが存在するマップ・レイヤーのみが表示されます。次にレイヤー内にデータ・レイヤーをネストすることにより、データが1つのレイヤーに関連付けられます。areaLayer子タグは、面データ・レイヤー(areaDataLayer)と点データ・レイヤー(pointDataLayer)です。
面データ・レイヤー(areaDataLayer): マップ・レイヤーをデータ・コレクションに関連付けるために使用します。スタンプを使用すれば、データ・モデル内の各データ行をスタイル(色またはパターンなど)、マーカー(円形または四角形など)、またはイメージにより識別できます。
|
注意: スタンプを使用すると、テーマ・マップではエリア、マーカーまたはイメージごとに子コンポーネントが作成されません。むしろ、コンポーネントのコンテンツは、データ・コレクションの行など、データ属性ごとに1回、繰り返しレンダリングされるか、スタンプされます。 子コンポーネントにスタンプが設定されるたびに、現在のコンポーネントのデータがEL式のデータ・レイヤー・コンポーネントによって使用される |
データ・レイヤーの位置は、直下の子areaLocationタグによって識別されます。このコンポーネントでは、マップ・レイヤー内の名前付きのリージョンまたはエリアの場所を指定します。子タグ内でareaLocationタグにスタイル設定できる3種類のデータには、次のものがあります。
面(area): スタイル属性(塗りつぶし色、パターンまたは不透明度など)をマップの地理的リージョンにスタンプ・アウトするために使用します。
マーカー(marker): マップ上のデータ・ポイントに関連付けられた組込み形状またはカスタム形状をスタンプ・アウトするために使用します。マーカーは、基礎となるデータに基づいて色やパターンなどの異なるスタイル属性によりカスタマイズできます。
イメージ(af:image): マップの地理的リージョンに関連付けられたイメージをスタンプ・アウトするために使用します。
|
注意:
|
|
注意:
|
図25-21に、テーマ・マップのデータ・レイヤーを構成するための基本的なタグ構造を示します。
ポイント・データ・レイヤー(pointDataLayer): マップを特定のデータ・ポイントに、またはマップ・レイヤーをデータ・コレクションに関連付けるために使用します。データ・ポイントは、マップ・レイヤー内の名前付きポイント(米国マップ内の都市など)、または経度と緯度により、指定できます。スタンプを使用すれば、データ・モデル内の各ポイントは、マーカー(円形や四角形、またはイメージ)により識別できます。
|
注意: スタンプを使用すると、テーマ・マップではマーカーまたはイメージごとに子コンポーネントが作成されません。むしろ、コンポーネントのコンテンツは、データ・コレクションの行など、データ属性ごとに1回、繰り返しレンダリングされるか、スタンプされます。 子コンポーネントにスタンプが設定されるたびに、現在のコンポーネントのデータがEL式のポイント・レイヤー・コンポーネントによって使用される |
ポイント・レイヤーの位置は、直下の子pointLocationタグで識別されます。位置は、経度と緯度を指定するように構成したり、マップ・レイヤー内の名前付きエリアの位置によって構成したりできます。子タグ内でpointLocationタグにスタイル設定できる2種類のデータには、次のものがあります。
マーカー(marker): マップ上のデータ・ポイントに関連付けられた組込み形状またはカスタム形状をスタンプ・アウトするために使用します。マーカーは、基礎となるデータに基づいて色やパターンなどの異なるスタイル属性によりカスタマイズできます。
イメージ(af:image): マップの地理的リージョンに関連付けられたイメージをスタンプ・アウトするために使用します。
|
注意:
|
|
注意:
|
図25-22に、テーマ・マップのポイント・データ・レイヤーを構成するための基本的なタグ構造を示します。
ポイント・データ・レイヤーがテーマ・マップ・コンポーネントの直接の子として構成されている場合、データ・ポイントは常にグローバル・ポイント・レイヤーとして表示されます。ポイント・レイヤーがマップ・レイヤー内にネストされている場合、データ・ポイントは、そのマップ・レイヤーが表示されているときにのみ表示されます。
図25-23に、ポイント・データ・レイヤーをネストするためのタグ構造を示します。この図では、ポイント・データ・レイヤーpd1は、statesレイヤーが表示される場合にのみ表示されます。ポイント・データ・レイヤーpd2は、常に表示されます。
カスタム・レイヤー(customAreaLayer): 独立したリージョン・データから新規のマップ・レイヤーを作成し、新規に作成されたレイヤーをレイヤー階層に挿入するために使用します。カスタム・レイヤーは、事前定義のマップ・レイヤーを開き、下位レベルのリージョンを集約することで作成され、カスタム・レイヤー内に新規のリージョンが形成されます。カスタム・マップ・レイヤーを定義すると、他のマップ・レイヤーと同じように使用されます。
子customAreaコンポーネントを使用して、事前に定義された基準となるマップから、新しいエリアを形成するために集約されるリージョンを指定します。
カテゴリ属性(attributeGroups): データ・セット内のカテゴリ・データ値に基づいて色または形状などのスタイル属性値を生成するために使用します。
テーマ・マップ内のすべてのエリアまたはマーカーにわたるデフォルトのスタンプを構成する別の方法として、areaまたはmarkerコンポーネントの子attributeGroupsタグを使用して、データ・セット内のカテゴリ・グループに基づいてスタイル属性タイプを自動的に生成します。areaタグまたはmarkerタグとattributeGroupsタグの両方で、同じスタイル属性が設定されている場合は、attributeGroupsスタイル・タイプが優先されます。
データ・モデルでグループ化の基準となる列を表す属性に基づき、attributeGroupsコンポーネントにより、データ内の一意の値またはグループごとにスタイル値を生成できます。attributeGroupsタグのtypeプロパティにより、スタイル属性のタイプが指定され、それに対して値が作成されます。areaコンポーネントに対してサポートされているタイプは、color、patternおよびopacityです。markerコンポーネントに対してサポートされているタイプは、color、shape、pattern、opacity、scaleXおよびscaleYです。これらのタイプは、一意のデータ値ごとに複数のスタイル・プロパティを生成するために、スペース区切りのリストにまとめることができます。
生成されるデフォルトのスタイル値は、ADFスキンのCSSスタイル・プロパティを使用して定義されます。各attributeGroupsタイプには、ADFスキンで定義されたデフォルトのランプがあり、索引ベースのセレクタを目的の値に設定することによりカスタマイズできます。
データの表示でより精細な詳細レベルを実現するために、attributeGroupsコンポーネントで指定されたグループ化のルールを、次の子コンポーネントで定義される2つのタイプのルールによりオーバーライドできます。
一致ルール(attributeMatchRule): データが特定の値に一致する場合、属性を置き換えるために使用します。
例外ルール(attributeExceptionRule): 特定のブール条件が満たされる場合に、属性値を別の値に置き換えるために使用します。
|
注意:
|
凡例(legend): シンボルとラベルのペアにスタイル設定されたマップのデータの説明の表を表示するために使用します。凡例コンポーネントでは、色、形状、カスタム形状、塗りつぶしパターン、不透明度およびイメージのシンボルをサポートしています。
汎用セクション(legendSection): マップ内で表示するデータのスタイルを設定するためにスタンプされる、テーマ・マップのarea、marker、attributeGroupsまたはaf:imageコンポーネントを指す1つ以上のセクションを使用します。attributeGroupsコンポーネントからの汎用アイテムにより、エリアまたはマーカーの属性タイプを異なるセクションに分けられます。
汎用グループ(showLegendGroup): 汎用セクション・コンポーネントを含む公開可能なセクションを作成するために使用します。
テーマ・マップ・コンポーネント用に用意されている基準となる各マップには、一連のリージョンを表す事前に作成された複数のマップ・レイヤーがあります。たとえば、基準となるworldマップには、continents用のマップ・レイヤーとcountries用の別のレイヤーが含まれています。下位レベルのマップ・レイヤーのリージョンは、集約されて地理的階層内の次のレベルを構成します。マップ・レイヤーは、areaLayerコンポーネントのlayer属性で指定されます。
表25-1に、基準となる各マップ用の有効なマップ・レイヤーを示します。
表25-1 事前に作成された基準となるマップとレイヤー
| 基準となるマップ | レイヤー |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
データ・コレクションをテーマ・マップにバインドする際、データが表示される基準となるマップからリージョンのマップ位置IDを使用してエリアまたはポイント・データの位置を指定する列を、データ・モデルに指定する必要があります。エリアの位置はareaLocationコンポーネントのname属性で指定され、ポイントの位置は、type属性がpointNameに設定されている場合、pointLocationコンポーネントのpointName属性で指定されます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の基準となるマップの位置IDについて必要な知識に関する項を参照してください。
JDeveloperには、マップ・レイヤー、データ・レイヤーの構築や、テーマ・マップでデータを表示するためのエリアおよびマーカーのスタイル設定の開発を容易にするツールとして、レイヤー・ブラウザが用意されています。レイヤー・ブラウザは、ビジュアル・エディタ内のテーマ・マップの一番上に表示され、位置やサイズを変更できます。表示されていない場合は、マップ内で右クリックし、「レイヤー・ブラウザを開く」を選択します。
レイヤー・ブラウザでは、テーマ・マップとその階層マップ・レイヤーおよびコンポーネントの論理的構造を視覚的に表します。レイヤー・ブラウザでのコンポーネントの選択は、プロパティ・インスペクタ、構造ウィンドウおよびページのソース・コードでの選択と調整されます。
レイヤー・ブラウザのツールバーには、次の操作用のコントロールが表示されます。
追加: テーマ・マップにコンポーネントを追加して構成し、ソース・コードを追加するマップ・レイヤー、データ・レイヤー、エリアまたはマーカーの作成ダイアログを開くためのドロップダウン・メニューが表示されます。メニューの選択肢は、テーマ・マップの正しい構造を維持するためのものです。
編集: コンポーネントの設定を変更し、テーマ・マップのソース・コードを変更するために、データ・レイヤー、エリアまたはマーカーのバインディング・ダイアログを開きます。
削除: 選択したマップ・レイヤー、データ・レイヤー、エリアまたはマーカーをテーマ・マップ構造とソース・コードから削除します。
レイヤー・ブラウザには、階層構造に示された各コンポのIDが表示されます。コンポーネントには、一意の連続的に番号が付けられたid値が自動的に割り当てられます。マップ・レイヤー(areaLayer)には、al1、al2、al3などが割り当てられます。カスタム・レイヤー(customAreaLayer)には、cal1、cal2、cal3が割り当てられ、areaLayerコンポーネントにより連続的な順序で参照されます。エリア(areaDataLayer)およびポイント(pointDataLayer)コンポーネントを含むデータ・レイヤには、dl1、dl2、dl3などが割り当てられます。ポイント・レイヤー(pointDataLayer)は、テーマ・マップの直接の子として追加されると、グローバル・ポイント・レイヤーとなり、テーマ・マップに常に表示されます。マーカー(marker)には、m1、m2、m3などが割り当てられます。エリア(area)には、a1、a2、a3などが割り当てられます。
図25-24に、テーマ・マップの階層構造を表示したレイヤー・ブラウザを示します。
簡単なUI優先開発を使用してページを設計しているときには、コンポーネント・パレットを使用してテーマ・マップをJSFページに追加します。ページにテーマ・マップ・コンポーネントをドラッグ・アンド・ドロップすると、コンポーネント・ギャラリに使用可能な基準となるマップ、事前に作成されたリージョン・レイヤーおよびカスタム・レイヤー・オプションが表示され、テーマ・マップの作成時に視覚的に支援します。図25-25に、基準となる米国のマップと州レイヤーが選択されたテーマ・マップのコンポーネント・ギャラリを示します。
ダイアログが完了して、ページにテーマ・マップが追加されると、プロパティ・インスペクタを使用して、データ値を指定し、マップに追加の表示属性を構成できます。
プロパティ・インスペクタで、各属性フィールドのドロップダウン・メニューを使用して、プロパティの説明、およびEL式ビルダーまたはその他の専用ダイアログの表示などのオプションを表示できます。図25-26に、テーマ・マップ・コンポーネントtooloTipDisplay属性のドロップダウン・メニューを示します。
|
注意: アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用してテーマ・マップを作成でき、バインドが自動的に行われます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたテーマ・マップの作成に関する項を参照してください。 |
始める前に:
テーマ・マップの属性やテーマ・マップの子コンポーネントが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、25.6.1項「テーマ・マップの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、25.1.3項「マップ・コンポーネントの追加機能」を参照してください。
ページにテーマ・マップを追加する手順:
コンポーネント・パレットで、「ADFデータ視覚化」ページの「マップ」パネルから「テーマ・マップ」をページにドラッグ・アンド・ドロップし、コンポーネント・ギャラリに「テーマ・マップの作成」ダイアログを開きます。
ダイアログを使用して、事前に作成されたマップの階層で、テーマ・マップで表示する基準となるマップとレイヤーを選択します。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
プロパティ・インスペクタで、テーマ・マップの属性を表示します。ヘルプ・ボタンを使用して、thematicMapコンポーネントの完全なタグ・ドキュメントを表示します。
「共通」セクションを開きます。このセクションを使用して、次の属性を設定します。
Basemap: コンポーネント・ギャラリで選択された基準となるマップを変更する場合は、ドロップダウン・リストを使用して、有効な値usa、world、africa、asia、australia、europe、northAmerica、southAmerica、apac、emea、latinAmerica、usaAndCanadaまたはworldRegionsから選択します。
Map Layers: プロパティ・インスペクタ内に表示されるダイアログを使用して、テーマ・マップで表示する追加のマップ・レイヤーを追加します。たとえば、基準となる米国のマップには、国、州、郡、都市(ポイント)のレイヤーとカスタム・レイヤーが含まれています。「追加」アイコンに関連付けられたドロップダウン・リストを使用して、事前に定義された地理的階層に使用可能なマップ・レイヤーを追加、カスタム・マップ・レイヤーを作成して階層に挿入、または基準となるマップにグローバル・ポイント・レイヤーを追加します。「削除」アイコンを使用して、テーマ・マップで表示しないレイヤーを削除します。図25-27に、thematicMapコンポーネントのプロパティ・インスペクタで縁取りされたマップ・レイヤーのダイアログを示します。
または、レイヤー・ブラウザを使用して、テーマ・マップにマップ・レイヤーを追加できます。詳細は、25.6.3項「レイヤー・ブラウザの使用方法」を参照してください。
「外観」セクションを開きます。このセクションを使用して、次の属性を設定します。
ImageFormat: ドロップダウン・リストを使用して、テーマ・マップを表示するイメージ形式を選択します。デフォルトでは、テーマ・マップはFlash Playerで表示されます。詳細は、25.6.6項「FlashおよびPNGイメージ形式について」を参照してください。
TooltipDisplay: デフォルト(auto)では、ユーザーがマップ上でカーソルを移動すると、テーマ・マップに事前作成されたマップ・ラベルを使用してツールチップが自動的に表示されます。データが使用可能な場合、areaまたはmarkerコンポーネント・スタンプのshortDesc属性にラベルが連結されます。その他の有効な値には、ツールチップの表示を無効にするnoneと、スタンプからのデータのみを表示し、基準となるマップの事前に作成されたラベルを含めないshortDescがあります。詳細は、25.7項「テーマ・マップ表示属性のカスタマイズ」を参照します。
「アニメーション」サブセクション: このサブセクションのアニメーション属性を使用して、テーマ・マップのアニメーションを構成します。詳細は、25.8.3項「アニメーション効果の構成方法」を参照してください。
「動作」セクションを開きます。このセクションを使用して、次の属性を設定します。
Drilling: テーマ・マップ・レイヤー間でデータ・ビューのドリルを有効にするために使用します。ドロップダウン・リストから「オン」を選択して、ドリルを有効にします。デフォルト値は「オフ」です。
MaintainDrill: 新しいエリアをドリルするときに、以前にドリルしたエリアのドリル状態を維持するために、オプションのtrue値を指定するために使用します。デフォルト値はfalseです。
DrillBehavior: ドリル対象のエリアでオプションのzoomToFit効果を指定するために使用します。デフォルト値はnoneです。
ControlPanelBehavior: ドロップダウン・リストを使用して、テーマ・マップ・コントロール・パネルの表示を選択します。デフォルト値は、非表示/表示ボタンのみを表示するinitCollapsedです。その他の有効な値は、hiddenとinitExpandedです。
FeaturesOff: 実行時に無効にするエンド・ユーザー機能の空白区切りリストを入力します。有効な値は、pan、zoomおよびzoomToFitです。デフォルト値は指定なしです。
「その他」カテゴリを開きます。「サマリー」属性に、テーマ・マップの説明を入力します。この説明は、スクリーン・リーダーのユーザーがアクセスします。
コンポーネント・パレットを使用してテーマ・マップを作成すると、JDeveloperによりJSFページにコードが挿入されます。例25-7に、JSFページに挿入されるコードを示します。
例25-7 JSFページ内のテーマ・マップ・コード
<dvt:thematicMap basemap="usa" id="tm1"> <dvt:areaLayer layer="states" id="al1"/> </dvt:thematicMap>
レイヤー・ブラウザには、テーマ・マップの階層構造が表示されます。図25-28に、コンポーネント・パレットを使用してテーマ・マップを作成した後のレイヤー・ブラウザを示します。
次に、ADFデータ・コントロール・パネルおよびテーマ・バインディング・ダイアログを使用して、データをスタイル設定したエリアまたはマーカーで表示するように、テーマ・マップを構成できます。データ表示のためのテーマ・マップの構成の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたテーマ・マップの作成に関する項を参照してください。
デフォルトでは、テーマ・マップは、Flash Playerを使用して表示され、印刷時にはPortable Network Graphics (PNG)の出力形式が使用されます。FlashおよびPNGイメージ形式のどちらもでも、双方向ロケールがサポートされています。静的レンダリング(Flash表示のパンおよびズーム状態の維持など)は、印刷可能なPNGイメージで完全にサポートされます。
テーマ・マップを表示するには、adf-config.xmlでflash-player-usageコンテキスト・パラメータを設定して、アプリケーション全体にわたってFlashコンテンツの使用を無効にしないでください。詳細は、A.4.3項「コンポーネント出力形式としてのFlashの構成」を参照してください。
事前に作成されたマップ・レイヤー・ラベルや、テーマ・マップのデータ値をスタンプ・アウトするエリアおよびマーカー・コンポーネントのラベルなど、テーマ・マップのラベルの表示属性をカスタマイズできます。特殊な書式設定(通貨やパーセンテージなど)が必要なデータ値は、特殊記号や小数点を表示するように構成できます。ユーザーがカーソルをマップ上で移動したときにデータを表示するためのツールチップを構成することもできます。
デフォルトでは、事前に作成された基準となるマップの各マップ・レイヤーの各リージョンには、短いタイプと長いタイプのラベル(たとえば、基準となるworldマップのcountriesレイヤーでのBRAとBrazil)があります。マップ・レイヤーは、layer属性のareaLayerコンポーネントで、たとえば次のように指定されます。
<dvt:areaLayer id="al1" layer="countries">
|
注意: ラベルは、マップ・レイヤーの名前付きリージョン内にちょうど収まる場合にのみ表示されます。ラベルがリージョン内に納まらない場合は、基準となるマップのそのレイヤーに対してかわりのラベル位置を決める引出し線が指定されていないと表示されません。事前作成の |
図25-29に、基準となるeuropeマップとusaマップのデフォルトのラベルを示します。
基準となるマップで提供されている表示およびスタイル用のデフォルトのラベルはカスタマイズできます。
始める前に:
テーマ・マップの属性やテーマ・マップの子コンポーネントが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、25.6.1項「テーマ・マップの構成」を参照してください。
ページにすでにテーマ・マップが存在している必要があります。ない場合は、この章の指示に従ってテーマ・マップを作成します。詳細は、25.6.4項「ページにテーマ・マップを追加する方法」を参照してください。
マップ・レイヤー・ラベルをカスタマイズする手順:
構造ウィンドウでラベルのカスタマイズを行うマップ・レイヤーを表す「dvt:areaLayer」コンポーネントを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「外観」セクションを開いて次の属性を設定します。
LabelDisplay: ドロップダウン・リストを使用して、事前に作成された基準となるマップのレイヤー用ラベルをどのように表示するかを選択します。有効な値は、リージョンに十分なスペースがある場合にラベルを表示するauto (デフォルト)と、基準となるマップのこのレイヤーのすべてのリージョン用のラベルを表示するon、およびラベルの表示を無効にするoffです。
LabelStyle: ラベル・フォント用に使用するフォント関連のCSSスタイルを入力します。
LabelType: ドロップダウン・リストを使用して、事前に作成された基準となるマップの表示するラベルを選択します。有効な値は、基準となるマップで定義されている短いラベルを表示するshort (デフォルト)(TXなど)、および基準となるマップで定義されている長いラベルを表示するlong (Texasなど)です。
スタイル属性(塗りつぶしの色、パターンまたは不透明度など)をマップの地理的リージョンにスタンプ・アウトするareaコンポーネントと、データ・ポイントと関連付けられた組込みまたはカスタムの形状をマップにスタンプ・アウトするmarkerコンポーネントの属性を指定することにより、基準となるマップ内のデフォルトのラベルをオーバーライドすることもできます。
エリアおよびマーカーのラベルをカスタマイズする手順:
構造ウィンドウで、ラベルをカスタマイズするスタンプを表す「dvt:aler」コンポーネントまたは「dvt:areaGraph」コンポーネントを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「その他」セクションを開いて次の属性を設定します。
LabelDisplay: ドロップダウン・リストを使用して、「オン」を選択し、「value」属性に表示されるテキストを表示します。
Value: 「LabelDisplay」が「オン」に設定されている場合に、エリアまたはマーカー・ラベル用に使用するテキストを入力します。
LabelStyle: エリアまたはマーカーのラベル・フォント用に使用するフォント関連のCSSスタイルを入力します。
LabelPosition: マーカー・ラベルにのみ使用可能です。ドロップダウン・リストを使用して、指定した値のラベルが表示されるマーカーに対する位置を選択します。有効な値は、「中央揃え」 (デフォルト)、「上詰め」および「下詰め」です。
|
注意: マーカーがリージョンに |
ShortDesc: エリアまたはマーカー・スタンプ用に使用する短い説明を入力します。この値は、ユーザーがカーソルをエリアまたはマーカーの上へ移動したときに表示されるツールチップに使用されます。詳細は、25.7.2項「データを表示するツールチップの構成方法」
デフォルトでは、ユーザーがマップ上でカーソルを移動すると、テーマ・マップにマップ・レイヤー・ラベルを使用してツールチップが自動的に表示されます。データが使用可能な場合、areaまたはmarkerコンポーネント・スタンプの値にラベルが連結されます。使用可能なデータのみを表示するように、ツールチップを構成することもできます。
始める前に:
テーマ・マップの属性やテーマ・マップの子コンポーネントが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、25.6.1項「テーマ・マップの構成」を参照してください。
ページにすでにテーマ・マップが存在している必要があります。ない場合は、この章の指示に従ってテーマ・マップを作成します。詳細は、25.6.4項「ページにテーマ・マップを追加する方法」を参照してください。
データを表示するツールチップを構成する手順:
構造ウィンドウで「dvt:thematicMap」コンポーネントを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「外観」セクションを開きます。TooltipDisplay属性には、エリアまたはマーカー・スタンプの値に連結されたラベルを表示する場合は「auto」を、値のみを表示する場合は「shortDesc」を選択します。
構造ウィンドウで、ツールチップにデータを表示するスタンプを表す「dvt:area」コンポーネントまたは「dvt:marker」コンポーネントを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「その他」セクションを開きます。「ShortDesc」属性には、ツールチップで表示する値を入力します。たとえば、エリア・コンポーネントのvalue属性が#{row.data}の場合、同じ値をshortDesc属性に使用します。
テーマ・マップのareaおよびmarkerコンポーネントでは、ラベルに数値データ値(ドル値またはパーセンテージなど)を表示できます。エリアおよびマーカー・ラベルは、コンポーネントのvalue属性で指定されます。数値データ値の書式は、標準のADFコンバータaf:convertNumberをエリアまたはマーカー・コンポーネントの子として追加するか、コンバータをEL式によりコンポーネント上で直接指定することで設定できます。コンバータと子af:convertNumberタグの両方が指定されている場合、子タグのプロパティが優先されます。
始める前に:
テーマ・マップの属性やテーマ・マップの子コンポーネントが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、25.6.1項「テーマ・マップの構成」を参照してください。
ページにすでにテーマ・マップが存在している必要があります。ない場合は、この章の指示に従ってテーマ・マップを作成します。詳細は、25.6.4項「ページにテーマ・マップを追加する方法」を参照してください。
テーマ・マップでエリアまたはマーカー・ラベルがすでに構成されている必要があります。ない場合は、この章の指示に従ってエリアまたはマーカー・ラベルをカスタマイズします。詳細は、25.7.1項「テーマ・マップ・ラベルのカスタマイズ方法」を参照してください。
エリアまたはマーカー・ラベルで数値データ値の書式を設定する手順:
構造ウィンドウで、書式を設定するスタンプを表す「dvt:area」または「dvt:marker」コンポーネントを右クリックし、「dvt:areaの中に挿入」または「dvt:markerの中に挿入」→「数値の変換」を選択します。
プロパティ・インスペクタで、「af:convertNumber」コンポーネントの属性の値を指定して、通知の書式設定を行います。ヘルプ・ボタンを使用して、af:convertNumberコンポーネントの完全なタグ・ドキュメントを表示します。
例25-8に、エリアおよびマーカー・ラベルの数値データ値の書式を設定するためのサンプル・コードを示します。
例25-8 エリアおよびマーカー数値データ値の書式設定用のサンプル・コード
...
<dvt:area id="a2" labelDisplay="on" value="#{mapBean.value}" >
<af:convertNumber id="cn1" type="currency"/>
</dvt:area>
<dvt:marker id="m2" labelDisplay="on" value="#{mapBean.value}" >
<af:convertNumber id="cn1" type="currency"/>
</dvt:marker>
...
または、EL式によりエリアまたはマーカー・コンポーネントに直接コンバータを指定します。次に例を示します。
<dvt:marker id="m1" labelDisplay="on" value="#{mapBean.value}"
converter="#{mapBean.myConverter}"/>
テーマ・マップでは、選択およびアクションイベント、ドリル、ポップアップ、アニメーションおよびドラッグ・アンド・ドロップ操作などの相互作用機能がサポートされています。
ユーザーが複数のデータ・レイヤーにわたり1つ以上のエリアまたはマーカーを選択できるように、テーマ・マップ・コンポーネントを構成することができます。デフォルトでは、選択は無効です。
areaDataLayerおよびpointDataLayerコンポーネントで選択を構成すると、1つ以上のエリアまたはマーカー・スタンプの選択ができるようになります。
選択を有効にすると、エリアまたはマーカー・スタンプを、出力テキストの表示や別のページへの移動などのカスタム・イベントを指定するためのアクション・リスナーで構成することができます。ADFアクション・イベントの詳細は、第6章「イベントの処理」を参照してください。
図25-30に、人のマーカーをクリックすると出力テキストが表示され、円形のマーカーをクリックすると別のJSFページに移動するように構成されたテーマ・マップを示します。
始める前に:
テーマ・マップの属性やテーマ・マップの子コンポーネントが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、25.6.1項「テーマ・マップの構成」を参照してください。
ページにすでにテーマ・マップが存在している必要があります。ない場合は、この章の指示に従ってテーマ・マップを作成します。詳細は、25.6.4項「ページにテーマ・マップを追加する方法」を参照してください。
テーマ・マップでデータを表示するために、エリアまたはマーカーを1つ持つデータ・レイヤーがすでに構成されている必要があります。
選択およびアクション・イベントを構成する手順:
構造ウィンドウで「dvt:areaDataLayer」または「dvt:pointDataLayer」コンポーネントを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで「動作」セクションを展開します。「SelectionMode」属性には、エリアまたはマーカーの1回の選択を可能にする場合は「single」を、エリアまたはマーカーの複数の選択を可能にする場合は「multiple」を選択します。
構造ウィンドウで、アクション・イベントを構成するスタンプを表す「dvt:area component」コンポーネントまたは「dvt:marker」コンポーネントを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで「動作」セクションを展開します。このセクションで、次の属性を設定します。
Action: コンポーネントによって送信されるアクション・メソッド、またはアクションの静的な結果に対する参照を入力します。たとえば、mapActionなどです。
ActionListener: アクション・リスナーに対するメソッド参照を入力します。たとえば、#{tmapEventBean.processClick}などです。
例25-9に、アクション・イベントを起動するようにマーカーを構成するためのサンプル・コードを示します。
例25-9 テーマ・マップのマーカー・アクション・イベントのサンプル・コード
<f:facet name="center">
<dvt:thematicMap id="thematicMap"
imageFormat="flash" basemap="usa"
inlineStyle="width:98%;height:95%;"
summary="Thematic map showing action events">
<dvt:areaLayer id="areaLayer" layer="states"
labelDisplay="off">
<dvt:areaDataLayer id="dataLayer"
contentDelivery="immediate"
value="#{tmapBean.colorModel}"
var="row"
varStatus="rowStatus"
selectionMode="single">
<dvt:areaLocation id="dataLoc"
name="#{row.name}">
<dvt:marker id="marker1"
shape="human" scaleX="3"
scaleY="3"
fillColor="#666699"
actionListener="#{tmapEventBean.processClick}"
rendered="#{row.category == 'category1'}"
shortDesc="Human shape"/>
<dvt:marker id="marker2"
shape="circle"
scaleX="2" scaleY="2"
fillColor="#006666"
action="mapAction"
rendered="#{row.category == 'category2'}"
shortDesc="Circle shape"/>
</dvt:areaLocation>
</dvt:areaDataLayer>
</dvt:areaLayer
</dvt:thematicMap>
</f:facet>
<f:facet name="end">
<af:outputText value="#{tmapEventBean.clickString}"
id="ot1"
partialTriggers="thematicMap:areaLayer:dataLayer:marker1"/>
</f:facet>
宣言的マスターディテール処理(テーマ・マップの関連データを表などのページ上の別のUIコンポーネントに表示するなど)のための選択リスナーを持つエリアまたはポイント・データ・レイヤーを構成することもできます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のマスター/ディテール関係の構成に関する項を参照してください。
テーマ・マップのareaおよびmarkerコンポーネントは、情報を提供したり、エンド・ユーザーからの入力を要求したりするポップアップのダイアログ、ウィンドウおよびメニューが表示されるように構成できます。af:popupコンポーネントを他のADF Facesコンポーネントで使用すると、セカンダリ・ウィンドウでの情報の表示および非表示、追加データの入力、コンテキスト・メニューなどの機能の呼出しを、エンド・ユーザーに許可する機能を構成できます。
ADF Facesのコンポーネントでは、ポップアップの表示または非表示にJavaScriptは不要です。af:showPopupBehaviorタグは宣言的ソリューションとなるため、popupコンポーネントを開くためのJavaScriptの作成や、スクリプトのpopupコンポーネントへの登録の必要がありません。これらのコンポーネントの詳細は、第15章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。
たとえば、ダイアログまたはノート・ウィンドウで情報を表示するポップアップを、テーマ・マップのエリアまたはマーカーと関連付けることができます。図25-31には、選挙結果に関するデータのダイアログを表示するためにクリックされたテーマ・マップ・エリア(テキサス)と、特定の場所に関するデータのノート・ウィンドウを表示するマーカー(人)上にあるカーソルが示されています。
始める前に:
テーマ・マップの属性やテーマ・マップの子コンポーネントが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、25.6.1項「テーマ・マップの構成」を参照してください。
ページにすでにテーマ・マップが存在している必要があります。ない場合は、この章の指示に従ってテーマ・マップを作成します。詳細は、25.6.4項「ページにテーマ・マップを追加する方法」を参照してください。
テーマ・マップのエリアまたはマーカー・コンポーネントで参照するポップアップ・コンポーネントを作成しておく必要があります。例25-10に、エリア・スタンプをクリックすると参照されるダイアログのサンプル・コードを示します。
例25-10 エリア・ダイアログ・ポップアップのサンプル・コード
<af:popup id="pop1" contentDelivery="lazyUncached" launcherVar="source"
eventContext="launcher">
<af:setPropertyListener from="#{tmapPopupBean.colorModel.rowData}"
to="#{tmapPopupBean.source}"
type="popupFetch"/>
<af:dialog id="nw1" modal="false" type="none"
title="Results - #{tmapPopupBean.source.fullName}">
<af:panelGroupLayout id="pgl6">
<af:panelGroupLayout id="pgl7" layout="horizontal"
halign="center">
<af:outputText value="Candidate 1" id="ot2"
inlineStyle="color:#{tmapPopupBean.strColor2};
font-size:medium;"/>
<af:spacer width="50" height="10" id="spacer1"/>
<af:outputText value="Candidate 2" id="ot1"
inlineStyle="color:#{tmapPopupBean.strColor1};
font-size:medium;"/>
</af:panelGroupLayout>
<af:panelGroupLayout id="pgl5" layout="horizontal"
halign="center">
<dvt:pieGraph id="graph1" subType="PIE"
inlineStyle="height:250.0px;width:250.0px"
tabularData="#{tmapPopupBean.graphData[tmapPopupBean.source]}"
imageFormat="PNG">
<dvt:background fillTransparent="true"/>
<dvt:graphPieFrame fillTransparent="true"/>
<dvt:seriesSet>
<dvt:series index="0" color="#{tmapPopupBean.color1}"/>
<dvt:series index="1" color="#{tmapPopupBean.color2}"/>
</dvt:seriesSet>
<dvt:sliceLabel rendered="true">
<dvt:graphFont id="graphFont1" size="14"/>
</dvt:sliceLabel>
<dvt:pieLabel rendered="false"/>
<dvt:legendArea rendered="false"/>
</dvt:pieGraph>
</af:panelGroupLayout>
</af:panelGroupLayout>
</af:dialog>
</af:popup>
例25-11に、ユーザーがマウスをマーカー・スタンプ上に移動すると参照されるノート・ウィンドウのサンプル・コードを示します。
例25-11 マーカー・ノート・ウィンドウのサンプル・コード
<af:popup id="pop2" contentDelivery="lazyUncached" launcherVar="source"
eventContext="launcher">
<af:setPropertyListener from="#{tmapPopupBean.pointModel.rowData}"
to="#{tmapPopupBean.noteSource}"
type="popupFetch"/>
<af:noteWindow id="nw2">
<af:panelGroupLayout id="pgl8" halign="center" layout="vertical">
<af:outputText value="Latitude: #{tmapPopupBean.noteSource.latitude}"
id="ot4"/>
<af:outputText value="Longitude: #{tmapPopupBean.noteSource.longitude}"
id="ot5"/>
</af:panelGroupLayout>
</af:noteWindow>
</af:popup>
ポップアップ・コンポーネントの詳細は、第15章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。
エリアまたはマーカーにポップアップを追加する手順:
構造ウィンドウで「dvt:area」または「dvt:marker」コンポーネントを右クリックし、「dvt:areaの中に挿入」または「dvt:markerの中に挿入」→「ポップアップ表示動作」を選択します。
プロパティ・インスペクタで次の属性を設定します。
PopupId: エリアまたはマーカー・コンポーネントによって参照されるポップアップのIDを入力します。コロン1つで始まるIDは、コロンを除いた後、絶対値として扱われます。
TriggerType: 表示されるポップアップをトリガーするイベント・タイプを入力します。テーマ・マップのエリアまたはマーカー・コンポーネントの有効な値は、action、clickおよびmouseHoverです。
Align: ドロップダウン・リストから、ポップアップをどのようにエリアまたはマーカー・コンポーネントと位置合せするかを選択します。
AlignID: ポップアップと関連付けられたエリアまたはマーカー・コンポーネントのIDを入力します。コロン1つで始まるIDは、コロンを除いた後、絶対値として扱われます。
例25-12に、ポップアップ・コンポーネントをテーマ・マップ内のエリアおよびマーカー・スタンプに追加するためのサンプル・コードを示します。
例25-12 エリアおよびマーカー・コンポーネントに関連付けられたポップアップ
<dvt:thematicMap id="thematicMap" imageFormat="flash
basemap="usa" summary="Thematic map showing voting data in US">
<dvt:legend label="Legend">
<dvt:showLegendGroup label="Voting Majority">
<dvt:legendSection source="areaLayer:dataLayer:area1"/>
</dvt:showLegendGroup>
<dvt:legendSection source="areaLayer:pointLayer:marker1"/>
</dvt:legend>
<dvt:areaLayer id="areaLayer" layer="states">
<dvt:areaDataLayer id="dataLayer" contentDelivery="immediate"
value="#{tmapPopupBean.colorModel}"
var="row" varStatus="rowStatus">
<dvt:areaLocation id="areaLoc" name="#{row.name}">
<dvt:area id="area1"
fillColor="#{row.value > 50 ? tmapPopupBean.color1 :
tmapPopupBean.color2}"
<f:attribute name="legendLabel" value="#{row.value > 50 ? 'Candidate 2' :
'Candidate 1'}" />
<af:showPopupBehavior triggerType="click"
popupId="::::pop1"
alignId="area1"
align="endAfter"/>
</dvt:area>
</dvt:areaLocation>
</dvt:areaDataLayer>
<dvt:pointDataLayer id="pointLayer"
value="#{tmapPopupBean.pointModel}" var="row"
varStatus="rowStatus"
contentDelivery="immediate">
<dvt:pointLocation id="pointLoc" type="pointXY"
pointX="#{row.longitude}"
pointY="#{row.latitude}">
<dvt:marker id="marker1" shape="human" fillColor="#FF9900"
scaleX="3" scaleY="3"
<f:attribute name="legendLabel" value="Location of Interest" />
<af:showPopupBehavior triggerType="mouseHover"
alignId="marker1"
popupId="::::pop2"
align="endAfter"/>
</dvt:marker>
</dvt:pointLocation>
</dvt:pointDataLayer>
</dvt:areaLayer>
</dvt:thematicMap>
デフォルトでは、テーマ・マップは、マップに関連付けられたデータが変更されるときや、リージョンがマップでドリルされるときに、マップの初期レンダリング上でアニメーション化されます。各アニメーション・イベントのデフォルト設定はカスタマイズできます。
始める前に:
テーマ・マップの属性やテーマ・マップの子コンポーネントが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、25.6.1項「テーマ・マップの構成」を参照してください。
ページにすでにテーマ・マップが存在している必要があります。ない場合は、この章の指示に従ってテーマ・マップを作成します。詳細は、25.6.4項「ページにテーマ・マップを追加する方法」を参照してください。
テーマ・マップでアニメーション効果をカスタマイズする手順:
構造ウィンドウで「thematicMap」コンポーネントを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「外観」セクションを開きます。このセクションを使用して、次の属性を設定します。
AnimationDuration: アニメーションの継続時間をミリ秒単位で入力します。デフォルト値は1000です。
AnimationOnDisplay: ドロップダウン・リストを使用して、テーマ・マップの初期表示上のアニメーション効果を選択します。デフォルト値は「zoom」です。
AnimationOnDrill: ドロップダウン・リストを使用して、マップ・レイヤーが下位レベルへドリルされるときのアニメーション効果を選択します。デフォルト値は「alphaFade」です。
AnimationOnMapChange: ドロップダウン・リストを使用して、エリアまたはポイント・データ・レイヤーの値が変更されたとき、または基準となるマップが変更されたときのアニメーション効果を選択します。デフォルト値は指定なしです。
表25-2に、サポートされているマップ・イベントごとに使用可能なアニメーション効果を示します。
表25-2 テーマ・マップのアニメーション効果
| アニメーション効果 | AnimationOnDisplay | AnimationOnDrill | AnimationOnMapChange |
|---|---|---|---|
|
|
x |
x |
x |
|
|
x |
x |
x |
|
|
x |
x |
|
|
|
x |
x |
|
|
|
x |
x |
|
|
|
x |
x |
|
|
|
x |
x |
x |
|
|
x |
x |
|
|
|
x |
x |
|
|
|
x |
x |
|
|
|
x |
x |
|
|
|
x |
x |
|
|
|
x |
x |
ADF Facesフレームワークには、ページ上の場所から別の場所へアイテムをドラッグ・アンド・ドロップする機能があります。テーマ・マップでは、子af:dragSourceコンポーネントを追加し構成することにより、areaおよびmarkerコンポーネントをドラッグ元として、子af:dropTargetコンポーネントを追加し構成することにより、areaLayerコンポーネントをドラッグ・ターゲットとして使用することができます。たとえば、米国マップ内のある州の人口を表すエリアをドラッグし、それを表にドロップしてそのデータを表示することができます。
始める前に:
テーマ・マップの属性やテーマ・マップの子コンポーネントが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、25.6.1項「テーマ・マップの構成」を参照してください。
ページにすでにテーマ・マップが存在している必要があります。ない場合は、この章の指示に従ってテーマ・マップを作成します。詳細は、25.6.4項「ページにテーマ・マップを追加する方法」を参照してください。
エリアまたはマーカーをドラッグ元として使用する手順:
構造ウィンドウで、ドラッグ元として構成する「area」または「marker」コンポーネントを右クリックし、「dvt:areaの中に挿入」または「dvt:markerの中に挿入」→「ドラッグ元」を選択します。
プロパティ・インスペクタで、「actions」属性を指定します。
例25-13に、エリアをドラッグ元として追加し構成するためのサンプル・コードを示します。
例25-13 ドラッグ元としてのエリアのサンプル・コード
<dvt:area id="area" fillColor="#{tmapTargetActualBean.colorObj}"
shortDesc="#{tmapTargetActualBean.tooltip}">
<af:dragSource actions="COPY" discriminant="DnDDemoModel"/>
</dvt:area>
マップ・レイヤーをドラップ・ターゲットとして使用する手順:
構造ウィンドウで、ドラッグ・ターゲットとして構成する「areaLayer」コンポーネントを右クリックし、「dvt:areaLayerの中に挿入」→「ドロップ・ターゲット」を選択します。
イベントを処理するマネージドBeanでメソッドとして評価されるdropListenerの式を入力します。
ステップ2で作成したEL式で参照されるマネージドBeanに、ドラッグ・アンド・ドロップ機能を処理するイベント・ハンドラ・メソッドを(EL式での名前と同じ名前を使用して)dropListener属性に対して作成します。
例25-14に、マップ・レイヤーをドロップ・ターゲットとして追加し構成するためのサンプル・コードを示します。
例25-14 ドロップ・ターゲットとしてのエリア・レイヤーのサンプル・コード
<dvt:areaLayer id="areaLayer" layer="states">
<af:dropTarget actions="COPY"
dropListener="#{TestDropHandler.handleCollectionFireDrop}">
<af:dataFlavor flavorClass="java.util.Collection"/>
</af:dropTarget>
</dvt:areaLayer>
ドラッグ・アンド・ドロップ機能の追加の詳細は、33.5項「コンポーネントのドラッグ・アンド・ドロップ機能の追加」を参照してください。
