ヘッダーをスキップ
Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド
11gリリース1(11.1.1.9.0)
B52029-12
  目次へ移動
目次

前
 
次
 

28 ガント・チャート・コンポーネントの使用方法

この章では、データ・バインドされたADFガント・チャート・コンポーネントを使用してデータを表示する方法とガント・チャートのカスタマイズ・オプションについて説明します。

この章では、次の項目について説明します。

ADFガント・チャートのデータ・バインディングの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたガント・チャートの作成に関する項を参照してください。

28.1 ガント・チャートの概要

ガント・チャートは、横棒グラフの一種で、プロジェクトの計画と追跡に使用します。リソースまたはタスクを、開始と終了が明確なタイム・フレームに示します。ADFガント・チャート・コンポーネントは2つの領域で構成されます。1つは、表のガント・チャート・データを表示し、もう1つは、サイズ変更可能なスプリッタを使用して2つの領域間のガント・チャート・データをグラフィカルに表示します。表とチャートの領域は、同じデータと選択モデルを共有し、2つの領域間でスクロール、行の展開および縮小がサポートされ、同期化されます。

実行時に、ガント・チャートでは表領域にデータの入力、行の展開および縮小、列の表示および非表示、行へのナビゲート、および列のソートおよび合計の表示などの対話機能がユーザーに提供されます。表領域で、ユーザーはタスクを新しい日付にドラッグし、複数のタスクを選択して依存性を作成し、タスクの日付を拡張できます。ガント・チャートのツールバーは、データの表示の変更またはフィルタ処理、およびタスクの作成、削除、切取り、コピーおよび貼付けなどのユーザー操作のサポートに使用します。

ガント・チャートの領域は、両方ともADF Facesのツリー表コンポーネントに基づいています。行の仮想化など、ADFツリー表の詳細は、第10章「表、ツリー、およびその他のコレクションベースのコンポーネントの使用」を参照してください。

28.1.1 ガント・チャートのタイプ

ガント・チャートには次のコンポーネントが用意されています。

  • プロジェクト・ガント・チャート: プロジェクト・ガント・チャートはプロジェクト管理に使用されます。このチャートでは、タスクを縦にリストし、横向きの予定表に各タスクの期間を棒で示します。図28-1に示すように各タスクを別の線で示します。

    図28-1 ソフトウェア・アプリケーション用プロジェクト・ガント・チャート

    ソフトウェア・アプリケーション用プロジェクト・ガント・チャート
  • リソース使用率ガント・チャート: リソース使用率ガント・チャートでは、リソースのメトリック、たとえばリソースが割当てを上回っているか下回っているかをグラフィカルに示します。リソースを縦に示し、横方向の時間軸に割当てとキャパシティなどのメトリックを示します。図28-2に、指定した期間の特定の開発者リソースに割り当てられ、利用されている時間を表示するリソース使用率ガント・チャートを示します。

    図28-2 ソフトウェア・アプリケーション用リソース使用率ガント・チャート

    アプリケーション用リソース使用率ガント・チャート
  • スケジュール・ガント・チャート: スケジュール・ガント・チャートはリソースのスケジュールに使用されます。このチャートは手動のスケジュール表をベースにし、リソースを縦に表示し、対応するアクティビティを横方向の時間軸に表示します。リソースの例には、人、機械、部屋などがあります。スケジュール・ガント・チャートでは、図28-3に示すように、リソースに割り当てられている全タスクが1つの線で示されます。

    図28-3 ソフトウェア・アプリケーション用スケジュール・ガント・チャート

    ソフトウェア・アプリケーション用スケジュール・ガント・チャート

28.1.2 ガント・チャートの機能領域

ガント・チャートは次の機能領域で構成されます。

  • 表領域:ガント・チャート・データ属性を表の列に表示します。表領域には最低1つの列が必要ですがガント・チャート・データ・バインディング・ダイアログで必要な数の列に属性を定義できます。

    たとえば、図28-1では、表領域に、Name(タスクの)、Priority、Orig.Est.、Curr.Est.、Elapsed(日数)、Remaining(日数)およびResourcesの列が含まれています。

  • チャート領域:ガント・チャート・データの棒グラフを横方向の時間軸に沿って表示します。時間軸にはズーム用の主設定と副設定があります。主設定はより大きな時間単位用で、副設定はより小さな時間単位用です。

    たとえば、図28-1のチャート領域には、曜日を示す時間軸にタスクが表示されています。

  • 情報パネル:情報領域(選択されたタスクまたは選択されたリソースに関するメトリックスに関するテキストを表示)とオプションの凡例(タスク・タイプを表示)を表領域とチャート領域の下に表示します。親ガント・チャート・タグ内に凡例子タグを挿入しないかぎり、ガント・チャートの凡例はないことに注意してください。

  • ツールバー:ユーザーのガント・チャートの操作を可能にします。ツールバーはデフォルトでガント・チャートに表示されます。ガント・チャートのプロパティ・インスペクタの「外観」ページでShowToolbar属性を設定することにより、ツールバーの可視性を変更できます。

    ツールバーは次のセクションで構成されます。

    • メニュー・バー:ツールバーの左側の部分には、ガント・チャートに対するメニューのセットが含まれます。各ガント・チャート・タイプには、デフォルトのオプションのセットがあります。図28-4に、ガント・チャートにデフォルトで表示されるメニュー・バーを示します。ガント・チャートのプロパティ・インスペクタの「外観」ページでShowMenuBar属性を設定することにより、メニュー・バーの可視性を変更できます。menubarファセットを使用してメニュー項目をカスタマイズできます。


      注意:

      「表示」メニュー項目には、それらを機能させるためのアプリケーション・コードを書く必要はありません。ただし、他のメニューで使用する項目にはアプリケーション・コードが必要です。

      図28-4 ガント・チャートのサンプル・メニュー・バー

      ガント・チャート・メニュー・バー
    • ツールバー・ボタン:ツールバーの右側の部分には、ガント・チャートを操作するためのアクション・ボタンのセットが表示されます。各ガント・チャート・タイプには、デフォルトのオプションのセットがあります。図28-5に、プロジェクト・ガント・チャートのサンプル・ツールバーを示します。

      図28-5 プロジェクト・ガント・チャートのサンプル・ツールバー

      プロジェクト・ガント・チャート・ツールバー

    toolbarファセットを使用してツールバー・ボタンをカスタマイズできます。

  • ポップアップ・メニュー:ガント・チャート表領域またはチャート領域を右クリックすると、標準のメニュー項目のセットがポップアップ・メニューに表示されます。tablePopupMenuファセットまたはchartPopupMenuファセットを使用して独自のメニュー項目のセットを使用できます。

  • 印刷サービス:ガント・チャートには、XML Publisherと連動してPDFファイルを生成し、印刷する機能が用意されています。詳細は、28.10項「ガント・チャートの印刷」を参照してください。

28.1.3 ガント・チャートのタスクの説明

プロジェクト・ガント・チャートおよびスケジュール・ガント・チャートでは、チャート領域でのタスクのレンダリング方法を説明する書式設定プロパティのセットが指定された事前定義済タスクが使用されます。すべてのサポートされるタスクには一意の識別子が必要です。次のリストで、サポートされるタスクとガント・チャートでの外観を説明します。

  • 標準:基本的なタスク・タイプ。プレーンな横棒でタスクの開始時期、終了時期および期間を示します。

  • サマリー:サブタスクのグループの開始日と終了日。サマリー・タスクは移動や伸長できません。サブタスクの日付が変更された場合、アプリケーションで、サマリー・タスクの開始日と終了日をかわりに再計算する必要があります。サマリー・タスクはプロジェクト・ガント・チャートにのみ使用できます。

  • マイルストン:ガント・チャートの特定の日付。マイルストン・タスクに関連付けられる日付は1つのみです。マイルストン・タスクは伸長できませんが、移動できます。マイルストン・タスクはプロジェクト・ガント・チャートにのみ使用できます。

  • 再帰:ガント・チャートで繰り返されるタスクで、各インスタンスには独自の開始日および終了日が含まれます。個々の再帰タスクにはオプションでサブタイプを含めることができます。個々の再帰タスクのその他すべてのプロパティには、そのタスクが一部となっているタスクのプロパティが使用されます。ただし、個々の再帰タスクにサブタイプがある場合は、このサブタイプがタスク・タイプをオーバーライドします。

  • 分割:2つの横棒に分割されたタスクで、通常は線でつながっています。棒の間の時間は、移動時間または停止時間によるアイドル時間を表します。

  • スケジュール済:スケジュール・ガント・チャートの基本的なタスク・タイプ。このタスク・タイプはタスクの開始時期、終了時期および期間、および指定されている場合は起動時期を示します。

標準タスク、サマリー・タスクおよびマイルストン・タスクでは、タスクの外観およびアクティビティを変更する追加の属性がサポートされています。次にこれらのスタイル属性を示します。

  • percentCompletecompletedThrough: タスクの完了度を示す追加の棒グラフが描画されます。これは標準タスク・タイプおよびサマリー・タスク・タイプに適用されます。

  • critical: 棒グラフの色が赤に変更され、クリティカルとしてマークされます。これは標準タスク・タイプ、サマリー・タスク・タイプおよびマイルストン・タスク・タイプに適用されます。

  • actualStartおよびactualEnd: これらの属性が指定されると、1つの棒グラフではなく2つの棒グラフが描画されます。1つの棒グラフはベース開始日およびベース終了日を示し、もう1つの棒グラフは実際の開始日および終了日を示します。これは標準タスク・タイプおよびマイルストン・タスク・タイプに適用されます。

