ヘッダーをスキップ
Oracle® Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド
11gリリース1(11.1.1.6.0)
B52028-04
  目次へ移動
目次
索引へ移動
索引

前
 
次
 

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

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

この章の内容は次のとおりです。

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

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

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

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

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

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

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

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

図26-1に、棒グラフ、円グラフ、ダイアル・ゲージおよびステータス・メーター・ゲージなど、実行時の様々なADFデータ視覚化コンポーネントを示します。

図26-1 ADFデータ視覚化コンポーネントが表示されたダッシュボード

ADFデータ視覚化コンポーネントが表示されたダッシュボード

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

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

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

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

ADFグラフのコンポーネント・ギャラリ

注意:

一部のグラフのタイプでは、非常に具体的な種類のデータが必要です。選択したグラフのタイプの表示に十分なデータが含まれていないデータ・コレクションにグラフをバインドすると、グラフは表示されず、データが不十分であることを示すメッセージが表示されます。

また、コンポーネント・パレットからグラフ・コンポーネントをドラッグして、グラフを作成することもできます。この方法では、コンポーネントをデータにバインドする前に、グラフのユーザー・インタフェースを設計できます。コンポーネント・ギャラリが開き、グラフ・タイプ、説明および簡単なレイアウト・オプションが表示されます。


注意:

ADFスパークチャートは、コンポーネント・パレットからのみ挿入可能で、後にデータにバインドします。詳細は、26.2.4項「データバインドされたスパークチャートの作成方法」を参照してください。

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

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

カテゴリ 説明

データが塗りつぶされた面として表されるグラフを作成します。面グラフは、直近12か月の売上など、ある期間にわたる傾向を示すために使用します。面グラフでは、一方の軸に沿って少なくとも2つのグループのデータが必要です。通常、この軸には期間(月など)のラベルが付けられます。

データが一連の垂直な棒として表されるグラフを作成します。ある期間にわたる傾向を調べる場合や、複数のアイテム(複数の地域における異なる商品部門の売上など)を同時に比較する場合に使用します。

棒(横)

Y軸に沿って棒を横向きに表示するグラフを作成します。方向を示して傾向の表示や値の比較を可能にするために使用します。

バブル

データが丸いデータ・マーカー(バブル)の場所と大きさによって表されるグラフを作成します。3タイプの値の相関を示すために使用します(特に、多数のデータ・アイテムがあり、全般的な関係を確認する場合)。たとえば、従業員の給与(x軸)、経験年数(y軸)および生産性(バブルの大きさ)を図示するためにバブル・グラフを使用します。このようなグラフでは、生産性を給与および経験と比較して調べることができます。

組合せ

異なるタイプのデータ・マーカー(棒、線または面)を使用して、異なる種類のデータ・アイテムを表示するグラフを作成します。棒と線、棒と面、線と面またはこの3つすべてを比較するために使用します。

ファンネル

1つのプロセス内の複数のステップに関連するデータを図示するグラフを作成します。ステップは、水平な円筒に対して垂直なスライスとして表示されます。特定のステップまたはスライスの実際の値がそのスライスの割当て制限に達すると、そのスライスは塗りつぶされます。通常、ファンネル・グラフでは、ある区切りの値(時間など)に対する実際の値と目標の値が必要です。たとえば、会計年度の四半期という区切りにおいて、あるプロセス(セールス・パイプラインなど)が目標に向かう動きを確認するためにこのコンポーネントを使用します。

折れ線

データが線、一連のデータ・ポイントまたは線で結ばれた複数のデータ・ポイントとして表されるグラフを作成します。折れ線グラフでは、グループ内の各メンバーに対し、少なくとも2つの点のデータが必要です。たとえば、月単位の折れ線グラフでは、少なくとも2つの月のデータが必要です。通常、特定の色の線がデータの各グループ(アメリカ、ヨーロッパ、アジアなど)に関連付けられます。複数のアイテムを同じ期間で比較するために使用します。

パレート

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

円が分割され、データの各グループが円の中のスライスとして表されるグラフを作成します。それぞれの商品群から得られる収益など、各区分と全体との関係を示すために使用します。

レーダー

円状の線グラフとして表示されるグラフを作成します。直近3年間の毎月の売上など、周期的に起こるパターンを示すために使用します。

散布図/極

データがデータ・マーカーの場所によって表されるグラフを作成します。人気商品の売上とコストなど、2つの異なる種類のデータ値の相関を示すために使用します。散布図は、多数のアイテム間の全般的な関係を確認する際に特に便利です。

スパークチャート

表の列に、またはテキストともにインラインでトレンドまたはバリエーションを表したシンプルな要約グラフを作成します。スパークチャートはコンポーネント・パレットを使用して挿入し、後にデータにバインドしたときに、コンポーネント・ギャラリでのみ使用できます。

株価

データが株式の高値、安値および終値を示すグラフを作成します。それぞれの株式マーカーにより、3つの異なる値が表示されます。


図26-3は、StoreFrontModuleアプリケーションの「Hot Items Statistics」ページに表示される横棒グラフを示しています。このグラフでは、各商品の注文数が表示されるため、最も頻繁に注文されている商品を簡単に識別できます。

図26-3 「Hot Items Statistics」グラフ

「Hot Items Statistics」グラフ

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

26.2.1 グラフの作成方法

グラフはデータ・コレクションに基づいています。Oracle ADFのデータ・コントロールを使用すると、Oracle Jdeveloperでは宣言的なタスクとなります。「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップします。

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

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

    たとえば、StoreFrontModuleアプリケーションの「Hot Items Statistics」ページで各商品に対する注文数を表示する棒グラフを作成するには、ProductOrdersCountコレクションを選択します。図26-4に、「データ・コントロール」パネルでのProductOrdersCountコレクションを示します。

    図26-4 商品の注文数をカウントするデータ・コレクション

    商品の注文数をカウントするデータ・コレクション
  2. コレクションをJSFページにドラッグし、ポップアップ・メニューから「グラフ」を選択してコンポーネント・ギャラリを表示します。

  3. コンポーネント・ギャラリからグラフ・カテゴリおよびグラフ・タイプを選択し、「OK」をクリックします。

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

    表示されるダイアログの名前および入力フィールドのラベルは、選択したグラフのカテゴリおよびタイプによって異なります。たとえば、カテゴリとして「棒(横)」を、タイプとして「棒」を選択した場合、表示されるダイアログの名前は「横棒グラフの作成」で、入力フィールドには「棒」というラベルがつけられます。

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

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

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

    • 棒が表しているデータの表示をY軸に変更する場合は、「Y軸の棒と入替え」ボタンをクリックします。このアクションでは、棒とY軸属性が単純に手動で入れ替えられるのではなく、グラフの系列とグループの間で非表示のデータ・レイヤーが切り替えられます。

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

      • 入力済属性

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

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

      • 名前-値ペア

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

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

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

    図26-5は、ProductOrdersCountデータ・コレクションにあるItemsOrdered属性のデータを使用してグラフを生成する「横棒グラフの作成」ダイアログを示しています。ProductName属性は、表示されたデータにラベルを提供します。

    図26-5 ProductsOrderCountの「横棒グラフの作成」ダイアログ

    ProductsOrderCountの「横棒グラフの作成」
  5. オプションで、「プレビュー」タブをクリックして、棒グラフとそのデータを現在の設定でプレビューできます。必要に応じて、「構成」タブをクリックし、棒グラフの仕様を調整できます。

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

