データバインドされたガント・チャート・コンポーネントおよび時系列コンポーネントの作成

42 データバインドされたガント・チャート・コンポーネントおよび時系列コンポーネントの作成

この章では、ADFビジネス・コンポーネントでモデル化されたデータからガント・チャートおよび時系列を作成する方法について説明します。これらの作成には、Fusion WebアプリケーションのADFデータ・コントロールとADF Facesコンポーネントを使用します。具体的には、ADFデータ視覚化コンポーネントのprojectGantt、resourceUtilizationGantt、schedulingGanttおよびtimelineを使用して、ビジネス・データを視覚的に表現するガント・チャートと時系列を作成する方法について説明します。ここでは、ADFデータ・コントロールを使用して、これらのコンポーネントをデータ優先開発で作成する方法について説明します。

簡単なUI優先開発を使用してページを設計する場合は、ガント・チャートや時系列をページに追加してから、データ・バインディングを構成してください。ガント・チャートおよび時系列コンポーネントのデータ要件、タグ構造、および外観と動作をカスタマイズするためのオプションの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「ガント・チャート・コンポーネントの使用方法」と「時系列コンポーネントの使用」の章を参照してください。

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

ADFデータ視覚化コンポーネントについて

ADFデータ視覚化コンポーネントは、ビジネス・データを視覚的に表示、分析するための幅広いグラフィック機能と表機能を提供します。コンポーネントの外観は表示するデータに応じて決まるため、コンポーネントをレンダリングするには、各コンポーネントをデータにバインドしておく必要があります。

ADFガント・チャートには、3種類のコンポーネントがあります。プロジェクト・ガント・チャートはプロジェクト管理に使用し、スケジュール・ガント・チャートはリソースのスケジュールに使用し、リソース使用率ガント・チャートはリソースのメトリックを表示するために使用します。すべてのガント・チャートは、2つのリージョンを表示します。これらのリージョンは、1つの分割線で結合されています。リスト・リージョンには、タスクまたはリソースのリストが表示され、チャート・リージョンには、経時的なグラフでタスク進行状況、リソース使用率またはリソース進行状況が表示されます。

対話型のデータ視覚化ツールであるADF時系列を使用すると、ユーザーはイベントを時間順に表示して、定義された時間範囲内で時間を進めたり戻したりできます。各イベントは時系列アイテムとして表され、単純なADFコンポーネントを使用してテキストやイメージなどの情報を表示したり、リンクなどのアクションを提供したりします。2つの時系列を構成して2系列のイベントを表示し、関連する情報を並べて比較することもできます。

接頭辞dvt:は、各データ視覚化コンポーネント名の先頭に付いて、そのコンポーネントがADFデータ視覚化ツール(DVT)のタグ・ライブラリに属することを示します。

データ視覚化コンポーネントのユースケースと例

データ視覚化コンポーネントのユースケースと例の詳細は、次を参照してください。

ガント・チャート・コンポーネント: 『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のガント・チャート・コンポーネントのユースケースおよび例に関する項。
時系列コンポーネント: 『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の時系列のユースケースと例に関する項。

エンド・ユーザー機能およびプレゼンテーション機能

魅力的な外観を備えたデータ視覚化コンポーネントを使用すると、エンド・ユーザーは複雑なビジネス・データを理解して分析できるようになります。このコンポーネントは機能が豊富で、そのまますぐに使用できる対話型のサポートも用意されています。エンド・ユーザーの詳細な説明と各コンポーネントのプレゼンテーション機能の詳細は、次を参照してください。

ガント・チャート・コンポーネント: 『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のエンド・ユーザー機能およびプレゼンテーション機能に関する項。
時系列コンポーネント: 『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のエンド・ユーザー機能およびプレゼンテーション機能に関する項。

データ視覚化コンポーネントの追加機能

データ視覚化コンポーネントをデータ・バインドする前に、その他のOracle ADF機能について理解しておいてください。また、いったんデータ視覚化コンポーネントをページに追加すると、検証やアクセシビリティなどの機能を追加する必要があることに気付く場合があります。データ視覚化コンポーネントで使用されるその他の機能へのリンクは、次のとおりです。

部分ページ・レンダリング: データ視覚化コンポーネントをリフレッシュして、ページの別のコンポーネントで実行されたアクションに基づく新しいデータを表示できます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「部分ページ・コンテンツの再レンダリング」の章を参照してください。
パーソナライズ: ユーザーは実行時にデータ視覚化コンポーネントの表示を変更できますが、ユーザーがカスタマイズできるようにアプリケーションを構成していないかぎり、ユーザーがページを終了するとそれらの値は保持されません。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「JSFページでのユーザー・カスタマイズの許可」の章を参照してください。
アクセシビリティ: データ視覚化コンポーネントは、デフォルトでアクセス可能です。アプリケーションの各ページは、スクリーン・リーダーでのアクセスが可能になるように作成できます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「アクセス可能なADF Facesページの開発」の章を参照してください。
スキンおよびスタイル: アプリケーションに適用するADFスキンを使用するか、スタイル関連のプロパティ(styleClassまたはinlineStyle)を使用してCSSスタイル・プロパティを直接適用することで、データ視覚化コンポーネントの外観をカスタマイズできます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「スタイルおよびスキンを使用した外観のカスタマイズ」の章を参照してください。
プレースホルダ・データ・コントロール: 最終的にページのデータ視覚化コンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールの使用を検討します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、「プレースホルダ・データ・コントロールによるページの設計」を参照してください。

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

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

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

プロジェクト

プロジェクト・ガント・チャートは、タスクを垂直に示し、各タスクの期間を水平な時間軸上に棒として示します。
リソース使用率

リソース使用率ガント・チャートは、リソースの割当てが超過なのか未満なのかを図示します。リソースを縦に示し、横方向の時間軸にその割当てとキャパシティ(オプション)を示します。
スケジュール

このガント・チャートは手動のスケジュール表をベースにし、リソースを縦に表示し、対応するアクティビティを横方向の時間軸に表示します。リソースの例には、人、機械、部屋などがあります。

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

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

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

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

図42-1 出荷された注文のプロジェクト・ガント・チャート

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

ヒント:

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

始める前に:

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

他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。

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

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

たとえば、図42-1のプロジェクト・ガント・チャートのデータソースは、ADF DVTコンポーネントについてのSummitサンプル・アプリケーションに含まれる、出荷日と配達日を含む出荷注文を表すビュー・オブジェクトから取得しています。
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従って、JSFページを作成します。

「データ・コントロール」パネルを使用して、プロジェクト・ガント・チャートを作成するには:

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

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

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