図28-6に、プロジェクト・ガント・チャートの一般的なタスク・タイプを表示する凡例を示します。

図28-6 プロジェクト・ガント・チャートのタスク・タイプ用凡例

ガント・チャートのタスク・タイプの凡例

28.2 ガント・チャート・タグとファセットの理解

各ガント・チャート・タグ名が接頭辞dvt:で始まる3つのガント・チャート・コンポーネントは、タグがADF Data Visualization Tools (DVT)タグ・ライブラリの1つであることを示します。

  • dvt:projectGantt

  • dvt:resourceUtilizationGantt

  • dvt:schedulingGantt

すべてのガント・チャート・コンポーネントが子タグdvt:ganttLegendをサポートして、ガント・チャートの情報パネルにオプションの凡例を提供します。一部のメニュー・バーおよびツールバーの機能は、ガントの凡例が指定されているかどうかによって使用できる場合とできない場合があります。

ガント・チャート表領域では、ADF Faces af:columnタグを使用して、ヘッダー・テキスト、アイコンおよびデータの位置合せ、列の幅、および列にバインドされたデータを指定できます。データを階層構造で表示するには、nodeStampファセットで階層の要素の1次識別子を指定します。たとえば、"Task Name"列をプロジェクト・ガント・チャートのnodeStampファセットとして使用することもできます。例28-1に、"Task Name"をnodeStampファセットとして使用し、Resource、Start DateおよびEnd Dateの列を持つプロジェクト・ガント・チャートのサンプル・コードを示します。

例28-1 プロジェクト・ガント・チャートの列のサンプル・コード

<dvt:projectGantt 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-1に、ガント・チャート・コンポーネントによってサポートされているファセットを示します。

表28-1 ガント・チャート・コンポーネントによってサポートされているファセット

名前 説明

chartPopupMenu

チャート領域のポップアップ・メニューに表示される追加のコントロールの識別に使用するコンポーネントを指定します。af:popupコンポーネントである必要があります。このファセットには、複数のコンポーネントは許可されません。

customChartPopupMenu

チャート領域のデフォルトのポップアップ・メニューのかわりに、カスタムのポップアップ・メニューとして使用するコンポーネントを指定します。af:popupコンポーネントである必要があります。このファセットには、複数のコンポーネントは許可されません。

customPanel

タスク・プロパティ・ダイアログの「カスタム」タブに表示されるコントロールの識別に使用するコンポーネントを指定します。JSPページでは、1つのコンポーネントのみが許可されます。ファセット・ページを使用すると、複数コンポーネントが許可されます。

customTableContextMenu

表領域のデフォルトのポップアップ・メニューのかわりに、カスタムのポップアップ・メニューとして使用するコンポーネントを指定します。af:popupコンポーネントである必要があります。このファセットには、複数のコンポーネントは許可されません。

major

主時間軸の識別に使用するコンポーネントを指定します。dvt:timeAxisコンポーネントである必要があります。このファセットには、複数のコンポーネントは許可されません。

menuBar

ガント・メニュー・バーに表示される追加のコントロールの識別に使用するコンポーネントを指定します。af:menuコンポーネントである必要があります(このファセットには、複数のコンポーネントは許可されません)。

minor

副時間軸の識別に使用するコンポーネントを指定します。dvt:timeAxisコンポーネントである必要があります。このファセットには、複数のコンポーネントは許可されません。

nodeStamp

ガント・チャートの各要素のスタンプ設定に使用するコンポーネントを指定します。アクティビティのないすべてのコンポーネント、およびEditableValueHolderまたはActionSourceインタフェースを実装する大半のコンポーネントなど、特定のタイプのコンポーネントのみがサポートされます。af:columnコンポーネントである必要があります。このファセットには、複数のコンポーネントは許可されません。

tablePopupMenu

表領域のポップアップ・メニューに表示される追加のコントロールの識別に使用するコンポーネントを指定します。af:popupコンポーネントである必要があります。このファセットには、複数のコンポーネントは許可されません。

toolbar

ガント・ツールバーに表示される追加のコントロールの識別に使用するコンポーネントを指定します。af:toobarコンポーネントである必要があります。このファセットには、複数のコンポーネントは許可されません。


すべてのガント・チャート・タグとその属性の詳細、および有効な値のリストは、DVTタグのドキュメントを参照してください。JDeveloperで特定のタグのドキュメントにアクセスするには、構造ウィンドウでタグを選択し、[F1]キーを押します。JDeveloperのヘルプでADF Data Visualization Toolsタグ・ライブラリにアクセスするには、オンライン・ヘルプの目次でJavadocとタグ・ライブラリ・リファレンスのノードを開き、「JDeveloperタグ・ライブラリ・リファレンス」トピックのタグ・ライブラリへのリンクをクリックします。

28.3 ガント・チャートのユーザー対話性の理解

実行時に、ユーザーはガント・チャートでナビゲーションと表示、および表領域またはチャート領域でデータを変更するアクションなど、様々な操作を実行できます。

ユーザーとの対話にデータの変更が伴う場合、ガント・チャートでは検証、イベント処理およびデータ・モデルの更新を実行することによって変更が処理されます。検証では、送信されたデータが基本的な要件を満たしていること、たとえば日付が有効で休日の期間に該当しないことなどが確認できます。検証に失敗すると、データ・モデルの更新が省略され、エラー・メッセージが返されます。

ガント・チャートのサーバー側イベントが開始されると、変更に関する検証された情報を含むイベントが登録されたリスナーに送信されます。リスナーは、基礎となるデータ・モデルを更新します。カスタマイズされたイベント・ハンドラは、ガント・チャート・コンポーネントのdataChangeListener属性でメソッド・バインディング式を指定することによって登録できます。

ガント・チャートによってサポートされるサーバー側イベントには、次のものが含まれます。

  • ガント・チャート表領域における表のセルのデータ更新

  • タスクの作成、更新、削除、移動、切取り、コピー、貼付け、インデント、アウトデント

  • タスク・バーを1つの行から別の行にドラッグすることによるリソースの再割当て

  • 別の日付へのタスク・バーのドラッグ

  • タスクの期間の延長

  • タスクのリンク付けまたはリンク解除

  • ガント・チャート表領域での単一の行または複数の行の選択

  • ユーザー・アクションを元に戻すまたはやり直し

  • タスク・バーのダブルクリック

ユーザーはツールバーからドロップダウン・リストを使用してガント・チャートのデータをフィルタ処理できます。カスタム・フィルタを作成できます。

28.3.1 ガント・チャートでの移動

スクロールを使用してガント・チャートの領域を移動したり、チャート領域で特定の日付にアクセスできます。表領域の列を表示するかどうかも制御できます。

28.3.1.1 リスト領域またはチャート領域のスクロールとパン

ガント・チャートの設計により、表領域とチャート領域の横方向のスクロールを別々に行えます。これは、表領域で特定のタスクまたはリソース情報を保持しつつ、チャート領域でスクロールして複数期間の情報を得る場合に特に有用です。

ユーザーは、[Ctrl]キーを押しながら、マウスのスクロール・ホイールを使用することで、ガント・チャートのタイム・スケール上でズーム・インとズーム・アウトができます。

プロジェクトおよびスケジュール・ガント・チャートでは、マウスを使用してチャート領域を縦および横にドラッグすることでその領域をパンすることができます。移動カーソルは、ユーザーがタスク以外のチャート領域内をクリックすると表示されます。

28.3.1.2 ガント・チャートでの特定の日付への移動方法

ガント・チャートのチャート領域で特定の日付に移動できます。

ガント・チャートで特定の日付に移動する手順:

  1. 「表示」メニューから、日付に移動を選択します。

  2. 「日付に移動」ダイアログで、「日付の選択」アイコンをクリックし、カレンダで日付を選択して、目的の日付を指定します。

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

ガント・チャートのチャート領域は、要求した日付から表示されます。

28.3.1.3 表領域での列の可視性の制御方法

表領域には、データバインドされたガント・チャートの作成時に定義した列がすべて、デフォルトで表示されます。これらの列の1つ以上を選択して非表示にできます。

ガント・チャートの表領域の列の表示を制御する手順:

  1. 「表示」メニューから、「リスト・ペイン」を選択します。

  2. ポップアップ・メニューから、「列」を選択します。

  3. 「列」メニューから、ガント・チャートの表領域に表示しない列の選択を解除します。表領域に表示する列の選択もできます。


    注意:

    表領域には、最低1つの列を表示する必要があります。

28.3.2 階層リストまたはフラット・リストでのデータの表示方法

ガント・チャートで階層式のデータ・モデルを使用している場合、ガント・チャート・データを折りたたんだ形式または展開した形式で表示できます。

ガント・チャート・データのリストでの表示を制御する手順:

  1. 「表示」メニューから、「リスト・ペイン」を選択します。

  2. 次のメニューから、「リストとして表示」(展開されたリストの場合)または「階層として表示」(折りたたんだリストの場合)のいずれかを選択します。

28.3.3 ガント・チャートのタイム・スケールの変更方法

ガント・チャートのタイム・スケールの表示を変更し、時間軸をズーム・インおよびズーム・アウトして、異なる時間単位でチャート領域を表示できます。ズームして合せる特殊な機能を使用すると、グラフをスクロールする必要なく、チャート領域で表示可能な時間の量を選択することもできます。