データ・バインディング・ダイアログの完了後は、プロパティ・インスペクタを使用してグラフ属性の設定を指定できます。また、グラフ・タグに関連付けられた子タグを使用してグラフをさらにカスタマイズできます。


注意:

emptyText属性を使用して、グラフに返すデータがないときに表示されるテキストを指定します。デフォルトのメッセージは、「表示するデータがありません」です。この属性では、メッセージのフォーマット設定にHTMLを使用できます。また、表示可能なデータ・プロパティに評価されるEL式も使えます。グラフを表示できない場合(グラフに対して認可の制限が設定されている場合など)は、「アクセスが拒否されました」と表示されます。

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

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

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

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

JDeveloperにより生成されるデータ・バインディングXMLは、選択したグラフのタイプによって変わります。XMLは、作成する具体的なグラフ・タイプの物理モデルを表しています。例26-1はページ定義ファイルにJDveloperが生成したバインディングを示しています。ここでは、ProductOrdersCountデータ・コレクションにあるItemsOrdered属性のデータを使用して横棒グラフが作成されています。

例26-1 ADF棒(横)グラフのバインディングXML

<graph IterBinding="ProductOrdersCountIterator" id="ProductOrdersCount"
           xmlns="http://xmlns.oracle.com/adfm/dvt" type="BAR_HORIZ_CLUST">
      <graphDataMap leafOnly="true">
        <series>
          <data>
            <item value="ItemsOrdered"/>
          </data>
        </series>
        <groups>
          <item value="ProductName" label="ProductName"/>
        </groups>
      </graphDataMap>
    </graph>

例26-2に、ProductOrdersCountデータ・コレクションをJSFページにドラッグしたときに横棒グラフに対して生成されるコードを示します。

例26-2 ADF棒(横)グラフのJSFコード

<dvt:horizontalBarGraph id="horizontalBarGraph1"
                                value="#{bindings.ProductOrdersCount.graphModel}"
                                subType="BAR_HORIZ_CLUST">
          <dvt:background>
            <dvt:specialEffects/>
          </dvt:background>
          <dvt:graphPlotArea/>
          <dvt:seriesSet>
            <dvt:series/>
          </dvt:seriesSet>
          <dvt:o1Axis/>
          <dvt:y1Axis/>
          <dvt:legendArea automaticPlacement="AP_NEVER"/>
        </dvt:horizontalBarGraph>

26.2.3 マスター/ディテール処理のグラフの行選択リスナーの使用について

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

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

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

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

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

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

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

  3. ディテール・コンポーネントの親タグのpartialTriggers属性が正しく設定されていることを確認します。この属性には、グラフ・コンポーネントのIDを設定する必要があります。

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

26.2.4 データバインドされたスパークチャートの作成方法

スパークチャートは、表の列に、またはテキストともにインラインでトレンドまたはバリエーションを表したシンプルな要約グラフです。折れ線、棒、および面スパークチャートには、データ値の系列が1つ必要です。図26-6に、表の列に描画された折れ線スパークチャートの例を示します。

図26-6 折れ線スパークチャート

折れ線スパークチャート

フローティング棒スパークチャートには、データ値の系列がフローティング・オフセットに1つ、棒の値のために1つの合計2つ必要です。図26-7に、表の列内のフローティング棒スパークチャートの例を示します。

図26-7 フローティング棒スパークチャート

フローティング棒スパークチャート

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

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

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

スパークチャートにデータを提供するには、次のいずれかの方法を使用します。

  • dvt:sparkItemタグでデータを静的に指定します。例26-3に、スパークチャートに静的データを提供する例を示します。

    例26-3 スパークチャートの静的データ

    <dvt:sparkChart>
      <dvt:sparkItem value="20"/>
      <dvt:sparkItem value="15"/>
      <dvt:sparkItem value="30"/>
    </dvt:sparkChart>
    
  • dvt:sparkItemタグでEL式を使用してデータを指定します。例26-4に、EL式を使用してデータを提供する例を示します。

    例26-4 スパークチャートのEL式データ

    <af:table value="#{sample.tableModel}" var="row">
      <af:column>
        <dvt:sparkChart>
          <dvt:sparkItem value="#{row.col1}"/>
          <dvt:sparkItem value="#{row.col2}"/>
          <dvt:sparkItem value="#{row.col3}"/>
        </dvt:sparkChart>
      </af:column>
    </af:table>
    
    
  • テーブルで子アクセッサを使用してデータを指定します。例26-5に、af:iteratorを使用して、データ・コレクション・モデルrow.stockValuesからすパークチャート・データを提供する例を示します。

    例26-5 テーブル子アクセッサのスパークチャート・データ

    <af:table value="#{sample.tableModel}" var="row">
      <af:column>
        <dvt:sparkChart>
          <af:iterator value="#{row.stockValues}" var="data">
             <dvt:sparkItem value="#{data.closeValue}"/>
          </af:iterator>
        </dvt:sparkChart>
      </af:column>
    </af:table>
    
    

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

ゲージでは、各データ・ポイントに対し、そのデータ・ポイントが許容範囲の内と外のどちらに含まれるかが示されます。データバインドされた1つのゲージ・コンポーネントは、使用するデータ・コレクション内の行数に応じて、単一のゲージまたは一連のゲージ全部を作成できます。コレクション内の各行には、単一のゲージに対する値が含まれます。

ゲージ用のコンポーネント・ギャラリを使用すると、次のゲージのカテゴリから選択できます。

これらのカテゴリにはそれぞれ、多数の様々なタイプのゲージが含まれます。ゲージの作成時に表示されるコンポーネント・ギャラリを見てまわり、使用可能なすべてのゲージ、カテゴリ・タイプおよびそれぞれの説明を確認してください。図26-9に、ADFゲージ用に表示されるコンポーネント・ギャラリを示します。

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

ADFゲージのコンポーネント・ギャラリ

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

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

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

ADFゲージ・コンポーネントを使用して、悪いから良いまで変化する値範囲(しきい値)を指定した、背景に対するダイアル・ゲージを作成することができます。ゲージのインジケータではメトリックの現在の値が示される一方、図形によってその値のステータスを簡単に評価できます。

図26-10は、WarrantyPeriodMonthsデータを格納するコレクションからゲージを作成した場合に表示される、単一のダイアル・ゲージを示しています。表示されているゲージは1つのみであるため、このデータ・コレクションに含まれているのは単一行のデータのみです。メトリックの値(ここでは6)は、ゲージの下のラベルに表示されています。ゲージの値の範囲は0から24です。しきい値の範囲は8、16、24で、不良(8未満)は赤、適正(8から16)は黄、優良(17以上)は緑で塗りつぶされています。

図26-10 月単位の保証を示すダイアル・ゲージ