「図42-2 注文の出荷のデータ・コレクション」の説明
コレクションをJSFページにドラッグし、ポップアップ・メニューから「ガント」→「プロジェクト」を選択します。
「プロジェクト・ガントの作成」ダイアログの「タスク」ページで、次の属性に対応するデータ・コレクション内の列を選択します。
- タスクID: ガント・チャート内のタスクを表す一意のID。
- 開始時間: タスクの開始時刻。
- 終了時間: タスクの終了時刻。
- タスク・タイプ: ガント・チャートにタスク・バーをレンダリングするときに、そのタスク・バーの外観を指定するために使用するタイプ。タイプをデータ・コレクション内の列にバインドしない場合、すべてのタスクはデフォルトでNormalになります。タスクのタイプは次のとおりです。
  - Normal: 基本のタスク・タイプ。プレーンな横棒で、タスクの開始時刻、終了時刻および期間を示します。
  - Summary: タスク(通常は、サブタスク)のグループの開始時刻と終了時刻を示します。サマリー・タスクは移動や伸長できません。ただし、いずれかのサブタスクの日付が変更された場合は、アプリケーションでサマリー・タスクの時間を再計算する必要があります。
  - Milestone: ガント・チャート内の特定の日付を示します。マイルストン・タスクに関連付けられる日付は1つのみです。マイルストン・タスクは伸長できませんが、移動できます。
「詳細の表示」をクリックして、指定したタスク・タイプごとに、次の属性に対応するデータ・コレクション内の追加の列を選択します。
- 「実際の開始」および「実際の終了」: これらの属性を指定すると、1つの棒グラフではなく2つの棒グラフが描画されます。1つの棒グラフはベース開始日およびベース終了日を示し、もう1つの棒グラフは実際の開始日および終了日を示します。これは標準タスク・タイプおよびマイルストン・タスク・タイプに適用されます。
- %完了: これを指定すると、棒の内側にタスクの完了割合を示す追加の棒が描画されます。
- 完了: 割合のかわりに、日付を指定できるようになります。これを指定すると、棒の内側に、属性が参照する日付に基づいた完了割合を示す追加の棒が描画されます。
- クリティカル: 棒を赤色に変更して、その棒が重要であることを示します。これは標準タスク・タイプ、サマリー・タスク・タイプおよびマイルストン・タスク・タイプに適用されます。
- 編集可能: タスクの開始日、終了日または期間がチャート・リージョン内でサポートされるかどうかを指定するブール値。
- コンテナ: ノード定義がコンテナであるかどうかを指定するブール値。
データ・コレクションにサブタスクに対するアクセッサが含まれている場合は、「サブタスク」ページを使用して、ドロップダウン・リストから「サブタスク・アクセサ」を選択し、次の属性に対応するデータ・コレクション内の列を選択します。
- サブタスクID: データ・コレクション内のサブタスクのリストに対する一意のID。
- 開始時間: サブタスクの開始時刻。
- 終了時間: サブタスクの終了時刻。
- サブタスク・タイプ: ガント・チャートにサブタスク・バーをレンダリングするときに、そのタスク・バーの外観を指定するために使用するタイプ。タイプをデータ・コレクション内の列にバインドしない場合、すべてのタスクはデフォルトでNormalになります。タスクのタイプは次のとおりです。
  - Normal: 基本のタスク・タイプ。プレーンな横棒で、タスクの開始時刻、終了時刻および期間を示します。
  - Summary: タスク(通常は、サブタスク)のグループの開始時刻と終了時刻を示します。サマリー・タスクは移動や伸長できません。ただし、いずれかのサブタスクの日付が変更された場合は、アプリケーションでサマリー・タスクの時間を再計算する必要があります。
  - Milestone: ガント・チャート内の特定の日付を示します。マイルストン・タスクに関連付けられる日付は1つのみです。マイルストン・タスクは伸長できませんが、移動できます。
サブタスクをバインドしないと、ガント・チャートはタスクの階層ビューをレンダリングできません。サブタスクをバインドすると、ガント・チャートの階層ビューでタスクからサブタスクに向けてドリルダウンできるようになります。
データ・コレクションに依存タスクに対するアクセッサが含まれている場合は、「依存タスク」ページを使用して、ドロップダウン・リストから「依存タスク・アクセッサ」を選択し、次の属性に対応するデータ・コレクション内の列を選択します。
- 依存性のタイプ: 依存性のタイプを指定します。有効な値は、start-start、start-finish、finish-finish、finish-start、start-before、start-together、finish-afterおよびfinish-togetherです。
- 元タスクID: 依存関係内で最初のタスクを指定します。
- 先タスクID: 依存関係内で最後のタスクを指定します。
データ・コレクションに分割タスクに対するアクセッサが含まれている場合は、「分割タスク」ページを使用して、ドロップダウン・リストから「分割タスク・アクセッサ」を選択し、次の属性に対応するデータ・コレクション内の列を選択します。
- 分割タスクID: 2つの横棒(通常は、線でリンクされる)に分割されたタスクの一意のID。棒の間の時間は、移動時間または停止時間によるアイドル時間を表します。
- 開始時間: 分割タスクの開始時刻。
- 終了時間: 分割タスクの終了時刻。
データ・コレクションに再帰タスクに対するアクセッサが含まれている場合は、「再帰タスク」ページを使用して、ドロップダウン・リストから「再帰タスク・アクセッサ」を選択してから、次の属性に対応するデータ・コレクション内の列を選択します。
- 再帰タスクID: ガント・チャートで繰り返されるタスクの一意のID。タスクの各インスタンスには、固有の開始日と終了日が含まれます。個々の再帰タスクにはオプションでサブタイプを含めることができます。個々の再帰タスクのその他すべてのプロパティには、そのタスクが一部となっているタスクのプロパティが使用されます。ただし、個々の再帰タスクにサブタイプがある場合は、このサブタイプがタスク・タイプをオーバーライドします。
- タイプ: 再帰タスクのタイプを指定します。
- 開始時間: 再帰タスクの開始時刻。
- 終了時間: 再帰タスクの終了時刻。
「外観」ページで、タスク・バーの「ラベル」に対応する属性と、タスク・バーに関連付けるアイコンを3個まで指定します。
「表の列」セクションで、ガント・チャートのリスト・リージョン内に各行を表示する列を選択します。「新規」アイコンを使用すると、新しい行を追加できます。行を削除するには、「削除」アイコンを使用します。また、矢印アイコンを使用すると、ガント・チャート・リストに表示する列の行の順序を並べ替えできます。
ノート:

「表の列」セクションで指定する最初の行により、リスト・リージョンのnodestamp列を指定します。サブタスク・アクセッサを指定すると、この行は、階層関係の開閉可能な親として使用されます。

各行で、次を指定します。
- ラベルの表示: ガント・チャート・リストの列のヘッダーの値を選択します。<default>を選択すると、ヘッダーのテキストはデータ・バインディングから自動的に取得されます。
- 値バインディング: ガント・チャート・リストの列に使用するデータ・コレクション内の列を選択します。選択できる値は、タスク・グループの場合と同じです。
- 使用するコンポーネント: ガント・チャート・リストのセルに表示するコンポーネントのタイプを選択します。ADF入力コンポーネントを使用すると、セルが編集可能になるように指定できます。デフォルトは、ADF出力テキスト・コンポーネントです。
「OK」をクリックします。

図42-3に、注文の出荷のデータ・コレクションから、図42-1のプロジェクト・ガント・チャートを作成する際に使用されるダイアログを示します。

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

「図42-3 出荷された注文を示す「プロジェクト・ガントの作成」ダイアログ」の説明
「構造」ウィンドウでdvt:projectGanttコンポーネントを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、「共通」セクションを開き、StartTime属性とEndTime属性の日付(yyyy-mm-dd)を指定します。これらの属性は、ガント・チャート・データの期間の開始日と終了日を表します。

指定した日付に応じて、実行時にプロジェクト・ガント・チャートに表示される初期ビューが決定されます。
ガント・チャートに凡例を含めるには、「構造」ウィンドウでプロジェクト・ガント・チャート・ノードを右クリックし、プロジェクト・ガントの中に挿入→「凡例」を選択します。

凡例には、それぞれの記号に関する情報と、各タスク・タイプを表すカラー・コード化された棒が示されます。また、ガント・チャート内で選択されているタスクに関する詳細情報も示されます。

プロジェクト・ガント・チャートの作成後に、「プロパティ」ウィンドウを使用して、追加の属性に値を設定します。ガント・チャートのユースケース、エンド・ユーザー機能とプレゼンテーション機能、タグ構造、ガント・チャートへの特殊機能の追加の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「ガント・チャート・コンポーネントの使用方法」を参照してください。

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

プロジェクト・ガント・チャートを作成するために、「データ・コントロール」パネルからビュー・オブジェクトをドラッグ・アンド・ドロップすると、次の処理が行われます。

ガント・チャートのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
UIコンポーネントに必要なコードをJSFページに追加します。

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

<bindings>
  <gantt IterBinding="OrderEmployee1Iterator" id="OrderEmployee1"
         xmlns="http://xmlns.oracle.com/adfm/dvt">    <ganttDataMap>      <nodeDefinition DefName="model.OrderEmployee" type="Tasks">        <AttrNames>
          <Item Value="TaskId" type="taskId"/>
          <Item Value="StartDate" type="startTime"/>
          <Item Value="EndDate" type="endTime"/>
          <Item Value="TaskType" type="taskType"/>
        </AttrNames>
      </nodeDefinition>
      <nodeDefinition type="subTasks">
        <AttrNames/>
      </nodeDefinition>
      <nodeDefinition type="Dependents">
        <AttrNames/>
      </nodeDefinition>
      <nodeDefinition type="SplitTasks">
        <AttrNames/>
      </nodeDefinition>
      <nodeDefinition type="RecurringTasks">
        <AttrNames/>
      </nodeDefinition>
  </ganttDataMap>
 </gantt>
</bindings>

次の例は、プロジェクト・ガント・チャートに対してJSFページで生成されるコードを示しています。このタグ・コードには、プロジェクト・ガント・チャートの全体的な開始および終了時間に対する設定が含まれています。また、主軸(週)および副軸(日)に対するデフォルトの時間軸の設定も示されています。さらに、ガント・チャートのリスト・リージョンに表示される各列に対する指定もリストされています。

<dvt:projectGantt id="gantt1" value="#{bindings.OrderEmployee1.projectGanttModel}"
                  dataChangeListener="#{bindings.OrderEmployee1.projectGanttModel
                      .processDataChanged}"
                  var="row"
                  startTime="2012-03-31" endTime="2012-06-30">
  <f:facet name="major">
    <dvt:timeAxis scale="weeks" id="ta1"/>
  </f:facet>
  <f:facet name="minor">
    <dvt:timeAxis scale="days" id="ta2"/>
  </f:facet>
  <f:facet name="nodeStamp">
    <af:column
        sortProperty="#{bindings.OrderEmployee1.hints.FirstName.name}"
        sortable="false"
        headerText="#{bindings.OrderEmployee1.hints.FirstName.label}" 
        id="c1">
      <af:outputText value="#{row.FirstName}" id="ot1"/>
    </af:column>
  </f:facet>
    <af:column sortProperty="LastName" sortable="false"
             headerText="#{bindings.OrderEmployee1.hints.LastName.label}">
      <af:outputText value="#{row.LastName}"/>
    </af:column>
    <af:column sortProperty="OrderDate" sortable="false"
             headerText="#{bindings.OrderEmployee1.hints.OrderDate.label}">
       <af:outputText value="#{row.OrderDate}">
         <af:convertDateTime
             pattern="#{bindings.OrderEmployee1.hints.OrderDate.format}"/>
       </af:outputText>
     </af:column>
     <af:column sortProperty="ShippedDate" sortable="false"
         headerText="#{bindings.OrderEmployee1.hints.ShippedDate.label}">
       <af:outputText value="#{row.ShippedDate}">
       <af:convertDateTime
         pattern="#{bindings.OrderEmployee1.hints.ShippedDate.format}"/>
       </af:outputText>
     </af:column>
     <af:column sortProperty="TaskType" sortable="false"
         headerText="#{bindings.OrderEmployee1.hints.TaskType.label}">
       <af:outputText value="#{row.TaskType}"/>
     </af:column>
 </projectGantt>

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

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

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

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

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

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

ヒント:

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

始める前に:

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

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

たとえば、図42-4に示すガント・チャートのデータ・ソースは、Summit ADF DVTサンプル・アプリケーションのビュー・オブジェクトから取得しています。販売担当者を表すSalesRepViewObj1ビュー・オブジェクトを使用します。このオブジェクトには、注文日と出荷日についてのタイム・バケット・アクセッサと属性を含むSOrdView2ビュー・オブジェクトへのビュー・リンクが含まれています。
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従って、JSFページを作成します。

「データ・コントロール」パネルを使用して、リソース使用率ガント・チャートを作成するには:

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

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

図42-5 リソース使用率ガント・チャートのデータ・コレクション