時間軸の設定を変更する手順:

  1. 「表示」メニューから、「タイム・スケール」を選択します。

  2. 続く「タイム・スケール」ダイアログの「時間単位」列で、主軸、副軸、または両方に新しい単位の値を選択します。サンプル・ボックスには、選択する時間単位のサンプル設定が表示されています。図28-7に、「タイム・スケール」ダイアログを示します。

    図28-7 「タイム・スケール」ダイアログ

    「タイム・スケール」ダイアログ
  3. 「OK」をクリックします。

時間軸を拡大または縮小する手順:

  1. (オプション)より低いレベルの時間単位で時間軸を表示するには、ツールバーで「拡大」アイコンを選択します。

  2. (オプション)より高いレベルの時間単位で時間軸を表示するには、ツールバーで「縮小」アイコンを選択します。

  3. (オプション)ツールバーのズーム・アイコンの次のボックスで、スクロールなしでチャートに表示する時間を表す期間を選択します。

  4. (オプション)スケールを変更する時間軸を右クリックし、サブメニューから使用可能な時間単位を選択します。

28.4 ガント・チャートのデータ要件の理解

ガント・チャートのデータ・モデルは、ツリー(階層)モデル、あるいは行セットまたはオブジェクトのフラット・リストを含むコレクション・モデルのいずれかです。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたガント・チャートの作成に関する項を参照してください。

ガント・チャートをデータ・コントロールにバインドする場合、データ・コントロールのコレクションをガント・チャートのノード定義へマップする方法を指定します。

28.4.1 プロジェクト・ガント・チャートのデータ

プロジェクト・ガント・チャートのデータ・モデルは、階層式のデータをサポートし、TreeModelを使用して基礎となるリストのデータにアクセスします。使用される特定のモデル・クラスはorg.apache.myfaces.trinidad.model.TreeModelです。

TreeModelによって返されるオブジェクトのコレクションには、最低限、次のプロパティが必要です。

  • taskId: タスクのID

  • startTime: タスクの開始時期

  • endTime: タスクの終了時期

(オプション)オブジェクトにoracle.adf.view.faces.bi.model.Taskインタフェースを実装して、ガント・チャートに正しいプロパティが提供されていることを確認できます。

ADFデータ・コントロールにデータをバインドする場合、プロジェクト・ガント・チャートでは、次のノード定義を使用できます。

  • タスク・ノード:タスクのコレクションを表します。タスク・ノード定義には、次のタイプのオプション・アクセッサがあります。

    • subTask(プロジェクト・ガント・チャートにのみ使用可能)

    • splitTask

  • 分割タスク・ノード:分割タスクのコレクションを表します。分割タスク・ノード定義にはアクセッサはありません。

  • 依存性ノード:タスクの依存性のコレクションを表します。依存性ノード定義には、アクセッサはありません。

  • 再帰タスク・ノード:再帰タスクのコレクションを表します。再帰タスク・ノード定義には、アクセッサはありません。

表28-2に、プロジェクト・ガント・チャートのデータ・オブジェクト・キーの完全なリストを示します。

表28-2 プロジェクト・ガント・チャートのデータ・オブジェクト・キー

データ・オブジェクト・キー データ型と説明

actualEnd

Date。標準タスクおよびマイルストン・タスクの実際の終了時期。

actualStart

Date。標準タスクおよびマイルストン・タスクの実際の開始時期。

completedThrough

Date。標準タスクおよびサマリー・タスクの完了。

critical

Boolean。タスクがすべてのタスクに対してクリティカルかどうかを指定します。

依存性(ノード)

タスクの依存性のリスト。依存性のデータ・オブジェクト・キーには次のものが含まれる。

  • fromId: 依存性が開始するタスクのID。

  • toId: 依存性が終了するタスクのID。

  • type: 依存性のタイプ。有効な値は、start-startstart-finishfinish-finishfinish-startstart-beforestart-togetherfinish-afterおよびfinish-togetherです。

endTime (必須)

Date。すべてのタスクの終了時期。

icon1

String。すべてのタスクのタスク・バーに関連付けられる1番目のアイコン。アイコンは、その他の属性に応じて変わる可能性があります。

icon2

String。すべてのタスクのタスク・バーに関連付けられる2番目のアイコン。

icon3

String。すべてのタスクのタスク・バーに関連付けられる3番目のアイコン。

iconPlacement

String。すべてのタスクのタスク・バーでのアイコンの配置。有効な値はleft (デフォルト)、rightinsidestartendinnerLeftinnerRightinnerCenterinnerStartinnerEndです。

isContainer

Boolean。ノード定義がコンテナかどうかを指定します。

label

String。すべてのタスクのタスク・バーに関連付けられるラベル。

labelPlacement

String。すべてのタスクのタスク・バーでのラベルの配置。有効な値はleft (デフォルト)、rightinsidestartendinnerLeftinnerRightinnerCenterinnerStartinnerEndです。

percentComplete

Integer。標準タスクおよびサマリー・タスクが完了した割合。

再帰タスク(ノード)

すべてのタスクに関する再帰タスクのリスト。

分割タスク(ノード)

すべてのタスクに関する連続的な時系列のないタスクのリスト。

startTime (必須)

Date。すべてのタスクの開始時期。

サブタスク(ノード)

すべてのタスクに関するサブタスクのオプションのリスト。

taskId (必須)

String。すべてのタスクの一意の識別子。

type

Sting。すべてのタスクに関するタスクのタイプ。


28.4.2 リソース使用率ガント・チャートのデータ

リソース使用率ガント・チャートのデータ・モデルは、階層式のデータをサポートし、TreeModelを使用して基礎となるリストのデータにアクセスします。使用される特定のモデル・クラスはorg.apache.myfaces.trinidad.model.TreeModelです。

TreeModelによって返されるオブジェクトのコレクションには、最低限、次のプロパティが必要です。

  • resourceId: タスクのID。

  • timeBuckets: このリソースの時間バケット・オブジェクトのコレクション。

(オプション)オブジェクトにoracle.adf.view.faces.bi.model.Resourceインタフェースを実装して、ガント・チャートに正しいプロパティが提供されていることを確認できます。

timeBucketsプロパティによって返されるオブジェクトのコレクションには、次のプロパティも必要です。

  • time: 時間バケットによって表される日付。

  • values: このリソースのメトリックのリスト。

ADFデータ・コントロールにデータをバインドする場合、リソース使用率ガント・チャートでは、次のノード定義を使用できます。

  • リソース・ノード:リソースのコレクションを表します。リソース・ノード定義には、現在のリソースのサブリソースのコレクションを返すsubResourcesオプション・アクセッサがあります。

  • 時間バケット・ノード:メトリックが定義された時間スロットのコレクションを表します。時間バケット・ノード定義にはオプションのtimeBucketDetailsアクセッサがあり、これによって時間バケットの他のメトリック値とともにレンダリングされる行のコレクションが返されます。

表28-3に、リソース使用率ガント・チャートのデータ・オブジェクト・キーの完全なリストを示します。

表28-3 リソース使用率ガント・チャートのデータ・オブジェクト・キー

データ・オブジェクト・キー データ型と説明

label

String。タスク・バーに関連付けられるラベル。

labelAlign

String。タスク・バーでのラベルの配置。有効な値は、top (デフォルト)とinsideです。

resourceId (必須)

String。リソースの一意の識別子。

timeBuckets (必須)

List。リソースに関連付けられるタスクのリスト。

time (必須)

Date。時間バケットの開始時期。

values (必須)

Double。メトリックの値。


28.4.3 スケジュール・ガント・チャートのデータ

スケジュール・ガント・チャートのデータ・モデルは、階層式のデータをサポートし、TreeModelを使用して基礎となるリストのデータにアクセスします。使用される特定のモデル・クラスはorg.apache.myfaces.trinidad.model.TreeModelです。

TreeModelによって返されるオブジェクトのコレクションには、最低限、次のプロパティが必要です。

  • resourceId: タスクのID。

  • tasks: このリソースのタスク・オブジェクトのコレクション。

(オプション)オブジェクトにoracle.adf.view.faces.bi.model.ResourceTaskインタフェースを実装して、ガント・チャートに正しいプロパティが提供されていることを確認できます。

tasksプロパティによって返されるオブジェクトのコレクションには、次のプロパティも必要です。

  • taskId: タスクのID

  • startTime: タスクの開始時期

  • endTime: タスクの終了時期

ADFデータ・コントロールにデータをバインドする場合、スケジュール・ガント・チャートでは、次のノード定義を使用できます。リソース・ノードには、次のタイプのアクセッサがあります。

  • subResources: 現在のリソースのサブリソースのコレクションを返します。このアクセッサはオプションです。

  • tasks: 現在のリソースのタスクのコレクションを返します。このアクセッサは必須です。タスクに、splitTaskアクセッサを含めることができます。

表28-4に、スケジュール・ガント・チャートのデータ・オブジェクト・キーの完全なリストを示します。

表28-4 スケジュール・ガント・チャートのデータ・オブジェクト・キー

データ・オブジェクト・キー データ型と説明

依存性(ノード)

タスクの依存性のリスト。依存性のデータ・オブジェクト・キーには次のものが含まれる。

  • fromId: 依存性が開始するタスクのID。

  • toId: 依存性が終了するタスクのID。

  • type: 依存性のタイプ。有効な値は、start-startstart-finishfinish-finishfinish-startstart-beforestart-togetherfinish-afterおよびfinish-togetherです。

endTime (必須)

Date。すべてのタスクの終了時期。

icon1