月単位の保証を示すダイアル・ゲージ

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

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

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

    たとえば、特定の倉庫にある商品に対する現在の月単位の保証期間を表示するダイアル・ゲージをStoreFrontModuleアプリケーションで作成するには、WarehouseStockLevelsコレクションを選択します。図26-11に、「データ・コントロール」パネルでのWarehouseStockLevelsコレクションを示します。

    図26-11 商品の保証期間を含むデータ・コレクション

    商品の保証期間を含むデータ・コレクション
  2. コレクションをJSFページにドラッグし、ポップアップ・メニューから「ゲージ」を選択します。

  3. 「コンポーネント・ギャラリ」ダイアログで、カテゴリ、ゲージのタイプおよびクイック・スタート・レイアウトを選択して、「OK」をクリックします。

  4. このダイアログの「構成」タブで、次の操作を行います。

    • 「メトリック」ボックスで、ゲージで図示する実際の値を含むデータ・コレクション内の列を選択します。このダイアログで必須なのは、この値のみです。

    • 最小ボックスで、ゲージ範囲の最小値がデータ・コレクションに格納されている場合は、この値が含まれている列を選択します。

    • 最大ボックスで、ゲージ範囲の最大値がデータ・コレクションに格納されている場合は、この値が含まれている列を選択します。

    • 「上位ラベル」ボックスで、ゲージの上部ラベルに表示する値がデータ・コレクションに格納されている場合は、この値が含まれている列を選択します。

    • 「下位ラベル」ボックスで、ゲージの下部ラベルに表示する値がデータ・コレクションに格納されている場合は、この値が含まれている列を選択します。

    • 「しきい値属性」リストで、しきい値を指定する場合は、「追加」アイコンをクリックしてしきい値ごとに1行挿入し、その行に値を指定します。ゲージでは最大値を自動的にしきい値設定として扱うため、ゲージの最大値に等しいしきい値は作成しないでください。

  5. オプションで、「プレビュー」タブをクリックして、ゲージとそのデータを現在の設定でプレビューできます。必要に応じて、「構成」タブをクリックし、ゲージの仕様を調整できます。

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

図26-12に、ページ定義ファイルでWarehouseStockLevelsのゲージ・バインディングを調べる場合に表示されるダイアログを示します。


注意:

データソースおよびメトリック・データ値は必須です。このダイアログの他のデータ値はオプションであり、プロパティ・インスペクタを使用してゲージ・タグに指定できます。

図26-12 「ゲージの編集」ダイアログ

「ゲージの編集」ダイアログ

ゲージのバインディングの完了後は、プロパティ・インスペクタで、ゲージ・タグおよびその子タグの追加属性の値を設定し、コンポーネントをカスタマイズできます。

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

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

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

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

例26-6に、倉庫内の商品に対する月単位の保証期間を表示するダイアル・ゲージに生成された行セット・バインディングを示します。このコード例では、ゲージ・メトリックがデータ・コレクション内のWarrantyPeriodMonths列から動的に値を受け取り、残りデータ値が静的に設定されていることを示しています。

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

<gauge IterBinding="WarehouseStockLevelsIterator" id="WarehouseStockLevels"
           xmlns="http://xmlns.oracle.com/adfm/dvt">
      <gaugeDataMap>
        <item type="threshold" value="8" valueType="literal"/>
        <item type="threshold" value="16" valueType="literal"/>
        <item type="metric" value="WarrantyPeriodMonths"/>
        <item type="minimum" value="0" valueType="literal"/>
        <item type="maximum" value="24" valueType="literal"/>
        <item type="topLabel" value="Warranty (Months)" valueType="literal"/>
      </gaugeDataMap>
    </gauge>

例26-7に、ダイアル・ゲージに対して­JDeveloperによりJSFページに生成されたコードを示します。<dvt:thresholdSet>要素は、しきい値ごとに<dvt:threshold>要素を1つ指定しています。しきい値範囲の色は、fillColor属性の値で指定されるとおり、赤、黄および緑にデフォルト設定されています。<dvt:indicator>要素は、使用するインジケータとしてIT_NEEDLEを指定しています。これにより、実行時に針がレンダリングされます。<dvt:indicator>のデフォルト値では、線(IT_LINE)がレンダリングされます。

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

<dvt:gauge id="gauge1"
           value="#{bindings.WarehouseStockLevels.gaugeModel}"
           gaugeType="DIAL" imageFormat="FLASH">
  <dvt:gaugeBackground>
    <dvt:specialEffects fillType="FT_GRADIENT">
      <dvt:gradientStopStyle/>
    </dvt:specialEffects>
  </dvt:gaugeBackground>
  <dvt:thresholdSet>
    <dvt:threshold text="Low" fillColor="#d62800"/>
    <dvt:threshold text="Medium" fillColor="#ffcf21"/>
    <dvt:threshold text="High" fillColor="#84ae31"/>
  </dvt:thresholdSet>
  <dvt:gaugeFrame/>
  <dvt:indicator type="IT_NEEDLE"/>
  <dvt:indicatorBase/>
  <dvt:gaugePlotArea/>
  <dvt:tickLabel/>
  <dvt:tickMark/>
  <dvt:topLabel/>
  <dvt:bottomLabel/>
  <dvt:metricLabel position="LP_WITH_BOTTOM_LABEL"/>
</dvt:gauge>

26.3.3 データバインドされたステータス・メーター・ゲージ・セットの作成方法

ADFゲージ・コンポーネントを使用して、ステータス・メーター・ゲージを作成します。このゲージでは、外側の四角形が示している範囲に対する現在の測定レベルを内側の四角形が表しています。ステータス・メーター・ゲージのグラフィックにより、測定の状態や進行状況を簡単に評価することができます。

図26-13は、いくつかの倉庫における在庫レベルを表す一連のステータス・メーター・ゲージを示しています。このゲージ・セットは、1つのゲージ・コンポーネントをデータ・コレクション(WarehouseStockLevels)にバインドした結果として生成されます。このデータ・コレクションには、各倉庫につき1行のデータが含まれています。各行により、セットに1つのゲージが生成されます。セット内のすべてのゲージは最小値(0)から最大値(1500)までの同じ範囲値を共有し、しきい値が500、1000および1500に設定されています。セット内の各ゲージでは、それが表す倉庫の名前と、その倉庫の在庫メトリックが下部ラベルに表示されています。

図26-13 倉庫の在庫を示すステータス・メーター・ゲージ・セット

倉庫の在庫を示すステータス・メーター・ゲージ・セット

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

データバインドされたステータス・メーター・ゲージを作成する手順:

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

    たとえば、倉庫の在庫量を表示するステータス・メーター・ゲージをStoreFrontModuleアプリケーションで作成するには、WarehouseStockLevelsコレクションを選択します。

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

  3. コンポーネント・ギャラリで、次のようにします。

    • 「カテゴリ」リストで、「ステータス・メーター」または「ステータス・メーター(垂直)」を選択します。

    • 作成するゲージのタイプを選択します。

    • 実行時のゲージのクイック・スタート・レイアウトを選択します。

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

  5. 表示される「ゲージの作成」ダイアログで、次に説明しているように値を選択します。

    • 「メトリック」ドロップダウン・リストから属性バインディングを選択します。この属性バインディングには、ゲージで図示する実際の値が含まれます。

    • 「最小」フィールドに、ゲージ範囲の最小値がデータ・コレクションに格納されている場合は、最小値を入力します。

    • 「最大」フィールドに、ゲージ範囲の最大値がデータ・コレクションに格納されている場合は、最大値を入力します。

    • 「上位ラベル」フィールドで、実行時にゲージの上部にラベルを表示する場合は、値を入力または選択します。

    • 「下位ラベル」フィールドで、実行時にゲージの下部にラベルを表示する場合は、値を入力または選択します。

    • 「しきい値属性」リストで、しきい値を指定する場合は、「追加」アイコンをクリックしてしきい値ごとに1行挿入し、そのしきい値の値を指定します。ゲージでは最大値を自動的にしきい値設定として扱うため、ゲージの最大値に等しいしきい値は作成しないでください。

  6. オプションで、「プレビュー」タブをクリックして、ゲージとそのデータを現在の設定でプレビューできます。必要に応じて、「構成」タブをクリックし、ゲージの仕様を調整します。

    図26-14に、図26-13で示したステータス・メーター・ゲージ・セットの設定を示します。このダイアログでは、必要なメトリック値の他に、しきい値とゲージの下部ラベルに表示される倉庫の名前を設定しています。

    図26-14 倉庫の在庫を示すゲージ・セットの「ゲージの作成」ダイアログ

    倉庫の在庫用のゲージ・バインディング・ダイアログ
  7. 「OK」をクリックします。