「図42-5 リソース使用率ガント・チャートのデータ・コレクション」の説明
コレクションをJSFページにドラッグし、ポップアップ・メニューから「ガント」→「リソース使用率」を選択します。
「リソース使用率ガントの作成」ダイアログで、次の属性に対応するデータ・コレクション内の列を選択します。
- リソースID: リソースの一意のID。たとえば、ビュー・オブジェクト内で販売責任者を表すIdです。
- コンテナ: ブール値。ノード定義がコンテナかどうかを指定します。
「時間バケット」ページでは、リソースに割り当てられた時間バケットを含む「バケット・アクセッサ」ドロップダウン・リストから値を選択し、時間の単位に対応する「バケット日」ドロップダウン・リストから値を選択します。

たとえば、SOrdView2ビュー・オブジェクトには、販売責任者に関連付けられた注文ごとに、受注日と出荷日を表す属性が含まれています。図42-6に、バケット・アクセッサに使用するビュー・オブジェクトを示します。

図42-6 リソース使用率ガント・チャートのバケット・アクセッサ

「図42-6 リソース使用率ガント・チャートのバケット・アクセッサ」の説明
「バケット・メトリック」リストで、時間バケット内のバーとして表示される属性を指定します。「新規」アイコンを使用して新しい行を追加し、「削除」アイコンを使用して行を削除します。また、矢印アイコンを使用して、ガント・チャート・リージョンに表示する列の行の順序を並べ替えます。

「バケット・メトリック」リストで指定した属性はバーの高さの計算に使用されるため、個々の属性は数値タイプでなければなりません。
「表の列」セクションで、ガント・チャートのリスト・リージョン内に各行を表示する列を選択します。「新規」アイコンを使用すると、新しい行を追加できます。行を削除するには、「削除」アイコンを使用します。また、矢印アイコンを使用すると、ガント・チャート・リストに表示する列の行の順序を並べ替えできます。
ノート:

「表の列」セクションで指定する最初の行により、リスト・リージョンのnodestamp列を指定します。サブリソース・アクセッサを指定すると、この行は、階層関係の開閉可能な親を表示します。

各行で、次を指定します。
- ラベルの表示: ガント・チャート・リストの列のヘッダーの値を選択します。<default>を選択すると、ヘッダーのテキストはデータ・バインディングから自動的に取得されます。
- 値バインディング: ガント・チャート・リストの列に使用するデータ・コレクション内の列を選択します。選択できる値は、タスク・グループの場合と同じです。
- 使用するコンポーネント: ガント・チャート・リストのセルに表示するコンポーネントのタイプを選択します。ADF入力コンポーネントを使用すると、セルが編集可能になるように指定できます。デフォルトは、ADF出力テキスト・コンポーネントです。
データ・コレクション内にサブリソースに対するアクセッサが含まれている場合は、「サブリソース」ページを使用して、ドロップダウン・リストから「サブリソース・アクセッサ」を選択し、「リソースID」ドロップダウン・リストからサブリソースの一意のIDを選択します。
「外観」ページで、タスク・バーの「ラベル」に対応する属性を指定します。
「OK」をクリックします。

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

図42-7 リソース使用率ガント・チャートの作成ダイアログ

「図42-7 リソース使用率ガント・チャートの作成ダイアログ」の説明
「構造」ウィンドウでdvt:resourceUtilizationGanttコンポーネントを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、「共通」セクションを開き、StartTime属性とEndTime属性の日付(yyyy-mm-dd)を指定します。これらの属性は、ガント・チャート・データの期間の開始日と終了日を表します。

指定した日付に応じて、実行時にリソース使用率ガント・チャートに表示される初期ビューが決定されます。
ガント・チャートに凡例を含めるには、「構造」ウィンドウでリソース使用率ガント・チャート・ノードを右クリックし、リソース使用率ガントの中に挿入→「凡例」を選択します。

凡例には、それぞれの記号に関する情報と、各タスクを表すカラー・コード化された棒が示されます。また、ガント・チャート内で選択されているタスクに関する詳細情報も示されます。

リソース使用率ガント・チャートの作成後に、「プロパティ」ウィンドウを使用して、追加の属性に値を設定します。ガント・チャートのユースケース、エンド・ユーザー機能とプレゼンテーション機能、タグ構造、ガント・チャートへの特殊機能の追加の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「ガント・チャート・コンポーネントの使用方法」を参照してください。

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

リソース使用率ガント・チャートを作成するために、「データ・コントロール」パネルからJSFページにビュー・オブジェクトをドラッグ・アンド・ドロップすると、次の処理が行われます。

リソース使用率ガント・チャートのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
UIコンポーネントに必要なコードをJSFページに追加します。

次の例は、図42-7に示すリソース使用率ガント・チャートに生成された行セット・バインディングを示しています。

<bindings>
  <gantt IterBinding="SalesRepViewObj1Iterator" id="SalesRepViewObj1"
         xmlns="http://xmlns.oracle.com/adfm/dvt">
    <ganttDataMap>
      <nodeDefinition DefName="model.SalesRepViewObj" type="Resources">
        <AttrNames>
          <Item Value="Id" type="resourceId"/>
        </AttrNames>
        <Accessors>
          <Item Value="SOrdView" type="timeBuckets"/>
        </Accessors>
      </nodeDefinition>
      <nodeDefinition type="TimeBuckets" DefName="model.SOrdView">
        <AttrNames>
          <Item Value="DateOrderedDay" type="time"/>
          <Item type="metric" Value="Total"/>
        </AttrNames>
      </nodeDefinition>
      <nodeDefinition type="Subresources">
        <AttrNames/>
      </nodeDefinition>
    </ganttDataMap>
  </gantt>
</bindings>

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