String。すべてのタスクのタスク・バーに関連付けられる1番目のアイコン。アイコンは、その他の属性に応じて変わる可能性があります。

icon2

String。すべてのタスクのタスク・バーに関連付けられる2番目のアイコン。

icon3

String。すべてのタスクのタスク・バーに関連付けられる3番目のアイコン。

iconPlacement

String。すべてのタスクのタスク・バーでのアイコンの配置。有効な値は、left (デフォルト)、rightinsideinside_leftinside_rightおよびinside_centerです。

isContainer

Boolean。ノード定義がコンテナかどうかを指定します。

label

String。すべてのタスクのタスク・バーに関連付けられるラベル。

labelPlacement

String。すべてのタスクのタスク・バーでのラベルの配置。有効な値は、left (デフォルト)、rightinsideinside_leftinside_rightおよびinside_centerです。

再帰タスク(ノード)

すべてのタスクに関する再帰タスクのリスト。

resourceId (必須)

String。リソースの一意の識別子。

分割タスク(ノード)

すべてのタスクに関する連続的な時系列のないタスクのコレクション。

startTime (必須)

Date。すべてのタスクの開始時期。

startupTime

Date。タスクの開始前の起動時期。

タスク(ノード)(必須)

リソースに関連付けられるタスクのリスト。

taskId (必須)

String。すべてのタスクに関するタスクの一意の識別子。

taskType

String。すべてのタスクに関するタスクのタイプ。

workingDaysOfTheWeek

Object。その週の営業日のリスト。

workingEndTime

Date。リソースの作業終了時間。

workingStartTime

Date。リソースの作業開始時間。


28.5 ADFガント・チャートの作成

ADF Faceガント・チャート・コンポーネントの作成には次のデータソースを使用できます。

  • ADFデータ・コントロール: ADFデータ・コントロール・パネルからデータ・コレクションをドラッグ・アンド・ドロップして、データ・バインドされたガント・チャートを宣言的に作成します。『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたガント・チャートの作成に関する項で説明されているように、行セット・データを持つデータ・コレクションを使用するガント・チャートを作成できます。

  • データ・モデル: ガント・タグのvalue属性を使用してバッキングBeanメソッドを参照するEL式を提供することによってプログラムでガント・チャートのデータ・モデルを指定します。

28.5.1 ページへのガント・チャートの追加方法

簡単なUI優先開発を使用してページを設計しているときには、コンポーネント・パレットを使用してプロジェクト、リソース使用率またはスケジュール・ガント・チャート・コンポーネントをJSFページにドロップ・アンド・ドロップします。

ページにガント・チャートが追加されると、プロパティ・インスペクタを使用して、データ値を指定し、ガント・チャートに追加の表示属性を構成できます。

プロパティ・インスペクタで、各属性フィールドのドロップダウン・メニューを使用して、プロパティの説明、およびEL式ビルダーまたはその他の専用ダイアログの表示などのオプションを表示できます。例28-1に、プロジェクト・ガント・チャート・コンポーネントのvalue属性に関するドロップダウン・メニューを示します。

図28-8 プロジェクト・ガント・チャートのValue属性のドロップダウン・メニュー

プロジェクト・ガント・チャートのValue属性のドロップダウン・メニュー

注意:

アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用してガント・チャートを作成でき、バインドが自動的に行われます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされたガント・チャートの作成に関する項を参照してください。

ページにガント・チャートを追加する手順:

  1. 「コンポーネント・パレット」の「ADFデータ視覚化」ページで、「共通」パネルから「プロジェクト」「リソース使用率」または「スケジュール」ガント・チャートをページにドラッグ・アンド・ドロップし、「ガント・チャートの作成」ダイアログを開きます。

    オプションで、そのダイアログの「データを今すぐバインド」を選択して、ガント・チャートで表示するデータを表すADFデータ・コントロールかADFマネージドBeanを入力するか、そこに移動しするかして、ガント・チャートをバインドします。このオプションを選択すると、ダイアログのデータ・バインディングのフィールドが編集のために使用可能になります。そうでなければ、「OK」をクリックして、ページにコンポーネントを追加します。ダイアログのヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。

  2. プロパティ・インスペクタで、ガント・チャートの属性を表示します。ヘルプ・ボタンを使用して、projectGanttresourceUtilizationGanttまたはschedulingGanttコンポーネントの完全なタグ・ドキュメントを表示します。

  3. 「共通」セクションを開きます。このセクションを使用して、次の属性を設定します。

    • StartTime: ガント・チャートの期間のレンダリングに使用する開始時期。

    • EndTime: ガント・チャートの期間のレンダリングに使用する終了時期。

  4. 「ガント・データ」セクションを開きます。このセクションを使用して、次の属性を設定します。

    • Value: EL式を使用してデータ・モデル(org.apache.myfaces.trinidad.model.TreeModelのタイプ)を指定します。

    • Var: ガント・チャート・データ・コレクションの各要素の参照に使用される変数を指定します。このコンポーネントのレンダリングが完了すると、この変数は削除されるか、その前の値に戻ります。

  5. 「外観」セクションを開きます。このセクションを使用して、次の属性を設定します。

    • RowBandingInterval: 色のバンディングの目的で、連続する何行で行グループを形成するかを指定します。デフォルトでは、これは0に設定されており、すべての行が同じ背景色で表示されます。別の色を使用する場合は、これを1に設定します。

    • ShowMenuBar: ガント・チャートにメニュー・バーを表示するかどうかを指定します。この属性をfalseに設定すると、menuBarファセットで指定されたカスタム・メニュー・バー項目も非表示になります。

    • ShowToolbar: ガント・チャートにツールバーを表示するかどうかを指定します。この属性をfalseに設定するとtoolbarファセットで指定したカスタム・ツールバー・ボタンも非表示になります。

    • Summary: ガント・チャートの説明を入力します。この説明は、スクリーン・リーダーのユーザーがアクセスします。

  6. 「動作」セクションを開きます。このセクションを使用して、次の属性を設定します。

    • InitiallyExpandAll: すべての行を最初に展開するかどうかを指定します。

    • FetchSize: 1データ・フェッチ・ブロック内の行数の指定に使用します。デフォルト値は25行です。

    • FeaturesOff: 実行時に無効にするエンド・ユーザー機能の空白区切りリストを入力します。有効な値は、ガント・チャートのタイプによって異なります。

  7. 「その他」セクションを開きます。このセクションを使用して、次の属性を設定します。

    • TableColumnStretching: これにより、ガント・チャートの表領域の列に適用する拡大のタイプを指定します。有効な値は次のとおりです。

      • none (デフォルト): ガント・チャートを最適化する場合に使用します。

      • last: 最後の列を、ビューポート内の使用されていない領域に合せて拡大する場合に使用します。

      • blank: 表領域の幅全体にまたがるように空の列を自動的に挿入して拡大する場合に使用します。

      • column: 特定のリーフ(非グループ)を、列内の使用されていない領域に合せて拡大する場合に使用します。たとえば、この値に拡大されるように列のIDを追加します。

        column:ColId
        
      • multiple: 複数の列を拡大する場合に使用します。列の幅をパーセンテージとして設定できます。詳細は、af:columnのタグのドキュメントを参照してください。


      注意:

      行ヘッダーおよび固定列は、拡大して表領域のスクロール可能なデータ本体にアクセスできるようにはなりません。

    • TableActiveRowKey: 表領域の現在のアクティブな行を決定する場合に使用します。デフォルトでは、この属性の値は表領域で最初に表示される行です。表領域がリフレッシュされると、そのコンポーネントがスクロールされ、アクティブな行が表示されます(まだ表示されていない場合)。ユーザーがコンテンツを編集するために行をクリックすると、その行がアクティブな行になります。

28.5.2 ページにガント・チャートを追加する場合の処理

コンポーネント・パレットを使用してガント・チャートを作成すると、JDeveloperによりJSFページにコードが挿入されます。例28-2に、プロジェクト・ガント・チャートに対してJSFページで挿入されるコードを示します。

例28-2 プロジェクト・ガント・チャートのサンプル・コード

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

28.5.3 選択されたタスクまたはリソースでのアクションの実行に関する必知事項

ガント・チャートでは、ユーザーは、タスクまたはリソースを表すガント・チャートの表領域で1つ以上の行を選択し、それらの行に対しアクションを実行できます。ガント・チャートの選択状態が変更されると、選択イベントがトリガーされます。selectionEventイベントは、選択解除された行と選択された行をレポートします。

ガント・チャートで選択イベントをリスニングするために、selectionListener属性を使用することで、またはaddselectionListener()メソッドを使用してガント・チャートにリスナーを追加することで、ガント・チャートにリスナーを登録できます。これにより、リスナーは選択された行にアクセスし、それらの行に対してアクションを実行できます。

現在の選択内容(選択された1つ以上の行)はRowKeySetオブジェクトであり、このオブジェクトは、ガント・チャートに対しgetSelectedRowKeys()メソッドをコールして取得します。プログラムを使用して選択内容を変更するには、次のいずれかを実行します。

  • RowKeySetオブジェクトでrowKeyオブジェクトを追加するか、rowKeyオブジェクトを削除します。

  • ガント・チャートに対しsetRowIndex()またはsetRowKey()メソッドをコールして、特定の行を現在行にします。その後、RowKeySetオブジェクトに対してadd()またはremove()メソッドをコールして、その行を選択内容に追加するか、選択内容から削除できます。

例28-3に表の一部を示します(この部分では、ユーザーが複数の行を選択し、「削除」ボタンをクリックしてそれらの行を削除できます)。アクション・リスナーは、mybeanマネージドBeanのperformDeleteメソッドにバインドされます。

