projectGantt
、resourceUtilizationGantt
およびschedulingGantt
を使用し、簡単なUI優先開発を使用してガント・チャートにデータを表示する方法を説明します。この章では、データ要件、タグ構造、およびコンポーネントの見え方や動作をカスタマイズするためのオプションを定義します。
アプリケーションでテクノロジ・スタックを使用する場合、データ・コントロールを使用してガント・チャートを作成することもできます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「データ・バインドされたガント・チャートおよび時系列コンポーネントの作成」の章を参照してください。
この章の内容は次のとおりです。
ADF DVTガント・チャートは、プロジェクトの計画と追跡に使用される視覚化ツールです。棒グラフと表を含む2つの領域で構成され、定義された限定的なタイム・フレームにおけるリソースやタスクを示します。ガント・チャートは、概要レベルとトランザクション・レベルの両方でプロジェクト管理に役立ちます。
ガント・チャートは、リソースまたはタスクを、開始と終了が明確なタイム・フレームに示します。ガント・チャート・コンポーネントの2つの領域にはデータが別々に表示されます。一方にはガント・チャートが表で表示され、もう一方にはガント・チャートがグラフィカルに表示されて、その間にサイズ変更可能なスプリッタがあります。表とチャートの領域は、同じデータと選択モデルを共有し、2つの領域間でスクロール、行の展開および縮小がサポートされ、同期化されます。
実行時に、ガント・チャートでは表領域にデータの入力、行の展開および縮小、列の表示および非表示、行へのナビゲート、および列のソートおよび合計の表示などの対話機能がユーザーに提供されます。表領域で、ユーザーはタスクを新しい日付にドラッグし、複数のタスクを選択して依存性を作成し、タスクの日付を拡張または縮小できます。ガント・チャートのツールバーは、データの表示の変更またはフィルタ処理、およびタスクの作成、削除、切取り、コピーおよび貼付けなどのユーザー操作のサポートに使用します。
ガント・チャートの領域は、両方ともADF Facesのツリー表コンポーネントに基づいています。行の仮想化など、ADFツリー表の詳細は、「表、ツリー、およびその他のコレクションベースのコンポーネントの使用」を参照してください。
ADF Ganttチャート・コンポーネントには、プロジェクト・ガント・チャート(projectGantt
)、リソース使用率ガント・チャート(resourceUtlizationGantt
)およびスケジュール・ガント・チャート(schedulingGantt
)があります。
ガント・チャートには、次のタイプがあります。
プロジェクト・ガント・チャート: プロジェクト・ガント・チャートはプロジェクト管理に使用されます。このチャートでは、タスクを縦にリストし、横向きの予定表に各タスクの期間を棒で示します。図28-1に示すように各タスクを別の線で示します。
図28-1 ソフトウェア・アプリケーション用プロジェクト・ガント・チャート
リソース使用率ガント・チャート: リソース使用率ガント・チャートでは、リソースのメトリック、たとえばリソースが割当てを上回っているか下回っているかをグラフィカルに示します。リソースを縦に示し、横方向の時間軸に割当てとキャパシティなどのメトリックを示します。図28-2に、指定した期間の特定のリソースに割り当てられ、利用されている時間を表示するリソース使用率ガント・チャートを示します。
図28-2 ソフトウェア・アプリケーション用リソース使用率ガント・チャート
リソース使用率ガント・チャートのメトリックが積上げ棒または横線として表示されるように構成することもできます。図28-3に示すリソース使用率ガント・チャートでは、2つのメトリックとして利用された時間を示す積上げ棒、割り当てられた時間を示す縦棒、およびチャートを通過するしきい値メトリックを示す横線が表示されています。
図28-3 積上げ棒および段付きの線として表示されているリソース・メトリック
スケジュール・ガント・チャート: スケジュール・ガント・チャートはリソースのスケジュールに使用されます。このチャートは手動のスケジュール表をベースにし、リソースを縦に表示し、対応するアクティビティを横方向の時間軸に表示します。リソースの例には、人、機械、部屋などがあります。スケジュール・ガント・チャートでは、図28-4に示すように、リソースに割り当てられている全タスクが1つの線で示されます。
図28-4 ソフトウェア・アプリケーション用スケジュール・ガント・チャート
ガント・チャートをどのように使用し、どのようにカスタマイズできるかを理解するには、次の要素と機能について復習すると役に立ちます。
ガント・チャートは、次の2つの領域で構成されます。
ガント・チャート・データ属性を表の列に表示する表領域。表領域には最低1つの列が必要ですが、必要な数の列に属性を定義できます。表領域には、データ・バインドされたガント・チャートの作成時に定義したすべての列がデフォルトで表示されます。ただし、これらの列の1つ以上を選択して非表示にすることもできます。
ガント・チャート・データの棒グラフを横方向の時間軸に沿って表示するチャート領域。時間軸にはズーム用の主設定と副設定があります。主設定はより大きな時間単位用で、副設定はより小さな時間単位用です。
たとえば、図28-5では、スケジュール・ガント・チャートの表領域には、タスク名およびリソースの列が含まれており、チャート領域では、月内の週を示す時間軸においてタスクがグラフ化されています。
図28-5 プロジェクト・ガント・チャート領域
ユーザーは、ガント・チャートのツールバーを使用して、ガント・チャートを操作できます。ツールバーはデフォルトでガント・チャートに表示されます。
ツールバーは、次の2つのセクションで構成されます。
メニュー・バー:ツールバーの左側の部分には、ガント・チャートに対するメニューのセットが含まれます。各ガント・チャート・タイプには、デフォルトのオプションのセットがあります。図28-7に、ガント・チャートにデフォルトで表示されるメニュー・バーを示します。「タスク」、「編集」および「表示」メニューがあります。メニュー・バーの可視性を変更すること、およびメニュー項目をカスタマイズすることができます。
注意:
メニュー・バー項目が非表示または無効になっている場合でも、ガント表領域でヘッダー・セルを右クリックすると、デフォルトの「表示」メニューを使用できます。
図28-7 ガント・チャートのサンプル・メニュー・バー
デフォルトでは、ガント・チャートの「表示」メニューの項目は、次の1つ以上の操作をサポートしています。
表領域での列の可視性の構成。
表領域での階層データの表示の展開および縮小。
チャート領域でのタスク間の依存性行の非表示と表示の切り替え。
ガント・チャートの凡例の非表示と表示の切り替え。
ガント・チャートでの特定日付の指定。図28-8に、「表示」メニューの「日付へ移動」ダイアログを示します。
ガント・チャートのタイム・スケールの変更。図28-9に、「表示」メニューの「タイム・スケール」ダイアログを示します。
注意:
メニュー・バーの「表示」メニューの項目では、それらの項目を機能させるためのアプリケーション・コードを記述する必要はありません。ただし、他のメニューで使用する項目にはアプリケーション・コードが必要です。
ツールバー・ボタン:ツールバーの右側の部分には、ガント・チャートを操作するためのアクション・ボタンのセットが表示されます。各ガント・チャート・タイプには、デフォルトのオプションのセットがあります。図28-10に、プロジェクト・ガント・チャートのサンプル・ツールバーを示します。
注意:
右から左への表示を使用するロケールでは、方向アイコンが逆の順番で表示されます。
ツールバーを使用して、ガント・チャートでの時間表示を変更できます。時間軸にズーム・インおよびズーム・アウトして、異なる時間単位でチャート領域を表示できます。
ズームして合せる特殊な機能を使用すると、グラフをスクロールする必要なく、チャート領域で表示可能な時間の量を選択することもできます。「表示」メニューのガント・チャートのタイム・スケールは、選択した日付に合わせて自動的に調整されます。図28-11に、プロジェクト・ガント・チャートで展開された「ズームしてあわせる」ツールバー・オプションを示します。
ガント・チャートの設計により、表領域とチャート領域の横方向のスクロールを別々に行えます。これは、表領域で特定のタスクまたはリソース情報を保持しつつ、チャート領域でスクロールして複数期間の情報を得る場合に特に有用です。
スクロールバーのかわりとして、ユーザーが複数ページのガント・チャートを選択およびナビゲートできる水平ページ・コントロールを表示することもできます。図28-12に、水平ページ・コントロールが構成されたリソース使用率ガント・チャートを示します。
ユーザーは、ツールバーのズーム・コントロールに加えて、[Ctrl]キーを押しながらマウスのスクロール・ホイールを使用することでも、ガント・チャートのタイム・スケールにズーム・インおよびズーム・アウトできます。複数のレベルを一度にズームする際、ユーザーが現在のレベルを把握できるように、ツールチップが表示されます。これは特にユーザーがクリック機能のないスクロール・ホイールを使用する場合に便利です。
プロジェクトおよびスケジュール・ガント・チャートでは、ユーザーはカーソルを使用してチャート領域を縦横にドラッグすることにより、チャート領域パンすることができます。移動カーソルは、ユーザーがタスク以外のチャート領域内をクリックすると表示されます。
またガント・チャートには、2つの領域間の垂直スペースで使用できるアイコンを使用して、表の表示を縮小および拡張するユーザー・オプションもあります。
タスク間の依存関係が指定されている場合、プロジェクトおよびスケジュール・ガント・チャートでは、チャート領域に依存関係線をオプションで表示できます。依存関係線を表示するオプションは、「表示」メニューの項目として使用できます。さらに、プロジェクト・ガント・チャートでは、依存関係のあるタスクの開始時または終了時にドロップダウン・メニューを使用して、先行タスクまたは後続タスクのメニュー・オプションとして依存関係を表示できます。
図28-13に、依存関係を線、メニュー項目として表示するオプション、または依存関係を表示しないオプションを含む、プロジェクト・ガント・チャートの「表示」メニューを示します。
図28-13 プロジェクト・ガント・チャートの「依存性の表示」オプション
図28-14に、後続タスクおよび先行タスクの依存関係タスク・メニュー項目を含むプロジェクト・ガント・チャートを示します。
ガント・チャートの表領域またはチャート領域を右クリックすると、メニュー項目の標準セットを含むコンテキスト・メニューが表示されます。tablePopupMenu
ファセットまたはchartPopupMenu
ファセットを使用して独自のメニュー項目のセットを使用できます。
詳細は、「ガント・チャートのコンテキスト・メニューのカスタマイズ」を参照してください。
図28-15に、スケジュール・ガント・チャートのタスクのプロパティに対して表示されるカスタム・コンテキスト・メニュー項目を示します。
メニュー・バーが非表示または無効な場合でも、ガント・チャートの表領域で列ヘッダーを右クリックすると、デフォルトの「表示」メニューが表示されます。
図28-16は、プロジェクト・ガント・チャートの表領域で列ヘッダーのコンテキスト・メニューとして示されるデフォルトの「表示」メニューを示しています。
rowSelection
属性を使用して、ガント・チャートのチャート領域で、選択が行なし、単一行または複数行になるように構成できます。プロジェクト・ガント・チャートのタスク、あるいはスケジュールまたはリソース使用率ガント・チャートのリソースを選択できます。この設定により、選択したタスクまたはリソースに対してロジックを実行できます。たとえば、ユーザーがリソースを選択し、そのリソースに基づきカレンダを表示できるようにすることが必要な場合があります。
表領域で選択されている行が変更されると、コンポーネントにより選択イベントがトリガーされます。このイベントにより、どの行が選択または選択解除されたか報告されます。コンポーネントにより選択が宣言的に処理される際、選択された行でロジックを実行する必要がある場合は、それらの行にアクセスしてロジックを実行するコードを実装する必要があります。これは、マネージドBeanの選択リスナー・メソッドで実行できます。詳細は、「選択されたタスクまたはリソースでのアクションの実行」を参照してください。
注意:
複数の選択を実行できるようにコンポーネントを構成した場合、ユーザーが行を1つ選択し、[Shift]キーを押して別の行を選択すると、間にあるすべての行が選択されます。この選択は、選択が複数のデータ・フェッチ・ブロックにまたがる場合でも保持されます。同様に、[Ctrl]キーを使用して、隣接していない行を選択することもできます。
たとえば、一度に25行のみフェッチするようにガント・チャートの表領域が構成されている場合、ユーザーが100行選択すると、フレームワークにより選択が追跡されます。
プロジェクトおよびスケジュール・ガント・チャートでは、ユーザーは、チャート領域で編集可能タスクのタスク・バーを移動またはサイズ変更できます。編集可能タスクにカーソルを合わせると、移動カーソルが表示され、カーソルの位置に関する情報がポップアップします。チャート内のタスクを再配置するには、関連する開始日および終了日を含むタスク・バーをクリックしてドラッグします。タスクの開始日または終了日が編集可能の場合、タスク・バーの先頭または末尾に両方向の矢印が表示されます。日付をクリックして、目的の場所までドラッグします。
図28-17に、プロジェクト・ガント・チャート内の編集可能タスクの移動カーソルおよびサイズ変更カーソルを示します。
図28-17 編集可能タスク・バーの移動カーソルおよびサイズ変更カーソル
ユーザー操作にデータの変更が含まれる場合、ガント・チャートでは、イベント処理およびデータ・モデルの更新を実行することで変更が処理されます。ガント・チャートに対し検証が構成されている場合、検証により、送信されたデータが基本要件を満たしていること(たとえば、日付が有効で休日の期間に該当しないことなど)が確認されます。検証に失敗すると、データ・モデルの更新が省略され、エラー・メッセージが返されます。
ガント・チャートのサーバー側イベントが開始されると、変更に関する検証された情報を含むイベントが登録されたリスナーに送信されます。リスナーは基礎となるデータ・モデルを更新します。カスタマイズされたイベント・ハンドラは、ガント・チャート・コンポーネントのdataChangeListener
属性でメソッド・バインディング式を指定することによって登録できます。
ガント・チャートによってサポートされるサーバー側イベントには、次のものが含まれます。
ガント・チャート表領域における表のセルのデータ更新
タスクの作成、更新、削除、移動、切取り、コピー、貼付け、インデント、アウトデント
タスク・バーを1つの行から別の行にドラッグすることによるリソースの再割当て
別の日付へのタスク・バーのドラッグ
タスクの期間の延長
タスクのリンク付けまたはリンク解除
ガント・チャート表領域での単一の行または複数の行の選択
ユーザー・アクションを元に戻すまたはやり直し
タスク・バーのダブルクリック
ユーザーはツールバーからドロップダウン・リストを使用してガント・チャートのデータをフィルタ処理できます。カスタム・フィルタを作成できます。
ガント・チャートには、ApacheまたはXML Publisherと連動してPDFファイルを生成し、印刷する機能が用意されています。詳細は、「ガント・チャートの印刷」を参照してください。
ガント・チャートにデータ・ソースからどのようにデータを配信するかを構成できます。データは、レンダリング直後、データが使用可能になり次第、またはコンポーネントのシェルがレンダリングされた後の遅延フェッチのいずれかで、ガント・チャートに配信できます。
データ・ソースが使用可能の場合、ガント・チャートは、デフォルトで、データ・ソースからのコンテンツの配信をサポートします。contentDelivery
属性は、デフォルトでwhenAvailable
に設定されています。
ガント・チャートは仮想化されています。つまり、サーバーの一部のデータのみがクライアントに配信され、表示されます。日付に関連する値に基づいて、データ・ソースから特定数の行または列を一度にフェッチするようにガント・チャートを構成できます。フェッチ・サイズを構成するには、fetchSize
およびhorizontalFetchSize
を使用します。
ガント・チャート・コンポーネントを実装する前に、その他のADF Faces機能を理解しておくと役に立ちます。また、いったんガント・チャート・コンポーネントをページ追加すると、検証やアクセシビリティなどの機能を追加する必要があることに気付く場合があります。
ガント・チャート・コンポーネントで使用できるその他の機能へのリンクは、次のとおりです。
部分ページ・レンダリング: 他のコンポーネントで実行されたアクションに基づく新しいデータをページ上に表示するために、ガント・チャートをリフレッシュできます。詳細は、「部分ページ・コンテンツの再レンダリング」を参照してください。
パーソナライズ: ユーザーは実行時にガント・チャートの表示方法を変更できますが、アプリケーションがユーザーのカスタマイズを許可するように構成されていないかぎり、ユーザーがページを終了するとそれらの値は保持されません。詳細は、「JSFページでのユーザー・カスタマイズの許可」を参照してください。
アクセシビリティ: コンポーネントのアクセシビリティ・ガイドラインに従っていれば、ガント・チャート・コンポーネントにアクセス可能です。「アクセス可能なADF Facesページの開発」を参照してください。
Excelにエクスポート: af:exportCollectionActionListener
を使用してプロジェクト・ガント・チャートの表領域をエクスポートできます。詳細は、「表、ツリーまたはツリー表からのデータのエクスポート」を参照してください。
コンテンツ配信: ガント・チャートの表領域を、contentDelivery
属性を使用して、データ・ソースから特定の行数を一度にフェッチするように構成できます。詳細は、「コンテンツの配信」を参照してください。
自動データ・バインディング: アプリケーションでテクノロジ・スタックを使用する場合、ADFビジネス・コンポーネントの構成方法に基づいて、自動的にバインドされたガント・チャートを作成できます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「データ・バインドされたガント・チャートおよび時系列コンポーネントの作成」の章を参照してください。
注意:
最終的にページのUIコンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールを使用します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「プレースホルダ・データ・コントロールを使用したページの設計」の章を参照してください。
さらに、データ視覚化コンポーネントでは、データの配信方法、自動部分ページ・レンダリング(PPR)、イメージ形式、そしてデータの表示および編集方法など、同じ機能の大部分が共有されています。詳細は、「データ視覚化コンポーネントの共通機能」を参照してください。
ADF DVTガント・チャート・コンポーネントを使用するには、「コンポーネント・パレット」ウィンドウを使用して、ページにガント・チャート・コンポーネントを追加します。次に、ガント・チャートのデータ・コレクションを定義し、JDeveloperの「プロパティ」ウィンドウでタグ属性を使用して、追加の構成を完了します。
ガント・チャートのデータ・モデルは、ツリー(階層)モデル、あるいは行セットまたはオブジェクトのフラット・リストを含むコレクション・モデルのいずれかです。ガント・チャートをデータ・コントロールにバインドする場合、データ・コントロールのコレクションをガント・チャートのノード定義へマップする方法を指定します。『Application Development FrameworkによるFusion Webアプリケーションの開発』で、「データ・バインドされたガント・チャートおよび時系列コンポーネントの作成」を参照してください。
プロジェクト・ガント・チャートのデータ・モデルは、階層式のデータをサポートし、TreeModel
を使用して基礎となるリストのデータにアクセスします。使用される特定のモデル・クラスはorg.apache.myfaces.trinidad.model.TreeModel
です。
TreeModel
によって返されるオブジェクトのコレクションには、最低限、次のプロパティが必要です。
taskId:
タスクのID
startTime:
タスクの開始時期
endTime:
タスクの終了時期
(オプション)オブジェクトにoracle.adf.view.faces.bi.model.Task
インタフェースを実装して、ガント・チャートに正しいプロパティが提供されていることを確認できます。
ADFデータ・コントロールにデータをバインドする場合、プロジェクト・ガント・チャートでは、次のノード定義を使用できます。
タスク・ノード:タスクのコレクションを表します。タスク・ノード定義には、次のタイプのオプション・アクセッサがあります。
subTask
(プロジェクト・ガント・チャートにのみ使用可能)
splitTask
分割タスク・ノード:分割タスクのコレクションを表します。分割タスク・ノード定義にはアクセッサはありません。
依存性ノード:タスクの依存性のコレクションを表します。依存性ノード定義には、アクセッサはありません。
再帰タスク・ノード:再帰タスクのコレクションを表します。再帰タスク・ノード定義には、アクセッサはありません。
表28-1に、プロジェクト・ガント・チャートのデータ・オブジェクト・キーの完全なリストを示します。
表28-1 プロジェクト・ガントのデータ・オブジェクト・キー
データ・オブジェクト・キー | 日付型と説明 |
---|---|
|
Date。標準タスクおよびマイルストン・タスクの実際の終了時期。 |
|
Date。標準タスクおよびマイルストン・タスクの実際の開始時期。 |
|
Date。標準タスクおよびサマリー・タスクの完了。 |
|
Boolean。タスクがすべてのタスクに対してクリティカルかどうかを指定します。 |
依存性(ノード) |
タスクの依存性のリスト。依存性のデータ・オブジェクト・キーには次のものが含まれる。
|
|
Boolean。チャート領域でタスク・バーを編集可能にするかどうかを指定します。 |
|
Date。すべてのタスクの終了時期。 |
|
String。すべてのタスクのタスク・バーに関連付けられる1番目のアイコン。アイコンは、その他の属性に応じて変わる可能性があります。 |
|
String。すべてのタスクのタスク・バーに関連付けられる2番目のアイコン。 |
|
String。すべてのタスクのタスク・バーに関連付けられる3番目のアイコン。 |
|
String。すべてのタスクのタスク・バーでのアイコンの配置。有効な値は |
|
Boolean。ノード定義がコンテナかどうかを指定します。 |
|
String。すべてのタスクのタスク・バーに関連付けられるラベル。 |
|
String。すべてのタスクのタスク・バーでのラベルの配置。有効な値は |
|
Integer。標準タスクおよびサマリー・タスクが完了した割合。 |
再帰タスク(ノード) |
すべてのタスクに関する再帰タスクのリスト。 |
分割タスク(ノード) |
すべてのタスクに関する連続的な時系列のないタスクのリスト。 |
|
Date。すべてのタスクの開始時期。 |
サブタスク(ノード) |
すべてのタスクに関するサブタスクのオプションのリスト。 |
|
String。すべてのタスクの一意の識別子。 |
|
Sting。すべてのタスクに関するタスクのタイプ。 |
リソース使用率ガント・チャートのデータ・モデルは、階層式のデータをサポートし、TreeModel
を使用して基礎となるリストのデータにアクセスします。使用される特定のモデル・クラスはorg.apache.myfaces.trinidad.model.TreeModel
です。
TreeModel
によって返されるオブジェクトのコレクションには、最低限、次のプロパティが必要です。
resourceId:
タスクのID。
timeBuckets:
このリソースの時間バケット・オブジェクトのコレクション。
(オプション)オブジェクトにoracle.adf.view.faces.bi.model.Resource
インタフェースを実装して、ガント・チャートに正しいプロパティが提供されていることを確認できます。
timeBuckets
プロパティによって返されるオブジェクトのコレクションには、次のプロパティも必要です。
time:
時間バケットによって表される日付。
values:
このリソースのメトリックのリスト。
ADFデータ・コントロールにデータをバインドする場合、リソース使用率ガント・チャートでは、次のノード定義を使用できます。
リソース・ノード:リソースのコレクションを表します。リソース・ノード定義には、現在のリソースのサブリソースのコレクションを返すsubResources
オプション・アクセッサがあります。
時間バケット・ノード:メトリックが定義された時間スロットのコレクションを表します。
時間バケット詳細ノード: 時間バケット・ノードのオプションの子アクセッサで、時間バケットの他のメトリック値とともにレンダリングされる行のコレクションを表します。
表28-2に、リソース使用率ガント・チャートのデータ・オブジェクト・キーの完全なリストを示します。
表28-2 リソース使用率ガントのデータ・オブジェクト・キー
データ・オブジェクト・キー | データ型と説明 |
---|---|
|
String。タスク・バーに関連付けられるラベル。 |
|
String。タスク・バーでのラベルの配置。有効な値は、 |
|
String。リソースの一意の識別子。 |
|
List。リソースに関連付けられるタスクのリスト。 |
|
List。リソースに関連する属性のリスト。 |
|
Date。時間バケットの開始時期。 |
|
Double。メトリックの値。 |
スケジュール・ガント・チャートのデータ・モデルは、階層式のデータをサポートし、TreeModel
を使用して基礎となるリストのデータにアクセスします。使用される特定のモデル・クラスはorg.apache.myfaces.trinidad.model.TreeModel
です。
TreeModel
によって返されるオブジェクトのコレクションには、最低限、次のプロパティが必要です。
resourceId
: リソースのID。
tasks:
このリソースのタスク・オブジェクトのコレクション。
(オプション)オブジェクトにoracle.adf.view.faces.bi.model.ResourceTask
インタフェースを実装して、ガント・チャートに正しいプロパティが提供されていることを確認できます。
tasks
プロパティによって返されるオブジェクトのコレクションには、次のプロパティも必要です。
taskId:
タスクのID
startTime:
タスクの開始時期
endTime:
タスクの終了時期
オプションで、タスク・オブジェクトごとにbackgroundBars
プロパティを設定して、毎月、毎週または毎日のスケジュールのシフトの変更などの場合に、毎日の時間間隔上にある特定リソースの個々の背景の棒の外観をカスタマイズできます。backgroundBars
プロパティによって返されるオブジェクトのコレクションには、次のプロパティも必要です。
startTime:
タスクの開始時期
endTime:
タスクの終了時期
type
: TaskbarFormatManager
を介してガント・チャートに登録可能な、backgroundBarFormat
オブジェクトのインスタンスにリンクされています。
ADFデータ・コントロールにデータをバインドする場合、スケジュール・ガント・チャートでは、次のノード定義を使用できます。リソース・ノードには、次のタイプのアクセッサがあります。
subResources
: 現在のリソースのサブリソースのコレクションを返します。このアクセッサはオプションです。
tasks
: 現在のリソースのタスクのコレクションを返します。このアクセッサは必須です。タスクに、splitTask
アクセッサを含めることができます。
表28-3に、スケジュール・ガント・チャートのデータ・オブジェクト・キーの完全なリストを示します。
表28-3 スケジュール・ガント・チャートのデータ・オブジェクト・キー
データ・オブジェクト・キー | データ型と説明 |
---|---|
依存性(ノード) |
タスクの依存性のリスト。依存性のデータ・オブジェクト・キーには次のものが含まれる。
|
|
Date。すべてのタスクの終了時期。 |
|
String。すべてのタスクのタスク・バーに関連付けられる1番目のアイコン。アイコンは、その他の属性に応じて変わる可能性があります。 |
|
String。すべてのタスクのタスク・バーに関連付けられる2番目のアイコン。 |
|
String。すべてのタスクのタスク・バーに関連付けられる3番目のアイコン。 |
|
String。すべてのタスクのタスク・バーでのアイコンの配置。有効な値は、 |
|
Boolean。ノード定義がコンテナかどうかを指定します。 |
|
String。すべてのタスクのタスク・バーに関連付けられるラベル。 |
|
String。すべてのタスクのタスク・バーでのラベルの配置。有効な値は、 |
再帰タスク(ノード) |
すべてのタスクに関する再帰タスクのリスト。 |
|
String。リソースの一意の識別子。 |
分割タスク(ノード) |
すべてのタスクに関する連続的な時系列のないタスクのコレクション。 |
|
Date。すべてのタスクの開始時期。 |
|
Date。タスクの開始前の起動時期。 |
タスク(ノード)(必須) |
リソースに関連付けられるタスクのリスト。 |
|
String。すべてのタスクに関するタスクの一意の識別子。 |
|
String。すべてのタスクに関するタスクのタイプ。 |
|
Object。その週の営業日のリスト。 |
|
String。リソースの作業終了時間。 |
|
String。リソースの作業開始時間。 |
プロジェクト・ガント・チャートおよびスケジュール・ガント・チャートでは、チャート領域でのタスクのレンダリング方法を説明する書式設定プロパティのセットが指定された事前定義済タスクが使用されます。すべてのサポートされるタスクには一意の識別子が必要です。
次のリストで、サポートされるタスクとガント・チャートでの外観を説明します。
標準:基本的なタスク・タイプ。プレーンな横棒でタスクの開始時期、終了時期および期間を示します。
サマリー:サブタスクのグループの開始日と終了日。サマリー・タスクは移動や伸長できません。サブタスクの日付が変更された場合、アプリケーションで、サマリー・タスクの開始日と終了日をかわりに再計算する必要があります。サマリー・タスクはプロジェクト・ガント・チャートにのみ使用できます。
マイルストン:ガント・チャートの特定の日付。マイルストン・タスクに関連付けられる日付は1つのみです。マイルストン・タスクは伸長できませんが、移動できます。マイルストン・タスクはプロジェクト・ガント・チャートにのみ使用できます。
再帰:ガント・チャートで繰り返されるタスクで、各インスタンスには独自の開始日および終了日が含まれます。個々の再帰タスクにはオプションでサブタイプを含めることができます。個々の再帰タスクのその他すべてのプロパティには、そのタスクが一部となっているタスクのプロパティが使用されます。ただし、個々の再帰タスクにサブタイプがある場合は、このサブタイプがタスク・タイプをオーバーライドします。
分割:2つの横棒に分割されたタスクで、通常は線でつながっています。棒の間の時間は、移動時間または停止時間によるアイドル時間を表します。
スケジュール済:スケジュール・ガント・チャートの基本的なタスク・タイプ。このタスク・タイプはタスクの開始時期、終了時期および期間、および指定されている場合は起動時期を示します。
標準タスク、サマリー・タスクおよびマイルストン・タスクでは、タスクの外観およびアクティビティを変更する追加の属性がサポートされています。次にこれらのスタイル属性を示します。
percentComplete
、completedThrough:
タスクの完了度を示す追加の棒グラフが描画されます。これは標準タスク・タイプおよびサマリー・タスク・タイプに適用されます。
critical:
棒グラフの色が赤に変更され、クリティカルとしてマークされます。これは標準タスク・タイプ、サマリー・タスク・タイプおよびマイルストン・タスク・タイプに適用されます。
actualStart
およびactualEnd:
これらの属性が指定されると、1つの棒グラフではなく2つの棒グラフが描画されます。1つの棒グラフはベース開始日およびベース終了日を示し、もう1つの棒グラフは実際の開始日および終了日を示します。これは標準タスク・タイプおよびマイルストン・タスク・タイプに適用されます。
図28-18に、プロジェクト・ガント・チャートの一般的なタスク・タイプを表示する凡例を示します。
図28-18 プロジェクト・ガント・チャートのタスク・タイプ用凡例
リソース使用率ガント・チャートでは、縦方向にリソースがグラフィカルに表示され、横方向の時間軸に割当てや容量などのメトリックが表示されます。時間バケットでタスクに対して表示されるメトリックは、TaskbarFormat
クラスでの指定に従いレンダリングされます。タスクのメトリックとして、次の3つのタイプのいずれかを使用できます。
BAR
(デフォルト): 縦棒としてタスクをレンダリングします。
STACKED
: 前のバーにバーを積み上げる形式でタスクをレンダリングします。
STEPPED_LINE
: 横線としてタスクをレンダリングします。
各ガント・チャート・タグ名が接頭辞dvt:
で始まる3つのガント・チャート・コンポーネントは、タグがADF Data Visualization Tools (DVT)タグ・ライブラリの1つであることを示します。
projectGantt
resourceUtilizationGantt
schedulingGantt
すべてのガント・チャート・コンポーネントが、ガント・チャートの情報パネルにオプションの凡例を提供するための子タグganttLegend
をサポートしています。一部のメニュー・バーおよびツールバーの機能は、ガントの凡例が指定されているかどうかによって使用できる場合とできない場合があります。
ガント・チャート表領域では、ADF Faces af:column
タグを使用して、ヘッダー・テキスト、アイコンおよびデータの位置合せ、列の幅、および列にバインドされたデータを指定できます。データを階層構造で表示するには、nodeStamp
ファセットで階層の要素の1次識別子を指定します。たとえば、"Task Name"列をプロジェクト・ガント・チャートのnodeStamp
ファセットとして使用することもできます。次の例に、"Task Name"をnodeStamp
ファセットとして使用し、Resource、Start DateおよびEnd Dateの列を持つプロジェクト・ガント・チャートのサンプル・コードを示します。
<dvt:projectGantt id="projectChart1" startTime="2008-04-12" endTime="2009-04-12" value="#{project.model}" var="task"> <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 headerText="Task Name"> <af:outputText value="#{task.taskName}"/> </af:column> </f:facet> <af:column headerText="Resource"> <af:outputText value="#{task.resourceName}"/> </af:column> <af:column headerText="Start Date"> <af:outputText value="#{task.startTime}"/> </af:column> <af:column headerText="End Date"> <af:outputText value="#{task.endTime}"/> </af:column> </dvt:projectGantt>
nodeStamp
ファセットに加え、他のファセットもガント・チャート・コンポーネントによってカスタマイズに使用されます。表28-4に、ガント・チャート・コンポーネントによってサポートされているファセットを示します。
表28-4 ガント・チャート・コンポーネントによってサポートされているファセット
ファセット | 説明 |
---|---|
|
チャート領域のポップアップ・メニューに表示される追加のコントロールの識別に使用するコンポーネントを指定します。 |
|
タスク・プロパティ・ダイアログの「カスタム」タブに表示されるコントロールの識別に使用するコンポーネントを指定します。 |
|
主時間軸の識別に使用するコンポーネントを指定します。 |
|
ガント・メニュー・バーに表示される追加のコントロールの識別に使用するコンポーネントを指定します。 |
|
副時間軸の識別に使用するコンポーネントを指定します。 |
|
ガント・チャートの各要素のスタンプ設定に使用するコンポーネントを指定します。アクティビティのないすべてのコンポーネント、および |
|
表領域のポップアップ・メニューに表示される追加のコントロールの識別に使用するコンポーネントを指定します。 |
|
ガント・ツールバーに表示される追加のコントロールの識別に使用するコンポーネントを指定します。 |
簡単なUI優先開発を使用してページを設計している場合、「コンポーネント」ウィンドウを使用して、プロジェクト、リソース使用率またはスケジュール・ガント・チャート・コンポーネントをJSFページにドラッグ・アンド・ドロップします。ページにガント・チャートが追加された後、「プロパティ」ウィンドウを使用してデータ値を指定すること、およびガント・チャートの追加の表示属性を構成することができます。
「プロパティ」ウィンドウで、各属性フィールドのドロップダウン・メニューを使用して、プロパティの説明、およびEL式ビルダーまたはその他の専用ダイアログの表示などのオプションを表示できます。図28-19に、プロジェクト・ガント・チャート・コンポーネントのstartTime
属性のドロップダウン・メニューを示します。
図28-19 プロジェクト・ガント・チャートのstartTime属性のドロップダウン・メニュー
注意:
アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用してガント・チャートを作成でき、バインドが自動的に行われます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「データ・バインドされたガント・チャートおよび時系列コンポーネントの作成」の章を参照してください
始める前に:
ガント・チャートの属性やガント・チャートの子コンポーネントが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「ガント・チャートの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「ガント・チャート・コンポーネントの追加機能」を参照してください。
ページにガント・チャートを追加する手順:
「コンポーネント」ウィンドウを使用してガント・チャートを作成すると、JDeveloperによりJSFページにコードが挿入されます。
次の例に、プロジェクト・ガント・チャートに対してJSFページで挿入されるコードを示します。
<dvt:projectGantt startTime="2011-03-20" endTime="2011-06-19" var="row" id="pg1"> <f:facet name="major"> <dvt:timeAxis scale="weeks" id="ta5"/> </f:facet> <f:facet name="minor"> <dvt:timeAxis scale="days" id="ta6"/> </f:facet> <f:facet name="nodeStamp"> <af:column sortable="false" headerText="col1" id="c11"> <af:outputText value="#{row.col1}" id="ot11"/> </af:column> </f:facet> <af:column sortable="false" headerText="col2" id="c12"> <af:outputText value="#{row.col2}" id="ot12"/> </af:column> <af:column sortable="false" headerText="col3" id="c13"> <af:outputText value="#{row.col3}" id="ot13"/> </af:column> <af:column sortable="false" headerText="col4" id="c14"> <af:outputText value="#{row.col4}" id="ot14"/> </af:column> <af:column sortable="false" headerText="col5" id="c15"> <af:outputText value="#{row.col5}" id="ot15"/> </af:column> </dvt:projectGantt>
JSFページにADF DVTガント・チャートを追加した後、新しいタスク・タイプを作成すること、積上げ棒または水平線としてタスクが表示されるように構成すること、およびタスクの属性の詳細を表示することができます。
タスク・タイプは、視覚的にはガント・チャートのチャート領域の棒として表されます。タスク・タイプは、次の3つのいずれかの方法で作成できます。
新規タスク・タイプを次の方法で作成できます。
JSFページまたは個別のCSSファイルでのタスク・タイプ・スタイル・プロパティの定義。
TaskbarFormat
オブジェクトの定義およびtaskbarFormatManager
によるオブジェクトの登録。
関連付けられたTaskbarFormat
オブジェクトの取得およびset
メソッドを使用したそのプロパティの更新による、事前定義されたタスク・タイプのプロパティの変更。
TaskBarFormat
オブジェクトでは次のプロパティが公開されます。
塗りつぶしの色
塗りつぶしのイメージ・パターン
枠の色
マイルストン・タスクに使用されるイメージ
サマリー・タスクの開始と終了に使用されるイメージ
分割タスクまたは再帰タスクなど、複数の棒のあるタスクでは、プロパティは個々の棒に定義されます。
次の例に、JSFページでカスタム・タスク・タイプのプロパティを定義するサンプル・コードを示します。
<af:document> <f:facet name="metaContainer"> <f:verbatim> <![CDATA[ <style type="text/css"> .onhold { background-image:url('images/Bar_Image.png'); background-repeat:repeat-x; height:13px; border:solid 1px #000000; } </style> ]]> </f:verbatim> </f:facet>
次の例に、TaskbarFormat
オブジェクトで塗りつぶしの色と枠の色を定義し、taskbarFormatManager
にオブジェクトを登録するサンプル・コードを示します。
TaskbarFormat _custom = new TaskbarFormat("Task on hold", null, "onhold", null); // _gantt.getTaskbarFormatManager().registerTaskbarFormat("FormatId", _custom); TaskbarFormat _custom = new TaskbarFormat("Task on hold", "#FF00FF", null, "#00FFDD", 13); // _gantt.getTaskbarFormatManager().registerTaskbarFormat("FormatId", _custom);
リソース使用率ガント・チャートでは、指定した期間にリソースに割り当てられ使用されている単位が時間バケットに表示されます。デフォルトでは、これらの単位は、チャート領域で縦棒としてレンダリングされます。2つ以上の棒が積み上げられるようにグラフィカル表示を構成することもできます。
たとえば、図28-3のリソース使用率ガント・チャートでは、AVAILABLE
リソース・メトリック棒の隣の縦棒にRUN
およびSETUP
リソース・メトリックが積み上げられています。
リソース使用率ガント・チャートで積上げ棒を構成するには、setDisplayAs()
メソッドを使用してTaskbarFormat
オブジェクトを更新します。STACK
表示を指定すると、前のメトリックにメトリックが積み上げられる形式でタスクがレンダリングされます。次の例に、RUN
メトリックが前のメトリックであるSETUP
の上に積み上げられるように構成するマネージドBeanを示します。
public class ResourceUtilizationGantt { private TreeModel m_model; public String[] getMetrics() { return new String[]{"SETUP", "RUN", "AVAILABLE"}; } public TaskbarFormatManager getTaskbarFormatManager() { TaskbarFormatManager _manager = new TaskbarFormatManager(); TaskbarFormat _format = TaskbarFormat.getInstance("Run Hours", UIResourceUtilizationGantt.MIDNIGHT_BLUE_FORMAT); _format.setStacked(true); _manager.registerTaskbarFormat("SETUP", TaskbarFormat.getInstance("Setup Hours", UIResourceUtilizationGantt.BRICK_RED_FORMAT)); _manager.registerTaskbarFormat("RUN", _format); _manager.registerTaskbarFormat("AVAILABLE", TaskbarFormat.getInstance("Available Hours", UIResourceUtilizationGantt.TEAL_FORMAT)); return _manager; }
リソース使用率ガント・チャートのチャート領域で、リソース・メトリックを縦棒として表示することに加え、チャート領域でメトリックが横線として表示されるように構成できます。これは、リソースのしきい値レベルなど、容量メトリックを表示する場合に便利です。
たとえば、図28-3に示されているリソース使用率ガント・チャートには、積上げRUN
およびSETUP
メトリック、およびALLOCATED
メトリック棒に対して、しきい値メトリックを表示する容量線があります。
リソース使用率ガント・チャートでリソース容量線を構成するには、setDisplayAs()
メソッドを使用してTaskbarFormat
オブジェクトを更新します。STEPPED_LINE
表示を指定すると、縦棒の上に水平線が表示され各メトリックを通過するという形式でタスクがレンダリングされます。次の例に、リソース・メトリックTHRESHOLD
が縦棒メトリックを通過するように構成するマネージドBeanを示します。
public class ResourceUtilizationGanttSteppedLine { private TreeModel m_model; public String[] getMetrics() { return new String[]{"SETUP", "RUN", "AVAILABLE", "THRESHOLD"}; } public TaskbarFormatManager getTaskbarFormatManager() { TaskbarFormatManager _manager = new TaskbarFormatManager(); TaskbarFormat _format = TaskbarFormat.getInstance("Run Hours", UIResourceUtilizationGantt.MIDNIGHT_BLUE_FORMAT); _format.setStacked(true); _manager.registerTaskbarFormat("SETUP", TaskbarFormat.getInstance("Setup Hours", UIResourceUtilizationGantt.BRICK_RED_FORMAT)); _manager.registerTaskbarFormat("RUN", _format); _manager.registerTaskbarFormat("AVAILABLE", TaskbarFormat.getInstance("Available Hours", UIResourceUtilizationGantt.TEAL_FORMAT)); MetricFormat _threshold = new MetricFormat("threshold", "#FF0000", null, "#FF0000", MetricFormat.Display.STEPPED_LINE); _manager.registerTaskbarFormat("THRESHOLD", _threshold); return _manager; }
デフォルトでは、リソース使用率ガント・チャートの時間バケットには、固定サイズのメトリックが表示されます。
たとえば、図28-20のガント・チャートでは、会社のリソースの表に対し、積上げRUN
およびSETUP
メトリック、およびALLOCATED
メトリック棒が表示されています。
リソースに関連する属性により時間バケット・メトリックの詳細を取得することが必要な場合があります。たとえば、図28-20のリソース使用率ガント・チャートでは、各製品に使用された時間の実際の値によってBUDGET
メトリックの詳細値が示されています。
図28-20 リソース使用率ガント・チャートのメトリック属性の詳細
リソースの属性詳細の表示を構成するには、ページ定義ファイルに子timeBucketDetails
アクセッサを追加する必要があります。次の例に、ページ定義ファイルにアクセッサを追加するためのサンプル・コードを示します。
<nodeDefinition DefName="model.GanttRugResourceAppView" type="Resources"> <AttrNames> <Item Value="ResourceId" type="resourceId"/> </AttrNames> <Accessors> <Item Value="GanttRugTimebucketAppView" type="timeBuckets"/> </Accessors> </nodeDefinition> <nodeDefinition type="TimeBuckets" DefName="model.GanttRugTimebucketAppView"> <AttrNames> <Item type="time" Value="StartDate"/> <Item type="metric" Value="Budget"/> </AttrNames> <Accessors> <Item Value="GanttRugProductAppView" type="timeBucketDetails"/> </Accessors> </nodeDefinition> <nodeDefinition type="TimeBucketDetails"> <AttrNames> <Item type="metric" Value="Actual"/> <Item type="format" Value="Product"/> </AttrNames> </nodeDefinition>
リソース使用率ガント・チャートでリソースの属性詳細を構成するには、setDisplayAs()
メソッドを使用してTaskbarFormat
オブジェクトを更新します。次の例に、BUDGET
リソース棒に対し属性詳細メトリックを構成するマネージドBeanを示します。
public class ResourceUtilizationGanttAttributeDetail { private TreeModel m_model; public String[] getMetrics() { return new String[] {}; } public TaskbarFormatManager getTaskbarFormatManager() { TaskbarFormatManager _manager = new TaskbarFormatManager(); _manager.registerTaskbarFormat("Wilson", TaskbarFormat.getInstance("Wilson", UIResourceUtilizationGantt.MIDNIGHT_BLUE_FORMAT)); _manager.registerTaskbarFormat("Umbro", TaskbarFormat.getInstance("Umbro", UIResourceUtilizationGantt.BRICK_RED_FORMAT)); _manager.registerTaskbarFormat("Rbk", TaskbarFormat.getInstance("Rbk", UIResourceUtilizationGantt.LAVENDER_FORMAT)); _manager.registerTaskbarFormat("Puma", TaskbarFormat.getInstance("Puma", UIResourceUtilizationGantt.TEAL_FORMAT)); ... return _manager; } public TreeModel getModel() { if (m_model == null) m_model = SampleModelFactory.getResourceUtilizationGanttAttributeDetailModel(); return m_model; } }
スケジュール・ガント・チャートは、リソースに割り当てられたすべてのタスクをグラフにするために1本の線を使用します。作業時間の属性を構成して、指定した背景色を毎日の時間間隔の特定のリソースに適用できます。この時間間隔は週のすべての作業日で繰り返され、リソースによって異なることがあります。ただし、リソースの作業時間の間隔を毎月、毎週または毎日のスケジュールで変更する場合、個々のスケジュールを表すように背景の棒を構成できます。
背景の棒をスケジュール・ガント・チャートに構成するには、ガント・チャートのモデルのbackgroundBars
プロパティを設定し、コレクション内に含まれるオブジェクトごとにstartTime
、endTime
およびtype
を指定します。各タイプは、TaskbarFormatManager
に登録されたbackgroundBarFormat
オブジェクトのインスタンスにリンクできます。詳細は、「新しいタスク・タイプの作成」を参照してください。
図28-21のスケジュール・ガント・チャートに、背景の棒として表したリソースごとの個々のスケジュールを示します。
スケジュール・ガント・チャートのリソースに背景の棒の詳細を構成するには、setDisplayAs()
メソッドを使用してTaskbarFormat
オブジェクトを更新します。次の例に、リソースごとに背景の棒の詳細を構成するマネージドBeanを示します。
public class SchedulingGanttBackgroundBars extends SchedulingGanttBase { private TreeModel m_model; public TreeModel getModel() { if (m_model == null) m_model = SampleModelFactory.getSchedulingGanttBackgroundBarsModel(); return m_model; } public String[] getLegendKeys() {return new String[]{"taskName", "taskType", "startTime", "endTime", "%timezone%"}; } public String[] getLegendLabels() {return new String[]{"Task Name", "Task Type", "Start Time", "End Time", "Time Zone"}; } public TaskbarFormatManager getTaskbarFormatManager() { TaskbarFormatManager _manager = new TaskbarFormatManager(); //create and register new colors _manager.registerBackgroundBarFormat("fillColor", new BackgroundBarFormat("fillColor", "#f6f7c3", null)); _manager.registerBackgroundBarFormat("fillColor2", new BackgroundBarFormat("fillColor2", "#d9f4fa", null)); //register predefined colors _manager.registerTaskbarFormat("gold", TaskbarFormat.getInstance("Gold", UISchedulingGantt.GOLD_FORMAT)); _manager.registerTaskbarFormat("green", TaskbarFormat.getInstance("Green", UISchedulingGantt.GREEN_FORMAT)); _manager.registerTaskbarFormat("orange", TaskbarFormat.getInstance("Orange", UISchedulingGantt.ORANGE_FORMAT)); _manager.registerTaskbarFormat("levander", TaskbarFormat.getInstance("Levander", UISchedulingGantt.LAVENDER_FORMAT)); _manager.registerTaskbarFormat("lime", TaskbarFormat.getInstance("Lime", UISchedulingGantt.LIME_FORMAT)); //create and register new colors _manager.registerTaskbarFormat("blue", new TaskbarFormat("Blue", "#0000FF", null, "#0000FF", 13)); _manager.registerTaskbarFormat("purple", new TaskbarFormat("Purple", "#5518AB", null, "#5518AB", 13)); _manager.registerTaskbarFormat("aqua", new TaskbarFormat("Aqua", "#76EEC6", null, "#76EEC6", 13)); _manager.registerTaskbarFormat("gray", new TaskbarFormat("Gray", "#BEBEBE", null, "#BEBEBE", 13)); _manager.registerTaskbarFormat("tan", new TaskbarFormat("Tan", "#D2B48C", null, "#D2B48C", 13)); return _manager; } }
次の例に、図28-21で示したスケジュール・ガント・チャート用JSFページのサンプル・コードを示します。
<dvt:schedulingGantt id="schedulingGantBackgroundBars" startTime="2006-12-21 06:00" endTime="2006-12-21 18:00" value="#{schedulingGanttBackgroundBars.model}" var="resourceObj" taskbarFormatManager="#{schedulingGanttBackgroundBars. taskbarFormatManager}" summary="Scheduling Gantt Background Bars Demo"> <f:facet name="major"> <dvt:timeAxis scale="days" id="ta1"/> </f:facet> <f:facet name="minor"> <dvt:timeAxis scale="hours" id="ta2"/> </f:facet> <f:facet name="nodeStamp"> <af:column headerText="Employee Name" id="c1"> <af:outputText value="#{resourceObj.resourceName}" id="ot1"/> </af:column> </f:facet> <af:column headerText="Department" id="c2"> <af:outputText value="#{resourceObj.department}" id="ot2"/> </af:column> <dvt:ganttLegend keys="#{schedulingGanttBackgroundBars.legendKeys}" labels="#{schedulingGanttBackgroundBars.legendLabels}" id="gl1"/> </dvt:schedulingGantt>
ADF DVTガント・チャートは多数の構成をサポートしています。ガント・チャートをカスタマイズして、休日を表示すること、ユーザー操作機能をオフにすること、時間軸を指定すること、凡例を追加およびカスタマイズすること、ツールバーおよびコンテキスト・メニューをカスタマイズすること、およびカスタム・データ・フィルタを構成することができます。
ガント・チャート・ツールバー・サブコンポーネントを使用すると、ガント・チャートの操作を実行できます。ツールバーの左側の部分には、各ガント・チャート・タイプに対するデフォルトのメニュー・オプション・セットを含むメニュー・バーがあります。ツールバーの右側の部分には、各ガント・チャート・タイプを操作するためのデフォルトのアクション・ボタンのセットが表示されます。
独自のアイテムを提供し、ツールバーまたはメニュー内のアイテムを追加、削除および再配置することにより、ガント・チャートのメニューおよびツールバーをカスタマイズできます。ガント・チャート・コンポーネントのtoolBarLayout
およびmenuBarLayout
属性を使用して、コンテンツとボタンおよびメニュー・アイテムの配置を、スペース区切りの文字列のセットとして指定します。サブメニューは、次のようにmenuBarLyout
属性に大カッコを使用して指定します。
taskMenu [cut copy]
たとえば、図28-22に、プロジェクト・ガント・チャート用にカスタマイズされたツールバーおよびメニュー・バーを示します。
次の例に、図28-22のカスタム・ツールバーおよびメニュー・バーを指定するサンプル・コードを示します。
<dvt:projectGantt id="gantt1" value="#{bindings.OrderEmployee1.projectGanttModel}" dataChangeListener="#{bindings.OrderEmployee1. projectGanttModel.processDataChanged}" var="row" startTime="2012-07-01" endTime="2013-05-15" initiallyExpandAll="true" summary="Project Gantt chart for shipping orders" toolBarLayout="cut copy paste link unlink" menuBarLayout="editTask [cut copy]"> ... </dvt:projectGantt>
表28-5に、toolBarLayout
属性の有効な値を示します。
表28-5 ToolBarLayout属性の有効な値
値 | 無効にされる機能 |
---|---|
|
すべてのガント・チャートのすべての標準ツールバー項目を表示します。 |
|
すべてのガント・チャートのタスクの切取り、コピーおよび貼付け。 |
|
プロジェクトおよびスケジュール・ガント・チャートの「タスクの作成」ツールバー・タスク。 |
|
すべてのガント・チャートのコピー・タスク。 |
|
すべてのガント・チャートの切取りタスク。 |
|
すべてのガント・チャートの削除タスク。 |
|
すべてのガント・チャートのデータ・モデルへの変更。 |
|
すべてのガント・チャートのデータのフィルタ操作。 |
|
プロジェクトおよびスケジュール・ガント・チャートのインデント・タスク。 |
|
プロジェクトおよびスケジュール・ガント・チャートのタスクのインデント・グループ。 |
|
インデント/////。 |
|
すべてのガント・チャートの「凡例の非表示」および「凡例の表示」ツールバー項目。 |
|
プロジェクトおよびスケジュール・ガント・チャートのリンク・タスク。 |
|
プロジェクトおよびスケジュール・ガント・チャートのタスクのリンク・グループ。 |
|
プロジェクトおよびスケジュール・ガント・チャートのアウトデント・タスク。 |
|
すべてのガント・チャートの貼付けタスク。 |
|
すべてのガント・チャートの印刷タスク。 |
|
すべてのガント・チャートのやり直しタスク。 |
|
すべてのガント・チャートのツールバー項目を分ける垂直線。 |
|
すべてのガント・チャートの元に戻すタスク。 |
|
すべてのガント・チャートの元に戻す////。 |
|
スケジュール・ガント・チャートの元に戻す///リソース・メニュー項目。 |
|
プロジェクトおよびスケジュール・ガント・チャートの///タスク・メニュー項目の「元に戻す」リンク。 |
|
プロジェクトおよびスケジュール・ガントの「タスクの更新」項目。 |
|
すべてのガント・チャートのズーム・イン・タスク。 |
|
すべてのガント・チャートのズーム・インおよびズーム・アウト・タスク///。 |
|
すべてのガント・チャートのズーム・アウト・タスク。 |
|
すべてのガント・チャートの「ズームしてあわせる」項目。 |
|
ズーム///。 |
表28-6に、MenuBarLayout
属性の有効な値を示します。
表28-6 MenuBarLayout属性の有効な値
値 | 無効にされる機能 |
---|---|
|
すべてのガント・チャートのすべての標準メニュー・バー項目を表示します。 |
asList |
すべてのガント・チャート用。 |
|
ガント・チャート。 |
|
ガント・チャート。 |
collapseAllBelow |
ガント・チャート。 |
|
ガント・チャート。 |
|
すべてのガント・チャートのコピー・タスク。 |
|
すべてのガント・チャートの元に戻す////。 |
|
すべてのガント・チャートの切取りタスク。 |
|
すべてのガント・チャートの削除タスク。 |
|
ガント・チャート。 |
|
すべてのガント・チャートのデータ・モデルへの変更。 |
|
すべてのガント・チャート用。 |
|
ガント・チャート。 |
|
ガント・チャート。 |
|
ガント・チャート。 |
|
プロジェクトおよびスケジュール・ガント・チャートのフィルタ・タスク。 |
|
プロジェクトおよびスケジュール・ガント・チャートのインデント////タスク。 |
|
インデント/////。 |
|
すべてのガント・チャートの元に戻す////。 |
|
すべてのガント・チャートの「凡例の非表示」および「凡例の表示」ツールバー項目。 |
|
プロジェクトおよびスケジュール・ガント・チャートのリンク・タスク。 |
|
プロジェクトおよびスケジュール・ガント・チャートのリンク////。 |
|
すべてのガント・チャートの元に戻す////。 |
|
すべてのガント・チャートの元に戻す////。 |
|
プロジェクトおよびスケジュール・ガント・チャートのアウトデント・タスク。 |
|
すべてのガント・チャートの貼付けタスク。 |
|
すべてのガント・チャートの印刷タスク。 |
|
ガント・チャート。 |
|
すべてのガント・チャートのやり直しタスク。 |
|
すべてのガント・チャートの元に戻す////。 |
|
すべてのガント・チャートのツールバー項目を分ける垂直線。 |
|
すべてのガント・チャートの元に戻す////。 |
|
すべてのガント・チャートの元に戻す////。 |
|
すべてのガント・チャートの元に戻す////。 |
|
すべてのガント・チャートの元に戻す////。 |
|
すべてのガント・チャートの元に戻す////。 |
|
すべてのガント・チャートの元に戻すタスク。 |
|
スケジュール・ガント・チャートの元に戻す///リソース・メニュー項目。 |
|
プロジェクトおよびスケジュール・ガント・チャートの///タスク・メニュー項目の「元に戻す」リンク。 |
|
プロジェクトおよびスケジュール・ガントの「タスクの更新」項目。 |
|
すべてのガント・チャートのズーム・イン・タスク。 |
|
すべてのガント・チャートの元に戻す////。 |
カスタム項目をメニュー・バーに追加する文字列menuItem
およびカスタム項目をツールバーに追加する文字列button
を使用して、独自のメニュー項目およびツールバー・ボタンを指定できます。ガント・チャートでは、新しいメニュー項目と標準の項目がマージされます。
次の例に、新しいメニュー項目を指定するサンプル・コードを示します。
<dvt:projectGantt var="task"> <f:facet name="menuBar"> <af:menu text="My Menu"> <af:commandMenuItem text="Add..." /> <af:commandMenuItem text="Create.." /> </af:menu> </f:facet> </dvt:projectGantt>
次の例に、新しいツールバー・ボタンを指定するサンプル・コードを示します。
<dvt:schedulingGantt var="task"> <f:facet name="toolbar"> <af:toolbar> <af:button text="Custom" disabled="true"/> </af:toolbar> </dvt:schedulingGantt>
メニュー・バーおよびツールバー・ボタンで開始されるアクションは、登録されたリスナー、DataChangeListener
を使用してガント・チャート・コンポーネント上で処理されます。たとえば、ユーザーがツールバーで削除ボタンを押すと、削除に選択されたタスクのIDを持つDataChangeEvent
がサーバー上で開始されます。登録されたリスナーがタスクの実際の削除を行い、ガント・チャート・データ・モデルは更新された情報を使用して更新されます。
ガント・チャート・タグでdataChangeListener
属性を使用してメソッド・バインディングを指定することによってDataChangeListener
を登録できます。たとえば、バッキングBeanのhandleDataChange
という名前のメソッドにコードを入れる場合、dataChangeListener
属性の設定は、"#{myBackingBean.handleDataChange}"
になります。
次の例に、バッキングBeanのサンプル・コードを示します。
public void handleDataChanged(DataChangeEvent evt) { if (DataChangeEvent.DELETE == evt.getActionType()) ………… }
注意:
アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用してガント・チャートを作成できます。デフォルトでは、dataChangeListener
が自動的にイベントに提供されます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータ変更イベント処理に関する必知事項を参照してください。
ユーザーがガント・チャートの表領域またはチャート領域を右クリックすると、ガント・チャートを操作するポップアップ・メニューが表示されます。各領域に標準のオプションのセットが提供されます。
独自のアイテムを提供し、メニュー内のアイテムを追加、削除および再配置することにより、ガント・チャートのコンテキスト・メニューをカスタマイズできます。ガント・チャート・コンポーネントのchartPopupMenuLayout
およびtablePopupMenuLayout
属性を使用して、コンテンツとコンテキスト・メニュー項目の配置を、スペース区切りの文字列のセットとして指定します。
たとえば、図28-23に、プロジェクト・ガント・チャート用にカスタマイズされた表領域コンテキスト・メニューを示します。
次の例に、図28-23のカスタム表領域コンテキスト・メニューを指定するサンプル・コードを示します。
<dvt:projectGantt id="gantt1" value="#{bindings.OrderEmployee1.projectGanttModel}" dataChangeListener="#{bindings.OrderEmployee1. projectGanttModel.processDataChanged}" var="row" startTime="2012-07-01" endTime="2013-05-15" initiallyExpandAll="true" summary="Project Gantt chart for shipping orders" tablePopupMenuLayout="updateTask delete indent outdent" ... </dvt:projectGantt>
表28-7に、tablePopupMenuLayout
属性の有効な値を示します。
表28-7 TablePopupMenuLayout属性の有効な値
値 | 無効にされる機能 |
---|---|
|
すべてのガント・チャートのすべての標準表領域のコンテキスト・メニュー項目を表示します。 |
|
すべてのガント・チャートの「切取り」、「コピー」および「貼付け」表領域のコンテキスト・メニュー・タスク。 |
|
すべてのガント・チャートのコピー・タスク。 |
|
すべてのガント・チャートの切取りタスク。 |
|
すべてのガント・チャートの削除タスク。 |
|
すべてのガント・チャートのデータ・モデルへの変更。 |
|
プロジェクトおよびスケジュール・ガント・チャートのインデント・タスク。 |
|
プロジェクトおよびスケジュール・ガント・チャートのタスクのインデント・グループ。 |
|
プロジェクトおよびスケジュール・ガント・チャートのアウトデント・タスク。 |
|
すべてのガント・チャートの貼付けタスク。 |
|
すべてのガント・チャートのやり直しタスク。 |
|
すべてのガント・チャートのツールバー項目を分ける垂直線。 |
|
プロジェクトおよびスケジュール・ガントの「タスクの更新」項目。 |
表28-8に、chartPopupMenuLayout
属性の有効な値を示します。
表28-8 ChartPopupMenuLayout属性の有効な値
値 | 無効にされる機能 |
---|---|
|
すべてのガント・チャートのすべての標準チャート領域のコンテキスト・メニュー項目を表示します。 |
|
すべてのガント・チャートのタスクの切取り、コピーおよび貼付け。 |
|
すべてのガント・チャートのコピー・タスク。 |
|
すべてのガント・チャートの切取りタスク。 |
|
すべてのガント・チャートの削除タスク。 |
|
すべてのガント・チャートのデータ・モデルへの変更。 |
|
プロジェクトおよびスケジュール・ガント・チャートのリンク・タスク。 |
|
プロジェクトおよびスケジュール・ガント・チャートのタスクのリンク・グループ。 |
|
プロジェクトおよびスケジュール・ガント・チャートのアウトデント・タスク。 |
|
すべてのガント・チャートの貼付けタスク。 |
|
すべてのガント・チャートの印刷タスク。 |
|
すべてのガント・チャートのツールバー項目を分ける垂直線。 |
|
すべてのガント・チャートの元に戻すタスク。 |
|
すべてのガント・チャートの元に戻す////。 |
|
プロジェクトおよびスケジュール・ガント・チャートの///タスク・メニュー項目の「元に戻す」リンク。 |
|
プロジェクトおよびスケジュール・ガントの「タスクの更新」項目。 |
ガント・チャートのtablePopupMenu
ファセットおよびchartPopupMenu
ファセットを使用することによって、独自のメニュー項目を使用できます。ガント・チャートでは、新しいメニュー項目と標準の項目がマージされます。次の例に、表領域のポップアップ・メニューにカスタム・メニュー項目を指定するサンプル・コードを示します。
<dvt:projectGantt startTime="#{test.startTime}" endTime="#{test.endTime}" value="#{test.treeModel}" var="task"> <f:facet name="tablePopupMenu"> <af:popup> <af:commandMenuItem text="Custom" disabled="true"/> </af:popup> </f:facet> </dvt:projectGantt>
実行時にポップアップ・メニューを動的に変更することもできます。次の例に、プロジェクト・ガント・チャートのチャート領域で選択したタスクに基づいてタスク・バーでカスタム・コンテキスト・メニューを更新するサンプル・コードを示します。
<dvt:projectGantt var="task" taskSelectionListener="#{backing.handleTaskSelected}"> <f:facet name="chartPopupMenu"> <af:popup id="p1" contentDelivery="lazyUncached"> <af:menu> </af:menu> </af:popup> </f:facet> </dvt:projectGantt>
handleTaskSelected
メソッドは、バッキングBeanで指定されます。次の例に、バッキングBeanのサンプル・コードを示します。
public void handleTaskSelected(TaskSelectionEvent evt) { JUCtrlHierNodeBinding _task = (JUCtrlHierNodeBinding)evt.getTask(); String _type = _task.getAttribute("TaskType"); RichPopup _popup = m_gantt.getFacet("chartPopupMenu"); if (_popup != null) { RichMenu _menu = (RichMenu)_popup.getChildren().get(0); _menu.getChildren().clear(); if ("Summary".equals(_type)) { RichCommandMenuItem _item = new RichCommandMenuItem(); _item.setId("i1"); _item.setText("Custom Action 1"); _menu.getChildren().add(_item); } else if ("Normal".equals(_type)) { RichCommandMenuItem _item = new RichCommandMenuItem(); _item.setId("i1"); _item.setText("Custom Action 2"); _menu.getChildren().add(_item); } } }
af:popup
コンポーネントの使用方法の詳細は、「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。
各ガント・チャートは、主時間軸と副時間軸を使用して作成されます。各時間軸には、時間のレベルを主または副で示すファセットがあります。
すべてのガント・チャートのデフォルトの時間軸設定は次のとおりです。
主時間軸: 週
副時間軸: 日
時間軸の設定をカスタマイズできます。ただし、主軸は副軸より高い時間レベルに設定する必要があります。次に、dvt:timeAxis
コンポーネントのscale
の設定値を高いものから順にリストします。
twoyears
year
halfyears
quarters
twomonths
months
twoweeks
weeks
days
sixhours
threehours
hours
halfhours
quarterhours
次の例に、monthsを主時間軸、weeksを副時間軸として使用するガント・チャートの時間軸を設定するサンプル・コードを示します。
<f:facet name="major"> <dvt:timeAxis scale="months"/> </f:facet> <f:facet name="minor"> <dvt:timeAxis scale="weeks"/> </f:facet>
主軸および副軸に指定した時間単位は、ガント・チャートの初期表示にのみ適用されます。実行時に、ユーザーは時間軸をズーム・インまたはズーム・アウトして別のレベルの時間単位で表示できます。
ガント・チャートのカスタム時間軸を作成し、その軸をdvt:timeAxis
のscale
属性で指定できます。カスタム時間軸は、実行時に「タイム・スケール」ダイアログに追加されます。
始める前に:
ガント・チャートの属性やガント・チャートの子コンポーネントが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「ガント・チャートの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「ガント・チャート・コンポーネントの追加機能」を参照してください。
ページにガント・チャートが存在する必要があります。存在しない場合は、この章の指示に従い、ガント・チャートを作成します。詳細は、「ページへのガント・チャートの追加方法」を参照してください。
カスタム時間軸を作成し使用する手順:
オプションのガント・チャートの凡例サブコンポーネントには、選択されたタスクまたは選択された時間バケットに関するメトリックに関する詳細情報が表示される領域、およびガント・チャートの各タスク・タイプを表すために使用される記号および色コード・バーが含まれています。実行時に、ツールバー・ボタンを使用して情報パネルを表示または非表示にできます。
凡例エリアを用意するには、ガント・チャート・タグの子としてganttLegend
タグを追加する必要があります。凡例エリアのコンテンツは、taskbarFormatManager
で登録された各タスク・タイプのプロパティに基づいて自動的に生成されます。
ガント・チャートの凡例タグでkeys属性およびlabel属性を使用してタスクまたは時間バケットが選択された場合に表示される情報をカスタマイズできます。keys
属性では、表示する値の取得に使用されるデータ・オブジェクト・キーを指定し、labels
属性には、キーで取得した値に対応するラベルが含まれる必要があります。これらの属性が指定されていないと、凡例で情報パネルの領域全体が使用されます。
ガント・チャートの凡例タグでiconKeys
属性およびiconLabels
属性を使用して、凡例にアイコンを追加することもできます。アイコンのサイズが大きすぎる場合は、自動的に縦横12ピクセルにサイズ変更されます。
次の例に、プロジェクト・ガント・チャートの凡例に保留中タスクに関する情報を表示するサンプル・コードを示します。
<dvt:projectGantt var="task"> <dvt:ganttLegend id="gl" keys="TaskName StartTime EndTime" labels="Name Start Finish" icons="images/wait.png" iconLabels="OnHold"/> </dvt:projectGantt>
ツールバーからデータ・フィルタ・ドロップダウン・リストを使用してガント・チャートのデータ表示を変更できます。ガント・チャートではFilterManager
を使用して、すべての事前定義済およびユーザー指定のデータ・フィルタを管理できます。
フィルタ・オブジェクトには次の情報が含まれます。
フィルタの一意のID
ドロップダウン・リストにフィルタを表示するためのラベル
フィルタが選択されたときに起動するオプションのJavaScriptメソッド
フィルタ・オブジェクトを作成し、FilterManager
でaddFilter
メソッドを使用してオブジェクトを登録して独自のフィルタを定義できます。次の例に、FilterManager
を使用してResourceフィルタ・オブジェクトを登録するサンプル・コードを示します。
FilterManager _manager = m_gantt.getFilterManager(); // ID for filter display label javascript callback (optional) _manager.addFilter((new Filter(RESOURCE_FILTER, "Resource...", "showResourceDialog")));
ユーザーがフィルタを選択すると、フィルタ・ロジックを実行する、登録されたFilterListener
にFilterEvent
が送信されます。リスナーの登録には、ガント・チャート・コンポーネントのfilterListener
属性が使用されます。アプリケーションによって実装されると、データ・モデルが更新され、ガント・チャート・コンポーネントにフィルタ処理された結果が表示されます。次の例に、FilterListener
のサンプル・コードを示します。
public void handleFilter(FilterEvent event) { String _type = event.getType(); if (FilterEvent.ALL_TASKS.equals(_type)) { // update the gantt model as appropriate } }
始める前に:
ガント・チャートの属性やガント・チャートの子コンポーネントが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「ガント・チャートの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「ガント・チャート・コンポーネントの追加機能」を参照してください。
ページにガント・チャートが存在する必要があります。存在しない場合は、この章の指示に従い、ガント・チャートを作成します。詳細は、「ページへのガント・チャートの追加方法」を参照してください。
カスタム・データ・フィルタを指定する手順:
FilterListener
フィールドに、定義したFilterListener
を参照するメソッドを入力します。たとえば、"#{project.handleFilter}"
です。ガント・チャートで休日を指定できます。休日は、デフォルトでは影付きのグレーで表示されますが、休日に使用するカスタム・カラーを選択できます。
特定の曜日が毎週の休業日である場合、その曜日を休業日のカテゴリとして指定できます。
始める前に:
ガント・チャートの属性やガント・チャートの子コンポーネントが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「ガント・チャートの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「ガント・チャート・コンポーネントの追加機能」を参照してください。
ページにガント・チャートが存在する必要があります。存在しない場合は、この章の指示に従い、ガント・チャートを作成します。詳細は、「ページへのガント・チャートの追加方法」を参照してください。
曜日を休日として指定する手順:
個々の曜日では不十分な場合、ガント・チャートで特定の日付を休日として入力できます。
始める前に:
ガント・チャートの属性やガント・チャートの子コンポーネントが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「ガント・チャートの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「ガント・チャート・コンポーネントの追加機能」を参照してください。
ページにガント・チャートが存在する必要があります。存在しない場合は、この章の指示に従い、ガント・チャートを作成します。詳細は、「ページへのガント・チャートの追加方法」を参照してください。
特定の日付を休日として指定する手順:
ガント・チャートとユーザーとの対話は、featuresOff
プロパティで読取り専用の値を指定するように設定することでカスタマイズして無効にすることができます。
表28-9に、ガント・チャート・タイプの有効な値と無効にされた機能を示します。
表28-9 読取り専用属性の有効な値
値 | 無効にされる機能 |
---|---|
|
すべてのガント・チャートの「リストとして表示」メニュー項目。 |
|
すべてのガント・チャートの「階層として表示」メニュー項目。 |
|
すべてのガント・チャートのタスクの切取り、コピーおよび貼付け。 |
|
すべてのガント・チャートの「切取り」、「コピー」および「貼付け」メニュー項目。 |
|
すべてのガント・チャートの「切取り」、「コピー」および「貼付け」ツールバー項目。 |
|
すべてのガント・チャートの「切取り」、「コピー」および「貼付け」右メニュー項目。 |
|
すべてのガント・チャートの「下をすべて縮小」メニュー項目。 |
|
すべてのガント・チャートの「すべて縮小」メニュー項目。 |
|
すべてのガント・チャートの「列」メニュー項目。 |
|
リソース使用率およびスケジュール・ガント・チャートの「リソースの作成」メニュー項目。 |
|
リソース使用率およびスケジュール・ガント・チャートの「リソースの作成」メニュー項目およびツールバー項目。 |
|
リソース使用率およびスケジュール・ガント・チャートの「リソースの作成」ツールバー項目。 |
|
プロジェクトおよびスケジュール・ガント・チャートの「タスクの作成」メニュー。 |
|
プロジェクトおよびスケジュール・ガント・チャートの「タスクの作成」メニューおよびツールバー。 |
|
プロジェクトおよびスケジュール・ガント・チャートの「タスクの作成」ツールバー。 |
|
プロジェクトおよびスケジュール・ガント・チャートの「削除」メニュー項目。 |
|
プロジェクトおよびスケジュール・ガント・チャートの「削除」メニュー、右メニューおよびツールバー項目。 |
|
プロジェクトおよびスケジュール・ガント・チャートの「削除」右メニュー項目。 |
|
プロジェクトおよびスケジュール・ガント・チャートの「削除」ツールバー項目。 |
|
プロジェクトおよびスケジュール・ガント・チャートの依存関係線の表示および非表示。これには、プロジェクト・ガント・チャートの「依存性」メニュー・オプションが含まれます。 |
|
すべてのガント・チャートのデータ・モデルへの変更。 |
|
すべてのガント・チャートの「編集」メニュー項目。 |
|
すべてのガント・チャートの「下をすべて展開」メニュー項目。 |
|
すべてのガント・チャートの「すべて展開」メニュー項目。 |
|
すべてのガント・チャートの「展開」メニュー項目。 |
|
すべてのガント・チャートのツールバーのデータ・フィルタ操作の非表示。 |
|
すべてのガント・チャートの「日付へ移動」メニュー項目。 |
|
プロジェクトおよびスケジュール・ガント・チャートのタスクのインデントおよびアウトデント。 |
|
「インデント」および「アウトデント」メニュー項目: プロジェクト・ガント・チャートのタスク、およびスケジュール・ガント・チャートとリソース使用率ガント・チャートのリソース。 |
|
すべてのガント・チャートの「インデント」および「アウトデント」メニュー、ツールバーおよび右メニュー項目。 |
|
すべてのガント・チャートの「インデント」および「アウトデント」右メニュー項目。 |
|
すべてのガント・チャートの「インデント」および「アウトデント」ツールバー項目。 |
|
すべてのガント・チャートの凡例およびタスク情報の非表示および表示。 |
|
すべてのガント・チャートの「凡例の非表示」および「凡例の表示」メニュー項目。 |
|
すべてのガント・チャートの「凡例の非表示」および「凡例の表示」ツールバー項目。 |
|
プロジェクトおよびスケジュール・ガント・チャートのタスクのリンクおよびリンク解除。 |
|
プロジェクトおよびスケジュール・ガント・チャートの「リンク」および「リンク解除」メニュー項目。 |
|
プロジェクトおよびスケジュール・ガント・チャートの「リンク」および「リンク解除」メニュー、右メニューおよびツールバー項目。 |
|
プロジェクトおよびスケジュール・ガント・チャートの「リンク」および「リンク解除」右メニュー項目。 |
|
プロジェクトおよびスケジュール・ガント・チャートの「リンク」および「リンク解除」ツールバー項目。 |
|
すべてのガント・チャートの「リスト・ペイン」メニュー項目。 |
|
すべてのガント・チャートの印刷タスク。 |
|
すべてのガント・チャートの「印刷」メニュー項目。 |
|
すべてのガント・チャートの「印刷」ツールバー項目。 |
|
すべてのガント¥チャートのプロパティ・ダイアログを表示します。 |
|
すべてのガント・チャートの「プロパティ」メニュー項目。 |
|
すべてのガント・チャートの「プロパティ」右メニュー項目。 |
|
リソース使用率およびスケジュール・ガント・チャートの「リソース」メニュー項目。 |
|
スケジュール・ガント・チャートの「スナップ」メニュー項目。 |
|
スケジュール・ガント・チャートの「スナップ」右メニュー項目。 |
|
プロジェクト・ガント・チャートのタスクの分割およびマージ。 |
|
プロジェクト・ガント・チャートの「分割」および「マージ」メニュー項目。 |
|
プロジェクト・ガント・チャートの「分割」および「マージ」メニュー、右メニューおよびツールバー項目。 |
|
プロジェクト・ガント・チャートの「分割」および「マージ」右メニュー項目。 |
|
プロジェクト・ガント・チャートの「分割」および「マージ」ツールバー項目。 |
|
プロジェクトおよびスケジュール・ガント・チャートの「タスク」メニュー。 |
|
すべてのガント・チャートの「時間軸」メニュー項目。 |
|
リソース使用率ガント・チャートの「時間バケット」メニュー項目。 |
|
すべてのガント・チャートの元に戻すおよびやり直しタスク。 |
|
すべてのガント・チャートの「元に戻す」および「やり直し」メニュー項目。 |
|
スケジュール・ガント・チャートの「リソースの更新」メニュー項目。 |
|
プロジェクトおよびスケジュール・ガント・チャートの「タスクの更新」メニュー項目。 |
|
プロジェクトおよびスケジュール・ガントの「タスク編集の更新」項目、「タスクの更新」ツールバー項目および右メニュー項目。 |
|
プロジェクトおよびスケジュール・ガント・チャートの「タスクの更新」右メニュー項目。 |
|
プロジェクトおよびスケジュール・ガント・チャートの「タスクの更新」ツールバー項目。 |
|
すべてのガント・チャートの「元に戻す」および「やり直し」ツールバー項目。 |
|
すべてのガント・チャートでのリストとして表示、階層として表示、列、展開および縮小タスク。 |
|
すべてのガント・チャートの「表示」メニュー項目。 |
|
すべてのガント・チャートのズーム・レベルへの変更。 |
|
すべてのガント・チャートの「ズーム」メニュー項目。 |
|
すべてのガント・チャートの「ズームしてあわせる」メニュー・ツールバー項目。 |
始める前に:
ガント・チャートの属性やガント・チャートの子コンポーネントが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「ガント・チャートの構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「ガント・チャート・コンポーネントの追加機能」を参照してください。
ページにガント・チャートが存在する必要があります。存在しない場合は、この章の指示に従い、ガント・チャートを作成します。詳細は、「ページへのガント・チャートの追加方法」を参照してください。
ガント・チャート機能に読取り専用の値を設定する手順:
ガント・チャートのスキニング・キーの完全なリストは、Oracle Fusion MiddlewareドキュメントのOracleデータ視覚化ツール・スキン・セレクタ・タグ・リファレンスを参照してください。JDeveloperのヘルプ・センターからリストにアクセスするには、「ドキュメント・ライブラリ」、「Fusion MiddlewareリファレンスとAPI」の順に選択します。スキンを使用したアプリケーションのカスタマイズの詳細は、「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
スクロールバー、同期スクロールのかわりとしてページ・コントロールを追加する、タスク・バーにダブルクリック・イベントを追加する、ガント・チャートを印刷するなど、ADF DVTガント・チャートは複数のインタラクティブ機能をサポートします。
ガント・チャートでは、ユーザーは、タスクまたはリソースを表すガント・チャートの表領域で1つ以上の行を選択し、それらの行に対しアクションを実行できます。ガント・チャートの選択状態が変更されると、選択イベントがトリガーされます。selectionEvent
イベントは、選択解除された行と選択された行をレポートします。
ガント・チャートで選択イベントをリスニングするために、selectionListener
属性を使用することで、またはaddselectionListener()
メソッドを使用してガント・チャートにリスナーを追加することで、ガント・チャートにリスナーを登録できます。これにより、リスナーは選択された行にアクセスし、それらの行に対してアクションを実行できます。
現在の選択内容(選択された1つ以上の行)はRowKeySet
オブジェクトであり、このオブジェクトは、ガント・チャートに対しgetSelectedRowKeys()
メソッドをコールして取得します。プログラムを使用して選択内容を変更するには、次のいずれかを実行します。
RowKeySet
オブジェクトでrowKey
オブジェクトを追加するか、rowKey
オブジェクトを削除します。
ガント・チャートに対しsetRowIndex()
またはsetRowKey()
メソッドをコールして、特定の行を現在行にします。その後、RowKeySet
オブジェクトに対してadd()
またはremove()
メソッドをコールして、その行を選択内容に追加するか、選択内容から削除できます。
次の例に、ユーザーが行を選択してから「削除」ボタンをクリックしてこれらの行を削除できるガント・チャートの部分を示します。アクション・リスナーは、mybean
マネージドBeanのperformDelete
メソッドにバインドされます。
<f:facet name="nodeStamp"> <af:column headerText= ...> <af:outputText binding="#{mybean.table}" value= ... /> </af:column> ... </f:facet> <af:button text="Delete" actionListener="#{mybean.performDelete}"/>
次の例に、選択されたすべての行を反復し、それぞれにmarkForDeletion
メソッドをコールするアクション・メソッドperformDelete
を示します。
public void performDelete(ActionEvent action) { UIXTable table = getTable(); Iterator selection = table.getSelectedRowKeys().iterator(); Object oldKey = table.getRowKey(); try { while(selection.hasNext()) { Object rowKey = selection.next(); table.setRowKey(rowKey); MyRowImpl row = (MyRowImpl) table.getRowData(); //custom method exposed on an implementation of Row interface. row.markForDeletion(); } } finally { // restore the old key: table.setRowKey(oldKey); } }
ガント・チャートの表領域では、デスクトップ・アプリケーションとタッチ装置のモバイル・ブラウザの両方に対して、横のスクロール機能のかわりにページ・コントロールを使用できます。このコントロールは、データ・フェッチ・サイズを超える行が存在し、かつコンポーネントがそれを含むレイアウト・コンポーネントによって拡大されない場合にのみ使用できます。
ページ・コントロールは、図28-24に示すように、表領域のフッターとして表示されます。
ADF Faces Webアプリケーションを開発する場合、ガント・チャートの表領域では、フェッチ対象のデータのサイズを超える列を表示するために、横のスクロールバーがデフォルトで使用されます。schedulingGantt
、projectGantt
またはresourceUtilizationGantt
コンポーネントの表領域に、デスクトップ・デバイスのページ・コントロールを構成するには、scrollPolicy
属性をpage
に設定します。
ただし、標準ADF Faces Webアプリケーションはモバイル・デバイス・ブラウザで動作しますが、ユーザーの操作が異なり、スクリーン・サイズが制限されるため、アプリケーションをモバイル・デバイスで実行する必要がある場合は、タッチ装置に固有のバージョンのページを作成する必要があります。詳細は、「ADF Facesを使用したタッチ装置のWebアプリケーションの作成」を参照してください。
デフォルトでは、モバイル・デバイスにレンダリングする場合、ガント・チャートの表領域には、ユーザーが特定の行のページにジャンプできるページ・コントロールが表示されます。モバイル・デバイスに表示するすべてのガント・チャートには、次の処理が必要です。
ガント・チャート・コンポーネントをフロー・コンテナ(つまり、子を拡大しないコンポーネント)の中に配置します。フロー・コンテナ・コンポーネントの詳細は、「ジオメトリ管理およびコンポーネントの拡大」を参照してください。
scrollPolicy
属性はauto
に設定したままにします(モバイル・デバイスでのこの設定のデフォルトは、ページ区切り表示のピボット・テーブルです)。
ガント・チャートがフロー・コンテナの中にない場合、または属性が正しく設定されていない場合は、ページではなくスクロールバーが表示されます。
af:clientListener
コンポーネントを使用して、2つのガント・チャートのチャート側間で横方向の同期スクロールを構成できます。
たとえば、図28-25に示されているように、プロジェクト・ガント・チャートとリソース使用率ガント・チャートのスクロールバーを同期して、同じプロジェクトのタスクとリソースが表示されるようにすることが必要な場合があります。
図28-25 ガント・チャート間で同期されたスクロール
ガント・チャート間で同期されたスクロールを構成するには、af:clientListener
コンポーネントを使用して、スクロール対象のガント・チャートのチャート側でchartHorizontalScroll
イベントをリスニングし、他のガント・チャートでスクロール位置を設定します。
この例では、インラインJavaScriptを使用して、af:resource
タグ内で同期スクロールのためのメソッドを定義しています。次の例に、同期スクロール・メソッドのコードを示します。詳細は、「JavaScriptのページへの追加」を参照してください。
<af:resource type="javascript"> var gantt1ScrollStart = null; var gantt2ScrollStart = null; //called when the top gantt component is scrolled function handleTopScroll(event) { var eventScrollStart = event.getScrollStart(); if (gantt2ScrollStart == null || gantt2ScrollStart == eventScrollStart) { // clear synced gantt scroll start gantt2ScrollStart = null; // find the corresponding gantt component var gantt = AdfPage.PAGE.findComponent("demo:gantt2"); if (gantt1ScrollStart != event.getScrollStart()) { // set the scrollStart position of the synced gantt to match the event's value var scrollStart = gantt.getChartScrollStart(); if (scrollStart != eventScrollStart) { //save the scrollStart value to stop feedback gantt1ScrollStart = eventScrollStart; gantt.setChartScrollStart(eventScrollStart); } } } event.cancel(); } // called when the bottom gantt component is scrolled function handleBottomScroll(event) { var eventScrollStart = event.getScrollStart(); if (gantt1ScrollStart == null || gantt1ScrollStart == eventScrollStart) { // clear synced gantt scroll start gantt1ScrollStart = null; // find the corresponding gantt component var gantt = AdfPage.PAGE.findComponent("demo:gantt1"); if (gantt2ScrollStart != event.getScrollStart()) { // set the scrollStart position of the synced gantt to match the event's value var scrollStart = gantt.getChartScrollStart(); if (scrollStart != eventScrollStart) { //save the scrollStart value to stop feedback gantt2ScrollStart = eventScrollStart; gantt.setChartScrollStart(eventScrollStart); } } } event.cancel(); } </af:resource
次の例に示されている両方のガント・チャートのコードでは、ガント・チャートのchartHorizontalScroll
タイプのscrollEvent
をリスニングするclientListener
を指定し、前述の例のaf:resource
コンポーネントで定義されているhandleTopScroll
メソッドおよびhandleBottomScroll
メソッドを呼び出しています。
<dvt:projectGantt id="gantt1" var="task" startTime="2008-04-22" endTime="2008-09-31" inlineStyle="height:400px;" value="#{projectGantt.model}" tooltipKeys="#{projectGantt.tooltipKeys}" tooltipKeyLabels="#{projectGantt.tooltipLabels}" summary="Project Gantt"> <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 headerText="Task Name" id="c1"> <af:outputText value="#{task.taskName}" id="ot1"/> </af:column> </f:facet> <af:column headerText="Resource" id="c2"> <af:outputText value="#{task.resourceName}" id="ot2"/> </af:column> <af:column headerText="Start Date" id="c3"> <af:outputText value="#{task.startTime}" id="ot3"/> </af:column> <af:column headerText="End Date" id="c4"> <af:outputText value="#{task.endTime}" id="ot4"/> </af:column> <dvt:ganttLegend keys="#{projectGantt.legendKeys}" labels="#{projectGantt.legendLabels}" id="gl1"/> <af:clientListener type="chartHorizontalScroll" method="handleTopScroll"/> </dvt:projectGantt> <dvt:schedulingGantt id="gantt2" startTime="2006-12-21 01:00" endTime="2006-12-22 23:00" value="#{schedulingGantt.model}" var="resourceObj" inlineStyle="height:400px;" tooltipKeyLabels="#{schedulingGantt.tooltipLabels}" tooltipKeys="#{schedulingGantt.tooltipKeys}" summary="Scheduling Gantt Demo"> <f:facet name="major"> <dvt:timeAxis scale="days" id="ta3"/> </f:facet> <f:facet name="minor"> <dvt:timeAxis scale="hours" id="ta4"/> </f:facet> <f:facet name="nodeStamp"> <af:column headerText="Employee Name" id="c5"> <af:outputText value="#{resourceObj.resourceName}" id="ot5"/> </af:column> </f:facet> <af:column headerText="Department" id="c6"> <af:outputText value="#{resourceObj.department}" id="ot6"/> </af:column> <dvt:ganttLegend keys="#{schedulingGantt.legendKeys}" labels="#{schedulingGantt.legendLabels}" id="gl2"/> <af:clientListener type="chartHorizontalScroll" method="handleBottomScroll"/> </dvt:schedulingGantt>
ADFのガント・チャートには、書式設定されたオブジェクト(FO)を生成できるヘルパー・クラス(GanttPrinter
)が用意されており、ApacheまたはXML Publisherと連動してPDFファイルが生成されます。
通常、GanttPrinter
クラスでは、ガント・チャートのコンテンツが画面に表示されたとおりに印刷されます。たとえば、ガント・チャートで凡例を非表示にすると、凡例は印刷されません。同様に、「表示」メニューの「リスト・ペイン」セクションで列を選択解除した場合、その列はガント・チャートで非表示となり、列の可視性印刷オプションを利用しないかぎり、印刷にも表示されません。
GanttPrinter
クラスでは、次の印刷オプションが使用できます。
列の可視性: setColumnVisible
メソッドでは、ガント・チャートのリスト領域の個々の列を印刷出力に表示するかどうかを制御できます。
たとえば、ガント・チャートのリスト領域の最初の列を非表示にするには、_printer.setColumnVisible(o, false);
というコードを使用します。メソッドの最初のパラメータはゼロベースの列の索引で、2番目のパラメータは印刷されたガント・チャートに列を表示するかどうかを示します。
マージン: GanttPrinter
のsetMargin
メソッドでは、次のコードで示すように、上、下、左および右マージンをピクセルで指定できます。ここで、_printer
はGanttPrinter
クラスのインスタンスです。
_printer.setMargin(25, 16, 66, 66);
ページ・サイズ: GanttPrinter
のsetPageSize
メソッドでは、次のコードで示すように、印刷されたページの高さと幅をピクセルで指定できます。ここで、_printer
はGanttPrinter
のインスタンスです。
_printer.setPageSize (440, 600);
期間: GanttPrinter
クラスのsetStartTime
およびsetEndTime
では、印刷するガント・チャートの期間を指定できます。
次の例に、ガント・チャートの特定の期間を印刷用に設定するサンプル・コードを示します。startDate
とendDate
は日付を表す変数で、_printer
はGanttPrinter
クラスのインスタンスです。
_printer.setStartTime(startDate); _printer.setEndTime(endDate);
ガント・チャートのツールバーには印刷ボタンがあり、印刷アクションが開始されます。ガント・チャートを印刷するには、印刷イベントを処理するActionListener
を作成する必要があります。
ActionListener
のコードには、次のプロセスを含める必要があります。
サーブレットの出力ストリームへのアクセス。
FOの生成。このプロセスには、GanttPrinter
のインスタンスの作成と、使用する印刷オプションのコードの記述が含まれます。
PDFの生成。
次の例に、印刷イベントを処理するActionListener
のコードを示します。このリスナーには、GanttPrinter
ヘルパー・クラスで使用できるすべての印刷オプションの設定が含まれます。
public void handleAction(GanttActionEvent evt) { if (GanttActionEvent.PRINT == evt.getActionType()) { FacesContext _context = FacesContext.getCurrentInstance(); ServletResponse _response = (ServletResponse) _context.getExternalContext().getResponse(); _response.setContentType("application/pdf"); ServletOutputStream _sos = _response.getOutputStream(); // Generate FO. GanttPrinter _printer = new GanttPrinter(m_gantt); // Set column visibility by column index. _printer.setColumnVisible(0, false); // Set start and end date. _printer.setStartTime(startDate); _printer.setEndTime(endDate); // Set top, bottom, left, and right margins in pixels. _printer.setMargin(25, 16, 66, 66); // Set height and width in pixels. _printer.setPageSize(440, 660); File _file = File.createTempFile("gantt", "fo"); OutputStream _out = new FileOutputStream(_file); _printer.print(_out); _out.close(); // generate PDF. FOProcessor _processor = new FOProcessor(); _processor.setData(new FileInputStream(_file),"UTF-8")); _processor.setOutputFormat(FOProcessor.FORMAT_PDF); _processor.setOutput(_sos); _processor.generate(); _context.responseComplete(); response.setHeader("Cache-Control", "no-cache"); } }
ガント・チャート・コンポーネントでは、タスク・バーのダブルクリック・イベントがサポートされています。たとえば、ポップアップ・ウィンドウでタスクに関する詳細な情報が表示されるように設定できます。
図28-26に、タスク・バーにダブルクリック・イベントを使用するプロジェクト・ガント・チャートを示します。
図28-26 ダブルクリック・イベントを使用したタスク・バー
次の例に、タスク・バーにダブルクリック・イベントを追加するサンプル・コードを示します。
<dvt:projectGantt id="projectGanttDoubleClick" startTime="2008-04-01" endTime="2008-09-30" value="#{projectGanttDoubleClick.model}" var="task" doubleClickListener="#{projectGanttDoubleClick.handleDoubleClick}"> </dvt:projectGantt>
たとえば、次のようにバッキングBeanでhandleDoubleClick
メソッドを実装します。
public void handleDoubleClick(DoubleClick event)
ユーザーがコレクションからアイテム(表から行など)をドラッグし、ツリーなどの別のコレクション・コンポーネントにドロップできるドラッグ・アンド・ドロップ機能を追加できます。プロジェクト・ガント・チャート・コンポーネントおよびスケジュール・ガント・チャート・コンポーネントは、ADFの表またはツリー表コンポーネントのドラッグ・ソースおよびドロップ・ターゲットとして有効にできます。リソース使用率ガント・チャート・コンポーネントは、ドロップ・ターゲットとしてのみ有効にできます。
アプリケーションでは、af:collectionDragSource
動作タグまたはaf:collectionDropTarget
動作タグをガント・タグの子として追加して、ドラッグ・ソースまたはドロップ・ターゲットとしてガント・チャート・コンポーネントを登録する必要があります。たとえば、af:collectionDragSource
を使用して、プロジェクト・ガント・チャート・タスクが表領域から別の表にドラッグされたときに起動されるドロップ・リスナーを登録できます。図28-27に、表領域からタスクの表にドラッグされるタスクがあるプロジェクト・ガント・チャートを示します。
次の例に、プロジェクト・ガント・チャートにドラッグ・アンド・ドロップ機能を追加するサンプル・コードを示します。
<dvt:projectGantt id="projectGanttDragSource" startTime="2008-04-01" endTime="2008-09-30" value="#{projectGanttDragSource.model}" var="task" summary="Project Gantt Drag Source Demo"> <f:facet name="major"> <dvt:timeAxis scale="months" id="ta1"/> </f:facet> <f:facet name="minor"> <dvt:timeAxis scale="weeks" id="ta2"/> </f:facet> <af:collectionDragSource actions="COPY MOVE" modelName="treeModel"/> <f:facet name="nodeStamp"> <af:column headerText="Task Name" id="c1"> <af:outputText value="#{task.taskName}" id="ot1"/> </af:column> </f:facet> <af:column headerText="Resource" id="c2"> <af:outputText value="#{task.resourceName}" id="ot2"/> </af:column> <af:column headerText="Start Date" id="c3"> <af:outputText value="#{task.startTime}" id="ot3"/> </af:column> <af:column headerText="End Date" id="c4"> <af:outputText value="#{task.endTime}" id="ot4"/> </af:column> </dvt:projectGantt>
次の例に、ドロップ・イベントを処理するリスナー・メソッドのサンプル・コードを示します。
public DnDAction onTableDrop(DropEvent evt) { Transferable _transferable = evt.getTransferable(); // Get the drag source, which is a row key, to identify which row has been dragged. RowKeySetImpl _rowKey = (RowKeySetImpl)_transferable.getTransferData(DataFlavor.ROW_KEY_SET_FLAVOR).getData(); // Set the row key on the table model (source) to get the data. // m_tableModel is the model for the Table (the drag source). object _key = _rowKey.iterator().next(); m_tableModel.setRowKey(_key); // See on which resource this is dropped (specific for scheduling Gantt chart). String _resourceId = _transferable.getData(String.class); Resource _resource = findResourceById(_resourceId); // See on what time slot did this dropped. Date _date = _transferable.getData(Date.class); // Add code to update your model here. // Refresh the table and the Gantt chart. RequestContext.getCurrentInstance().addPartialTarget(_evt.getDragComponent()); RequestContext.getCurrentInstance().addPartialTarget(m_gantt); // Indicate the drop is successful. return DnDAction.COPY; }
コレクションのドラッグ・アンド・ドロップ機能の追加の詳細は、「コレクションのドラッグ・アンド・ドロップ機能の追加」を参照してください。