Oracle® Fusion Middleware Oracle Application Development FrameworkによるFusion Webアプリケーションの開発 12c (12.2.1.2.0) E82918-03 |
|
前 |
次 |
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データ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールの使用を検討します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、「プレースホルダ・データ・コントロールによるページの設計」を参照してください。
ガント・チャートは、横軸上に表示される棒グラフの1種です。このグラフは、プロジェクトの計画および追跡において、開始と終了が明確な時間枠内でタスクまたはリソースを示すために使用されます。
ガント・チャートを作成する場合は、次のタイプから選択できます。
プロジェクト
プロジェクト・ガント・チャートは、タスクを垂直に示し、各タスクの期間を水平な時間軸上に棒として示します。
リソース使用率
リソース使用率ガント・チャートは、リソースの割当てが超過なのか未満なのかを図示します。リソースを縦に示し、横方向の時間軸にその割当てとキャパシティ(オプション)を示します。
スケジューリング
このガント・チャートは手動のスケジュール表をベースにし、リソースを縦に表示し、対応するアクティビティを横方向の時間軸に表示します。リソースの例には、人、機械、部屋などがあります。
プロジェクト・ガント・チャートでは、タスクの値を指定する必要があります。オプションで、分割タスク、サブタスク、再帰タスクおよびタスク間の依存性の値も指定できます(データ・コレクションにこの追加情報に対するアクセッサがある場合)。
プロジェクト・ガント・チャートは、全体的な開始時間および終了時間と、主および副時間軸の値に対するデフォルト値を使用して表示されます。プロジェクト・ガント・チャートでは、主時間軸はデフォルトで週に設定され、副時間軸は日に設定されます。
図42-1は、各タスクが入力される1つの注文となっているプロジェクト・ガント・チャートを示しています。分割線の左側のリスト・リージョンには、注文の担当者の名前を示す列と、注文日および出荷日を示す列が表示されます。分割線の右側のグラフ・リージョンでは、各注文の注文日から出荷日までの水平な棒がガント・チャートで表示されています。
図42-1 出荷された注文のプロジェクト・ガント・チャート
データ・コントロールを使用してプロジェクト・ガント・チャートを作成するには、プロジェクト・ガント・チャート・コンポーネントをデータ・コレクションにバインドします。JDeveloperでは、「データ・コントロール」パネルからコレクションをドラッグ・アンド・ドロップして、宣言的にこの処理を実行できます。
ヒント:
また、「コンポーネント」ウィンドウからプロジェクト・ガント・チャート・コンポーネントをドラッグし、「プロジェクト・ガントの作成」ダイアログの入力を完了することで、プロジェクト・ガント・チャートを作成することもできます。この方法では、コンポーネントをデータにバインドする前に、ガント・チャートのユーザー・インタフェースを設計できます。
始める前に:
データバインドされたガント・チャートについて理解しておいてください。詳細は、「データバインドされたガント・チャートの作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
「アプリケーション・モジュールの作成と変更」の説明に従って、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
たとえば、図42-1のプロジェクト・ガント・チャートのデータソースは、ADF DVTコンポーネントについてのSummitサンプル・アプリケーションに含まれる、出荷日と配達日を含む出荷注文を表すビュー・オブジェクトから取得しています。
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従い、JSFページを作成します。
「データ・コントロール」パネルを使用して、プロジェクト・ガント・チャートを作成するには:
プロジェクト・ガント・チャートの作成後に、「プロパティ」ウィンドウを使用して、追加の属性に値を設定します。ガント・チャートのユースケース、エンド・ユーザー機能とプレゼンテーション機能、タグ構造、ガント・チャートへの特殊機能の追加の詳細は、『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ページを作成します。
「データ・コントロール」パネルを使用して、リソース使用率ガント・チャートを作成するには:
リソース使用率ガント・チャートの作成後に、「プロパティ」ウィンドウを使用して、追加の属性に値を設定します。ガント・チャートのユースケース、エンド・ユーザー機能とプレゼンテーション機能、タグ構造、ガント・チャートへの特殊機能の追加の詳細は、『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ページを作成します。
「データ・コントロール」パネルを使用して、スケジュール・ガント・チャートを作成するには:
スケジュール・ガント・チャートを「データ・コントロール」パネルからドロップすると、次の処理が行われます。
ガント・チャートのバインディングを作成し、ページ定義ファイルにそのバインディングを追加します。
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サンプル・アプリケーションで従業員の雇用日を時間順に表示した時系列の例を示します。この例では、各イベントを表す時系列アイテムに、イメージとラベル付きテキストを使用して従業員に関する情報を表示しています。選択が構成されている場合は、時系列アイテム、引出線、および概要パネルのイベント・マーカーが強調表示されます。
図42-12 従業員の雇用日の時系列
図42-13に、2人の従業員の複数の人事管理イベントを比較する二重時系列を示します。時間軸は2つのイベント系列の間に配置され、概要パネルは時系列の一番下に表示されています。
図42-13 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ページにドロップします。
始める前に:
時系列について理解しておくと役立ちます。詳細は、「データバインドされた時系列の作成」を参照してください。
他のOracle ADF機能を使用して追加できる機能を理解しておくことも役立ちます。詳細は、「データ視覚化コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
「アプリケーション・モジュールの作成と変更」の説明に従って、データ・モデルで必要なビュー・オブジェクトのインスタンスを含むアプリケーション・モジュールを作成します。
たとえば、図42-12に示す時系列のデータ・ソースは、Summit ADF DVTサンプル・アプリケーションのビュー・オブジェクトから取得しています。SEmp
表を使用して、各従業員と雇用日を表すビュー・オブジェクトを作成します。
『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のJSFページの作成方法に関する項の説明に従い、JSFページを作成します。
「データ・コントロール」パネルを使用して時系列を作成するには:
「データ・コントロール」パネルから、コレクションを選択します。
図42-14に、「データ・コントロール」パネルでSEmpView1
コレクションを選択して、従業員の雇用日を表示する時系列を作成する例を示します。
図42-14 従業員の雇用日についての時系列用データ・コレクション
コレクションをJSFページにドラッグし、ポップアップ・メニューから「時系列」を選択します。
「時系列の作成」ウィザードの「時系列の系列データの構成」ページで次の値を設定することにより、1つ以上(二重時系列の場合は2つ)の時系列に対する時系列データ・モデルを構成します。
系列値: ドロップダウン・リストを使用して、時系列で使用するデータ・コレクションを選択します。デフォルトでは、「データ・コントロール」パネルから挿入したデータ・コレクションが表示されます。該当する日付ベースの属性を1つ以上含むアプリケーション・モジュールからのコレクションのリストが、選択用に自動的に表示されます。
アイテム・データ値: ドロップダウン・リストを使用して、時系列内にスタンプされる時系列項目に対して使用する日付ベースの属性を選択します。「系列値」で参照されるコレクション内の該当するすべての属性が選択用に自動的に表示されます。
グループ: オプションで、ドロップダウン・リストを使用して、項目日付値が同一の場合に時系列項目をグループ化するために使用する属性を選択します。すべてのデータ・コレクション属性が選択用に自動的に表示されます。
「式ビルダー」を選択してEL式を作成することにより、実行時に属性のグループ化を指定することもできます。ヘルプを参照するには、[F1]を押すか「ヘルプ」をクリックします。
データ・モデルとして構成した時系列の系列ごとに、系列を選択し、時系列項目の表示属性に対して次の値を設定します。
イメージ: オプションで、時系列項目にスタンプするイメージ・ファイルへの相対パスを入力するか、「検索」アイコンを使用して「イメージ・ファイルの選択」ダイアログを開き、イメージ・ソースに移動します。
「式ビルダー」を選択して、実行時に評価されてイメージ・ファイルの場所を特定するEL式を構成することもできます。
注意:
時系列項目内のイメージのサイズを変更する必要がある場合は、ソース・コードで、または「プロパティ」ウィンドウで宣言的に、af:image
コンポーネントのInlineStyle属性を指定します。たとえば、Summit ADF DVTサンプルでは、inlineStyle="width:85px;height:100px;"
と指定します。
コンポーネント: ドロップダウン・リストから、時系列項目内に属性テキストを表示するために使用するADF Facesコンポーネントを選択します。書式設定されていないテキストを表示するoutputText
またはテキストを表示して限られた範囲の書式設定オプションを設定できるoutputFormatted
を選択できます。「ラベル」値を使用して、いずれかの出力テキスト・オプションにラベルを関連付けることも選択できます。
値: ドロップダウン・リストから、時系列項目内に表示する属性値を選択します。選択した時系列の系列に対するデータ・コレクション内のすべての属性が自動的に表示されます。
ラベル: 表示属性に対する「コンポーネント」値でラベル付きのADF Facesコンポーネントを指定した場合は、このオプションを使用できます。デフォルトの「属性名の使用」
テキストを使用するか、リソース・バンドルからのテキスト・リソースを指定するか、EL式ビルダーを使用して実行時にラベル・テキストを評価できます。ラベルは、実行時に時系列項目に表示されます。
たとえば、図42-12のSummit ADF DVTサンプルの場合、時系列の系列と表示属性を指定するには、図42-15に示すように、時系列の作成ウィザードの「時系列の系列データの構成」ページに必要事項を入力します。
図42-15 「時系列の作成」ウィザードの「時系列の系列データの構成」ページ
「次へ」をクリックして、ウィザードの次のページに進むか、「取消」をクリックして時系列の作成を終了します。
「時系列の作成」ウィザードの「イベント・マーカーの構成」ページで、データ・モデルとして構成した時系列の系列ごとに、系列を選択し、イベント・マーカーに対する次のオプションの値を設定します。
「色」: イベント・マーカーの塗りつぶし色を指定します。ドロップダウン・リストを使用して使用可能な色を選択するか、アイコンをクリックしてカラー・ピッカー・ダイアログを表示できます。デフォルトでは、どの色も指定されません。
不透明度: マーカーの塗りつぶし色の不透明度を指定します。有効な値の範囲は、0
パーセント(透明)から100
パーセント(不透明)です。
標準図形: 選択した各時系列の系列値に対する概要マーカーの形状を指定します。ドロップダウン・リストから、7つの事前作成図形の内の1つを選択して、概要マーカーの形状を指定します。有効な値は、circle
(デフォルト)、diamond
、human
、plus
、square
、triangleDown
およびtriangleUp
です。
スケールX/スケールY: 概要マーカーをデフォルト・サイズから変更するための水平(scaleX
)および垂直(scaleY
)スケール係数を入力します。有効な値は、数値のパーセンテージです。マーカーが大きすぎる場合は、JDeveloperにより、時系列の概要領域に合せて自動的にマーカーのサイズが変更されます。
たとえば、図42-12のSummit ADF DVTサンプルの場合、時系列の概要系列マーカーを指定するには、図42-16に示すように、時系列の作成ウィザードの「イベント・マーカーの構成」ページに必要事項を入力します。
図42-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ユーザー・インタフェースの開発』の時系列へのカスタム・タイム・スケールの追加方法に関する項を参照してください。
たとえば、図42-12のSummit DVT ADFサンプルの場合、時系列の軸と概要時間範囲を指定するには、図42-17に示すように、時系列の作成ウィザードの「時間範囲とタイム・スケールの構成」ページに必要事項を入力します。
図42-17 「時系列の作成」ウィザードの「時間範囲とタイム・スケールの構成」ページ
「戻る」をクリックしてウィザードの前のページに戻るか、「終了」をクリックしてデータ・バインディングの定義を完了するか、「取消」をクリックして時系列の作成を終了します。
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="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つ以上含むアプリケーション・モジュールからのデータ・コレクションのリストが、選択用に自動的に表示されます。
次の例は、図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: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ユーザー・インタフェースの開発』の「時系列コンポーネントの使用」を参照してください。