例28-3 行の選択

<af:table binding="#{mybean.table}" rowselection="multiple" ...>
  ...
</af:table>
<af:button text="Delete" actionListener="#{mybean.performDelete}"/>

例28-4に、選択されたすべての行を反復し、それぞれにmarkForDeletionメソッドをコールするアクション・メソッドperformDeleteを示します。

例28-4 rowKeyオブジェクトの使用

public void performDelete(ActionEvent action)
{
  UIXTable table = getTable();
  Iterator selection = table.getSelectedRowKeys().iterator();
  Object oldKey = table.getRowKey();
  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();
  }
  // restore the old key:
  table.setRowKey(oldKey);
}
 
// Binding methods for access to the table.
public void setTable(UIXTable table) { _table = table; }
public UIXTable getTable() { return _table; }
private UIXTable _table;

28.5.4 スキニングおよびガント・チャートの外観のカスタマイズに関する必知事項

プロジェクト、リソース使用率およびスケジューリング・ガント・チャートのスキニング・キーの完全なリストは、Oracle Fusion Middleware Documentation Oracleデータ視覚化ツール・スキン・セレクタ・タグ・リファレンスを参照してください。JDeveloperのヘルプ・センターからリストにアクセスするには、「ドキュメント・ライブラリ」、「Fusion MiddlewareリファレンスとAPI」の順に選択します。スキンを使用したアプリケーションのカスタマイズの詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。

28.6 ガント・チャートのタスクおよびリソースのカスタマイズ

ガント・チャートのタスクをカスタマイズして新しいタスク・タイプを作成したり、カスタム・データ・フィルタを指定したり、タスク・バーにダブルクリック・イベントを追加したり、時間バケット属性の詳細を表示したり、ステップ行を追加することができます。

28.6.1 新しいタスク・タイプの作成

タスク・タイプは、視覚的にはガント・チャートのチャート領域の棒として表されます。新しいタスク・タイプは、次の3つのいずれかの方法で作成できます。

  • .jspxファイルまたは別のCSSファイルでのタスク・タイプ・スタイル・プロパティの定義。

  • TaskbarFormatオブジェクトの定義およびtaskbarFormatManagerによるオブジェクトの登録。

  • 関連付けられたTaskbarFormatオブジェクトの取得およびsetメソッドを使用したそのプロパティの更新による、事前定義されたタスク・タイプのプロパティの変更。

TaskBarFormatオブジェクトでは次のプロパティが公開されます。

  • 塗りつぶしの色

  • 塗りつぶしのイメージ・パターン

  • 枠の色

  • マイルストン・タスクに使用されるイメージ

  • サマリー・タスクの開始と終了に使用されるイメージ

分割タスクまたは再帰タスクなど、複数の棒のあるタスクでは、プロパティは個々の棒に定義されます。

例28-5に、.jspxファイルでカスタム・タスク・タイプのプロパティを定義するサンプル・コードを示します。

例28-5 カスタム・タスク・タイプのプロパティを定義するサンプル・コード

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

例28-6に、TaskbarFormatオブジェクトで塗りつぶしの色と枠の色を定義し、taskbarFormatManagerにオブジェクトを登録するサンプル・コードを示します。

例28-6 TaskbarFormat Managerを使用して登録されたカスタムTaskbarFormatオブジェクト

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

28.6.2 リソース使用率ガント・チャートでの積上げ棒の構成

リソース使用率ガント・チャートでは、指定した期間内にリソースに割り当てられ使用されている単位が時間バケットに表示されます。デフォルトでは、これらの単位は、チャート領域で縦棒としてレンダリングされます。2つ以上の棒が縦に積み上げられるように、グラフィカル表示を構成することもできます。たとえば、図28-2のリソース使用率ガント・チャートでは、AVAILABLEリソース・メトリック棒の隣の縦棒にRUNおよびSETUPリソース・メトリックが積み上げられています。

リソース使用率ガント・チャートで積上げ棒を構成するには、setDisplayAs()メソッドを使用してTaskbarFormatオブジェクトを更新します。STACK表示を指定すると、前のメトリックにメトリックが積み上げられる形式でタスクがレンダリングされます。例28-7に、前のメトリックであるSETUPの上に積み上げられるように構成されているRUNメトリックを示します。

例28-7 積上げ棒を構成するためのサンプル・コード

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.6.3 リソース容量線の構成

リソース使用率ガント・チャートのチャート領域で、リソース・メトリックを縦棒として表示することに加え、チャート領域でメトリックが線として表示されるように構成できます。これは、リソースのしきい値レベルなど、容量メトリックを表示する場合に便利です。

たとえば、図28-9に示されているリソース使用率ガント・チャートには、積上げRUNおよびSETUPメトリック、およびALLOCATEDメトリック棒に対して、しきい値メトリックを表示する容量線があります。

図28-9 リソース使用率ガント・チャートのリソース容量線

ガント・チャートのしきい値の容量線

リソース使用率ガント・チャートでリソース容量線を構成するには、setDisplayAs()メソッドを使用してTaskbarFormatオブジェクトを更新します。STEPPED_LINE表示を指定すると、縦棒の上に水平線が表示され各メトリックを通過するという形式でタスクがレンダリングされます。例28-8に、縦棒メトリックを通過するように構成されているリソース・メトリックTHRESHOLDを示します。

例28-8 リソース容量線を構成するためのコード・サンプル

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.6.4 カスタム・データ・フィルタの構成

ツールバーからデータ・フィルタ・ドロップダウン・リストを使用してガント・チャートのデータ表示を変更できます。ガント・チャートではFilterManagerを使用して、すべての事前定義済およびユーザー指定のデータ・フィルタを管理できます。フィルタ・オブジェクトには次の情報が含まれます。

  • フィルタの一意のID

  • ドロップダウン・リストにフィルタを表示するためのラベル

  • フィルタが選択されたときに起動するオプションのJavaScriptメソッド

フィルタ・オブジェクトを作成し、FilterManageraddFilterメソッドを使用してオブジェクトを登録して独自のフィルタを定義できます。例28-9に、FilterManagerを使用してResourceフィルタ・オブジェクトを登録するサンプル・コードを示します。

例28-9 FilterManagerを使用して登録されたカスタム・フィルタ・オブジェクト

FilterManager _manager = m_gantt.getFilterManager();
 
// ID for filter display label   javascript callback (optional)
_manager.addFilter((new Filter(RESOURCE_FILTER, "Resource...", "showResourceDialog")));

ユーザーがフィルタを選択すると、フィルタ・ロジックを実行する、登録されたFilterListenerFilterEventが送信されます。リスナーの登録には、ガント・チャート・コンポーネントのfilterListener属性が使用されます。アプリケーションによって実装されると、データ・モデルが更新され、ガント・チャート・コンポーネントにフィルタ処理された結果が表示されます。例28-10に、FilterListenerのサンプル・コードを示します。

例28-10 カスタム・フィルタのFilterListener

public void handleFilter(FilterEvent event)
    {
        String _type = event.getType();
        if (FilterEvent.ALL_TASKS.equals(_type))
        {
            // update the gantt model as appropriate
        }
    }

カスタム・データ・フィルタを指定する手順:

  1. 構造ウィンドウでガント・チャートのノードを右クリックし、「プロパティに移動」を選択します。

  2. プロパティ・インスペクタの「動作」カテゴリのFilterListenerフィールドに、定義したFilterListenerを参照するメソッドを入力します。たとえば、"#{project.handleFilter}"です。

28.6.5 タスク・バーへのダブルクリック・イベントの追加

ガント・チャート・コンポーネントでは、タスク・バーのダブルクリック・イベントがサポートされています。たとえば、ポップアップ・ウィンドウでタスクに関する詳細な情報が表示されるように設定できます。図28-10に、タスク・バーにダブルクリック・イベントを使用するプロジェクト・ガント・チャートを示します。

図28-10 ダブルクリック・イベントを使用したタスク・バー

タスクにダブルクリックが表示されたガント・チャート

例28-11に、タスク・バーにダブルクリック・イベントを追加するサンプル・コードを示します。

例28-11 ダブルクリック・イベントのサンプル・コード

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

28.7 ガント・チャートの凡例、ツールバーおよびポップアップ・メニューのカスタマイズ

ガント・チャートの下に表示される情報パネルおよび凡例、メニュー・バー・オプションおよびツールバー・ボタン、およびガント・チャート表領域およびチャート領域を右クリックすると表示されるポップアップ・メニューなど、デフォルトのガント・チャート機能を変更することができます。

28.7.1 ガント・チャートの凡例のカスタマイズ方法

オプションのガント・チャートの凡例サブコンポーネントには、選択されたタスクまたは選択された時間バケットに関するメトリックに関する詳細情報が表示される領域、およびガント・チャートの各タスク・タイプを表すために使用される記号および色コード・バーが含まれています。実行時に、ツールバー・ボタンを使用して情報パネルを表示または非表示にできます。

凡例エリアを提供するには、ガント・チャート・タグの子としてdvt:ganttLegendタグを追加する必要があります。凡例エリアのコンテンツは、taskbarFormatManagerで登録された各タスク・タイプのプロパティに基づいて自動的に生成されます。

ガント・チャートの凡例タグでkeys属性およびlabel属性を使用してタスクまたは時間バケットが選択された場合に表示される情報をカスタマイズできます。keys属性では、表示する値の取得に使用されるデータ・オブジェクト・キーを指定し、labels属性には、キーで取得した値に対応するラベルが含まれる必要があります。これらの属性が指定されていないと、凡例で情報パネルの領域全体が使用されます。