ゲージのバインディングの完了後は、プロパティ・インスペクタで、必要に応じてゲージ・タグおよびその子タグの追加属性の値を設定し、コンポーネントをカスタマイズできます。

26.3.4 データ・コントロールからのステータス・メーター・ゲージの作成時の処理

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

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

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

例26-8に、各倉庫の在庫レベルを表示するステータス・メーター・ゲージ・セット(図26-14を参照)に生成された行セット・バインディングを示します。この例では、ゲージ・メトリック属性とデータ・コレクション内のQuantityOnHand値との間に作成された値バインディングが示されています。また、Bottom Label属性とデータ・コレクション内のWarehouseName値の間の値バインディングも示されています。

例26-8 ADFステータス・メーター・ゲージ・セットのバインディング・コード

<gauge IterBinding="WarehouseStockLevelsIterator" id="WarehouseStockLevels"
           xmlns="http://xmlns.oracle.com/adfm/dvt">
      <gaugeDataMap>
        <item type="threshold" value="500" valueType="literal"/>
        <item type="threshold" value="1000" valueType="literal"/>
        <item type="metric" value="QuantityOnHand"/>
        <item type="minimum" value="0" valueType="literal"/>
        <item type="maximum" value="1500" valueType="literal"/>
        <item type="bottomLabel" value="WarehouseName"/>
      </gaugeDataMap>
    </gauge>

例26-9に、倉庫の在庫レベルを示すステータス・メーター・ゲージ・セットに対してJSFページで生成されるコードを示します。gaugeSetColumnCount属性は、ゲージを2列で表示することを指定します。また、このコードは、Low、MediumおよびHighの3つのしきい値を指定します。簡潔にするため、inlineStyle属性の値は省略されています。

例26-9 ADFステータス・メーター・ゲージ・セットのJSFページのコード

<dvt:gauge id="gauge1"
           value="#{bindings.WarehouseStockLevels.gaugeModel}"
           gaugeType="STATUSMETER" imageFormat="FLASH">
  <dvt:gaugeBackground>
    <dvt:specialEffects fillType="FT_GRADIENT">
      <dvt:gradientStopStyle/>
    </dvt:specialEffects>
  </dvt:gaugeBackground>
  <dvt:thresholdSet>
    <dvt:threshold text="Low" fillColor="#d62800"/>
    <dvt:threshold text="Medium" fillColor="#ffcf21"/>
    <dvt:threshold text="High" fillColor="#84ae31"/>
  </dvt:thresholdSet>
  <dvt:indicatorBar/>
  <dvt:gaugePlotArea/>
  <dvt:tickLabel/>
  <dvt:tickMark/>
  <dvt:topLabel/>
  <dvt:bottomLabel/>
  <dvt:metricLabel position="LP_WITH_BOTTOM_LABEL"/>
</dvt:gauge>

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

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

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

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

年別および商品別の売上を示すピボット・テーブル

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

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

データのCSVファイル

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

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

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

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

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


ヒント:

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

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

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

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

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

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

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

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

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


      注意:

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

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

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

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

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

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

      属性のコンテキスト・メニューの表示

      注意:

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

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

      • 入力済属性

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

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

      • 名前-値ペア

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      ドリルのフィルタが展開されたピボット・テーブル

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


      注意:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      データ・ソートの例
  8. ピボット・テーブルの作成ウィザードの「ピボット・テーブルのプレビュー」ページで、ピボット・テーブルに表示されるデータをそのときの設定でプレビューできます。プレビューでは、コードのコンパイルや実行は不要です。プレビューが希望どおりでない場合は、バインディング・ウィザード・ページで設定を変更し、「プレビュー」ページに再び戻ってデータが意図したとおりに表示されることを確認します。

    図26-30は、図26-15に示す売上ピボット・テーブルに対するウィザードの「ピボット・テーブルのプレビュー」ページを示しています。

    図26-30 ピボット・テーブルの実際のデータ・プレビュー

    ピボット・テーブルの実際のデータ・プレビュー

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

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

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

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

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

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

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

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

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

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

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

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

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

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

例26-10 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.4.2.2 ピボット・テーブルとピボット・フィルタ・バーのコード

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

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

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

26.4.3 ピボット・テーブルの属性の集計について

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

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

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

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

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

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

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

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

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

26.4.3.2 重複行のカスタム集計

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

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

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

  • 平方フィート属性の<item>要素で、aggregateTypeAVERAGEに設定します。

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

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

    <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.4.4 ピボット・テーブルへの初期ソートの指定について

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

表26-2 categorySort要素の属性値

属性 説明

item

カテゴリ・ソートを設定する列アイテム、行アイテムまたはページ・アイテムを指定します。この属性の値は必須です。

direction

初期のソート方向を指定します。有効な値はASCENDINGおよびDESCENDINGです。この属性の値は必須です。


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

表26-3 qdrSliceSort要素の属性値

属性 説明

direction

初期のソート方向を指定します。有効な値はASCENDINGおよびDESCENDINGです。この属性の値は必須です。

edge

columnsまたはrowsを指定し、データをソートするエッジを決定します。この属性の値は必須です。

grouped

親のスライスをソートする場合はtrue、エッジ全体にわたってソートする場合はfalseを指定します。この属性の値は任意です。デフォルト値はfalseです。

nullsFirst

NULL値をソートの先頭に表示する場合はtrue、NULL値をソートの最後に表示する場合はfalseを指定します。この属性の値は任意です。


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

表26-4 itemタグの属性値

属性 説明

name

ソート対象のレイヤーの名前を指定します。通常、これは行セットの列名です。行セットのデータ列(Sales、Costsなど)を含むレイヤーを指定する場合はDataLayerを指定します。

value

指定したレイヤーの値を目的のスライスに指定します。


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

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

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

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

カラー・テーマ、円グラフ・テーマおよび点テーマを使用した地理マップ

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

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

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

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

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

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

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

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

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

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

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

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

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

    倉庫の在庫レベルのデータ・コレクション
  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座標に変換する必要があるからです。データ・コレクションの行が101行を超える場合は、適切なパフォーマンスを確保するために、xおよびy座標を使用してください。

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

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

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

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

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

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

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

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


      注意:

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

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

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

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

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

倉庫の在庫レベル用の点マップ・テーマのバインディング・ダイアログ

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

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

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

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

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

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

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

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

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

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

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

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

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

    プロパティ 設定値

    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.5.4項「マップ点テーマへのカスタム点スタイル・アイテムの追加について」を参照してください。

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

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

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

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

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

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

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

例26-14 点テーマのバインディング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.5.3.2 地理マップおよび点テーマのJSFページのXMLコード

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

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

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

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

例26-15 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.5.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.5.5 データバインドされたカラー・テーマを地図に追加する方法

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

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

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

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

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

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

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

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

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

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

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

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

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


      注意:

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

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

      地域または州のサンプル・テーマ・データ
  5. 「外観」セクションで、カラー・テーマの外観を次のように指定します。

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

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

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


    注意:

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

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

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

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

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

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

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

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

商品の人気を州別に示すカラー・マップ・テーマ・バインディング

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

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

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

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

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

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

例26-16 カラー・テーマのバインディング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.5.6.2 カラー・テーマのJSFページのXMLコード

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