<dvt:resourceUtilizationGantt id="gantt1"
            value="#{bindings.SalesRepViewObj1.resourceUtilizationGanttModel}"
            var="row" metrics="#{bindings.SalesRepViewObj1.metrics}"
            taskbarFormatManager="#{bindings.SalesRepViewObj1.
                resourceUtilizationGanttTaskbarFormatManager}"
            startTime="2012-05-09" endTime="2013-05-15"
            summary="#{viewcontrollerBundle.RESOURCE_UTILIZATION_GANTT_CHART}">
  <f:facet name="major">
    <dvt:timeAxis scale="weeks" id="ta1"/>
  </f:facet>
  <f:facet name="minor">
    <dvt:timeAxis scale="days" id="ta2"/>
  </f:facet>
  <f:facet name="nodeStamp">
    <af:column sortProperty="#{bindings.SalesRepViewObj1.hints.FirstName.name}"
               sortable="false"
               headerText="#{bindings.SalesRepViewObj1.hints.FirstName.label}"
               id="c1">
      <af:outputText value="#{row.FirstName}"
                  shortDesc="#{bindings.SalesRepViewObj1.hints.FirstName.tooltip}"
                  id="ot1"/>
    </af:column>
  </f:facet>
    <af:column sortProperty="#{bindings.SalesRepViewObj1.hints.LastName.name}"
               sortable="false"
               headerText="#{bindings.SalesRepViewObj1.hints.LastName.label}"
               id="c2">
      <af:outputText value="#{row.LastName}"
                   shortDesc="#{bindings.SalesRepViewObj1.hints.LastName.tooltip}"
                   id="ot2"/>
    </af:column>
    <af:column sortProperty="#{bindings.SalesRepViewObj1.hints.Email.name}"
               sortable="false"
               headerText="#{bindings.SalesRepViewObj1.hints.Email.label}"
               id="c3">
      <af:outputText value="#{row.Email}"
                     shortDesc="#{bindings.SalesRepViewObj1.hints.Email.tooltip}"
                     id="ot3"/>
    </af:column>
</dvt:resourceUtilizationGantt>

データバインドされたスケジュール・ガント・チャートの作成方法

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

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

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

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

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

始める前に:

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

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

たとえば、図42-8に示すガント・チャートのデータ・ソースは、Summit ADF DVTサンプル・アプリケーションのビュー・オブジェクトから取得しています。販売担当者を表すSalesRepViewObj1ビュー・オブジェクトを使用します。このオブジェクトには、注文日と出荷日についてのタスク・アクセッサと属性を含むSOrdView2ビュー・オブジェクトへのビュー・リンクが含まれています。
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従って、JSFページを作成します。

「データ・コントロール」パネルを使用して、スケジュール・ガント・チャートを作成するには:

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

図42-9に、SalesRepViewObj1データ・コレクションを選択して、スケジュール・ガント・チャートを作成する例を示します。このチャートには、各販売担当者が管理を担当する注文が表示されます。

図42-9 スケジュール・ガント・チャートのデータ・コレクション

「図42-9 スケジュール・ガント・チャートのデータ・コレクション」の説明
コレクションをJSFページにドラッグし、ポップアップ・メニューから「ガント」→「スケジューリング」を選択します。
「スケジュール・ガントの作成」ダイアログで、次の属性に対応するデータ・コレクション内の列を選択します。
- リソースID: スケジュール・ガント・チャートでリソースを表す一意のID。
- 作業開始時間: スケジュール・ガント・チャートの作業開始日。
- 作業終了時間: スケジュール・ガント・チャートの作業終了日。
- 作業曜日: 作業曜日のリストを指定します。
- コンテナ: ブール値。ノード定義がコンテナかどうかを指定します。
「タスク」ページで、ドロップダウン・リストから「タスク・アクセッサ」を選択して、次の属性に対応するデータ・コレクション内の列を選択します。
- タスクID: ガント・チャート内のリソースに関連付けられたタスクの一意のID。
- タスク・タイプ: ガント・チャートにタスク・バーをレンダリングするときに、そのタスク・バーの外観を指定するために使用するタイプ。タイプをデータ・コレクション内の列にバインドしない場合、すべてのタスクはデフォルトでScheduledになります。
- 開始時間: タスクの開始時刻。
- 終了時間: タスクの終了時刻。
- 起動時間: タスクを開始するまでにかかる時間。
- シャットダウン時間: タスクが完了してから終了するまでの時間。
たとえば、SOrdView2ビュー・オブジェクトには、販売責任者に関連付けられた注文ごとに、受注日と出荷日を表す属性が含まれています。図42-10に、タスク・アクセッサに使用するビュー・オブジェクトを示します。

図42-10 スケジュール・ガント・チャートのタスク・アクセッサ

「図42-10 スケジュール・ガント・チャートのタスク・アクセッサ」の説明
データ・コレクションに依存タスクに対するアクセッサが含まれている場合は、「依存タスク」ページを使用して、「依存タスク・アクセッサ」を選択し、次の属性に対応するデータ・コレクション内の列を選択します。
- 依存性のタイプ: 依存性のタイプを指定します。有効な値は、start-start、start-finish、finish-finish、finish-start、start-before、start-together、finish-afterおよびfinish-togetherです。
- 元タスクID: 依存関係内で最初のタスクを指定します。
- 先タスクID: 依存関係内で最後のタスクを指定します。
各依存タスクは、それらのタスクの終了時刻と開始時刻を関連付けることでリンクします。
データ・コレクションに分割タスクに対するアクセッサが含まれている場合は、「分割タスク」ページを使用して、「分割タスク・アクセッサ」を選択し、次の属性に対応するデータ・コレクション内の列を選択します。
- 分割タスクID: 2つの横棒(通常は、線でリンクされる)に分割されたタスクの一意のID。棒の間の時間は、移動時間または停止時間によるアイドル時間を表します。
- 開始時間: 分割タスクの開始時刻。
- 終了時間: 分割タスクの終了時刻。
データ・コレクションに再帰タスクに対するアクセッサが含まれている場合は、「再帰タスク」ページを使用して、ドロップダウン・リストから「再帰タスク・アクセッサ」を選択し、次の属性に対応するデータ・コレクション内の列を選択します。
- 再帰タスクID: ガント・チャートで繰り返されるタスクの一意のID。タスクの各インスタンスには、固有の開始日と終了日が含まれます。個々の再帰タスクにはオプションでサブタイプを含めることができます。個々の再帰タスクのその他すべてのプロパティには、そのタスクが一部となっているタスクのプロパティが使用されます。ただし、個々の再帰タスクにサブタイプがある場合は、このサブタイプがタスク・タイプをオーバーライドします。
- タイプ: 再帰タスクのタイプを指定します。
- 開始時間: 再帰タスクの開始時刻。
- 終了時間: 再帰タスクの終了時刻。
データ・コレクション内にサブリソースに対するアクセッサが含まれている場合は、「サブリソース」ページを使用して、ドロップダウン・リストから「サブリソース・アクセッサ」を選択し、サブリソースIDに対応するデータ・コレクション内の列を選択します。このIDは、データ・コレクション内のサブリソースのリストの一意のIDです。