ガント・チャートの凡例タグでiconKeys属性およびiconLabels属性を使用して、凡例にアイコンを追加することもできます。アイコンのサイズが大きすぎる場合は、自動的に縦横12ピクセルにサイズ変更されます。

例28-12に、プロジェクト・ガント・チャートの凡例に保留中タスクに関する情報を表示するサンプル・コードを示します。

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

28.7.2 ガント・チャートのツールバーのカスタマイズ

ガント・チャート・ツールバー・サブコンポーネントを使用すると、ガント・チャートの操作を実行できます。ツールバーの左側の部分には、各ガント・チャート・タイプに対するデフォルトのメニュー・オプション・セットを含むメニュー・バーがあります。ツールバーの右側の部分には、各ガント・チャート・タイプを操作するためのデフォルトのアクション・ボタンのセットが表示されます。

ガント・チャートのmenuファセットおよびtoolbarファセットを使用することによって、独自のメニュー項目およびツールバー・ボタンを使用できます。ガント・チャートでは、新しいメニュー項目と標準の項目がマージされます。例28-13に、新しいメニュー項目を指定するサンプル・コードを示します。

例28-13 カスタム・メニュー項目のサンプル・コード

<dvt:projectGantt var="task">
<f:facet name=”menus”>
  <af:menu text=”My Menu”>
    <af:commandMenuItem text="Add..." />
    <af:commandMenuItem text="Create.." />
  </af:menu>
</f:facet>
</dvt:projectGantt>

例28-14に、新しいツールバー・ボタンを指定するサンプル・コードを示します。

例28-14 カスタム・ツールバー・ボタンのサンプル・コード

<dvt:schedulingGantt var="task">
<f:facet name="toolbar">
  <af:toolbar>
    <af:commandToolbarButton text="Custom" disabled="true"/>
  </af:toolbar>
</dvt:schedulingGantt>

メニュー・バーおよびツールバー・ボタンで開始されるアクションは、登録されたリスナー、DataChangeListenerを使用してガント・チャート・コンポーネント上で処理されます。たとえば、ユーザーがツールバーで削除ボタンを押すと、削除に選択されたタスクのIDを持つDataChangeEventがサーバー上で開始されます。登録されたリスナーがタスクの実際の削除を行い、ガント・チャート・データ・モデルは更新された情報を使用して更新されます。

ガント・チャート・タグでdataChangeListener属性を使用してメソッド・バインディングを指定することによってDataChangeListenerを登録できます。たとえば、バッキングBeanのhandleDataChangeという名前のメソッドにコードを入れる場合、dataChangeListener属性の設定は、"#{myBackingBean.handleDataChange}"になります。

例28-15に、バッキングBeanのサンプル・コードを示します。

例28-15 データ変更を処理するためのバッキングBean

public void handleDataChanged(DataChangeEvent evt)
{
if (DataChangeEvent.DELETE == evt.getActionType())
            …………
}

28.7.3 ガント・チャートのポップアップ・メニューのカスタマイズ

ユーザーがガント・チャートの表領域またはチャート領域を右クリックすると、ガント・チャートを操作するポップアップ・メニューが表示されます。各領域に標準のオプションのセットが提供されます。

ガント・チャートのtablePopupMenuファセットおよびchartPopupMenuファセットを使用することによって、独自のメニュー項目を使用できます。ガント・チャートでは、新しいメニュー項目と標準の項目がマージされます。例28-16に、表領域のポップアップ・メニューにカスタム・メニュー項目を指定するサンプル・コードを示します。

例28-16 カスタム・ポップアップ・メニュー項目のサンプル・コード

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

実行時にポップアップ・メニューを動的に変更することもできます。例28-17に、プロジェクト・ガント・チャートのチャート領域で選択したタスクに基づいてタスク・バーでカスタム・ポップアップ・メニューを更新するサンプル・コードを示します。

例28-17 動的ポップアップ・メニュー項目のサンプル・コード

<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で指定されます。例28-18に、バッキングBeanのサンプル・コードを示します。

例28-18 タスク選択を処理するためのバッキング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コンポーネントの使用方法の詳細は、第13章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。

28.8 休日、読取り専用機能および時間軸の指定

休業日を表示したり、ユーザーとの対話機能を無効にしたり、時間軸を指定するようにガント・チャートをカスタマイズしたりできます。

28.8.1 ガント・チャートでの休日の指定

ガント・チャートで休日を指定できます。休日は、デフォルトでは影付きのグレーで表示されますが、休日に使用するカスタム・カラーを選択できます。

28.8.1.1 曜日を休日として指定する方法

特定の曜日が毎週の休業日である場合、その曜日を休業日のカテゴリとして指定できます。