例26-17 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.5.7 マップ・カラー・テーマでの色のカスタマイズについて

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

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

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

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

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

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

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

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

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

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

    人気のある商品カテゴリを州別に示すデータ・コレクション
  2. コレクションをJSFページにドラッグし、ポップアップ・メニューから「作成」「円グラフ・テーマ」を選択します。

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

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

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

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

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

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

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

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

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

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

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

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

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

円グラフ・マップ・テーマのダイアログ

26.5.9 地図への円グラフ・テーマの追加時の処理

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

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

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

26.5.9.1 円グラフ・テーマのバインディングXML

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

例26-18 円グラフ・テーマのバインディング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.5.9.2 円グラフ・テーマのJSFページのコード

例26-19に、地理マップの円グラフ・テーマに対してJSFページで生成されるXMLコードを示します。

例26-19 JSFページの円グラフ・テーマのコード

<dvt:mapPieGraphTheme id="mapPieGraphTheme1"
     themeName="MAP_STATES_NAME"
     shortLabel="Popular Categories"
     pieRadius="10"
     styleName="comet"
     value="#{bindings.PopularCategoriesByState1.geoMapModel}"
     locationColumn="POLYGON_ID"/>

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

ガント・チャートは、棒グラフの1種です(横軸が時間を表します)。このグラフは、プロジェクトの計画および追跡において、開始と終了が明確な時間枠内でタスクまたはリソースを示すために使用されます。

ガント・チャートを作成する場合は、次のタイプから選択できます。

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

26.2.1 データバインドされたプロジェクト・ガント・チャートの作成方法

プロジェクト・ガント・チャートでは、タスクの値を指定する必要があります。オプションで、分割タスク、サブタスク、再帰タスクおよびタスク間の依存性の値も指定できます(データ・コレクションにこの追加情報に対するアクセッサがある場合)。

プロジェクト・ガント・チャートは、全体的な開始時間および終了時間と、主および副時間軸の値に対するデフォルト値を使用して表示されます。プロジェクト・ガント・チャートでは、主時間軸はデフォルトで週に設定され、副時間軸は日に設定されます。

図26-39は、各タスクが入力される1つの注文となっているプロジェクト・ガント・チャートを示しています。分割線の左側のリスト・リージョンには、注文の担当者の名前が入力された列と、注文日および出荷日が入力された列が示されています。分割線の右側のグラフ・リージョンでは、各注文の注文日から出荷日までの水平な棒がガント・チャートで表示されています。

図26-39 注文の出荷のプロジェクト・ガント・チャート

注文の出荷のプロジェクト・ガントの表示

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


ヒント:

プロジェクト・ガント・チャート・コンポーネントをコンポーネント・パレットからドラッグし、「プロジェクト・ガントの作成」ダイアログの入力を完了することでも、プロジェクト・ガント・チャートを作成できます。この方法では、コンポーネントをデータにバインドする前に、ガント・チャートのユーザー・インタフェースを設計できます。

データバインドされたプロジェクト・ガント・チャートを作成する手順:

  1. 「データ・コントロール」パネルから、データ・コレクションを選択します。ガント・チャートでは、行セット・コレクション(タスクのフラット・リストを生成)または基本的なツリー・コレクション(タスクの階層リストを生成)を選択できます。

    図26-40に、「データ・コントロール」パネルでOrderShippingSummary1コレクションを選択し、注文の出荷の進行状況を表示するプロジェクト・ガント・チャートを作成する例を示します。

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

    注文の出荷のデータ・コレクション
  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-41に、注文の出荷のデータ・コレクションからプロジェクト・ガント・ダイアログを作成する際に使用されるダイアログを示します。

図26-41 出荷された注文を示す「プロジェクト・ガントの作成」ダイアログ

この図は本文中で説明されています。

データ・バインディング・ダイアログの完了後は、プロパティ・インスペクタを使用してプロジェクト・ガント・チャートの追加属性の値を指定できます。

26.3.2 データ・コントロールからのプロジェクト・ガント・チャートの作成時の処理

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

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

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

例26-20に、出荷された注文を表示するプロジェクト・ガント・チャートに生成された行セット・バインディングを示します。このコード例では、タスクおよびサブタスクについて、属性とともに定義されたノードがあることを示しています。また、依存タスク、分割タスクおよび再帰タスクについて、属性なしで定義されたノードがあります。

例26-20 プロジェクト・ガント・チャートのバインディング

<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-21に、ADFプロジェクト・ガント・チャートに対してJSFページで生成されるコードを示します。このタグ・コードには、プロジェクト・ガント・チャートの全体的な開始および終了時間に対する設定が含まれています。また、主軸(週)および副軸(日)に対するデフォルトの時間軸の設定も示されています。さらに、ガント・チャートのリスト・リージョンに表示される各列に対する指定もリストされています。簡潔にするため、OrderStatusCodeおよびShippedDateaf:column要素のコードは省略されています。

例26-21 プロジェクト・ガント・チャートの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.6.3 プロジェクト・ガント・チャートのサマリー・タスクについて

サマリー・タスクは、タスクのグループ(通常はサブタスク)に対する開始時間と終了時間を示します。サマリー・タスクの移動や拡張はできません。ただし、いずれかのサブタスクの日付が変更された場合は、アプリケーションでサマリー・タスクの時間を再計算する必要があります。

タスク期間の変更を検出するには、メソッド・バインディング式をガント・チャート・コンポーネントのDataChangeListener属性に指定してイベント・ハンドラを登録します。ガント・チャートのデータを変更する可能性のある処理が発生すると、タイプがoracle.adf.view.faces.bi.event.DataChangeEventのイベントが起動されます。このイベントには、データ変更に関する情報が含まれ、登録済のイベント・リスナーに対して起動されます。このリスナーにより、新しい値の検証および基礎となるデータ・モデルの更新が行われます。

更新が完了すると、ガント・チャートは古いデータ(更新が失敗した場合)または新しいデータでリフレッシュされます。ガント・チャートでは部分ページ・レンダリングを使用するため、ガント・チャートのみがリフレッシュされ、ページ全体はリフレッシュされません。

26.6.4 プロジェクト・ガント・チャートのパーセント完了について

パーセント完了は、タスクの完了率を示す内部の棒として表すことができます。内部の棒の長さは、データ・オブジェクトによって返されるパーセント完了に基づいて計算されます。

プロジェクト・ガント・チャートのデータ・バインディング・ダイアログには、パーセント完了値を入力できるコントロールはありませんが、パーセント完了のレンダリングにはこの値が必要です。ただし、ガント・チャート・データ・オブジェクトにはpercentComplete属性が含まれています。

パーセント完了の整数を指定するには、タイプがTasksであるnodeDefinitionに新しい属性マッピングを追加する必要があります。たとえば、データ・コレクションにPercentDoneという名前の列がある場合、属性マッピングは<Item Value="PercentDone" type="percentComplete"/>のようになります。

例26-22に、例26-20で示したプロジェクト・ガント・チャート・バインディングのうち、タイプがTasksnodeDefinitionのデータ・バインディング・コードに追加されたパーセント完了の属性マッピングを示します。

例26-22 パーセント完了を使用したプロジェクト・ガント・チャートのバインディング

<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>

パーセントではなく日付を指定できるようにする別の属性(completedThrough)があります。ガント・チャート・データ・オブジェクトは、completedThrough属性が参照する日付に基づいてパーセント完了を計算します。たとえば、データ・コレクションにPercentDoneという名前の列がある場合、属性マッピングは<Item Value="PercentDone" type="completedThrough"/>のようになります。