サブリソースをバインドしていないと、ガント・チャートでリソースの階層ビューをレンダリングできなくなります。サブリソースをバインドすると、ガント・チャートの階層ビューで、リソースからサブリソースに向けたドリル操作が可能になります。
「外観」ページで、タスク・バーの「ラベル」に対応する属性と、タスク・バーに関連付けるアイコンを3個まで指定します。
「表の列」セクションでは、分割線の左側のガント・チャートのリスト・リージョンに表示される列を指定します。表示するそれぞれの列に対して、1行の情報を指定します。新規行を追加するには、「新規」アイコンを使用します。ガント・チャート・リストで列を表示する順序のとおりに行を配置するには、矢印アイコンを使用します。各行について、次のアイテムを指定します。
- ラベルの表示: ガント・チャート・リストの列のヘッダーの値を選択します。<default>を選択すると、ヘッダーのテキストはデータ・バインディングから自動的に取得されます。
- 値バインディング: ガント・チャート・リストの列に使用するデータ・コレクション内の列を選択します。選択できる値は、タスク・グループの場合と同じです。
- 使用するコンポーネント: ガント・チャート・リストのセルに表示するコンポーネントのタイプを選択します。デフォルトは、「ADF出力テキスト」コンポーネントです。
「OK」をクリックします。

図42-11に、注文の出荷を担当する販売担当者のデータ・コレクションからスケジュール・ガント・チャートを作成する際に使用されるダイアログを示します。

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

「図42-11 「スケジュール・ガントの作成」ダイアログ」の説明
「構造」ウィンドウでdvt:schedulingGanttコンポーネントを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、「共通」セクションを開き、StartTime属性とEndTime属性の日付(yyyy-mm-dd)を指定します。これらの属性は、ガント・チャート・データの期間の開始日と終了日を表します。

指定した日付により、実行時にスケジュール・ガント・チャートに表示される初期ビューが決定されます。
ガント・チャートに凡例を含めるには、「構造」ウィンドウでスケジュール・ガント・チャート・ノードを右クリックし、スケジュール・ガントの中に挿入→「凡例」を選択します。

凡例には、それぞれの記号に関する情報と、各タスクを表すカラー・コード化された棒が示されます。また、ガント・チャート内で選択されているタスクに関する詳細情報も示されます。

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

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

ガント・チャートのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
UIコンポーネントに必要なコードをJSFページに追加します。

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

<bindings>
  <gantt IterBinding="SalesRepViewObj1Iterator" id="SalesRepViewObj1"
         xmlns="http://xmlns.oracle.com/adfm/dvt">
    <ganttDataMap>
      <nodeDefinition DefName="model.SalesRepViewObj" type="Resources">
        <AttrNames>
          <Item Value="Id" type="resourceId"/>
        </AttrNames>
        <Accessors>
          <Item Value="SOrdView" type="tasks"/>
        </Accessors>
      </nodeDefinition>
      <nodeDefinition type="Tasks" DefName="model.SOrdView">
        <AttrNames>
          <Item Value="Id" type="taskId"/>
          <Item Value="DateOrdered" type="startTime"/>
          <Item Value="DateShipped" 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>
</bindings>

次の例は、スケジュール・ガント・チャートに対してJSFページで生成されるコードを示しています。このタグ・コードには、スケジュール・ガント・チャートの全体的な開始および終了時間に対する設定が含まれています。また、主時間軸(週)および副時間軸(日)に対する時間軸の設定も示されています。さらに、ガント・チャートのリスト・リージョンに表示される各列に対する指定もリストされています。

<dvt:schedulingGantt id="gantt1"
                     value="#{bindings.SalesRepViewObj1.schedulingGanttModel}"
                     dataChangeListener="#{bindings.SalesRepViewObj1.
                         schedulingGanttModel.processDataChanged}"
                     var="row" startTime="2012-04-15" endTime="2013-05-15"
                     summary="#{viewcontrollerBundle.SCHEDULING_GANTT_CHART}">
  <f:facet name="major">
    <dvt:timeAxis scale="weeks" id="ta1"/>
  </f:facet>
  <f:facet name="minor">
    <dvt:timeAxis scale="days" id="ta2"/>
  </f:facet>
<f:facet name="nodeStamp">
  <af:column sortProperty="#{bindings.SalesRepViewObj1.hints.FirstName.name}"
             sortable="false"
             headerText="#{bindings.SalesRepViewObj1.hints.FirstName.label}"
             id="c1">
    <af:outputText value="#{row.FirstName}"
                   shortDesc="#{bindings.SalesRepViewObj1.hints.
                       FirstName.tooltip}"
                   id="ot1"/>
  </af:column>
</f:facet>
  <af:column sortProperty="#{bindings.SalesRepViewObj1.hints.LastName.name}"
             sortable="false"
             headerText="#{bindings.SalesRepViewObj1.hints.LastName.label}"
             id="c2">
    <af:outputText value="#{row.LastName}"
                   shortDesc="#{bindings.SalesRepViewObj1.hints.LastName.tooltip}"
                   id="ot2"/>
  </af:column>
  <af:column sortProperty="#{bindings.SalesRepViewObj1.hints.Email.name}"
             sortable="false"
             headerText="#{bindings.SalesRepViewObj1.hints.Email.label}" id="c3">
    <af:outputText value="#{row.Email}"
                   shortDesc="#{bindings.SalesRepViewObj1.hints.Email.tooltip}"
                   id="ot3"/>
  </af:column>
</dvt:schedulingGantt>

データ変更イベントの処理に関する必知事項

ADFデータ・コントロールを使用して、プロジェクト・ガント・チャートおよびスケジュール・ガント・チャートにデータをバインドすると、次に示すような行の属性の更新が必要になるデータ変更イベントに対応するデータ変更リスナーが、自動的に提供されます。

DURATION_CHANGE: タスクの終了時刻(タスク・バーのサイズ変更)
PROGRESS_CHANGE: タスクの進行状況(進行状況バーのサイズ変更)
TIME_CHANGE: タスクの開始時刻および終了時刻(タスク・バーの移動)

設計時に、次の例に示すように、データ変更リスナーで、プロジェクト・ガントおよびスケジュール・ガントのバインディング用に、組込みのprocessDataChangeメソッドを提供します。

<dvt:projectGantt id="gantt1"
                  dataChangeListener="#{bindings.GanttProjectView1.
                      projectGanttModel.processDataChanged}"
                  value="#{bindings.GanttProjectView1.projectGanttModel}"
                  ...
</dvt:projectGantt>

次に示すような、行の挿入または削除が必要になるデータ変更イベントは、サポートされていません。