曜日を休日として指定する手順:

  1. 構造ウィンドウでガント・チャートのノードを右クリックし、「プロパティに移動」を選択します。

  2. プロパティ・インスペクタの「外観」カテゴリのNonWorkingDaysOfWeekフィールドで、各週の休日として指定する曜日の文字列を入力します。たとえば、土曜日と日曜日を休日として指定するには、"sat sun"と入力します。

    または、バッキングBeanにメソッドを作成し、プログラムで休日を指定することもできます。たとえば、バッキングBeanのgetNonWorkingDaysOfWeekという名前のメソッドにコードを入れる場合、nonWorkingDaysOfWeek属性の設定は、"#{myBackingBean.nonWorkingDays}"になります。例28-19に、バッキングBeanのサンプル・コードを示します。

    例28-19 休日を指定するためのバッキングBean

    public int[] getNonWorkingDaysOfWeek(){  if (locale == Locale.EN_US
        return new int[] {Calendar.SATURDAY, Calendar.SUNDAY};  else    .......}
    
  3. オプションで、NonWorkingDaysColorフィールドにカスタム・カラーを指定します。この属性に指定する値は、16進の色の文字列です。

28.8.1.2 特定の日付を休日として指定する方法

個々の曜日では不十分な場合、ガント・チャートで特定の日付を休日として入力できます。

特定の日付を休日として指定する手順:

  1. 構造ウィンドウでガント・チャートを右クリックし、「プロパティに移動」を選択します。

  2. プロパティ・インスペクタで、「外観」属性カテゴリを選択します。

  3. nonWorkingDaysフィールドに、休日として指定する日付の文字列を入力します。たとえば、"2008-07-04 2008-11-28 2008-12-25"です。

    または、バッキングBeanにメソッドを作成し、プログラムで休日を指定して、柔軟性を高めることもできます。たとえば、バッキングBeanのgetNonWorkingDaysという名前のメソッドにコードを入れる場合、nonWorkingDays属性の設定は、"#{myBackingBean.nonWorkingDays}"になります。

  4. オプションで、nonWorkingDaysColorフィールドにカスタム・カラーを指定します。この属性に指定する値は、16進の色の文字列です。

28.8.2 ガント・チャート機能に読取り専用の値を適用する方法

ガント・チャートとユーザーとの対話は、featuresOffプロパティで読取り専用の値を指定するように設定することでカスタマイズして無効にすることができます。表28-5に、ガント・チャート・タイプの有効な値と無効にされた機能を示します。

表28-5 読取り専用属性の有効な値

無効にされる機能

asListMenu

すべてのガント・チャートの「リストとして表示」メニュー項目。

asHierMenu

すべてのガント・チャートの「階層として表示」メニュー項目。

clipboard

すべてのガント・チャートのタスクの切取り、コピーおよび貼付け。

clipboardMenu

すべてのガント・チャートの「切取り」、「コピー」および「貼付け」メニュー項目。

clipboardToolbar

すべてのガント・チャートの「切取り」、「コピー」および「貼付け」ツールバー項目。

clipboardRightMenu

すべてのガント・チャートの「切取り」、「コピー」および「貼付け」右メニュー項目。

collapseAllBelowMenu

すべてのガント・チャートの「下をすべて縮小」メニュー項目。

collapseAllMenu

すべてのガント・チャートの「すべて縮小」メニュー項目。

columnsMenu

すべてのガント・チャートの「列」メニュー項目。

createResourceMenu

リソース使用率およびスケジュール・ガント・チャートの「リソースの作成」メニュー項目。

createResourceMT

リソース使用率およびスケジュール・ガント・チャートの「リソースの作成」メニュー項目およびツールバー項目。

createResourceToolbar

リソース使用率およびスケジュール・ガント・チャートの「リソースの作成」ツールバー項目。

createTaskMenu

プロジェクトおよびスケジュール・ガント・チャートの「タスクの作成」メニュー。

createTaskMT

プロジェクトおよびスケジュール・ガント・チャートの「タスクの作成」メニューおよびツールバー。

createTaskToolbar

プロジェクトおよびスケジュール・ガント・チャートの「タスクの作成」ツールバー。

deleteMenu

プロジェクトおよびスケジュール・ガント・チャートの「削除」メニュー項目。

deleteMenu

プロジェクトおよびスケジュール・ガント・チャートの「削除」メニュー、右メニューおよびツールバー項目。

deleteRightMenu

プロジェクトおよびスケジュール・ガント・チャートの「削除」右メニュー項目。

deleteToolbar

プロジェクトおよびスケジュール・ガント・チャートの「削除」ツールバー項目。

dependencyLines

プロジェクトおよびスケジュール・ガント・チャートの依存関係線の表示および非表示。

edit

すべてのガント・チャートのデータ・モデルへの変更。

editMenu

すべてのガント・チャートの「編集」メニュー項目。

expandAllBelowMenu

すべてのガント・チャートの「下をすべて展開」メニュー項目。

expandAllMenu

すべてのガント・チャートの「すべて展開」メニュー項目。

expandMenu

すべてのガント・チャートの「展開」メニュー項目。

filter

すべてのガント・チャートのツールバーのデータ・フィルタ操作の非表示。

goToDateMenu

すべてのガント・チャートの「日付へ移動」メニュー項目。

indenting

プロジェクトおよびスケジュール・ガント・チャートのタスクのインデントおよびアウトデント。

indentingMenu

「インデント」および「アウトデント」メニュー項目: プロジェクト・ガント・チャートのタスク、およびスケジュール・ガント・チャートとリソース使用率ガント・チャートのリソース。

indentingMenus

すべてのガント・チャートの「インデント」および「アウトデント」メニュー、ツールバーおよび右メニュー項目。

indentingRightMenu

すべてのガント・チャートの「インデント」および「アウトデント」右メニュー項目。

indentingToolbar

すべてのガント・チャートの「インデント」および「アウトデント」ツールバー項目。

legend

すべてのガント・チャートの凡例およびタスク情報の非表示および表示。

legendMenu

すべてのガント・チャートの「凡例の非表示」および「凡例の表示」メニュー項目。

legendToolbar

すべてのガント・チャートの「凡例の非表示」および「凡例の表示」ツールバー項目。

linking

プロジェクトおよびスケジュール・ガント・チャートのタスクのリンクおよびリンク解除。

linkingMenu

プロジェクトおよびスケジュール・ガント・チャートの「リンク」および「リンク解除」メニュー項目。

linkingMenus

プロジェクトおよびスケジュール・ガント・チャートの「リンク」および「リンク解除」メニュー、右メニューおよびツールバー項目。

linkingRightMenu

プロジェクトおよびスケジュール・ガント・チャートの「リンク」および「リンク解除」右メニュー項目。

linkingToolbar

プロジェクトおよびスケジュール・ガント・チャートの「リンク」および「リンク解除」ツールバー項目。

listPaneMenu

すべてのガント・チャートの「リスト・ペイン」メニュー項目。

print

すべてのガント・チャートの印刷タスク。

printMenu

すべてのガント・チャートの「印刷」メニュー項目。

printToolbar

すべてのガント・チャートの「印刷」ツールバー項目。

properties

すべてのガント¥チャートのプロパティ・ダイアログを表示します。

propertiesMenu

すべてのガント・チャートの「プロパティ」メニュー項目。

propertiesRightMenu

すべてのガント・チャートの「プロパティ」右メニュー項目。

resourceMenu

リソース使用率およびスケジュール・ガント・チャートの「リソース」メニュー項目。

snapToMenu

スケジュール・ガント・チャートの「スナップ」メニュー項目。

snapToRightMenu

スケジュール・ガント・チャートの「スナップ」右メニュー項目。

split

プロジェクト・ガント・チャートのタスクの分割およびマージ。

splittingMenu

プロジェクト・ガント・チャートの「分割」および「マージ」メニュー項目。

splittingMenus

プロジェクト・ガント・チャートの「分割」および「マージ」メニュー、右メニューおよびツールバー項目。

splittingRightMenu

プロジェクト・ガント・チャートの「分割」および「マージ」右メニュー項目。

splittingToolbar

プロジェクト・ガント・チャートの「分割」および「マージ」ツールバー項目。

taskMenu

プロジェクトおよびスケジュール・ガントの「タスク」メニュー。

timeAxisMenu

すべてのガント・チャートの「時間軸」メニュー項目。

timeBucketMenu

リソース使用率ガント・チャートの「時間バケット」メニュー項目。

undo

すべてのガント・チャートの元に戻すおよびやり直しタスク。

undoMenu

すべてのガント・チャートの「元に戻す」および「やり直し」メニュー項目。

updateResourceMenu

スケジュール・ガント・チャートの「リソースの更新」メニュー項目。

updateTaskMenu

プロジェクトおよびスケジュール・ガント・チャートの「タスクの更新」メニュー項目。

updateTaskMT

プロジェクトおよびスケジュール・ガントの「タスク編集の更新」項目、「タスクの更新」ツールバー項目および右メニュー項目。

updateTaskRightMenu

プロジェクトおよびスケジュール・ガント・チャートの「タスクの更新」右メニュー項目。

updateTaskToolbar

プロジェクトおよびスケジュール・ガント・チャートの「タスクの更新」ツールバー項目。

undoToolbar

すべてのガント・チャートの「元に戻す」および「やり直し」ツールバー項目。

view

すべてのガント・チャートでのリストとして表示、階層として表示、列、展開および縮小タスク。

viewMenu

すべてのガント・チャートの「表示」メニュー項目。

zoom

すべてのガント・チャートのズーム・レベルへの変更。

zoomToolbar

すべてのガント・チャートの「ズーム」メニュー項目。

zoomToToolbar

すべてのガント・チャートの「ズームしてあわせる」メニュー・ツールバー項目。


ガント・チャート機能に読取り専用の値を設定する手順:

  1. 構造ウィンドウでガント・チャートのノードを右クリックし、「プロパティに移動」を選択します。

  2. プロパティ・インスペクタの「動作」属性カテゴリで、featuresOff属性に無効にするガント・チャート機能を指定する1つ以上の文字列値を入力します。

    たとえば、データ・モデル編集、印刷またはガント・チャートのズーム・レベル変更のためのユーザーとの対話を無効にするには、featuresOff属性をedit print zoomのように設定します。

    または、バッキングBeanにメソッドを作成し、プログラムで機能を無効にすることもできます。たとえば、バッキングBeanのwhatToTurnOffという名前のメソッドにコードを入れる場合、featuresOff属性の設定は、"#{BackingBean.whatToTurnOff}"になります。

28.8.3 ガント・チャートの時間軸のカスタマイズ方法

各ガント・チャートは、主時間軸と副時間軸を使用して作成されます。各時間軸には、時間のレベルを主または副で示すファセットがあります。すべてのガント・チャートのデフォルトの時間軸設定は次のとおりです。

  • 主時間軸: 週

  • 副時間軸: 日

時間軸の設定をカスタマイズできます。ただし、主軸は副軸より高い時間レベルに設定する必要があります。次に、dvt:timeAxisコンポーネントのscaleの設定値を高いものから順にリストします。

  • twoyears

  • year

  • halfyears

  • quarters

  • twomonths

  • months

  • twoweeks

  • weeks

  • days

  • sixhours

  • threehours

  • hours

  • halfhours

  • quarterhours

例28-25に、monthsを主時間軸、weeksを副時間軸として使用するガント・チャートの時間軸を設定するサンプル・コードを示します。

例28-20 monthsとweeksに設定したガント・チャートの時間軸

<f:facet name="major">
  <dvt:timeAxis scale="months"/>
</f:facet>
<f:facet name="minor">
  <dvt:timeAxis scale="weeks"/>
</f:facet>

主軸および副軸に指定した時間単位は、ガント・チャートの初期表示にのみ適用されます。実行時に、ユーザーは時間軸をズーム・インまたはズーム・アウトして別のレベルの時間単位で表示できます。

28.8.3.1 カスタム時間軸の作成および使用方法

ガント・チャートのカスタム時間軸を作成し、その軸をdvt:timeAxisscale属性で指定できます。カスタム時間軸は、実行時に「タイム・スケール」ダイアログに追加されます。

カスタム時間軸を作成し使用する手順:

  1. CustomTimescale.javaインタフェースを実装して、時間軸を作成するためにgetNextDate(Date currentDate)メソッドをループでコールします。例28-21に、インタフェースのサンプル・コードを示します。

    例28-21 カスタム日付を作成するインタフェース

    public interface CustomTimescale
    {
        public String getScaleName();
        public Date getPreviousDate(Date ganttStartDate);
        public Date getNextDate(Date currentDate);
        public String getLabel(Date date);
    }
    
  2. 構造ウィンドウでガント・チャートのノードを右クリックし、「プロパティに移動」を選択します。

  3. プロパティ・インスペクタの「その他」の属性カテゴリで、「CustomTimeScales」属性に、カスタム時間軸にインタフェースの実装を登録します。

    customTimeScales属性の値は、java.util.Mapオブジェクトです。指定したマップ・オブジェクトには、キー/値のペアが含まれます。キーはタイム・スケール名(fiveyears)で、値はCustomTimeScale.javaインタフェースの実装です。次に例を示します。

    customTimesScales="#{project.customTimescales}"
    
  4. また、プロパティ・インスペクタで、主および副時間軸の「スケール」属性を設定し、ズームするための「ZoomOrder」属性をカスタム・タイム・スケールに指定します。例28-22に、threeyears副時間軸とfiveyears主時間軸を設定するためのサンプル・コードを示します。

    例28-22 カスタム時間軸

    <f:facet name="major">
      <dvt:timeAxis scale="fiveyears" id="ta1" zoomOrder="fiveyears threeyears years halfyears quarters months weeks days hours"/>
    </f:facet>
    <f:facet name="minor">
      <dvt:timeAxis scale="threeyears" id="ta2"/>
    </f:facet>
    

28.9 ガント・チャートへのインタラクティブ機能の追加

ガント・チャートは、ページ・コントロール、同期スクロールおよびデータの表領域から外部形式へのエクスポートなどのインタラクティブ機能をサポートするように構成できます。

28.9.1 ガント・チャートでのページ・コントロールの構成

ガント・チャート表領域では、デスクトップ・アプリケーションとタッチ装置のモバイル・ブラウザの両方に対して、縦のスクロール機能のかわりにページ・コントロールを使用できます。このコントロールは、データ・フェッチ・サイズを超える行が存在し、かつコンポーネントがそれを含むレイアウト・コンポーネントによって拡大されない場合にのみ使用できます。ページ・コントロールは、図28-11に示すように、表領域のフッターとして表示されます。

図28-11 ガント・チャートのページ・コントロール

ガント・チャートのページ・コントロール

ADF Faces Webアプリケーションを開発している場合、ガント・チャートの表領域ではデフォルトで、フェッチしているデータのサイズを超えるデータを表示するために縦のスクロール・バーが使用されます。schedulingGanttprojectGanttまたはresourceUtilizationGanttコンポーネントの表領域に、かわりにページ・コントロールを構成するには、scrollPolicy属性をpageに設定します。次に例を示します。

scrollPolicy="page"

ただし、標準ADF Faces Webアプリケーションはモバイル・ブラウザで動作しますが、ユーザーの操作が異なり、スクリーン・サイズが制限されるため、アプリケーションをモバイル・ブラウザで実行する必要がある場合は、タッチ装置に固有のバージョンのページを作成する必要があります。詳細は、付録D「ADF Facesを使用したタッチ装置のWebアプリケーションの作成」を参照してください。

デフォルトでは、モバイル・デバイスにレンダリングする場合、ガント・チャートの表領域には、ユーザーが特定の行のページにジャンプできるページ・コントロールが表示されます。モバイル・デバイスに表示するすべてのガント・チャートには、次の処理が必要です。

  • ガント・チャート・コンポーネントをフロー・コンテナ(つまり、子を拡大しないコンポーネント)の中に配置します。フロー・コンテナ・コンポーネントの詳細は、第8.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。

  • scrollPolicy属性をauto(ページがデスクトップ・デバイスでも実行される場合)、またはpage(ページがモバイル・デバイスのみで実行される場合)に設定します。

ガント・チャートがフロー・コンテナの中にない場合、または属性が正しく設定されていない場合は、ページではなくスクロールバーが表示されます。

28.9.2 ガント・チャート間の同期スクロールの構成

2つのガント・チャートのチャート側間で横方向の同期スクロールを構成できます。たとえば、図28-12に示されているように、プロジェクト・ガント・チャートとリソース使用率ガント・チャートのスクロールバーを同期して、同じプロジェクトのタスクとリソースが表示されるようにすることが必要な場合があります。

図28-12 ガント・チャート間で同期されたスクロール

ガント・チャート間で同期されたスクロール

ガント・チャート間で同期されたスクロールを構成するには、af:clientListenerコンポーネントを使用して、スクロール対象のガント・チャートのチャート側でchartHorizontalScrollイベントをリスニングし、他のガント・チャートでスクロール位置を設定します。

この例では、インラインJavaScriptを使用して、af:resourceタグ内で同期スクロールのためのメソッドを定義しています。例28-23に、同期スクロール・メソッドのコードを示します。詳細は、3.3項「JavaScriptのページへの追加」を参照してください。

例28-23 同期スクロール・メソッドのサンプル・コード

<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

例28-24に示されている両方のガント・チャートのコードでは、ガント・チャートのchartHorizontalScrollタイプのscrollEventをリスニングするclientListenerを指定し、例28-23af:resourceコンポーネントで定義されているhandleTopScrollメソッドおよびhandleBottomScrollメソッドを呼び出しています。

例28-24 ガント・チャートで同期スクロールを使用するためのJSFページのサンプル・コード

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

28.9.3 ガント・チャート・データの外部形式へのエクスポート

プロジェクト、スケジューリングまたはリソース使用率ガント・チャートの表領域から、データをMicrosoft Excelスプレッドシートまたはカンマ区切り形式(CSV)ファイルにエクスポートできます。ユーザーが表をエクスポートできるようにするには、エクスポートの起動に使用するアクション・ソース(ボタンやリンクなど)を作成し、exportCollectionActionListenerコンポーネントを追加して、エクスポートするデータに関連付けます。exportCollectionActionListenerを構成するときに、ソース表のすべての行をエクスポートするか、ユーザーが選択した行のみをエクスポートするかを指定します。詳細は、10.11.1項「表、ツリーまたはツリー表データの外部形式へのエクスポート方法」を参照してください。

28.10 ガント・チャートの印刷

ADFのガント・チャートには、書式設定されたオブジェクト(FO)を生成するヘルパー・クラス(GanttPrinter)が用意されており、XML Publisherと連動してPDFファイルが生成されます。

28.10.1 印刷オプション

通常、GanttPrinterクラスでは、ガント・チャートのコンテンツが画面に表示されたとおりに印刷されます。たとえば、ガント・チャートで凡例を非表示にすると、凡例は印刷されません。同様に、「表示」メニューの「リスト・ペイン」セクションで列を選択解除した場合、その列はガント・チャートで非表示となり、列の可視性印刷オプションを利用しないかぎり、印刷にも表示されません。

GanttPrinterクラスでは、次の印刷オプションが使用できます。

  • 列の可視性: setColumnVisibleメソッドでは、ガント・チャートのリスト領域の個々の列を印刷出力に表示するかどうかを制御できます。

    たとえば、ガント・チャートのリスト領域の最初の列を非表示にするには、_printer.setColumnVisible(o, false);というコードを使用します。メソッドの最初のパラメータはゼロベースの列の索引で、2番目のパラメータは印刷されたガント・チャートに列を表示するかどうかを示します。

  • マージン: GanttPrintersetMarginメソッドでは、次のコードで示すように、上、下、左および右マージンをピクセルで指定できます。ここで、_printerGanttPrinterクラスのインスタンスです。

    _printer.setMargin(25, 16, 66, 66);

  • ページ・サイズ: GanttPrintersetPageSizeメソッドでは、次のコードで示すように、印刷されたページの高さと幅をピクセルで指定できます。ここで、_printerGanttPrinterのインスタンスです。

    _printer.setPageSize (440, 600);

  • 期間: GanttPrinterクラスのsetStartTimeおよびsetEndTimeでは、印刷するガント・チャートの期間を指定できます。

    例28-25に、ガント・チャートの特定の期間を印刷用に設定するサンプル・コードを示します。startDateendDateは日付を表す変数で、_printerGanttPrinterクラスのインスタンスです。

例28-25 ガント・チャートの印刷用に期間オプションを設定するコード

_printer.setStartTime(startDate);
_printer.setEndTime(endDate);

28.10.2 印刷イベントを処理するアクション・リスナー

ガント・チャートのツールバーには印刷ボタンがあり、印刷アクションが開始されます。ガント・チャートを印刷するには、印刷イベントを処理するActionListenerを作成する必要があります。ActionListenerのコードには、次のプロセスを含める必要があります。

  1. サーブレットの出力ストリームへのアクセス。

  2. FOの生成。このプロセスには、GanttPrinterのインスタンスの作成と、使用する印刷オプションのコードの記述が含まれます。

  3. PDFの生成。

例28-26に、印刷イベントを処理するActionListenerのコードを示します。このリスナーには、GanttPrinterヘルパー・クラスで使用できるすべての印刷オプションの設定が含まれます。

例28-26 ガント・チャートの印刷イベントを処理するサンプルActionListener

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();
   } 
} 