26.6.5 プロジェクト・ガント・チャートの分散について

分散は、2つの水平な棒でレンダリングされます。一方の棒は、タスクの基本の(元の)開始および終了時間を表します。他方の棒は、タスクの実際の開始および終了時間を表します。プロジェクト・ガント・チャートのデータ・バインディング・ダイアログで、基本の開始時間と終了時間に対するバインディング情報を入力します。

ガント・チャートのデータ・バインディング・ダイアログには、ガント・チャートの実際の開始時間と終了時間を入力できるコントロールはありませんが、分散のレンダリングにはこの値が必要です。ただし、ガント・チャート・データ・オブジェクトにはactualStartおよびactualEnd属性が含まれています。

実際の開始および終了時間を指定するには、2つの新しい属性マッピングをタイプがTasksnodeDefinitionに追加する必要があります。たとえば、データ・コレクションにActualStartDateおよびActualEndDateという名前の列がある場合、属性マッピングは例26-23のようになります。

例26-23 実際の開始および終了の属性マッピング

<Item Value="ActualStartDate" type="actualStart"/>
<Item Value="ActualEndDate" type="actualEnd"/>

例26-24に、プロジェクト・ガント・チャートのタイプがTasksnodeDefinitionのデータ・バインディング・コードに追加された実際の開始および終了の属性マッピングを示します。

例26-24 実際の開始および終了を使用したプロジェクト・ガント・チャートのバインディング

<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>

26.2.6 データバインドされたリソース使用率ガント・チャートの作成方法

リソース使用率ガント・チャートでは、リソースのID、時間のID、リソース使用率の開始および終了時間を指定する必要があります。オプションで、サブリソースのデータ値を指定できます。

リソース使用率ガント・チャートは、主および副時間軸の値に対するデフォルト値を使用して表示されます。リソース使用率ガント・チャートでは、主時間軸はデフォルトで週に設定され、副時間軸は日に設定されます。

図26-42は、各リソースと、リソースの使用中に表示できる関連付けられたカレンダを示すリソース使用率ガント・チャートを示しています。

図26-42 リソース使用率ガント・チャート

リソース使用率ガント・チャート

データ・コントロールを使用してリソース使用率ガント・チャートを作成するには、リソース使用率コンポーネントをデータ・コレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグしてJSFページにドロップし、宣言的にこの処理を実行できます。


ヒント:

リソース使用率ガント・チャート・コンポーネントをコンポーネント・パレットからドラッグし、「リソース使用率ガントの作成」ダイアログの入力を完了することでも、リソース使用率ガント・チャートを作成できます。この方法では、コンポーネントをデータにバインドする前に、ガント・チャートのユーザー・インタフェースを設計できます。

リソース使用率ガント・チャートを作成する手順:

  1. 「データ・コントロール」パネルから、データ・コレクションを選択します。ガント・チャートでは、行セット・コレクションまたは基本的なツリー・コレクションを選択できます。

    図26-43に、「データ・コントロール」パネルでGanttRugResourcesView1コレクションを選択し、リソースの使用率を表示するリソース使用率ガント・チャートを作成する例を示します。

    図26-43 リソース使用率のデータ・コレクション

    リソース使用率のデータ・コレクション
  2. コレクションをJSFページにドラッグし、ポップアップ・メニューから「ガント」「リソース使用率」を選択します。

  3. 「リソース使用率ガントの作成」ダイアログで、リソースおよび時間関連のコントロールを、データ・コレクション内の対応する列にリンクします。

    1. 「リソースID」では、リソースの一意のIDに対応するデータ・コレクション内の列を選択します。

    2. 「時間バケット」ページでは、リソースに割り当てられた時間バケットを含む「バケット・アクセッサ」ドロップダウン・リストから値を選択し、時間の単位に対応する「バケット日」ドロップダウン・リストから値を選択します。

    3. 「バケット・メトリック」リストでは、必要に応じて、時間バケット内のバーとして表示される属性を指定することができます。「バケット・メトリック」リストで指定した属性はバーの高さの計算に使用されるため、個々の属性は数値タイプでなければなりません。

    4. 「表の列」リストでは、分割線の左側のリソース使用率ガント・チャートのリスト・リージョンに表示される列を指定します。表示するそれぞれの列に対して、1行の情報を指定します。新規行を追加するには、「新規」アイコンを使用します。リソース使用率リストで列を表示する順序のとおりに行を配置するには、矢印アイコンを使用します。各行に、ラベルの表示値バインディングおよび使用するコンポーネントの値を指定します。

    5. データ・コレクションにサブリソースのアクセッサがある場合は、「サブリソース」ページを使用してサブリソース・アクセッサおよびリソースIDを選択できます。

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

    図26-44に、プロジェクトで使用可能なリソースのデータ・コレクションからリソース使用率ガント・チャートを作成するために使用するダイアログを示します。

    図26-44 リソース使用率ガント・チャートの作成

    リソース使用率ガントの作成

26.6.7 リソース使用率ガント・チャート作成時の処理

リソース使用率ガント・チャートを「データ・コントロール」パネルからJSFページにドロップすると、次の処理が行われます。

  • リソース使用率ガント・チャートのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。

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

例26-25に、図26-44に示すリソース使用率ガント・チャートに生成された行セット・バインディングを示します。

例26-25 リソース使用率ガント・チャートのバインディング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-26に、リソース使用率ガント・チャートに対してJSFページで生成されるコードを示します。このタグ・コードには、リソース使用率ガント・チャートの全体的な開始および終了時間に対する設定が含まれています。これらの設定は手動で編集する必要があります。また、主時間軸(週)および副時間軸(日)に対する時間軸の設定も示されています。さらに、リソース使用率ガント・チャートのリスト・リージョンに表示される各列に対する指定もリストされています。

例26-26 リソース使用率ガント・チャートの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.2.8 データバインドされたスケジュール・ガント・チャートの作成方法

スケジュール・ガント・チャートでは、リソースのID、タスクのID、タスクの開始および終了時間を指定する必要があります。オプションで、サブリソース、再帰タスク、分割タスクおよびタスク間の依存性のデータ値を指定できます。

スケジュール・ガント・チャートは、全体的な開始および終了時間と、主および副時間軸の値に対するデフォルト値を使用して表示されます。スケジュール・ガント・チャートでは、主時間軸はデフォルトで週に設定され、副時間軸は日に設定されます。

図26-45は、各リソースと、そのリソースが担当するすべての注文をリストするスケジュール・ガント・チャートを示しています。プロジェクト・ガント・チャートでは各タスクが個別の線上にリストされますが、スケジュール・ガント・チャートでは特定のリソースのすべてのタスクが同じ線上に表示されます。

図26-45 注文の出荷のスケジュール・ガント・チャート

この図は本文中で説明されています。

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

データバインドされたスケジュール・ガント・チャートを作成する手順:

  1. 「データ・コントロール」パネルから、データ・コレクションを選択します。ガント・チャートでは、行セット・コレクションまたは基本的なツリー・コレクションを選択できます。

    図26-46に、Personsデータ・コレクションを選択し、各リソースが担当する注文を表示するスケジュール・ガント・チャートを作成する例を示します。

    図26-46 リソースのデータ・コレクション

    リソースのデータ・コレクション
  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-47に、注文の出荷を担当するリソースのデータ・コレクションからスケジュール・ガント・チャートを作成する際に使用されるダイアログを示します。

図26-47 「スケジュール・ガントの作成」ダイアログ

「スケジュール・ガントの作成」ダイアログ

26.6.9 スケジュール・ガント・チャート作成時の処理

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

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

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