TASK_SPLITTED: タスクの分割
TASK_MERGED: 別のタスクとのタスクのマージ
LINK: 2つのタスクの相互リンク
UNLINK: 相互リンクされた2つのタスクのリンク解除
COPY: 1つ以上のタスクまたはリソースのコピー
CREATE: 新しいタスクの作成
CREATE_RESOURCE: 新しいリソースの作成
CUT: 1つ以上のタスクまたはリソースのカット
PASTE: タスクまたはリソースの貼り付け
UPDATE: タスクの更新
UPDATE_RESOURCE: リソースの更新
TASKS_PROPERTIES_UPDATE: タスク・プロパティ・ダイアログのイベント
INDENT: タスクまたはイベントのインデント
OUTDENT: タスクまたはリソースのアウトデント
DELETE: 1つ以上のタスクまたはリソースの削除

デフォルトの実装がないイベントをアプリケーションが処理できるように構成するには、バッキングBeanのメソッドを指定して、組込みのprocessDataChangeメソッドに委譲します。たとえば、次のコードの最初のブロックには、次のクラス・コードに示すバッキングBeanを使用してTASK_PROPERTIES_UPDATEイベントを処理するためにhandleDataChangeメソッドを使用するように構成されたdataChangeListenerが表示されています。

<dvt:projectGantt id="gantt1"
                  dataChangeListener="#{backingBeanScope.backing_
                      projectGantt.handleDataChange}"
                  value="#{bindings.GanttProjectView1.projectGanttModel}"
                  ...
</dvt:projectGantt>

public void handleDataChange(DataChangeEvent evt)
{
    // handle events not supported by built-in "processDataChange" method
    int _type = evt.getActionType();
    if (_type == DataChangeEvent.TASK_PROPERTIES_UPDATE)
    {
        // handle event.
    }
    else  // delegate to built-in "processDataChange" method.
    {
				Application app = facesContext.getApplication();
        String expression =
            "#{bindings.GanttProjectView1.projectGanttModel.processDataChanged}";
        ExpressionFactory elFactory = app.getExpressionFactory();
        ELContext elContext = facesContext.getELContext();
        MethodExpression methodExp = elFactory.createMethodExpression(elContext,
            expression, null, new Class[] {DataChangeEvent.class});
        methodExp.invoke(elContext, new Object[] {evt});
    }
}

ノート:

プロジェクトおよびスケジュールのガント・チャートについては、ADFデータ・コントロールのdataChangeListenerのデフォルト実装では、データベースへの変更のコミットまたはロールバックを実行しません。これらの操作を処理するように、アプリケーションを構成する必要があります。

データバインドされた時系列の作成

時系列は、ユーザーが日付ベースのイベントを時間順に表示し、定義された時間範囲内を簡単に前後に移動することを可能にする対話型のデータ視覚化ツールです。

時系列は、時間軸に沿った時系列アイテムとしてのイベントの表示、時系列に表示可能な期間に対応する移動可能な概要ウィンドウ、および時系列の時間増分全体を示した概要時間軸で構成されます。表示可能な時間範囲は、水平方向のズーム制御を使用して変更できます。イベントに対応する各時系列アイテムは、関連する情報やアクションを表示し、時間軸内のイベント日付に結び付けられます。時系列アイテムは、概要パネルにマーカーで表されます。時系列コンポーネントでは、イベントの系列が2つまでサポートされます。

二重時系列を使用して、イベントの対照比較を行うことができます。たとえば、時系列を使用して従業員の入社日を表示したり、二重時系列を使用して2人の従業員の複数の人事管理イベントを比較したりすることができます。

図42-12は、Summit ADF DVTサンプル・アプリケーションの時系列を示しています。この例では、2行のテキストがイメージとともに表示されています。選択が構成されている場合は、時系列アイテム、引出線、および概要パネルのイベント・マーカーが強調表示されます。

図42-12 サンプル時系列

図42-13に、2人の従業員の複数の人事管理イベントを比較する二重時系列を示します。時間軸は2つのイベント系列の間に配置され、概要パネルは時系列の一番下に表示されています。

図42-13 人事管理イベントを比較する二重時系列

時系列項目の内容、マーカーの表示および時間軸は構成可能です。時系列のユースケース、エンド・ユーザー機能とプレゼンテーション機能、タグ構造、および時系列への特殊機能の追加の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「時系列コンポーネントの使用」の章を参照してください。

ADFデータ・コントロールを使用した時系列の作成方法

時系列に表示されるデータは、データ・コレクションに基づいています。timelineコンポーネントは、モデルを使用して、基になるリストのデータにアクセスします。固有のモデル・クラスはoracle.adf.view.rich.model.CollectionModelです。java.util.List、java.util.Arrayおよびjavax.faces.model.DataModelなど、その他のモデル・インスタンスも使用できます。データ・レイヤーではインスタンスがCollectionModelに自動的に変換されます。

Oracle ADFのデータ・コントロールを使用すると、JDeveloperでは宣言的なタスクとなります。「データ・コントロール」パネルから、1つ(または2つ)のイベント系列を生成するデータ・コレクションをドラッグして、JSFページにドロップします。

始める前に:

時系列について理解しておくと役立ちます。「データバインドされた時系列の作成」を参照してください。

他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。「データ視覚化コンポーネントの追加機能」を参照してください。

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

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

たとえば、図42-12に示す時系列のデータ・ソースは、Summit ADF DVTサンプル・アプリケーションのビュー・オブジェクトから取得しています。SEmp表を使用して、各従業員と雇用日を表すビュー・オブジェクトを作成します。
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従って、JSFページを作成します。

「データ・コントロール」パネルを使用して時系列を作成するには:

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

図42-14に、「データ・コントロール」パネルでSEmpView1コレクションを選択して、従業員の雇用日を表示する時系列を作成する例を示します。

図42-14 従業員の雇用日についての時系列用データ・コレクション

「図42-14 従業員の雇用日についての時系列用データ・コレクション」の説明
コレクションをJSFページにドラッグし、ポップアップ・メニューから「時系列」を選択します。
「時系列の作成」ダイアログで、次の値を設定することにより、時間軸と概要軸を構成します。
1. 開始時間: yyyy-mm-ddフォーマットを使用して、時系列の時間範囲に使用する開始日を入力します。時系列に表示するデータ・コレクション内に含めるイベントの開始日を選択します。ドロップダウン・リストから「現在の日付」を選択できます。カレンダ・アイコンをクリックして日付ピッカー・ダイアログを表示することもできます。デフォルト値は、現在の日付から3か月前に設定されます。
2. 終了時間: yyyy-mm-ddフォーマットを使用して、時系列の時間範囲に使用する終了日を入力します。時系列に表示するデータ・コレクション内に含めるイベントの終了日を選択します。ドロップダウン・リストから「現在の日付」を選択できます。カレンダ・アイコンをクリックして日付ピッカー・ダイアログを表示することもできます。デフォルト値はCurrent Dateです。
3. 軸スケール: ドロップダウン・リストを使用して、時系列の時間軸で使用するタイム・スケールを選択します。時間軸は、時系列に対する現在の時間増分を示します。
  
  「概要スケール」よりも小さなタイム・スケールを使用する必要があります。たとえば、概要スケールがmonthsに設定されている場合に、軸スケールをyearsに設定することはできません。カスタム軸スケールを指定することもできます。
  
  有効値は、twoyears、years、halfyears、quarters(デフォルト)、twomonths、months、twoweeks、weeks、days、sixhours、threehours、hours、halfhours、quarterhoursです。カスタム軸スケールを指定することもできます。『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の時系列へのカスタム・タイム・スケールの追加方法に関する項を参照してください。
