26 データバインドされたADFデータ視覚化コンポーネントの作成

この章では、「データ・コントロール」パネルおよびADFデータバインディングを使用して、データバインドされたADFデータ視覚化コンポーネントを作成する方法について説明します。これらのコンポーネントを使用すると、様々なチャート、各種のレガシー・グラフ、各種ゲージ、ピボット・テーブル、複数レイヤーの情報を持つ地理マップ、テーマ・マップ各種ガント・チャート、時系列、階層ビューア、ツリーマップおよびサンバーストを使用してデータを表示および分析できるようになります。

この章には次の項が含まれます:

• 26.1項「ADFデータ視覚化コンポーネントの作成の概要」

• 26.2項「データバインドされたチャートの作成」

• 26.3項「データバインドされたグラフの作成」

• 26.4項「データバインドされたゲージの作成」

• 26.5項「データバインドされたNBoxの作成」

• 26.6項「データバインドされたピボット・テーブルの作成」

• 26.7項「データバインドされた地理マップの作成」

• 26.8項「データバインドされたテーマ・マップの作成」

• 26.9項「データバインドされたガント・チャートの作成」

• 26.10項「データバインドされた時系列の作成」

• 26.11項「データバインドされた階層ビューアの作成」

• 26.12項「データバインドされたツリーマップおよびサンバーストの作成」

• 26.13項「データバインドされたダイアグラムの作成」

26.1 ADFデータ視覚化コンポーネントの作成の概要

ADFデータ視覚化コンポーネントは、データを視覚的に表示、分析するための幅広いグラフィック機能と表機能を提供します。

チャート、ゲージおよびレガシー・グラフ・コンポーネントにより、データがレンダリングされます。ただし、チャートやグラフでは、複数の軸上の複数のデータ・ポイントを様々な方法で評価できます。豊富な種類のチャートにより、あるグループの結果を別のグループの結果と比較することが容易になります。一方、ゲージでは、単一のデータ・ポイントを重視し、そのポイントを最小、最大およびしきい値インジケータと比較して問題を識別します。

ピボット・テーブル・コンポーネントでは、複数レイヤーのデータ・ラベルをグリッドの行エッジまたは列エッジでサポートするグリッドが生成されます。オプションのピボット・フィルタ・バーはページ・エッジを使用して、ビューに表示されていないピボット・テーブル・データをフィルタします。このコンポーネントには、グリッド・データの小計および合計を自動的に生成するオプションもあります。ピボット・テーブルを使用すると、データ・レイヤーをあるエッジから別のエッジに切り替えてデータの表示を変更できます。たとえば、あるピボット・テーブルには、最初、行エッジに複数地域にわたる商品売上合計、列エッジに年別の明細が表示されていたとします。実行時に地域と年を切り替えると、複数年にわたる商品売上合計の地域別明細が表示されます。実行時に、エンド・ユーザーは内部列ラベルに表示されるボタンをクリックして、昇順または降順で行をソートできます。

地理マップ・コンポーネントはビジネス・データを空間的に表現し、1つのマップ上に複数層(テーマとも呼ばれる)の情報を重ね合せられるようにします。たとえば、アメリカ合衆国のマップでは、色の明度を変えて各州における商品の人気を示すカラー・テーマ、商品カテゴリ内での売上を示す円グラフ・テーマ、各倉庫の正確な場所を識別する点テーマなどを使用できます。この3つの全テーマをアメリカ合衆国の地図に重ね合せると、特定の地域で商品の人気度に応じた十分な在庫があるかどうかを簡単に評価できます。

テーマ・マップ・コンポーネントでは、ビジネス・データをスタイル設定されたエリア内にパターンまたは関連付けられたマーカーとして表し、Oracle MapViewerサービスへの接続は必要ありません。テーマ・マップでは、地理マップでの地理的な詳細なしで、データに焦点を合せます。テーマ・マップは、米国、世界をはじめ、世界の大陸や地域(EMEAやAPACなど)などのあらかじめ作成されたベース・マップとともにパッケージ化されています。それぞれのベース・マップには、いくつかのリージョンのセットと、都市の固定セットが1つ含まれます。リージョンまたは都市の1つのセットはレイヤーと呼ばれます。各レイヤーは、データ・コレクションにバインドし、データを色やパターンの塗りつぶし、またはデータ・マーカー、あるいはその両方で表すためにスタイルを設定できます。実行時には、テーマ・マップでドリルが有効になっていないかぎり、一度に表示できるのは1つのマップ・レイヤーとその関連するデータのみです。

ガント・チャート・コンポーネントには、プロジェクト・ガント・チャート(プロジェクト管理を重視)、スケジュール・ガント・チャート、およびリソース使用率ガント・チャート(どちらもリソース管理を重視)の3種類があります。それぞれのガント・チャートでは、次のリージョンを分割線と組み合せて表示します。

• リスト・リージョンの内容: 分割線の左側には、タスクのリスト(プロジェクト・ガント・チャートの場合)またはリソースのリスト(リソース使用率ガント・チャートとスケジュール・ガント・チャートの場合)が表示されます。このリージョンでは、任意の数の関連情報の列を追加で表示できます。

• グラフ・リージョンの内容: 分割線の右側には、時間の経過に伴うタスクの進行状況、リソース使用率またはリソースの進行状況のグラフを示す領域があります。ガント・チャートでは時間軸を拡大または縮小できるため、必要な期間にわたって管理情報を参照できます。

時系列コンポーネントは、ユーザーが日付ベースのイベントを時間順に表示し、定義された時間範囲内を簡単に前後に移動することを可能にする対話型のデータ視覚化ツールです。二重時系列を使用して、イベントの対照比較を行うことができます。

時系列は、時間軸に沿った時系列項目としての各イベントの表示、時系列内に表示可能な期間に対応した移動可能な概要ウィンドウ、および時系列に対する合計時間増分を表示する概要時間軸から構成されます。水平ズーム制御を使用して、表示可能な時間範囲を変更できます。イベントに対応する時系列項目には、関連付けられた情報またはアクションが表示され、時系列内のイベントの日付に接続されています。時系列項目は、概要パネル内のマーカーにより表されます。時系列コンポーネントでは、3つ以上のイベント系列はサポートされていません。

階層ビューア・コンポーネントは、リンクされた形状のセットとして階層データを表示したグラフィックを生成します。形状とリンクはデータの要素と関係に対応します。たとえば、階層ビューア・コンポーネントを、従業員データに基づく組織図の生成に使用することができます。実行時、エンド・ユーザーはグラフィックをパンおよびズームし、このグラフィックが表示している管理階層を展開、選択、およびナビゲートすることができます。

treemapおよびsunburstコンポーネントは、数量的な階層データを、サイズと色で視覚的に表された2つのディメンションで表示します。たとえば、ツリーマップまたはサンバーストを使用して四半期ごとの地域別売上を表示して売上動向を示すことができます。この場合、ノードのサイズを使用して各地域の売上高を表し、ノードの色を使用してその地域の売上高が四半期内に増減したかどうかを表せます。

ダイアグラム・コンポーネントは、(データを表すノードおよびノード間の関係を表すリンクと呼ばれる)図形を使用して、情報のモデル化、表現および視覚化に使用できる対話型コンポーネントを生成します。

ADFデータ視覚化コンポーネントをレンダリングできるようにするには、これらのコンポーネントをそれぞれ、データにバインドする必要があります。これはコンポーネントの外観は表示されるデータによって変わるからです。この章では、各コンポーネントをデータ・ソースにバインドする方法について説明します。

26.2 データバインドされたチャートの作成

チャートはデータ・コレクションに基づいています。データバインドされたチャートを作成するには、「データ・コントロール」パネルから「JSF」ページにコレクションをドラッグ・アンド・ドロップして、チャートにデータ・コレクション属性をバインドします。

チャートには、データの系列とグループが表示されます。系列とグループは、データのグリッドの行と列にたとえることができます。通常、グリッドの行はチャートの系列として表示され、グリッドの列はグループとして表示されます。

大半のチャートでは、系列は同じ色のマーカーのセットとして表示されます。通常、チャートの凡例に、各系列の識別子と対応する色が表示されます。たとえば、棒グラフで黄色の棒が靴の売上げを示し、緑色の棒がブーツの売上げを示す、などです。

グループの表示は、チャート・タイプによって異なります。たとえば、積上げ棒グラフでは、各積層がグループです。グループは年などの期間を表す場合もあります。グループが地域などの地理上の場所を表す場合もあります。

チャート・タイプのデータ要件に応じて、1つのグループに複数のデータ値が必要な場合があります。たとえば、散布図では、データ・マーカーごとに2つの値が必要です。1つ目の値はX軸上のマーカーの位置を決め、2つ目の値はY軸上のマーカーの位置を決めます。チャートおよびデータの要件の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の、チャート・コンポーネントのデータ要件に関する項を参照してください。

データ・コレクション内の属性には、データ値またはデータ値のカテゴリを指定できます。データ値は、棒の高さなどのマーカーまたは散布図のポイントで示される数字です。データ値のカテゴリは、軸のラベルとして示されるメンバーになるか、ツールチップの追加プロパティとして表示されます。バインディング内で属性が担うロール(データ値またはID)は、データ型およびマップされる場所(棒やX軸など)の両方によって決まります。

「データ・コントロール」パネルから挿入されたデータ・コレクションを使用してチャートを作成する場合は、コンポーネント・ギャラリを使用すると、多数のチャート・カテゴリ、チャート・タイプおよびレイアウト・オプションから選択できます。チャート・カテゴリは、1つ以上の異なるタイプのチャートを1つのグループにまとめたものです。たとえば、「面」カテゴリには次のタイプのチャートが含まれます。

• 面

• 積上げ面

チャートの作成時に表示されるコンポーネント・ギャラリを見てまわり、使用可能なチャート・カテゴリ、タイプおよびそれぞれの説明を確認してください。図26-1に、「データ・コントロール」パネルを使用しているときにADFチャート用に表示される、「コンポーネント・ギャラリ」を示します。

図26-1 チャートのコンポーネント・ギャラリ

注意: paretoおよびstockコンポーネントは、クライアント側チャート・コンポーネントを優先するため使用が推奨されないレガシー・サーバー側グラフです。データバインドされたレガシー・グラフの作成の詳細は、26.3項「データバインドされたグラフの作成」を参照してください。

表26-1に、チャートのコンポーネント・ギャラリに表示されるカテゴリを示します。各カテゴリには、1つ以上のチャート・タイプが関連付けられています。

表26-1 コンポーネント・ギャラリのADFチャート・カテゴリ

イメージ	カテゴリ	説明
	面	データが塗りつぶされた面として表されるチャートを作成します。面チャートを使用して、過去12か月の売上げなど、ある期間の傾向を示します。面チャートでは、1つの軸上に最低2グループのデータが必要です。通常、この軸には期間(月など)のラベルが付けられます。
	棒	データが一連の垂直な棒として表されるチャートを作成します。製品またはカテゴリ間で値を比較するため、または期間別に分類された集計データを表示するために使用します。
	バブル	データが丸いデータ・マーカー(バブル)の場所と大きさによって表されるチャートを作成します。3タイプの値の相関を示すために使用します(特に、多数のデータ・アイテムがあり、全般的な関係を確認する場合)。たとえば、バブル・チャートを使用して、従業員の給与(X軸)、経験年数(Y軸)と生産性(バブルのサイズ)をプロットします。このようなチャートでは、生産性を給与および経験と比較して調べることができます。
	組合せ	異なるタイプのデータ・マーカー(棒、線または面)を使用して、異なる種類のデータ・アイテムを表示するチャートを作成します。棒と線、棒と面、線と面またはこの3つすべてを比較するために使用します。
	ファンネル	縦または横の円錐の断面を横断するスライスによってデータが表されるチャートを作成します。時間などの段階的な値に対するターゲット値と実際値の差違を表示するために使用します。たとえば、ファンネル・チャートを使用して、ファンネルの異なるセクションが販売周期の異なる段階を表すプロセスを表示します。
	折れ線	データが線、一連のデータ・ポイントまたは線で結ばれた複数のデータ・ポイントとして表されるチャートを作成します。折れ線グラフには、グループ内のメンバーごとに最低2つのポイントを表すデータが必要です。たとえば、月単位の折れ線グラフでは、少なくとも2つの月のデータが必要です。通常、特定の色の線がデータの各系列(アメリカ、ヨーロッパ、アジアなど)に関連付けられます。複数のアイテムを同じ期間で比較するために使用します。
	円	データ・アイテムのセットを合計に対する比率として表すチャートを作成します。データ・アイテムが円のセクションとして表示され、円が切り分けられたパイのように見えます。それぞれの商品群から得られる収益など、各区分と全体との関係を示すために使用します。
	散布図	データがデータ・マーカーの場所によって表されるチャートを作成します。人気商品の売上とコストなど、2つの異なる種類のデータ値の相関を示すために使用します。散布図は、多数の項目間の全体的な関連性を示す場合に特に有用です。
	スパーク	表の列に、またはテキストともにインラインでトレンドまたはバリエーションを表したシンプルな要約チャートを作成します。

また、「コンポーネント」パレットからチャート・コンポーネントをドラッグして、チャートを作成することもできます。この方法では、コンポーネントをデータにバインドする前に、チャートのユーザー・インタフェースを設計できます。「チャートの作成」ダイアログが表示され、チャート・タイプ、説明および簡単なレイアウト・オプションが表示されます。UI先行開発を使用するチャート作成の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の、チャート・コンポーネントの使用に関する項を参照してください。

35.2.1 データ・コントロールを使用して面チャート、棒グラフ、複合チャートまたは折れ線グラフを作成する方法

面チャート、棒グラフおよび折れ線グラフでは、1つ以上の系列があるデータのグループが少なくとも2つ必要です。グループは、垂直面チャート、棒グラフおよび折れ線グラフの場合はチャートのX軸に沿って、横向きのチャートの場合はY軸に沿って表示されます。系列は、チャートに面、棒または折れ線として表示されます。

図26-2に、ADF Facesデータ視覚化コンポーネントのための、顧客管理サンプル・アプリケーションの2つの棒グラフを表示します。左側の棒グラフは、顧客の注文履歴と注文の平均を示すように構成されており、右側の棒グラフは各注文の出荷日を示します。これらの例では、棒グラフは注文日と出荷日を表すグループで構成され、系列は注文の合計と出荷日の平均です。注文の平均は、Order Historyチャートに赤い参照線として表示されます。

図26-2 顧客管理サンプル・アプリケーションの棒グラフ

チャート作成後のチャートへの参照線の追加の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の、チャートへの参照オブジェクトの追加に関する項を参照してください。

始める前に:

データバインドされたデータ視覚化チャートについて理解しておいてください。詳細は、26.2項「データバインドされたチャートの作成」を参照してください。

次のタスクを完了する必要があります。

• 9.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。

  たとえば、Shipping Time棒グラフは、OrdersForCustomerデータ・コレクションに基づいています。図26-3に、「データ・コントロール」パネル内のOrdersForCustomerコレクションを示します。

  図26-3 注文出荷期間のデータ・コレクション

  
  

  OrdersForCustomerデータ・コントロールは、OrdVOビュー・オブジェクトに基づいています。図26-4に、OrdEO、EmpEOおよびCustomerEOエンティティ・オブジェクトからの属性を含むOrdVOビュー・オブジェクトを示します。OrdEO、EmpEOおよびCustomerEOエンティティ・オブジェクトは、サンプル・アプリケーション・スキーマのSOrd、SEmpおよびSCustomer表から導出されます。

  図26-4 ADFサンプル・アプリケーションOrdVOビュー・オブジェクト

  
  

  OrdVOオブジェクトには、ADFのShipping Time棒グラフの棒で表されるTimeToShip一時属性も含まれます。TimeToShip属性の値は、calculateTimeToShip()メソッドのコールによって取得されます(adf.object.calculateTimeToShip(DateOrdered, DateShipped))。calculateTimeToShip()メソッドは、注文の出荷に要した日数を判断し、OrdVORowImpl.javaに追加されます。OrdVORowImpl.javaには、OrdVOビュー・オブジェクトの実装メソッドが含まれます。

  例26-1に、ADFサンプル・アプリケーションのcalculateTimeToShip()メソッドを示します。メソッドは、日数をoracle.jbo.domain.Numberとして返します。これはチャートのvalue属性に必要な型です。

  例26-1 ADFサンプル・アプリケーションのcalculateTimeToShip()メソッド

  public oracle.jbo.domain.Number calculateTimeToShip(Date ordered, Date shipped) {
    if (null != shipped) {
      long days = (shipped.getTime() - ordered.getTime()) / (1000 * 60 * 60 * 24);
      return new Number(days);
    } else
      return new Number(0);
  }
  

  ビュー・オブジェクトへの一時属性の追加に関する追加情報は、5.15項「ビュー・オブジェクトへの計算属性および一時属性の追加」を参照してください。

• 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のJSF JSPページの作成方法に関する項の手順に従い、JSFページを作成します。

データバインドされた面チャート、棒グラフ、複合チャート、横棒グラフまたは折れ線グラフを作成する手順:

1. 「データ・コントロール」パネルから、コレクションを選択します。

   たとえば、各注文に対する出荷期間を表示する棒グラフを、ADFサンプル・アプリケーションの「Orders Dashboard」ページに作成する場合は、OrdersForCustomerコレクションを選択します。

2. コレクションをJSFページにドラッグして、ポップアップ・メニューから「チャート」を選択します。

3. 「コンポーネント・ギャラリ」で、チャート・カテゴリとチャート・タイプを選択して、「OK」をクリックします。

   「コンポーネント・ギャラリ」に表示されるチャート・カテゴリおよびチャート・タイプの詳細は、表26-1を参照してください。

   ダイアログの名前と表示される入力フィールドのラベルは、選択したチャートのカテゴリ、タイプおよびデータ・コレクションに応じて変化します。たとえば、チャート・カテゴリとして「棒」を選択し、チャート・タイプとして「棒」を選択すると、表示されるダイアログの名前は「棒グラフの作成」になり、入力フィールドのラベルは「棒」と「X軸」になります。

4. ダイアログで次のようにして、データを表示するチャートを構成します。

   • 実行時に属性の値をどこに表示するかに応じて、「使用可能」リストから入力フィールドに属性をドラッグします。

     たとえば、X軸に沿って注文日を表示するように、ADFサンプル・アプリケーションの棒グラフを構成する場合は、「使用可能」リストからDateOrdered属性をドラッグして、「棒グラフの作成」ダイアログの「X軸」フィールドにドロップします。出荷の時間を棒グラフとして表示するようにチャートを構成するには、「使用可能」リストからTimeToShip属性をドラッグして、「棒グラフの作成」ダイアログの「棒」フィールドにドロップします。

     二重Y軸を含むチャート・タイプを選択した場合、追加する2番目の面、棒または折れ線は、2番目のY軸にレンダリングされます。また、chartSeriesStyleコンポーネントは、2番目のY軸に表される系列のチャートに追加され、chartSeriesStyleコンポーネントのassignedToY2属性がtrueに設定されます。

     複合チャートを選択した場合、「データ・ポイント」入力フィールドに追加する各属性は、面チャート、棒グラフまたは折れ線グラフとしてレンダリングされます。デフォルトでは、最初の属性は棒グラフとしてレンダリングされ、2番目の属性は折れ線グラフとしてレンダリングされ、3番目の属性は面チャートとしてレンダリングされます。チャート・タイプを変更するには、chartSeriesStyleコンポーネントを複合チャートのseriesStampファセットに追加します。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の、チャート系列のカスタマイズ方法に関する項を参照してください。

   • 「属性ラベル」表で、デフォルト値を受け入れるか、「ラベル」フィールドのドロップダウン・リストから値を選択して、実行時に表示されるラベルを指定します。

     基になるデータ型に応じて、「ラベル」フィールドで選択可能な項目が決まります。この選択に応じて、属性のラベルをチャートにレンダリングする方法が決まります。詳細は、26.2.7項「属性のラベルの使用に関する必知事項」を参照してください。

   図26-5に示す「棒グラフの作成」ダイアログは、OrdersForCustomerデータ・コレクションのDateOrdered属性とTimeToShip属性のデータを使用して、ADFサンプル・アプリケーションのShipping Time棒グラフを生成します。

   図26-5 ADFのShipping Timeチャートの「棒グラフの作成」ダイアログ

   
   

5. 「OK」をクリックします。

データ・バインディング・ダイアログに必要事項を入力した後で、プロパティ・インスペクタを使用してチャート属性の設定を指定できます。また、チャート・タグに関連付けられた子タグを使用してチャートをさらにカスタマイズできます。たとえば、凡例の表示は、ADFサンプル・アプリケーションのShipping Timeチャートに対してオフになっています。チャート・コンポーネント構成の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の、チャート・コンポーネントの使用に関する項を参照してください。

26.2.2 「データ・コントロール」パネルによるチャート作成時の処理

チャートを「データ・コントロール」パネルからドロップすると、次の処理が行われます。

• チャートのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。

• UIコンポーネントに必要なコードをJSFページに追加します。

JDeveloperが生成するデータ・バインディングXMLは、作成する特定のチャート・タイプの物理モデルを表します。例26-2は、ページ定義ファイルにJDeveloperが生成したバインディングを示しています。この例では、OrdersForCustomerデータ・コレクションのDateOrdered属性とTimeToShip属性のデータを使用して縦棒グラフが作成されています。

例26-2 ADF棒グラフのバインディングXML

<tree IterBinding="OrdersForCustomerIterator" id="OrdersForCustomer5"
      ChangeEventPolicy="ppr">
  <nodeDefinition DefName="oracle.sample.model.views.OrdVO"
                  Name="OrdersForCustomer5">
    <AttrNames>
      <Item Value="TimeToShip"/>
      <Item Value="DateOrdered"/>
    </AttrNames>
  </nodeDefinition>
</tree>

チャートでは、例に示す標準のツリー・バインディングが使用されます。ノード定義は、データ・コントロール(OrdersForCustomer5)の名前とインスタンス、およびデータ・コントロールのベースになっているビュー・オブジェクト(OrdVO)を示します。表示される各属性がAttrNames定義にリストされます。二重Y軸に対して構成されるチャートの場合、AttrNames定義には、2番目のY軸に表示される系列の追加アイテムが含まれます。

例26-3に、OrdersForCustomerデータ・コレクションをJSFページにドラッグしたときに縦棒グラフ用に生成され、X軸にDateOrderedを、棒にTimeToShipを指定するコードを示します。

例26-3 ADF棒グラフのJSFコード

<dvt:barChart id="barChart2" var="row"
              value="#{bindings.OrdersForCustomer5.collectionModel}">  <dvt:chartLegend id="cl2"/>
  <f:facet name="dataStamp">
    <dvt:chartDataItem id="di2" value="#{row.TimeToShip}"
                 group="#{row.DateOrdered}"
                 series="#{bindings.OrdersForCustomer5.hints.TimeToShip.label}"/>
  </f:facet>
</dvt:barChart>

26.2.3 データバインドされたファンネル・チャートの作成方法

ファンネル・チャートは、少なくとも2つのデータ系列と、1つのグループを必要とします。グループは段階値として表現されますが、系列はデータの実際値とターゲット値を表します。

図26-6に、サンプル・ファンネル・チャートを示します。ファンネルは顧客注文の処理におけるステップを表示するように構成され、所定のすべてのステージの注文数がツールチップに示されます。

図26-6 サンプル・ファンネル・チャート

始める前に:

データバインドされたデータ視覚化チャートについて理解しておいてください。詳細は、26.2項「データバインドされたチャートの作成」を参照してください。

次のタスクを完了する必要があります。

• 9.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。

• 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のJSF JSPページの作成方法に関する項の手順に従い、JSFページを作成します。

データバインドされたファンネル・チャートを作成する手順:

1. 「データ・コントロール」パネルから、コレクションを選択します。

2. コレクションをJSFページにドラッグして、ポップアップ・メニューから「チャート」を選択します。

3. 「コンポーネント・ギャラリ」で、ファンネル・チャート・カテゴリとチャート・タイプを選択してから、「OK」をクリックします。

   たとえば、水平ファンネル・チャートを作成するには、「ファンネル」チャート・カテゴリと「水平」チャート・タイプを選択します。

4. ダイアログで次のようにして、データを表示するチャートを構成します。

   • 「実際値」と「ターゲット値」フィールドのドロップダウン・メニューから、データの系列を表す属性を選択します。

   • 「ファンネル・セクション」フィールドのドロップダウン・メニューから、データのグループを表す属性を選択します。

5. 「OK」をクリックします。

データ・バインディング・ダイアログに必要事項を入力した後で、プロパティ・インスペクタを使用してチャート属性の設定を指定できます。また、チャート・タグに関連付けられた子タグを使用してチャートをさらにカスタマイズできます。チャート・コンポーネント構成の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の、チャート・コンポーネントの使用に関する項を参照してください。

26.2.4 データバインドされた円グラフの作成方法

円グラフには1つのデータ・グループが表示され、個別の系列を各区分で表します。このチャート・タイプには、複数の行(区分ごとに1つの行)を持つ1つの列が必要になります。

図26-7に、ADFサンプル・アプリケーションの円グラフを示します。このグラフは、各蓄積場所おける受注品目の在庫を、その品目の合計在庫の割合として表示します。ユーザーが各区分の上にマウス・ポインタを移動すると、その場所での実際の数量を示すツールチップが表示されます。この例のデータ列は、受注品目の合計在庫を表し、それぞれの区分は各備蓄場所でのインベントリ・レベルを表しています。

図26-7 各備蓄場所でのインベントリ・レベルを示す円グラフ

始める前に:

データバインドされたデータ視覚化チャートについて理解しておいてください。詳細は、26.2項「データバインドされたチャートの作成」を参照してください。

次のタスクを完了する必要があります。

• 9.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。

• 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のJSF JSPページの作成方法に関する項の手順に従い、JSFページを作成します。

データバインドされた円グラフを作成する手順:

1. 「データ・コントロール」パネルから、コレクションを選択します。

   たとえば、ADFサンプル・アプリケーションの「Customer Management」ページに、各備蓄場所でのインベントリ・レベルを表示する円グラフを作成する場合は、「BackOfficeAppModuleDataControl」→「Customers」→「OrdersForCustomer」→「ItemsForOrder」→「InventoryForOrderItem」コレクションの順に選択します。図26-8に、「データ・コントロール」パネルのInventoryForOrderItemコレクションを示します。

   図26-8 InventoryForOrderItemコレクションのデータ・コレクション

   
   

2. コレクションをJSFページにドラッグして、ポップアップ・メニューから「チャート」を選択します。

3. 「コンポーネント・ギャラリ」で、「円」チャート・カテゴリとチャート・タイプを選択してから、「OK」をクリックします。

   たとえば、図26-7の円グラフを作成する場合は、「円」チャート・カテゴリと「円」チャート・タイプを選択します。

4. 「円グラフの作成」ダイアログで次の操作を実行し、データを表示する円グラフを構成します。

   • 「円」フィールドのドロップダウン・メニューから、データの列に表示する属性を選択します。

     たとえば、インベントリ・レベルを表示するようにADFサンプル・アプリケーションの円グラフを構成する場合は、「円」フィールドのドロップダウン・メニューからAmountInStock属性を選択します。

   • 実行時に属性の値をどこに表示するかに応じて、「使用可能」リストから「区分」フィールドに属性をドラッグします。

     たとえば、受注品目の各備蓄場所におけるインベントリ・レベルを表示するように、ADFサンプル・アプリケーションの円グラフを構成する場合は、「円グラフの作成」ダイアログで、「使用可能」リストからCity属性をドラッグして「区分」フィールドにドロップします。

   • 「属性ラベル」表で、デフォルト値を受け入れるか、「ラベル」フィールドのドロップダウン・リストから値を選択して、実行時に表示されるラベルを指定します。

     基になるデータ型に応じて、「ラベル」フィールドで選択可能な項目が決まります。この選択に応じて、属性のラベルをチャートにレンダリングする方法が決まります。詳細は、26.2.7項「属性のラベルの使用に関する必知事項」を参照してください。

   図26-9に示す「円グラフの作成」ダイアログでは、InventoryForOrderItemコレクションのAmountInStock属性とCity属性を使用して円グラフを生成します。

   図26-9 InventoryForOrderItemの「円グラフの作成」

   
   

5. 「OK」をクリックします。

   例26-4に、InventoryForOrderItemデータ・コレクションをJSFページにドラッグしたときに円グラフ用に生成され、「円」値にAmountInStockを、「区分」値にCityを指定するコードを示します。

   例26-4 ADF円グラフのJSFコード

   <dvt:pieChart id="pieChart1" var="row"
                 value="#{bindings.InventoryForOrderItem1.collectionModel}">
     <dvt:chartLegend/>
     <dvt:pieDataItem id="di1" value="#{row.AmountInStock}" label="#{row.City}"/>
   </dvt:pieChart>
   

データ・バインディング・ダイアログに必要事項を入力した後で、プロパティ・インスペクタを使用してチャート属性の設定を指定できます。また、チャート・タグに関連付けられた子タグを使用してチャートをさらにカスタマイズできます。たとえば、円の1つの区分が他の区分から分離されるように、切り離された円の区分を構成できます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の、チャート・コンポーネントの使用に関する項を参照してください。

26.2.5 データ・コントロールを使用したデータバインドされたスパーク・チャートの作成

スパーク・チャートは、表の列に、またはテキストともにインラインでトレンドまたはバリエーションを表したシンプルな要約チャートです。

スパーク・チャートを作成するには、「データ・コントロール・パネル」からデータ・コントロールを挿入します。図26-10に、「データ・コントロール」パネルからページ上にスパーク・チャートをドラッグしたときに表示される「コンポーネント・ギャラリ」を示します。

図26-10 スパーク・チャートの作成のコンポーネント・ギャラリ

バインディング・ダイアログで、選択したスパーク・チャート・タイプで表示する値を指定するように求められます。折れ線スパーク・チャート、棒スパーク・チャートおよび面スパーク・チャートには、変動する株価などの単一系列のデータ値が必要です。フローティング棒スパーク・チャートには、データ値の系列がフローティング・オフセットに1つ、棒の値のために1つの、合計2つ必要です。たとえば、フローティング積上げ棒スパーク・チャートの作成ダイアログでは、次のように指定します。

• 「棒の高さ」: 棒の値に使用するデータ値を選択するには、これを使用します。

• 「棒のフロート」: フロート・オフセット、つまり軸とフローティング棒との間の距離に使用するデータ値を選択するには、これを使用します。

図26-11に、設定済のフローティング積上げ棒スパーク・チャートの作成ダイアログを示します。

図26-11 「スパークチャート・バインディング」ダイアログ

最初にシンプルUIを開発するシナリオでは、「コンポーネント・パレット」を使用してスパーク・チャートを挿入し、その後データにバインドできます。スパーク・チャートへのデータ入力の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の、スパーク・チャートへのデータ追加方法に関する項を参照してください。

26.2.6 データバインドされたバブル・チャートと散布図の作成方法

バブル・チャートと散布図は、データ・マーカーの位置でデータを表します。バブル・チャートは、マーカーのサイズを使用してデータの追加の側面も表します。

散布図には、マーカーごとに少なくとも2つのデータ値が必要です。バブル・チャートには、マーカー・サイズごとに追加のデータ値が必要です。各データ・マーカーは次の値を表します。

• マーカーのX軸上の位置を決めるX値。

• マーカーのY軸上の位置を決めるY値。

• バブル・チャートのマーカーのサイズを決めるZ値

複数のデータ・グループの場合、データは、散布図の場合には2の倍数、バブル・チャートの場合には3の倍数である必要があります。

図26-12に、組織の販売員の給与とコミッションを表示する散布図とバブル・チャートを示します。この例では、X値はコミッションによって決まり、Y値は給与によって決まります。バブル・チャートは、Z値に販売員の売上合計を使用するように構成されています。この例では、Mageeは給与とコミッションが最低ですが、売上合計が最高の販売員です。

図26-12 データバインドされた散布図およびバブル・チャートの例

始める前に:

データバインドされたデータ視覚化チャートについて理解しておいてください。詳細は、26.2項「データバインドされたチャートの作成」を参照してください。

次のタスクを完了する必要があります。

• 9.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。

  たとえば、図26-12のバブル・チャートと散布図では、ADF Facesデータ視覚化コンポーネントのサンプル・アプリケーションのSEmpエンティティに基づくトップ・レベル・ビュー・オブジェクトを使用します。この例では、ADF従業員データベースに含まれるすべての販売責任者をビュー・オブジェクトで取得するために、TITLE_IDが2である従業員レコードをすべて取得しています。図26-13に、SalesRepViewObjビュー・オブジェクトを示します。

  図26-13 DVTサンプル・アプリケーションのSalesRepViewObjビュー・オブジェクト

  
  

  図26-14に、SalesRepViewObj3データ・コントロールを示します。

  図26-14 DVTサンプル・アプリケーションのSalesRepViewObj3データ・コントロール

  
  

  TotalSales属性は、SOrdViewビュー・オブジェクトのTotal属性から販売員の売上合計を計算する一時属性です(SOrdView.sum ('Total'))。ビュー・オブジェクトへの一時属性の詳細は、5.15項「ビュー・オブジェクトへの計算属性および一時属性の追加」を参照してください。

• 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のJSF JSPページの作成方法に関する項の手順に従い、JSFページを作成します。

データバインドされたバブル・チャートまたは散布図を作成する手順:

1. 「データ・コントロール」パネルから、コレクションを選択します。

   たとえば、図26-12のバブル・チャートまたは散布図を作成するには、SalesRepViewObj3コレクションを選択します。

2. コレクションをJSFページにドラッグして、ポップアップ・メニューから「チャート」を選択します。

3. 「コンポーネント・ギャラリ」で、バブル・チャートまたは散布図のカテゴリとチャート・タイプを選択してから、「OK」をクリックします。

4. 「バブル・チャートの作成」または「散布図の作成」ダイアログで、次の操作を実行してバブル・チャートまたは散布図の軸値を構成します。

   • 「X軸データ・ポイント」フィールドで、ドロップダウン・リストを使用して、X軸データ・ポイントに使用するデータ・コレクション内の属性を指定します。

     たとえば、X軸にコミッションの割合を表示するようにバブル・チャートまたは散布図を構成するには、ドロップダウン・リストから「CommissionPct」を選択します。

   • 「Y軸データ・ポイント」フィールドで、ドロップダウン・リストを使用して、Y軸データ・ポイントに使用するデータ・コレクション内の属性を指定します。

   • バブル・チャートの場合、Z軸データ・ポイント・フィールドで、ドロップダウン・リストを使用して、Z軸データ・ポイントに使用するデータ・コレクション内の属性を指定します。

5. 散布図を構成している場合は、ダイアログの「マーカー」セクションで次の操作を行って、散布図の色、形状およびツールチップを構成します。

   • 色/形状の組合せにシステムで生成された値を使用するには、「自動」を選択します。色と形状の決定に個別の属性を使用するには「手動」を選択します。

     「手動」を選択した場合は、「マーカーの色」および「マーカーの形状」のドロップダウン・リストで属性を選択します。

     たとえば、図26-12に表示されている散布図の「マーカーの色」と「マーカーの形状」にLastNameとFirstNameを使用することを選択できます。散布図がレンダリングされるときに、凡例には図26-15に示すように色と形状の両方のエントリが含まれます。散布図のツールチップには、マーカー属性と形状属性の両方に関連付けられた値が表示されます。

     図26-15 色と形状が手動で構成された散布図

     
     

   • 「マーカー・タイプ」フィールドのドロップダウン・リストで、散布図の凡例に表示される値を決定する、データ・コレクション内の1つ以上の属性を指定します。散布図の凡例では、各属性が固有の色/形状の組合せで表現されます。「使用可能」リストから属性をドラッグ・アンド・ドロップするか、「追加」ドロップダウン・リストから選択できます。

     入力フィールドで属性を指定した後、任意の属性を右クリックして、「右に移動」、「左に移動」、「削除」、「テキストとして処理」などのアクションに対応するポップアップ・メニューを表示できます。

   • 「マーカー・ツールチップ」フィールドのドロップダウン・リストから、散布図のツールチップに使用する属性を選択します。

6. バブル・チャートを構成している場合は、ダイアログの「マーカー」セクションで次の操作を行って、バブルの色およびツールチップを構成します。

   • 色にシステムで生成された値を使用するには、「自動」を選択します。色と形状の決定に個別の属性を使用するには「手動」を選択します。

     「手動」を選択した場合は、「マーカーの色」および「マーカーの形状」のドロップダウン・リストで属性を選択します。

   • バブルの色フィールドのドロップダウン・リストで「自動」を選択した場合は、バブル・チャートの凡例に表示される値を決定する、データ・コレクション内の1つ以上の属性を指定します。バブル・チャートの凡例では、各属性が固有の色で表現されます。「使用可能」リストから属性をドラッグ・アンド・ドロップするか、「追加」ドロップダウン・リストから選択できます。

     入力フィールドで属性を指定した後、任意の属性を右クリックして、「右に移動」、「左に移動」、「削除」、「テキストとして処理」などのアクションに対応するポップアップ・メニューを表示できます。

   • 「バブル・ツールチップ」フィールドのドロップダウン・リストから、バブル・チャートのツールチップに使用する属性を選択します。

     デフォルトでは、バブル・チャートのツールチップには、バブル・チャートの凡例に関連付けられている1つまたは複数の属性が表示されます。たとえば、図26-12のバブル・チャートのツールチップは、Groupの販売員の姓を表示しています。ツールチップのGroupアイテムに使用する、コレクション内の別の属性を選択できます。

7. 「属性ラベル」表で、デフォルト値を受け入れるか、「ラベル」フィールドのドロップダウン・リストから値を選択して、実行時に表示されるラベルを指定します。

   基になるデータ型に応じて、「ラベル」フィールドで選択可能な項目が決まります。この選択に応じて、属性のラベルをチャートにレンダリングする方法が決まります。詳細は、26.2.7項「属性のラベルの使用に関する必知事項」を参照してください。

8. 「OK」をクリックします。

図26-16に、SalesRepViewObj3データ・コレクションのCommissionPct、SalaryおよびTotal Sales属性のデータを使用してバブル・チャートを生成する「バブル・チャートの作成」ダイアログを示します。

図26-16 「バブル・チャートの作成」ダイアログ

「散布図の作成」ダイアログのエントリも同様ですが、バブル・サイズの選択は不要です。図26-17に、SalesRepViewObj3データ・コレクションのCommissionPctおよびSalary属性のデータを使用して散布図を生成する「散布図の作成」ダイアログを示します。

図26-17 「散布図の作成」ダイアログ

例26-5に、SalesRepViewObj3データ・コレクションをJSFページにドラッグしたときにバブル・チャートと散布図用に生成され、「X軸データ・ポイント」にCommissionPct、「Y軸データ・ポイント」にSalary、バブル・チャートのZ軸データ・ポイントにTotalSalesを指定するコードを示します。

例26-5 ADF散布図およびバブル・チャートのJSFコード

<dvt:scatterChart id="scatterChart1" var="row"
                  value="#{bindings.SalesRepViewObj3.collectionModel}">
  <dvt:chartLegend rendered="true" id="cl1">
    <dvt:legendSection source="ag1" id="ls1"/>
  </dvt:chartLegend>
  <f:facet name="dataStamp">
    <dvt:chartDataItem id="di1" group="#{row.LastName}" x="#{row.CommissionPct}"
                       y="#{row.Salary}">
      <dvt:attributeGroups id="ag1" value="#{row.LastName}" type="color shape"/>
    </dvt:chartDataItem>
  </f:facet>
</dvt:scatterChart>
...
<dvt:bubbleChart id="bubbleChart1" var="row"
                 value="#{bindings.SalesRepViewObj3.collectionModel}">
  <dvt:chartLegend rendered="true" id="cl1">
    <dvt:legendSection source="ag1" id="ls1"/>
  </dvt:chartLegend>
  <f:facet name="dataStamp">
    <dvt:chartDataItem id="di1" group="#{row.LastName}" x="#{row.CommissionPct}"
                       y="#{row.Salary}" z="#{row.TotalSales}">
      <dvt:attributeGroups id="ag1" value="#{row.LastName}" type="color"/>
    </dvt:chartDataItem>
  </f:facet>
</dvt:bubbleChart>

マーカーおよび形状にデータ・コレクションの属性を使用して散布図を手動で構成することを選択した場合、JDeveloperは追加のdvt:legendSectionおよびdvt:attributeGroupsタグをJSFページに追加します。例26-6に、変更されたエントリが太字でハイライト表示された改訂コードを示します。

例26-6 「マーカーの色」と「マーカーの形状」が手動で構成された散布図のJSFページのコード

<dvt:scatterChart id="scatterChart1" var="row"
                  value="#{bindings.SalesRepViewObj3.collectionModel}">
  <dvt:chartLegend rendered="true" id="cl1">
    <dvt:legendSection source="ag1" id="ls1"/>
    <dvt:legendSection source="ag2" id="ls2"/>
  </dvt:chartLegend>
  <f:facet name="dataStamp">
    <dvt:chartDataItem id="di1" group="#{row.LastName} #{row.FirstName}"
                       x="#{row.CommissionPct}"
                       y="#{row.Salary}">
      <dvt:attributeGroups id="ag1" value="#{row.LastName}" type="color"/>
      <dvt:attributeGroups id="ag2" value="#{row.FirstName}" type="shape"/>
    </dvt:chartDataItem>
  </f:facet>
</dvt:scatterChart>

データ・バインディング・ダイアログに必要事項を入力した後で、プロパティ・インスペクタを使用してチャート属性の設定を指定できます。また、チャート・タグに関連付けられた子タグを使用してチャートをさらにカスタマイズできます。たとえば、チャートの凡例を表示する場所を指定できます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の、チャート・コンポーネントの使用に関する項を参照してください。

26.2.7 属性ラベルの使用に関する必知事項

「チャートの作成」ダイアログで属性のラベルを構成するときに、「ラベル」フィールドで選択できる項目は基になるデータ型によって決まります。この選択に応じて、属性のラベルをチャートにレンダリングする方法が決まります。

属性がデータ値を表している場合、「ラベル」フィールドの選択肢は次のようになります。

• 「属性名の使用」: 基になるViewObjectに含まれる該当の属性のUIHintsから取得したラベルを使用して値を文字列としてレンダリングする場合に選択します。これはデフォルト選択です。

• 「ラベルなし」: ラベルをレンダリングしない場合は、これを選択します。メトリックが1つで、結果として表示されたチャートを説明する独自の説明テキストをページに表示する場合に、この選択肢は役に立ちます。

• 「テキスト・リソースの選択」: 「テキスト・リソースの選択」ダイアログを開いて、ラベルに使用するテキスト・リソースを選択または追加するには、これを選択します。テキスト・リソースは、アプリケーション・リソース・バンドルからの翻訳可能な文字列です。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。

• 「式ビルダー」: 「式ビルダー」ダイアログを開いて、実行時に該当のラベルについて実行する式を作成するには、これを選択します。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。

属性がデータ値のカテゴリを表す場合は、次の選択肢があります。

• 「属性値の使用」: カテゴリ・ラベルとして属性値をレンダリングする場合に選択します。これはデフォルト選択です。

• ドロップダウン・リストで、ラベルの代替の属性を選択します。たとえば、従業員IDのかわりに従業員名をラベルに使用します。

26.3 データバインドされたグラフの作成

Paretoおよびstockグラフは、クライアント側チャートを優先するため使用が推奨されないレガシー・サーバー側コンポーネントです。

「データ・コントロール」パネルから挿入されたデータ・コレクションを使用してチャートを作成する場合は、コンポーネント・ギャラリを使用すると、多数のチャート・カテゴリ、チャート・タイプおよびレイアウトから選択できます。

チャートの作成時に表示されるコンポーネント・ギャラリを見てまわり、使用可能なチャート・カテゴリ、タイプおよびそれぞれの説明を確認してください。図26-18に、「データ・コントロール」パネルを使用しているときにADFチャート用に表示される、「コンポーネント・ギャラリ」を示します。

図26-18 「データ・コントロール」パネルからのADFグラフのコンポーネント・ギャラリ

注意: 面チャート、棒グラフ、棒グラフ(横棒)、複合チャート、ファンネル・グラフ、折れ線グラフ、円グラフおよび散布図はクライアント側コンポーネントで、その使用はレガシー・グラフ・コンポーネントより優先されます。データバインドされたチャートの作成の追加情報は、26.2項「データバインドされたチャートの作成」を参照してください。

また、コンポーネント・パレットからグラフ・コンポーネントをドラッグして、グラフを作成することもできます。この方法では、コンポーネントをデータにバインドする前に、グラフのユーザー・インタフェースを設計できます。「グラフの作成」ダイアログが開き、グラフ・タイプ、説明および簡単なレイアウト・オプションが表示されます。UI先行開発を使用するグラフ作成の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の、グラフ・コンポーネントの使用に関する項を参照してください。

表26-2に、グラフのコンポーネント・ギャラリに表示されるカテゴリを示します。

表26-2 コンポーネント・ギャラリのADFグラフ・カテゴリ

カテゴリ	説明
パレート	データが棒、および棒の累積率を示す線によって表されるグラフを作成します。棒の各セットにより、問題の異なる原因(交通事故による死亡の原因など)が識別されます。それぞれの棒は、最大数の事象から最小数の事象まで、値別に配置されます。パレート・グラフは常に二重y軸グラフになり、最初のy軸は棒が表す値に対応し、2番目のy軸は0から100%の範囲で累計率の値に対応します。パレート・グラフは、問題の原因を識別および比較するために使用します。
株価	株価の高値、安値および終値を示すデータでグラフを作成します。また、株価の始値と出来高を必要に応じて表示します。

26.3.1 名前/値ペアを使用した株価グラフの作成方法

データ・コレクションが、入力済の属性ではなく、一連の名前/値ペアで配列されているグラフを作成できます。たとえば、複数のデータ・ポイントと複数の属性を持つデータを持つ1つの数値列に株価の値を配列することで、これらのポイントを指定できるようになります。

図26-19に、名前/値ペアで配列したデータ・コレクションの例を示します。MarketDateごとに、Measure属性は、Data属性に格納された値の名前(OPEN、HIGH、LOW、CLOSEおよびVOLUME)を保持しています。

図26-19 名前/値ペアのデータ形状での株価

始める前に:

データ視覚化グラフについて理解しておいてください。詳細は、26.3項「データバインドされたグラフの作成」を参照してください。

また、名前/値ペアのデータ形状について理解しておくとよいでしょう。詳細は、26.3.3項「名前/値ペアの使用方法に関する必知事項」を参照してください。

次のタスクを完了する必要があります。

• 9.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。

• 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のJSF JSPページの作成方法に関する項の手順に従い、JSFページを作成します。

名前/値ペアのデータ形状を使用してグラフを作成する手順は次のとおりです。

1. 「データ・コントロール」パネルから、コレクションを選択します。

   1週間分の始値、高値、安値および終値の株価を表示するグラフを作成する例では、コレクションSStockPriceView1を選択します。図26-20に、「データ・コントロール」パネルでのSStockPriceView1コレクションを示します。

   図26-20 単一列に配置された株価のデータ・コレクション

   
   

2. コレクションをJSFページにドラッグして、ポップアップ・メニューから「グラフ」を選択します。

3. 「コンポーネント・ギャラリ」で、「株価」グラフ・カテゴリを選択し、次にグラフのタイプ「出来高と始値 - 高値 - 安値 - 終値のローソク足」を選択してから「OK」をクリックします。

4. 次の操作を実行し、名前/値ペアのデータ形状をサポートするようにダイアログを変更します。

   • 「データ形状の変更」をクリックします。

   • 「チャート・データ形状の変更」ダイアログで、「名前-値ペア」を選択して「OK」をクリックします。

   • プロンプトが表示されたら、選択した内容を確認します。

5. 変更したダイアログで次の操作を実行し、データを表示するグラフを構成します。

   • 「名前属性」には、名前/値ペアの名前を保持する属性を選択します。

     たとえば、図26-20のデータ・コレクションを使用して株価グラフを作成するには、ドロップダウン・リストから「Measure」を選択します。

   • 「値属性」には、名前/値ペアのデータを保持する属性を指定します。

     たとえば、図26-20のデータ・コレクションを使用して株価グラフを作成するには、ドロップダウン・リストから「Data」を選択します。

   • 「グラフの値」表で、デフォルト値を受け入れるか、「ラベル」フィールドのドロップダウン・リストから値を選択して、実行時に表示されるラベルを指定します。

     基になるデータ型に応じて、「ラベル」フィールドで選択可能な項目が決まります。この選択に応じて、属性のラベルをグラフにレンダリングする方法が決まります。詳細は、26.2.7項「属性のラベルの使用に関する必知事項」を参照してください。

   • 現在の行をマスター/ディテールに設定を選択して、グラフの行選択リスナーを使用すると、棒、スライスまたは他のグラフ・データ要素をクリックして別のADFコンポーネントのデータを更新できるようになります。詳細は、26.3.2項「マスター/ディテール処理のグラフの行選択リスナーの使用に関する必知事項」を参照してください。

     
     

     注意: データ・コレクションがマスター/ディテール関係での子コレクションになる場合、ダイアログには「子アクセッサを含める(階層グラフ)」のオプションが含まれるようになります。このオプションは、グラフのキューブ・モデルにツリー・コレクションをマップしていた古いデータ・モデルとの後方互換性を維持するために含まれています。そのため、通常は、このボックスを選択する必要はありません。

     
     

   図26-21に、SStockPriceView1コレクションのMeasure属性を使用してグラフを生成する「株式グラフの作成」ダイアログを示します。

   図26-21 StockSingleFactColView1の株式グラフの作成

   
   

6. 「OK」をクリックします。

26.3.2 マスター/ディテール処理のグラフの行選択リスナーの使用に関する必知事項

グラフの行選択リスナー(マスター・ビューとして機能)を使用すると、棒、スライスまたは他のグラフ・データ要素をクリックして別のADFコンポーネント(ディテール・ビューとして機能)のデータを更新できるようになります。たとえば、グラフ内で特定の商品売上を表す棒をクリックすると、その商品に関する詳細な売上データがピボット・テーブルに表示されます。

このマスター/ディテール処理を宣言的に実現するには、次の要件を満たす必要があります。

1. 次のように、同じデータ・コントロールを使用して両方のビューにデータを提供する必要があります。

   1. グラフを行セットとしてデータ・コントロールの親コレクションにバインドします(例: DepartmentsView)。

   2. もう1つのADFビュー(テーブル、ピボット・テーブルなど)をデータ・コントロールの依存ディテール・コレクションにバインドします(例: EmployeesView)。

2. 「グラフの作成」ダイアログで「マスター/ディテールの現在行の設定」を選択して、グラフ・タグのclickListener属性の値を自動設定し、すでにグラフ・バインディングの一部になっているprocessClickメソッドを使用します。

   たとえば、グラフ・タグのvalue属性がvalue="#{bindings.myGraph.graphModel}"の場合は、clickListener属性をclickListener="#{bindings.myGraph.graphModel.processClick}"に設定します。

グラフのデータ要素のクリックを処理するためのJavaコードを記述する必要はありません。グラフ・バインディングに対するprocessClickイベントが、グラフのデータ・コンポーネントに対するクリック・イベントを認識し、必要な処理を実行します。

26.3.3 名前/値ペアの使用方法に関する必知事項

データ・コントロールを使用してグラフを構成する場合、デフォルトでは、データ・バインディング・ダイアログで入力済属性がサポートされるため、コレクション内の各種データ・ポイントは各種属性によって表されます。たとえば、複数製品の売上げとコストに関するデータ・ポイントがある場合、データ・コレクション内で1つ目の属性が各製品の売上げデータ用で、2つ目の属性が各製品のコスト用である場合にのみ入力済属性を使用します。

入力済属性のデータ形状は、グラフ内のデータ・ポイントの種類が1つのみの場合も有効です。図26-22に入力済属性のデータ形状を示します。

図26-22 入力済属性のデータ形状

データ・バインディング・ダイアログで「データ形状の変更」を選択し、ダイアログで名前/値ペアをサポートするように変更できます。ここで、データ・ポイントの名前を指定するName属性とデータ値を指定するValue属性という2つの属性によって表されるデータ・ポイントは2種類以上あります。この場合、専用の属性にはそれぞれ、各種データ・ポイントを識別する値があります。たとえば、メトリック属性は、データ・コレクションに各製品の売上とコストについての値を保持します。図26-23に名前/値ペアのデータ形状のデータ・コレクションを示します。

図26-23 名前/値ペアのデータ形状

名前/値ペアのデータ形状を使用する場合は、グラフ・データ・バインディング・ダイアログで次の値を指定します。

• 名前属性: Name属性を表すデータ・コレクション内の属性で、その一意の値によりデータ・ポイントが各種メトリックにカテゴリ分けされます。

• 値属性: グラフに描画された数値データ・ポイントを表すデータ・コレクション内の属性。各データ・ポイントは、対応するName属性値によって特定のメトリックにカテゴリ分けされます。

• ダイアログでの定義に従って、グラフ・タイプに関連するフィールドにValue属性の値を指定します。たとえば、バブル・グラフでは、「バブルの色」と「バブル・ツールチップ」を指定します。値はデータ・コレクション内の属性、つまり、データ・ポイントを特定のメトリックにカテゴリ分けするために実行時に使用されるName属性の一意の値を表すデータ値として指定できます。

  1つ以上の値を追加するには、「追加」ドロップダウン・リストから「データ値」を選択します。各データ値は、データ・ポイントを特定のメトリックにカテゴリ分けするために実行時に使用されるName属性の一意の値を表します。Name属性で使用可能なすべてのメトリックを選択する必要はありません。

  入力フィールドで属性やデータ値を指定した後で、任意の属性を右クリックし、「右に移動」、「左に移動」、「削除」または「データ値の編集」などのアクションに対応するポップアップ・メニューを表示できます。

たとえば、図26-24に示すように、名前/値ペアの形状でデータの単一数値列を使用して、データ・コレクションにバインドされた、始値、高値、低値、終値を表示する株価グラフを作成できます。

図26-24 名前/値ペアで作成した株価グラフ

26.4 データバインドされたゲージの作成

ゲージは、売上合計、在庫レベル、温度、速度などの単一のデータ値をプロットします。しきい値を使用すると、ゲージでは、色を使用して許容範囲または非許容範囲などの状態情報を表示できます。たとえば、ゲージ値軸では、赤、黄、緑の色の範囲を示して、低、中、高の状態を表す場合があります。データバインドされた1つのゲージ・コンポーネントは、使用するデータ・コレクション内の行数に応じて、単一のゲージまたはゲージの列を作成できます。データ・コレクションでは、各行に単一のゲージの値が含まれます。

ゲージ用のコンポーネント・ギャラリを使用すると、表26-3に示す4つのゲージ・カテゴリから選択できます。

表26-3 コンポーネント・ギャラリのADFゲージ・カテゴリ

イメージ	カテゴリ	説明
	ダイアル	円形の軸にプロットされたメトリック値を表示します。ゲージの背景属性によって、ゲージの背景が矩形、円形、半円形のいずれで表示されるかが決まります。インジケータは、軸上のダイアル・ゲージのメトリック値を指します。
	LED	キー・パフォーマンス・インディケータ(KPI)などの指標を図示します。LEDゲージには、ステータスを示すために色を使用する円形または矩形、カラー・インジケータに加えて上、左、右または下を指す三角形または矢印など、数種の形状を使用できます。
	評価	メトリック値の入力を表示し、オプションで受け入れます。このゲージは、通常、映画の星評価など、製品やサービスの評価を示すために使用されます。
	ステータス・メーター	水平または円形の軸にメトリック値を表示します。内側の矩形は、外側の矩形に表示された範囲に対する現在の測定値のレベルを示します。オプションで、ステータス・メーターは、メトリック値が事前定義済のしきい値内にあることを示す色を表示できます。

各カテゴリには、1つ以上のゲージ・タイプが含まれます。単一ゲージの作成時に表示されるコンポーネント・ギャラリを詳しく調べて、使用可能なすべてのゲージ、カテゴリ・タイプおよびそれぞれの説明を確認してください。図26-25に、ADFゲージ用に表示されるコンポーネント・ギャラリを示します。

図26-25 ADFゲージのコンポーネント・ギャラリ

データ・バインディングのプロセスは、作成するゲージのタイプに関係なく、基本的に同じです。必要なものは、メトリック値(つまり、ゲージで示す指標)のみです。ただし、データ・コレクション内の行に最大、最小、しきい値などの範囲情報が含まれている場合は、その値をゲージにバインドして動的な設定を示すことができます。ゲージの上部または下部ラベルで使用する情報がデータ・コレクション内に含まれている場合も、その値をゲージにバインドできます。

データ・バインディングの完了後にゲージをカスタマイズする方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「ゲージ・コンポーネントの使用」の項を参照してください。

26.4.1 データバインドされたダイアル・ゲージの作成方法

ADFゲージ・コンポーネントを使用して、円形、ドーム型または矩形の背景にダイアル・ゲージを作成できます。ゲージのインジケータでは、メトリックの現在の値を指定します。

図26-26に示す単一のダイアル・ゲージは、ADF DVTサンプル・アプリケーションの在庫品目についてのAmountInStockデータからゲージを作成した場合に表示されます。AmountInStockメトリックの値(0.650K)は、ゲージの中心のラベルに表示されます。

図26-26 在庫ダイアル・ゲージで示される数量

データ・コントロールを使用してダイアル・ゲージを作成する場合は、ゲージ・コンポーネントをデータ・コレクションの属性にバインドします。JDeveloperを使用すると、「データ・コントロール」パネルから属性をドラッグ・アンド・ドロップすることで、この処理を宣言的に実行できます。属性をドラッグ・アンド・ドロップした後で、ダイアル・ゲージの作成ダイアログを使用してゲージを構成します。

図26-27に示す「ダイアル・ゲージの作成」ダイアログは、図26-26に示した在庫数量ダイアル・ゲージ用に構成されていて、図26-25に示したゲージ・タイプを使用しています。

図26-27 在庫数量ダイアル・ゲージの「ダイアル・ゲージの作成」ダイアログ

始める前に:

データバインドされたデータ視覚化ゲージについて理解しておいてください。詳細は、26.4項「データバインドされたゲージの作成」を参照してください。

次のタスクを完了する必要があります。

• 9.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。

• 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のJSF JSPページの作成方法に関する項の手順に従い、JSFページを作成します。

データバインドされたダイアル・ゲージを作成するには:

1. 「データ・コントロール」パネルから、コレクションの属性を選択します。

   たとえば、ADF DVTサンプル・アプリケーションに、在庫品目のインベントリ・レベルについて表示するダイアル・ゲージを作成する場合は、ProductInventoryView1コレクションのAmountInStock属性を選択します。図26-28は、AmountInStock属性を選択している「データ・コントロール」パネルのProductInventoryView1コレクションを示しています。

   図26-28 在庫品目の在庫数量を含むデータ・コレクション

   
   

2. JSFページに属性をドラッグして、ポップアップ・メニューから「ゲージ」を選択します。

3. 「コンポーネント・ギャラリ」で、ゲージのカテゴリとタイプを選択し、「OK」をクリックします。

4. 「ダイアル・ゲージの作成」ダイアログで、次の操作を実行します。

   • 「メトリック」フィールドで、データ・コレクション内の列がゲージで図示する実際の値を保持していることを確認します。このダイアログで必須なのは、この値のみです。

   • 「最小」フィールドで、ゲージ範囲の最小値がデータ・コレクションに格納されている場合は、ドロップダウン・リストから、この値が含まれている列を選択します。または、範囲の最小数を指定します。値を指定しない場合、最小値はデフォルトで0になります。

   • 「最大」フィールドで、ゲージ範囲の最大値がデータ・コレクションに格納されている場合は、この値が含まれている列を選択します。または、最大値を指定します。値を指定しない場合、最大値はデフォルトで100になります。

   • 「背景」フィールドで、ドロップダウン・リストから背景を選択します。

     使用可能な形状には、alta、light、antiqueまたはdarkシェーディングの付いた円形、ドーム型および矩形が含まれます。デフォルトでは、ゲージの背景は、現在のスキンのプライマリ設計を返すautoに設定されます。

   • 「インジケータ」フィールドで、ドロップダウン・リストからインジケータ・スタイルを選択します。

     使用可能なインジケータには、alta、antique、darkおよびlightが含まれます。デフォルトでは、インジケータは、ゲージの背景に一致するインジケータを選択するautoに設定されます。

   • 「メトリック・ラベルの表示」チェック・ボックスで、「メトリック・ラベルの表示」チェック・ボックスを選択して、ゲージのメトリック・ラベルを表示します。メトリック・ラベルには、ゲージの実際のメトリック値が含まれます。たとえば、特定のアイテムの在庫数量が63の場合、メトリック・ラベルには63と表示されます。

5. 「OK」をクリックします。

ゲージのバインディングの完了後は、プロパティ・インスペクタで、ゲージ・タグおよびその子タグの追加属性の値を設定し、コンポーネントをカスタマイズできます。たとえば、スケーリングなしで在庫数量を表示するように在庫数量ゲージを構成する場合は、メトリックのscaling属性とティック・ラベルをnoneに設定します。

また、既存のゲージ・バインディングを確認して調整するには、そのゲージ・コンポーネントのプロパティ・インスペクタで「編集」アイコンをクリックします。

データ・バインディングの完了後にゲージをカスタマイズする方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「ゲージ・コンポーネントの使用」の項を参照してください。

26.4.2 データ・コントロールからのダイアル・ゲージの作成時の処理

ゲージを「データ・コントロール」パネルからドロップすると、次の処理が行われます。

• ゲージのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。

• UIコンポーネントに必要なコードをJSFページに追加します。

例26-7に示すバインディングは、倉庫内にある製品のインベントリ・レベルを表示するダイアル・ゲージ用にJDeveloperが生成したものです。このコード例では、ゲージ・メトリックがProductInventoryView1データ・コレクション内のAmountInStock属性から動的に値を受け取ることを示しています。

例26-7 ダイアル・ゲージのバインディング

<bindings>
  <attributeValues IterBinding="ProductInventoryView1Iterator" id="AmountInStock">
    <AttrNames>
      <Item Value="AmountInStock"/>
    </AttrNames>
  </attributeValues>
</bindings>

例26-8に、ダイアル・ゲージに対して­JDeveloperによりJSFページに生成されたコードを示します。

例26-8 ダイアル・ゲージのJSFページのコード

<dvt:dialGauge id="dialGauge1" indicator="needleAlta" minimum="0"
               maximum="2600" background="domeAlta"
               value="#{bindings.AmountInStock.inputValue}">
  <dvt:gaugeMetricLabel rendered="true" id="gml1"/>
</dvt:dialGauge>

26.4.3 データバインドされた評価ゲージの作成方法

評価ゲージは、メトリック値の入力を表示し、オプションで受け入れます。このゲージは、通常、映画の星評価など、製品やサービスの評価を示すために使用されます。

図26-29に、ADFサンプル・アプリケーションの顧客の信用格付けを示すために使用されている評価ゲージの例を示します。この例では、顧客の信用格付けが低く、星が1つ割り当てられています。その他の評価には、普通の信用を示す星2つ、高い信用を示す星3つ、非常に高い信用を示す星4つがあります。

図26-29 ADFサンプル・アプリケーションの評価ゲージ

データ・コントロールを使用して評価ゲージを作成する場合は、評価ゲージをデータ・コレクションの属性にバインドします。JDeveloperを使用すると、「データ・コントロール」パネルから属性をドラッグ・アンド・ドロップすることで、この処理を宣言的に実行できます。属性をドラッグ・アンド・ドロップした後で、「評価ゲージの作成」ダイアログを使用してゲージを構成します。

図26-30に、図26-29の評価ゲージに対して完成した「評価ゲージの作成」ダイアログを示します。この例では、評価ゲージは4つの信用格付けを表すために最大値の4に設定されています。

図26-30 信用格付けゲージの「評価ゲージの作成」ダイアログ

始める前に:

データバインドされたデータ視覚化ゲージについて理解しておいてください。詳細は、26.4項「データバインドされたゲージの作成」を参照してください。

次のタスクを完了する必要があります。

• 9.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。

• 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のJSF JSPページの作成方法に関する項の手順に従い、JSFページを作成します。

データバインドされた評価ゲージを作成する手順:

1. 「データ・コントロール」パネルから、コレクションの属性を選択します。

   たとえば、ADFサンプル・アプリケーションの評価ゲージを作成して、顧客の信用格付けを表示するには、CustomerコレクションでCreditRatingId属性を選択します。図26-31は、CreditRatingId属性を選択している「データ・コントロール」パネルのCustomerコレクションを示しています。

   図26-31 在庫品目の在庫数量を含むデータ・コレクション

   
   

2. JSFページに属性をドラッグして、ポップアップ・メニューから「ゲージ」を選択します。

3. 「コンポーネント・ギャラリ」で、ゲージのカテゴリとタイプを選択し、「OK」をクリックします。

4. 「評価ゲージの作成」ダイアログで、次の操作を実行します。

   • 「評価値」フィールドで、データ・コレクション内の列がゲージで図示する実際の値を保持していることを確認します。このダイアログで必須なのは、この値のみです。

   • 「最小」フィールドで、ゲージ範囲の最小値がデータ・コレクションに格納されている場合は、ドロップダウン・リストから、この値が含まれている列を選択します。または、範囲の最小数を指定します。値を指定しない場合、最小値はデフォルトで0になります。

   • 「最大」フィールドで、ゲージ範囲の最大値がデータ・コレクションに格納されている場合は、この値が含まれている列を選択します。または、最大値を指定します。値を指定しない場合、最大値はデフォルトで5になります。

   • 「図形」フィールドで、ドロップダウン・リストから背景を選択します。

     使用可能な形状には、円形、ひし形、矩形および星型が含まれます。

5. 「OK」をクリックします。

ゲージのバインディングの完了後は、プロパティ・インスペクタで、ゲージ・タグおよびその子タグの追加属性の値を設定し、コンポーネントをカスタマイズできます。たとえば、顧客の信用格付けを更新できるように評価ゲージを構成するには、評価ゲージのreadOnly属性をfalseに設定します。

ADFの例では、評価ゲージの値は作成時にCreditRatingIdに設定されました。ただし、CreditRatingIdは実際には1から4の範囲で、1が最高評価です。格付けを評価ゲージの星に変換するには、ゲージの作成後に「コード・エディタ」でソース・コードを編集し、評価ゲージの値を#{5 - bindings.CreditRatingId.inputValue}で置換します。

例26-9に、ADF評価ゲージのJSFページのコードを示します。

例26-9 ADF評価ゲージのJSFページのコード

<dvt:ratingGauge id="ratingGauge1" minimum="0" maximum="4"
                 value="#{5 - bindings.CreditRatingId.inputValue}" shape="star"/>

また、既存のゲージ・バインディングを確認して調整するには、そのゲージ・コンポーネントのプロパティ・インスペクタで「編集」アイコンをクリックします。

データ・バインディングの完了後にゲージをカスタマイズする方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「ゲージ・コンポーネントの使用」の項を参照してください。

26.4.4 データバインドされたADF表へのゲージの組込み

データバインドされたADF表に、データバインドされたゲージを追加するには、表を編集または作成しているときに、列コンテンツを指定する際にgaugeコンポーネントを選択します。

図26-32に、表の一部を示します。この表は、倉庫内のすべての製品をADF DVTサンプル・アプリケーションに表示します。この例では、AmountInStock列に、各製品の在庫数量と、値が許容範囲内にあるかどうかを示すLEDゲージが組み込まれています。

図26-32 ADFのLEDゲージの表

26.4.4.1 データバインドされたADF表にゲージを組み込む方法

データバインドされたADF表にゲージを追加するには、「データ・コントロール」パネルからJSFページに、ゲージ・メトリックを含むデータ・コレクションをドラッグして、作成するゲージのタイプを指定します。

始める前に:

データバインドされたデータ視覚化ゲージについて理解しておいてください。詳細は、26.4項「データバインドされたゲージの作成」を参照してください。

次のタスクを完了する必要があります。

• 9.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。

• 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のJSF JSPページの作成方法に関する項の手順に従い、JSFページを作成します。

データバインドされたADF表にゲージを組み込むには:

1. 「データ・コントロール」パネルから、ADF表に使用するコレクションを選択します。

   たとえば、ADF DVTサンプル・アプリケーションに、倉庫内の製品ごとのインベントリ・レベルを表示する表を作成する場合は、ProductInventoryView1コレクションを選択します。図26-33に、「データ・コントロール」パネル内のProductInventoryView1コレクションを示します。

   図26-33 ProductInventoryView1データ・コレクション

   
   

2. JSFページにコレクションをドラッグし、ポップアップ・メニューから「表」→「ADF表」を選択します。

3. 「表の列の編集」ダイアログで、ゲージ・メトリックを表す列を選択します。

   たとえば、ゲージ・メトリックとして使用する列にAmountInStock列を選択します。

4. 「使用するコンポーネント」メニューから、作成するゲージのタイプを選択します。

   たとえば、「ゲージ・ステータス・メーター」を選択すると、表にステータス・メーターが追加されます。

5. 表の構成を完了します。

   ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。

   図26-34は、図26-32に示した表の必要事項を入力したダイアログです。このダイアログでは、AmountInStock列で「LEDゲージ」が選択されています。

   図26-34 LEDゲージを示す「表の作成」ダイアログ

   
   

6. 「OK」をクリックして、JSFページに表を追加します。

表のバインディングの完了後は、プロパティ・インスペクタで、ゲージ・タグおよびその子タグの追加属性の値を設定し、コンポーネントをカスタマイズできます。たとえば、図26-32のLEDゲージは、しきい値を使用して在庫レベルが許容範囲内かどうかを示すように構成されています。ゲージしきい値の構成の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の、ゲージしきい値の構成方法に関する項を参照してください。

既存の表バインディングを確認して調整するには、表コンポーネントのプロパティ・インスペクタで「編集」アイコンをクリックします。

データバインドされたADF表の作成および構成の追加情報は、第23章「ADFによるデータバインドされた表の作成」を参照してください。ゲージ・コンポーネントの使用とカスタマイズの追加情報は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のゲージ・コンポーネントの使用に関する項を参照してください。

26.4.4.2 ADF表へのゲージの組込み時の処理

データバインドされたADF表にゲージを組み込むと、ゲージのメトリック属性がページ定義ファイルに追加され、JSFページのUIコンポーネントが更新されます。

例26-10は、図26-32で示したADF表のバインディングです。

例26-10 LEDゲージのあるADF表のバインディング

<bindings>
  <tree IterBinding="ProductInventoryView1Iterator" id="ProductInventoryView1">
    <nodeDefinition DefName="model.ProductInventoryView"
                    Name="ProductInventoryView10">
      <AttrNames>
        <Item Value="ProductId"/>
        <Item Value="Name"/>
        <Item Value="ShortDesc"/>
        <Item Value="AmountInStock"/>
        <Item Value="ReorderPoint"/>
        <Item Value="MaxInStock"/>
        <Item Value="WarehouseId"/>
      </AttrNames>
    </nodeDefinition>
  </tree>
</bindings>

例26-11に、ADF表のJSFページに追加されたコードを示します。gauge要素は、太字で強調してあります。簡潔にするために、表の最初の3列のみを表示しています。

例26-11 データバインドされた表にゲージを表示するJSFページのサンプル・コード

<af:table value="#{bindings.ProductInventoryView1.collectionModel}" var="row"
          rows="#{bindings.ProductInventoryView1.rangeSize}"
          emptyText="#{bindings.ProductInventoryView1.viewable ?
                    'No data to display.' : 'Access Denied.'}"
          rowBandingInterval="0"
          fetchSize="#{bindings.ProductInventoryView1.rangeSize}" id="t1"
          summary="Table Showing Product Inventory">
  <af:column headerText="#{bindings.ProductInventoryView1.hints.ProductId.label}"
             id="c1" width="100"
             rowHeader="true">
    <af:outputText value="#{row.ProductId}"
             shortDesc="#{bindings.ProductInventoryView1.hints.ProductId.tooltip}"
             id="ot1">
      <af:convertNumber groupingUsed="false"
                        pattern="#{bindings.ProductInventoryView1.hints.ProductId.format}"/>
    </af:outputText>
  </af:column>
  <af:column headerText="#{bindings.ProductInventoryView1.hints.Name.label}"
             id="c2" width="100">
    <af:outputText value="#{row.Name}"
                   shortDesc="#{bindings.ProductInventoryView1.hints.Name.tooltip}" id="ot2"/>
  </af:column>
  <af:column headerText="#{bindings.ProductInventoryView1.hints.ShortDesc.label}"
             id="c3" width="100">
    <af:outputText value="#{row.ShortDesc}"
                   shortDesc="#{bindings.ProductInventoryView1.hints.ShortDesc.tooltip}" id="ot3"/>
  </af:column>
  <af:column headerText="#{bindings.ProductInventoryView1.hints.AmountInStock.label}"
             id="c4" width="72" align="center">
    <dvt:ledGauge id="ledGauge1" value="#{row.bindings.AmountInStock.inputValue}"
                  shortDesc="#{bindings.ProductInventoryView1.hints.AmountInStock.tooltip}"
                  maximum="3000">
      <dvt:gaugeMetricLabel rendered="true" scaling="none" id="gml1"/>
      <dvt:gaugeThreshold id="gt1" maximum="#{row.bindings.ReorderPoint.inputValue}"
                          color="#d62800"/>
      <dvt:gaugeThreshold id="gt2" maximum="#{row.bindings.MaxInStock.inputValue}"
                          color="#63a500"/>
      <dvt:gaugeThreshold id="gt3" color="#e7e700"/>
    </dvt:ledGauge>
  </af:column>

... remaining columns omitted
</af:table>

26.5 データバインドされたNBoxの作成

ADFのnBoxコンポーネントは、行と列で視覚的に表される2次元のグリッドに沿ってデータを視覚化および比較するために使用できる対話型コンポーネンを生成します。nBoxコンポーネントは、2つの部分(データを表すノードと、ノードの挿入先のセルからなるグリッド)で構成されます。ノードの数がセルに割り当てられている領域を超えると、NBoxでインジケータが表示され、ユーザーはそれをクリックして追加ノードにアクセスできます。

図26-35は、3つの行と4つの列からなるグリッドが表示されるように構成したNBoxの例を示しています。各行は、Low、MediumまたはHighというラベルの付いた人口データ範囲を表しています。各列は、Lower、Lo-Mid、Hi-MidまたはUpperというラベルの付いた収入データ範囲を表しています。ノードは州を表しており、州の人口と収入レベルの値に基づいてセルに挿入されます。また、NBoxの例では、オプション属性グループを使用して、Divisionの値によって各ノードを色分けし、Regionの値によってノードのアイコン・マーカーの図形を変えています。

図26-35 米国の州、収入および人口を示すNBox

NBoxの作成ウィザードでは、NBoxを作成してデータにバインドするための宣言的サポートが提供されます。ウィザードページでは、次の操作を行うことができます。

• 次を含む、NBoxの初期レイアウトを指定します。

  • 行および列の数(必須)

  • NBoxの各行および列の値(必須)

  • NBoxの行および列のタイトル

  • NBoxの各行および列のラベル

• 次を含む、NBoxのノードを構成します。

  • ノードの行と列の配置を決定するためにデータ・コレクションから使用する属性(必須)

  • プライマリ・ノードおよびセカンダリ・ノードのラベル

  • 指定した属性に応じて色別または図形別にノードを分けるための属性グループ

  • ノードのアイコンまたはインジケータに使用するイメージ

NBoxウィザードの完了後、NBoxがページに追加されたら、プロパティ・インスペクタを使用してNBoxをさらにカスタマイズできます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のNBoxコンポーネントの使用に関する説明を参照してください。

26.5.1 ADFデータ・コントロールを使用したNBoxコンポーネントの作成方法

データ・コントロールを使用してDVT NBoxを作成するには、dvt:nBoxコンポーネントをコレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。

ヒント: また、コンポーネント・パレットからNBoxをドラッグして、NBoxを作成することもできます。この方法では、コンポーネントをデータにバインドする前に、NBoxのユーザー・インタフェースを設計できます。

始める前に:

次のタスクを完了する必要があります。

• 9.2項「アプリケーション・モジュールの作成と変更」の説明に従って、NBoxのデータ・モデルで必要な、ビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。

  図26-36は、図26-35に示されているNBoxのデータ・コントロールを示しています。この例では、CensusView1にNBoxのデータ・コレクションが含まれています。NBoxのノードは、州の名前で識別された長方形の枠として視覚的に表されます。各ノードは、ノードのPopulation2006Level属性およびIncome2005Class属性の値に応じて、NBoxのセルの1つに挿入されます。

  図26-36 米国の収入と人口を示すNBoxのデータ・コントロール

  
  

  この例では、行が範囲として定義され、最も低い範囲がNBoxの一番下の行に表示されます。たとえば、Population2006の値が1,000,000以下のノードは、lowのPopulation2006Levelに割り当てられます。また、列も範囲として定義され、最も低い範囲が、左から右へ記述するロケールでは一番左の列に表示され、右から左へ記述するロケールでは一番右の列に表示されます。

  Population2006Level属性とIncome2005Class属性は一時属性として定義され、その値はデータ・コレクション内のPopulation2006属性とIncome2005属性から導出されます。次のコード・サンプルは、Population2006Level一時属性の値の定義に使用されるEL式を示しています。

  Population2006 <= 1000000? 'low': (Population2006 <= 5000000 ? 'medium' : 'high')
  

  次のコード・サンプルに、Income2005Class一時属性の値を定義するEL式を示します。

  Income2005 <= 40000.0 ? 'lower' : (Income2005 <= 45000.0 ? 'lo-mid' : (Income2005 <= 50000.0 ? 'hi-mid' : 'upper'))
  

  ビュー・オブジェクトへの一時属性の詳細は、5.15項「ビュー・オブジェクトへの計算属性および一時属性の追加」を参照してください。

• 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のJSFページの作成方法に関する項に従ってJSFページを作成します。

データバインドされたNBoxを作成するには、次の手順を実行します。

1. 「データ・コントロール」パネルから、コレクションを選択します。

2. コレクションをJSFページにドラッグし、メニューから「NBox」を選択します。

3. NBoxグリッドを構成するための「NBoxの作成」ダイアログで、NBox内の行数と列数を表す数値を入力します。

   たとえば、3つの行と4つの列を持つNBoxを作成する場合は、「行」に3、「列」に4を入力します。

4. オプションで、NBoxの行および列のタイトルに表示するテキスト・ラベルを入力します。リソース・バンドル内のテキスト・リソースをテキスト・ラベルと関連付ける場合は、「テキスト・リソースの選択」を選択して、その目的で使用可能なダイアログを開きます。オブジェクトに格納されているデータにアクセスする場合や、EL式を使用してメソッドを参照および呼び出す場合は、「式ビルダー」を選択して「式ビルダー」ダイアログを開きます。動的サンプルNBoxに行タイトルが表示されます。

5. NBox内のセルごとに、行と列の値を入力します。

   たとえば、この項に示されたデータ・コントロールを使用する場合は、Row1に行の値としてlowを入力し、Column 1の値としてlowerを入力します。

   オプションで、各セル内にテキスト・ラベルを表示するには、「テキスト・リソースの選択」を選択して、ラベルにテキスト・リソースを関連付けます。オブジェクトに格納されているデータにアクセスする場合や、EL式を使用してメソッドを参照および呼び出す場合は、「式ビルダー」を選択して「式ビルダー」ダイアログを開きます。

   「次の行」または「次の列」をクリックすると、NBox内の次の行または列に移動できます。あるいは、NBox動的サンプル内の目的のセルをクリックすると、そのセルの行フィールドと列フィールドを表示できます。値の入力が完了したら、「次へ」をクリックして次のダイアログに移動します。

   図26-37は、この項に示したNBoxの設定済のダイアログを示しています。

   図26-37 米国の人口と収入を示すNBoxのNBoxダイアログの作成

   
   

6. ノード構成用の「NBoxの作成」ダイアログの「行」フィールドと「列」フィールドで、行と列の値を含むデータ・コレクションから属性を選択します。オブジェクトに格納されているデータにアクセスする場合や、EL式を使用してメソッドを参照および呼び出す場合は、「式ビルダー」を選択して「式ビルダー」ダイアログを開きます。

   たとえば、この項に示した一時属性を使用する場合は、「Population2006Level」および「Income2005Class」を選択します。

7. オプションで、ノード内にテキスト・ラベルを表示する場合は、「ラベル」および「第2ラベル」ドロップダウン・メニューから、テキスト・ラベルに使用する属性を選択します。ラベルにテキスト・リソースを使用するには、「テキスト・リソースの選択」を選択して、ラベルにテキスト・リソースを関連付けます。オブジェクトに格納されているデータにアクセスする場合や、EL式を使用してメソッドを参照および呼び出す場合は、「式ビルダー」を選択して「式ビルダー」ダイアログを開きます。

8. オプションで、NBoxノードのアイコンまたはインジケータを構成する場合は、「NBoxの作成」ダイアログで「アイコン」または「インジケータ」をクリックして、次の値を入力します。

   • 図形: クリックしてドロップダウンを使用し、アイコンまたはインジケータに使用する図形を選択します。有効な値は、circle、human、diamond、square、triangleDown、triangleUpおよびplusです。

     
     

     注意: アイコンまたはインジケータの図形を明示的に指定すると、NBox内の各ノードに同じ図形が使用されます。なんらかのメジャーに従って図形を変える場合は、かわりに属性グループを構成します。

     
     

   • イメージ: クリックしてドロップダウンを使用し、アイコンまたはインジケータに使用するイメージを選択します。

9. オプションで、NBoxのノード、アイコンまたはインジケータの属性グループを構成する場合は、「ノード」、「アイコン」または「インジケータ」タブの「グループ化ルール」で「新規作成」をクリックします。NBoxのノード、アイコンまたはインジケータの表示を色、図形またはパターンに基づいて変えるには、属性グループを使用します。属性グループは、凡例を表示する場合にも必要です。

   属性グループを構成するには、次の値を入力します。

   • 値でグループ化: ドロップダウン・リストから、属性グループをグループ化するためのデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。

     この項のサンプル・アプリケーションは、Divisionによってノードを、Regionによってアイコンをグループ分けするための属性グループを定義しています。たとえば、CensusView1コレクションの「値でグループ化」として「Division」を選択すると、NBoxのノードに表示される色は色に応じて変わります。

   • 「ノード」、「アイコン」または「インジケータ」: ドロップダウン・リストから、表示のためのグループ分けに使用するオプションを選択します。

     NBoxノードの場合、ノードを色でグループ分けするには「色」を選択し、属性グループを色で区別し、色をインジケータとして表示するには「インジケータの色」を選択します。属性グループを色とインジケータ色の両方で区別するには、「複数の属性の選択」を選択し、「色」と「インジケータの色」の両方を選択します。「OK」をクリックします。

     NBoxのアイコンおよびインジケータの場合、「色」、「図形」または「パターン」を選択して、アイコンまたはインジケータを色、図形またはパターンでグループ分けします。属性グループを複数の属性で区別するには、「複数の属性の選択」を選択し、ダイアログから「色」、「図形」または「パターン」を選択します。「OK」をクリックします。

   • 凡例ラベル: ドロップダウン・リストから、NBoxの凡例に表示するデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。

   • セクション・ラベル: ラベルにテキスト・リソースを使用するには、「テキスト・リソースの選択」を選択して、ラベルにテキスト・リソースを関連付けます。オブジェクトに格納されているデータにアクセスする場合や、EL式を使用してメソッドを参照および呼び出す場合は、「式ビルダー」を選択して「式ビルダー」ダイアログを開きます。

     
     

     注意: セクション・ラベルは、凡例のサブセクションの凡例内容を記したもので、凡例領域にレンダリングされます。たとえば、図26-35では、DivisionとRegionがセクション・ラベルです。

     
     

     図26-38は、ノードを構成するための設定済の「NBoxの作成」ダイアログを示しています。

     図26-38 ノード構成のための「NBoxの作成」ダイアログ

     
     

   • オプションで、「値固有のルール」をクリックして属性グループ・ダイアログを拡張し、一致ルールまたは例外ルールを指定します。一致ルールは、単純なtrueまたはfalse条件に対して色またはパターンを指定するか、特定の値に一致させたい場合に使用します。グループ化値が特定の条件を満たしたときの色またはパターンを指定する場合は、例外ルールを使用します。

     一致ルールを指定するには、「一致ルール」セクションで「新規」をクリックして、次の値を入力します。

     • グループ値: 一致に対するカテゴリ値を入力します。カテゴリを表す文字列を入力するか、trueまたはfalseに設定できます。この値をtrueまたはfalseに設定する場合、「値でグループ化」フィールドには、次の例に示すように、trueまたはfalseに評価されるEL式(#{row.AmountInStock gt row.ReorderPoint}など)を指定する必要があります。

     • プロパティ: ドロップダウン・リストから、ノードを色で区別する場合は「色」を、ノードのインジケータ領域の背景を色で区別する場合は「インジケータの色」を選択します。

     • プロパティ値: ドロップダウン・リストから、ノードの値が「グループ値」に一致する場合に表示する色またはパターンを選択します。色については、提供されているいずれかの色を選択するか、「カスタム・カラー」を選択して「カスタム・カラーの選択」ダイアログでカスタム・カラーを指定できます。パターンについては、提供されているいずれかの値を選択する必要があります。

     例外ルールを指定するには、「例外ルール」セクションで「新規」をクリックして、次の値を入力します。

     • 条件: trueまたはfalseに評価されるJSF EL式を入力します。「条件」フィールドに式を直接入力するか、「式ビルダー」を選択してJSF EL式を入力できます。

     • プロパティ: ドロップダウン・リストから、ノードを色で区別する場合は「色」を選択します。ノードのインジケータ領域をインジケータの色で区別する場合は、「インジケータの色」を選択します。

     • プロパティ値: ドロップダウン・リストから、ノードの値が「条件」フィールドで指定した条件に一致する場合に表示する色またはパターンを選択します。色については、提供されているいずれかの色を選択するか、「カスタム・カラー」を選択して「カスタム・カラーの選択」ダイアログでカスタム・カラーを指定できます。パターンについては、提供されているいずれかの値を選択する必要があります。

     • 凡例ラベル: 凡例ラベルにテキスト・リソースを使用するには、ドロップダウン・リストから「テキスト・リソースの選択」を選択します。このフィールドにテキストを入力するか、「式ビルダー」を選択してJSF EL式を入力することもできます。

10. ノード構成が完了したら、「終了」をクリックしてダイアログを終了し、NBoxをページに追加します。

「NBoxの作成」ダイアログに必要事項を入力した後で、プロパティ・インスペクタを使用してNBox属性の設定を指定したり、NBoxタグに関連付けられた子タグを使用してNBoxをさらにカスタマイズすることもできます。NBoxのエンド・ユーザーとプレゼンテーション機能、ユースケース、タグ構造および特殊機能の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のNBoxコンポーネントの使用に関する説明を参照してください。

26.5.2 データバインドされたNBoxを作成すると行われる処理

NBoxを「データ・コントロール」パネルからドロップすると、次の処理が行われます。

• JSFページのページ定義ファイル内にNBoxのバインディングが作成されます。

• dvt:nBoxコンポーネントのJSFページに必要なタグが追加されます。

26.5.2.1 NBoxコンポーネントのバインディング

次のコード・サンプルは、JDeveloperで図26-36のデータ・コレクションを使用してdvt:nBoxコンポーネントに生成されたバインディングを示しています。

<executables>
  <variableIterator id="variables"/>
  <iterator Binds="CensusView1" RangeSize="-1" DataControl="AppModuleDataControl"
            id="CensusView1Iterator"/>
</executables>
<bindings>
  <tree IterBinding="CensusView1Iterator" id="CensusView1">
    <nodeDefinition DefName="model.CensusView" Name="CensusView10">
      <AttrNames>
        <Item Value="Population2006Level"/>
        <Item Value="Income2005Class"/>
        <Item Value="State"/>
        <Item Value="Division"/>
        <Item Value="Region"/>
      </AttrNames>
    </nodeDefinition>
  </tree>
</bindings>

NBoxのノードにデータを移入するためのルールは、ノード定義として定義されます。各ノード定義は、ビュー・オブジェクト1つと「NBoxの作成」ダイアログで指定された属性を参照しています。

26.5.2.2 NBoxバインディングの編集

作成中に「NBoxの作成」ダイアログで指定していない属性は、バインディングに含められません。データ・コレクションの別の属性を参照する必要がある場合は、バインディングに手動で追加する必要があります。たとえば、この項のサンプルでは、ユーザーがノードにマウスを置くと、州の人口と収入を示すツールチップが表示されます。

図26-39 NBoxのツールチップ

ツールチップが適切に評価されるためには、Population2006 and Income2005属性をNBoxのバインディング定義に追加する必要があります。

バインディングを追加するには、「構造」ウィンドウでdvt:nBoxコンポーネントを右クリックし、「バインディングに移動」を選択します。「バインディング」セクションで「編集」を選択して、Population2006属性とIncome 2005属性を追加します。

図26-40は、表示属性にPopulation2006およびIncome2005が追加された設定済の「ツリー・バインディングの編集」を示しています。

図26-40 NBoxサンプルの「ツリー・バインディングの編集」ダイアログ

「OK」をクリックすると、バインディングが追加した属性で更新されます。次のコード・サンプルは、CensusView10ノード定義の改訂済バインディングを示しています。

<nodeDefinition DefName="model.CensusView" Name="CensusView10">
  <AttrNames>
    <Item Value="Population2006Level"/>
    <Item Value="Income2005Class"/>
    <Item Value="State"/>
    <Item Value="Division"/>
    <Item Value="Region"/>
    <Item Value="Population2006"/>
    <Item Value="Income2005"/>
  </AttrNames>
</nodeDefinition>

26.5.2.3 NBoxコンポーネントのJSFページのコード

次の例は、NBoxのJSFページで生成されたコードを示しています。

<dvt:nBox id="nb1" var="ent" rowsTitle="#{viewcontrollerBundle.POPULATION}"
          value="#{bindings.CensusView1.collectionModel}"
          columnsTitle="#{viewcontrollerBundle.INCOME}">
  <f:facet name="rows">
    <af:group id="g1">
      <dvt:nBoxRow label="#{viewcontrollerBundle.LOW}" id="nbr1" value="low"/>
      <dvt:nBoxRow label="#{viewcontrollerBundle.MEDIUM}" id="nbr2" value="medium"/>
      <dvt:nBoxRow label="#{viewcontrollerBundle.HIGH}" id="nbr3" value="high"/>
    </af:group>
  </f:facet>
  <f:facet name="columns">
    <af:group id="g2">
      <dvt:nBoxColumn label="#{viewcontrollerBundle.LOWER}" id="nbc1" value="lower"/>
      <dvt:nBoxColumn label="#{viewcontrollerBundle.LO_MID}" id="nbc2" value="lo-mid"/>
      <dvt:nBoxColumn label="#{viewcontrollerBundle.HI_MID}" id="nbc3" value="hi-mid"/>
      <dvt:nBoxColumn label="#{viewcontrollerBundle.UPPER}" id="nbc4" value="upper"/>
    </af:group>
  </f:facet>
  <dvt:nBoxNode column="#{ent.Income2005Class}" row="#{ent.Population2006Level}"
                label="#{ent.State}" id="nbn1">
    <dvt:attributeGroups value="#{ent.Division}" type="color"
                         label="#{ent.Division}"
                         sectionLabel="#{viewcontrollerBundle.DIVISION}" id="ag1"/>
    <f:facet name="icon">
      <dvt:marker id="m1">
        <dvt:attributeGroups value="#{ent.Region}" type="shape"
                             label="#{ent.Region}"
                             sectionLabel="#{viewcontrollerBundle.REGION}"
                             id="ag2"/>
      </dvt:marker>
    </f:facet>
  </dvt:nBoxNode>
</dvt:nBox>

26.5.2.4 NBoxのプロパティとレイアウトの変更

NBoxを作成した後は、「NBoxの作成」ダイアログを使用して、コンポーネントのレイアウトを変更したり、ラベルなどの要素を追加したりできます。このダイアログを開くには、nBoxコンポーネントのプロパティ・インスペクタで「編集」アイコンを使用します。また、ビジュアル・エディタでNboxのコードを直接編集するか、プロパティ・インスペクタで値を設定して、レイアウトをカスタマイズすることもできます。

たとえば、図26-39に示したツールチップをNBoxに追加するには、プロパティ・インスペクタまたはコード・エディタで、NBoxノードのshortDesc属性の値を入力できます。

<dvt:nBoxNode column="#{ent.Income2005Class}" row="#{ent.Population2006Level}"
              label="#{ent.State}" id="nbn1"
              shortDesc="Population: #{ent.Population2006}&lt;br/>Income: #{ent.Income2005}">
    ... contents omitted
</dvt:nBoxNode>

NBoxのカスタマイズに関する詳細および例は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のNBoxコンポーネントの使用に関する説明を参照してください。

26.6 データバインドされたピボット・テーブルの作成

ADFピボット・テーブルには行と列からなるデータのグリッドが表示されます。また、行や列に表示されていないデータをフィルタするためのピボット・フィルタ・バーが表示されることもあります。ピボット・テーブルの構造は次のとおりです。

• 列エッジ: 1つ以上の情報レイヤーを持つピボット・テーブル上の横軸。

• 行エッジ: 1つ以上の情報レイヤーを持つピボット・テーブル左側の縦軸。

• ページ・エッジ: ピボット・テーブルで、データの表示をフィルタするために、0個以上の情報レイヤーを持つオプションのピボット・フィルタ・バー。

• データ本体: ピボット・テーブルのセルに表示される1つ以上の指標(つまり、データ値)。

図26-41は、売上を示すピボット・テーブルです。データ本体に売上高と個数、列エッジに地理データ・レイヤー、行エッジに年データ・レイヤーと商品データ・レイヤーが表示されています。ページ・エッジのピボット・フィルタ・バーには販路フィルタが表示されています。

図26-41 売上のピボット・テーブル

このピボット・テーブルは図26-42に示すCSVファイルのデータに基づいてデータを集計します。

図26-42 ピボット・テーブルのCSVデータ

「ピボット・テーブルの作成」ウィザードは、ピボット・テーブルをデータバインドし、構成するための宣言的サポートを提供します。ウィザードページでは、次の操作を行うことができます。

• ピボット・テーブルの初期レイアウトの指定

• ピボット・フィルタ・バーの関連付けと構成

• データ・レイヤーに対する代替ラベルの指定

• ドリルの挿入またはフィルタの設定

• データ値の集計の定義

• カテゴリおよびデータ・ソートの構成

ウィザードの先頭ページでピボット・テーブルのレイアウトを行うと、2ページめ以降で対応するエントリが初期化されます。ウィザードのページを進めるに従って、「戻る」ボタンおよび「次へ」ボタンを使用して、ピボット・テーブルを調整できます。ウィザード・ページの後半では、「終了」をクリックして、構成オプションをスキップすることもできます。

データバインディングの完了後にピボット・テーブルをカスタマイズする方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のADFピボット・テーブル・コンポーネントの使用方法についての章を参照してください。

26.6.1 ピボット・テーブルの作成方法

データ・コントロールを使用してピボット・テーブルを作成するには、ピボット・テーブル・コンポーネントをコレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。

ヒント: また、コンポーネント・パレットからピボット・テーブル・コンポーネントをドラッグして、ピボット・テーブルを作成することもできます。この方法では、コンポーネントをデータにバインドする前に、ピボット・テーブルのユーザー・インタフェースを設計できます。

図26-41に示したサンプルの売上ピボット・テーブルの作成をデモンストレーションするために、プレースホルダ・データ・コントロールが作成され、図26-42のCSVファイルのデータ・タイプが定義されました。詳細は、29.4項「プレースホルダ・データ・コントロールの使用」を参照してください。

データバインドされたピボット・テーブルを作成する手順:

1. 「データ・コントロール」パネルから、コレクションを選択します。

   たとえば、商品別に年ごとの売上高と売上個数を表示したピボット・テーブルを作成するには、図26-43に示すように、「データ・コントロール」パネルでptExamplePlaceholderコレクション用に定義されたptExampleDataを選択できます。

   図26-43 商品の売上高を年別に示すデータ・コレクション

   
   

2. データ・コレクションをJSFページにドラッグし、ポップアップ・メニューから「表」→「ADFピボット・テーブル」を選択します。

3. 「ピボット・テーブルの作成」ウィザードの「表示属性の選択」ページで、次のようにして、ピボット・テーブルの初期レイアウトを指定します。

   1. ピボット・フィルタ・バーとピボット・テーブルを関連付ける場合は、「ピボット・フィルタ・バーの作成」を選択します。必要に応じて、「使用可能な属性」リストからページ・エッジに属性をドラッグして、フィルタの初期ディスプレイを設定します。設定しなかった場合、空のピボット・フィルタ・バーが作成されます。データバインディング後、ピボット・テーブルにピボット・フィルタ・バーを追加する場合、ピボット・フィルタ・バーにデータ・モデルをバインドするには、ページ・ソースを直接編集する必要があります。

      
      

      注意: ピボット・フィルタ・バーを作成しなくても、ページ・エッジに属性を追加できます。この属性には、データ・モデルでプログラム的にアクセスすることができます。

      
      

   2. 初期レイアウトでは、属性を「使用可能な属性」リストからピボット・テーブルにドラッグし、ピボット・テーブルの列、行およびデータ本体の属性を選択します。

      ピボット・テーブル・レイアウトでは、データ・ラベルは、セル内のデータ(データ値)を表し、行エッジ、列エッジまたはページ・エッジのヘッダー・ラベルとして表示されるピボット・テーブルのレイヤーのことをいいます。ピボット・テーブルのデータ本体にドラッグした属性のラベルは、「データ・ラベル」レイヤーに表示されます。

      データ・ラベルは、列エッジ、行エッジまたはページ・エッジ上の任意の場所にドラッグできます。また、属性を同じエッジ上の別の場所や、別のエッジ上にドラッグすることも可能です。

      レイアウトで属性を配置または移動するためにドラッグ操作を使用するかわりに、属性を右クリックするか、[Shift]を押しながら[F10]を押して、ポップアップ・メニュー・オプションを表示することもできます。図26-44に、地理属性のポップアップ・メニュー・オプションを示します。

      図26-44 属性のポップアップ・メニューの表示

      
      
      
      

      注意: 属性の間に存在しうるドリル・パスは、行エッジ、列エッジ、およびページ・エッジに複数の属性をレイアウトするときに定義されます。このようなドリル・パスは、実行時にピボット・テーブルのドリルをサポートするために後で有効化できます。

      
      

   3. 「入力済属性」のデフォルトの選択から「名前-値ペア」に変更してデータ・ポイントをコレクションに格納する方法を構成する場合は、「データ形状の変更」ボタンをクリックします。次のオプションを提示するダイアログが表示されます。

      • 入力済属性

        コレクション内の各種データ・ポイントは、別々の属性によって表されます。このオプションは、ピボット・テーブル内のデータ・ポイントの種類が1つのみの場合も有効です。

        たとえば、推定値と実際値に対するデータ・ポイントがある場合は、推定値の属性と実際値の属性が異なる場合にのみ、「入力済属性」を選択します。

      • 名前-値ペア

        データ・ポイントの種類は複数でも、それらのタイプを指定する属性は1つのみであることを示します。この場合、単一の属性に、各種データ・タイプを識別する値があります。

        たとえば、ある属性に、推定値を表すデータ・ポイントの値としてESTがあり、実際値を表すデータ・ポイントの値としてACTがある場合があります。

   たとえば、図26-41の売上ピボット・テーブルの初期レイアウトを指定するには、図26-45にあるように、ページ・エッジにChannel属性、行エッジにYear属性とProduct属性、データ本文にSales属性とUnits属性(データ・ラベル)、列エッジにGeography属性をドラッグし、「ピボット・フィルタ・バーの作成」を選択します。

   図26-45 「ピボット・テーブルの作成」ウィザードの「表示属性の選択」ページ

   
   

4. ウィザードの「表示属性の選択」ページにレイアウトされた属性に対して代替ラベルまたは値を指定する場合は、「属性ラベルの指定」ページを使用して、次の手順を実行します。

   1. 「データ値」エリアでデータ値の代替ラベルを指定するには、実行時にその属性のヘッダー・セルにスタンプされているデフォルトの<データ属性名の使用>テキスト・ラベルを変更します。テキストは直接、入力できます。また、ピボット・テーブルでデータ値を1つ使用する場合など、ヘッダー・セルを表示しない場合は<ラベルなし>を選択します。

   2. 「カテゴリ」エリアで属性カテゴリの代替ラベルを指定するには、「属性の表示名」列にテキストを直接入力して、実行時にその属性のヘッダー・セルにスタンプされているデフォルトの<データ属性名の使用>テキスト・ラベルを変更します。ラベルは、実行時、ピボット・ハンドルに表示されます。

      また、「属性の表示名」列で別の属性を選択して、属性カテゴリに代替値を指定することもできます。たとえば、データ・コレクションでProductId属性を使用して、ピボット・テーブルをレイアウトしながら、ProductName属性値で人間が読みやすいように、ピボット・テーブルを改良することもできます。

   たとえば、図26-41の売上ピボット・テーブルのYear属性に代替ラベルを指定するには、図26-46に示すように「属性の表示名」フィールドにテキスト(Time)を入力します。

   図26-46 「ピボット・テーブルの作成」ウィザードの「属性ラベルの指定」ページ

   
   

5. 実行時に、ピボット・テーブルでドリル操作を公開する必要がある場合は、「ピボット・テーブルの作成」ウィザードの「ドリルの構成」ページを使用して、次のいずれかのオプションを有効にします。

   • 2つの属性の間の関係を折りたたまれたビューまたは展開されたビューに表示しながら、データ・レイヤーに詳細の集計値を保存するには、「ドリルの挿入」を選択します。実行時、ドリル・アイコンは親属性の表示ラベル内に表示されます。

     展開されたビューで、親属性の総計を子属性の前または後のどちらに表示するかを指定するには、「親行の挿入」を使用します。

     ドリルの挿入を有効にするには、次の手順の実行も必要です。

     • 有効化するドリル・パスを選択します。ドリル・パスは、ウィザードの「表示属性の選択」ページにある属性レイアウトに基づいて設定されます。

     • ウィザードの「集計の構成」ページで集計を設定します。

     たとえば、図26-47のピボット・テーブルは、ドリルの挿入を使用して、Yearデータ・レイヤーのビューを展開しています。各年の売上の集計値(2007年52,500ドル、2006年544,150ドル)および売上個数(2007年410個、2006年507個)は、製品の上にある行に表示されます。

     図26-47 「ドリルの挿入」が有効化されているピボット・テーブル

     
     

   • 折りたたまれたビューのデータ・レイヤーに詳細の集計値を保存せずに、属性の関係を折りたたまれたビューまたは展開されたビューに表示するには、「ドリルのフィルタ」を選択します。実行時、ドリル・アイコンは親属性の表示ラベル内で有効化されます。

     ドリルのフィルタはデータ・レイヤー属性の詳細にビューの焦点を当てます。たとえば、図26-48のピボット・テーブルは、ドリルのフィルタを使用して、Year (2007)データ・レイヤーのビューを展開し、総売上高(52,500)および売上個数(410)を表示しています。

     図26-48 ドリルのフィルタが有効化されているピボット・テーブル

     
     

     「ドリルのフィルタ」を有効化するには、有効化するドリル・パスを選択する必要があります。ドリル・パスは、ウィザードの「表示属性の選択」ページにある属性レイアウトに基づいて設定されます。

   たとえば、図26-41の売上ピボット・テーブルでドリルの挿入を有効化するには、図26-49に示すように、ウィザードの「ドリルの構成」ページに必要事項を入力します。

   図26-49 「ピボット・テーブルの作成」ウィザードの「ドリルの構成」ページ

   
   

6. ピボット・テーブルでデータの合計と小計を集計する方法を定義するには、「ピボット・テーブルの作成」ウィザードの「集計の構成」の1ページまたは2ページとも使用します。

   デフォルトでは、ピボット・テーブルに表示されている属性によってデータ・コレクションの各行が一意に識別されない場合、重複行のデータを集計してピボット・テーブルの単一のセルに折りたたむことができます。また、特定のデータ項目では、デフォルトの集計タイプを無視することもできます。

   • ピボット・テーブルでのデータの集計方法を指定するには、「データ集計」ページで次の手順を実行します。

     • 重複行を処理するためのデフォルト集計方法を変更する場合は、「デフォルトの関数」ドロップダウン・リストを使用して、値を指定します。有効な値は、Sum、Average、Count、Maximum、Minimum、Standard DeviationおよびVarianceです。

     • 特定のデータ値について、デフォルトの集計タイプを無視する場合は、「追加」アイコンをクリックして、使用可能な属性のために1行挿入します。次に、各属性の「関数」列で、集計に使用する数学演算を選択します。使用可能なオプションは、Sum、Average、Count、Maximum、Minimum、Standard DeviationおよびVarianceです。この属性は、ピボット・テーブルに複数のデータ値(SalesやUnitsなど)がバインドされている場合のみ有効です。

     たとえば、図26-41の売上ピボット・テーブルにあるUnitsデータ値のデフォルト集計タイプを無視するには、図26-50に示すように、「追加」アイコンを使用してUnits属性を追加し、「データ集計」ページの「関数」列でAverageを選択します。

     図26-50 「ピボット・テーブルの作成」ウィザードの「データ集計」ページ

     
     

   • また、ピボット・テーブルの列エッジ、行エッジまたはページ・エッジに追加された属性カテゴリについて、合計と小計を定義することもできます。「カテゴリの合計」ページで、「追加」アイコンを使用して、各属性を挿入するか、「すべての集計」を選択して、使用可能な属性をすべて追加してから、次の手順を実行します。

     • 「属性」列で、合計する属性を選択します。

     • 「関数」列で、集計に使用する数学演算を選択します。使用可能なオプションは、Sum、Average、Count、Maximum、Minimum、Standard DeviationおよびVarianceです。

     • 「属性」列で参照しているアイテムを基準として、集計結果を表示する位置を示す値を「合計の挿入」列で選択します。有効な値はBefore、AfterまたはReplaceです。

     • 「合計ラベル」列に、集計のラベルとして使用するテキストを入力します。

     
     

     注意: 読取り専用の「ドリル挿入の合計」表には、ピボット・テーブルでドリルの挿入を有効にした結果として、自動的に定義されたカテゴリ合計が表示されます。

     
     

     たとえば、図26-41の売上ピボット・テーブルでGeographyデータ・レイヤーとYearデータ・レイヤーの合計を定義するには、「関数」列で「Sum」、「合計の挿入」列で「After」を選択し、図26-51に示すように、「カテゴリの合計」ページの属性それぞれについて、「合計ラベル」列にテキスト(「地域合計」と「年合計」)を入力します。

     実行時に結果として得られたピボット・テーブルで特定の年の値を展開すると、直前のウィザードページのドリルの挿入オプションで指定したレイアウトと設定に基づいて子値から計算された合計が自動的に保存されます。

     図26-51 「ピボット・テーブルの作成」ウィザードの「カテゴリの合計」ページ

     
     

7. ピボット・テーブルでソートを設定するには、「ピボット・テーブルの作成」ウィザードの「ソートの構成」の1ページまたは2ページとも使用します。

   デフォルトでは、ピボット・テーブルのデータは、最初は外部行データ・レイヤーの値に基づいてソートされます。任意の行エッジ、列エッジまたはページ・エッジのデータ・レイヤーにソート順序を指定することができます。このようなソートをカテゴリ・ソートと呼びます。実行時に、データ・レイヤーを異なるエッジにピボットした場合、指定されたカテゴリのソート順序が使用されます。

   ウィザードの「表示属性の選択」ページでデータ本文にマップされた属性を並べることはできますが、データ・ラベル(データ値)のカテゴリ・ソートは指定できません。たとえば、図26-45はSalesおよびUnitsのデータ値を使ったピボット・テーブルのレイヤーを示しています。これらのメジャーのカテゴリ・ソートは指定できませんが、図26-41のように、実行時にピボット・テーブルのデータ本文に表示される値の順序は指定できます。

   また、ピボット・テーブルをレンダリングするときに、データ本文でのデータ値の初期ソート順序を指定することもできます。これはデータ・ソートと呼ばれます。

   • カテゴリごとにソートを設定するには、「カテゴリ・ソート」ページの「追加」アイコンを使用して、設定の対象となる各行エッジ、列エッジまたはページ・エッジの属性を追加し、その後、次の手順を実行します。

     • 「ソート属性」列で、ピボット・テーブル・ヘッダーの実際値に基づいてアルファベット順でソートすることを指定するにはデフォルトの<属性値の使用>をそのまま使用します。ソート順序をカスタマイズするには、ドロップダウン・リストからデータ・ラベルの値を指定します。たとえば、基礎となる問合せに、収益性別製品ランキングのランク計算が含まれている場合、ProductRank別に降順で製品が表示されるように指定できます。

     • 「初期ソート順序」で、初期ソート方向を選択します。有効な値はASCENDINGまたはDESCENDINGです。

     たとえば、図26-52は、列エッジにはChannelデータ・レイヤーを降順、行エッジにはYearデータ・レイヤーを昇順で表示するように構成されたウィザードの「カテゴリ・ソート」ページを示しています。

     図26-52 「ピボット・テーブルの作成」ウィザードの「カテゴリ・ソート」ページ

     
     

     実行時に表示されるピボット・テーブルは図26-53のとおりです。

     図26-53 カテゴリ・ソートの例

     
     

   • データのソートを構成するには、「データ・ソート」ページで、次の手順を実行します。

     • ピボット・テーブルがレンダリングされたときのデータの初期ソート順序を指定するには、「列でソート」を選択します。

     • 「初期ソート順序」ドロップダウン・リストで、初期ソート方向を選択します。有効な値はASCENDINGおよびDESCENDINGです。

     • 「シーケンスNull」ドロップダウン・リストで、NULL値をソートの先頭に表示する場合はFirst、NULL値をソートの最後に表示する場合はLastを指定します。

     • 「初期ソート列」表で、「レイヤー属性」列に表示されるデータ・レイヤーの「値」列にデータ値を指定します。

     たとえば、図26-54は、Units/World/Canoesデータ値に基づいて、年ごとにグループ化されたChannelデータ・レイヤーをソートするように構成された「データ・ソート」ページを示しています。

     図26-54 「ピボット・テーブルの作成」ウィザードの「データ・ソート」ページ

     
     

     実行時、ピボット・テーブルは最初に図26-55のようにレンダリングされます。

     図26-55 データ・ソートの例

     
     

8. 「終了」をクリックして、データバインドされたピボット・テーブルの作成を完了します。

ピボット・テーブルを作成するウィザードの完了後に、JDeveloperのツールを使用すると、ピボット・テーブルのルック・アンド・フィールをカスタマイズできます。たとえば、ヘッダー・セルのデフォルト・サイズに収まらないラベルのワード・ラップを構成したり、図26-41のピボット・テーブルのデータ・セット用にスクロール・バーのかわりのページ・コントロールを追加したりできます。

ピボット・テーブルをカスタマイズするには:

1. 「構造」ウィンドウで「dvt:pivotTable」ノードを右クリックし、「プロパティに移動」を選択します。

2. プロパティ・インスペクタで、「共通」セクションを開き、ScrollPolicyプロパティをpageに設定することで、デフォルトのスクロール・バーのかわりとしてのページ・コントロールを構成します。

3. 「構造」ウィンドウで「dvt:headerCell」ノードを右クリックし、「プロパティに移動」を選択します。

4. プロパティ・インスペクタで、「動作」セクションを開き、WhiteSpace属性をnormalに設定することで、ピボット・テーブルの各ヘッダーにワード・ラップを構成します。

データ・バインディングの完了後にピボット・テーブルをカスタマイズする方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「ADFピボット・テーブル・コンポーネントの使用」を参照してください。

26.6.2 「データ・コントロール」パネルによるピボット・テーブルの作成時の処理

ピボット・テーブルを「データ・コントロール」パネルからドロップすると、次の処理が行われます。

• ピボット・テーブルのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。

• UIコンポーネントに必要なコードをJSFページに追加します。

26.6.2.1 ピボット・テーブルのバインディング

「データ・コントロール」パネルからピボット・テーブルを作成すると、ページ定義ファイルがバインディングを使って更新されます。例26-12に、地域内の商品売上げと売上げ個数を年別に表示するピボット・テーブルに生成された行セット・バインディングを示します。ピボット・テーブルのデータ・マップには次の要素が含まれます。

• <columns>: 各列項目を定義します

• <rows>: 各行項目を適切な順番で定義します

• <pages>: ピボット・フィルタ・バーに組入れられる項目を定義します

• <aggregatedItems>: 項目の合計と小計を定義します

• <hierarchies>: 2つの項目間で考えられるドリル・パスを定義します

• <sorts>: ピボット・テーブル・データのカテゴリ・ソートと初期ソート順序を定義します

重複する行のデフォルト・データ集計方法は、<data>要素で指定します。重複の集計の詳細は、26.6.3項「ピボット・テーブルの属性の集計に関する必知事項」を参照してください。

ソート操作の詳細は、26.6.4項「ピボット・テーブルへの初期ソートの指定に関する必知事項」を参照してください。

例26-12 ADFピボット・テーブルのバインディングXML

<pivotTable IterBinding="ptExampleDataIterator" id="ptExampleData"
            xmlns="http://xmlns.oracle.com/adfm/dvt"
            ChangeEventPolicy="ppr">
  <pivotTableDataMap>
    <columns>
      <item value="Geography" itemLabel="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="Total Geography"/>
      <item aggregateLocation="AFTER" aggregateType="SUM" value="Year"
            aggregateLabel="Total Across Years"/>
    </aggregatedItems>
    <drills type="INSERT"/>
    <hierarchies>
      <item value="Year" location="BEFORE">
        <child value="Product" label="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>

26.6.2.2 ピボット・テーブルとピボット・フィルタ・バーのコード

「データ・コントロール」パネルを使ってピボット・テーブルを作成すると、必要なコードがページに追加されます。例26-13に、売上のピボット・テーブルと関連するピボット・フィルタ・バーに対してJSFページで生成されるコードを示します。

例26-13 ピボット・テーブルおよびピボット・フィルタ・バーのJSFページのXMLコード

<dvt:pivotFilterBar id="pivotTable1pivotFilterBar"
                    value="#{bindings.ptExampleData.pivotFilterBarModel}"
                    modelName="pivotTable1Model"/>
<dvt:pivotTable id="pivotTable1"
                value="#{bindings.ptExampleData.pivotTableModel}"
                modelName="pivotTable1Model"/>

26.6.3 ピボット・テーブルの属性の集計に関する必知事項

ピボット・テーブルに表示するために選択した属性によってデータ・コレクションの各行が一意に識別されない場合、重複行のデータを集計してピボット・テーブルの単一のセルに折りたたむことができます。

たとえば、図26-41に示すデータ・コレクションの行に店舗IDも含まれていた場合、商品、販路および地理の特定の組合せにおける全店舗のデータ行をピボット・テーブルの単一のセルに折りたたむ必要があります。

ピボット・テーブルには、重複するデータ行の計算の制御に使用できる次のオプションのデータ・バインディング属性があります。

• aggregateDuplicates: <data>要素のブール型プロパティ。重複行でデータ値を集計するために、バインディング実行時に特殊処理を有効化するかどうかを決定します。この属性が指定されていない場合、falseであると判断されます。

• defaultAggregateType: 重複を処理するためのデフォルト集計方法を指定する<data>要素の文字列プロパティ。有効な値は、SUM、AVERAGE、COUNT、MIN、MAX、STDDEVおよびVARIANCEです。aggregateDuplicatesがtrueで、defaultAggregateTypeが指定されていない場合、SUMであると判断されます。

• aggregateType: <item>要素の文字列プロパティ。特定のデータ項目のデフォルト集計タイプをオーバーライドすることができます。この属性は、ピボット・テーブルに複数のデータ値(SalesやUnitsなど)がバインドされている場合のみ有効です。

26.6.3.1 重複するデータ行のデフォルトの集計

デフォルトでは、ピボット・テーブルはSUM演算を使用してデータ・コレクション内で重複するデータ行のデータ値を集計し、ピボット・テーブルの単一のセル値を生成します。つまり、aggregateDuplicates属性はtrueに設定され、defaultAggregateTypeはSUMであると判断されます。

例26-12に示す<data>要素は、このようなデフォルトの集計の例です。

26.6.3.2 重複行のカスタム集計

ピボット・テーブルで別の数学演算を使用して重複行のデータ値を集計する場合は、defaultAggregateTypeを目的の演算に設定します。

例26-14に、defaultAggregateTypeがSUMに設定されているデータ要素を示します。この演算は、商品、販路および州の一意の組合せごとに全店舗の売上合計を表示する場合に適しています。

例26-14 重複行のカスタム集計のバインディング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に設定します。

例26-15に、PivotTableDataMap要素でラップされた<columns>要素を示します。<data>要素には、集計のデフォルトの属性が指定されています。これらは、特殊なカスタムaggregateType属性が指定されていないデータ・アイテムすべてに適用されます。

例26-15 複数のカスタム集計のデータ要素とアイテム要素

<columns>
   <data aggregateDuplicates="true" defaultAggregateType="SUM">
     <item value="Sales" label="Total Sales"/>
     <item value="StoreSqFeet" label="Avg Sq Feet" aggregateType="AVERAGE"/>
   </data>
   <item value="State"/>
</columns>

26.6.4 ピボット・テーブルへの初期ソートの指定に関する必知事項

デフォルトでは、ピボット・テーブルのデータは、最初は外部行データ・レイヤーの値に基づいてソートされます。任意の行アイテム、列アイテムまたはページ・アイテムのデータ・レイヤーにソート順序を指定することができます。このようなソートをカテゴリ・ソートと呼びます。実行時に、データ・レイヤーを異なるエッジにピボットした場合、指定されたカテゴリのソート順序が使用されます。sorts要素内にcategorySort要素を挿入し、表26-4に示すように属性の値を設定します。

表26-4 categorySort要素の属性値

属性	説明
item	カテゴリ・ソートを設定する列アイテム、行アイテムまたはページ・アイテムを指定します。この属性の値は必須です。
direction	初期のソート方向を指定します。有効な値はASCENDINGおよびDESCENDINGです。この属性の値は必須です。

また、ピボット・テーブルをレンダリングするときに、データ本文でのデータ値の初期ソート順序を指定することもできます。これはデータ・ソートと呼ばれます。デフォルトの動作は、ページ定義ファイルでピボット・テーブル・バインディングのpivotTableDataMap要素内にsorts要素を挿入すると変更できます。sorts要素内にqdrSliceSort要素を挿入し、表26-5に示すように属性の値を設定します。

表26-5 qdrSliceSort要素の属性値

属性	説明
direction	初期のソート方向を指定します。有効な値はASCENDINGおよびDESCENDINGです。この属性の値は必須です。
edge	columnsまたはrowsを指定し、データをソートするエッジを決定します。この属性の値は必須です。
grouped	親のスライスをソートする場合はtrue、エッジ全体にわたってソートする場合はfalseを指定します。この属性の値は任意です。デフォルト値はfalseです。
nullsFirst	NULL値をソートの先頭に表示する場合はtrue、NULL値をソートの最後に表示する場合はfalseを指定します。この属性の値は任意です。

1つ以上のitemタグをqdrSliceSortタグに挿入します。itemタグは、ソート対象の値が取得されるのとは逆のエッジ上にスライスを指定します。表26-6に示すように属性の値を設定します。

表26-6 itemタグの属性値

属性	説明
name	ソート対象のレイヤーの名前を指定します。通常、これは行セットの列名です。行セットのデータ列(Sales、Costsなど)を含むレイヤーを指定する場合はDataLayerを指定します。
value	指定したレイヤーの値を目的のスライスに指定します。

26.7 データバインドされた地理マップの作成

ADF地理マップは、Oracle Spatialの機能をOracle ADF内で提供するADFデータ視覚化コンポーネントです。このコンポーネントでは、ユーザーはビジネス・データを地理マップ上に表し、1つのマップ上に複数層の情報(テーマと呼ばれる)を重ね合せることができます。これらのレイヤーは、棒グラフ、円グラフ、カラー、点および事前定義済テーマといった任意のテーマとして表すことができます。

図26-56は、アメリカ合衆国内のある地域のベース・マップとともに次のテーマを使用した地理マップ・コンポーネントを示しています。

• カラー・テーマ: このテーマでは、選択した商品について、商品の人気に基づいて州を色付けします。色の範囲は緑(その商品の人気が最高であることを表す)から赤(その商品の人気が最低であることを表す)までです。

• 円グラフ・テーマ: このテーマでは、各州で人気のある商品カテゴリを示す円グラフをその州に表示します。この例の円グラフでは、Media、OfficeおよびElectronicsという3つの商品カテゴリを円のスライスとして示しています。

• 点テーマ: このテーマでは、倉庫を点として識別します。各点に対し、選択した商品のその倉庫での在庫レベルを示すアイコンが表示されます。表示されるアイコンは、在庫レベルが低、中、高といった各在庫範囲で異なります。

図26-56 商品のカラー・テーマ、円グラフ・テーマおよび点テーマを使用した地理マップ

地理マップ・コンポーネントは、複数のデータ・セットを表示するために、複数のマップを1ページ上に配置する必要がないという点が、他のADFデータ視覚化コンポーネントとは異なります。このコンポーネントは、複数のグラフを1ページ上に配置できるグラフなどのコンポーネントとは対照的です。かわりに、複数のデータセットの空間的な相互関係を示すか、特定の点に対して別々のテーマでレイヤー化された異なる属性を表示します。

地理マップ・コンポーネント自体はデータにバインドされません。しかし、各マップのテーマは独自のデータバインディングを持っています。

ベース・マップは、開発者が作成したテーマをADF地図コンポーネントでレイヤー化する背景となります。

Oracle Spatialでは、管理者は1つ以上のテーマで構成されるベース・マップを作成します。管理者は、ベース・マップのテーマの可視性を制御します。ベース・マップを拡大および縮小すると、ベース・マップの様々なテーマが表示/非表示になります。ADF地図コンポーネントのレベルでは、管理者がベース・マップに作成したテーマの表示を、開発者がズーム係数を使用して制御することはできません。

複数のテーマをADF地図にオーバーレイする際は、そのテーマに関連するタグのmaxZoomおよびminZoom属性を設定することでテーマの可視性を制御できます。実行時には、「マップ」ツールバーの表示メニューまたはページに作成した他のADFコンポーネントを使用してカスタム・テーマを表示/非表示にすることもできます。

データ・バインディングの完了後に地理マップをカスタマイズする方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「地理マップ・コンポーネントの使用」を参照してください。

26.7.1 点テーマを使用して地図を作成する方法

地図を作成するには、まず地図を構成し(つまり、ベース・マップを選択し、処理用のURLを提供)、次に地図のテーマをデータ・コレクションにバインドします。JDeveloperでは、作成するテーマに対して「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を行うことができます。

マップ点テーマを作成する際、マップに表示される点のスタイルをカスタマイズするオプションがあります。様々な点スタイルごとに、mapPointStyleItemタグを使用できます。

データバインドされた点テーマを使用して地図を作成する手順:

1. 「データ・コントロール」パネルから、コレクションを選択します。

   図26-57に、「データ・コントロール」パネルでWarehouseStockLevelsByProduct1コレクションを選択し、各倉庫点の在庫量を表すイメージを表示する点テーマを使用した地理マップを作成する例を示します。

   図26-57 倉庫の在庫レベルのデータ・コレクション

   
   

2. コレクションをJSFページにドラッグし、ポップアップ・メニューから「地理マップ」→「マップおよび点のテーマ」を選択します。

3. マップをページにまだ構成していない場合は、次に表示される「地理マップの作成」ダイアログで「新規」アイコンをクリックし、「地理マップ・コンフィギュレーションの作成」ダイアログを表示して次のようにします。

   1. 「ID」フィールドに、マップ・コンフィギュレーションの一意のIDを入力します。

   2. 「MapViewer URL」フィールドに、Oracle Application Server MapViewerサービスのURLを入力します。

   3. 「ジオコーダURL」フィールドで、マップ作成用に住所を緯度と経度の座標に変換するGeocoder WebサービスのURLを選択します。

      
      

      注意: ジオコーダのURLは、住所の経度および緯度情報をまだ持っていない場合のみ必要です。

      
      

   4. 「OK」をクリックしてダイアログを閉じ、「地理マップの作成」ダイアログに戻ります。

4. 「マップ」ページで、地図コンポーネントのベース・マップを選択し、地図で使用する他の設定を次の手順で選択します。

   1. データ・ソース・リストで、ベース・マップの選択元となるマップのコレクションを選択します。

   2. 「基準となるマップ」リストから、地理マップ・コンポーネントの背景となるマップを選択します。

   3. 「開始X」フィールドと「開始Y」フィールドの値を指定するには、マップのイメージをクリックしてマップを「プレビュー」ウィンドウ内の中央に配置します。

      左上角のマップ・ナビゲータの矢印を使用すると、マップを適切な方向に移動できます。

   4. オプションで、「プレビュー」ウィンドウのスライド矢印を使用して、地図のズーム係数を調整します。

   5. 「OK」をクリックしてダイアログを閉じ、「点マップ・テーマの作成」ダイアログを表示します。

5. 「テーマID」フィールドに、点マップ・テーマの一意のIDを入力します。

6. 「位置」セクションで、点の位置をx座標とy座標(経度と緯度)のペアで指定するか、住所で指定するかを選択します。

   選択する位置によって、位置セクションに表示されるコントロールが決まります。

   
   

   ヒント: 地図上にデータを表現するには、「住所」コントロールを使用するよりも、xおよびy座標を使用するほうが効率的です。これは、「住所」コントロールはジオコーダでxおよびy座標に変換する必要があるからです。データ・コレクションの行が100行を超える場合は、適切なパフォーマンスを確保するために、xおよびy座標を使用してください。

   
   

7. xとyの点の位置に対し、次のアイテムに対応するデータを選択します。

   • X(経度):マップ上の点の水平位置。

   • Y(緯度):マップ上の点の垂直位置。

   • ラベル:「情報」ウィンドウの上部に表示される点のラベル。点をクリックすると表示されます。

8. 「点データ」セクションで、点、そのラベルおよび点のスタイル(オプション)に関連するデータを指定する次の情報を入力します。

   • 「データ」フィールドで、点に関連付けられているデータ行(QuantityOnHandなど)を選択します。

   • 「ラベル」フィールドに、点をクリックすると、「情報」ウィンドウでデータ値の前に表示されるテキストを入力します。

   • オプションで、「カテゴリ」フィールドで、点の適切なスタイルの検索に使用するデータ列を選択します。「カテゴリ」で値を選択すると、その値はこの点テーマのバインディングに格納された後、この点テーマ用に作成するmapPointStyleItemタグのitemValue属性と照合されます。

     
     

     注意: 点のスタイルの検索にカテゴリとして使用する列がデータにない場合、mapPointStyleItemタグを使用して、「データ」フィールドで選択した列の値と一致するデータの範囲(高、中、低など)に関連するスタイルを定義することもできます。詳細は、26.7.2項「点テーマの点スタイル・アイテムの作成方法」を参照してください。

     
     

9. 「行選択の有効化」フィールドは、関連するコンポーネントで行を選択可能にする場合にのみ選択します。このオプションは、作成中の地理マップに関連するデータ・コレクションにリンクされているコンポーネントがページに含まれる場合に使用します。

10. 「OK」をクリックします。

図26-58に、各倉庫点の在庫量を表すイメージを表示する点テーマを使用した地理マップの「点マップ・テーマの作成」ダイアログを示します。

図26-58 倉庫の在庫レベルの「点マップ・テーマの作成」ダイアログ

26.7.2 点テーマの点スタイル・アイテムの作成方法

特定のマップ点テーマで使用する点スタイル・アイテムを作成するために使用できる様々なオプションがあります。これらのオプションは次のとおりです。

• すべてのデータ・ポイントに対する単一イメージ

• データ・ポイント・カテゴリごとに異なるイメージ

• データ値の低、中および高範囲を表すイメージ

マップ点テーマのデータ・バインディングを作成すると、そのマップ・テーマのすべての点に対して使用される単一の組込みイメージを選択できるようになります。プロパティ・インスペクタで、mapPointThemeタグのbuiltInImage属性でこの選択を実行できます。この属性のデフォルト値はOrangeBallです。

あるいは、「点マップ・テーマの作成」ダイアログの「カテゴリ」に値を指定した場合は、一連の点スタイル・アイテムを作成して各カテゴリのデータ・ポイントを表す別のイメージを決定する必要もあります。その場合、点スタイル・アイテムのタグで最小/最大値を使用しないでください。かわりに、点スタイル・アイテムのタグのitemValue属性に、「カテゴリ」に指定したデータ列のエントリと一致する値を設定します。

地理マップの点テーマでは、「カテゴリ」に値を指定しない場合でも、mapPointThemeタグのmapPointStyleItem子タグを使用して値の範囲(低、中、高など)とその範囲を表すイメージを指定できます。この指定をすると、各点は、その点のデータ値が含まれる範囲を識別するイメージによって表されます。

次の手順では、点テーマを使用して地図がすでに作成されていることを前提としています。

データ値の低、中および高範囲を表す点スタイル・アイテムをマップ点テーマに追加する手順:

1. 「構造」ウィンドウで、dvt:mapPointThemeタグを右クリックし、「dvt:mapPointThemeの中に挿入」→「点スタイルのアイテム」を選択します。

2. 「点スタイルのアイテム」のプロパティ・インスペクタで、表26-7に示すように値を設定します。

   表26-7 点スタイル・アイテムのプロパティ

   プロパティ	設定値
   Id	点スタイル・アイテムの一意のIDを指定します。
   MinValue	定義するデータ範囲の最小値を指定します。
   MaxValue	定義するデータ範囲の最大値を指定します。
   ShortLabel	ユーザーが点アイテムの上にカーソルを置いたときに表示されるテキストを指定します。たとえば、低い在庫レベルの点アイテムを定義する場合は、このプロパティの値としてLow Inventoryと入力します。
   ImageURL	イメージ・ファイルへのURLを指定するか、ドロップダウン・リストから選択します。実行時に、指定したイメージはマップ上に表示され、MinValueおよびMaxValueプロパティによって指定されたデータ範囲を表します。 あるいは、「その他」セクションに表示されるBuiltInImageドロップダウン・リストによって参照される様々な事前定義済イメージの1つを選択できます。
   HoverImageURL	イメージ・ファイルへのURLを指定するか、ドロップダウン・リストから選択します。実行時に、指定したイメージは、ユーザーが点アイテムの上にカーソルを置くと表示されます。
   SelectedImageURL	イメージ・ファイルへのURLを指定するか、ドロップダウン・リストから選択します。実行時に、指定したイメージは、ユーザーが点アイテムを選択すると表示されます。

   
   

3. 手順1および2でデータ値の低範囲についてデータ値の範囲を定義した場合は、手順1および2を繰り返して、データ値の中および高範囲を適切な値で定義します。

注意: mapPointStyleItem子タグを使用して点のスタイルをカスタマイズする方法は、カスタム点イメージを指定できる宣言的な方法です。コールバックを使用してカスタム・イメージだけでなくカスタムHTMLを指定する方法の詳細は、26.7.4項「マップ点テーマへのカスタム点スタイル・アイテムの追加に関する必知事項」を参照してください。

26.7.3 点テーマを使用した地図の作成時の処理

地図と点テーマ(この場合は、地図に追加された初期テーマ)を「データ・コントロール」パネルからドロップすると、次の処理が行われます。

• 点テーマのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。

• 地理マップ・コンポーネントに必要なタグをJSFページに追加します。

• マップXML内で必要な点テーマのタグをJSFページに追加します。

26.7.3.1 点テーマのバインディングXML

例26-16に、地理マップの点テーマに生成された行セット・バインディングを示します。

例26-16 点テーマのバインディングXML

<mapTheme IterBinding="WarehouseStockLevelsByProduct1Iterator"
     id="WarehouseStockLevelsByProduct1"
     xmlns="http://xmlns.oracle.com/adfm/dvt">
  <mapThemeDataMap mapThemeType="point">
    <item type="data" value="QuantityOnHand" label="Product Quantity"/>
    <item type="lat_long" latitude="Latitude"
      longitude="Longitude" label="WarehouseName"/>
  </mapthemeDataMap>
</mapTheme>

26.7.3.2 地理マップおよび点テーマのJSFページのXMLコード

例26-17に、地理マップおよびその点テーマに対してJSFページで生成されるXMLコードを示します。このコードは、データ値に基づいて次の3種類の点スタイル設定が含まれています。

最初の点スタイル設定(ps0)は、500未満の値に適用されます。この点スタイルでは、非常に低い在庫レベルのイメージが表示され、対応するツールチップ情報が示されます。

2番目の点スタイル設定(ps1)は、500から1000の値に適用されます。この点スタイルでは、低い在庫レベルのイメージが表示され、対応するツールチップ情報が示されます。

最後の点スタイル設定(ps2)は、1000から1600の値に適用されます。この点スタイルでは、高い在庫レベルのイメージが表示され、対応するツールチップ情報が示されます。

例26-17 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"
         partialTriggers="go pointTheme pieTheme colorTheme" mapZoom="3">
    <dvt:mapPointTheme id="mapPointTheme1"
                       shortLabel="Warehouse Stock Levels"
                       selectionListener="#{MapBean.processSelection}"
                       value="#{bindings.WarehouseStockLevelsByProduct1.geoMapModel}"
                       rendered="#{AppState.showPointTheme}">
      <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>

26.7.4 マップ点テーマへのカスタム点スタイル・アイテムの追加に関する必知事項

マップ点のカスタムHTMLおよびカスタム・イメージを指定する場合、dvt:mapPointThemeタグのcustomPointCallback属性を使用してこのカスタマイズを実現できます。

重要: マップ点テーマのcustomPointCallback属性を設定すると、マップはdvt:mapPointStyleItem子タグをすべて無視します。コールバックによってこれらのタグはオーバーライドされるためです。

コールバックを使用してマップ点のスタイルをカスタマイズする手順:

1. 目的の点のカスタマイズを実行するメソッドをJavaで記述します。

2. このメソッドをマップのマネージドBeanに格納します。

   マネージドBeanの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「マネージドBeanの作成と使用」の項を参照してください。

3. マップ点テーマのデータ・バインディングの完了後に、プロパティ・インスペクタを使用してマネージドBeanのメソッドへの参照をdvt:mapPointThemeタグのcustomPointCallback属性に指定します。

   たとえば、マネージドBeanの名前がMapSampleBean、メソッドの名前がsetCustomPointStyleの場合、その参照は#{mapSampleBean.CustomPointStyle}となります。

26.7.5 データバインドされたカラー・テーマを地図に追加する方法

地図の作成時は、任意の順序でのテーマ(点、カラーおよびグラフ)の作成を選択できます。

次の手順では、地理マップがすでに構成されていることを前提にしています。したがって、マップ・コンポーネントから、地図を構成するためのダイアログは表示されません。そのかわり、カラー・テーマを作成するためのダイアログのみ表示されます。

データバインドされたカラー・テーマを地図に追加する手順:

1. 「データ・コントロール」パネルから、コレクションを選択します。

   図26-59に、「データ・コントロール」パネルでProductPopularity1コレクションを選択し、地域(州など)における商品の人気を色別に示すカラー・マップ・テーマを作成する例を示します。

   図26-59 商品の人気を州別に示すデータ・コレクション

   
   

2. 地理マップ・コンポーネントをすでに含んでいるJSFページにコレクションをドラッグし、ポップアップ・メニューから「地理マップ」→「カラー・テーマ」を選択します。

3. 次に表示される「カラー・マップ・テーマの作成」ダイアログで、マップ・テーマの一意のIDを「ID」フィールドに入力します。

4. ベース・マップ・テーマ・セクションで、地理マップで使用するベース・マップのカラー・テーマを次のように指定します。

   1. 「名前」フィールドで、ベース・マップ・テーマの名前を選択します。

   2. 「位置」では、選択したベース・マップ・テーマ内の位置の列に対応するデータ・コレクション内の位置の列を選択します。

   3. オプションで、「サンプル・テーマ・データの表示」をクリックし、「サンプル・テーマ・データ」ダイアログを表示します。このダイアログでは、実際のデータの先頭のいくつかの行を確認できるため、適切な位置列を指定できます。

      たとえば、アメリカ合衆国のマップの州で構成される地域のデータを確認するには、図26-60で示すように、MAP_STATES_NAMEを選択できます。

      
      

      注意: Oracle Spatialの管理者はサンプル・データの表示を無効にできます。このボタンが使用できない場合は、管理者に連絡して指示を求めてください。

      
      

      図26-60 地域または州のサンプル・テーマ・データ

      
      

5. 「外観」セクションで、カラー・テーマの外観を次のように指定します。

   1. 「データ・バケット数」に、この地理マップのデータのグループ数を入力します。各グループは、色別にコード化されます。この数の指定後は、最小値と最大値に色を指定できます。他の値の色は、RGBアルゴリズムを使用して自動的に選択されます。

   2. 「最小値の色」で、最小値の色を選択します。

   3. 「最大値の色」で、最大値の色を選択します。

   
   

   注意: データ・バケットごとに正確な色を指定する場合は、26.7.7項「マップ・カラー・テーマでの色のカスタマイズに関する必知事項」を参照してください。

   
   

6. 「データ」セクションで、コレクション内のデータに関する次の情報を指定します。

   1. 「位置」では、ベース・マップ・テーマから選択した位置列の値に対応するデータ・コレクション内の列を選択します。

   2. 「ロケーション・ラベル」では、位置列の値に関連付けられているラベルを含むデータ・コレクション内の列を選択します。これらのラベルは、色をクリックしたときまたは色の上にカーソルを置いたときに表示される「情報」ウィンドウに表示されます。

   3. 「データ・ラベル」には、色をクリックしたときまたは色の上にカーソルを置いたときに表示される「情報」ウィンドウおよびツールチップでのデータの説明に使用されるラベルを入力します。たとえば、「情報」ウィンドウでは、データ値の前にProduct Popularityなどのラベルを表示できます。

7. 「行選択の有効化」は、マスター/ディテール関係を有効にする場合にのみ使用します。これは、マップ・テーマのデータ・コレクションが、ページ上の別のUIコンポーネントに表示されるディテール・ビューとのマスター/ディテール関係においてマスターである場合に便利です。

図26-61に、商品の人気を州別のカラー・テーマで示す「カラー・マップ・テーマの作成」ダイアログを示します。

図26-61 商品の人気を州別に示す「カラー・マップ・テーマの作成」ダイアログ

26.7.6 地図へのカラー・テーマの追加時の処理

カラー・テーマを「データ・コントロール」パネルから既存の地図にドロップすると、次の処理が行われます。

• カラー・テーマのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。

• マップXML内で必要なカラー・テーマのタグをJSFページに追加します。

26.7.6.1 カラー・テーマのバインディングXML

例26-18に、地理マップのカラー・テーマに生成された行セット・バインディングを示しています。

例26-18 カラー・テーマのバインディングXML

<mapTheme IterBinding="ProductPopularity1Iterator" id="ProductPopularity1"
          xmlns="http://xmlns.oracle.com/adfm/dvt">
   <mapThemeDataMap mapThemeType="color">
      <item type="location" value="StateProvince" label="StateProvince"/>
      <item type="data" value="CountAddressesStateProvince"
            label="Popularity"/>
   </mapThemeDataMap>
</mapTheme>

26.7.6.2 カラー・テーマのJSFページのXMLコード

例26-19に、アメリカ合衆国のマップ上の各州における商品の人気を表すカラー・テーマに対してJSFページで生成されるXMLコードを示します。

例26-19 JSFページのカラー・テーマのXMLコード

<dvt:mapColorTheme id="mapColorTheme1"
     themeName="MAP_STATES_NAME"
     shortLabel="Product Popularity"
     value="#{bindings.ProductPopularity1.geoMapModel}"
     locationColumn="POLYGON_NAME"
     minColor="#ff0000"
     maxColor="#008200"
     bucketCount="5"/>

26.7.7 マップ・カラー・テーマでの色のカスタマイズに関する必知事項

マップ・カラー・テーマのデータ・バインディング時には、データ・バケットに対する最小値の色および最大値の色のみを指定できます。最小値から最大値までのバケットの色は、マップがアルゴリズムを使用して決定します。しかし、データ・バインディングを完了すると、各データ・バケットに使用する正確な色を指定できるようになります。

オブジェクト・インスペクタで、dvt:mapColorThemeタグのcolorList属性を使用して各バケットの色を指定できます。色の配列をこの属性にバインドするか、セミコロンのセパレータを使用して色の文字列を指定できます。

たとえば、この属性の値を#ff0000;#00ff00;#0000ffに設定した場合、最初のバケットは赤、2番目のバケットは緑、3番目のバケットは青となります。

26.7.8 データバインドされた円グラフ・テーマを地図に追加する方法

地図の作成時は、任意の順序でのテーマ(点、カラーおよびグラフ)の作成を選択できます。ただし、ADF地図コンポーネント上で一度に表示できるグラフ・テーマ(円または棒)は1つのみです。

次の手順では、地理マップがすでに構成されていることを前提にしています。したがって、マップ・コンポーネントから、地図を構成するためのダイアログは表示されません。そのかわり、円グラフを作成するためのダイアログのみ表示されます。

データバインドされた円グラフ・テーマを地図に追加する手順:

1. 「データ・コントロール」パネルから、コレクションを選択します。

   図26-62に、PopularCategories1を選択し、ある州で人気のある製品カテゴリを表すために、既存の地図マップ・コンポーネントに円棒テーマを作成する例を示します。

   図26-62 人気のある商品カテゴリを州別に示すデータ・コレクション

   
   

2. コレクションをJSFページにドラッグし、ポップアップ・メニューから「作成」→「円グラフ・テーマ」を選択します。

3. 次に表示される円グラフ・テーマ・バインディングの作成ダイアログで、操作する新しいテーマとベース・マップのテーマの要素を次の手順で識別します。

   1. 「テーマID」で、作成する円グラフ・テーマの一意のIDを入力します。

   2. ベース・マップ・テーマ・セクションで、ベース・マップの名前と、円グラフを配置する地域を選択します。

4. 「外観」セクションで、「データ」の下で次のようにします。

   1. 「位置」では、選択したベース・マップ・テーマ内の位置の列に対応するデータ・コレクション内の位置の列を選択します。

      必要に応じて、適切な位置の列を識別できるように、「サンプル・テーマ・データの表示」をクリックして実際のデータの最初の数行を確認します。

   2. 「ロケーション・ラベル」では、データ・コレクション内の位置のラベルを含むデータ・コレクション内の列を選択します。

   3. 「シリーズ属性」のグリッドで、作成中の円グラフで表す値を含む各属性を入力します。

   4. 各シリーズ属性の横に、シリーズ属性のデータ値のラベルとして使用するテキストを入力します。

5. 「行選択の有効化」は、関連するコンポーネントで行を選択可能にする場合にのみ選択します。このコンポーネントは、作成中の地図に関連するデータ・コレクションにリンクされているコンポーネントがページに含まれる場合に使用します。

6. 「OK」をクリックします。

図26-63に、商品の人気を州別の円グラフ・テーマで示す「円グラフ・マップ・テーマの作成」ダイアログの入力が完了した状態を示します。

図26-63 商品の人気を州別に示す「円グラフ・マップ・テーマの作成」ダイアログ

26.7.9 地図への円グラフ・テーマの追加時の処理

円グラフ・テーマを「データ・コントロール」パネルから既存の地図にドロップすると、次の処理が行われます。

• 円グラフ・テーマのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。

• マップXML内で必要な円グラフ・テーマのコードをJSFページに追加します。

26.7.9.1 円グラフ・テーマのバインディングXML

例26-20に、地理マップの円グラフ・テーマに生成された行セット・バインディングを示します。

例26-20 円グラフ・テーマのバインディングXML

<mapTheme IterBinding="PopularCategoriesByState1Iterator"       
        id="PopularCategoriesByState1"
        xmlns="http://xmlns.oracle.com/adfm/dvt">
   <mapThemeDataMap mapThemeType="pieChart">
       <item type="location" value="StateProvince" label="StateProvince"/>
       <item type="data" value="AudioVideo" label="Audio Video"/>
       <item type="data" value="CellPhones" label="Cell Phones"/>
       <item type="data" value="Games" label="Games"/>
   </mapThemeDataMap>
</mapTheme>

26.7.9.2 円グラフ・テーマのJSFページのコード

例26-21に、地理マップの円グラフ・テーマに対してJSFページで生成されるXMLコードを示します。

例26-21 JSFページの円グラフ・テーマのコード

<dvt:mapPieGraphTheme id="mapPieGraphTheme1"
     themeName="MAP_STATES_NAME"
     shortLabel="Popular Categories"
     pieRadius="10"
     styleName="comet"
     value="#{bindings.PopularCategoriesByState1.geoMapModel}"
     locationColumn="POLYGON_ID"/>

26.8 データバインドされたテーマ・マップの作成

テーマ・マップでは、ビジネス・データをスタイル設定されたエリア内にパターンまたは関連付けられたマーカーとして表し、リモートのOracle MapViewerサービスへの接続は必要ありません。テーマ・マップでは、地理マップでの地理的な詳細なしで、データに焦点を合せます。

テーマ・マップは、米国、世界をはじめ、世界の大陸や地域(EMEAやAPACなど)などのあらかじめ作成されたベース・マップとともにパッケージ化されています。それぞれのベース・マップには、いくつかのリージョンのセットと、都市の固定セットが1つ含まれます。リージョンまたは都市の1つのセットはレイヤーと呼ばれます。各レイヤーは、データ・コレクションにバインドし、データを色やパターンの塗りつぶし、またはデータ・マーカー、あるいはその両方で表すためにスタイルを設定できます。実行時には、テーマ・マップでドリルが有効になっていないかぎり、一度に表示できるのは1つのマップ・レイヤーとその関連するデータのみです。

テーマ・マップに表示されるデータは、データ・コレクションに基づいています。ADFデータ・コントロールを使用すると、JDeveloperではデータ・バインディングが宣言的なタスクとなります。「データ・コントロール」パネルからJSFページにコレクションをドラッグ・アンド・ドロップし、「コンポーネント・ギャラリ」を使用してデータを表示するベース・マップとマップ・レイヤーを選択します。レイヤー・ブラウザおよびバインディング・ダイアログを使用して、テーマ・マップでデータ・コレクション属性をデータ・レイヤーにバインドできます。

マップ・レイヤーをデータ・コレクションのデータ行に関連付けるには、スタンプを使用します。スタンプを使用すれば、データ・モデル内の各データ行をスタイル(色またはパターンなど)、マーカー(円形または四角形など)、またはイメージにより識別できます。スタンプを使用すると、テーマ・マップではエリア、マーカーまたはイメージごとに子コンポーネントが作成されません。むしろ、コンポーネントのコンテンツは、データ・コレクションの行など、データ属性ごとに1回、繰り返しレンダリングされるか、スタンプされます。

図26-64に、USAベース・マップを使用したテーマ・マップを示します。マップでは、州マップ・レイヤーを使用して、顧客の場所と倉庫の場所を表示し、倉庫のある州については製品インベントリ・レベルを表示しています。この例は、「データ・コントロール」パネルおよびテーマ・マップのバインディング・ダイアログを使用したときの、テーマ・マップのデフォルト機能を示しています。このデフォルト機能には、データにバインドされた凡例と、スタイル設定された点およびエリアに関連付けられるラベルなどがあります。

図26-64 顧客の場所と倉庫の場所を表示するテーマ・マップ

テーマ・マップのエンド・ユーザーとプレゼンテーション機能、ユースケース、タグ構造およびテーマ・マップへの特殊機能の追加に関する詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のテーマ・マップ・コンポーネントの使用方法に関する項を参照してください。

26.8.1 ADFデータ・コントロールを使用してテーマ・マップを作成する方法

thematicMapコンポーネントは、モデルを使用して、基になるリストのデータにアクセスします。固有のモデル・クラスはoracle.adf.view.rich.model.CollectionModelです。java.util.List、java.util.Arrayおよびjavax.faces.model.DataModelなど、その他のモデル・インスタンスも使用できます。データ・レイヤーではインスタンスがCollectionModelに自動的に変換されます。

始める前に:

データバインドされたテーマ・マップについて理解しておいてください。詳細は、26.8項「データバインドされたテーマ・マップの作成」を参照してください。

「データ・コントロール」パネルを使用してテーマ・マップを作成する手順は次のとおりです。

1. 「データ・コントロール」パネルから、データ・コレクションを選択します。

   図26-65に、倉庫の場所と製品インベントリ・レベルのデータ・コレクションを示します。

   図26-65 倉庫の場所と在庫のデータ・コレクション

   
   

2. コレクションをJSFページにドラッグし、ポップアップ・メニューから「テーマ・マップ」を選択します。

3. 「コンポーネント・ギャラリ」で、データ表示のために構成するベース・マップに関連付けられたマップ・レイヤーを選択します。この例では、米国のベース・マップで州のマップ・レイヤーが選択されています。図26-66に、米国の州のマップ・レイヤーが選択されているコンポーネント・ギャラリを示します。

   図26-66 テーマ・マップのコンポーネント・ギャラリ

   
   

   デフォルトでは、選択したマップ・レイヤーに面データ・レイヤーや点データ・レイヤーを追加するための「データ・レイヤーの作成」ダイアログが開きます。図26-64に示したテーマ・マップでは、倉庫の製品レベルごとに米国の州をスタイル化するように、面データ・レイヤーが構成されています。

4. 「データ・レイヤーの作成」ダイアログで、次のように入力します。

   • 「レイヤーID」: 定義するデータ・レイヤーの一意の名前を入力します。デフォルトでは、一意の連番のID、つまりdl1、dl2などになります。

   • 「面」: このオプションを選択して、面データ・レイヤーをマップ・レイヤーに追加します。

   • 「エリア・レイヤー」: データ・レイヤーを追加するマップ・レイヤーを参照します。この例では、「USA(州)」マップ・レイヤーを参照します。

   • 「位置」: データ・レイヤー内のエリアに対応するデータの位置を決定する、データ・モデル内の列を表す属性を選択します。位置は、データが表示されるベース・マップのリージョンのIDです。詳細は、26.8.5項「基準となるマップの位置IDについて」を参照してください。

   • 「マスター/ディテールの現在行の設定」: マスター/ディテール関係を有効化する場合に選択します。これは、テーマ・マップのデータ・コレクションが、ページ上の別のUIコンポーネントに表示されるディテール・ビューとのマスター/ディテール関係においてマスターである場合に便利です。詳細は、26.8.6項「マスター/ディテール関係の構成について」を参照してください。

   図26-67に、設定済の「データ・レイヤーの作成」ダイアログを示します。

   図26-67 面データ・レイヤーの作成ダイアログ

   
   

   areaDataLayerコンポーネントを表す面データ・レイヤーおよびareaコンポーネントを表すエリアが、レイヤー・ブラウザ階層に追加されます。図26-68に、面データ・レイヤーおよびエリアをマップ・レイヤーに追加した後で展開したレイヤー・ブラウザを示します。

   図26-68 テーマ・マップ・レイヤー・ブラウザ

   
   

5. レイヤー・ブラウザで、面データ・レイヤーを開き、スタイル設定するエリアを選択し、「編集」アイコンをクリックします。

   
   

   注意: テーマ・マップ・レイヤー内のすべてのエリアについてデフォルトのスタンプを使用してエリアを構成することも、子attributeGroupsタグを使用して、データ・セット内のカテゴリ・グループに基づいてスタイル属性タイプを自動的に生成することもできます。areaタグとattributeGroupsタグの両方で、同じスタイル属性が設定されている場合は、attributeGroupsスタイル・タイプが優先されます。詳細は、26.8.4項「データを表示するためのエリア、マーカーおよびイメージのスタイル設定」を参照してください。

   
   

6. 「エリアの構成」ダイアログの「属性グループ」ページで、次のように入力します。

   • 「グループ化ルール」: この表を使用して、データ・コレクション内のデータのカテゴリ・グループのスタイルを指定します。「追加」アイコンを使用して、カテゴリ・グループのルールを構成する表に行を追加し、「削除」アイコンを使用して選択した行を表から削除します。各グループ化ルールはattributeGroupsコンポーネントとして表され、一意の連番ID(ag1、ag2など)が割り当てられます。

     表に追加された行ごとに、次のように入力します。

     • 「値でグループ化」: データ値のグループ化に使用するデータ・セットの列を表す属性を入力するか、ドロップダウン・リストを使用して選択します。たとえば、ProductCountは州ごとの倉庫内製品インベントリ・レベルを表します。

       
       

       注意: 選択した属性は、カテゴリ化できる離散値で構成される必要があります。たとえば、40から45までの数値範囲は自動的にはグループ化されません。

       
       

     • 「エリア・プロパティ」: 該当のエリアのスタイル設定に使用するプロパティをドロップダウン・リストを使用して選択します。エリアは、色、パターン、不透明度またはこれら有効値の任意の組合せを使用してスタイル設定できます。ダイアログのドロップダウン・リストから「複数の属性の選択」を選択し、値の組合せを指定します。

       各プロパティに生成されるデフォルトのスタイル値は、ADFスキンのCSSスタイル・プロパティを使用して定義されます。各attributeGroupsタイプには、スキンで定義されたデフォルトのランプがあり、索引ベースのプロパティを目的の値に設定することによりカスタマイズできます。詳細は、26.8.4.4項「属性グループのデフォルトのスタイル値について」を参照してください。

     • 「凡例ラベル」: テキストを入力するか、テーマ・マップの凡例のカテゴリ・グループに使用するテキストを表す属性をドロップダウン・リストを使用して選択します。ドロップダウン・リストから「式ビルダー」を選択し、EL式を作成して凡例テキストを指定することもできます。詳細は、26.8.9項「データバインドされた凡例の作成」を参照してください。

   • 値固有のルール: クリックして、データ・セットのカテゴリ・グループに1つ以上のデータ値の詳細を指定する際に使用する「一致ルール」表および「例外ルール」表を開きます。たとえば、一致ルールを使用して、製品インベントリ・レベルの低い倉庫があるすべての州には、事前定義済の色範囲ではなく、#DD1E2Fの色でスタイルを設定します。

     
     

     注意: これらの表で指定された一致ルールや例外ルールは、「グループ化ルール」表で定義された設定に優先します。

     
     

   • 「一致ルール」: このオプションを使用して、データ・コレクション内のデータ・グループの1つ以上のデータ値に一致するスタイル・ルールを指定します。「追加」アイコンを使用して、カテゴリ・グループの一致ルールを構成する表に行を追加し、「削除」アイコンを使用して選択した行を表から削除します。各一致ルールはattributeMatchRuleコンポーネントとして表され、一意の連番ID(amr1、amr2など)が割り当てられます。プロパティとプロパティ値は、子f:attributeタグで定義されます。たとえば、次のように入力します。

     <dvt:attributeMatchRule id="amrl" group="Mountain Dew">
       <f:attribute name="color" value="#ffff00"/>
     </dvt:attributeMatchRule>
     

     表に追加された行ごとに、次のように入力します。

     • 「グループ値」: この一致ルールの実行をトリガーする「値でグループ化」属性の値を入力します。この例では、倉庫内製品インベントリ・レベルのデータ・コレクションの属性には、low、medおよびhighの値が含まれます。

     • 「プロパティ」: 該当のデータ値のスタイル設定に使用するプロパティをドロップダウン・リストを使用して選択します。エリアは、色、パターンまたは不透明度の値を使用してスタイル設定できます。ここで選択したプロパティは、「グループ化ルール」属性の「エリア・プロパティ」に表示されるプロパティ・タイプのいずれかに一致する必要があります。

     • 「プロパティ値」: 入力するかドロップダウン・リストを使用して、値をプロパティに割り当てます。一致オーバーライドにより指定された値が、グループ化ルールによって返された事前作成のランプ内にもある場合、その値はオーバーライドでのみ使用され、事前作成のランプではスキップされます。

       colorの有効値は、RGB 16進数の色です。

       パターンの有効値として、12個の事前作成されたパターン(smallChecker、largeDiamond、smallDiagonalRight、largeCrosshatchなど)から選択することもできます。塗りつぶし色が指定されている場合は、パターンはその色、背景色はデフォルトの白で表示されます。

       不透明度の有効な値範囲は、0.0(透明)から1.0(不透明)です。

   • 「例外ルール」: データ・セット内のカテゴリ・グループのスタイル・ルールについて1つ以上の例外を指定します。「追加」アイコンを使用して、例外ルールを構成する表に行追加し、「削除」アイコンを使用して任意の行を表から削除します。各例外ルールはattributeExceptionRuleコンポーネントとして表され、一意の連番ID(aer1、aer2など)が割り当てられます。プロパティとプロパティ値は、子f:attributeタグで定義されます。

     表に追加された行ごとに、次のように入力します。

     • 「条件」: EL式を入力するか、ドロップダウン・リストを使用して「式ビルダー」ダイアログを開き、EL式を作成します。この式は、特定の条件を満たす場合にスタイル・プロパティ値を別の値に置き換えます。たとえば、次のように入力します。

       #{row.Sales gt 100000}
       

     • 「プロパティ」: 該当のデータ値のスタイル設定に使用するプロパティをドロップダウン・リストを使用して選択します。エリアは、色、パターンまたは不透明度の値を使用してスタイル設定できます。ここで選択したプロパティは、「グループ化ルール」属性の「エリア・プロパティ」に表示されるプロパティ・タイプのいずれかに一致する必要があります。

     • 「プロパティ値」: 入力するかドロップダウン・リストを使用して、値をプロパティに割り当てます。一致オーバーライドにより指定された値が、グループ化ルールによって返された事前作成のランプ内にもある場合、その値はオーバーライドでのみ使用され、事前作成のランプではスキップされます。

       colorの有効値は、RGB 16進数の色です。

       パターンの有効値として、12個の事前作成されたパターン(smallChecker、largeDiamond、smallDiagonalRight、largeCrosshatchなど)から選択することもできます。塗りつぶし色が指定されている場合は、パターンはその色、背景色はデフォルトの白で表示されます。

       不透明度の有効な値範囲は、0.0(透明)から1.0(不透明)です。

     • 「凡例ラベル」: 凡例ラベルに使用するテキスト・リソースを入力します。テキスト・リソースは、リソース・バンドルからの翻訳可能な文字列または実行時に実行されるEL式のいずれかにできます。ドロップダウン・リストを使用して、「テキスト・リソースの選択」または「式ビルダー」ダイアログを選択します。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。

       
       

       注意: テキスト・リソース・オプションは、固定エリアでのみ使用可能です。行数が変動するエリアでは、EL式を使用して行数変動キーを取得し、リソース・バンドルでテキスト・リソースを検索します。たとえば、次のようになります。 #{viewController.ResourceBundle[row.label]}

       
       

   • 「メッセージ」: エリアの構成に関連付けられたアラートを必要に応じて確認したり消去します。

   図26-69に、設定済の「エリアの構成」ダイアログを示します。メッセージ・ペインの警告は、ダイアログの「デフォルト・スタンプ」ページで指定されているデフォルトのエリアの色が、「グループ化ルール」で指定された色や、「属性グループ」ページで指定された値固有のオーバーライドで上書きされることをユーザーにアラートします。

   図26-69 「エリアの構成」ダイアログの「属性グループ」ページ

   
   

7. レイヤー・ブラウザを使用して、倉庫の場所を表すグローバル・ポイント・データ・レイヤーを追加します。このレイヤーの作成には、テーマ・マップを作成したときに使用したものと同じデータ・コレクションを使用します。手順の詳細は、26.8.3項「テーマ・マップにデータ・レイヤーを追加する方法」を参照してください。

8. レイヤー・ブラウザを使用して、顧客の住所を表すグローバル・ポイント・データ・レイヤーを追加します。このレイヤーの作成には、テーマ・マップを作成したときに使用したものとは別のデータ・コレクションを使用します。手順の詳細は、26.8.3項「テーマ・マップにデータ・レイヤーを追加する方法」を参照してください。図26-70に、顧客の場所のデータ・コレクションを示します。

   図26-70 顧客の住所のデータ・コレクション

   
   

9. レイヤー・ブラウザを使用して、グローバル・ポイント・データ・レイヤーで顧客の場所を表すためのマーカーを追加して、スタイルを設定します。手順の詳細は、26.8.4項「データを表示するためのエリア、マーカーおよびイメージのスタイル設定」を参照してください。

   図26-71では、図26-64に示したテーマ・マップのレイヤー・ブラウザを開いています。

   図26-71 テーマ・マップ・レイヤー・ブラウザ

   
   

10. データ・バインドされた凡例とラベル追加して、スタイル設定した点と面に関連付けるように構成します。手順の詳細は、26.8.9項「データバインドされた凡例の作成」を参照してください。

26.8.2 データ・コントロールを使用したテーマ・マップ作成時の処理

ADFデータ・コントロールを使用してテーマ・マップを作成すると、JDeveloperにより、次が実行されます。

• JSFページのページ定義ファイルでテーマ・マップのバインディングが定義されます。

• DVTテーマ・マップ・コンポーネント用のコードがJSFページに挿入されます。

例26-22に、図26-64に例示したテーマ・マップの場合の、JSFページのページ定義ファイルに定義されたバインディングを示します。

例26-22 テーマ・マップのXMLバインディング

<bindings>
    <tree IterBinding="WorldProductInventory1Iterator" id="WorldProductInventory1">
      <nodeDefinition DefName="model.WorldProductInventory" Name="WorldProductInventory10">
        <AttrNames>
          <Item Value="Address"/>
          <Item Value="AmountInStock"/>
          <Item Value="Category"/>
          <Item Value="CategoryId"/>
          <Item Value="City"/>
          <Item Value="Country"/>
          <Item Value="CountryCode"/>
          <Item Value="CountryId"/>
          <Item Value="Id"/>
          <Item Value="Id1"/>
          <Item Value="Id2"/>
          <Item Value="Id3"/>
          <Item Value="Id4"/>
          <Item Value="Latitude"/>
          <Item Value="Longitude"/>
          <Item Value="ProdName"/>
          <Item Value="ProductId"/>
          <Item Value="RegName"/>
          <Item Value="RegionId"/>
          <Item Value="ReorderPoint"/>
          <Item Value="State"/>
          <Item Value="WarehouseId"/>
          <Item Value="ZipCode"/>
        </AttrNames>
      </nodeDefinition>
    </tree>
    <tree IterBinding="SCustomerView1Iterator" id="SCustomerView1">
      <nodeDefinition DefName="model.SCustomerView" Name="SCustomerView10">
        <AttrNames>
          <Item Value="Address"/>
          <Item Value="City"/>
          <Item Value="CountryId"/>
          <Item Value="Id"/>
          <Item Value="Name"/>
          <Item Value="State"/>
          <Item Value="ZipCode"/>
        </AttrNames>
      </nodeDefinition>
    </tree>
    <tree IterBinding="SWarehouseView1Iterator" id="SWarehouseView1">
      <nodeDefinition DefName="model.SWarehouseView" Name="SWarehouseView10">
        <AttrNames>
          <Item Value="Address"/>
          <Item Value="City"/>
          <Item Value="CountryId"/>
          <Item Value="Id"/>
          <Item Value="Latitude"/>
          <Item Value="Longitude"/>
          <Item Value="ManagerId"/>
          <Item Value="Phone"/>
          <Item Value="ProductCount"/>
          <Item Value="State"/>
          <Item Value="ZipCode"/>
        </AttrNames>
      </nodeDefinition>
    </tree>
  </bindings>

例26-23に、図26-64に例示されたテーマ・マップの場合の、JSFページに挿入されるコードを示します。

例26-23 テーマ・マップについてのJSFページのコード

<dvt:thematicMap id="tm1" basemap="usa" animationOnDisplay="alphaFade"
                 summary="#{viewcontrollerBundle.THEMATIC_MAP_DISPLAYING_
                 WAREHOUSE_PRODUCT_INVENTORY_LEVELS}">
        <dvt:areaLayer layer="states" id="al1">
          <dvt:areaDataLayer id="dal1"
                             value="#{bindings.SWarehouseView1.collectionModel}"
                             var="row">
            <dvt:areaLocation name="#{row.State}" id="al2">
              <dvt:area id="a1" shortDesc="#{row.ProductCount} units">
                <dvt:attributeGroups id="ag1" type="color"
                                     value="#{row.ProductCount le 5 ? 'low' :
                                     (row.ProductCount le 8 ? 'med' : 'high')}"
                                     label="#{row.ProductCount le 5 ? 'Low Product
                                     Counts' : (row.ProductCount le 8 ? 'Good
                                     Product Counts' : 'Surplus Product
                                     Counts')}">
                  <dvt:attributeMatchRule id="amr1" group="low">
                    <f:attribute name="color" value="#DD1E2F"/>
                  </dvt:attributeMatchRule>
                  <dvt:attributeMatchRule id="amr2" group="med">
                    <f:attribute name="color" value="#EBB035"/>
                  </dvt:attributeMatchRule>
                  <dvt:attributeMatchRule id="amr3" group="high">
                    <f:attribute name="color" value="#218559"/>
                  </dvt:attributeMatchRule>
                </dvt:attributeGroups>
              </dvt:area>
            </dvt:areaLocation>
          </dvt:areaDataLayer>
        </dvt:areaLayer>
        <dvt:pointDataLayer id="dpl1"
                            value="#{bindings.SCustomerView1.collectionModel}"
                            var="row">
          <dvt:pointLocation type="pointName" pointName="#{row.State}_
                             #{fn:toUpperCase(fn:replace(row.City, ' ', '_'))}"
                             id="pl1">
            <dvt:marker id="m2" fillColor="#00000" opacity="1.0" shape="human"
                        scaleX="4.0" scaleY="4.0"
                        shortDesc="#{row.Name}">
              <f:attribute name="legendLabel" value="Customer Location"/>
            </dvt:marker>
          </dvt:pointLocation>
        </dvt:pointDataLayer>
        <dvt:pointDataLayer id="dpl2"
                            value="#{bindings.SWarehouseView1.collectionModel}"
                            var="row">
          <dvt:pointLocation type="pointXY" pointX="#{row.Longitude}"
                             pointY="#{row.Latitude}" id="pl2">
            <af:image id="img1" source="/images/normalHouse.gif"
                      shortDesc="#{row.Address}, #{row.City} #{row.ZipCode}">
              <f:attribute name="legendLabel" value="Warehouse Location"/>
            </af:image>
          </dvt:pointLocation>
        </dvt:pointDataLayer>
        <dvt:legend id="l1">
          <dvt:showLegendGroup id="slg1" label="Customer and Warehouse Locations">
            <dvt:legendSection source="dpl1:m2" id="ls2"/>
            <dvt:legendSection source="dpl2:img1" id="ls1"/>
          </dvt:showLegendGroup>
          <dvt:showLegendGroup id="slg2" label="Warehouse Product Levels">
            <dvt:legendSection source="al1:dal1:ag1" id="ls3"/>
          </dvt:showLegendGroup>
        </dvt:legend>
      </dvt:thematicMap>

データ・バインドされたテーマ・マップの作成を完了すると、ベース・マップの地理階層で使用可能なリージョンを表す別のマップ・レイヤーを追加したり、テーマ・マップの作成に使用したものと同じデータ・コレクションを使用して面データ・レイヤーや点データ・レイヤーを関連付けできます。レイヤー・ブラウザでは、マップ・レイヤー、面データ・レイヤーと点データ・レイヤー、スタイル設定されたエリアとマーカーの論理的構造を表します。レイヤー・ブラウザを使用して次を実行します。

• ベース・マップの地理階層のその他のマップ・レイヤーをテーマ・マップに追加します。

• 下位レベルのリージョンを使用して、カスタム・レイヤーにリージョンを集約することにより、ベース・マップの地理階層でカスタム・マップ・レイヤーを定義します。詳細は、26.8.7項「カスタム・マップ・レイヤーの定義方法」を参照してください。

• (グローバルまたはマップ・レイヤー固有の)面データ・レイヤーや点のデータ・レイヤーを追加、編集または削除します。詳細は、26.8.3項「テーマ・マップにデータ・レイヤーを追加する方法」を参照してください。

• スタイル設定したエリアやマーカーを追加、編集または削除します。詳細は、26.8.4項「データを表示するためのエリア、マーカーおよびイメージのスタイル設定」を参照してください。

データ・コントロールを使用してテーマ・マップを作成すると、デフォルトのマップ・ラベルや凡例の表示をカスタマイズし、相互作用力やアニメーション効果を追加できます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の、テーマ・マップ・コンポーネントの使用に関する項を参照してください。

26.8.3 テーマ・マップにデータ・レイヤーを追加する方法

データ・レイヤーを使用して、マップ・レイヤーをデータ・コレクションに関連付けます。スタンプを使用すれば、データ・モデル内の各データ行をスタイル(色またはパターンなど)、マーカー(円形または四角形など)、またはイメージにより識別できます。実行時にマップ・レイヤーが表示される場合は、データはスタイル設定されたエリア、マーカーまたはイメージとして表示されます。

マップ・レイヤーは、1つの面データ・レイヤーあるいは1つ以上の点データ・レイヤーを使用して、データを表示できます。面データ・レイヤーは、エリア、マーカーまたはイメージを使用してスタイル設定できます。点データ・レイヤーは、マーカーまたはイメージを使用してスタイル設定できます。

点データ・レイヤーが、特定のマップ・レイヤーの子としてではなくthematicMapの直接の子としてベース・マップに関連付けられている場合は、データは常時表示され、グローバル・ポイント・レイヤーと呼ばれます。

始める前に:

データバインドされたテーマ・マップについて理解しておいてください。詳細は、26.8項「データバインドされたテーマ・マップの作成」を参照してください。

面データ・レイヤーをマップ・レイヤーに追加する手順は次のとおりです。

1. ビジュアル・エディタでテーマ・マップを選択します。

2. レイヤー・ブラウザで、データ・コレクションの行をバインドするマップ・レイヤーを選択します。ビジュアル・エディタでレイヤー・ブラウザが表示されない場合は、マップの内部で右クリックして「レイヤー・ブラウザを開く」を選択します。

3. 「追加」アイコンのドロップダウン・リストから、「データ・レイヤーの追加」を選択します。

4. 「データ・レイヤーの作成」ダイアログで、次のように入力します。

   • 「レイヤーID」: 定義するデータ・レイヤーの一意の名前を入力します。デフォルトでは、一意の連番のID、つまりdl1、dl2などになります。

   • 「データを今すぐバインド」: このオプションを選択して「参照」をクリックし、「ピッカー」ダイアログ→データ・コントロールの定義ページを表示します。データ・レイヤーへのデータのバインドに使用するADFデータ・コントロールで、データ・コレクションを選択します。

     
     

     注意: または、「式ビルダー」ページを使用して、面データ・レイヤーと各エリアのデータ・バインドに使用しているADFマネージドBeanを選択します。残りの各フィールドに「式ビルダー」ダイアログを使用することもできます。

     
     

   • 「面」: このオプションを選択して、面データ・レイヤーをマップ・レイヤーに追加します。

   • 「エリア・レイヤー」: データ・レイヤーを追加するマップ・レイヤーを参照します。

   • 「位置」: データ・レイヤーのエリアに対応するデータ位置を決定する、データ・モデルの列を表す属性を選択します。位置は、データが表示されるベース・マップのリージョンのIDです。詳細は、26.8.5項「基準となるマップの位置IDについて」を参照してください。

   • 「マスター/ディテールの現在行の設定」: マスター/ディテール関係を有効化する場合に選択します。これは、テーマ・マップのデータ・コレクションが、ページ上の別のUIコンポーネントに表示されるディテール・ビューとのマスター/ディテール関係においてマスターである場合に便利です。詳細は、26.8.6項「マスター/ディテール関係の構成について」を参照してください。

図26-72に、設定済の面データ・レイヤーの作成ダイアログを示します。

図26-72 面データ・レイヤーの作成ダイアログ

デフォルトでは、areaDataLayerコンポーネントを表す面データ・レイヤーおよびareaコンポーネントを表すエリアが、レイヤー・ブラウザ階層に追加されます。例26-24に、面データ・レイヤーをマップ・レイヤーに追加する際にJSFページに追加されるコードを示します。

例26-24 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>

点データ・レイヤーをマップ・レイヤーに追加する手順は次のとおりです。

1. ビジュアル・エディタでテーマ・マップを選択します。

2. レイヤー・ブラウザで、データ・レイヤーをバインドするマップ・レイヤーを選択します。ビジュアル・エディタでレイヤー・ブラウザが表示されない場合は、マップの内部で右クリックして「レイヤー・ブラウザを開く」を選択します。

3. 「追加」アイコンのドロップダウン・リストから、「データ・レイヤーの追加」を選択します。

   
   

   注意: テーマ・マップに常時表示されるグローバル・ポイント・レイヤーを作成する場合は、「グローバル・ポイント・レイヤーの作成」を選択します。

   
   

4. 「データ・レイヤーの作成」ダイアログで、次のように入力します。

   • 「レイヤーID」: 定義するデータ・レイヤーの一意のIDを入力します。デフォルトでは、一意の連番のID、つまりdl1、dl2などになります。

   • 「データを今すぐバインド」: このオプションを選択して「参照」をクリックし、「ピッカー」ダイアログ→データ・コントロールの定義ページを表示します。データ・レイヤーへのデータのバインドに使用するADFデータ・コントロールで、データ・コレクションを選択します。

     
     

     注意: または、「式ビルダー」ページを使用して、点データ・レイヤーと各マーカーのデータ・バインドに使用するADFマネージドBeanを選択します。残りの各フィールドに「式ビルダー」ダイアログを使用することもできます。

     
     

   • 「点」: このオプションを選択して、点データ・レイヤーをマップ・レイヤーに追加します。

   • 「エリア・レイヤー」: ドロップダウン・リストを使用してデータ・レイヤーを関連付けるマップ・レイヤーを選択します。「すべて」を選択すると、点データ・レイヤーがグローバル・ポイント・レイヤーとして構成され、常時表示されるようになります。使用可能なマップ・レイヤーを選択した場合は、点データ・レイヤーはそのマップ・レイヤーが表示された場合のみ表示されます。

   • 「データ・タイプ」: 次のいずれかを選択します。

     • 「市区町村」: ベース・マップの名前付きポイントにマッピングされる、データ・コレクション内の名前付きポイント(市区町村など)を表すpointNameデータ型を使用するには、これを選択します。

     • 「座標」: pointXとpointYを組み合せてポイントの位置を定義する、データ・コレクション内の列を表すpointXYデータ型を使用するには、これを選択します。

   • 「位置」: 市区町村データ型が指定されている場合にのみ使用可能です。ドロップダウン・リストを使用して、データ・レイヤーのポイントに対応するデータの位置を決定する、データ・モデルの列を表す属性を選択します。位置は、データが表示されるベース・マップのポイントのIDです。詳細は、26.8.5項「基準となるマップの位置IDについて」を参照してください。

   • 「経度」: 座標データ型が指定されている場合に使用可能です。ドロップダウン・リストを使用して、経度、つまりマーカーのpointXを表すデータ・コレクションの属性を選択します。

   • 「緯度」: 座標データ型が指定されている場合に使用可能です。ドロップダウン・リストを使用して、緯度、つまりマーカーのpointYを表すデータ・コレクションの属性を選択します。

   • 「マスター/ディテールの現在行の設定」: マスター/ディテール関係を有効化する場合に選択します。これは、テーマ・マップのデータ・コレクションが、ページ上の別のUIコンポーネントに表示されるディテール・ビューとのマスター/ディテール関係においてマスターである場合に便利です。詳細は、26.8.6項「マスター/ディテール関係の構成について」を参照してください。

図26-73に、データ型がpointNameの、設定済の点データ・レイヤーの作成ダイアログを示します。

図26-73 点データ・レイヤーの作成ダイアログ

デフォルトでは、pointDataLayerコンポーネントを表す点・データ・レイヤーおよびmarkerコンポーネントを表すマーカーが、レイヤー・ブラウザ階層に追加されます。例26-25に、点データ・レイヤーをマップ・レイヤーに追加する際にJSFページに追加されるコードを示します。

例26-25 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>

例26-26に、グローバル・ポイント・データ・レイヤーをテーマ・マップに追加する際にJSFページに追加されるコードを示します。

例26-26 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>

面データ・レイヤーまたは点データ・レイヤーをテーマ・マップに追加したら、エリア、マーカーまたはイメージを使用してデータをスタイル設定します。詳細は、26.8.4項「データを表示するためのエリア、マーカーおよびイメージのスタイル設定」を参照してください。

26.8.4 データを表示するためのエリア、マーカーおよびイメージのスタイル設定

面データ・レイヤーを使用してマップ・レイヤーをデータ・コレクションに関連付けます。スタンプを使用すれば、データ・モデル内の各データ行をスタイル(色またはパターンなど)、マーカー(円形または四角形など)、またはイメージにより識別できます。

点データ・レイヤーを使用してマップ上のポイントのセットをデータ・コレクションに関連付けます。データ・ポイントは、マップ・レイヤー内の名前付きポイント(米国マップ内の都市など)、または経度と緯度により、指定できます。スタンプを使用すれば、データ・モデル内の各データ行をマーカー(円形や四角形など)またはイメージにより識別できます。

26.8.4.1 エリアをスタイル設定してデータを表示する方法

テーマ・マップareaLayer内のすべてのエリアについてデフォルトのスタンプを使用してエリアを構成することも、子attributeGroupsタグを使用して、データ・セット内のカテゴリ・グループに基づいてスタイル属性タイプを自動的に生成することもできます。areaタグとattributeGroupsタグの両方で、同じスタイル属性が設定されている場合は、attributeGroupsスタイル・タイプが優先されます。

デフォルトでは、面データ・レイヤーを追加すると、構成可能なエリアがレイヤー・ブラウザに追加されます。レイヤー・ブラウザを使用して、追加のエリアやマーカーを面データ・レイヤーに追加したり、マーカーを点データ・レイヤーに追加できます。レイヤー・ブラウザは、マップ・レイヤー、面データ・レイヤーと点データ・レイヤー、テーマ・マップに構成されたエリアやマーカーの論理的構造を反映します。

たとえば、倉庫のある州を赤色で表示するように(図26-74を参照)、usaベース・マップのstatesレイヤーに含まれる州を属性グループでスタイル設定できます。

図26-74 エリア・スタンプが構成されたテーマ・マップ

始める前に:

データバインドされたテーマ・マップについて理解しておいてください。詳細は、26.8項「データバインドされたテーマ・マップの作成」を参照してください。

デフォルトのスタンプを使用してエリアをスタイル設定する手順は次のとおりです。

1. レイヤー・ブラウザで、構成しているマップ・レイヤー内部のエリア位置にあるエリアを選択します。

2. 「編集」アイコンをクリックします。

3. 「エリアの構成」ダイアログの「デフォルト・スタンプ」ページで、次のように入力します。

   • 「位置」: デフォルトでは、データ・レイヤーのエリアに対応するデータの位置を決定する、データ・モデルの列を表す属性です。位置は、データが表示されるベース・マップのリージョンのIDです。この読取り専用フィールドには、スタンプされたエリアをベース・マップのリージョンにマップするEL式が表示されます。詳細は、26.8.5項「基準となるマップの位置IDについて」を参照してください。

   • 「色」: (オプション)ドロップダウン・リストからエリアの塗りつぶし色を選択します。有効な値はRGB 16進数です。ドロップダウン・リストから「カスタム・カラー」を選択し、「カラー・ピッカー」ダイアログを開きます。

   • 「パターン」: (オプション)ドロップダウン・リストから12個の事前作成されたパターンのいずれかを選択し、エリアをスタイル設定します。たとえば、smallChecker、largeDiamond、smallDiagonalRight、largeCrosshatchなどがあります。塗りつぶし色が指定されている場合は、パターンはその色、背景色はデフォルトの白で表示されます。

   • 「不透明度」: (オプション)エリアの塗りつぶし色の不透明度を指定します。有効値の範囲は、0.0(透明)から1.0(不透明)です。

   • 「凡例に含める」: 検索アイコンを使用して「テキスト・リソースの選択」ダイアログを開き、凡例テキストに使用するアプリケーション・テキスト・リソースを選択または作成します。テキスト・リソースは、リソース・バンドルからの翻訳可能な文字列または実行時に実行されるEL式のいずれかにできます。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。

     
     

     注意: テキスト・リソース・オプションは、固定エリアでのみ使用可能です。行数が変動するエリアでは、EL式を使用して行数変動キーを取得し、リソース・バンドルでテキスト・リソースを検索します。たとえば、次のようになります。 #{viewController.ResourceBundle[row.label]}

     
     

   • 「メッセージ」: エリアの構成に関連付けられたアラートを必要に応じて確認したり消去します。

図26-75に、「エリアの構成」ダイアログの「デフォルト・スタンプ」ページを示します。

図26-75 「エリアの構成」ダイアログの「デフォルト・スタンプ」ページ

例26-27に、構成したエリアのJSFページに挿入されるコードを示します。

例26-27 デフォルト・スタンプで構成したエリアのサンプル・コード

<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>      

データ・コレクション内のデータのカテゴリ・グループを使用してエリアをスタイル設定する場合は、「エリアの構成」ダイアログの「属性グループ」ページを使用します。サンプル・コードを含めた「属性グループ」ページの使用方法の詳細は、26.8.1項「ADFデータ・コントロールを使用してテーマ・マップを作成する方法」に記載のユースケースを参照してください。

26.8.4.2 マーカーをスタイル設定してデータを表示する方法

テーマ・マップ・レイヤー内のすべてのマーカーについてデフォルトのスタンプを使用してマーカーを構成することも、子attributeGroupsタグを使用して、データ・セット内のカテゴリ・グループに基づいてスタイル属性タイプを自動的に生成することもできます。markerタグとattributeGroupsタグの両方で、同じスタイル属性が設定されている場合は、attributeGroupsスタイル・タイプが優先されます。

デフォルトでは、点データ・レイヤーを追加すると、構成可能なマーカー要素がレイヤー・ブラウザに追加されます。レイヤー・ブラウザを使用して、追加のエリアやマーカーを面データ・レイヤーに追加したり、マーカーを点データ・レイヤーに追加できます。レイヤー・ブラウザは、マップ・レイヤー、面データ・レイヤーと点データ・レイヤー、テーマ・マップに構成されたエリアやマーカーの論理的構造を反映します。

たとえば、図26-76に示すように、デフォルトのスタンプを使用すると、米国のベース・マップの州レイヤーに事前定義されているすべての市区町村を、丸を付けることにより識別できます。この例では、マーカーは点データ・レイヤー上でスタイル設定されています。面データ・レイヤー上でのマーカーのスタイル設定も同様です。

図26-76 デフォルト・スタンプで構成したマーカーを含むテーマ・マップ

始める前に:

データバインドされたテーマ・マップについて理解しておいてください。詳細は、26.8項「データバインドされたテーマ・マップの作成」を参照してください。

デフォルトのスタンプを使用してマーカーをスタイル設定する手順は次のとおりです。

1. レイヤー・ブラウザで、構成しているマップ・レイヤー内部のポイント位置にあるマーカーを選択します。

2. 「編集」アイコンをクリックします。

3. 「マーカーの構成」ダイアログの「デフォルト・スタンプ」ページで、次のように入力します。

   • 「位置」: デフォルトでは、データ・レイヤーのマーカーに対応するデータの位置を決定する、データ・モデルの列を表す属性です。位置は、データが表示されるベース・マップのポイントのIDです。この読取り専用フィールドには、スタンプされたマーカーをベース・マップのポイントにマップするEL式が表示されます。詳細は、26.8.5項「基準となるマップの位置IDについて」を参照してください。

   • 「色」: (オプション)ドロップダウン・リストからマーカーの塗りつぶし色を選択します。有効な値はRGB 16進数です。ドロップダウン・リストから「カスタム・カラー」を選択し、「カラー・ピッカー」ダイアログを開きます。

   • 「パターン」: (オプション)ドロップダウン・リストから12個の事前作成されたパターンのいずれかを選択し、マーカーをスタイル設定します。たとえば、smallChecker、largeDiamond、smallDiagonalRight、largeCrosshatchなどがあります。塗りつぶし色が指定されている場合は、パターンはその色、背景色はデフォルトの白で表示されます。

   • 「不透明度」: (オプション)マーカーの塗りつぶし色の不透明度を指定します。有効値の範囲は、0.0(透明)から1.0(不透明)です。

   • 「図形」: (オプション)マーカーの形状を選択します。有効な値は、円(デフォルト)、四角、正符号、ひし形、上向き三角形、下向き三角形および人型です。

     オプションで、「カスタム形状」フィールドを使用して、マーカーに使用するためにScalable Vector Graphics (SVG)ファイルに対してshapePath値を指定します。パスを入力するか、「検索」アイコンを使用して「SVGファイルの選択」ダイアログを開き、ファイルの場所にナビゲートします。このオプションは、「図形」フィールドでデフォルトの図形が選択されている場合にのみ使用できます。

     形状は、CSSスタイル・プロパティを使用して指定することもできます。事前定義のマーカーの形状は上書きでき、カスタム・マーカー用のSVGファイルのパスは、shapePath属性を使用せずに定義できます。詳細は、26.8.4.3項「マーカーのスタイル設定について」を参照してください。

   • 「サイズ」: (オプション)マーカーをデフォルトのサイズから拡大縮小するためのパーセンテージを、「スケールX」(水平方向)および「スケールY」(垂直方向)に入力します。パーセンテージが浮動小数に変換されます。たとえば、マーカーの幅を2倍にするには、「スケールX」を200に設定します。すると、タグに2.0と書き込まれます。また、高さを半分にするには、「スケールY」を50に設定します。すると、タグに0.5と書き込まれます。

     EL式を使用して、データに基づくマーカーのサイズを評価することもできます。例:

     scaleX="#{(5 + row.categories[0]/25)}"
     scaleY="#{(5 + row.categories[0]/25)}"
     

     
     

     注意: テーマ・マップをズーム・インまたはズーム・アウトする際に、サイズを変更したマーカーおよびラベルについて、テーマ・マップに対する相対的なサイズを維持するには、dvt:thematicMapコンポーネントのmarkerZoomBehaviorプロパティをzoomに設定します。

     
     

   • 「凡例に含める」: 凡例ラベルに使用するテキスト・リソースを入力します。テキスト・リソースは、リソース・バンドルからの翻訳可能な文字列または実行時に実行されるEL式のいずれかにできます。ドロップダウン・リストを使用して、「テキスト・リソースの選択」または「式ビルダー」ダイアログを選択します。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。

     
     

     注意: テキスト・リソース・オプションは、固定エリアでのみ使用可能です。行数が変動するエリアでは、EL式を使用して行数変動キーを取得し、リソース・バンドルでテキスト・リソースを検索します。たとえば、次のようになります。 #{viewController.ResourceBundle[row.label]}

     
     

   • 「メッセージ」: マーカーの構成に関連付けられたメッセージを確認したり消去します。

図26-77に、「マーカーの構成」ダイアログの「デフォルト・スタンプ」ページを示します。

図26-77 「マーカーの構成」ダイアログの「デフォルト・スタンプ」ページ

例26-28に、構成したマーカーのJSFページに挿入されるコードを示します。

例26-28 デフォルト・スタンプで構成したマーカーのサンプル・コード

<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>      

データ・コレクション内のデータのカテゴリ・グループを使用してマーカーをスタイル設定する場合は、「マーカーの構成」ダイアログの「属性グループ」ページを使用します。マーカーは、点データ・レイヤーまたは面データ・レイヤーに対して構成できます。

データのカテゴリ・グループを使用してマーカーをスタイル設定する手順は次のとおりです。

1. レイヤー・ブラウザで、構成しているマップ・レイヤー内部のマーカー位置にあるマーカーを選択します。

2. 「編集」アイコンをクリックします。

3. 「マーカーの構成」ダイアログの「属性グループ」ページで、次のように入力します。

   • 「グループ化ルール」: この表を使用して、データ・コレクション内のデータのカテゴリ・グループのスタイルを指定します。「追加」アイコンを使用して、カテゴリ・グループのルールを構成する表に行を追加し、「削除」アイコンを使用して選択した行を表から削除します。各グループ化ルールはattributeGroupsコンポーネントとして表され、一意の連番ID(ag1、ag2など)が割り当てられます。

     表に追加された行ごとに、次のように入力します。

     • 「値でグループ化」: データ値のグループ化に使用するデータ・セットの列を表す属性を入力するか、ドロップダウン・リストを使用して選択します。

       
       

       注意: 選択した属性は、カテゴリ化できる離散値で構成される必要があります。たとえば、40から45までの数値範囲は自動的にはグループ化されません。

       
       

     • 「マーカー・プロパティ」: 該当のマーカーのスタイル設定に使用するプロパティをドロップダウン・リストを使用して選択します。マーカーは、色、パターン、不透明度、スケールX、スケールYまたはこれら有効値の任意の組合せを使用してスタイル設定できます。ダイアログのドロップダウン・リストから「複数の属性の選択」を選択し、値の組合せを指定します。

       各プロパティに生成されるデフォルトのスタイル値は、ADFスキンのCSSスタイル・プロパティを使用して定義されます。各attributeGroupsタイプには、スキンで定義されたデフォルトのランプがあり、索引ベースのプロパティを目的の値に設定することによりカスタマイズできます。詳細は、26.8.4.4項「属性グループのデフォルトのスタイル値について」を参照してください。

     • 「凡例ラベル」: テキストを入力するか、テーマ・マップの凡例のカテゴリ・グループに使用するテキストを表す属性をドロップダウン・リストを使用して選択します。ドロップダウン・リストから「式ビルダー」を選択し、EL式を作成して凡例テキストを指定することもできます。詳細は、26.8.9項「データバインドされた凡例の作成」を参照してください。

   • 値固有のルール: クリックして、データ・セットのカテゴリ・グループに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またはこれら有効値の任意の組合せを使用してスタイル設定できます。ここで選択したプロパティは、「グループ化ルール」属性の「マーカー・プロパティ」に表示されるプロパティ・タイプのいずれかに一致する必要があります。

     • 「プロパティ値」: 入力するかドロップダウン・リストを使用して、値をプロパティに割り当てます。一致オーバーライドにより指定された値が、グループ化ルールによって返された事前作成のランプ内にもある場合、その値はオーバーライドでのみ使用され、事前作成のランプではスキップされます。

       colorの有効値は、RGB 16進数の色です。

       パターンの有効値として、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を使用してスタイル設定できます。ここで選択したプロパティは、「グループ化ルール」属性の「マーカー・プロパティ」に表示されるプロパティ・タイプのいずれかに一致する必要があります。

     • 「プロパティ値」: 入力するかドロップダウン・リストを使用して、値をプロパティに割り当てます。一致オーバーライドにより指定された値が、グループ化ルールによって返された事前作成のランプ内にもある場合、その値はオーバーライドでのみ使用され、事前作成のランプではスキップされます。

       colorの有効値は、RGB 16進数の色です。

       パターンの有効値として、12個の事前作成されたパターン(smallChecker、largeDiamond、smallDiagonalRight、largeCrosshatchなど)から選択することもできます。塗りつぶし色が指定されている場合は、パターンはその色、背景色はデフォルトの白で表示されます。

       不透明度の有効な値範囲は、0.0(透明)から1.0(不透明)です。

       スケールXおよびスケールYの有効値はパーセンテージで、これはその後浮動小数に変換されます。

     • 「凡例ラベル」: 凡例ラベルに使用するテキスト・リソースを入力します。テキスト・リソースは、リソース・バンドルからの翻訳可能な文字列または実行時に実行されるEL式のいずれかにできます。ドロップダウン・リストを使用して、「テキスト・リソースの選択」または「式ビルダー」ダイアログを選択します。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。

       
       

       注意: テキスト・リソース・オプションは、固定エリアでのみ使用可能です。行数が変動するエリアでは、EL式を使用して行数変動キーを取得し、リソース・バンドルでテキスト・リソースを検索します。たとえば、次のようになります。 #{viewController.ResourceBundle[row.label]}

       
       

   • 「メッセージ」: マーカーの構成に関連付けられたアラートを必要に応じて確認したり消去します。

たとえば、図26-78に示すように、面データ・レイヤーでマーカーを使用してデータのカテゴリ・グループを色で表示できます。

図26-78 色別のマーカー属性グループ

例26-29に、色別のマーカー属性グループのサンプル・コードを示します。

例26-29 色別のマーカー属性グループのサンプル・コード

<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>

マーカーに色、形状などの複数の属性を指定してデータのカテゴリ・グループを表示することもできます。また、特定の条件を満たした場合にグループ化ルールに例外を表示できます。図26-79に、色と形状を使用してカテゴリ・グループを表示したテーマ・マップ(例外のTexas州を含む)を示します。

図26-79 例外ルールが設定された複数のマーカー属性グループ

例26-30に、例外ルールが設定された複数のマーカー属性グループのサンプル・コードを示します。

例26-30 例外ルールが設定された複数のマーカー属性グループのサンプル・コード

<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>

26.8.4.3 マーカーのスタイル設定について

テーマ・マップでは、事前定義された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ユーザー・インタフェース開発者ガイド』の「スタイルおよびスキンを使用した外観のカスタマイズ」の章を参照してください。

26.8.4.4 属性グループのデフォルトのスタイル値について

attributeGroupsコンポーネントは、データ・コレクション内のデータのカテゴリ・グループに基づいて色または形状などのスタイル・プロパティ値を生成するために使用します。データ・モデルでグループ化の基準となる列を表す属性に基づき、attributeGroupsコンポーネントにより、データ内の一意の値またはグループごとにスタイル値を生成できます。

値を生成するスタイル・プロパティのタイプは、attributeGroupsコンポーネントのtype属性で指定します。areaコンポーネントに対してサポートされているタイプは、color、patternおよびopacityです。markerコンポーネントに対してサポートされているタイプは、color、shape、pattern、opacity、scaleXおよびscaleYです。これらのタイプは、一意のデータ値ごとに複数のスタイル・プロパティを生成するために、スペース区切りのリストにまとめることができます。

生成されるデフォルトのスタイル値は、ADFスキンのCSSスタイル・プロパティを使用して定義されます。各attributeGroupsタイプには、ADFスキンで定義されたデフォルトのランプがあり、索引ベースのセレクタを目的の値に設定することによりカスタマイズできます。例26-31に、CSSスタイル・プロパティを使用するサンプル・コードを示します。そのコードでは、CSSスタイル・プロパティを使用して属性グループを指定します。

例26-31 CSSスタイル・プロパティを使用した属性グループ

af|dvt-attributeGroups::shape1{
  -tr-shape: square;
}
af|dvt-attributeGroups::shape2{
  -tr-shape: square;
}
...
af|dvt-attributeGroups::color1{
  -tr-fill-color: #003366;
}

属性グループ・タイプごとのデフォルトのランプを表26-8に示します。

表26-8 テーマ・マップ属性グループのデフォルトのランプ

タイプ	デフォルトのランプ
color	j#003366 (青)、#CC3300 (赤)、#666699 (ラベンダー)、#0006666 (エメラルド)、#FF9900 (橙黄)、#993366 (紫)、#99CC33 (黄緑色)、#624390 (青紫)、#669933 (緑)、#FFCC33 (黄)、#006699 (青緑色)、#EBEA79 (淡黄色)
shape	square、circle、diamond、plus、triangleDown、triangleUpおよびhuman
pattern	smallDiagonalLeft、smallDiagonalRight、smallTriangle、smallChecker、smallChecker、smallCrosshatch、smallDiamond、largeDiagonalLeft、largeDiagonalRight、largeTriangle、largeChecker、largeCrosshatch、largeDiamond
opacity	0.25, 0.50, 0.75, 1.0
scaleXおよびscaleY	1.0, 2.0, 3.0, 4.0, 5.0

ADFスキンおよびスタイル・プロパティ使用の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「スタイルおよびスキンを使用した外観のカスタマイズ」の章を参照してください。

26.8.4.5 イメージを使用したデータの表示方法

イメージを使用して、テーマ・マップに表示されるデータを表現できます。スタンプを使用すれば、データ・モデル内の各データ行をイメージにより識別できます。イメージは、面データ・レイヤーまたは点データ・レイヤーのどちらかに関連付けることができます。データを表すイメージ・ファイルを、データ・レイヤーに直接、またはマーカーを使用して関連付けることができます。

たとえば、図26-80に示すように、家屋のイメージを使用して、米国ベース・マップの州マップ・レイヤー上で主要な位置を識別できます。

図26-80 イメージを使用してデータを表示するテーマ・マップ

始める前に:

テーマ・マップの属性やテーマ・マップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のテーマ・マップの構成に関する項を参照してください。

ページにすでにテーマ・マップが存在している必要があります。ない場合は、この章の指示に従ってテーマ・マップを作成します。詳細は、26.8.1項「ADFデータ・コントロールを使用してテーマ・マップを作成する方法」を参照してください。

イメージを使用してデータを表示する手順は次のとおりです。

1. レイヤー・ブラウザで、イメージを構成してデータを表示する面データ・レイヤーまたは点データ・レイヤーを選択します。

2. 「構造」ウィンドウで、面または点データ・レイヤーの子であるareaLocationまたはpointLocationコンポーネントを右クリックし、「dvt:areaLocationの中に挿入」または「dvt:pointLocationの中に挿入」→「イメージ」を選択します。

3. 「イメージの挿入」ダイアログで、次のように入力します。

   • 「ソース」: イメージ・ソースの場所を指定するURIを入力します。ドロップダウン・メニューを使用して「編集」を選択し、「プロパティの編集: ソース」ダイアログまたは式ビルダーを開き、イメージ・ソースの場所を指定できます。

   • 「短い説明」: スクリーン・リーダーのユーザー用のaltテキストとして使用される、イメージの短い説明を入力します。

例26-32に、図26-80でイメージを使用してデータを表示するテーマ・マップのコード・サンプルを示します。

例26-32 イメージを使用するテーマ・マップのコード・サンプル

<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>

イメージ・ファイルを使用してデータを表示するようにマーカーを構成することもできます。個別のイメージを指定して、ユーザーの選択とホバーの状態を表示できます。dvt:markerコンポーネントを使用している場合は、イメージの回転もサポートされます。たとえば、図26-81のテーマ・マップは、航空機のフライトの位置と航路を表し、航路に沿って移動するときにイメージを回転します。

図26-81 テーマ・マップ・フライト・トラッカ

マーカー・イメージ・ソースを使用してデータを表示する手順:

1. レイヤー・ブラウザで、イメージを構成してデータを表示する面データ・レイヤーまたは点データ・レイヤーを選択します。

2. 「構造」ウィンドウで、面または点データ・レイヤーの子であるareaLocationまたはpointLocationコンポーネントを右クリックし、「dvt:areaLocationの中に挿入」または「dvt:pointLocationの中に挿入」→「マーカー」を選択します。

3. 「構造」ウィンドウで「dvt:marker」コンポーネントを右クリックし、「プロパティに移動」を選択します。

4. プロパティ・インスペクタで、「外観」セクションを開いて次の属性を設定します。

   • 「ソース」: イメージ・ソースの場所を指定するURIを入力します。ドロップダウン・メニューを使用して「編集」を選択し、「プロパティの編集: ソース」ダイアログまたは式ビルダーを開き、イメージ・リソースの場所を指定できます。

   • SourceHover: オプションで、カーソルが置かれているイメージ・リソースの場所を指定するURIを入力します。

   • SourceHoverSelected: オプションで、カーソルが置かれている選択されたイメージ・リソースの場所を指定するURIを入力します。

   • SourceSelected: オプションで、選択されているイメージ・リソースの場所を指定するURIを入力します。

   • 「短い説明」: スクリーン・リーダーのユーザー用のaltテキストとして使用される、イメージの短い説明を入力します。

5. オプションで、「その他」セクションを展開し、「回転」属性を使用してイメージの中心の時計回りでのマーカーの回転を指定します。

例26-33に図26-81のテーマ・マップ・フライト・トラッカのコード・サンプルを示します。

例26-33 フライト・トラッカ・マーカー・イメージのコード・サンプル

<dvt:thematicMap id="thematicMap" basemap="world" animationOnDisplay="none"
                 tooltipDisplay="auto"
                 summary="flight tracker demo">
  <dvt:areaLayer id="al1" layer="countries">
    <dvt:pointDataLayer id="pdl1" contentDelivery="immediate"
                        value="#{flightTrackerBean.flights}"
                        selectionListener="#{flightTrackerBean.processSelection}"
                        var="row"
                        varStatus="rowStatus"
                        selectionMode="multiple" partialTriggers="::::sbcb1"
                        selectedRowKeys="#{flightTrackerBean.selectedKeys}">
    <dvt:pointLocation id="pl1" type="pointXY" pointX="#{row.currentLongLat.x}"
                       pointY="#{row.currentLongLat.y}">
      <dvt:marker id="m1" labelPosition="bottom" scaleX="3" scaleY="3"
                  rotation="#{row.rotation}"
                  shortDesc="OracleAir#{row.flightNumber}"#{row.flightNumber}"
                  sourceHover="/resources/images/thematicMap/planeHover.png"
                  source="/resources/images/thematicMap/plane.png"
                  sourceSelected="/resources/images/thematicMap/planeSel.png"
                  sourceHoverSelected="/resources/images/thematicMap/
                                      planeHoverSel.png"
                  labelDisplay="#{flightTrackerBean.showFlightNo ? 'on' : 'off'}" 
                  value="Flight #{row.flightNumber}"/>
      </dvt:pointLocation>
    </dvt:pointDataLayer>
  </dvt:areaLayer>
</dvt:thematicMap>

26.8.4.6 SVGファイルについての注意事項

スケーラブル・ベクター・グラフィック(SVG)が、テーマ・マップのマーカーのカスタム形状作成のためのファイル形式としてサポートされています。

カスタム形状によってサポートされていないSVG機能には次のものがあります。

• SVGファイル内のイメージ・タグ。SVGのベクター形状を使用して、すべてを宣言する必要があります。

• パターンによる塗りつぶし

• ストロークのグラデーション

26.8.5 基準となるマップの位置IDについて

テーマ・マップ・コンポーネント用に用意されている基準となる各マップには、一連のリージョンを表す事前に作成された複数のマップ・レイヤーがあります。たとえば、基準となる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属性のタグ・ドキュメントで検索します。データ視覚化コンポーネントのタグ・ドキュメントにアクセスするには、「構造」ウィンドウで該当のコンポーネントを選択し、「プロパティ・インスペクタ」でヘルプ・ボタンをクリックします。

26.8.6 マスター/ディテール関係の構成について

テーマ・マップを構成し、表などの、ページ上の別のUIコンポーネントにその関連するデータを表示できます。この構成では、テーマ・マップのデータ・コレクションが、別のUIコンポーネントに表示されるディテール・ビューとのマスター/ディテール関係でのマスターとなります。図26-82に、州ごとの失業率を表示するテーマ・マップを示します。ユーザーは、1つ以上の州を選択してデータのディテール・ビューを表に表示できます。

図26-82 テーマ・マップのマスター/ディテール表のビュー

このマスター/ディテール処理を宣言的に実現するには、次の要件を満たす必要があります。

• 次のように、同じデータ・コレクションを使用して両方のビューにデータを提供する必要があります。

  • テーマ・マップareaDataLayerまたはpointDataLayerをデータ・コレクションにバインドします。その属性は、テーマ・マップ・レイヤーでエリアまたはマーカーによってスタイル設定されるデータを表します。

  • その他のADFコンポーネント(表など)を同じデータ・コレクションにバインドします。

• 「データ・レイヤーの作成」ダイアログで現在の行をマスター/ディテールに設定を選択し、テーマ・マップareaLayerコンポーネントのselectionListener属性に値を自動的に設定し、すでにテーマ・マップ・バインディングの一部であるprocessSelectionメソッドを使用します。

  たとえば、テーマ・マップの面データ・レイヤー・コンポーネントのvalue属性がvalue="#{stateData.employmentData}"である場合は、selectionListener属性は次のように設定されます。

  selectionListener="#{stateData.employmentData.processSelection}".
  

• areaDataLayerまたはpointDataLayerコンポーネントのselectionMode属性が、テーマ・マップの要件に応じてsingleまたはmultipleに設定されていることを確認します。

26.8.7 カスタム・マップ・レイヤーの定義方法

カスタム・マップ・レイヤーを固有のリージョン・データから定義し、テーマ・マップの自然の地理階層に挿入できます。カスタム・レイヤーは、事前定義のマップ・レイヤーを開き、下位レベルのリージョンを集約することで作成され、カスタム・レイヤー内に新規のリージョンが形成されます。定義したカスタム・マップ・レイヤーは、他のマップ・レイヤーと同じように使用されます。

たとえば、図26-83に示すように、米国リージョンのカスタム・マップ・レイヤーに米国北東部、中西部、西部および南部という地理的なリージョンを定義できます。この図では、米国リージョンのカスタム・レイヤーは米国のベース・マップの州レイヤーから拡張されています。レイヤー内の新しいエリアは、州レイヤーの州から集約されます。米国南部リージョンのラベルには、そのリージョンにある州が一覧で表示されます。米国中西部のリージョンは、下位レベルの郡リージョンの売上げカテゴリを表示するまでドリルダウンされています。ドリルの詳細は、26.8.8項「テーマ・マップにドリルを構成する方法」を参照してください。

図26-83 米国リージョンのカスタム・マップ・レイヤー

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は、すでに用意されています。

ページにすでにテーマ・マップが存在している必要があります。ない場合は、この章の指示に従ってテーマ・マップを作成します。詳細は、26.8.1項「ADFデータ・コントロールを使用してテーマ・マップを作成する方法」を参照してください。

カスタム・マップ・レイヤーを追加および構成する手順は次のとおりです。

1. ビジュアル・エディタでテーマ・マップを選択します。

2. レイヤー・ブラウザの「追加」アイコンのドロップダウン・リストでカスタム・レイヤーの追加を選択しします。ビジュアル・エディタでレイヤー・ブラウザが表示されない場合は、マップ内で右クリックして「レイヤー・ブラウザを開く」を選択します。

3. 「カスタム・レイヤーの作成」ダイアログで、次のように入力します。

   • 「データを今すぐバインド」: このオプションを選択して「参照」をクリックし、「ピッカー」ダイアログ→データ・コントロールの定義ページを表示します。カスタム・レイヤーやエリアのデータバインドに使用するADFデータ・コントロールで、データ・コレクションを選択します。

     
     

     注意: または、「式ビルダー」ページを使用して、カスタム・レイヤーと各エリアのデータ・バインドに使用するADFマネージドBeanを選択します。残りの各フィールドに「式ビルダー」ダイアログを使用することもできます。

     
     

   • 「レイヤーID」: customAreaLayerコンポーネントの一意のIDを入力します。たとえば、米国を集約リージョン(北西部、中西部、西部、南部)に分割する場合は、対応するID (NE、MW、WおよびS)を使用してこれらのリージョンを定義できます。

   • 「拡張」: 検索アイコンを使用して、カスタム・レイヤーにエリアを集約する際に使用できる組込みマップ・レイヤーを表示します。カスタム・レイヤーによって拡張されるマップ・レイヤーを選択します。

   • 「エリア・リスト」: ドロップダウン・リストを使用して、カスタム・マップ・レイヤーでのエリアの集約に使用する下位レベルのマップ・リージョンのリストを表すデータ・コレクション属性を選択します。値のカンマ区切りリストでは、「拡張」属性に定義されているマップ・レイヤーのリージョンを集約します。

   • 「エリアID」: ドロップダウン・リストを使用して、カスタム・マップ・レイヤーでのエリアの集約に使用する下位レベルのマップ・リージョンの一意のIDを表すデータ・コレクション属性を選択します。デフォルトでは、一意のID(ca1、ca2など)は、customAreaコンポーネントで使用されます。

   • 「エリア・ラベル」: ドロップダウン・リストを使用して、カスタム・マップ・レイヤーでのエリアの集約に使用する下位レベルのマップ・リージョンの名前を表すデータ・コレクション属性を選択します。実行時に、集約したリージョンのカンマ区切りリストがラベルに表示されます。

図26-84に、設定済の「カスタム・レイヤーの作成」ダイアログを示します。

図26-84 「カスタム・レイヤーの作成」ダイアログ

図26-85に、カスタム・レイヤー定義後のレイヤー・ブラウザを示します。レイヤー構造では、カスタム・レイヤーcal1は、マップ・レイヤーal1で参照されます。ここで、面データ・レイヤーまたは点データ・レイヤーを追加してデータを表示します。詳細は、26.8.3項「テーマ・マップにデータ・レイヤーを追加する方法」を参照してください。

図26-85 レイヤー・ブラウザでのカスタム・マップ・レイヤー

例26-34に、JSFページに挿入されるコードを示します。

例26-34 カスタム・マップ・レイヤーのコード

<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>

カスタム・レイヤーを構成してマップ・レイヤー階層に追加すると、他のマップ・レイヤーと同様の方法でそのマップ・レイヤーを使用できるようになります。たとえば、図26-83に示すようにテーマ・マップを作成するには、次を実行する必要があります。

• テーマ・マップでドリルをサポートするように構成します。詳細は、26.8.8項「テーマ・マップにドリルを構成する方法」を参照してください。

  
  

  注意: テーマ・マップでドリルが有効な場合は、カスタム・レイヤーとカスタム・レイヤーの集約に使用するマップ・レイヤー間のドリルが可能です。その際、どちらのレイヤーもデータ表示を構成する必要はありません。

  
  

• 郡データ・ビューに面データ・レイヤーを追加し、構成します。詳細は、26.8.3項「テーマ・マップにデータ・レイヤーを追加する方法」を参照してください。

• エリア・コンポーネントを追加してスタイル設定し、各マップ・レイヤーの関連するデータを表示します。詳細は、26.8.4項「データを表示するためのエリア、マーカーおよびイメージのスタイル設定」を参照してください。

• テーマ・マップの凡例を構成します。詳細は、26.8.9項「データバインドされた凡例の作成」を参照してください。

例26-35に、テーマ・マップでカスタム・レイヤーを使用するためのサンプル・コードを示します。

例26-35 テーマ・マップでカスタム・レイヤーを使用するためのサンプル・コード

<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>

26.8.8 テーマ・マップでドリルを構成する方法

各種マップ・レイヤーの関連するデータ・ビューを備えたテーマ・マップは、上位と下位のデータ・ビュー間でドリルを実行するように構成できます。たとえば、図26-83に示すように、テーマ・マップでは、米国の州別の売上げカテゴリのデータを郡別にドリルダウンして表示できます。州や郡を選択した場合は、ポップアップ・メニューの選択やコントロール・パネルの設定により、ドリルアップやドリルダウンが開始されます。

テーマ・マップ・エリアのドリルを宣言的に実現するには、次の要件を満たす必要があります。

• ドリル階層の各マップ・レイヤー(areaLayer)について、その子であるareaDataLayerを該当するマップ・レイヤーの関連データを定義するデータ・コントロールにバインドする必要があります。

• マップ・レイヤー・ドリル階層の各areaDataLayerのselectionMode属性は、singleまたはmultipleに設定されている必要があります。

• 下位レベルのマップ・レイヤー・ドリル階層のareaを構成し、上位レベルのマップ・レイヤーのareaコンポーネントと同じデフォルトのスタンプやカテゴリ属性のスタイルを使用してデータを表示する必要があります。

• thematicMapコンポーネントのdrilling属性はonに設定する必要があります。

注意: テーマ・マップでドリルが有効な場合は、カスタム・レイヤーとカスタム・レイヤーの集約に使用するマップ・レイヤー間のドリルが可能です。

始める前に:

テーマ・マップの属性やテーマ・マップの子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のテーマ・マップの構成に関する項を参照してください。

ページにすでにテーマ・マップが存在している必要があります。ない場合は、この章の指示に従ってテーマ・マップを作成します。詳細は、26.8.1項「ADFデータ・コントロールを使用してテーマ・マップを作成する方法」を参照してください。

ドリル階層の各データ・レイヤーのデータ・モデルを定義するデータ・コントロールはすでに用意されています。

テーマ・マップ・エリアを構成してドリルを可能にする手順は次のとおりです。

1. 構造ウィンドウで、dvt:thematicMapコンポーネントを選択します。

2. プロパティ・インスペクタで「動作」セクションを展開します。このセクションを使用して、次の属性を設定します。

   • Drilling: テーマ・マップ・レイヤー間でデータ・ビューのドリルを有効にするために使用します。ドロップダウン・リストから「オン」を選択して、ドリルを有効にします。デフォルト値は「オフ」です。

   • MaintainDrill: (オプション)新しいエリアをドリルするときに、以前にドリルしたエリアのドリル状態を維持するために、オプションのtrue値を指定するために使用します。デフォルト値は「false」です。

   • DrillBehavior: (オプション)ドリル対象のエリアでオプションのzoomToFit効果を指定するために使用します。デフォルト値は指定なしです。

3. レイヤー・ブラウザで、希望のドリル階層にある各「エリア・レイヤー」コンポーネントを選択し、次を実行します。

   • 「追加」アイコンをクリックし、「データ・レイヤーの追加」を選択して「データ・レイヤーの作成」ダイアログを開きます。ダイアログを設定して面データ・レイヤーを追加し、このデータ・レイヤーを該当のマップ・レイヤーのデータ・コントロールにバインドします。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。

     
     

     注意: 面データ・レイヤーがすでに存在する場合は、「編集」アイコンをクリックしてデータ・コントロールへのバインディングを確定します。

     
     

   • プロパティ・インスペクタで、「動作」セクションを展開し、SelectionMode属性をsingleまたはmultipleに設定します。

4. レイヤー・ブラウザで、希望のドリル階層にある各「面データ・レイヤー」コンポーネントを選択し、次を実行します。

   • 「追加」アイコンをクリックし、「エリアの追加」を選択して「エリアの構成」ダイアログを開きます。ダイアログを設定してデフォルトのスタンプを定義するか、属性グループを使用して該当のマップ・レイヤーのエリアをスタイル設定します。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。

     
     

     注意: エリアがすでに存在する場合は、「編集」アイコンをクリックしてエリアのスタイル設定を確定します。

     
     

図26-85に、売上げカテゴリのデータを表示するようにスタイル設定されたエリアを持つ米国の州と郡のマップ・レイヤーに対し、ドリルを有効化したサンプル・コードを示します。

例26-36 ドリル構成のサンプル・コード

<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>

26.8.9 データバインドされた凡例の作成

凡例には、シンボルとラベルのペア表記による、テーマ・マップのスタイル設定されたデータに関する説明表が付いています。テーマ・マップの凡例コンポーネント(legend)では、色、形状、カスタム形状、塗りつぶしパターン、不透明度、イメージおよびサイズのシンボルをサポートしています。1つ以上の子凡例アイテム・コンポーネント(legendSection)のソースは、テーマ・マップに表示するデータをスタイル設定するためにスタンプされる、テーマ・マップのarea、marker、attributeGroupsまたはaf:imageコンポーネントです。凡例セクションの構造では、コンテンツの順序付けと外観に対する制御をサポートしています。showLegendSectionコンポーネントを使用して、凡例アイテムを公開可能なセクションにまとめることができます。図26-86に、マップのエリアおよびマーカーの公開可能なセクションを設定した凡例を示します。

図26-86 公開可能なセクションとマーカーを設定した凡例

attributeGroupsコンポーネントからの凡例アイテムにより、エリアまたはマーカーの属性タイプを異なるセクションに自動的に分割できます。セパレータ・ファセットを指定して、凡例セクション間にセパレータを描画できます。図26-87に、色、形状、塗りつぶしパターン、不透明度およびサイズに関する属性グループを使用し、各セクション間にセパレータを描画した凡例を示します。

図26-87 属性グループを使用した凡例

凡例は、Flash(デフォルト)およびPNGイメージ形式のどちらでも表示できます。どちらの形式も、右から左に表示するロケールをサポートしています。PNG形式にレンダリングすると、たとえば、テーマ・マップを印刷する場合に凡例の公開可能なセクションはサポートされず、凡例アイテムが公開として表示されます。

「データ・コントロール」パネルとテーマ・マップ・バインディング・ダイアログを使用してテーマ・マップを作成すると、凡例のデータ・バインディングが作成されます。テーマ・マップのすべてのエリアについて、1つのエリアまたはマーカーをデフォルトのスタンプとして構成した場合は、静的テキスト・リソースを凡例の固定エリアまたはマーカーに割り当てることができます。

行数が変動するデータを表示するデフォルトのスタンプに対し、EL式を使用して凡例テキストおよびマネージドBean(オプション)を割り当て、行数変動キーを取得してリソース・バンドルでテキスト・リソースを検索できます。例26-37に、エリアとマーカーのスタンプの凡例エントリを生成するコード・サンプルを示します。このコードは、行数が変動するエリアおよびテキスト・リソースが割り当てられた固定マーカーの公開可能なセクションを示しています。

例26-37 エリアおよびマーカー・スタンプの凡例のサンプル・コード

<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属性で指定されます。例外ルールを指定する場合は、アプリケーション・リソース・バンドルからのテキスト・リソースを指定できます。例26-38に、一致ルールと例外ルールの両方が組み込まれ、凡例セクション間にセパレータを指定した属性グループを使用する凡例のサンプル・コードを示します。

例26-38 属性グループを使用した凡例のサンプル・コード

<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>

テーマ・マップの凡例エリアまたはマーカーを、他のマップ・レイヤーと同様の方法でカスタム・リージョンで構成します。例26-39に、カスタム・マップ・レイヤーの凡例のサンプル・コードを示します。

例26-39 カスタム・マップ・レイヤーの凡例のサンプル・コード

<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ユーザー・インタフェース開発者ガイド』の「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。

26.9 データバインドされたガント・チャートの作成

ガント・チャートは、棒グラフの1種です(横軸が時間を表します)。このグラフは、プロジェクトの計画および追跡において、開始と終了が明確な時間枠内でタスクまたはリソースを示すために使用されます。

ガント・チャートを作成する場合は、次のタイプから選択できます。

• プロジェクト

  プロジェクト・ガント・チャートは、タスクを垂直に示し、各タスクの期間を水平な時間軸上に棒として示します。

• リソースの使用率

  リソース使用率ガント・チャートは、リソースの割当てが超過なのか未満なのかを図示します。リソースを垂直に示し、その割当てと容量(オプション)を水平な時間軸上に示します。

• スケジューリング

  このガント・チャートは手動のスケジュール表をベースにし、リソースを縦に表示し、対応するアクティビティを横方向の時間軸に表示します。リソースの例としては、要員、マシン、部屋などがあります。

データ・バインディングの完了後にガント・チャートをカスタマイズする方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のガント・チャート・コンポーネントの使用方法についての章を参照してください。

26.9.1 データバインドされたプロジェクト・ガント・チャートの作成方法

プロジェクト・ガント・チャートでは、タスクの値を指定する必要があります。オプションで、分割タスク、サブタスク、再帰タスクおよびタスク間の依存性の値も指定できます(データ・コレクションにこの追加情報に対するアクセッサがある場合)。

プロジェクト・ガント・チャートは、全体的な開始時間および終了時間と、主および副時間軸の値に対するデフォルト値を使用して表示されます。プロジェクト・ガント・チャートでは、主時間軸はデフォルトで週に設定され、副時間軸は日に設定されます。

図26-88は、各タスクが入力される1つの注文となっているプロジェクト・ガント・チャートを示しています。分割線の左側のリスト・リージョンには、注文の担当者の名前が入力された列と、注文日および出荷日が入力された列が示されています。分割線の右側のグラフ・リージョンでは、各注文の注文日から出荷日までの水平な棒がガント・チャートで表示されています。

図26-88 注文の出荷のプロジェクト・ガント・チャート

データ・コントロールを使用してプロジェクト・ガント・チャートを作成するには、プロジェクト・ガント・チャート・コンポーネントをデータ・コレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。

ヒント: プロジェクト・ガント・チャート・コンポーネントをコンポーネント・パレットからドラッグし、「プロジェクト・ガントの作成」ダイアログの入力を完了することでも、プロジェクト・ガント・チャートを作成できます。この方法では、コンポーネントをデータにバインドする前に、ガント・チャートのユーザー・インタフェースを設計できます。

データバインドされたプロジェクト・ガント・チャートを作成する手順:

1. 「データ・コントロール」パネルから、データ・コレクションを選択します。ガント・チャートでは、行セット・コレクション(タスクのフラット・リストを生成)または基本的なツリー・コレクション(タスクの階層リストを生成)を選択できます。

   図26-89に、「データ・コントロール」パネルでOrderShippingSummary1コレクションを選択し、注文の出荷の進行状況を表示するプロジェクト・ガント・チャートを作成する例を示します。

   図26-89 注文の出荷のデータ・コレクション

   
   

2. コレクションをJSFページにドラッグし、ポップアップ・メニューから「ガント」→「プロジェクト」を選択します。

3. 次に表示される「プロジェクト・ガントの作成」ダイアログで、次のようにして、ダイアログの上部にあるページ内のタスク関連のコントロールを、データ・コレクション内の対応する列にリンクします。

   1. ダイアログの上部にある「タスク」ページでは、「タスクID」、「開始時間」、「終了時間」の各コントロールに対応するデータ・コレクション内の列を選択します。ダイアログで「詳細の表示」をクリックして、データ・コレクションでコントロール「実際の開始」、「実際の終了」、「%完了」、「完了」、「クリティカル」、「コンテナ」に対応する列を追加で選択できます。

      オプションで、タスク・タイプにマップするデータ・コレクション内の列を選択できます。タスク・タイプをデータ・コレクション内の列にバインドしない場合、すべてのタスクはデフォルトで標準になります。タスク・タイプは、ガント・チャートにレンダリングされる際のタスクの棒の外観を制御します。

      プロジェクト・ガント・チャート・コンポーネントでは、サマリー、標準およびマイルストンのタスク・タイプがサポートされます。データ・コレクションは、これらのタスク・タイプを戻すように構成します。

   2. データ・コレクションにサブタスクのアクセッサがある場合は、ダイアログの「サブタスク」ページを使用してサブタスク・アクセッサを選択し、「サブタスクID」、「開始時間」、「終了時間」の各コントロールに対応するデータ・コレクション内の列を選択できます。オプションで、サブタスク・タイプにマップするデータ・コレクション内の列を選択できます。サブタスク・タイプをデータにバインドしない場合、すべてのサブタスクはデフォルトで標準になります。

      プロジェクト・ガント・チャート・コンポーネントでは、サマリー、標準およびマイルストンのタスク・タイプがサポートされます。データ・コレクションは、これらのタスク・タイプを戻すように構成します。

      サブタスクをバインドしないと、ガント・チャートはタスクの階層ビューをレンダリングできません。サブタスクをバインドすると、ガント・チャートの階層ビューでタスクからサブタスクにドリルダウンできます。

   3. データ・コレクションに依存タスクのアクセッサがある場合は、ダイアログの「依存タスク」ページを使用して依存タスク・アクセッサを選択し、「依存性のタイプ」、「元タスクID」、「先タスクID」の各コントロールに対応するデータ・コレクション内の列を選択できます。

      依存タスクは、終了時間と開始時間の間の依存性によってリンクされます。

      プロジェクト・ガント・チャート・コンポーネントでは、fs(終了から開始へ)、ss(開始から開始へ)、ff(終了から終了へ)およびsf(開始から終了へ)の依存性タイプがサポートされます。データ・コレクションは、これらの依存性タイプを戻すように構成します。

   4. データ・コレクションに分割タスクのアクセッサがある場合は、ダイアログの「分割タスク」ページを使用して分割タスク・アクセッサを選択し、「分割タスクID」、「開始時間」、「終了時間」の各コントロールに対応するデータ・コレクション内の列を選択できます。

   5. データ・コレクションに再帰タスクのアクセッサがある場合は、ダイアログの「再帰タスク」ページを使用して再帰タスク・アクセッサを選択し、「再帰タスクID」、「タイプ」、「開始時間」、「終了時間」の各コントロールに対応するデータ・コレクション内の列を選択できます。

   6. このダイアログの「外観」ページを使用して、タスク・バーの「ラベル」に対応する属性と、タスク・バーに関連付けるアイコンを3個まで指定します。

4. 「表の列」セクションでは、ガント・チャートのリスト・リージョンに表示される列を指定します。表示するそれぞれの列に対して、1行の情報を指定します。新規行を追加するには、「新規」アイコンを使用します。ガント・チャート・リストで列を表示する順序のとおりに行を配置するには、矢印アイコンを使用します。

   
   

   注意: 「表の列」セクションで指定する最初の行により、リスト・リージョンのノード・スタンプ列が指定されます。ノード・スタンプ列は、サブタスク・コレクションがある場合に開閉できる列です。

   
   

   各行について、次のアイテムを指定します。

   • ラベルの表示: ガント・チャート・リストの列のヘッダーの値を選択します。<default>を選択すると、ヘッダーのテキストはデータ・バインディングから自動的に取得されます。

   • 値バインディング: ガント・チャート・リストの列に使用するデータ・コレクション内の列を選択します。選択できる値は、タスク・グループの場合と同じです。

   • 使用するコンポーネント: ガント・チャート・リストのセルに表示するコンポーネントのタイプを選択します。デフォルトは、ADF出力テキスト・コンポーネントです。

5. 「OK」をクリックします。

6. ガント・チャートに凡例を含めるには、「構造」ウィンドウでproject Gantt chartノードを右クリックし、「dvt:projectGanttの中に挿入」→「凡例」を選択します。

   凡例には、それぞれの記号に関する情報と、各タスク・タイプを表すカラー・コード化された棒が示されます。また、ガント・チャートで選択されているタスクに関する詳細情報も示されます。

図26-90に、注文の出荷のデータ・コレクションからプロジェクト・ガント・ダイアログを作成する際に使用されるダイアログを示します。

図26-90 出荷された注文を示す「プロジェクト・ガントの作成」ダイアログ

データ・バインディング・ダイアログの完了後は、プロパティ・インスペクタを使用してプロジェクト・ガント・チャートの追加属性の値を指定できます。

26.9.2 データ・コントロールからのプロジェクト・ガント・チャートの作成時の処理

プロジェクト・ガント・チャートを「データ・コントロール」パネルからドロップすると、次の処理が行われます。

• ガント・チャートのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。

• UIコンポーネントに必要なコードをJSFページに追加します。

例26-40に、出荷された注文を表示するプロジェクト・ガント・チャートに生成された行セット・バインディングを示します。このコード例では、タスクおよびサブタスクについて、属性とともに定義されたノードがあることを示しています。また、依存タスク、分割タスクおよび再帰タスクについて、属性なしで定義されたノードがあります。

例26-40 プロジェクト・ガント・チャートのバインディング

<gantt IterBinding="OrderShippingSummary2Iterator"
       id="OrderShippingSummary2" xmlns="http://xmlns.oracle.com/adfm/dvt">
  <ganttDataMap>
    <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"/>
      </AttrNames>
      <Accessors>
        <Item Value="OrderShippingDetails" type="subTasks"/>
      </Accessors>
    </nodeDefinition>
    <nodeDefinition type="SubTasks"
                    DefName="oracle.fod.model.OrderShippingDetails">
      <AttrNames>
        <Item Value="OrderId" type="taskId"/>
        <Item Value="OrderDate" type="startTime"/>
        <Item Value="TaskType" type="subTaskType"/>
        <Item Value="ShippedDate" type="endTime"/>
      </AttrNames>
    </nodeDefinition>
    <nodeDefinition type="Dependents">
      <AttrNames/>
    </nodeDefinition>
    <nodeDefinition type="SplitTasks">
      <AttrNames/>
    </nodeDefinition>
    <nodeDefinition type="RecurringTasks">
      <AttrNames/>
    </nodeDefinition>
  </ganttDataMap>
</gantt>

例26-41に、ADFプロジェクト・ガント・チャートに対してJSFページで生成されるコードを示します。このタグ・コードには、プロジェクト・ガント・チャートの全体的な開始および終了時間に対する設定が含まれています。また、主軸(週)および副軸(日)に対するデフォルトの時間軸の設定も示されています。さらに、ガント・チャートのリスト・リージョンに表示される各列に対する指定もリストされています。簡潔にするため、OrderStatusCodeおよびShippedDateのaf:column要素のコードは省略されています。

例26-41 プロジェクト・ガント・チャートのJSFページのコード

<projectGantt id="projectGantt1"
              value="#{bindings.OrderShippingSummary2.projectGanttModel}"
              var="row" startTime="2008-05-17" endTime="2008-07-07"
              inlineStyle="width:100%; height:100%;">
  <f:facet name="major">
    <timeAxis scale="weeks"/>
  </f:facet>
  <f:facet name="minor">
    <timeAxis scale="days"/>
  </f:facet>
  <f:facet name="nodeStamp">
    <af:column sortProperty="FirstName" sortable="false"
             headerText="#{bindings.OrderShippingSummary2.hints.FirstName.label}">
      <af:outputText value="#{row.FirstName}"/>
    </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>

26.9.3 プロジェクト・ガント・チャートのサマリー・タスクに関する必知事項

サマリー・タスクは、タスクのグループ(通常はサブタスク)に対する開始時間と終了時間を示します。サマリー・タスクの移動や拡張はできません。ただし、いずれかのサブタスクの日付が変更された場合は、アプリケーションでサマリー・タスクの時間を再計算する必要があります。

タスク期間の変更を検出するには、メソッド・バインディング式をガント・チャート・コンポーネントのDataChangeListener属性に指定してイベント・ハンドラを登録します。ガント・チャートのデータを変更する可能性のある処理が発生すると、タイプがoracle.adf.view.faces.bi.event.DataChangeEventのイベントが起動されます。このイベントには、データ変更に関する情報が含まれ、登録済のイベント・リスナーに対して起動されます。このリスナーにより、新しい値の検証および基礎となるデータ・モデルの更新が行われます。

更新が完了すると、ガント・チャートは古いデータ(更新が失敗した場合)または新しいデータでリフレッシュされます。ガント・チャートでは部分ページ・レンダリングを使用するため、ガント・チャートのみがリフレッシュされ、ページ全体はリフレッシュされません。

26.9.4 プロジェクト・ガント・チャートのパーセント完了に関する必知事項

パーセント完了は、タスクの完了率を示す内部の棒として表すことができます。内部の棒の長さは、データ・オブジェクトによって返されるパーセント完了に基づいて計算されます。

プロジェクト・ガント・チャートのデータ・バインディング・ダイアログには、パーセント完了値を入力できるコントロールはありませんが、パーセント完了のレンダリングにはこの値が必要です。ただし、ガント・チャート・データ・オブジェクトにはpercentComplete属性が含まれています。

パーセント完了の整数を指定するには、タイプがTasksであるnodeDefinitionに新しい属性マッピングを追加する必要があります。たとえば、データ・コレクションにPercentDoneという名前の列がある場合、属性マッピングは<Item Value="PercentDone" type="percentComplete"/>のようになります。

例26-42に、例26-40で示したプロジェクト・ガント・チャート・バインディングのうち、タイプがTasksのnodeDefinitionのデータ・バインディング・コードに追加されたパーセント完了の属性マッピングを示します。

例26-42 パーセント完了を使用したプロジェクト・ガント・チャートのバインディング

<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>

パーセントではなく日付を指定できるようにする別の属性(completedThrough)があります。ガント・チャート・データ・オブジェクトは、completedThrough属性が参照する日付に基づいてパーセント完了を計算します。たとえば、データ・コレクションにPercentDoneという名前の列がある場合、属性マッピングは<Item Value="PercentDone" type="completedThrough"/>のようになります。

26.9.5 プロジェクト・ガント・チャートの分散に関する必知事項

分散は、2つの水平な棒でレンダリングされます。一方の棒は、タスクの基本の(元の)開始および終了時間を表します。他方の棒は、タスクの実際の開始および終了時間を表します。プロジェクト・ガント・チャートのデータ・バインディング・ダイアログで、基本の開始時間と終了時間に対するバインディング情報を入力します。

ガント・チャートのデータ・バインディング・ダイアログには、ガント・チャートの実際の開始時間と終了時間を入力できるコントロールはありませんが、分散のレンダリングにはこの値が必要です。ただし、ガント・チャート・データ・オブジェクトにはactualStartおよびactualEnd属性が含まれています。

実際の開始および終了時間を指定するには、2つの新しい属性マッピングをタイプがTasksのnodeDefinitionに追加する必要があります。たとえば、データ・コレクションにActualStartDateおよびActualEndDateという名前の列がある場合、属性マッピングは例26-43のようになります。

例26-43 実際の開始および終了の属性マッピング

<Item Value="ActualStartDate" type="actualStart"/>
<Item Value="ActualEndDate" type="actualEnd"/>

例26-44に、プロジェクト・ガント・チャートのタイプがTasksのnodeDefinitionのデータ・バインディング・コードに追加された実際の開始および終了の属性マッピングを示します。

例26-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>

26.9.6 データバインドされたリソース使用率ガント・チャートの作成方法

リソース使用率ガント・チャートでは、リソースのID、時間のID、リソース使用率の開始および終了時間を指定する必要があります。オプションで、サブリソースのデータ値を指定できます。

リソース使用率ガント・チャートは、主および副時間軸の値に対するデフォルト値を使用して表示されます。リソース使用率ガント・チャートでは、主時間軸はデフォルトで週に設定され、副時間軸は日に設定されます。

図26-91は、各リソースと、リソースの使用中に表示できる関連付けられたカレンダを示すリソース使用率ガント・チャートを示しています。

図26-91 リソース使用率ガント・チャート

データ・コントロールを使用してリソース使用率ガント・チャートを作成するには、リソース使用率コンポーネントをデータ・コレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグしてJSFページにドロップし、宣言的にこの処理を実行できます。

ヒント: リソース使用率ガント・チャート・コンポーネントをコンポーネント・パレットからドラッグし、「リソース使用率ガントの作成」ダイアログの入力を完了することでも、リソース使用率ガント・チャートを作成できます。この方法では、コンポーネントをデータにバインドする前に、ガント・チャートのユーザー・インタフェースを設計できます。

リソース使用率ガント・チャートを作成する手順:

1. 「データ・コントロール」パネルから、データ・コレクションを選択します。ガント・チャートでは、行セット・コレクションまたは基本的なツリー・コレクションを選択できます。

   図26-92に、「データ・コントロール」パネルでGanttRugResourcesView1コレクションを選択し、リソースの使用率を表示するリソース使用率ガント・チャートを作成する例を示します。

   図26-92 リソース使用率のデータ・コレクション

   
   

2. コレクションをJSFページにドラッグし、ポップアップ・メニューから「ガント」→「リソース使用率」を選択します。

3. 「リソース使用率ガントの作成」ダイアログで、リソースおよび時間関連のコントロールを、データ・コレクション内の対応する列にリンクします。

   1. 「リソースID」では、リソースの一意のIDに対応するデータ・コレクション内の列を選択します。

   2. 「時間バケット」ページでは、リソースに割り当てられた時間バケットを含む「バケット・アクセッサ」ドロップダウン・リストから値を選択し、時間の単位に対応する「バケット日」ドロップダウン・リストから値を選択します。

   3. 「バケット・メトリック」リストでは、必要に応じて、時間バケット内のバーとして表示される属性を指定することができます。「バケット・メトリック」リストで指定した属性はバーの高さの計算に使用されるため、個々の属性は数値タイプでなければなりません。

   4. 「表の列」リストでは、分割線の左側のリソース使用率ガント・チャートのリスト・リージョンに表示される列を指定します。表示するそれぞれの列に対して、1行の情報を指定します。新規行を追加するには、「新規」アイコンを使用します。リソース使用率リストで列を表示する順序のとおりに行を配置するには、矢印アイコンを使用します。各行に、ラベルの表示、値バインディングおよび使用するコンポーネントの値を指定します。

   5. データ・コレクションにサブリソースのアクセッサがある場合は、「サブリソース」ページを使用してサブリソース・アクセッサおよびリソースIDを選択できます。

4. 「OK」をクリックします。

   図26-93に、プロジェクトで使用可能なリソースのデータ・コレクションからリソース使用率ガント・チャートを作成するために使用するダイアログを示します。

   図26-93 リソース使用率ガント・チャートの作成

   
   

26.9.7 リソース使用率ガント・チャート作成時の処理

リソース使用率ガント・チャートを「データ・コントロール」パネルからJSFページにドロップすると、次の処理が行われます。

• リソース使用率ガント・チャートのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。

• UIコンポーネントに必要なコードをJSFページに追加します。

例26-45に、図26-93に示すリソース使用率ガント・チャートに生成された行セット・バインディングを示します。

例26-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>

例26-46に、リソース使用率ガント・チャートに対してJSFページで生成されるコードを示します。このタグ・コードには、リソース使用率ガント・チャートの全体的な開始および終了時間に対する設定が含まれています。これらの設定は手動で編集する必要があります。また、主時間軸(週)および副時間軸(日)に対する時間軸の設定も示されています。さらに、リソース使用率ガント・チャートのリスト・リージョンに表示される各列に対する指定もリストされています。

例26-46 リソース使用率ガント・チャートのJSFページのコード

<dvt:resourceUtilizationGantt id="resourceUtilizationGantt1"
    value="#{bindings.GanttRugResourcesView2.resourceUtilizationGanttModel}"
    var="row"
    metrics="#{bindings.GanttRugResourcesView2.metrics}"
    taskbarFormatManager="#{bindings.GanttRugResourcesView2.
                            resourceUtilizationGanttTaskbarFormatManager}"
    startTime="2008-07-03"
    endTime="2008-07-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>

26.9.8 データバインドされたスケジュール・ガント・チャートの作成方法

スケジュール・ガント・チャートでは、リソースのID、タスクのID、タスクの開始および終了時間を指定する必要があります。オプションで、サブリソース、再帰タスク、分割タスクおよびタスク間の依存性のデータ値を指定できます。

スケジュール・ガント・チャートは、全体的な開始および終了時間と、主および副時間軸の値に対するデフォルト値を使用して表示されます。スケジュール・ガント・チャートでは、主時間軸はデフォルトで週に設定され、副時間軸は日に設定されます。

図26-94は、各リソースと、そのリソースが担当するすべての注文をリストするスケジュール・ガント・チャートを示しています。プロジェクト・ガント・チャートでは各タスクが個別の線上にリストされますが、スケジュール・ガント・チャートでは特定のリソースのすべてのタスクが同じ線上に表示されます。

図26-94 注文の出荷のスケジュール・ガント・チャート

データ・コントロールを使用してスケジュール・ガント・チャートを作成するには、schedulingGanttタグをデータ・コレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。

データバインドされたスケジュール・ガント・チャートを作成する手順:

1. 「データ・コントロール」パネルから、データ・コレクションを選択します。ガント・チャートでは、行セット・コレクションまたは基本的なツリー・コレクションを選択できます。

   図26-95に、Personsデータ・コレクションを選択し、各リソースが担当する注文を表示するスケジュール・ガント・チャートを作成する例を示します。

   図26-95 リソースのデータ・コレクション

   
   

2. コレクションをJSFページにドラッグし、ポップアップ・メニューから「ガント」→「スケジュール」を選択します。

3. 次に表示される「スケジュール・ガントの作成」ダイアログで、次のようにして、ダイアログの上部にあるリソースおよびタスク関連のコントロールを、データ・コレクション内の対応する列にリンクします。

   1. 「リソースID」では、リソースの一意のIDに対応するデータ・コレクション内の列を選択します。

   2. 「タスク」ページでは、リソースに割り当てられたタスクを含む「タスク・アクセッサ」ドロップダウン・リストから値を選択します。「タスクID」、「開始時間」および「終了時間」の各コントロールに対応するデータ・コレクション内の列を選択します。オプションで、タスク・タイプにマップするデータ列を指定できます。タスク・タイプをデータにバインドしない場合、すべてのタスク・タイプはデフォルトで標準になります。

   3. データ・コレクションに依存タスクを保持するアクセッサがある場合は、ダイアログの「依存タスク」ページを使用して依存タスク・アクセッサを選択し、「依存性のタイプ」、「元タスクID」、「先タスクID」の各コントロールに対応するデータ・コレクション内の列を選択できます。

   4. データ・コレクションに分割タスクのアクセッサがある場合は、ダイアログの「分割タスク」ページを使用して分割タスク・アクセッサを選択し、「分割タスクID」、「開始時間」、「終了時間」の各コントロールに対応するデータ・コレクション内の列を選択できます。

   5. データ・コレクションに再帰タスクのアクセッサがある場合は、ダイアログの「再帰タスク」ページを使用して再帰タスク・アクセッサを選択し、「再帰タスクID」、「タイプ」、「開始時間」、「終了時間」の各コントロールに対応するデータ・コレクション内の列を選択できます。

   6. データ・コレクションにサブリソース(下位レベルのリソース)のアクセッサがある場合は、「サブリソース」ページを使用して適切なアクセッサを指定し、サブリソースの一意のIDを含むデータ列を選択できます。

      たとえば、管理者がリソースで、管理者の直属の部下がサブリソースになる場合があります。データにサブリソースが含まれる場合は、リソースを開いてサブリソースを検索することができます。

4. 「表の列」セクションでは、分割線の左側のガント・チャートのリスト・リージョンに表示される列を指定します。表示するそれぞれの列に対して、1行の情報を指定します。新規行を追加するには、「新規」アイコンを使用します。ガント・チャート・リストで列を表示する順序のとおりに行を配置するには、矢印アイコンを使用します。各行について、次のアイテムを指定します。

   • ラベルの表示: ガント・チャート・リストの列のヘッダーの値を選択します。<default>を選択すると、ヘッダーのテキストはデータ・バインディングから自動的に取得されます。

   • 値バインディング: ガント・チャート・リストの列に使用するデータ・コレクション内の列を選択します。選択できる値は、タスク・グループの場合と同じです。

   • 使用するコンポーネント: ガント・チャート・リストのセルに表示するコンポーネントのタイプを選択します。デフォルトは、「ADF出力テキスト」コンポーネントです。

5. 「OK」をクリックして、「スケジュール・ガントの作成」ダイアログを閉じます。

6. JSFページの「構造」ウィンドウでdvt:schedulingGantt要素を選択し、プロパティ・インスペクタでdvt:schedulingGantt要素の次の属性に対して日付を設定します。

   • StartTime

   • EndTime

   指定した日付により、実行時にスケジュール・ガント・チャートに表示される初期ビューが決定されます。

図26-96に、注文の出荷を担当するリソースのデータ・コレクションからスケジュール・ガント・チャートを作成する際に使用されるダイアログを示します。

図26-96 「スケジュール・ガントの作成」ダイアログ

26.9.9 スケジュール・ガント・チャート作成時の処理

スケジュール・ガント・チャートを「データ・コントロール」パネルからドロップすると、次の処理が行われます。

• ガント・チャートのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。

• UIコンポーネントに必要なコードをJSFページに追加します。

例26-47に、リソースおよび出荷された注文を表示するスケジュール・ガント・チャートに生成された行セット・バインディングを示します。

例26-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>

例26-48に、スケジュール・ガント・チャートに対してJSFページで生成されるコードを示します。このタグ・コードには、スケジュール・ガント・チャートの全体的な開始および終了時間に対する設定が含まれています。また、主時間軸(月)および副時間軸(週)に対する時間軸の設定も示されています。さらに、ガント・チャートのリスト・リージョンに表示される各列に対する指定もリストされています。簡潔にするため、MembershipId、EmailおよびPhoneNumberのaf:column要素のコードは省略されています。

例26-48 スケジュール・ガント・チャートのJSFページのコード

<dvt:schedulingGantt id="schedulingGantt1"
     value="#{bindings.Persons.schedulingGanttModel}"
     var="row" startTime="2008-03-29"
     endTime="2008-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>

26.10 データバインドされた時系列の作成

時系列は、ユーザーが日付ベースのイベントを時間順に表示し、定義された時間範囲内を簡単に前後に移動することを可能にする対話型のデータ視覚化ツールです。二重時系列を使用して、イベントの対照比較を行うことができます。たとえば、時系列を使用して従業員の入社日を表示したり、二重時系列を使用して2人の従業員の複数の人事管理イベントを比較したりすることができます。

時系列は、時間軸に沿った時系列項目としての各イベントの表示、時系列内に表示可能な期間に対応した移動可能な概要ウィンドウ、および時系列に対する合計時間増分を表示する概要時間軸から構成されます。水平ズーム制御を使用して、表示可能な時間範囲を変更できます。イベントに対応する時系列項目には、関連付けられた情報またはアクションが表示され、時系列内のイベントの日付に接続されています。時系列項目は、概要パネル内のマーカーにより表されます。時系列コンポーネントでは、3つ以上のイベント系列はサポートされていません。

図26-97に、従業員の入社日を時間順に表示した時系列を示します。この例では、各イベントを表す時系列アイテムに、イメージとラベル付きテキストを使用して従業員に関する情報を表示しています。選択が構成されている場合は、時系列アイテム、引出線、および概要パネルのイベント・マーカーが強調表示されます。

図26-97 従業員の入社日の時系列

図26-98に、2人の従業員の複数の人事管理イベントを比較する二重時系列を示します。時間軸は2つのイベント系列の間に配置され、概要パネルは時系列の一番下に表示されています。

図26-98 2人の従業員のイベントを示す二重時系列

時系列項目の内容、マーカーの表示および時間軸は構成可能です。時系列のユースケース、エンド・ユーザーとプレゼンテーション機能、タグ構造および時系列への特殊機能の追加に関する詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「時系列コンポーネントの使用方法」を参照してください。

26.10.1 ADFデータ・コントロールを使用した時系列の作成方法

時系列に表示されるデータは、データ・コレクションに基づいています。timelineコンポーネントは、モデルを使用して、基になるリストのデータにアクセスします。固有のモデル・クラスはoracle.adf.view.rich.model.CollectionModelです。java.util.List、java.util.Arrayおよびjavax.faces.model.DataModelなど、その他のモデル・インスタンスも使用できます。データ・レイヤーではインスタンスがCollectionModelに自動的に変換されます。

時系列イベントに関する情報をデータ・コレクションのデータ行に関連付けるには、スタンプを使用します。スタンプを使用すれば、データ・モデル内の各データ行をイベントに対して表示できます。スタンプを使用する場合、時系列のすべての項目に対して子コンポーネントが作成されるわけではありません。むしろ、コンポーネントのコンテンツは、データ属性ごとに1回、繰り返しレンダリング(スタンプ)されます。

Oracle ADFのデータ・コントロールを使用すると、JDeveloperでは宣言的なタスクとなります。「データ・コントロール」パネルから、1つ(または2つ)のイベント系列を生成するデータ・コレクションをドラッグして、JSFページにドロップします。

始める前に:

時系列について理解しておくと役立ちます。詳細は、26.10項「データバインドされた時系列の作成」を参照してください。

次のタスクを完了する必要があります。

• 9.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。

• 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のJSF JSPページの作成方法に関する項の手順に従い、JSFページを作成します。

「データ・コントロール」パネルを使用して時系列を作成するには:

1. 「データ・コントロール」パネルから、コレクションを選択します。

   図26-99は、図26-99の時系列に対するデータ・コレクションを示しています。この例では、アプリケーションはSEmpView1データ・コレクションを使用して時系列を作成します。

   図26-99 時系列に対するサンプル・データ・コレクション

   
   

2. コレクションをJSFページにドラッグし、ポップアップ・メニューから「時系列」を選択します。

3. 「時系列の作成」ウィザードの「時系列の系列データの構成」ページで次の値を設定することにより、1つ以上(二重時系列の場合は2つ)の時系列に対する時系列データ・モデルを構成します。

   1. 系列値: ドロップダウン・リストを使用して、時系列で使用するデータ・コレクションを選択します。デフォルトでは、「データ・コントロール」パネルから挿入したデータ・コレクションが表示されます。該当する日付ベースの属性を1つ以上含むアプリケーション・モジュールからのデータ・コレクションのリストが、選択用に自動的に表示されます。

   2. アイテム・データ値: ドロップダウン・リストを使用して、時系列内にスタンプされる時系列項目に対して使用する日付ベースの属性を選択します。「系列値」で参照されるデータ・コレクション内の該当するすべての属性が選択用に自動的に表示されます。

   3. グループ: オプションで、ドロップダウン・リストを使用して、項目日付値が同一の場合に時系列項目をグループ化するために使用する属性を選択します。すべてのデータ・コレクション属性が選択用に自動的に表示されます。

      「式ビルダー」を選択してEL式を作成することにより、実行時に属性のグループ化を指定することもできます。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。

4. データ・モデルとして構成した時系列の系列ごとに、系列を選択し、時系列項目の表示属性に対して次の値を設定します。

   1. イメージ: オプションで、時系列項目にスタンプするイメージ・ファイルへの相対パスを入力するか、「検索」アイコンを使用して「イメージ・ファイルの選択」ダイアログを開き、イメージ・ソースに移動します。

      「式ビルダー」を選択して、実行時に評価されてイメージ・ファイルの場所を特定するEL式を構成することもできます。

      
      

      注意: 時系列項目内のイメージのサイズを変更する必要がある場合は、ソース・コードで、または「プロパティ・インスペクタ」で宣言的に、af:imageコンポーネントのInlineStyle属性を指定します。たとえばこの例では、inlineStyle="width:85px;height:100px;"と指定します。

      
      

   2. コンポーネント: ドロップダウン・リストから、時系列項目内に属性テキストを表示するために使用するADF Facesコンポーネントを選択します。書式設定されていないテキストを表示するoutputTextまたはテキストを表示して限られた範囲の書式設定オプションを設定できるoutputFormattedを選択できます。「ラベル」値を使用して、いずれかの出力テキスト・オプションにラベルを関連付けることも選択できます。

   3. 値: ドロップダウン・リストから、時系列項目内に表示する属性値を選択します。選択した時系列の系列に対するデータ・コレクション内のすべての属性が自動的に表示されます。

   4. ラベル: 表示属性に対する「コンポーネント」値でラベル付きのADF Facesコンポーネントを指定した場合は、このオプションを使用できます。デフォルトの「属性名の使用」テキストを使用するか、リソース・バンドルからのテキスト・リソースを指定するか、EL式ビルダーを使用して実行時にラベル・テキストを評価できます。ラベルは、実行時に時系列項目に表示されます。

   たとえば、図26-97の時系列に対する時系列の系列と表示属性を指定するには、図26-100に示すように、「時系列の作成」ウィザードの「時系列の系列データの構成」ページを構成します。

   図26-100 「時系列の作成」ウィザードの「時系列の系列データの構成」ページ

   
   

5. 「次へ」をクリックしてウィザードの次のページに進むか、「終了」をクリックしてデータ・バインディングの定義を完了するか、「取消」をクリックして時系列の作成を終了します。

6. 「時系列の作成」ウィザードの「イベント・マーカーの構成」ページで、データ・モデルとして構成した時系列の系列ごとに、系列を選択し、イベント・マーカーに対する次のオプションの値を設定します。

   1. 「色」: イベント・マーカーの塗りつぶし色を指定します。ドロップダウン・リストを使用して使用可能な色を選択するか、アイコンをクリックしてカラー・ピッカー・ダイアログを表示できます。デフォルトでは、どの色も指定されません。

   2. 不透明度: マーカーの塗りつぶし色の不透明度を指定します。有効値の範囲は、0パーセント(透明)から100パーセント(不透明)です。

   3. 標準図形: 選択した各時系列の系列値に対する概要マーカーの形状を指定します。ドロップダウン・リストから、7つの事前作成図形の内の1つを選択して、概要マーカーの形状を指定します。有効な値は、circle(デフォルト)、diamond、human、plus、square、triangleDownおよびtriangleUpです。

   4. スケールX/スケールY: 概要マーカーをデフォルト・サイズから変更するための水平(scaleX)および垂直(scaleY)スケール係数を入力します。有効値は、0から100パーセントまでの数値パーセンテージです。マーカーが大きすぎる場合は、時系列の概要エリアに収まるようにマーカーのサイズが自動的に変更されます。

   たとえば、図26-97の時系列に対する時系列の概要系列マーカーを指定するには、図26-101に示すように、「時系列の作成」ウィザードの「イベント・マーカーの構成」ページを構成します。

   図26-101 「時系列の作成」ウィザードの「イベント・マーカーの構成」ページ

   
   

7. 「戻る」をクリックしてウィザードの前のページに戻るか、「次へ」をクリックしてウィザードの次のページに進むか、「終了」をクリックしてデータ・バインディングの定義を完了するか、「取消」をクリックして時系列の作成を終了します。

8. 「時系列の作成」ウィザードの「時間範囲とタイム・スケールの構成」ページで次の値を設定することにより、時間軸と概要軸を構成します。

   1. 開始時間: yyyy-mm-ddフォーマットを使用して、時系列の時間範囲に使用する開始日を入力します。時系列に表示したいデータ・コレクションのイベントが含まれるような開始日を選択します。ドロップダウン・リストから「現在の日付」を選択できます。カレンダ・アイコンをクリックして日付ピッカー・ダイアログを表示することもできます。デフォルト値は現在の日付です。

   2. 終了時間: yyyy-mm-ddフォーマットを使用して、時系列の時間範囲に使用する終了日を入力します。時系列に表示したいデータ・コレクションのイベントが含まれるような終了日を選択します。ドロップダウン・リストから「現在の日付」を選択できます。カレンダ・アイコンをクリックして日付ピッカー・ダイアログを表示することもできます。デフォルト値は現在の日付です。

   3. 軸スケール: ドロップダウン・リストを使用して、時系列の時間軸で使用するタイム・スケールを選択します。時間軸は、時系列に対する現在の時間増分を示します。

      「概要スケール」よりも小さなタイム・スケールを使用する必要があります。たとえば、概要スケールがmonthsに設定されている場合に、軸スケールをyearsに設定することはできません。カスタム軸スケールを指定することもできます。

      有効値は、twoyears、years、halfyears、quarters(デフォルト)、twomonths、months、twoweeks、weeks、days、sixhours、threehours、hours、halfhoursおよびquarterhoursです。カスタム軸スケールを指定することもできます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の時系列の表示要素のカスタマイズに関する項を参照してください。

   4. 概要スケール: ドロップダウン・リストを使用して、時系列の概要軸で使用するタイム・スケールを選択します。概要軸は、時系列に含まれる合計時間増分を示します。

      有効値は、twoyears、years(デフォルト)、halfyears、quarters、twomonths、months、twoweeks、weeks、days、sixhours、threehours、hours、halfhoursおよびquarterhoursです。カスタム軸スケールを指定することもできます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の時系列の表示要素のカスタマイズに関する項を参照してください。

   たとえば、図26-97の時系列に対する時系列の軸と概要時間範囲を指定するには、図26-102に示すように、時系列の作成ウィザードの「時間範囲とタイム・スケールの構成」ページを構成します。

   図26-102 「時系列の作成」ウィザードの「時間範囲とタイム・スケールの構成」ページ

   
   

9. 「戻る」をクリックしてウィザードの前のページに戻るか、「終了」をクリックしてデータ・バインディングの定義を完了するか、「取消」をクリックして時系列の作成を終了します。

26.10.2 データ・コントロールを使用した時系列作成時の処理

ADFデータ・コントロールを使用して時系列を作成すると、JDeveloperにより、次が実行されます。

• 時系列に対するバインディングがJSFページのページ定義ファイルに定義されます。

• DVT時系列コンポーネント用のコードがJSFページに挿入されます。

例26-49に、図26-97の時系列に対するJSFページのページ定義ファイルで定義されているバインディングを示します。

例26-49 ページ定義ファイルのXMLバインディング

<bindings>
  <tree IterBinding="SEmpView1Iterator" id="SEmpView1" ChangeEventPolicy="ppr">
    <nodeDefinition DefName="model.SEmpView" Name="SEmpView1">
      <AttrNames>
        <Item Value="DeptId"/>
        <Item Value="FirstName"/>
        <Item Value="Id"/>
        <Item Value="LastName"/>
        <Item Value="StartDate"/>
      </AttrNames>
    </nodeDefinition>
  </tree>
</bindings>

例26-50に、図26-97に例示された時系列の場合の、JSFページに挿入されるコードを示します。

例26-50 時系列コンポーネントのサンプル・コード

<dvt:timeline id="tl1" startTime="2010-01-01" endTime="2012-12-31"
      itemSelection="multiple">
  <dvt:timelineSeries id="ts1" var="evt"
        value="#{bindings.SEmpView1.collectionModel}">
    <dvt:timelineItem value="#{evt.StartDate}" id="ti1" group="#{evt.DeptId}">
      <af:panelGroupLayout id="pg1" layout="horizontal">
        <af:image id="img1" source="images/#{evt.Id}.png"
            inlineStyle="width:85px;height:100px;"/>
        <af:spacer width="3" id="s1"/>
        <af:panelGroupLayout id="pg2" layout="vertical">
          <af:panelLabelAndMessage id="plam1"
                                   label="#{viewcontrollerBundle.EMPLOYEE_ID}">
            <af:outputText id="ot1" value="#{evt.Id}" noWrap="true">
              <af:convertNumber groupingUsed="false" pattern=
                                "#{bindings.SEmpView1.hints.Id.format}"/>
              </af:outputText>
          </af:panelLabelAndMessage>
          <af:panelLabelAndMessage id="plam2"
                                   label="#{viewcontrollerBundle.FIRST_NAME}">
            <af:outputText id="ot2" value="#{evt.FirstName}" noWrap="true"/>
          </af:panelLabelAndMessage>
          <af:panelLabelAndMessage id="plam3"
                                   label="#{viewcontrollerBundle.LAST_NAME}">
            <af:outputText id="ot3" value="#{evt.LastName}" noWrap="true"/>
          </af:panelLabelAndMessage>
          <af:panelLabelAndMessage id="plam4"
                                   label="#{viewcontrollerBundle.DEPARTMENT_ID}">
            <af:outputText id="ot4" value="#{evt.DeptId}" noWrap="true">
              <af:convertNumber groupingUsed="false" pattern=
                                "#{bindings.SEmpView1.hints.DeptId.format}"/>
            </af:outputText>
          </af:panelLabelAndMessage>
        </af:panelGroupLayout>
      </af:panelGroupLayout>
      <f:facet name="overviewItem">
        <dvt:marker id="m1" fillColor="#ff0000"/>
      </f:facet>
    </dvt:timelineItem>
  </dvt:timelineSeries>
  <dvt:timeAxis id="ta1" scale="months"/>
  <dvt:timelineOverview id="ov1">
    <dvt:timeAxis id="ta2" scale="halfyears"/>
  </dvt:timelineOverview>
</dvt:timeline>

26.10.3 データ・コントロールを使用した二重時系列の作成に関する必知事項

「データ・コントロール」パネルを使用して二重時系列を作成する際には、2つの時系列の系列に対して同じまたは異なるデータ・コレクションを構成できます。またそれぞれに対して、時系列項目の表示属性および概要マーカーを指定できます。「時系列の作成」ウィザードに、該当する日付ベースの属性を1つ以上含むアプリケーション・モジュールからのデータ・コレクションのリストが、選択用に自動的に表示されます。

例26-51に、図26-98の二重時系列に対するサンプル・コードを示します。

例26-51 二重時系列のサンプル・コード

<dvt:timeline id="tl1" startTime="2000-01-01" endTime="2011-12-31"
      inlineStyle="width:1024px;height:500px" itemSelection="single"
      currentTime="2010-04-01">
  <dvt:timelineSeries id="ts1" var="evt" value="#{timeline.firstModel}"
        contentDelivery="lazy">
    <dvt:timelineItem id="ti1" value="#{evt.date}" group="#{evt.group}">
      <af:panelGroupLayout id="pg1" layout="horizontal">
        <af:image id="img1" inlineStyle="width:30px;height:30px"
               source="/resources/images/timeline/#{evt.type}.png"/>
        <af:spacer width="3"/>
          <af:panelGroupLayout id="pg2" layout="vertical">
            <af:outputText id="ot1" inlineStyle="color:#084B8A"
                  value="#{evt.description}" noWrap="true"/>
            <af:outputText id="ot2" value="#{evt.date}"
                  inlineStyle="color:#6e6e6e" noWrap="true">
            <af:convertDateTime dateStyle="medium"/>
            </af:outputText>
          </af:panelGroupLayout>
      </af:panelGroupLayout>
        <f:facet name="overviewItem">
          <dvt:marker id="m1" shape="circle" fillColor="#ff0000"/>
        </f:facet>
    </dvt:timelineItem>
  </dvt:timelineSeries>
  <dvt:timelineSeries id="ts2" var="evt" value="#{timeline.secondModel}"
        contentDelivery="lazy">
    <dvt:timelineItem id="ti2" value="#{evt.date}">
      <af:panelGroupLayout id="pg2" layout="horizontal">
        <af:image id="img2" inlineStyle="width:30px;height:30px"
              source="/resources/images/timeline/#{evt.type}.png"/>
        <af:spacer width="3"/>
          <af:panelGroupLayout id="pg3" layout="vertical">
            <af:outputText id="ot3" inlineStyle="color:#084B8A"
                  value="#{evt.description}" noWrap="true"/>
            <af:outputText id="ot4" value="#{evt.date}"
                  inlineStyle="color:#6e6e6e" noWrap="true">
            <af:convertDateTime dateStyle="medium"/>
            </af:outputText>
          </af:panelGroupLayout>
        </af:panelGroupLayout>
        <f:facet name="overviewItem">
          <dvt:marker id="m2" shape="circle" fillColor="#0000ff"/>
        </f:facet>
      </dvt:timelineItem>
    </dvt:timelineSeries>
    <dvt:timeAxis id="ta1" scale="quarters"/>
      <dvt:timelineOverview id="ov1">
        <dvt:timeAxis id="ta2" scale="years"/>
      </dvt:timelineOverview>
</dvt:timeline>

コンポーネントのデータ要件、タグ構造および外観と動作のカスタマイズ・オプションに関する詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「時系列コンポーネントの使用方法」を参照してください。

26.11 データバインドされた階層ビューアの作成

階層ビューアは、データ内に親子関係の存在するデータを視覚的に表現するADFデータ視覚化コンポーネントです。たとえば、組織図、ネットワーク・ダイアグラム、ソーシャル・ネットワークなどを表示する場合には、このコンポーネントが有益です。

階層ビューアでは、ノードと呼ばれる形状を使用して、階層内のデータを参照します。ノードの形状とコンテンツは、ノードの視覚的レイアウトと同様に構成可能です。ノードは、1つのパネル・カード内に複数のビューを表示できます。

図26-103に、組織図をレンダリングする階層ビューア・コンポーネントの実行時ビューを示します。

図26-103 組織図をレンダリングする階層ビューア・コンポーネント

図26-104に、階層ビューアの作成に使用できる、階層ビューアのタイプが表示されたコンポーネント・ギャラリを示します。

図26-104 階層ビューア・タイプのコンポーネント・ギャラリ

作成する階層ビューア・コンポーネント(dvt:hierarchyViewer)はそれぞれ次の要素を持つことができます。

• 1つ以上のノード要素(dvt:node)

• 1つ以上のリンク要素(dvt:link)

階層ビューア・コンポーネントとともに、必要に応じて、カード要素(dvt:panelCard)を使用することもできます。パネル・カードは、アニメーションを使用して、ノード要素で参照される複数のコンテンツ・セットを動的に切り替える方法を提供します。たとえば、コンテンツを水平方向にスライドさせたり、ノードをめくったりできます。

データ・バインディングの完了後に階層ビューアをカスタマイズする方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「階層ビューア・コンポーネントの使用方法」を参照してください。

26.11.1 データバインドされた階層ビューアの作成方法

階層ビューアは、1つ以上のディテール・コレクションと1つのマスター・データ・コレクションとの間にマスター/ディテール関係が存在するデータ・コレクションに基づいています。Oracle ADFのデータ・コントロールを使用すると、JDeveloperでは宣言的なタスクとなります。「データ・コントロール」パネルから、1つ以上のルート・ノードを生成するデータ・コレクションをドラッグして、JSFページにドロップします。

始める前に:

次のタスクを完了する必要があります。

• 9.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。

  たとえば、図26-103の階層ビューアのデータは、架空の組織の従業員データを含む単一の表に由来しています。図26-105に、データベース・ナビゲータのSEmp表構造を示します。この例では、各従業員の管理者は、MANAGER_ID列の値によって識別されます。

  図26-105 従業員情報を示すSEmp表

  
  

  SEmp表を使用して管理者と従業員との間の階層関係を設定し、最上位レベルの従業員を階層のルートとして設定するには、次の手順を実行します。

  1. SEmp表に基づくエンティティ・オブジェクトを作成します。

     図26-106は、SEmp表に基づいたSEmpエンティティ・オブジェクトです。エンティティ・オブジェクトの属性は、SEmp表の列に対応します。エンティティ・オブジェクトの作成を支援する情報は、第4章「エンティティ・オブジェクトを使用したビジネス・ドメイン・レイヤーの作成」を参照してください。

     図26-106 SEmpエンティティ・オブジェクト

     
     

  2. SEmp.IdとSEmp.ManagerIDのアソシエーションを作成し、従業員と管理者との間の関係を確立します。

     図26-107に、SEmpManagerIdFkAssocを示します。アソシエーションに関する詳細は、4.2項「エンティティ・オブジェクトおよびアソシエーションの作成」を参照してください。

     図26-107 管理者と従業員との間のアソシエーション

     
     

  3. 管理者と従業員との間の階層を確立するには、SEmpManagerIdFkAssocアソシエーションに基づいて、管理者と従業員との間にビュー・リンクを作成します。

     図26-108に、SEmpManagerIDFKLinkビュー・リンクを示します。ビュー・リンクを使用してマスター/ディテール関係を確立する方法の詳細は、5.7項「再帰的なマスター/ディテール階層における単一表の使用」を参照してください。

     図26-108 管理者と従業員との間のビュー・リンク

     
     

  4. データ・コレクションからルート値を取得するビュー・オブジェクトを作成します。

     たとえば、図26-103に示された階層ビューアでは、Carmen Velasquezが最も上位の管理者で、従業員ID 1を持っています。この例を複製するには、IDが1である従業員を取得してビュー・オブジェクトを作成します。

     図26-109に、SEmp表の例に基づいて、ビュー・オブジェクトのRootEmployeeViewObjectを示します。問合せで、IDが1の従業員を取得して、その従業員をrootEmpNoバインド変数に格納します。ビュー・オブジェクトおよびバインド変数の使用の詳細は、5.10項「バインド変数の使用」を参照してください。

     図26-109 最上位従業員を取得するための問合せを表示するRootEmployeeViewObject

     
     

  5. ルートの従業員と下位レベルの管理者および従業員との間の階層を確立するには、RootEmployeeViewObjと、手順3で作成した管理者/従業員ビュー・オブジェクトとの間にビュー・リンクを追加します。

     図26-110 最上位管理者を従業員にリンクするRootEmployeesViewLink

     
     

  6. 「データ・コントロール」パネルで「リフレッシュ」アイコンをクリックして、データ・コントロールを更新します。

  マスター/ディテール関係の詳細は、第24章「マスター/ディテール・データの表示」を参照してください。

• 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のビュー・ページの作成に関する項の手順に従い、JSFページを作成します。

データバインドされた階層ビューアを作成するには:

1. 「データ・コントロール」パネルから、コレクションを選択します。

   図26-111に、「データ・コントロール」パネルでRootEmployeeViewObject2コレクションを選択して、従業員データを組織図で表す階層ビューアを作成する例を示します。

   図26-111 組織図の従業員のデータ・コレクション

   
   

2. コレクションをJSFページにドラッグし、ポップアップ・メニューから「階層ビューア」を選択します。

3. 「コンポーネント・ギャラリ」で、作成する階層ビューアのレイアウトを選択します。図26-104に、上から下の垂直方向レイアウトが選択されたコンポーネント・ギャラリを示します。

4. 「階層ビューアの作成」ダイアログで、次のように入力します。

   • 「階層」: 実行時のダイアグラムにノードとして含めるコレクションを選択します。デフォルトでは、ルート・コレクションが選択されます。階層内の上位オブジェクトまたは下位オブジェクトを構成することもできます。

   • 「ノード」: 「階層」リストで選択したコレクションごとに、利用可能なズーム・レベルを1つ以上使用して、タイトル・エリアで属性を、各パネル・カードでタイトルと属性を構成します。デフォルトでは、ズーム・レベルが100%のノードは次のアルゴリズムに準拠します。

     • データ・コレクションの最初の3つの属性をタイトル・エリアに割り当てます。

     • 次の2つの属性を最初のパネル・カードに割り当てます。

     • その次の2つの属性を2番目のパネル・カードに割り当て、さらに同様にしてすべての属性をパネル・カードに割り当てます。

     パネル・カードのタイトルまたはノードの属性を選択して、次に示す1つ以上の要素を構成します。

     • テキスト: パネル・カードのタイトルに使用できます。タイトル・エリア要素には使用できません。階層のパネル・カード・タイトルにテキストを入力するか、ドロップダウン・リストから「テキスト・リソースの選択」を選択して、該当のタイトルに使用するテキスト・リソースを選択または追加します。テキスト・リソースは、アプリケーション・リソース・バンドルからの翻訳可能な文字列です。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。

     • パネル・カード・データ・ソース: パネル・カードに使用できます。データ・ソースは、パネル・カードの属性に使用されるデータ・コレクションを意味します。デフォルトでは、現在の階層レベルに関連付けられたコレクションが、属性の選択に使用されます。

       図26-112は、RootEmployeeViewObj2データ・コントロールを使用した階層ビューアの「階層ビューアの作成」ダイアログを示しています。この例では、「パネル・カード・データ・ソース」は、デフォルトのSEmpViewコレクションです。

       図26-112 デフォルトのパネル・カード・データ・ソースで構成した階層ビューア

       
       

       パネル・カード属性に対する代替の子アクセッサを使用するには、ドロップダウン・リストから代替の子アクセッサを選択します(図26-113を参照)。詳細は、26.11.3項「データバインドされたパネル・カード用に代替ビュー・オブジェクトを構成する方法」を参照してください。

       図26-113 代替のパネル・カード・データ・ソースを示す「階層ビューアの作成」ダイアログ

       
       

     • 「属性」: 属性要素とイメージ要素に使用可能です。ドロップダウン・リストから、階層ビューアのノードに表示する値を表すデータ・コレクションの属性を選択します。

     • 「ラベル」: 属性に使用可能です。ドロップダウン・リストから、階層ビューアのノードで該当の要素に表示するラベルを表すデータ・コレクションの属性を選択します。デフォルトの「属性名の使用」を選択し、基礎となるViewObjectに属する該当の属性のUIヒントから取得したラベルを使用して文字列として値をレンダリングできますし、「ラベルなし」を選択し属性のラベルをレンダリングしなかったり、「テキスト・リソースの選択」を選択し、「テキスト・リソースの選択」ダイアログを開いてラベルに使用するテキスト・リソースを選択または追加できます。テキスト・リソースは、アプリケーション・リソース・バンドルからの翻訳可能な文字列です。

     • 「コンポーネント」: 属性に使用可能です。ノードにデータを表示するために使用するコンポーネントのタイプを選択します。有効な値は、「ラベル付ADF出力テキスト」、「ADF出力テキスト」、「ラベル付ADF出力フォーマット済」およびADF出力フォーマット済テキストです。これらのコンポーネントの使用方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「出力コンポーネントの使用方法」を参照してください。

     「新規」アイコンをクリックし、ノードの選択に応じて、新しいパネル・カード、属性またはイメージをノードに追加します。既存の要素を選択したら、矢印アイコン(上へ、下へ、一番上、一番下)を使用して要素を並べ替えるか、「削除」アイコンを使用して選択した要素を削除します。

     ズーム・レベルが75%、50%および25%のページを使用して、各ページ・レベルでの階層の展開表示を指定します。「ズーム・レベルの追加」を選択して、ページ・レベルのズーム・レベルを有効にします。デフォルトでは、ノード属性とパネル・カードをノードに割り当てるアルゴリズムは、100%のズーム・レベルの場合と同様です。

     
     

     注意: 階層ビューア・コンポーネントは4種類のズーム・レベルを定義します。これらのズーム・レベルを変更したり、新しいズーム・レベルを作成したりすることはできません。デフォルトのズーム・レベルは100%です。

     
     

   • 「サンプル」: 階層ビューア・ノードのサンプル・アウトラインの構成不能な表示です。タイトル・エリアなどのエリアや属性は、ノード・エリアで選択されている場合にはサンプルで強調表示されます。

5. 「OK」をクリックします。

図26-114は、RootEmployeeViewObject2という名前のデータ・コレクションのデータを使用して階層ビューアを作成したときに表示される「階層ビューアの作成」ダイアログです。この例では、階層ビューアは、タイトル・エリアとパネル・カードを、5セットの従業員情報とともに表示するように構成されています。

図26-114 従業員についての「階層ビューアの作成」ダイアログ

「階層ビューアの作成」ダイアログを設定したら、プロパティ・インスペクタを使用して階層ビューア属性を設定します。また、階層ビューア・タグに関連付けられた子タグを使用して、さらに階層ビューアをカスタマイズすることもできます。階層ビューアのエンド・ユーザー機能とプレゼンテーション機能、ユースケース、タグ構造、階層ビューアへの特殊機能の追加の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「階層ビューア・コンポーネントの使用方法」を参照してください。

階層ビューアをビジュアル・エディタで編集する場合は、その表示は実行時の表示と機能とほぼ同じになります。パネル・カード間を移動し、パネル・カードやタイトル・エリア内でスタンプされた要素を使用することにより、属性を並べ替えたり、「データ・コントロール」パネルからインポートされた新たな属性をバインドできます。

26.11.2 データバインドされた階層ビューアの作成時の処理

階層ビューアを「データ・コントロール」パネルから作成すると、次の処理が行われます。

• JSFページのページ定義ファイルで階層ビューアのバインディングを作成

• 階層ビューア・コンポーネントのJSFページに必要なタグを追加

例26-52は、階層ビューア・コンポーネントについてJDeveloperにより生成されたバインディングを表示します。マスター/ディテール・ツリーのノードにデータを移入するためのルールは、ノード定義として定義されます。次の例では、2つのノード定義が生成されます。これらのノード定義はそれぞれ、ビュー・オブジェクト1つとそれに関連する属性を参照しています。また、このコード例はアクセッサ(SEmpView)も参照しています。

例26-52 階層ビューアのバインディング

<bindings>
  <tree IterBinding="RootEmployeeViewObj2Iterator" id="RootEmployeeViewObj2">
    <nodeDefinition DefName="model.RootEmployeeViewObj"
                    Name="RootEmployeeViewObj20">
      <AttrNames>
        <Item Value="ManagerId"/>
        <Item Value="TitleId"/>
        <Item Value="Userid"/>
        <Item Value="Comments"/>
        <Item Value="DeptId"/>
        <Item Value="StartDate"/>
        <Item Value="Email"/>
        <Item Value="Salary"/>
        <Item Value="FirstName"/>
        <Item Value="Id"/>
        <Item Value="CommissionPct"/>
        <Item Value="LastName"/>
      </AttrNames>
      <Accessors>
        <Item Value="SEmpView">
          <Properties>
            <CustomProperties>
              <Property Name="hierarchyType" Value="children"/>
            </CustomProperties>
          </Properties>
        </Item>
      </Accessors>
    </nodeDefinition>
    <nodeDefinition DefName="model.SEmpView" Name="RootEmployeeViewObj21">
      <AttrNames>
        <Item Value="ManagerId"/>
        <Item Value="TitleId"/>
        <Item Value="Userid"/>
        <Item Value="Comments"/>
        <Item Value="DeptId"/>
        <Item Value="StartDate"/>
        <Item Value="Email"/>
        <Item Value="Salary"/>
        <Item Value="FirstName"/>
        <Item Value="Id"/>
        <Item Value="CommissionPct"/>
        <Item Value="LastName"/>
      </AttrNames>
      <Accessors>
        <Item Value="SEmpView">
          <Properties>
            <CustomProperties>
              <Property Name="hierarchyType" Value="children"/>
            </CustomProperties>
          </Properties>
        </Item>
      </Accessors>
    </nodeDefinition>
  </tree>
</bindings>

例26-53は、例26-52のページ定義ファイルに関連付けられているJSFページで生成されたコードを示しています。簡潔にするために、zoom75、zoom50およびzoom25という名前のファセット要素の詳細と、パネル・カードのshowDetailItemコンポーネントの詳細は省略しています。また、階層ビューアの2番目のノードに関する詳細も省略しています。

この例は、RootEmployeeViewObj2ツリー・バインディングを参照する階層ビューア・コンポーネントを示しています。これには、2つのノード(dvt:node)コンポーネントが含まれ、このコンポーネントにはパネル・カード・コンポーネント(dvt:panelCard)が含まれます。このパネル・カード・コンポーネントは、ノードにより参照されたコンテンツの表示を変更するときに使用されるエフェクトとして、slide_horzを定義しています。

階層ビューアを作成すると、図26-114に示す「階層の作成」ダイアログを使用して、コンポーネントのレイアウトを変更したり、コンポーネントをさらに追加できます。このダイアログを開くには、hierarchyViewerコンポーネントのプロパティ・インスペクタで「編集」アイコンを使用します。また、ビジュアル・エディタで階層ビューア・コンポーネントのコードを直接編集するか、プロパティ・インスペクタで値を設定して、レイアウトをカスタマイズすることもできます。コンポーネント・パレットを使用して、パネル・カード属性など、追加のコンポーネントを追加できます。

例26-53 階層ビューアのJSFページのコード

<dvt:hierarchyViewer id="hv1" var="node"
        value="#{bindings.RootEmployeeViewObj2.treeModel}"
        selectionListener="#{bindings.RootEmployeeViewObj2.treeModel.makeCurrent}"
        detailWindow="none" layout="hier_vert_top"
        levelFetchSize="#{bindings.RootEmployeeViewObj2.rangeSize}"
        styleClass="AFStretchWidth">
  <dvt:link linkType="orthogonalRounded" id="l1"/>
  <dvt:node type="model.RootEmployeeViewObj" width="233" height="233" id="n1">
    <f:facet name="zoom100">
      <af:panelGroupLayout styleClass="AFStretchWidth AFHVNodeStretchHeight
                                       AFHVNodePadding"
                           layout="vertical" id="pgl1">
        <af:panelGroupLayout layout="horizontal" id="pgl2">
          <af:panelGroupLayout layout="vertical" id="pgl6">
            <af:outputText value="#{node.LastName}"
                           styleClass="AFHVNodeTitleTextStyle"
                           id="ot2"/>
            <af:outputText value="#{node.FirstName}"
                           styleClass="AFHVNodeSubtitleTextStyle"
                           id="ot13"/>
            <af:panelLabelAndMessage label="#{node.hints.Id.label}"
                                     id="plam5">
              <af:outputText value="#{node.Id}"
                             styleClass="AFHVNodeTextStyle" id="ot16">
                <af:convertNumber groupingUsed="false"
                                  pattern="#{node.hints.Id.format}"/>
              </af:outputText>
            </af:panelLabelAndMessage>
          </af:panelGroupLayout>
        </af:panelGroupLayout>
      <af:spacer height="5" id="s7"/>
      <dvt:panelCard effect="slide_horz" styleClass="AFHVNodePadding" id="pc2">
        <af:showDetailItem text="Contact Details" id="sdi1">
          <af:spacer height="2" id="s6"/>
          <af:panelFormLayout styleClass="AFStretchWidth AFHVNodeStretchHeight
                                          AFHVNodePadding"
                              id="pfl2">
            <af:panelLabelAndMessage label="#{node.hints.Email.label}"
                                     id="plam3">
              <af:outputText value="#{node.Email}"
                             styleClass="AFHVPanelCardTextStyle"
                             id="ot12"/>
            </af:panelLabelAndMessage>
            <af:panelLabelAndMessage label="#{node.hints.Userid.label}"
                                     id="plam15">
              <af:outputText value="#{node.Userid}"
                             styleClass="AFHVPanelCardTextStyle"
                             id="ot1"/>
            </af:panelLabelAndMessage>
          </af:panelFormLayout>
        </af:showDetailItem>
           ... Remaining showDetailItems omitted
      </dvt:panelCard>
    </af:panelGroupLayout>
   </f:facet>
           ... Remaining zoom levels omitted
 </dvt:node>
 <dvt:node type="model.SEmpView" width="233" height="233" id="n2">
   ... Second node details omitted
 </dvt:node>
</dvt:hierarchyViewer>

26.11.3 データバインドされたパネル・カード用に代替ビュー・オブジェクトを構成する方法

データバインドされた階層ビューアを作成または編集するときには、パネル・カードのデータ・ソースとして、代替ビュー・オブジェクトを指定できます。たとえば、販売責任者と注文との間のマスター/ディテール関係を含むデータ・コレクションがあるときに、注文を発注した顧客の詳細を表示するパネル・カードが必要になることがあります。

図26-115に、階層ビューアの実行時ビューの一部を示します。この階層ビューアは、販売責任者に対する注文と注文の詳細を表示するように構成されています。この例では、Customer Detailsパネル・カードに対して代替ビュー・オブジェクトを使用するように、階層ビューアを構成しています。

図26-115 代替ビュー・オブジェクトを使用して構成した階層ビューアのパネル・カード

代替ビュー・オブジェクトは、親コレクションの子にする必要があります。この親子関係を確立するには、親コレクションと子コレクションとの間にビュー・リンクを作成します。

始める前に:

アプリケーションに必要なエンティティとビュー・オブジェクトのインスタンスが含まれているアプリケーション・モジュールを作成します。作成手順は、9.2項「アプリケーション・モジュールの作成と変更」を参照してください。

階層ビューア用のデータ・モデルを作成します。たとえば、図26-115の階層ビューアでは、図26-106に示されたSEmpエンティティに基づく、最上位レベルのビュー・オブジェクトを使用しています。この例では、従業員データベースに含まれるすべての販売責任者をビュー・オブジェクトで取得するために、TITLE_IDが2である従業員レコードをすべて取得しています。図26-116に、SalesRepViewObjビュー・オブジェクトを示します。

図26-116 TITLE_IDを取得するための問合せを表示する販売責任者ビュー・オブジェクト

ビュー・オブジェクトの作成の詳細は、5.2.1項「エンティティ・ベースのビュー・オブジェクトの作成方法」を参照してください。

注文ビュー・オブジェクトは、注文の販売責任者の従業員IDなどの、注文に関する詳細を含む注文エンティティ・オブジェクトに基づきます。図26-117は、SOrd表から列を取得するために使用されるSOrdViewオブジェクトとSQL問合せを示しています。

図26-117 階層ビューアの例のSOrdViewオブジェクト

販売責任者と注文との間のマスター/ディテール関係は、SalesRepViewObjとOrdersViewObjとの間のビュー・リンクで確立されます。図26-118は、ビュー・オブジェクト間の関係を示しています。

図26-118 販売責任者と注文との間のビュー・リンク

ビュー・リンクを使用して、マスター/ディテール関係を確立する方法の詳細は、5.6.2項「ビュー・オブジェクトのみに基づくマスター/ディテール階層の作成方法」を参照してください。

データバインドされたパネル・カード用に代替ビュー・オブジェクトを構成するには:

1. パネル・カードの代替データ・ソースにするビュー・オブジェクトを作成します(まだ作成していない場合)。

   たとえば、図26-115の階層ビューアでは、SCustomerエンティティ・オブジェクトに基づいたビュー・オブジェクトを使用しています。図26-119は、SCustomer表から値を取得するために使用されるSCustomerViewObjectとSQL問合せを示しています。

   図26-119 階層ビューアの例のSCustomerViewオブジェクト

   
   

2. 親コレクションと代替ビュー・オブジェクトとの間にビュー・リンクを作成します。

   図26-120は、階層ビューアの例における、販売責任者と顧客との間のビュー・リンクを示しています。ビュー・リンクの作成についての説明が必要な場合は、5.6.2項「ビュー・オブジェクトのみに基づくマスター/ディテール階層の作成方法」を参照してください。

   図26-120 販売責任者と顧客との間のビュー・リンク

   
   

3. 必要に応じて、親コレクションと代替の子コレクションとの間の階層を確立するためのビュー・リンクを作成します。

   たとえば、階層ビューアの例で、注文と顧客との階層を確立するには、SOrdViewコレクションとSCustomerViewコレクションとの間にビュー・リンクを作成します。図26-121に、ビュー・リンクの例を示します。

   図26-121 注文と顧客との間のビュー・リンク

   
   

26.11.3.1 階層ビューアのパネル・カードに代替ビュー・オブジェクトを使用する場合の処理

パネル・カード・データ・ソースに代替ビュー・オブジェクトを使用するように階層ビューアを構成すると、JDeveloperにより、階層ビューアと代替ソースのバインディングがJSFページのページ定義ファイルに追加されます。

例26-54は、図26-115に表示される階層ビューアのサンプル・バインディングを示します。代替ソースのエントリは強調表示されています。代替データ・ソースは、階層ビューアのノード定義の1つとして定義されている点に注目してください。

例26-54 代替のパネル・カード・データ・ソースを使用する階層ビューアのバインディング

<bindings>
  <tree IterBinding="SalesRepViewObj1Iterator" id="SalesRepViewObj1">
    <nodeDefinition DefName="model.SalesRepViewObj" Name="SalesRepViewObj10">
      <AttrNames>
        <Item Value="Userid"/>
        <Item Value="Email"/>
        <Item Value="FirstName"/>
        <Item Value="Id"/>
        <Item Value="LastName"/>
      </AttrNames>
      <Accessors>
        <Item Value="SOrdView">
          <Properties>
            <CustomProperties>
              <Property Name="hierarchyType" Value="children"/>
            </CustomProperties>
          </Properties>
        </Item>
      </Accessors>
    </nodeDefinition>
    <nodeDefinition DefName="model.SOrdView" Name="SalesRepViewObj11">
      <AttrNames>
        <Item Value="DateShipped"/>
        <Item Value="DateOrdered"/>
        <Item Value="Id"/>
        <Item Value="Total"/>
      </AttrNames>
      <Accessors>
        <Item Value="SItemView">
          <Properties>
            <CustomProperties>
              <Property Name="hierarchyType" Value="children"/>
            </CustomProperties>
          </Properties>
        </Item>
        <Item Value="SCustomerView"/>
      </Accessors>
    </nodeDefinition>
    <nodeDefinition DefName="model.SCustomerView" Name="SalesRepViewObj12">
      <AttrNames>
        <Item Value="Name"/>
        <Item Value="Phone"/>
        <Item Value="City"/>
      </AttrNames>
    </nodeDefinition>
    <nodeDefinition DefName="model.SItemView" Name="SalesRepViewObj13">
      <AttrNames>
        <Item Value="QuantityShipped"/>
        <Item Value="ItemId"/>
        <Item Value="Price"/>
        <Item Value="ProductId"/>
      </AttrNames>
    </nodeDefinition>
  </tree>
</bindings>

26.11.4 階層ビューアでのデータバインドされた検索の作成方法

階層ビューアの検索機能は、階層ビューア・データ・モデルの基本であるデータ・コレクションの検索可能属性または列に基づいています。Oracle ADFのデータ・コントロールで定義された問合せ結果コレクションを使用すると、Jdeveloperでは宣言的なタスクとなります。ExecuteWithParams操作をドラッグして、このページの既存の階層ビューア・コンポーネントにドロップします。

図26-122に、従業員を姓で検索するように構成された、サンプル従業員階層ビューアを示します。この例では、「検索」パネルに従業員の姓を入力することも、%または_を使用してパターン一致を指定することもできます。

図26-122 階層ビューアと検索パネル

始める前に:

1. ページ上にデータバインドされた階層ビューア・コンポーネントを作成します。

2. 階層ビューアのルート・ノードを取得する問合せを検証します。

   たとえば、図26-109では、EMPNO列でルート・ノードを取得しています。

3. 検索を実行するビュー・オブジェクトを作成します。

   たとえば、図26-123はEmployeesSearchResultsビュー・オブジェクトを示しています。このオブジェクトは、任意の値と一致させるためのデフォルト値の%と、パターン一致を有効にする比較値のlikeを使用して、データ・コレクションのLastName列に基づいた検索を実行します。

   図26-123 EmployeeSearchResultsビュー・オブジェクト

   
   

   ビュー・オブジェクトの作成の詳細は、5.2.1項「エンティティ・ベースのビュー・オブジェクトの作成方法」を参照してください。

階層ビューアでデータバインドされた検索を作成する手順:

1. 「データ・コントロール」パネルから、問合せ結果に対応するコレクションを選択し、「操作」ノードを展開してExecuteWithParams操作を表示します。

   図26-124は、図26-123に示された従業員検索ビュー・オブジェクトを作成する場合に生成される、拡張EmployeeSearchResults1データ・コントロールを示しています。

   図26-124 階層ビューア検索のExecuteWithParams操作

   
   

2. ExecuteWithParams操作をドラッグして、ビジュアル・エディタの階層ビューア、または「構造」ウィンドウのコンポーネント上にドロップします。かわりに、このパラメータを階層ビューアにドラッグすることもできます。

3. 表示される「階層ビューア検索の作成」ダイアログで、「追加」アイコンを使用して、「検索結果」パネルに表示する結果リストを指定し、その後、各結果について次の指定を行います。

   1. ラベルの表示: 階層内のノードのヘッダー値を選択します。<default>を選択すると、ヘッダーのテキストはデータ・バインディングから自動的に取得されます。

   2. 値バインディング: 階層ビューアのツリーにあるノードに使用するデータ・コレクション内の列を選択します。

   3. 使用するコンポーネント: ノードに表示するコンポーネントのタイプを選択します。デフォルトは、ADF出力テキスト・コンポーネントです。

   既存のフィールドの選択後、矢印アイコン(Up、Down、Top、Bottom)を使用して、結果を並べ替えるか、または「削除」アイコンを使用して、結果を削除します。

4. 「操作」ドロップダウン・リストで、検索結果が選択されたときに使用する階層ルート・データ・コレクションを選択します。有効な値は次のとおりです。

   • removeRowWithKey: 入力フィールドによって指定された値から変換されたStringとして行キーを使用し、バインドされたデータ・コレクションのデータ・オブジェクトを削除します。

   • setCurrentRowWithKey: 入力フィールドで指定された値から変換したStringとして行キーを設定します。行キーは、バインドされたデータ・コレクション内のデータ・オブジェクトの現状設定に使用されます。

   • setCurrentRowWithKeyValue: キーの値を使用して、イテレータの現在のオブジェクトを設定します。

   • ExecuteWithParams: パラメータとして渡される名前付きバインド変数に値を設定します。

5. 「パラメータ・マッピング」表で、「結果属性」列のドロップダウン・リストを使用して、「階層パラメータ」列に表示されるパラメータにマップする結果コレクション属性を選択します。

図26-125は、EmployeesSearchResults1という名前のデータ・コレクションのデータを使用して階層ビューアを作成したときに表示される「階層ビューア検索の作成」ダイアログです。

図26-125 「階層ビューア検索の作成」ダイアログ

実行時に、検索結果は、1つの表にLastNameとFirstNameで表示されます。図26-126は、ユーザーが検索ボックスにC%と入力して、姓がCで始まるすべての従業員を検索した場合の検索結果パネルを示しています。

図26-126 階層ビューアの検索結果パネル

ユーザーは、検索結果のいずれかを選択して、その結果に関連する階層ビューアのノードと子ノード(存在する場合)を表示できます。図26-127は、ユーザーが検索結果のリストからCatchpoleを選択した場合に示される階層ビューアのノードです。

図26-127 階層ビューアの検索結果

26.12 データバインドされたツリーマップおよびサンバーストの作成

ツリーマップおよびサンバーストは、サイズと色で視覚的に表された、2つの次元にまたがる定量的階層データを表示するADFデータ視覚化コンポーネントです。たとえば、ツリーマップまたはサンバーストを使用して四半期ごとの地域別売上を表示して売上動向を示すことができます。この場合、ノードのサイズを使用して各地域の売上高を表し、ノードの色を使用してその地域の売上高が四半期内に増減したかどうかを表せます。

ツリーマップおよびサンバーストでは、nodeと呼ばれる形を使用して、階層内のデータを表します。ツリーマップでは、ノードはネストされた四角形として表示されます。ツリーの各ブランチには四角形が割り当てられ、そこにサブブランチを表す、より小さい四角形が並べられます。

図26-128に、世界中の様々な地域にある企業の倉庫内の製品の在庫状況を表示するツリーマップを示します。この例では、ノードのサイズが各製品の在庫量を表し、ノードの色が在庫ステータスを表しています。

図26-128 製品の在庫状況とインベントリ・レベルを示すツリーマップ

サンバーストでは、ノードは四角形のレイアウトではなく放射状に示され、階層の最上位が中心に表示され、よりレベルが深くなるにつれ中心から離れた位置に表示されます。図26-129に、同じインベントリ・データをサンバーストで示します。

図26-129 製品の在庫状況とインベントリ・レベルを示すサンバースト

ノードの形状とコンテンツは、ノードの視覚的レイアウトと同様に構成可能です。ツリーマップおよびサンバーストのエンド・ユーザーとプレゼンテーション機能、ユースケース、タグ構造および特殊機能の追加に関する詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「ツリーマップおよびサンバースト・コンポーネントの使用方法」を参照してください。

26.12.1 ADFデータ・コントロールを使用したツリーマップおよびサンバーストの作成方法

ツリーマップおよびサンバーストは、1つ以上のディテール・コレクションと1つのマスター・データ・コレクションとの間にマスター/ディテール関係が存在するデータ・コレクションに基づいています。ツリーマップおよびサンバーストでは、JDeveloperで次の属性も設定されている必要があります。

• value: ノードのサイズ

• fillColor: ノードの色

• label: ノードのテキスト識別子

valueとlabel属性の値はツリーマップまたはサンバーストのデータ・モデルに、あるいは最初にUIを開発する機能を使用している場合はクラスまたはマネージドBeanに格納する必要があります。fillColor値は、データ・モデル、クラスおよびマネージドBeanで指定するか、プロパティ・インスペクタで宣言的に指定できます。

ツリーマップまたはサンバーストを適切に構成するには、データが次の規則に従っている必要があります。

• 各子ノードは1つの親ノードしか持つことはできません。

• レベルはスキップできません。

Oracle ADFのデータ・コントロールを使用すると、JDeveloperではツリーマップとサンバーストの作成は宣言的なタスクとなります。「データ・コントロール」パネルから、1つ以上のノードを生成するデータ・コレクションをドラッグして、JSFページにドロップします。

始める前に:

次のタスクを完了する必要があります。

• 9.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。

  マスター/ディテール関係の操作の詳細は、第24章「マスター/ディテール・データの表示」を参照してください。

• 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のビュー・ページの作成に関する項の手順に従い、JSFページを作成します。

「データ・コントロール」パネルを使用してツリーマップまたはサンバーストを作成するには:

1. 「データ・コントロール」パネルから、コレクションを選択します。

   図26-130は、図26-128のツリーマップおよび図26-129のサンバーストに対するデータ・コレクションを示しています。この例では、アプリケーションはSCountriesView2コレクションとSWarehouseView2コレクション間のビュー・リンクを使用して、SRegionView1とSWarehouseView2データ・コレクションから構成される階層を作成します。

   図26-130 ツリーマップおよびサンバーストに対するサンプル・データ・コレクション

   
   

   表26-9に、ツリーマップまたはサンバーストの作成に使用される値、サイズおよび色属性を示します。

   表26-9 ツリーマップおよびサンバーストのインベントリの例に対するサンプル値

   コレクション	サイズ値	ラベル値	色値
   SRegionView1	CountryCount	Name	デフォルト
   SCountriesView2	WarehouseCount	Country	デフォルト
   SWarehouseView2	ProductCount	City	デフォルト
   ProductInventoryView2	AmountInStock	Name	在庫レベルにより異なる

   
   

2. コレクションをJSFページにドラッグし、ポップアップ・メニューから「ツリーマップ」または「サンバースト」を選択します。

3. ツリーマップの作成または「サンバーストの作成」ダイアログの「階層」セクションで、実行時のツリーマップまたはサンバーストにノードとして含めるコレクションを選択します。デフォルトでは、ルート・コレクションが選択されます。

4. 「階層」リストで選択するコレクションごとに、次に対する値を入力します。

   • 値: ドロップダウン・リストから、サンバーストのサイズ値を表すデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。「式ビルダー」ダイアログに関するヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。

     たとえば、図26-130のデータ・コレクションを使用してツリーマップまたはサンバーストを作成するには、最初のノードに対するサイズ値を表すように、SRegionView1の値として「CountryCount」を選択します。

   • ラベル: ドロップダウン・リストから、サンバースト・ノードのラベルとして表示するラベルを表すデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。

     たとえば、SRegionView1ノード・ラベルに対して「Name」を選択します。

   • オプションで、ビュー・エリア・セクションで「新規」をクリックして、ノードに対する属性グループを構成します。ノードの表示を色またはパターンに基づいて変えるには、属性グループを使用します。ツリーマップまたはサンバーストの作成後にノードのfillColorまたはfillPatternプロパティを使用して、ノードの塗りつぶしの色またはパターンを指定することもできます。

     色を変えるように属性グループを構成したり、ノードに対してfillColor属性を指定したりしない場合は、ノードは黒で表示されます。デフォルトでは、ノードはパターンなしで表示されます。

     ツリーマップとサンバーストの製品インベントリの例では、階層の各レベルに対して属性グループが構成されています。

     属性グループを構成するには、次の値を入力します。

     • 値でグループ化: ドロップダウン・リストから、属性グループをグループ化するためのデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。

       ツリーマップとサンバーストの例では、「値でグループ化」の値としてサイズ値が使用されています。SRegionView1コレクションについては、「値でグループ化」の値として「CountryCount」を選択します。

     • エリア: ドロップダウン・リストから、属性グループを色で区別する場合は「色」を、属性グループをパターンで区別する場合は「パターン」を選択します。属性グループを色とパターンの両方で区別するには、「複数の属性の選択」を選択し、「色」と「パターン」の両方を選択します。「OK」をクリックします。

       ツリーマップとサンバーストの製品インベントリの例では、階層の各レベルに対して色が使用されています。

     • 凡例ラベル: ドロップダウン・リストから、ツリーマップの凡例に表示するデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。

       ツリーマップとサンバーストの製品インベントリの例では、この値は空のままになっています。

     図26-131に、製品インベントリの例の最初のノードに対して入力された「ツリーマップの作成」ダイアログを示します。「サンバーストの作成」ダイアログに対する入力も同じようになります。

     図26-131 リージョン・ノードに対する「ツリーマップの作成」ダイアログ

     
     

   • オプションで、「値固有のルール」をクリックして属性グループ・ダイアログを拡張し、一致ルールまたは例外ルールを指定します。一致ルールは、単純なtrueまたはfalse条件に対して色またはパターンを指定するか、特定の値に一致させたい場合に使用します。例外ルールは、ノードのグループ化値が特定の条件を満たす場合に色またはパターンを指定するときに使用します。

     一致ルールを指定するには、「一致ルール」セクションで「新規」をクリックして、次の値を入力します。

     • グループ値: 一致に対するカテゴリ値を入力します。カテゴリを表す文字列を入力するか、trueまたはfalseに設定できます。この値をtrueまたはfalseに設定する場合、「値でグループ化」フィールドには、次の例に示すように、trueまたはfalseに評価されるEL式(#{row.AmountInStock gt row.ReorderPoint}など)を指定する必要があります。

     • プロパティ: ドロップダウン・リストから、ノードを色で区別する場合は「色」を、ノードをパターンで区別する場合は「パターン」を選択します。

     • プロパティ値: ドロップダウン・リストから、ノードの値が「グループ値」に一致する場合に表示する色またはパターンを選択します。色については、提供されているいずれかの色を選択するか、「カスタム・カラー」を選択して「カスタム・カラーの選択」ダイアログでカスタム・カラーを指定できます。パターンについては、提供されているいずれかの値を選択する必要があります。

     図26-132に、階層の一番下のレベルに対する一致ルールを使用するデータ・コレクションの「ツリーマップの作成」ダイアログを示します。「サンバーストの作成」ダイアログに対する入力も同じようになります。

     図26-132 属性グループに対する一致ルールを示すツリーマップ

     
     

     この例では、ツリーマップ・ノードは、インベントリ・レベルが許容可能であれば緑(RGB 16進#008000)で表示され、インベントリ・レベルが製品の再発注レベル以下であれば赤(RGB 16進#ff0000)で表示されます。属性グループの「ラベル」フィールドには、凡例表示に対する詳細が含まれます。この場合、フィールドには項目の在庫数に基づいて凡例ラベルを決定する式(#{(row.AmountInStock gt row.ReorderPoint) ? 'Stock Level OK' : 'Reorder Time'})が含まれます。

     図26-133は、実行時のツリーマップを示します。

     図26-133 実行時に一致ルールを示すツリーマップ

     
     

     例外ルールを指定するには、「例外ルール」セクションで「新規」をクリックして、次の値を入力します。

     • 条件: trueまたはfalseに評価されるJSF EL式を入力します。「条件」フィールドに式を直接入力するか、「式ビルダー」を選択してJSF EL式を入力できます。

       ツリーマップとサンバーストの製品インベントリの例では、階層の一番下のレベルに対して3つの例外ルールが定義されています。製品のインベントリ・レベルが再発注レベルをはるかに超えている場合は、図26-128のツリーマップ・ノードと図26-129のサンバースト・ノードは緑で表示されます。ツリーマップとサンバースト・ノードは、インベントリ・レベルが再発注点に近い場合は黄色で、インベントリ・レベルが再発注点に達したか非常に近い場合は赤で表示されます。

       図26-134は、階層の一番下のレベルに対する例外ルールを使用する、図26-130のサンプル・データ・コレクションに対する「サンバーストの作成」ダイアログを示しています。「ツリーマップの作成」ダイアログに対する入力も同じようになります。

       図26-134 例外ルールを示すサンバーストの作成ダイアログ

       
       

     • プロパティ: ドロップダウン・リストから、ノードを色で区別する場合は「色」を選択します。ノードをパターンで区別する場合は「パターン」を選択します。

     • プロパティ値: ドロップダウン・リストから、ノードの値が「条件」フィールドで指定した条件に一致する場合に表示する色またはパターンを選択します。色については、提供されているいずれかの色を選択するか、「カスタム・カラー」を選択して「カスタム・カラーの選択」ダイアログでカスタム・カラーを指定できます。パターンについては、提供されているいずれかの値を選択する必要があります。

     • 凡例ラベル: 凡例ラベルにテキスト・リソースを使用するには、ドロップダウン・リストから「テキスト・リソースの選択」を選択します。このフィールドにテキストを入力するか、「式ビルダー」を選択してJSF EL式を入力することもできます。

5. 「OK」をクリックします。

26.12.2 データバインドされたツリーマップまたはサンバーストの作成時の処理

ツリーマップまたはサンバーストを「データ・コントロール」パネルから作成すると、次の処理が行われます。

• サンバーストまたはツリーマップに対するバインディングがJSFページのページ定義ファイルに作成されます。

• treemapまたはsunburstコンポーネントに必要なタグがJSFページに追加されます。

例26-55に、図26-130のデータ・コレクションを使用してtreemapまたはsunburstコンポーネントに対してJDeveloperにより生成されたバインディングを示します。どちらのコンポーネントも同じデータ・モデルを使用するため、ページ定義ファイル内のバインディングは同じになります。

例26-55 ツリーマップまたはサンバーストに対するサンプル・バインディング

<executables>
  <variableIterator id="variables"/>
  <iterator Binds="SRegionView1" RangeSize="-1" DataControl="AppModuleDataControl"
            id="SRegionView1Iterator"/>
</executables>
<bindings>
  <tree IterBinding="SRegionView1Iterator" id="SRegionView1">
    <nodeDefinition DefName="model.SRegionView" Name="SRegionView10">
      <AttrNames>
        <Item Value="Id"/>
        <Item Value="Name"/>
        <Item Value="CountryCount"/>
      </AttrNames>
      <Accessors>
          <Item Value="SCountriesView"/>
      </Accessors>
    </nodeDefinition>
    <nodeDefinition DefName="model.SCountriesView" Name="SRegionView11">
      <AttrNames>
        <Item Value="Id"/>
        <Item Value="Country"/>
        <Item Value="RegionId"/>
         Item Value="WarehouseCount"/>
      </AttrNames>
      <Accessors>
        <Item Value="SWarehouseView"/>
      </Accessors>
    </nodeDefinition>
    <nodeDefinition DefName="model.SWarehouseView" Name="SRegionView12">
      <AttrNames>
        <Item Value="Id"/>
        <Item Value="Address"/>
        <Item Value="City"/>
        <Item Value="State"/>
        <Item Value="CountryId"/>
        <Item Value="ZipCode"/>
        <Item Value="Phone"/>
        <Item Value="ManagerId"/>
        <Item Value="ProductCount"/>
      </AttrNames>
      <Accessors>
        <Item Value="ProductInventoryView"/>
      </Accessors>
    </nodeDefinition>
    <nodeDefinition DefName="model.ProductInventoryView" Name="SRegionView13">
      <AttrNames>
        <Item Value="ProductId"/>
        <Item Value="WarehouseId"/>
        <Item Value="AmountInStock"/>
        <Item Value="ReorderPoint"/>
        <Item Value="MaxInStock"/>
        <Item Value="OutOfStockExplanation"/>
        <Item Value="RestockDate"/>
        <Item Value="Id"/>
        <Item Value="Name"/>
        <Item Value="ShortDesc"/>
      </AttrNames>
    </nodeDefinition>
  </tree>
</bindings>

ツリーマップまたはサンバーストのノードにデータを移入するためのルールは、ノード定義で定義されています。この例は、階層の各レベルに対して1つずつ、合計で4つのノード定義が生成されたことを示しています。これらのノード定義はそれぞれ、ビュー・オブジェクト1つとそれに関連する属性を参照しています。階層の次のレベルが存在する場合は、各ノード定義では次のレベルに対するアクセッサも参照しています。

ツリーマップまたはサンバーストの作成後は、「ツリーマップの作成」ダイアログまたは「サンバーストの作成」ダイアログを使用して、各ノードの値、ラベルおよび属性グループを変更できます。ダイアログを開くには、treemapまたはsunburstコンポーネントに対するプロパティ・インスペクタの「編集」アイコンを使用します。コードで値を直接設定するか、プロパティ・インスペクタで値を設定することにより、値をカスタマイズすることもできます。

26.12.3 実行時に行われる処理: データバインドされたサンバーストまたはツリーマップの初期表示

デフォルトでは、サンバーストまたはツリーマップでは階層の最初の2つのレベルのみが表示され、サンバーストまたはツリーマップでlegendSource属性を構成するまでは凡例は表示されません。図26-135は、図26-130のデータ・コレクションを使用してサンバーストを作成した場合に実行時に表示されるサンバーストを示しています。

図26-135 構成前のデータバインドされたサンバーストの例

「ツリーマップの作成」または「サンバーストの作成」ダイアログの入力後は、プロパティ・インスペクタを使用して、ツリーマップまたはサンバーストのレベル表示およびlegendSource属性を構成できます。その他のツリーマップまたはサンバースト属性に対する設定を指定し、サンバーストおよびツリーマップ・タグに関連付けられた子タグを使用してさらにサンバーストおよびツリーマップをカスタマイズすることもできます。

例26-56に、図26-128のツリーマップに対するJSFページ・コード上のコードを示します。この例では、データバインドされたツリーマップは、階層内のすべてのレベル、凡例、およびユーザーがノード上にマウスを移動した場合にはツールチップを表示するように構成されています。

例26-56 ツリーマップに対するJSFページのサンプル・コード

<dvt:treemap id="t1" value="#{bindings.SRegionView1.treeModel}"
             var="row" displayLevelsChildren="3"
             legendSource="ag1" summary="Sample Treemap">
  <af:switcher facetName="#{row.hierTypeBinding.name}" id="s1">
    <f:facet name="SRegionView11">
      <dvt:treemapNode value="#{row.WarehouseCount}" label="#{row.Country}"
                       id="tn1">
        <dvt:attributeGroups id="ag2" value="#{row.WarehouseCount}" type="color"/>
      </dvt:treemapNode>
    </f:facet>
    <f:facet name="SRegionView10">
      <dvt:treemapNode value="#{row.CountryCount}" label="#{row.Name}" id="tn2">
        <dvt:attributeGroups id="ag3" value="#{row.CountryCount}" type="color"/>
      </dvt:treemapNode>
    </f:facet>
    <f:facet name="SRegionView13">
      <dvt:treemapNode value="#{row.AmountInStock}" label="#{row.Name}" id="tn3"
                       shortDesc="Amount in Stock: #{row.AmountInStock}&lt;br/>Reorder Point: #{row.ReorderPoint}">
        <dvt:attributeGroups value="#{row.AmountInStock}" type="color" id="ag1">
          <dvt:attributeExceptionRule id="aer1"
                                      condition="#{(row.AmountInStock.value - row.ReorderPoint.value) gt 50}"
                                      label="Stock OK">
            <f:attribute name="color" value="#008800"/>
          </dvt:attributeExceptionRule>
          <dvt:attributeExceptionRule id="aer2"
                                      condition="#{((row.AmountInStock.value - row.ReorderPoint.value) le 50) and ((row.AmountInStock.value - row.ReorderPoint.value) gt 25)}"
                                      label="Stock Level Getting Low">
            <f:attribute name="color" value="#FFFF33"/>
          </dvt:attributeExceptionRule>
          <dvt:attributeExceptionRule id="aer3"
                                      condition="#{(row.AmountInStock.value - row.ReorderPoint.value) le 25}"
                                      label="Reorder Time">
            <f:attribute name="color" value="#880000"/>
          </dvt:attributeExceptionRule>
        </dvt:attributeGroups>
      </dvt:treemapNode>
    </f:facet>
    <f:facet name="SRegionView12">
      <dvt:treemapNode value="#{row.ProductCount}" label="#{row.City}" id="tn4">
        <dvt:attributeGroups id="ag4" value="#{row.ProductCount}" type="color"/>
      </dvt:treemapNode>
    </f:facet>
  </af:switcher>
</dvt:treemap>

例26-57に、図26-129のサンバーストに対するJSFページ・コード上のコードを示します。この例では、データバインドされたサンバーストも、階層内のすべてのレベル、凡例、およびユーザーがノード上にマウスを移動した場合にはツールチップを表示するように構成されています。この例のサンバースト・コードと前の例のツリーマップ・コードの例の類似点に注目してください。

例26-57 サンバーストに対するJSFページのサンプル・コード

<dvt:sunburst id="t1" value="#{bindings.SRegionView1.treeModel}" var="row"
              displayLevelsChildren="3"
              summary="Sample Sunburst" legendSource="ag3">
  <af:switcher facetName="#{row.hierTypeBinding.name}" id="s1">
    <f:facet name="SRegionView10">
      <dvt:sunburstNode value="#{row.CountryCount}" label="#{row.Name}" id="sn1" >
        <dvt:attributeGroups value="#{row.CountryCount}" type="color"
                             label="Country Count" id="ag1"/>
      </dvt:sunburstNode>
    </f:facet>
    <f:facet name="SRegionView11">
      <dvt:sunburstNode value="#{row.WarehouseCount}" label="#{row.Country}"
                        id="sn4">
        <dvt:attributeGroups value="#{row.WarehouseCount}" type="color" id="ag4"/>
      </dvt:sunburstNode>
    </f:facet>
    <f:facet name="SRegionView12">
      <dvt:sunburstNode value="#{row.ProductCount}" label="#{row.City}" id="sn3">
        <dvt:attributeGroups value="#{row.ProductCount}" type="color" id="ag2"/>
      </dvt:sunburstNode>
    </f:facet>
    <f:facet name="SRegionView13">
      <dvt:sunburstNode value="#{row.AmountInStock}" label="#{row.Name}" id="sn2"
                        shortDesc="Amount in Stock:      #{row.AmountInStock}&lt;br/>Reorder Point: #{row.ReorderPoint}">
        <dvt:attributeGroups value="#{row.AmountInStock}" type="color"
                             label="Amount in Stock" id="ag3">
          <dvt:attributeExceptionRule id="aer1" condition="#{(row.AmountInStock.value - row.ReorderPoint.value) gt 50}"
                                      label="Stock Level OK">
            <f:attribute name="color" value="#008800"/>
          </dvt:attributeExceptionRule>
          <dvt:attributeExceptionRule id="aer2"
                                      condition="#{((row.AmountInStock.value - row.ReorderPoint.value) le 50) and ((row.AmountInStock.value - row.ReorderPoint.value) gt 25)}"
                                      label="Stock Getting Low">
            <f:attribute name="color" value="#FFFF33"/>
          </dvt:attributeExceptionRule>
          <dvt:attributeExceptionRule id="aer3" condition="#{(row.AmountInStock.value - row.ReorderPoint.value) le 25}"
                                      label="Reorder Time">
            <f:attribute name="color" value="#880000"/>
          </dvt:attributeExceptionRule>
        </dvt:attributeGroups>
      </dvt:sunburstNode>
    </f:facet>
  </af:switcher>
</dvt:sunburst>

サンバーストまたはツリーマップのレベル表示、legendSource属性、ツールチップ、追加の属性または子タグの構成に関する詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「ツリーマップおよびサンバースト・コンポーネントの使用方法」を参照してください。

26.13 データバインドされたダイアグラムの作成

データバインドされたダイアグラムでは、データを表すノード・オブジェクトのコレクションが必要であり、オプションでノード間の関係を表すリンク・オブジェクトのコレクション(オプション)を含めます。Listインタフェース(java.util.ArrayListオブジェクトなど)やコレクション・モデル(org.apache.myfaces.trinidad.model.CollectionModelなど)を実装するオブジェクトを使用できます。

また、データバインドされたダイアグラムでは、機能としてアプリケーションに追加するJavaScriptメソッド内でクライアント・レイアウト構成が定義されている必要もあります。クライアント・レイアウトは、ページのノードおよびリンクのレイアウト方法を指定します。ダイアグラム・コンポーネントには、必要に応じて使用および変更できるデフォルト・レイアウトが含まれています。デフォルトのforceDirectedLayoutでは、すべてのリンクが大体同じ長さになり、交差するリンクができるだけ少なくなるようにダイアグラム・ノードが配置されます。

注意: また、アプリケーション機能として追加するJavaScriptオブジェクト内で独自のクライアント・レイアウト構成を設定することもできます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のダイアグラム・レイアウト・フレームワークの使用に関する説明を参照してください。

ダイアグラムの作成ウィザードでは、ダイアグラムを作成してデータにバインドするための宣言的サポートが提供されます。ウィザードの5つのページで、次の操作を実行できます。

1. ダイアグラムのクライアント・レイアウトを構成します。

   デフォルトのクライアントforceDirectedLayout機能を選択することも、独自のレイアウトを指定することもできますが、レイアウトを選択しなくてもかまいません。

2. 次を含む、ノードおよびリンクのデータを指定します。

   • ノードおよびリンクのデータに使用するコレクション

   • ノードの一意の識別子(id)を指定する属性

   • 親ノードにより含められた子ノードを識別するコンテナIDを含むノード・コレクション内の属性(オプション)

   • リンクの開始ノードIDと終了ノードIDを指定するリンク・コレクション内の属性

3. オプションで、ノードのラベルおよびマーカーの表示特性を構成します。

   ダイアグラムのノードは、dvt:markerコンポーネントを使用して、ノードの表示特性の多く(色、パターン、図形、境界線のスタイル、色を含む)を構成します。

4. オプションで、指定した属性に従ってノードを色、図形、パターン、不透明度、スケールXまたはスケールYでグループ分けするための属性グループを構成します。

5. オプションで、リンクのラベル、スタイル、色、幅、開始コネクタおよび終了コネクタの表示特性を構成します。

図26-136は、デフォルト・クライアント・レイアウトを使用するように構成されたダイアグラムを示しています。この例では、ダイアグラムは、属性グループを使用してノードのNodeGroup属性とNodeType属性の値によりノードをグループ分けするように構成されています。

図26-136 属性グループを使用するダイアグラムの例

ダイアグラムの作成ウィザードの完了後、ダイアグラムがページに追加されたら、プロパティ・インスペクタを使用してダイアグラムをさらにカスタマイズできます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のダイアグラム・コンポーネントの使用に関する説明を参照してください。

注意: ADFデータ視覚化ツール(DVT)コンポーネント・コレクションには、組織図やタイム・ラインなどをモデル化するために使用できる他のコンポーネントが含まれています。 たとえば、DVT階層ビューア・コンポーネントを使用して、従業員データにバインドされた組織図を表示することもできます。階層ビューアもノードおよびリンクを使用してデータを表示しますが、コンポーネントはノードのデータ・コレクション内の値に基づいてリンクを自動的に作成するため、リンクに個別のデータ・コレクションを提供する必要はありません。 他のDVTコンポーネントおよび一般的なユースケースの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「データ視覚化コンポーネントの概要」を参照してください。

26.13.1 ADFデータ・コントロールを使用したダイアグラムの作成方法

データ・コントロールを使用してDVTダイアグラムを作成するには、dvt:diagramコンポーネントを、ノード・データを含むコレクションと、ノード間の関係を表すリンクを含むコレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。

ヒント: また、コンポーネント・ギャラリからダイアグラムをドラッグして、ダイアグラムを作成することもできます。

始める前に:

次のタスクを完了する必要があります。

• 9.2項「アプリケーション・モジュールの作成と変更」の説明に従って、ダイアグラムのデータ・モデルで必要な、ビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。

  図26-137は、図26-136に示されているダイアグラムのデータ・コントロールを示しています。この例では、NodesView1にダイアグラム・ノードのデータ・コレクションが含まれ、LinksView1にダイアグラム・リンクのデータ・コレクションが含まれています。

  図26-137 ダイアグラム・ノードとダイアグラム・リンクのデータ・コレクションの例

  
  

  LinksView1データ・コレクション内のStartnode属性とEndnode属性には、NodesView1データ・コレクション内のNodeid属性への参照が含まれています。図26-138は、オブジェクト・ビューアでのリンク・コレクションのデータの一部を示しています。

  図26-138 ダイアグラム・サンプル・リンク・データ

  
  

• 『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のJSFページの作成方法に関する項に従ってJSFページを作成します。

データバインドされたダイアグラムを作成するには、次の手順を実行します。

1. 「データ・コントロール」パネルから、ダイアグラムに使用するノードを表すデータ・コレクションを選択します。

   たとえば、この項に示されたデータ・コレクションを使用するには、「NodesView1」を選択します。

2. コレクションをJSFページにドラッグし、メニューから「ダイアグラム」を選択します。

3. 「NBoxの作成 - クライアント・レイアウトの構成」ダイアログで、クライアント・レイアウトを選択します。

   デフォルト・クライアント・レイアウトを選択することも、独自のレイアウトを指定することもできますが、レイアウトを選択しなくてもかまいません。デフォルト・レイアウトを選択するには、図26-139に示す「デフォルト・クライアント・レイアウト」をクリックします。

   図26-139 デフォルト・クライアント・レイアウトが選択された「クライアント・レイアウトの構成」ダイアログ

   
   

   別のレイアウトを指定するには、「クライアント・レイアウトの選択」をクリックし、「機能」および「メソッド」ドロップダウン・メニューから、使用する機能およびメソッドを選択します。レイアウトを選択すると、レイアウトのオプション属性がダイアログに表示され、属性に目的の値を入力できます。

   図26-140は、カスタム・サークル・レイアウト用の設定済の「NBoxの作成 - クライアント・レイアウトの構成」ダイアログを示しています。この例では、選択されている機能名はDemoCircleLayoutであり、選択されているメソッドはcircleLayoutです。オプションのレイアウト属性には、anchor、center、curvedLinks、radialLabels、radiusおよびsortAttrがあります。

   図26-140 カスタム・レイアウトが選択された「クライアント・レイアウトの構成」ダイアログ

   
   

   選択したメソッドのコード・ソースを参照するには、「検索」をクリックして、ソース・コードを含むポップアップを表示します。図26-141は、DemoCircleLayout.circleLayoutメソッドが表示されたポップアップを示しています。

   図26-141 メソッドのソース・コードのポップアップが表示された「クライアント・レイアウトの構成」ダイアログ

   
   

4. 「ダイアグラムの作成 - ノードおよびリンク・データの指定」ダイアログで、データ・ソースおよびリンクの接続を指定するために次の値を入力します。

   • コレクション: ノード・コレクションに正しいデータ・コレクションが表示されていることを確認します。

     データ・コレクションを変更するには、「データソースの追加」をクリックし、リストから別のデータ・コレクションを選択します。

   • ノードID: 値を入力するか、ダイアグラム内のノードの一意の識別子を表すノードのデータ・コレクションの属性を選択します。

     または、値を返すEL式を入力するか、ドロップダウン・メニューから「式ビルダー」を選択して「式ビルダー」ダイアログを開くこともできます。「式ビルダー」ダイアログに関するヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。

   • コンテナID: 入力するか、ドロップダウン・リストを使用して、ダイアグラム内の子ノードの親ノードを表すノードのデータ・コレクションの属性を選択します。

     または、値を返すEL式を入力するか、ドロップダウン・メニューから「式ビルダー」を選択して「式ビルダー」ダイアログを開くこともできます。

   • コレクション(リンク): リンクを表すデータ・コレクションを入力するか、「データソースの追加」をクリックして、リストから別のデータ・コレクションを選択します。

   • 開始ノードID: 入力するか、ドロップダウン・リストを使用して、ダイアグラム内のソース・ノードを表すリンクのデータ・コレクションの属性を選択します。

     または、値を返すEL式を入力するか、ドロップダウン・メニューから「式ビルダー」を選択して「式ビルダー」ダイアログを開くこともできます。

   • 終了ノードID: 入力するか、ドロップダウン・リストを使用して、ダイアグラム内のターゲット・ノードを表すリンクのデータ・コレクションの属性を選択します。

     または、値を返すEL式を入力するか、ドロップダウン・メニューから「式ビルダー」を選択して「式ビルダー」ダイアログを開くこともできます。

   図26-142は、NodesView1およびLinksView1データ・コレクションを使用するダイアグラムに対する設定済ダイアログを示しています。この例では、「ノードID」の値がNodeidで、リンクの「開始ノードID」および「終了ノードID」の値がLinksView1データ・コレクション内のStartnodeおよびEndnode属性に設定されています。この例では、親コンテナに子はなく、「コンテナID」フィールドは使用されていません。

   図26-142 「ノードおよびリンク・データの指定」ダイアログの例

   
   

5. 「ダイアグラムの作成 - ダイアグラム・ノードの構成」ダイアログで、オプションで次の値を入力して、ノードのラベルおよびマーカーの表示特性を構成します。

   • ノード・ラベル: ドロップダウン・リストから、ノードのラベルに使用するデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。

     オプションで、ラベルの幅、高さおよび不透明度の値を入力できます。ダイアログのヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。

     
     

     ヒント: ダイアグラムに適した値がわからない場合は、ダイアグラムを作成してから、作成後に値を変更できます。

     
     

   • 色: ドロップダウン・リストで、提供された色からノードの色を選択するか、「カスタム色」を選択して「カラー・ピッカー」ダイアログに入力します。デフォルトのノード色は「ブラック」です。

   • パターン: ドロップダウン・リストからノード・パターンを選択します。パターンの有効な値には、12の選択肢の事前組込みパターン(大小の格子模様、ダイヤ、三角形など)があります。ノード色を指定した場合、選択した色でパターンが表示されます。デフォルトのノード・パターンは「なし」です。

   • 図形: ドロップダウン・リストから、ノードに使用する図形を選択します。有効な値は、circle、human、diamond、square、triangleDown、triangleUpおよびplusです。デフォルトのノードの図形は「円」です。

     
     

     注意: ノードの図形、色またはパターンを明示的に指定すると、ダイアグラム内の各ノードに同じ値が使用されます。なんらかのメジャーに従って色、パターンまたは図形を変える場合は、かわりにダイアグラムの作成・ウィザードの次のページで属性グループを構成します。

     
     

   • ソース: カスタム・ノード図形を使用する場合は、ノード・イメージに使用するSVGファイルの相対パスを入力するか、「検索」アイコンを使用して「SVGファイルの選択」ダイアログを開き、イメージ・ソースに移動します。

   • 境界線のスタイル: ドロップダウン・リストから、ダイアグラム内のすべてのノードの境界線のスタイルを選択します。有効な値は、「実線」、「破線」および「ドット」です。デフォルトのスタイルは実線です。

   • 枠線の色: ドロップダウン・リストから、ダイアグラム内のすべてのノードの境界線の色を選択するか、「カスタム色」を選択して「カラー・ピッカー」ダイアログに入力します。デフォルトの境界線の色は「ブラック」です。

     図26-143は、設定済の「ダイアグラムの作成 - ダイアグラム・ノードの構成」ダイアログを示しています。この例では、ノード・ラベルは相対的な幅20および相対的な高さ30で構成されています。ノードの図形は、水色の小さいクロスハッチ・パターンを持つ、頂点が上部にある三角形です。

     図26-143 「ダイアグラム・ノードの構成」ダイアログの例

     
     

     図26-144は、作成後の3つのダイアグラム・ノードの実行時ビューを示しています。

     図26-144 オプションの表示属性を使用するダイアグラム・ノード

     
     

6. (オプション)「ダイアグラムの作成 - 属性グループの構成」で、ダイアグラム・ノードの1つ以上の属性グループを構成するには、「グループ化ルール」セクションで「新規」をクリックし、次の値を入力します。

   • 値でグループ化: ドロップダウン・リストから、属性グループをグループ化するためのデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。

   • プロパティ: ドロップダウン・リストから、表示のためのグループ分けに使用するプロパティを選択します。使用可能なオプションは、「色」、「不透明度」、「パターン」、「スケールX」、「スケールY」および「図形」です。

     属性グループを複数のプロパティで区別するには、「複数の属性の選択」を選択します。「複数の属性の選択」で、目的のプロパティを選択し、「OK」をクリックします。

   • 凡例ラベル: ドロップダウン・リストから、ダイアグラムの凡例に表示するデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。

   • セクション・ラベル: ラベルにテキスト・リソースを使用するには、「テキスト・リソースの選択」を選択して、ラベルにテキスト・リソースを関連付けます。オブジェクトに格納されているデータにアクセスする場合や、EL式を使用してメソッドを参照および呼び出す場合は、「式ビルダー」を選択して「式ビルダー」ダイアログを開きます。

     
     

     注意: セクション・ラベルは、凡例のサブセクションの凡例内容を記したもので、凡例領域にレンダリングされます。たとえば、図26-136では、GroupとTypeがセクション・ラベルです。

     
     

   • オプションで、「値固有のルール」をクリックして属性グループ・ダイアログを拡張し、一致ルールまたは例外ルールを指定します。一致ルールは、単純なtrueまたはfalse条件に対して色またはパターンを指定するか、特定の値に一致させたい場合に使用します。グループ化値が特定の条件を満たしたときの色またはパターンを指定する場合は、例外ルールを使用します。

     一致ルールを指定するには、「一致ルール」セクションで「新規」をクリックして、次の値を入力します。

     • グループ値: 一致に対するカテゴリ値を入力します。カテゴリを表す文字列を入力するか、trueまたはfalseに設定できます。この値をtrueまたはfalseに設定する場合、「値でグループ化」フィールドには、次の例に示すように、trueまたはfalseに評価されるEL式(#{row.AmountInStock gt row.ReorderPoint}など)を指定する必要があります。

     • プロパティ: ドロップダウン・リストから、表示のためのグループ分けに使用するプロパティを選択します。使用可能なオプションは、「色」、「不透明度」、「パターン」、「スケールX」、「スケールY」および「図形」です。

     • プロパティ値: ドロップダウン・リストから、ノードの値が「グループ値」に一致する場合に表示する色またはパターンを選択します。色については、提供されているいずれかの色を選択するか、「カスタム・カラー」を選択して「カスタム・カラーの選択」ダイアログでカスタム・カラーを指定できます。パターンについては、提供されているいずれかの値を選択する必要があります。

     例外ルールを指定するには、「例外ルール」セクションで「新規」をクリックして、次の値を入力します。

     • 条件: trueまたはfalseに評価されるJSF EL式を入力します。「条件」フィールドに式を直接入力するか、「式ビルダー」を選択してJSF EL式を入力できます。

     • プロパティ: ドロップダウン・リストから、表示のためのグループ分けに使用するプロパティを選択します。使用可能なオプションは、「色」、「不透明度」、「パターン」、「スケールX」、「スケールY」および「図形」です。

     • プロパティ値: ドロップダウン・リストから、ノードの値が「条件」フィールドで指定した条件に一致する場合に表示する色またはパターンを選択します。色については、提供されているいずれかの色を選択するか、「カスタム・カラー」を選択して「カスタム・カラーの選択」ダイアログでカスタム・カラーを指定できます。パターンについては、提供されているいずれかの値を選択する必要があります。

     • 凡例ラベル: 凡例ラベルにテキスト・リソースを使用するには、ドロップダウン・リストから「テキスト・リソースの選択」を選択します。このフィールドにテキストを入力するか、「式ビルダー」を選択してJSF EL式を入力することもできます。

   図26-145は、図26-136のダイアグラムに対する設定済の「ダイアグラムの作成 - 属性グループの構成」ダイアログを示しています。この例では、ダイアグラムは2つの属性グループに対して構成されています。1つ目の属性グループではNodeGroup属性の値に基づいてノードの色を区別し、2つ目の属性グループはNodeType属性の値に基づいてノードの図形を区別しています。凡例には、両方のグループのセクション・ラベルが表示されます。

   図26-145 「属性グループの構成」ダイアログの例

   
   

7. 「ダイアグラムの作成 - ダイアグラム・リンクの構成」ダイアログで、次の値を入力して、リンク・ラベル、スタイルおよびコネクタの表示特性を構成します。

   • リンク・スタイル: ドロップダウン・リストから、ダイアグラム内のすべてのノードの境界線のスタイルを選択します。有効な値は、「実線」、「破線」、「ドット」および「1点鎖線」です。デフォルトのスタイルは実線です。

   • リンク幅: リンクの幅をピクセル単位で入力します。デフォルト値は1です。

   • リンク色: ドロップダウン・リストで、提供された色からリンクの色を選択するか、「カスタム色」を選択して「カラー・ピッカー」ダイアログに入力します。デフォルトのリンク色は「ブラック」です。

   • コネクタの開始: リンクの開始コネクタの値を入力します。有効な値は、「なし」、「arrowOpen」、「arrow」、「arrowConcave」、「circle」、「rectangle」および「rectangleRounded」です。デフォルト値は指定なしです。

   • コネクタの終了: リンクの終了コネクタの値を入力します。有効な値は、「なし」、「arrowOpen」、「arrow」、「arrowConcave」、「circle」、「rectangle」および「rectangleRounded」です。デフォルト値は指定なしです。

   • ラベル: ドロップダウン・リストから、リンクのラベルに使用するデータ・コレクションの属性を選択します。提供されているいずれかの属性を選択するか、「式ビルダー」を選択してJSF EL式を入力できます。

   図26-146は、設定済の「ダイアグラムの作成 - ダイアグラム・リンクの構成」ダイアログを示しています。この例では、リンクはラベルおよびデフォルトの幅とスタイルで構成されています。リンクの色はマルーンであり、コネクタの開始部に円、コネクタの終了部に矢印が表示されます。

   図26-146 「ダイアグラム・リンクの構成」ダイアログの例

   
   

   図26-147は、作成後の3つのダイアグラム・ノードの実行時ビューを示しています。

   図26-147 オプションの表示属性を使用するダイアグラム・リンク

   
   

8. ダイアグラムの作成ウィザードを完了したら、「終了」をクリックしてウィザードを終了し、ダイアグラムをページに追加します。

26.13.2 データバインドされたダイアグラムを作成すると行われる処理

ダイアグラムを「データ・コントロール」パネルからドロップすると、次の処理が行われます。

• JSFページのページ定義ファイル(pageNamePageDef.xml)内にダイアグラムのバインディングが作成されます。

• dvt:diagramコンポーネントのJSFページに必要なタグが追加されます。

• 作成中にデフォルト・クライアント・レイアウトを選択した場合は、そのレイアウトがADF Faces実行時環境に登録されます。

26.13.2.1 ダイアグラム・コンポーネントのバインディング

次のコード・サンプルは、JDeveloperで図26-137のデータ・コレクションを使用してdvt:diagramコンポーネントに生成されたバインディングを示しています。

<executables>
  <variableIterator id="variables"/>
    <iterator Binds="NodesView1" RangeSize="-1" DataControl="AppModuleDataControl" id="NodesView1Iterator"/>
    <iterator Binds="LinksView1" RangeSize="-1" DataControl="AppModuleDataControl" id="LinksView1Iterator"/>
</executables>
<bindings>
  <tree IterBinding="NodesView1Iterator" id="NodesView1">
    <nodeDefinition DefName="model.NodesView" Name="NodesView10">
      <AttrNames>
        <Item Value="NodeGroup"/>
        <Item Value="NodeType"/>
        <Item Value="Nodeid"/>
      </AttrNames>
    </nodeDefinition>
  </tree>
  <tree IterBinding="LinksView1Iterator" id="LinksView1">
    <nodeDefinition DefName="model.LinksView" Name="LinksView10">
      <AttrNames>
        <Item Value="Endnode"/>
        <Item Value="Startnode"/>
      </AttrNames>
    </nodeDefinition>
  </tree>
</bindings>

ダイアグラムにデータを移入するためのルールは、ノード定義として定義されます。各ノード定義はノードを参照し、「ダイアグラムの作成」ダイアログで指定されたビュー・オブジェクトと属性をリンクします。pageNamePageDef.xmlファイルの詳細は、付録A「pageNamePageDef.xml」を参照してください。

26.13.2.2 ダイアグラム・コンポーネントのJSFページのコード

次の例は、図26-136に示されたダイアグラムに対してJSFページで生成されたコードを示しています。

<dvt:diagram id="dg1" layout="DiagramSampleDiagramLayout">
  <dvt:diagramNodes var="node" id="dnodes1"
                    value="#{bindings.NodesView1.collectionModel}">
    <dvt:diagramNode label="#{node.Nodeid}" id="dn1" nodeId="#{node.Nodeid}">
      <f:facet name="zoom100">
        <dvt:marker width="20" id="m1" height="30">
          <dvt:attributeGroups id="ag1" label="#{node.NodeGroup}" type="color"
                               value="#{node.NodeGroup}"/>
          <dvt:attributeGroups id="ag2" label="#{node.NodeType}" type="shape"
                               value="#{node.NodeType}"/>
        </dvt:marker>
      </f:facet>
    </dvt:diagramNode>
  </dvt:diagramNodes>
  <dvt:diagramLinks var="link" value="#{bindings.LinksView1.collectionModel}"
                    id="dl1">
    <dvt:diagramLink startNode="#{link.Startnode}" id="dl2"
                     endNode="#{link.Endnode}"/>
  </dvt:diagramLinks>
  <dvt:clientLayout method="DiagramSampleDiagramLayout.forceDirectedLayout"
                    featureName="DiagramSampleDiagramLayout"
                    name="DiagramSampleDiagramLayout">
    <f:attribute name="optimalLinkLength" value="75"/>
  </dvt:clientLayout>
  <dvt:legend id="l1">
    <dvt:legendSection label="#{viewcontrollerBundle.GROUP}" source="dnodes1:ag1"
                       id="ls1"/>
    <dvt:legendSection label="#{viewcontrollerBundle.TYPE}" source="dnodes1:ag2"
                       id="ls2"/>
  </dvt:legend>
</dvt:diagram>

26.13.2.3 デフォルト・クライアント・レイアウトのファイルおよび場所

デフォルト・クライアント・レイアウトを使用してダイアグラムを作成すると、JDeveloperによってADFランタイム環境に力指向レイアウトがJavaScript (JS)機能として登録されます。作成プロセスによって、次のネーミング規則を使用してJSファイルがViewController/src/js/layoutディレクトリ内に自動的に追加されます。

ApplicationNameDiagramLayout.js

たとえば、アプリケーションの名前がDiagramSampleの場合、JSファイルの名前はDiagramSampleDiagramLayout.jsになります。ファイルの内容にはforceDirectedLayoutメソッドが含まれており、ファイルはJDeveloperで開くことができます。また、プロパティ・インスペクタで「コンポーネント定義の編集」をクリックして、「ダイアグラムの編集 - クライアント・レイアウトの構成」ダイアログを表示し、「検索」をクリックしてメソッド・ポップアップを表示することもできます。

また、JDeveloperによって、adf-js-features.xmlファイル(まだ存在しない場合)が作成され、機能名としてApplicationNameDiagramLayout、機能クラスとしてJSファイルのパスが追加されます。次の例に、DiagramSampleという名前のアプリケーションのadf-js-features.xmlファイルを示します。

<?xml version="1.0" encoding="UTF-8" ?>
<features xmlns="http://xmlns.oracle.com/adf/faces/feature">
  <feature>
    <feature-name>DiagramSampleDiagramLayout</feature-name>
    <feature-class>js/layout/DiagramSampleDiagramLayout.js</feature-class>
  </feature>
</features>

26.13.2.4 ダイアグラムのプロパティとレイアウトの変更

ダイアグラムを作成した後は、「ダイアグラムの編集」ダイアログを使用して、別のクライアント・レイアウトを指定したり、ラベルなどの要素を追加したりできます。このダイアログを開くには、dvt:diagramコンポーネントのプロパティ・インスペクタで「編集」アイコンを使用します。また、ダイアグラムのプロパティは、ビジュアル・エディタで直接カスタマイズしたり、プロパティ・インスペクタで値を設定することによってカスタマイズすることもできます。

たとえば、図26-136に示したツールチップをダイアグラムに追加するには、プロパティ・インスペクタまたはコード・エディタで、ダイアグラム・ノードのshortDesc属性の値を入力できます。

<dvt:diagramNode label="#{node.Nodeid}" id="dn1" nodeId="#{node.Nodeid}"
                 shortDesc="Group: #{node.NodeGroup} Type: #{node.NodeType}">
  <f:facet name="zoom100">
    ... contents omitted
  </f:facet>
</dvt:diagramNode>

ダイアグラムのカスタマイズに関する詳細および例は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のダイアグラム・コンポーネントの使用に関する説明を参照してください。