例26-27に、リソースおよび出荷された注文を表示するスケジュール・ガント・チャートに生成された行セット・バインディングを示します。

例26-27 スケジュール・ガント・チャートのバインディング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-28に、スケジュール・ガント・チャートに対してJSFページで生成されるコードを示します。このタグ・コードには、スケジュール・ガント・チャートの全体的な開始および終了時間に対する設定が含まれています。また、主時間軸(月)および副時間軸(週)に対する時間軸の設定も示されています。さらに、ガント・チャートのリスト・リージョンに表示される各列に対する指定もリストされています。簡潔にするため、MembershipIdEmailおよびPhoneNumberaf:column要素のコードは省略されています。

例26-28 スケジュール・ガント・チャートの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.7 データバインドされた階層ビューアの作成

階層ビューアは、データ内に親子関係の存在するデータを視覚的に表現するADFデータ視覚化コンポーネントです。たとえば、組織図、ネットワーク・ダイアグラム、ソーシャル・ネットワークなどを表示する場合には、このコンポーネントが有益です。

図26-48に、組織図をレンダリングする階層ビューア・コンポーネントの実行時ビューを示します。

図26-48 組織図をレンダリングする階層ビューア・コンポーネント

階層ビューアによる組織図

図26-49に、階層ビューアのタイプが表示されたコンポーネント・ギャラリと階層ビューアの作成に使用できるクイック・スタート・レイアウトを示します。

図26-49 階層ビューア・タイプのコンポーネント・ギャラリ

階層ビューアのコンポーネント・ギャラリ

作成する階層ビューア・コンポーネント(dvt:hierarchyViewer)はそれぞれ次の要素を持つことができます。

階層ビューア・コンポーネントとともに、必要に応じて、カード要素(dvt:panelCard)を使用することもできます。パネル・カードは、アニメーションを使用して、ノード要素により参照される複数のコンテンツ・セットを動的に切り替える方法を提供します。たとえば、コンテンツを水平方向にスライドさせたり、ノードをめくったりすることができます。パネル・カードの使用を指定するには、図26-49で選択されているクイック・スタート・レイアウトを選択します。

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

26.7.1 データバインドされた階層ビューアの作成方法

階層ビューアは、1つ以上のディテール・コレクションと1つのマスター・データ・コレクションとの間にマスター/ディテール関係が存在するデータ・コレクションに基づいています。Oracle ADFのデータ・コントロールを使用すると、Jdeveloperでは宣言的なタスクとなります。「データ・コントロール」パネルから、1つ以上のルート・ノードを生成するデータ・コレクションをドラッグして、JSFページにドロップします。

データバインドされた階層ビューアを作成する手順:

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

  2. コレクションをJSFページにドラッグし、コンテキスト・メニューから「階層ビューア」を選択してから、作成する階層ビューアのタイプと階層ビューア・コンポーネントを選択します。図26-49 「階層ビューア・タイプのコンポーネント・ギャラリ」には、使用可能な階層ビューアのタイプが表示されています。


    注意:

    クイック・スタート・レイアウトの選択以外、コンポーネント・ギャラリとそれに続く「階層ビューアの作成」ダイアログでは、階層ビューアの外観をカスタマイズすることはできません。階層ビューアの外観をカスタマイズするには、この手順の完了後、プロパティ・インスペクタを使用して、階層ビューアの値を設定します。

  3. 表示された「階層ビューアの作成」ダイアログで、次の操作を行います。

    • 「階層」リストで、実行時ダイアログにノードとして表示したいコレクションを選択します。

    • 「階層」リストで選択したコレクションそれぞれについて、ズーム・レベルを1つ以上使用して、隣に表示される「ノード属性」リストから属性を選択します。設定する75%、50%または25%レベルそれぞれについて、「ズーム・レベルの追加」を選択します。

      階層ビューア・コンポーネントは4種類のズーム・レベルを定義します。これらのズーム・レベルを変更したり、新しいズーム・レベルを作成したりすることはできません。デフォルトのズーム・レベルは100%です。

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

図26-50は、rootEmp1という名前のデータ・コレクションのデータを使用して階層ビューアを作成したときに表示される「階層ビューアの作成」ダイアログです。この例では、100%のズーム・レベルに対して次の構成が行われています。

  • 「階層」エリアでは、ツリー・バインディングを表示するためにデータ・コレクションrootEmp1、ツリー内の子ノードを表示するためにアクセッサHvtestViewが選択されます。

  • 「クイック・スタート・レイアウト」では、dvt:panelCardが階層ビューア・ノード用に構成されます。

  • 「イメージ」では、各ノードでスタンプされるイメージ・ファイルを指定します。このオプションは、パネル・カードのクイック・スタート・レイアウトにのみ表示されます。

  • 「ノード属性」では、各ノードのコンテンツと表示順序を、コンテンツのレンダリングに使用するADFコンポーネントとともに指定します。

図26-50 従業員についての「階層ビューアの作成」ダイアログ

「階層ビューアの作成」ダイアログ

「階層ビューアの作成」ダイアログを完了したら、プロパティ・インスペクタを使用して、階層ビューア属性を設定します。また、階層ビューア・タグに関連付けられた子タグを使用して、さらに階層をカスタマイズすることもできます。

26.7.2 データバインドされた階層ビューアの作成時の処理

階層ビューアを「データ・コントロール」パネルから作成すると、次の処理が行われます。

  • JSFページのページ定義ファイルで階層ビューアのバインディングを作成

  • 階層ビューア・コンポーネントのJSFページに必要なタグを追加

例26-29は、階層ビューア・コンポーネントについてJDeveloperにより生成されたバインディングを表示します。マスター/ディテール・ツリーのノードにデータを移入するためのルールは、ノード定義として定義されます。次の例では、2つのノード定義が生成されます。これらのノード定義はそれぞれ、ビュー・オブジェクト1つとそれに関連する属性を参照しています。また、このコード例はアクセッサ(HvtestView)も参照しています。

例26-29 階層ビューアのバインディング

<tree IterBinding="rootEmp1Iterator" id="rootEmp1">
      <nodeDefinition DefName="model.rootEmp">
        <AttrNames>
          <Item Value="Adress"/>
          <Item Value="Email"/>
          <Item Value="Lastname"/>
          <Item Value="Thumburl"/>
          <Item Value="Firstname"/>
          <Item Value="Title"/>
          <Item Value="Managerid"/>
          <Item Value="Id"/>
          <Item Value="Phone"/>
          <Item Value="City"/>
          <Item Value="State"/>
        </AttrNames>
        <Accessors>
          <Item Value="HvtestView"/>
        </Accessors>
      </nodeDefinition>
      <nodeDefinition DefName="model.HvtestView">
        <AttrNames>
          <Item Value="Adress"/>
          <Item Value="Email"/>
          <Item Value="Lastname"/>
          <Item Value="Thumburl"/>
          <Item Value="Firstname"/>
          <Item Value="Title"/>
          <Item Value="Managerid"/>
          <Item Value="Id"/>
          <Item Value="Phone"/>
          <Item Value="City"/>
          <Item Value="State"/>
        </AttrNames>
        <Accessors>
          <Item Value="ManageridHvtestView"/>
        </Accessors>
      </nodeDefinition>
    </tree>

例26-30は、例26-29のページ定義ファイルに関連付けられているJSFページで生成されたコードを示しています。簡潔にするため、ファセット要素zoom75zoom50およびzoom25のコードは省略されています。<af:panelGroupLayout><af:spacer/><af:separator/>などの要素からのコードの一部も省略されています。