28.11 ドロップ・ターゲットまたはドラッグ・ソースとしてのガント・チャートの使用

ユーザーがコレクションからアイテム(表から行など)をドラッグし、ツリーなどの別のコレクション・コンポーネントにドロップできるドラッグ・アンド・ドロップ機能を追加できます。プロジェクト・ガント・チャート・コンポーネントおよびスケジュール・ガント・チャート・コンポーネントは、ADFの表またはツリー表コンポーネントのドラッグ・ソースおよびドロップ・ターゲットとして有効にできます。リソース使用率ガント・チャート・コンポーネントは、ドロップ・ターゲットとしてのみ有効にできます。

アプリケーションでは、af:collectionDragSource動作タグまたはaf:collectionDropTarget動作タグをガント・タグの子として追加して、ドラッグ・ソースまたはドロップ・ターゲットとしてガント・チャート・コンポーネントを登録する必要があります。たとえば、af:collectionDragSourceを使用して、プロジェクト・ガント・チャート・タスクが表領域から別の表にドラッグされたときに起動されるドロップ・リスナーを登録し、表領域からタスクの表にドラッグされたタスクのあるプロジェクト・ガント・チャートを表示できます。

図28-13 ドラッグ元としてのプロジェクト・ガント・チャート

ドラッグ・ソースとしてのプロジェクト・ガント・チャート

表28-27に、プロジェクト・ガント・チャートにドラッグ・アンド・ドロップ機能を追加するサンプル・コードを示します。

例28-27 ドラッグ・アンド・ドロップ機能を追加するサンプル・コード

<dvt:projectGantt value="#{test.treeModel}"
    .............
    <af:collectionDragSource actions="COPY MOVE" modelName="treeModel"  />
</dvt:projectGantt>

例28-28に、ドロップ・イベントを処理するリスナー・メソッドのサンプル・コードを示します。

例28-28 コレクションのdropListenerのイベント・ハンドラ・コード

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

コレクションのドラッグ・アンド・ドロップ機能の追加の詳細は、35.4項「コレクションのドラッグ・アンド・ドロップ機能の追加」を参照してください。