| Oracle® Fusion Middleware Oracle Application Development FrameworkによるFusion Webアプリケーションの開発 12c (12.1.2) E48099-02 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development FrameworkによるFusion Webアプリケーションの開発 12c (12.1.2) E48099-02 |
|
前 |
次 |
この章では、ADFビジネス・コンポーネントでモデル化されたデータからガント・チャートおよび時系列を作成する方法について説明します。これらの作成には、Fusion WebアプリケーションのADFデータ・コントロールとADF Facesコンポーネントを使用します。具体的には、ADFデータ視覚化コンポーネントのprojectGantt、resourceUtilizationGantt、schedulingGanttおよびtimelineを使用して、ビジネス・データを視覚的に表現するガント・チャートと時系列を作成する方法について説明します。ここでは、ADFデータ・コントロールを使用して、これらのコンポーネントをデータ優先開発で作成する方法について説明します。
簡単なUI優先開発を使用してページを設計する場合は、ガント・チャートや時系列をページに追加してから、データ・バインディングを構成してください。ガント・チャートおよび時系列コンポーネントのデータ要件、タグ構造、および外観と動作をカスタマイズするためのオプションの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「ガント・チャート・コンポーネントの使用方法」の章と「時系列コンポーネントの使用方法」の章を参照してください。
この章には次の項が含まれます:
ADFデータ視覚化コンポーネントは、ビジネス・データを視覚的に表示、分析するための幅広いグラフィック機能と表機能を提供します。コンポーネントの外観は表示するデータに応じて決まるため、コンポーネントをレンダリングするには、各コンポーネントをデータにバインドしておく必要があります。
ADFガント・チャートには、3種類のコンポーネントがあります。プロジェクト・ガント・チャートはプロジェクト管理に使用し、スケジュール・ガント・チャートはリソースのスケジュールに使用し、リソース使用率ガント・チャートはリソースのメトリックを表示するために使用します。すべてのガント・チャートは、2つのリージョンを表示します。これらのリージョンは、1つの分割線で結合されています。リスト・リージョンには、タスクまたはリソースのリストが表示され、チャート・リージョンには、経時的なグラフでタスク進行状況、リソース使用率またはリソース進行状況が表示されます。
対話型のデータ視覚化ツールであるADF時系列を使用すると、ユーザーはイベントを時間順に表示して、定義された時間範囲内で時間を進めたり戻したりできます。各イベントは時系列アイテムとして表され、単純なADFコンポーネントを使用してテキストやイメージなどの情報を表示したり、リンクなどのアクションを提供したりします。2つの時系列を構成して2系列のイベントを表示し、関連する情報を並べて比較することもできます。
接頭辞dvt:は、各データ視覚化コンポーネント名の先頭に付いて、そのコンポーネントがADFデータ視覚化ツール(DVT)のタグ・ライブラリに属することを示します。
データ視覚化コンポーネントのユースケースと例の詳細は、次を参照してください。
ガント・チャート・コンポーネント: 『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のガント・チャート・コンポーネントのユースケースと例に関する項。
時系列コンポーネント: 『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の時系列のユースケースと例に関する項。
魅力的な外観を備えたデータ視覚化コンポーネントを使用すると、エンド・ユーザーは複雑なビジネス・データを理解して分析できるようになります。このコンポーネントは機能が豊富で、そのまますぐに使用できる対話型のサポートも用意されています。エンド・ユーザーの詳細な説明と各コンポーネントのプレゼンテーション機能の詳細は、次を参照してください。
ガント・チャート・コンポーネント: 『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のエンド・ユーザー機能とプレゼンテーション機能に関する項。
時系列コンポーネント: 『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のエンド・ユーザー機能とプレゼンテーション機能に関する項。
データ視覚化コンポーネントをデータ・バインドする前に、その他のOracle ADF機能について理解しておいてください。また、いったんデータ視覚化コンポーネントをページに追加すると、検証やアクセシビリティなどの機能を追加する必要があることに気付く場合があります。データ視覚化コンポーネントで使用されるその他の機能へのリンクは、次のとおりです。
部分ページ・レンダリング: データ視覚化コンポーネントをリフレッシュして、ページの別のコンポーネントで実行されたアクションに基づく新しいデータを表示できます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「部分ページ・コンテンツの再レンダリング」の章を参照してください。
パーソナライズ: ユーザーは実行時にデータ視覚化コンポーネントの表示を変更できますが、ユーザーがカスタマイズできるようにアプリケーションを構成していないかぎり、ユーザーがページを終了するとそれらの値は保持されません。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「JSFページでのユーザー・カスタマイズの許可」の章を参照してください。
アクセシビリティ: データ視覚化コンポーネントは、デフォルトでアクセス可能です。アプリケーションの各ページは、スクリーン・リーダーでのアクセスが可能になるように作成できます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「アクセス可能なADF Facesページの開発」の章を参照してください。
スキンおよびスタイル: アプリケーションに適用するADFスキンを使用するか、スタイル関連のプロパティ(styleClassまたはinlineStyle)を使用してCSSスタイル・プロパティを直接適用することで、データ視覚化コンポーネントの外観をカスタマイズできます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「スタイルおよびスキンを使用した外観のカスタマイズ」の章を参照してください。
プレースホルダ・データ・コントロール: 最終的にページのデータ視覚化コンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールの使用を検討します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、第19章「プレースホルダ・データ・コントロールによるページの設計」を参照してください。
ガント・チャートは、横軸上に表示される棒グラフの1種です。このグラフは、プロジェクトの計画および追跡において、開始と終了が明確な時間枠内でタスクまたはリソースを示すために使用されます。
ガント・チャートを作成する場合は、次のタイプから選択できます。
プロジェクト
プロジェクト・ガント・チャートは、タスクを垂直に示し、各タスクの期間を水平な時間軸上に棒として示します。
リソースの使用率
リソース使用率ガント・チャートは、リソースの割当てが超過なのか未満なのかを図示します。リソースを縦に示し、横方向の時間軸にその割当てとキャパシティ(オプション)を示します。
スケジューリング
このガント・チャートは手動のスケジュール表をベースにし、リソースを縦に表示し、対応するアクティビティを横方向の時間軸に表示します。リソースの例には、人、機械、部屋などがあります。
プロジェクト・ガント・チャートでは、タスクの値を指定する必要があります。オプションで、分割タスク、サブタスク、再帰タスクおよびタスク間の依存性の値も指定できます(データ・コレクションにこの追加情報に対するアクセッサがある場合)。
プロジェクト・ガント・チャートは、全体的な開始時間および終了時間と、主および副時間軸の値に対するデフォルト値を使用して表示されます。プロジェクト・ガント・チャートでは、主時間軸はデフォルトで週に設定され、副時間軸は日に設定されます。
図38-1は、各タスクが入力される1つの注文となっているプロジェクト・ガント・チャートを示しています。分割線の左側のリスト・リージョンには、注文の担当者の名前を示す列と、注文日および出荷日を示す列が表示されます。分割線の右側のグラフ・リージョンでは、各注文の注文日から出荷日までの水平な棒がガント・チャートで表示されています。
データ・コントロールを使用してプロジェクト・ガント・チャートを作成するには、プロジェクト・ガント・チャート・コンポーネントをデータ・コレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。
|
ヒント: また、「コンポーネント」ウィンドウからプロジェクト・ガント・チャート・コンポーネントをドラッグし、「プロジェクト・ガントの作成」ダイアログの入力を完了することで、プロジェクト・ガント・チャートを作成することもできます。この方法では、コンポーネントをデータにバインドする前に、ガント・チャートのユーザー・インタフェースを設計できます。 |
始める前に:
データバインドされたガント・チャートについて理解しておいてください。詳細は、38.2項「データバインドされたガント・チャートの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、38.1.3項「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
13.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
たとえば、図38-1に示すガント・チャートのデータ・ソースは、ADF DVTコンポーネントについてのSummitサンプル・アプリケーションに含まれる、出荷日と配達日を含む出荷注文を表すビュー・オブジェクトから取得しています。
JSFページを作成します。作成手順は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項を参照してください。
「データ・コントロール」パネルを使用して、プロジェクト・ガント・チャートを作成するには:
「データ・コントロール」パネルから、データ・コレクションを選択します。行セット・コレクションを選択するか(タスクのフラット・リストを生成)、基本的なツリー・コレクションを選択します(タスクの階層リストを生成)。
図38-2に、「データ・コントロール」パネルでOrderEmployee1コレクションを選択して、注文の出荷の進行状況を表示するプロジェクト・ガント・チャートを作成する例を示します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「ガント」→「プロジェクト」を選択します。
「プロジェクト・ガントの作成」ダイアログの「タスク」ページで、次の属性に対応するデータ・コレクション内の列を選択します。
タスクID: ガント・チャート内のタスクを表す一意のID。
開始時間: タスクの開始時刻。
終了時間: タスクの終了時刻。
タスク・タイプ: ガント・チャートにタスク・バーをレンダリングするときに、そのタスク・バーの外観を指定するために使用するタイプ。タイプをデータ・コレクション内の列にバインドしない場合、すべてのタスクはデフォルトでNormalになります。タスクのタイプは次のとおりです。
Normal: 基本のタスク・タイプ。プレーンな横棒で、タスクの開始時刻、終了時刻および期間を示します。
Summary: タスク(通常は、サブタスク)のグループの開始時刻と終了時刻を示します。サマリー・タスクは移動や伸長できません。ただし、いずれかのサブタスクの日付が変更された場合は、アプリケーションでサマリー・タスクの時間を再計算する必要があります。
Milestone: ガント・チャート内の特定の日付を示します。マイルストン・タスクに関連付けられる日付は1つのみです。マイルストン・タスクは伸長できませんが、移動できます。
「詳細の表示」をクリックして、指定したタスク・タイプごとに、次の属性に対応するデータ・コレクション内の追加の列を選択します。
「実際の開始」および「実際の終了」: これらの属性を指定すると、1つの棒グラフではなく2つの棒グラフが描画されます。1つの棒グラフはベース開始日およびベース終了日を示し、もう1つの棒グラフは実際の開始日および終了日を示します。これは標準タスク・タイプおよびマイルストン・タスク・タイプに適用されます。
%完了: これを指定すると、棒の内側にタスクの完了割合を示す追加の棒が描画されます。
完了: 割合のかわりに、日付を指定できるようになります。これを指定すると、棒の内側に、属性が参照する日付に基づいた完了割合を示す追加の棒が描画されます。
クリティカル: 棒を赤色に変更して、その棒が重要であることを示します。これは標準タスク・タイプ、サマリー・タスク・タイプおよびマイルストン・タスク・タイプに適用されます。
編集可能: タスクの開始日、終了日または期間がチャート・リージョン内でサポートされるかどうかを指定するブール値。
コンテナ: ノード定義がコンテナであるかどうかを指定するブール値。
データ・コレクションにサブタスクに対するアクセッサが含まれている場合は、「サブタスク」ページを使用して、ドロップダウン・リストから「サブタスク・アクセッサ」を選択し、次の属性に対応するデータ・コレクション内の列を選択します。
サブタスクID: データ・コレクション内のサブタスクのリストに対する一意のID。
開始時間: サブタスクの開始時刻。
終了時間: サブタスクの終了時刻。
サブタスク・タイプ: ガント・チャートにサブタスク・バーをレンダリングするときに、そのタスク・バーの外観を指定するために使用するタイプ。タイプをデータ・コレクション内の列にバインドしない場合、すべてのタスクはデフォルトでNormalになります。タスクのタイプは次のとおりです。
Normal: 基本のタスク・タイプ。プレーンな横棒で、タスクの開始時刻、終了時刻および期間を示します。
Summary: タスク(通常は、サブタスク)のグループの開始時刻と終了時刻を示します。サマリー・タスクは移動や伸長できません。ただし、いずれかのサブタスクの日付が変更された場合は、アプリケーションでサマリー・タスクの時間を再計算する必要があります。
Milestone: ガント・チャート内の特定の日付を示します。マイルストン・タスクに関連付けられる日付は1つのみです。マイルストン・タスクは伸長できませんが、移動できます。
サブタスクをバインドしないと、ガント・チャートはタスクの階層ビューをレンダリングできません。サブタスクをバインドすると、ガント・チャートの階層ビューでタスクからサブタスクに向けてドリルダウンできるようになります。
データ・コレクションに依存タスクに対するアクセッサが含まれている場合は、「依存タスク」ページを使用して、ドロップダウン・リストから「依存タスク・アクセッサ」を選択し、次の属性に対応するデータ・コレクション内の列を選択します。
依存性のタイプ: 依存性のタイプを指定します。有効な値は、start-start、start-finish、finish-finish、finish-start、start-before、start-together、finish-afterおよびfinish-togetherです。
元タスクID: 依存関係内で最初のタスクを指定します。
先タスクID: 依存関係内で最後のタスクを指定します。
データ・コレクションに分割タスクに対するアクセッサが含まれている場合は、「分割タスク」ページを使用して、ドロップダウン・リストから「分割タスク・アクセッサ」を選択し、次の属性に対応するデータ・コレクション内の列を選択します。
分割タスクID: 2つの横棒(通常は、線でリンクされる)に分割されたタスクの一意のID。棒の間の時間は、移動時間または停止時間によるアイドル時間を表します。
開始時間: 分割タスクの開始時刻。
終了時間: 分割タスクの終了時刻。
データ・コレクションに再帰タスクに対するアクセッサが含まれている場合は、「再帰タスク」ページを使用して、ドロップダウン・リストから「再帰タスク・アクセッサ」を選択してから、次の属性に対応するデータ・コレクション内の列を選択します。
再帰タスクID: ガント・チャートで繰り返されるタスクの一意のID。タスクの各インスタンスには、固有の開始日と終了日が含まれます。個々の再帰タスクにはオプションでサブタイプを含めることができます。個々の再帰タスクのその他すべてのプロパティには、そのタスクが一部となっているタスクのプロパティが使用されます。ただし、個々の再帰タスクにサブタイプがある場合は、このサブタイプがタスク・タイプをオーバーライドします。
タイプ: 再帰タスクのタイプを指定します。
開始時間: 再帰タスクの開始時刻。
終了時間: 再帰タスクの終了時刻。
「外観」ページで、タスク・バーの「ラベル」に対応する属性と、タスク・バーに関連付けるアイコンを3個まで指定します。
「表の列」セクションで、ガント・チャートのリスト・リージョン内に各行を表示する列を選択します。「新規」アイコンを使用すると、新しい行を追加できます。行を削除するには、「削除」アイコンを使用します。また、矢印アイコンを使用すると、ガント・チャート・リストに表示する列の行の順序を並べ替えできます。
|
注意: 「表の列」セクションで指定する最初の行により、リスト・リージョンの |
各行で、次を指定します。
ラベルの表示: ガント・チャート・リストの列のヘッダーの値を選択します。<default>を選択すると、ヘッダーのテキストはデータ・バインディングから自動的に取得されます。
値バインディング: ガント・チャート・リストの列に使用するデータ・コレクション内の列を選択します。選択できる値は、タスク・グループの場合と同じです。
使用するコンポーネント: ガント・チャート・リストのセルに表示するコンポーネントのタイプを選択します。ADF入力コンポーネントを使用すると、セルが編集可能になるように指定できます。デフォルトは、ADF出力テキスト・コンポーネントです。
「OK」をクリックします。
図38-3に、注文の出荷のデータ・コレクションから、図38-1のプロジェクト・ガント・チャートを作成する際に使用されるダイアログを示します。
「構造」ウィンドウでdvt:projectGanttコンポーネントを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、「共通」セクションを開き、StartTime属性とEndTime属性の日付(yyyy-mm-dd)を指定します。これらの属性は、ガント・チャート・データの期間の開始日と終了日を表します。
指定した日付に応じて、実行時にプロジェクト・ガント・チャートに表示される初期ビューが決定されます。
ガント・チャートに凡例を含めるには、「構造」ウィンドウでプロジェクト・ガント・チャート・ノードを右クリックし、プロジェクト・ガントの中に挿入→「凡例」を選択します。
凡例には、それぞれの記号に関する情報と、各タスク・タイプを表すカラー・コード化された棒が示されます。また、ガント・チャート内で選択されているタスクに関する詳細情報も示されます。
プロジェクト・ガント・チャートの作成後に、「プロパティ」ウィンドウを使用して、追加の属性に値を設定します。ガント・チャートのユースケース、エンド・ユーザー機能とプレゼンテーション機能、タグ構造、ガント・チャートへの特殊機能の追加の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「ガント・チャート・コンポーネントの使用方法」の章を参照してください。
プロジェクト・ガント・チャートを作成するために、「データ・コントロール」パネルからビュー・オブジェクトをドラッグ・アンド・ドロップすると、次の処理が行われます。
ガント・チャートのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
UIコンポーネントに必要なコードをJSFページに追加します。
例38-1は、出荷された注文を表示する図38-1のプロジェクト・ガント・チャート用に生成された行セット・バインディングです。このコード例は、タスクID、開始日および終了日についての属性を持つタスク用に定義したノードを示しています。また、定義された属性のないサブタスク、依存タスク、分割タスクおよび再帰タスク用に定義されたノードもあります。
例38-1 プロジェクト・ガント・チャートのバインディング
<bindings>
<gantt IterBinding="OrderEmployee1Iterator" id="OrderEmployee1"
xmlns="http://xmlns.oracle.com/adfm/dvt"> <ganttDataMap> <nodeDefinition DefName="model.OrderEmployee" type="Tasks"> <AttrNames>
<Item Value="TaskId" type="taskId"/>
<Item Value="StartDate" type="startTime"/>
<Item Value="EndDate" type="endTime"/>
<Item Value="TaskType" type="taskType"/>
</AttrNames>
</nodeDefinition>
<nodeDefinition type="subTasks">
<AttrNames/>
</nodeDefinition>
<nodeDefinition type="Dependents">
<AttrNames/>
</nodeDefinition>
<nodeDefinition type="SplitTasks">
<AttrNames/>
</nodeDefinition>
<nodeDefinition type="RecurringTasks">
<AttrNames/>
</nodeDefinition>
</ganttDataMap>
</gantt>
</bindings>
例38-2に、プロジェクト・ガント・チャートに対してJSFページで生成されるコードを示します。このタグ・コードには、プロジェクト・ガント・チャートの全体的な開始および終了時間に対する設定が含まれています。また、主軸(週)および副軸(日)に対するデフォルトの時間軸の設定も示されています。さらに、ガント・チャートのリスト・リージョンに表示される各列に対する指定もリストされています。
例38-2 プロジェクト・ガント・チャートのJSFページのコード
<dvt:projectGantt id="gantt1" value="#{bindings.OrderEmployee1.projectGanttModel}"
dataChangeListener="#{bindings.OrderEmployee1.projectGanttModel
.processDataChanged}"
var="row"
startTime="2012-03-31" endTime="2012-06-30">
<f:facet name="major">
<dvt:timeAxis scale="weeks" id="ta1"/>
</f:facet>
<f:facet name="minor">
<dvt:timeAxis scale="days" id="ta2"/>
</f:facet>
<f:facet name="nodeStamp">
<af:column
sortProperty="#{bindings.OrderEmployee1.hints.FirstName.name}"
sortable="false"
headerText="#{bindings.OrderEmployee1.hints.FirstName.label}"
id="c1">
<af:outputText value="#{row.FirstName}" id="ot1"/>
</af:column>
</f:facet>
<af:column sortProperty="LastName" sortable="false"
headerText="#{bindings.OrderEmployee1.hints.LastName.label}">
<af:outputText value="#{row.LastName}"/>
</af:column>
<af:column sortProperty="OrderDate" sortable="false"
headerText="#{bindings.OrderEmployee1.hints.OrderDate.label}">
<af:outputText value="#{row.OrderDate}">
<af:convertDateTime
pattern="#{bindings.OrderEmployee1.hints.OrderDate.format}"/>
</af:outputText>
</af:column>
<af:column sortProperty="ShippedDate" sortable="false"
headerText="#{bindings.OrderEmployee1.hints.ShippedDate.label}">
<af:outputText value="#{row.ShippedDate}">
<af:convertDateTime
pattern="#{bindings.OrderEmployee1.hints.ShippedDate.format}"/>
</af:outputText>
</af:column>
<af:column sortProperty="TaskType" sortable="false"
headerText="#{bindings.OrderEmployee1.hints.TaskType.label}">
<af:outputText value="#{row.TaskType}"/>
</af:column>
</projectGantt>
リソース使用率ガント・チャートでは、リソースのID、時間のID、リソース使用率の開始および終了時間を指定する必要があります。オプションで、サブリソースのデータ値を指定できます。
リソース使用率ガント・チャートは、主および副時間軸の値に対するデフォルト値を使用して表示されます。リソース使用率ガント・チャートでは、主時間軸はデフォルトで週に設定され、副時間軸は日に設定されます。
図38-4は、各リソースと、リソースの使用中に表示できる関連付けられたカレンダを示すリソース使用率ガント・チャートを示しています。
データ・コントロールを使用してリソース使用率ガント・チャートを作成するには、リソース使用率コンポーネントをデータ・コレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグしてJSFページにドロップし、宣言的にこの処理を実行できます。
|
ヒント: また、「コンポーネント」ウィンドウからリソース使用率ガント・チャート・コンポーネントをドラッグし、「リソース使用率ガントの作成」ダイアログの入力を完了することで、リソース使用率ガント・チャートを作成することもできます。この方法では、コンポーネントをデータにバインドする前に、ガント・チャートのユーザー・インタフェースを設計できます。 |
始める前に:
データバインドされたガント・チャートについて理解しておいてください。詳細は、38.2項「データバインドされたガント・チャートの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、38.1.3項「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
13.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
たとえば、図38-4に示すガント・チャートのデータ・ソースは、Summit ADF DVTサンプル・アプリケーションのビュー・オブジェクトから取得しています。販売担当者を表すSalesRepViewObj1ビュー・オブジェクトを使用します。このオブジェクトには、注文日と出荷日についてのタイム・バケット・アクセッサと属性を含むSOrdView2ビュー・オブジェクトへのビュー・リンクが含まれています。
JSFページを作成します。作成手順は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項を参照してください。
「データ・コントロール」パネルを使用して、リソース使用率ガント・チャートを作成するには:
「データ・コントロール」パネルから、データ・コレクションを選択します。ガント・チャートでは、行セット・コレクションまたは基本的なツリー・コレクションを選択できます。
図38-5に、「データ・コントロール」パネルでSalesRepViewObj1コレクションを選択して、リソースの使用率を表示するリソース使用率ガント・チャートを作成する例を示します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「ガント」→「リソース使用率」を選択します。
「リソース使用率ガントの作成」ダイアログで、次の属性に対応するデータ・コレクション内の列を選択します。
リソースID: リソースの一意のID。たとえば、ビュー・オブジェクト内で販売責任者を表すIdです。
コンテナ: ブール値。ノード定義がコンテナかどうかを指定します。
「時間バケット」ページでは、リソースに割り当てられた時間バケットを含む「バケット・アクセッサ」ドロップダウン・リストから値を選択し、時間の単位に対応する「バケット日」ドロップダウン・リストから値を選択します。
たとえば、SOrdView2ビュー・オブジェクトには、販売責任者に関連付けられた注文ごとに、受注日と出荷日を表す属性が含まれています。図38-6に、バケット・アクセッサに使用するビュー・オブジェクトを示します。
「バケット・メトリック」リストで、時間バケット内のバーとして表示される属性を指定します。「新規」アイコンを使用して新しい行を追加し、「削除」アイコンを使用して行を削除します。また、矢印アイコンを使用して、ガント・チャート・リージョンに表示する列の行の順序を並べ替えます。
「バケット・メトリック」リストで指定した属性はバーの高さの計算に使用されるため、個々の属性は数値タイプでなければなりません。
「表の列」セクションで、ガント・チャートのリスト・リージョン内に各行を表示する列を選択します。「新規」アイコンを使用すると、新しい行を追加できます。行を削除するには、「削除」アイコンを使用します。また、矢印アイコンを使用すると、ガント・チャート・リストに表示する列の行の順序を並べ替えできます。
|
注意: 「表の列」セクションで指定する最初の行により、リスト・リージョンの |
各行で、次を指定します。
ラベルの表示: ガント・チャート・リストの列のヘッダーの値を選択します。<default>を選択すると、ヘッダーのテキストはデータ・バインディングから自動的に取得されます。
値バインディング: ガント・チャート・リストの列に使用するデータ・コレクション内の列を選択します。選択できる値は、タスク・グループの場合と同じです。
使用するコンポーネント: ガント・チャート・リストのセルに表示するコンポーネントのタイプを選択します。ADF入力コンポーネントを使用すると、セルが編集可能になるように指定できます。デフォルトは、ADF出力テキスト・コンポーネントです。
データ・コレクション内にサブリソースに対するアクセッサが含まれている場合は、「サブリソース」ページを使用して、ドロップダウン・リストから「サブリソース・アクセッサ」を選択し、「リソースID」ドロップダウン・リストからサブリソースの一意のIDを選択します。
「外観」ページで、タスク・バーの「ラベル」に対応する属性を指定します。
「OK」をクリックします。
図38-7に、プロジェクトで使用可能なリソースのデータ・コレクションからリソース使用率ガント・チャートを作成するために使用するダイアログを示します。
「構造」ウィンドウでdvt:resourceUtilizationGanttコンポーネントを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、「共通」セクションを開き、StartTime属性とEndTime属性の日付(yyyy-mm-dd)を指定します。これらの属性は、ガント・チャート・データの期間の開始日と終了日を表します。
指定した日付に応じて、実行時にリソース使用率ガント・チャートに表示される初期ビューが決定されます。
ガント・チャートに凡例を含めるには、「構造」ウィンドウでリソース使用率ガント・チャート・ノードを右クリックし、リソース使用率ガントの中に挿入→「凡例」を選択します。
凡例には、それぞれの記号に関する情報と、各タスクを表すカラー・コード化された棒が示されます。また、ガント・チャート内で選択されているタスクに関する詳細情報も示されます。
リソース使用率ガント・チャートの作成後に、「プロパティ」ウィンドウを使用して、追加の属性に値を設定します。ガント・チャートのユースケース、エンド・ユーザー機能とプレゼンテーション機能、タグ構造、ガント・チャートへの特殊機能の追加の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「ガント・チャート・コンポーネントの使用方法」の章を参照してください。
リソース使用率ガント・チャートを作成するために、「データ・コントロール」パネルからJSFページにビュー・オブジェクトをドラッグ・アンド・ドロップすると、次の処理が行われます。
リソース使用率ガント・チャートのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
UIコンポーネントに必要なコードをJSFページに追加します。
例38-3に、図38-7に示すリソース使用率ガント・チャートに生成された行セット・バインディングを示します。
例38-3 リソース使用率ガント・チャートのバインディングXML
<bindings>
<gantt IterBinding="SalesRepViewObj1Iterator" id="SalesRepViewObj1"
xmlns="http://xmlns.oracle.com/adfm/dvt">
<ganttDataMap>
<nodeDefinition DefName="model.SalesRepViewObj" type="Resources">
<AttrNames>
<Item Value="Id" type="resourceId"/>
</AttrNames>
<Accessors>
<Item Value="SOrdView" type="timeBuckets"/>
</Accessors>
</nodeDefinition>
<nodeDefinition type="TimeBuckets" DefName="model.SOrdView">
<AttrNames>
<Item Value="DateOrderedDay" type="time"/>
<Item type="metric" Value="Total"/>
</AttrNames>
</nodeDefinition>
<nodeDefinition type="Subresources">
<AttrNames/>
</nodeDefinition>
</ganttDataMap>
</gantt>
</bindings>
例38-4に、リソース使用率ガント・チャートに対してJSFページで生成されるコードを示します。このタグ・コードには、リソース使用率ガント・チャートの全体的な開始および終了時間に対する設定が含まれています。これらの設定は手動で編集する必要があります。また、主時間軸(週)および副時間軸(日)に対する時間軸の設定も示されています。さらに、リソース使用率ガント・チャートのリスト・リージョンに表示される各列に対する指定もリストされています。
例38-4 リソース使用率ガント・チャートのJSFページのコード
<dvt:resourceUtilizationGantt id="gantt1"
value="#{bindings.SalesRepViewObj1.resourceUtilizationGanttModel}"
var="row" metrics="#{bindings.SalesRepViewObj1.metrics}"
taskbarFormatManager="#{bindings.SalesRepViewObj1.
resourceUtilizationGanttTaskbarFormatManager}"
startTime="2012-05-09" endTime="2013-05-15"
summary="#{viewcontrollerBundle.RESOURCE_UTILIZATION_GANTT_CHART}">
<f:facet name="major">
<dvt:timeAxis scale="weeks" id="ta1"/>
</f:facet>
<f:facet name="minor">
<dvt:timeAxis scale="days" id="ta2"/>
</f:facet>
<f:facet name="nodeStamp">
<af:column sortProperty="#{bindings.SalesRepViewObj1.hints.FirstName.name}"
sortable="false"
headerText="#{bindings.SalesRepViewObj1.hints.FirstName.label}"
id="c1">
<af:outputText value="#{row.FirstName}"
shortDesc="#{bindings.SalesRepViewObj1.hints.FirstName.tooltip}"
id="ot1"/>
</af:column>
</f:facet>
<af:column sortProperty="#{bindings.SalesRepViewObj1.hints.LastName.name}"
sortable="false"
headerText="#{bindings.SalesRepViewObj1.hints.LastName.label}"
id="c2">
<af:outputText value="#{row.LastName}"
shortDesc="#{bindings.SalesRepViewObj1.hints.LastName.tooltip}"
id="ot2"/>
</af:column>
<af:column sortProperty="#{bindings.SalesRepViewObj1.hints.Email.name}"
sortable="false"
headerText="#{bindings.SalesRepViewObj1.hints.Email.label}"
id="c3">
<af:outputText value="#{row.Email}"
shortDesc="#{bindings.SalesRepViewObj1.hints.Email.tooltip}"
id="ot3"/>
</af:column>
</dvt:resourceUtilizationGantt>
スケジュール・ガント・チャートでは、リソースのID、タスクのID、タスクの開始および終了時間を指定する必要があります。オプションで、サブリソース、再帰タスク、分割タスクおよびタスク間の依存性のデータ値を指定できます。
スケジュール・ガント・チャートは、全体的な開始および終了時間と、主および副時間軸の値に対するデフォルト値を使用して表示されます。スケジュール・ガント・チャートでは、主時間軸はデフォルトで週に設定され、副時間軸は日に設定されます。
図38-8は、各リソースと、そのリソースが担当するすべての注文をリストするスケジュール・ガント・チャートを示しています。プロジェクト・ガント・チャートでは各タスクが個別の線上にリストされますが、スケジュール・ガント・チャートでは特定のリソースのすべてのタスクが同じ線上に表示されます。
データ・コントロールを使用してスケジュール・ガント・チャートを作成するには、schedulingGanttタグをデータ・コレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。
始める前に:
データバインドされたガント・チャートについて理解しておいてください。詳細は、38.2項「データバインドされたガント・チャートの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、38.1.3項「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
13.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
たとえば、図38-8に示すガント・チャートのデータ・ソースは、Summit ADF DVTサンプル・アプリケーションのビュー・オブジェクトから取得しています。販売担当者を表すSalesRepViewObj1ビュー・オブジェクトを使用します。このオブジェクトには、注文日と出荷日についてのタスク・アクセッサと属性を含むSOrdView2ビュー・オブジェクトへのビュー・リンクが含まれています。
JSFページを作成します。作成手順は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項を参照してください。
「データ・コントロール」パネルを使用して、スケジュール・ガント・チャートを作成するには:
「データ・コントロール」パネルから、データ・コレクションを選択します。ガント・チャートでは、行セット・コレクションまたは基本的なツリー・コレクションを選択できます。
図38-9に、SalesRepViewObj1データ・コレクションを選択して、スケジュール・ガント・チャートを作成する例を示します。このチャートには、各販売担当者が管理を担当する注文が表示されます。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「ガント」→「スケジュール」を選択します。
「スケジュール・ガントの作成」ダイアログで、次の属性に対応するデータ・コレクション内の列を選択します。
リソースID: スケジュール・ガント・チャートでリソースを表す一意のID。
作業開始時間: スケジュール・ガント・チャートの作業開始日。
作業終了時間: スケジュール・ガント・チャートの作業終了日。
作業曜日: 作業曜日のリストを指定します。
コンテナ: ブール値。ノード定義がコンテナかどうかを指定します。
「タスク」ページで、ドロップダウン・リストから「タスク・アクセッサ」を選択して、次の属性に対応するデータ・コレクション内の列を選択します。
タスクID: ガント・チャート内のリソースに関連付けられたタスクの一意のID。
タスク・タイプ: ガント・チャートにタスク・バーをレンダリングするときに、そのタスク・バーの外観を指定するために使用するタイプ。タイプをデータ・コレクション内の列にバインドしない場合、すべてのタスクはデフォルトでScheduledになります。
開始時間: タスクの開始時刻。
終了時間: タスクの終了時刻。
起動時間: タスクを開始するまでにかかる時間。
シャットダウン時間: タスクが完了してから終了するまでの時間。
たとえば、SOrdView2ビュー・オブジェクトには、販売責任者に関連付けられた注文ごとに、受注日と出荷日を表す属性が含まれています。図38-10に、タスク・アクセッサに使用するビュー・オブジェクトを示します。
データ・コレクションに依存タスクに対するアクセッサが含まれている場合は、「依存タスク」ページを使用して、「依存タスク・アクセッサ」を選択し、次の属性に対応するデータ・コレクション内の列を選択します。
依存性のタイプ: 依存性のタイプを指定します。有効な値は、start-start、start-finish、finish-finish、finish-start、start-before、start-together、finish-afterおよびfinish-togetherです。
元タスクID: 依存関係内で最初のタスクを指定します。
先タスクID: 依存関係内で最後のタスクを指定します。
各依存タスクは、それらのタスクの終了時刻と開始時刻を関連付けることでリンクします。
データ・コレクションに分割タスクに対するアクセッサが含まれている場合は、「分割タスク」ページを使用して、「分割タスク・アクセッサ」を選択し、次の属性に対応するデータ・コレクション内の列を選択します。
分割タスクID: 2つの横棒(通常は、線でリンクされる)に分割されたタスクの一意のID。棒の間の時間は、移動時間または停止時間によるアイドル時間を表します。
開始時間: 分割タスクの開始時刻。
終了時間: 分割タスクの終了時刻。
データ・コレクションに再帰タスクに対するアクセッサが含まれている場合は、「再帰タスク」ページを使用して、ドロップダウン・リストから「再帰タスク・アクセッサ」を選択し、次の属性に対応するデータ・コレクション内の列を選択します。
再帰タスクID: ガント・チャートで繰り返されるタスクの一意のID。タスクの各インスタンスには、固有の開始日と終了日が含まれます。個々の再帰タスクにはオプションでサブタイプを含めることができます。個々の再帰タスクのその他すべてのプロパティには、そのタスクが一部となっているタスクのプロパティが使用されます。ただし、個々の再帰タスクにサブタイプがある場合は、このサブタイプがタスク・タイプをオーバーライドします。
タイプ: 再帰タスクのタイプを指定します。
開始時間: 再帰タスクの開始時刻。
終了時間: 再帰タスクの終了時刻。
データ・コレクション内にサブリソースに対するアクセッサが含まれている場合は、「サブリソース」ページを使用して、ドロップダウン・リストから「サブリソース・アクセッサ」を選択し、サブリソースIDに対応するデータ・コレクション内の列を選択します。このIDは、データ・コレクション内のサブリソースのリストの一意のIDです。
サブリソースをバインドしていないと、ガント・チャートでリソースの階層ビューをレンダリングできなくなります。サブリソースをバインドすると、ガント・チャートの階層ビューで、リソースからサブリソースに向けたドリル操作が可能になります。
「外観」ページで、タスク・バーの「ラベル」に対応する属性と、タスク・バーに関連付けるアイコンを3個まで指定します。
「表の列」セクションでは、分割線の左側のガント・チャートのリスト・リージョンに表示される列を指定します。表示するそれぞれの列に対して、1行の情報を指定します。新規行を追加するには、「新規」アイコンを使用します。ガント・チャート・リストで列を表示する順序のとおりに行を配置するには、矢印アイコンを使用します。各行について、次のアイテムを指定します。
ラベルの表示: ガント・チャート・リストの列のヘッダーの値を選択します。<default>を選択すると、ヘッダーのテキストはデータ・バインディングから自動的に取得されます。
値バインディング: ガント・チャート・リストの列に使用するデータ・コレクション内の列を選択します。選択できる値は、タスク・グループの場合と同じです。
使用するコンポーネント: ガント・チャート・リストのセルに表示するコンポーネントのタイプを選択します。デフォルトは、「ADF出力テキスト」コンポーネントです。
「OK」をクリックします。
図38-11に、注文の出荷を担当する販売担当者のデータ・コレクションからスケジュール・ガント・チャートを作成する際に使用されるダイアログを示します。
「構造」ウィンドウでdvt:schedulingGanttコンポーネントを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、「共通」セクションを開き、StartTime属性とEndTime属性の日付(yyyy-mm-dd)を指定します。これらの属性は、ガント・チャート・データの期間の開始日と終了日を表します。
指定した日付に応じて、実行時にスケジュール・ガント・チャートに表示される初期ビューが決定されます。
ガント・チャートに凡例を含めるには、「構造」ウィンドウでスケジュール・ガント・チャート・ノードを右クリックし、スケジュール・ガントの中に挿入→「凡例」を選択します。
凡例には、それぞれの記号に関する情報と、各タスクを表すカラー・コード化された棒が示されます。また、ガント・チャート内で選択されているタスクに関する詳細情報も示されます。
スケジュール・ガント・チャートを「データ・コントロール」パネルからドロップすると、次の処理が行われます。
ガント・チャートのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
UIコンポーネントに必要なコードをJSFページに追加します。
例38-5に、リソースおよび出荷された注文を表示するスケジュール・ガント・チャートに生成された行セット・バインディングを示します。
例38-5 スケジュール・ガント・チャートのバインディングXML
<bindings>
<gantt IterBinding="SalesRepViewObj1Iterator" id="SalesRepViewObj1"
xmlns="http://xmlns.oracle.com/adfm/dvt">
<ganttDataMap>
<nodeDefinition DefName="model.SalesRepViewObj" type="Resources">
<AttrNames>
<Item Value="Id" type="resourceId"/>
</AttrNames>
<Accessors>
<Item Value="SOrdView" type="tasks"/>
</Accessors>
</nodeDefinition>
<nodeDefinition type="Tasks" DefName="model.SOrdView">
<AttrNames>
<Item Value="Id" type="taskId"/>
<Item Value="DateOrdered" type="startTime"/>
<Item Value="DateShipped" type="endTime"/>
</AttrNames>
</nodeDefinition>
<nodeDefinition type="Dependents">
<AttrNames/>
</nodeDefinition>
<nodeDefinition type="SplitTasks">
<AttrNames/>
</nodeDefinition>
<nodeDefinition type="RecurringTasks">
<AttrNames/>
</nodeDefinition>
<nodeDefinition type="Subresources">
<AttrNames/>
</nodeDefinition>
</ganttDataMap>
</gantt>
</bindings>
例38-6に、スケジュール・ガント・チャートに対してJSFページで生成されるコードを示します。このタグ・コードには、スケジュール・ガント・チャートの全体的な開始および終了時間に対する設定が含まれています。また、主時間軸(週)および副時間軸(日)に対する時間軸の設定も示されています。さらに、ガント・チャートのリスト・リージョンに表示される各列に対する指定もリストされています。
例38-6 スケジュール・ガント・チャートのJSFページのコード
<dvt:schedulingGantt id="gantt1"
value="#{bindings.SalesRepViewObj1.schedulingGanttModel}"
dataChangeListener="#{bindings.SalesRepViewObj1.
schedulingGanttModel.processDataChanged}"
var="row" startTime="2012-04-15" endTime="2013-05-15"
summary="#{viewcontrollerBundle.SCHEDULING_GANTT_CHART}">
<f:facet name="major">
<dvt:timeAxis scale="weeks" id="ta1"/>
</f:facet>
<f:facet name="minor">
<dvt:timeAxis scale="days" id="ta2"/>
</f:facet>
<f:facet name="nodeStamp">
<af:column sortProperty="#{bindings.SalesRepViewObj1.hints.FirstName.name}"
sortable="false"
headerText="#{bindings.SalesRepViewObj1.hints.FirstName.label}"
id="c1">
<af:outputText value="#{row.FirstName}"
shortDesc="#{bindings.SalesRepViewObj1.hints.
FirstName.tooltip}"
id="ot1"/>
</af:column>
</f:facet>
<af:column sortProperty="#{bindings.SalesRepViewObj1.hints.LastName.name}"
sortable="false"
headerText="#{bindings.SalesRepViewObj1.hints.LastName.label}"
id="c2">
<af:outputText value="#{row.LastName}"
shortDesc="#{bindings.SalesRepViewObj1.hints.LastName.tooltip}"
id="ot2"/>
</af:column>
<af:column sortProperty="#{bindings.SalesRepViewObj1.hints.Email.name}"
sortable="false"
headerText="#{bindings.SalesRepViewObj1.hints.Email.label}" id="c3">
<af:outputText value="#{row.Email}"
shortDesc="#{bindings.SalesRepViewObj1.hints.Email.tooltip}"
id="ot3"/>
</af:column>
</dvt:schedulingGantt>
ADFデータ・コントロールを使用して、プロジェクト・ガント・チャートおよびスケジュール・ガント・チャートにデータをバインドすると、次に示すような行の属性の更新が必要になるデータ変更イベントに対応するデータ変更リスナーが、自動的に提供されます。
DURATION_CHANGE: タスクの終了時刻(タスク・バーのサイズ変更)
PROGRESS_CHANGE: タスクの進行状況(進行状況バーのサイズ変更)
TIME_CHANGE: タスクの開始時刻および終了時刻(タスク・バーの移動)
設計時に、データ変更リスナーで、プロジェクト・ガントおよびスケジュール・ガントのバインディング用に、組込みのprocessDataChangeメソッドを提供します(例38-7を参照)。
例38-7 デフォルトのdataChangeListenerのサンプル・コード
<dvt:projectGantt id="gantt1"
dataChangeListener="#{bindings.GanttProjectView1.
projectGanttModel.processDataChanged}"
value="#{bindings.GanttProjectView1.projectGanttModel}"
...
</dvt:projectGantt>
次に示すような、行の挿入または削除が必要になるデータ変更イベントは、サポートされていません。
TASK_SPLITTED: タスクの分割
TASK_MERGED: 別のタスクとのタスクのマージ
LINK: 2つのタスクの相互リンク
UNLINK: 相互リンクされた2つのタスクのリンク解除
COPY: 1つ以上のタスクまたはリソースのコピー
CREATE: 新しいタスクの作成
CREATE_RESOURCE: 新しいリソースの作成
CUT: 1つ以上のタスクまたはリソースのカット
PASTE: タスクまたはリソースの貼り付け
UPDATE: タスクの更新
UPDATE_RESOURCE: リソースの更新
TASKS_PROPERTIES_UPDATE: タスク・プロパティ・ダイアログのイベント
INDENT: タスクまたはイベントのインデント
OUTDENT: タスクまたはリソースのアウトデント
DELETE: 1つ以上のタスクまたはリソースの削除
デフォルトの実装がないイベントをアプリケーションで処理できるようにするには、バッキングBeanのメソッドを指定して、組込みのprocessDataChangeメソッドに委譲します。たとえば、例38-8に示すdataChangeListenerは、handleDataChangeメソッドを使用して、TASK_PROPERTIES_UPDATEイベントを処理しています。この処理には、例38-9に示すバッキングBeanを使用しています。
例38-8 カスタムのdataChangeListenerメソッドのサンプル・コード
<dvt:projectGantt id="gantt1"
dataChangeListener="#{backingBeanScope.backing_
projectGantt.handleDataChange}"
value="#{bindings.GanttProjectView1.projectGanttModel}"
...
</dvt:projectGantt>
例38-9 バッキングBeanのサンプル・コード
public void handleDataChange(DataChangeEvent evt)
{
// handle events not supported by built-in "processDataChange" method
int _type = evt.getActionType();
if (_type == DataChangeEvent.TASK_PROPERTIES_UPDATE)
{
// handle event.
}
else // delegate to built-in "processDataChange" method.
{
String expression =
"#{bindings.GanttProjectView1.projectGanttModel.processDataChanged}";
ExpressionFactory elFactory = app.getExpressionFactory();
ELContext elContext = facesContext.getELContext();
MethodExpression methodExp = elFactory.createMethodExpression(elContext,
expression, null, new Class[] {DataChangeEvent.class});
methodExp.invoke(elContext, new Object[] {evt});
}
}
|
注意: プロジェクトおよびスケジュールのガント・チャートについては、ADFデータ・コントロールの |
時系列は、ユーザーが日付ベースのイベントを時間順に表示し、定義された時間範囲内を簡単に前後に移動することを可能にする対話型のデータ視覚化ツールです。二重時系列を使用して、イベントの対照比較を行うことができます。たとえば、時系列を使用して従業員の入社日を表示したり、二重時系列を使用して2人の従業員の複数の人事管理イベントを比較したりすることができます。
時系列は、時間軸に沿った時系列アイテムとしてのイベントの表示、時系列に表示可能な期間に対応する移動可能な概要ウィンドウ、および時系列の時間増分全体を示した概要時間軸で構成されます。表示可能な時間範囲は、水平方向のズーム制御を使用して変更できます。イベントに対応する各時系列アイテムは、関連する情報やアクションを表示し、時間軸内のイベント日付に結び付けられます。時系列アイテムは、概要パネルにマーカーで表されます。時系列コンポーネントでは、イベントの系列が2つまでサポートされます。
図38-12に、Summit ADF DVTサンプル・アプリケーションで従業員の雇用日を時間順に表示した時系列の例を示します。この例では、各イベントを表す時系列アイテムに、イメージとラベル付きテキストを使用して従業員に関する情報を表示しています。選択が構成されている場合は、時系列アイテム、引出線、および概要パネルのイベント・マーカーが強調表示されます。
図38-13に、2人の従業員の複数の人事管理イベントを比較する二重時系列を示します。時間軸は2つのイベント系列の間に配置され、概要パネルは時系列の一番下に表示されています。
時系列項目の内容、マーカーの表示および時間軸は構成可能です。時系列のユースケース、エンド・ユーザー機能とプレゼンテーション機能、タグ構造、時系列への特殊機能の追加の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「時系列コンポーネントの使用方法」の章を参照してください。
時系列に表示されるデータは、データ・コレクションに基づいています。timelineコンポーネントは、モデルを使用して、基になるリストのデータにアクセスします。固有のモデル・クラスはoracle.adf.view.rich.model.CollectionModelです。java.util.List、java.util.Arrayおよびjavax.faces.model.DataModelなど、その他のモデル・インスタンスも使用できます。データ・レイヤーではインスタンスがCollectionModelに自動的に変換されます。
時系列イベントに関する情報をデータ・コレクションのデータ行に関連付けるには、スタンプを使用します。スタンプを使用すれば、データ・モデル内の各データ行をイベントに対して表示できます。スタンプを使用する場合、時系列のすべての項目に対して子コンポーネントが作成されるわけではありません。むしろ、コンポーネントのコンテンツは、データ属性ごとに1回、繰り返しレンダリング(スタンプ)されます。
Oracle ADFのデータ・コントロールを使用すると、Jdeveloperでは宣言的なタスクとなります。「データ・コントロール」パネルから、1つ(または2つ)のイベント系列を生成するデータ・コレクションをドラッグして、JSFページにドロップします。
始める前に:
時系列について理解しておくと役立ちます。詳細は、38.3項「データバインドされた時系列の作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、38.1.3項「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
13.2項「アプリケーション・モジュールの作成と変更」の手順に従い、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
たとえば、図38-12に示す時系列のデータ・ソースは、Summit ADF DVTサンプル・アプリケーションのビュー・オブジェクトから取得しています。SEmp表を使用して、各従業員と雇用日を表すビュー・オブジェクトを作成します。
JSFページを作成します。作成手順は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項を参照してください。
「データ・コントロール」パネルを使用して時系列を作成するには:
「データ・コントロール」パネルから、コレクションを選択します。
図38-14に、「データ・コントロール」パネルでSEmpView1コレクションを選択して、従業員の雇用日を表示する時系列を作成する例を示します。
コレクションをJSFページにドラッグし、ポップアップ・メニューから「時系列」を選択します。
時系列の作成ウィザードの「時系列の系列データの構成」ページで次の値を設定することにより、1つ以上(二重時系列の場合は2つ)の時系列に対する時系列データ・モデルを構成します。
系列値: ドロップダウン・リストを使用して、時系列で使用するデータ・コレクションを選択します。デフォルトでは、「データ・コントロール」パネルから挿入したデータ・コレクションが表示されます。該当する日付ベースの属性を1つ以上含むアプリケーション・モジュールからのコレクションのリストが、選択用に自動的に表示されます。
アイテム・データ値: ドロップダウン・リストを使用して、時系列内にスタンプされる時系列項目に対して使用する日付ベースの属性を選択します。「系列値」で参照されるコレクション内の該当するすべての属性が選択用に自動的に表示されます。
グループ: オプションで、ドロップダウン・リストを使用して、項目日付値が同一の場合に時系列項目をグループ化するために使用する属性を選択します。すべてのデータ・コレクション属性が選択用に自動的に表示されます。
「式ビルダー」を選択してEL式を作成することにより、実行時に属性のグループ化を指定することもできます。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
データ・モデルとして構成した時系列の系列ごとに、系列を選択し、時系列項目の表示属性に対して次の値を設定します。
イメージ: オプションで、時系列項目にスタンプするイメージ・ファイルへの相対パスを入力するか、「検索」アイコンを使用して「イメージ・ファイルの選択」ダイアログを開き、イメージ・ソースに移動します。
「式ビルダー」を選択して、実行時に評価されてイメージ・ファイルの場所を特定するEL式を構成することもできます。
|
注意: 時系列項目内のイメージのサイズを変更する必要がある場合は、ソース・コードで、または「プロパティ」ウィンドウで宣言的に、 |
コンポーネント: ドロップダウン・リストから、時系列項目内に属性テキストを表示するために使用するADF Facesコンポーネントを選択します。書式設定されていないテキストを表示するoutputTextまたはテキストを表示して限られた範囲の書式設定オプションを設定できるoutputFormattedを選択できます。「ラベル」値を使用して、いずれかの出力テキスト・オプションにラベルを関連付けることも選択できます。
値: ドロップダウン・リストから、時系列項目内に表示する属性値を選択します。選択した時系列の系列に対するデータ・コレクション内のすべての属性が自動的に表示されます。
ラベル: 表示属性に対する「コンポーネント」値でラベル付きのADF Facesコンポーネントを指定した場合は、このオプションを使用できます。デフォルトの「属性名の使用」テキストを使用するか、リソース・バンドルからのテキスト・リソースを指定するか、EL式ビルダーを使用して実行時にラベル・テキストを評価できます。ラベルは、実行時に時系列項目に表示されます。
たとえば、図38-12のSummit ADF DVTサンプルの場合、時系列の系列と表示属性を指定するには、図38-15に示すように、時系列の作成ウィザードの「時系列の系列データの構成」ページに必要事項を入力します。
「次へ」をクリックして、ウィザードの次のページに進むか、「取消」をクリックして時系列の作成を終了します。
時系列の作成ウィザードの「イベント・マーカーの構成」ページで、データ・モデルとして構成した時系列の系列ごとに、系列を選択し、イベント・マーカーに対する次のオプションの値を設定します。
「色」: イベント・マーカーの塗りつぶし色を指定します。ドロップダウン・リストを使用して使用可能な色を選択するか、アイコンをクリックしてカラー・ピッカー・ダイアログを表示できます。デフォルトでは、どの色も指定されません。
不透明度: マーカーの塗りつぶし色の不透明度を指定します。有効な値の範囲は、0パーセント(透明)から100パーセント(不透明)です。
標準図形: 選択した各時系列の系列値に対する概要マーカーの形状を指定します。ドロップダウン・リストから、7つの事前作成図形の内の1つを選択して、概要マーカーの形状を指定します。有効な値は、circle(デフォルト)、diamond、human、plus、square、triangleDownおよびtriangleUpです。
スケールX/スケールY: 概要マーカーをデフォルト・サイズから変更するための水平(scaleX)および垂直(scaleY)スケール係数を入力します。有効な値は、数値のパーセンテージです。マーカーが大きすぎる場合は、JDeveloperにより、時系列の概要領域に合せて自動的にマーカーのサイズが変更されます。
たとえば、図38-12のSummit ADF DVTサンプルの場合、時系列の概要系列マーカーを指定するには、図38-16に示すように、時系列の作成ウィザードの「イベント・マーカーの構成」ページに必要事項を入力します。
「戻る」をクリックしてウィザードの前のページに戻るか、「次へ」をクリックしてウィザードの次のページへ進みます。または、「取消」をクリックして時系列の作成を終了します。
時系列の作成ウィザードの「時間範囲とタイム・スケールの構成」ページで次の値を設定することにより、時間軸と概要軸を構成します。
開始時間: yyyy-mm-ddフォーマットを使用して、時系列の時間範囲に使用する開始日を入力します。時系列に表示するデータ・コレクション内に含めるイベントの開始日を選択します。ドロップダウン・リストから「現在の日付」を選択できます。カレンダ・アイコンをクリックして日付ピッカー・ダイアログを表示することもできます。デフォルト値は、現在の日付から3か月前に設定されます。
終了時間: yyyy-mm-ddフォーマットを使用して、時系列の時間範囲に使用する終了日を入力します。時系列に表示するデータ・コレクション内に含めるイベントの終了日を選択します。ドロップダウン・リストから「現在の日付」を選択できます。カレンダ・アイコンをクリックして日付ピッカー・ダイアログを表示することもできます。デフォルト値は、デフォルトの「開始時間」値から12か月後に設定されます。
軸スケール: ドロップダウン・リストを使用して、時系列の時間軸で使用するタイム・スケールを選択します。時間軸は、時系列に対する現在の時間増分を示します。
「概要スケール」よりも小さなタイム・スケールを使用する必要があります。たとえば、概要スケールがmonthsに設定されている場合に、軸スケールをyearsに設定することはできません。カスタム軸スケールを指定することもできます。
有効値は、twoyears、years、halfyears、quarters(デフォルト)、twomonths、months、twoweeks、weeks、days、sixhours、threehours、hours、halfhoursおよびquarterhoursです。カスタム軸スケールを指定することもできます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の時系列にカスタム・タイム・スケールを追加する方法についての説明を参照してください。
概要スケール: ドロップダウン・リストを使用して、時系列の概要軸で使用するタイム・スケールを選択します。概要軸は、時系列に含まれる合計時間増分を示します。
有効値は、twoyears、years(デフォルト)、halfyears、quarters、twomonths、months、twoweeks、weeks、days、sixhours、threehours、hours、halfhoursおよびquarterhoursです。カスタム軸スケールを指定することもできます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の時系列にカスタム・タイム・スケールを追加する方法についての説明を参照してください。
たとえば、図38-12のSummit DVT ADFサンプルの場合、時系列の軸と概要時間範囲を指定するには、図38-17に示すように、時系列の作成ウィザードの「時間範囲とタイム・スケールの構成」ページに必要事項を入力します。
「戻る」をクリックしてウィザードの前のページに戻るか、「終了」をクリックしてデータ・バインディングの定義を完了するか、「取消」をクリックして時系列の作成を終了します。
ADFデータ・コントロールを使用して時系列を作成すると、JDeveloperにより、次が実行されます。
時系列に対するバインディングがJSFページのページ定義ファイルに定義されます。
DVT時系列コンポーネント用のコードがJSFページに挿入されます。
例38-10に、図38-12のSummit ADF DVTサンプルの時系列に対するJSFページのページ定義ファイルで定義されているバインディングを示します。
例38-10 ページ定義ファイルのXMLバインディング
<bindings>
<tree IterBinding="SEmpView1Iterator" id="SEmpView1" ChangeEventPolicy="ppr">
<nodeDefinition DefName="model.SEmpView" Name="SEmpView1">
<AttrNames>
<Item Value="DeptId"/>
<Item Value="FirstName"/>
<Item Value="Id"/>
<Item Value="LastName"/>
<Item Value="StartDate"/>
</AttrNames>
</nodeDefinition>
</tree>
</bindings>
例38-11に、図38-12に例示された時系列に対して、JSFページに挿入されるコードを示します。
例38-11 時系列コンポーネントのサンプル・コード
<dvt:timeline id="tl1" startTime="2010-01-01" endTime="2012-12-31"
itemSelection="multiple">
<dvt:timelineSeries id="ts1" var="evt"
value="#{bindings.SEmpView1.collectionModel}">
<dvt:timelineItem value="#{evt.StartDate}" id="ti1" group="#{evt.DeptId}">
<af:panelGroupLayout id="pg1" layout="horizontal">
<af:image id="img1" source="images/#{evt.Id}.png"
inlineStyle="width:85px;height:100px;"/>
<af:spacer width="3" id="s1"/>
<af:panelGroupLayout id="pg2" layout="vertical">
<af:panelLabelAndMessage id="plam1"
label="#{viewcontrollerBundle.EMPLOYEE_ID}">
<af:outputText id="ot1" value="#{evt.Id}" noWrap="true">
<af:convertNumber groupingUsed="false" pattern=
"#{bindings.SEmpView1.hints.Id.format}"/>
</af:outputText>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage id="plam2"
label="#{viewcontrollerBundle.FIRST_NAME}">
<af:outputText id="ot2" value="#{evt.FirstName}" noWrap="true"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage id="plam3"
label="#{viewcontrollerBundle.LAST_NAME}">
<af:outputText id="ot3" value="#{evt.LastName}" noWrap="true"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage id="plam4"
label="#{viewcontrollerBundle.DEPARTMENT_ID}">
<af:outputText id="ot4" value="#{evt.DeptId}" noWrap="true">
<af:convertNumber groupingUsed="false" pattern=
"#{bindings.SEmpView1.hints.DeptId.format}"/>
</af:outputText>
</af:panelLabelAndMessage>
</af:panelGroupLayout>
</af:panelGroupLayout>
<f:facet name="overviewItem">
<dvt:marker id="m1" fillColor="#ff0000"/>
</f:facet>
</dvt:timelineItem>
</dvt:timelineSeries>
<dvt:timeAxis id="ta1" scale="months"/>
<dvt:timelineOverview id="ov1">
<dvt:timeAxis id="ta2" scale="halfyears"/>
</dvt:timelineOverview>
</dvt:timeline>
「データ・コントロール」パネルを使用して二重時系列を作成する際には、2つの時系列の系列に対して同じまたは異なるデータ・コレクションを構成できます。またそれぞれに対して、時系列項目の表示属性および概要マーカーを指定できます。時系列の作成ウィザードに、該当する日付ベースの属性を1つ以上含むアプリケーション・モジュールからのデータ・コレクションのリストが、選択用に自動的に表示されます。
例38-12に、図38-13の二重時系列に対するサンプル・コードを示します。
例38-12 二重時系列のサンプル・コード
<dvt:timeline id="tl1" startTime="2000-01-01" endTime="2011-12-31"
inlineStyle="width:1024px;height:500px" itemSelection="single"
currentTime="2010-04-01">
<dvt:timelineSeries id="ts1" var="evt" value="#{timeline.firstModel}"
contentDelivery="lazy">
<dvt:timelineItem id="ti1" value="#{evt.date}" group="#{evt.group}">
<af:panelGroupLayout id="pg1" layout="horizontal">
<af:image id="img1" inlineStyle="width:30px;height:30px"
source="/resources/images/timeline/#{evt.type}.png"/>
<af:spacer width="3"/>
<af:panelGroupLayout id="pg2" layout="vertical">
<af:outputText id="ot1" inlineStyle="color:#084B8A"
value="#{evt.description}" noWrap="true"/>
<af:outputText id="ot2" value="#{evt.date}"
inlineStyle="color:#6e6e6e" noWrap="true">
<af:convertDateTime dateStyle="medium"/>
</af:outputText>
</af:panelGroupLayout>
</af:panelGroupLayout>
<f:facet name="overviewItem">
<dvt:marker id="m1" shape="circle" fillColor="#ff0000"/>
</f:facet>
</dvt:timelineItem>
</dvt:timelineSeries>
<dvt:timelineSeries id="ts2" var="evt" value="#{timeline.secondModel}"
contentDelivery="lazy">
<dvt:timelineItem id="ti2" value="#{evt.date}">
<af:panelGroupLayout id="pg2" layout="horizontal">
<af:image id="img2" inlineStyle="width:30px;height:30px"
source="/resources/images/timeline/#{evt.type}.png"/>
<af:spacer width="3"/>
<af:panelGroupLayout id="pg3" layout="vertical">
<af:outputText id="ot3" inlineStyle="color:#084B8A"
value="#{evt.description}" noWrap="true"/>
<af:outputText id="ot4" value="#{evt.date}"
inlineStyle="color:#6e6e6e" noWrap="true">
<af:convertDateTime dateStyle="medium"/>
</af:outputText>
</af:panelGroupLayout>
</af:panelGroupLayout>
<f:facet name="overviewItem">
<dvt:marker id="m2" shape="circle" fillColor="#0000ff"/>
</f:facet>
</dvt:timelineItem>
</dvt:timelineSeries>
<dvt:timeAxis id="ta1" scale="quarters"/>
<dvt:timelineOverview id="ov1">
<dvt:timeAxis id="ta2" scale="years"/>
</dvt:timelineOverview>
</dvt:timeline>
このコンポーネントのデータ要件、タグ構造および外観と動作のカスタマイズ・オプションの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「時系列コンポーネントの使用方法」の章を参照してください。