この例は、rootEmp1ツリー・バインディングを参照する階層ビューア・コンポーネントを示しています。これには、ノード(dvt:node)コンポーネントが含まれ、このコンポーネントにはパネル・カード・コンポーネント(dvt:panelCard)が含まれます。このパネル・カード・コンポーネントは、ノードにより参照されたコンテンツの表示を変更するときに使用されるエフェクトとして、slide_horzを定義しています。

図26-50に示す「階層の作成」ダイアログを使用して、階層ビューア・コンポーネントのレイアウトをカスタマイズしたり、パネル・カードなどのコンポーネントをさらに追加したりすることはできません。このため、ビジュアル・エディタで階層ビューア・コンポーネントのコードを直接編集するか、プロパティ・インスペクタで値を設定して、レイアウトをカスタマイズします。パネル・カードなどのコンポーネントを追加するには、コンポーネント・パレットを使用します。

例26-30 階層ビューアのJSFページのコード

<dvt:hierarchyViewer inlineStyle="width:100%;height:100%;"
                       id="hv1" var="node"
                       value="#{bindings.rootEmp1.treeModel}"
                       selectionListener="#{bindings.rootEmp1.treeModel.makeCurrent}"
                       navigateUpListener="#{bindings.ExecuteWithParams1.execute}">
    <dvt:link linkType="orthogonalRounded"/>
    <dvt:node type="model.rootEmp model.HvtestView"
              width="186" height="210"
              setAnchorListener="#{bindings.ExecuteWithParams.execute}"
              showNavigateUp="#{node.Managerid != null}">
      <f:facet name="zoom100">
        <af:panelGroupLayout layout="vertical"
inlineStyle="width:100%;height:100%;background-color:#C0E4FD;border-color:#87CDFC;border-width:1;padding:5;">
          <dvt:panelCard effect="slide_horz">
            <af:showDetailItem text="Contact Info"
                               inlineStyle="font-size:xx-small;">
              <af:spacer height="2"/>
              <af:panelFormLayout inlineStyle="width:100%;height:100%;">
                <af:panelLabelAndMessage label="#{bindings.rootEmp1.hints.Email.label}">
                  <af:goLink text="#{node.bindings.Email.inputValue}"
                             destination="mailto:#{node.bindings.Email.inputValue}"/>
                </af:panelLabelAndMessage>
                <af:panelLabelAndMessage label="#{bindings.rootEmp1.hints.Phone.label}">
                  <af:outputFormatted value="#{node.bindings.Phone.inputValue}"/>
                </af:panelLabelAndMessage>
              </af:panelFormLayout>
            </af:showDetailItem>
            <af:showDetailItem text="Address">
              <af:spacer height="2"/>
              <af:panelFormLayout inlineStyle="width:100%;height:100%;">
                <af:panelLabelAndMessage label="Address">
                  <af:outputFormatted value="#{node.bindings.Adress.inputValue}"/>
                </af:panelLabelAndMessage>
                <af:panelLabelAndMessage label="">
                  <af:outputFormatted value="#{node.bindings.City.inputValue}, #{node.bindings.State.inputValue} "/>
                </af:panelLabelAndMessage>
              </af:panelFormLayout>
            </af:showDetailItem>
          </dvt:panelCard>
        </af:panelGroupLayout>
      </f:facet>
    </dvt:node>
  </dvt:hierarchyViewer>

26.7.3 階層ビューアでのデータバインドされた検索の作成方法

階層ビューアの検索機能は、階層ビューア・データ・モデルの基本であるデータ・コレクションの検索可能属性または列に基づいています。Oracle ADFのデータ・コントロールで定義された問合せ結果コレクションを使用すると、Jdeveloperでは宣言的なタスクとなります。ExecuteWithParams操作をドラッグして、このページの既存の階層ビューア・コンポーネントにドロップします。

作業を始める前に、次のようにします。

  1. ページ上にデータバインドされた階層ビューア・コンポーネントを配置します。

  2. 階層ビューアのルート・ノードを取得する問合せを検証します。

    たとえば、図26-51では、EMPNO列でルート・ノードを取得しています。

    図26-51 ルート・ノードの問合せ

    ルート・ノードの問合せ
  3. 検索を実行するビュー・オブジェクトを作成します。

    たとえば、図26-52EmployeesSearchResultsビュー・オブジェクトを示していますが、このオブジェクトは任意の値と一致させるためにデフォルト値の%、および列に対する完全一致を指定する比較値=を使用して、データ・コレクションのJob列に基づく検索を実行します。

    図26-52 EmployeeSearchResultsビュー・オブジェクト

    EmployeesSearchResultsビュー・オブジェクト

    ビュー・オブジェクトの作成の詳細は、5.2.1項「エンティティ・ベースのビュー・オブジェクトの作成方法」を参照してください。

階層ビューアでデータバインドされた検索を作成する手順:

  1. 「データ・コントロール」パネルから、問合せ結果に対応するコレクションを選択し、「操作」ノードを展開してExecuteWithParams操作を表示します。

  2. ExecuteWithParams操作をドラッグして、ビジュアル・エディタの階層ビューア、または「構造」ウィンドウのコンポーネント上にドロップします。代わりに、このパラメータを階層ビューアにドラッグすることもできます。

  3. 表示される「階層ビューア検索の作成」ダイアログで、「追加」アイコンを使用して、「検索結果」パネルに表示する結果リストを指定し、その後、各結果について次の指定を行います。

    1. ラベルの表示: 階層内のノードのヘッダー値を選択します。<default>を選択すると、ヘッダーのテキストはデータ・バインディングから自動的に取得されます。

    2. 値バインディング: 階層ビューアのツリーにあるノードに使用するデータ・コレクション内の列を選択します。

    3. 使用するコンポーネント: ノードに表示するコンポーネントのタイプを選択します。デフォルトは、ADF出力テキスト・コンポーネントです。

    既存のフィールドの選択後、矢印アイコン(UpDownTopBottom)を使用して、結果を並べ替えるか、または「削除」アイコンを使用して、結果を削除します。

  4. 「操作」ドロップダウン・リストで、検索結果が選択されたときに使用する階層ルート・データ・コレクションを選択します。有効な値は次のとおりです。

    • removeRowWithKey: 入力フィールドによって指定された値から変換されたStringとして行キーを使用し、バインドされたデータ・コレクションのデータ・オブジェクトを削除します。

    • setCurrentRowWithKey: 入力フィールドで指定された値から変換したStringとして行キーを設定します。行キーは、バインドされたデータ・コレクション内のデータ・オブジェクトの現状設定に使用されます。

    • setCurrentRowWithKeyValue: キーの値を使用して、イテレータの現在のオブジェクトを設定します。

    • ExecuteWithParams: パラメータとして渡される名前付きバインド変数に値を設定します。

  5. 「パラメータ・マッピング」表で、「結果属性」列のドロップダウン・リストを使用して、「階層パラメータ」列に表示されるパラメータにマップする結果コレクション属性を選択します。

図26-53は、EmployeesSearchResults1という名前のデータ・コレクションのデータを使用して階層ビューアを作成したときに表示される「階層ビューア検索の作成」ダイアログです。

図26-53 「階層ビューア検索の作成」ダイアログ

「階層ビューア検索の作成」ダイアログ

実行時に、検索結果がEnameJobの表にまとめられます。図26-54は、ユーザが「検索」ボックスに「MANAGER」と入力したときに表示される「検索結果」パネルを示します。

図26-54 階層ビューアの検索結果

階層ビューアの検索結果