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