4. 概要スケール: ドロップダウン・リストを使用して、時系列の概要軸で使用するタイム・スケールを選択します。概要軸は、時系列に含まれる合計時間増分を示します。
  
  有効値は、twoyears、years (デフォルト)、halfyears、quarters、twomonths、months、twoweeks、weeks、days、sixhours、threehours、hours、halfhours、quarterhoursです。カスタム軸スケールを指定することもできます。『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の時系列へのカスタム・タイム・スケールの追加方法に関する項を参照してください。
「時系列の作成」ダイアログで、次の値を設定することにより、1つ以上(二重時系列の場合は最大2つ)の時系列に対する時系列データ・モデルを構成します。
1. 系列値: ドロップダウン・リストを使用して、時系列で使用するデータ・コレクションを選択します。デフォルトでは、「データ・コントロール」パネルから挿入したデータ・コレクションが表示されます。該当する日付ベースの属性を1つ以上含むアプリケーション・モジュールからのコレクションのリストが、選択用に自動的に表示されます。
2. アイテム・データ値: ドロップダウン・リストを使用して、時系列内にスタンプされる時系列項目に対して使用する日付ベースの属性を選択します。「系列値」で参照されるコレクション内の該当するすべての属性が選択用に自動的に表示されます。
ノート:
他の系列を追加して構成できますが、コンポーネントで表示されるのは最大2つなので、その系列は条件付きでレンダリングする必要があります。
また、次のオプション値を構成することもできます。
- アイテム終了日: 時系列アイテムの終了日を表すデータ・コレクション内の時間関連属性を指定します。ドロップダウン・リストを使用すると、使用可能な選択肢のリストが表示されます。
- タイトル: テキストを入力するか、ドロップダウンを使用して、時系列アイテムの終了日を表すデータ・コレクション内の時間関連属性を指定します。
- 説明: テキストを入力するか、ドロップダウンを使用して、時系列アイテムの説明を表すデータ・コレクション内の時間関連属性を指定します。
たとえば、図42-15では、すべての値を指定できます。

図42-15 「時系列の作成」ダイアログ

「図42-15 「時系列の作成」ダイアログ」の説明
データ・バインディングの定義を完了する場合は「OK」をクリックし、時系列の作成を終了する場合は「取消」をクリックします。

データ・コントロールを使用した時系列作成時の処理

ADFデータ・コントロールを使用して時系列を作成すると、JDeveloperにより、次が実行されます。

時系列に対するバインディングがJSFページのページ定義ファイルに定義されます。
DVT時系列コンポーネント用のコードがJSFページに挿入されます。

次の例は、図42-12のSummit ADF DVTサンプルの時系列に対するJSFページのページ定義ファイルで定義されているバインディングを示しています。

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

次の例は、図42-12に例示された時系列に対して、JSFページに挿入されるコードを示しています。

<dvt:timeline id="tl1" startTime="2010-01-01" endTime="2011-12-31" itemSelection="multiple"
              binding="#{extEditor.component}" summary="Timeline Component Demo">
    <dvt:timeSeries id="ts1" var="evt" value="#{timeline.model}">
        <dvt:timeItem id="ti1" value="#{evt.date}" title="#{evt.description}" description="#{evt.date}" 
                      thumbnail="/resources/images/timeline/employment.png"/>
    </dvt:timeSeries>
    <dvt:timeAxis id="ta1" scale="weeks" zoomOrder="quarters months weeks days"/>
    <dvt:timelineOverview id="ov1">
        <dvt:timeAxis id="ta2" scale="years"/>
    </dvt:timelineOverview>
</dvt:timeline>

データ・コントロールを使用した二重時系列の作成に関する必知事項

「データ・コントロール」パネルを使用して二重時系列を作成する際には、2つの時系列の系列に対して同じまたは異なるデータ・コレクションを構成できます。またそれぞれに対して、時系列項目の表示属性および概要マーカーを指定できます。「時系列の作成」ウィザードに、該当する日付ベースの属性を1つ以上含むアプリケーション・モジュールからのデータ・コレクションのリストが、選択用に自動的に表示されます。

次の例は、図42-13の二重時系列に対するサンプル・コードを示しています。

<dvt:timeline id="tl1" startTime="2000-01-01" endTime="2011-12-31"
                       inlineStyle="width:1024px;height:500px" itemSelection="single" currentTime="2010-04-01">
    <dvt:timeSeries id="ts1" var="evt" value="#{timeline.firstModel}">
        <dvt:timeItem id="ti1" value="#{evt.date}" group="#{evt.group}" title="#{evt.description}" 
                      description="#{evt.date}" thumbnail="/resources/images/timeline/#{evt.type}.png">
            <f:facet name="overviewItem">
                <dvt:marker id="m1" shape="circle" fillColor="#ff0000"/>
            </f:facet>
        </dvt:timeItem>
    </dvt:timeSeries>
    <dvt:timeSeries id="ts2" var="evt" value="#{timeline.secondModel}">
        <dvt:timeItem id="ti2" value="#{evt.date}" title="#{evt.description}" 
                      description="#{evt.date}" thumbnail="/resources/images/timeline/#{evt.type}.png">
            <f:facet name="overviewItem">
                <dvt:marker id="m2" shape="circle" fillColor="#0000ff"/>
            </f:facet>
        </dvt:timeItem>
   </dvt:timeSeries>
   <dvt:timeAxis id="ta1" scale="quarters" zoomOrder="quarters months weeks days"/>
   <dvt:timelineOverview id="ov1">
       <dvt:timeAxis id="ta2" scale="years"/>
   </dvt:timelineOverview>
</dvt:timeline>

このコンポーネントのデータ要件、タグ構造、および外観と動作をカスタマイズするためのオプションの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「時系列コンポーネントの使用」の章を参照してください。