| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1 (11.1.1.7.0) B52029-07 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1 (11.1.1.7.0) B52029-07 |
|
前 |
次 |
この章では、ADFデータ視覚化のtimelineコンポーネントを使用し、簡単なUI優先開発を使用してデータを表示する方法について説明します。データ要件、タグ構造、およびコンポーネントの概観と動作をカスタマイズするためのオプションの定義についても説明します。
アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用して時系列を作成することもできます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた時系列の作成に関する項を参照してください。
この章では、次の項目について説明します。
対話型のデータ視覚化ツールであるtimelineを使用すると、ユーザーはイベントを時間順に表示して、定義された時間範囲内で時間を進めたり戻したりできます。各イベントは時系列アイテムとして表され、単純なADFコンポーネントを使用してテキストやイメージなどの情報を表示したり、リンクなどのアクションを提供したりします。2つの時系列を構成して2系列のイベントを表示し、関連する情報を並べて比較することもできます。
時系列コンポーネントでは、関連付けられた時系列アイテムのグループ(共通の雇用日など)やアクティビティのグループ(多数ある従業員用書類の記入完了など)を開いたり、閉じたりできます。また、時系列コンポーネントでは、時間範囲を調整して表示を変更し、ズーム・インやズーム・アウトを行う機能もサポートします。
時系列は、時間軸に沿った時系列アイテムとしてのイベントの表示、時系列に表示可能な期間に対応する移動可能な概要ウィンドウ、および時系列の時間増分全体を示した概要時間軸で構成されます。表示可能な時間範囲は、水平方向のズーム制御を使用して変更できます。イベントに対応する各時系列アイテムは、関連付けられた情報やアクションを表示し、時間軸への引出線と概要時間軸内のマーカーで表されます。
たとえば、図28-1の時系列は、Summit DVTの例における従業員の雇用日を時間順に表示するように構成されています。この例では、各イベントを表す時系列アイテムに、イメージとラベル付きテキストを使用して従業員に関する情報を表示しています。概要ウィンドウは、時系列アイテムを表示する時間範囲を定義します。このウィンドウは、ズーム・コントロールを変更するか、ウィンドウの端の位置を変更して拡大または縮小することでサイズを調整できます。選択が構成されている場合は、時系列アイテム、引出線、および概要パネルのイベント・マーカーが強調表示されます。
2つの時系列を使用して最大2系列のイベントを比較できます。図28-2に、10年間にわたる2人の従業員の変化のイベントを比較した2つの時系列を示します。時系列イベントは、3年を超える期間を表す概要ウィンドウに四半期単位の時間軸を使用して表示されています。概要時間軸の赤い線は現在の日付を示しています。
時系列は、他のデータ視覚化コンポーネントと関連付けて情報を提供する場合に役立ちます。例として、図28-3に、dvt:hierarchyViewerを使用して作成された組織図からリンクされた時系列の使用方法を示します。詳細は、第31章「ADF階層ビューア・コンポーネントの使用」を参照してください。
時系列をどのように使用し、どのようにカスタマイズできるかを理解するには、次の要素と機能について理解すると役に立ちます。
デフォルトでは、時系列は水平方向に表示され、イベントは水平の時間軸と概要パネルに沿ってレイアウトされます。このレイアウトを垂直方向に変更して、イベントが垂直の時間軸と概要パネルに沿って表示されるようにできます。水平方向の場合は時系列アイテムが画面で互いに重ならないように指定できますが、この構成を垂直方向のアイテムに適用できません。図28-4に、水平方向の時系列と、同じ時系列を垂直方向にしたものとの比較を示します。
時系列に表示される各イベントは、時系列アイテムとして表示されます。時系列アイテムには、イメージ、テキスト、テキスト・ラベルなどのデータ表示コンポーネントや、リンク、ボタン、メニューなどのアクションを含めることができます。イベントは、引出線で時系列の時間軸内の日付に結び付けられます。イベントは、概要パネル内に、構成可能なマーカーとして示されます。
デフォルトでは、時系列アイテムは実行時の選択に対応するようには構成されていません。構成を行うことで、単一または複数の時系列アイテムの選択が可能になります。実行時には、イベント、引出線、および概要パネル内のマーカーが強調表示されます。
共通の日付を持つ時系列アイテムをグループとして表示し、実行時にそのグループを開いたり閉じたりできるように構成できます。デフォルトでは、閉じた表示に、グループ内のアイテム数を示す数値カウンタが表示されます。グループ化された時系列アイテムの任意の場所をクリックすると、閉じた表示の全アイテムが開き、時系列内をクリックすると開いた表示が閉じます。図28-5に、カウンタを持つ時系列アイテムが開いた表示になる様子を示します。
デフォルトの水平方向の時系列では、概要パネルは時系列の下部に表示されます。概要パネルには、時系列に表示可能な期間に対応する移動可能な概要ウィンドウ、および時系列の時間増分全体を示す概要時間軸で構成されます。
時系列コンポーネントは、表など、別のコレクション・コンポーネントとの間のドラッグ・アンド・ドロップ操作をサポートします。図28-6に、ドロップ・ターゲットおよびドラッグ元として構成された時系列を示します。ユーザーが表のいずれかの行を時系列にドラッグすると、属性が時系列アイテムとして表示されます。また、時系列アイテムを選択して表にドラッグすれば、属性を行に表示できます。
時系列にデータ・ソースからどのようにデータを配信するかを構成できます。データは、レンダリング時にデータが使用可能になり次第、または、コンポーネントのシェルがレンダリングされた後の遅延フェッチのいずれかで、時系列に配信できます。時系列では、デフォルトで、使用可能になり次第すぐのデータ・ソースからのコンテンツ配信がサポートされます。contentDelivery属性は、デフォルトでwhenAvailableに設定されています。
時系列は仮想化されています。つまり、サーバーのすべてのデータがクライアントに配信され、表示されるわけではありません。データに関連付けられた値に基づいて、一度に特定の数の行または列をデータ・ソースからフェッチするように時系列を構成できます。フェッチ・サイズを構成するには、fetchStartTimeおよびfetchEndTimeを使用してください。
時系列では、HTML5、FlashおよびPortable Network Graphics (PNG)のイメージ形式がサポートされます。
デフォルトでは、時系列はクライアント・ブラウザでサポートされている最良の出力形式で表示されます。最良の出力形式をクライアントで使用できない場合、アプリケーションでは使用可能な形式がデフォルトになります。たとえば、クライアントがHTML5をサポートしていない場合、アプリケーションでは次が使用されます。
Flash(Flash Playerが使用可能な場合)。
アプリケーション全体でFlashコンテンツの使用を制御するには、adf-config.xmlでflash-player-usageコンテキスト・パラメータを設定します。詳細は、A.4.3項「コンポーネント出力形式としてのFlashの構成」を参照してください。
PNG出力形式。静的レンダリングは、PNG出力形式使用時には完全にサポートされますが、次のような一部のインタラクティブ機能は使用できません。
アニメーション
コンテキスト・メニュー
ドラッグ・アンド・ドロップ・ジェスチャー
ポップアップのサポート
選択項目
ADF Facesでは、印刷、電子メール、または電子メールへの添付ファイル用の簡略化されたモードで、ADF Faces WebアプリケーションからJSFページを出力できます。たとえば、ユーザーがページ(またはページの一部)を印刷できるようにし、ただしWebブラウザでレンダリングされているとおりにページを印刷するのではなく、スクロール・バーやボタンなど、印刷ページに必要ないアイテムを削除することができます。ページが電子メールで送信される場合は、電子メール・クライアントが正しく表示できるようにページを簡略化する必要があります。このような出力用に簡略化されたページを作成する場合の詳細は、第35章「様々な出力モードの使用」を参照してください。
印刷、電子メール、または添付ファイル・モードで出力するJSFページに時系列が表示されている場合は、次のようになります。
現在時系列に表示されているイベントのみがコンテンツに含まれます。
電子メールおよび添付ファイル・モードでは、イベントは表として表示されます。
印刷モードでは、時系列の概要はレンダリングされません。
timelineコンポーネントを実装する前に、その他のADF Faces機能を理解しておくと役に立ちます。また、いったん時系列をページ追加すると、検証やアクセシビリティなどの機能を追加する必要があることに気付く場合があります。timelineコンポーネントで使用できるその他の機能へのリンクは、次のとおりです。
部分ページ・レンダリング: 他のコンポーネントで実行されたアクションに基づく新しいデータをページ上に表示するために、時系列をリフレッシュできます。詳細は、第7章「部分ページ・コンテンツの再レンダリング」を参照してください。
パーソナライズ: 有効になっている場合、ユーザーは実行時の時系列の表示方法を変更できます。アプリケーションがユーザーのカスタマイズを許可するように構成されていないかぎり、ユーザーがページを終了するとそれらの値は保持されません。詳細は、第33章「JSFページでのユーザー・カスタマイズの許可」を参照してください。
アクセシビリティ: 時系列コンポーネントをアクセス可能にできます。詳細は、第22章「アクセス可能なADF Facesページの開発」を参照してください。
コンテンツ配信: contentDelivery属性を使用して時系列を構成することにより、コンポーネントのレンダリング直後に、またはコンポーネントがレンダリングされた後の別のリクエストで、データ・ソースからデータをフェッチするようにできます。詳細は、10.1.1項「コンテンツの配信」を参照してください。
自動データ・バインディング: アプリケーションでFusionテクノロジ・スタックが使用されている場合、ADFビジネス・コンポーネントの構成に基づいて、自動的にバインドされた時系列を作成できます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた時系列の作成に関する項を参照してください。
|
注意: 最終的にページのUIコンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールを使用します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のプレースホルダ・データ・コントロールを使用したページの設計に関する項を参照してください。 |
さらに、各データ視覚化コンポーネントには、コンテンツの配信方法、自動部分ページ・レンダリング(PPR)、データの表示および編集方法など、同じ機能が多くあります。
UI優先開発でtimelineコンポーネントを使用するには、データを定義し、ページに時系列を追加して、JDeveloperで追加の構成を行います。
timelineコンポーネントのデータ・レイヤーは、子であるtimelineSeriesコンポーネントで指定されます。基礎となるソースからデータにアクセスするモデルを使用して、時系列の系列を少なくとも1つ(2つの時系列の場合は2つまで)指定する必要があります。使用する具体的なモデル・クラスは、org.apache.myfaces.trinidad.model.CollectionModelのインスタンスです。このクラスは、JSF DataModelクラスを拡張し、行キーのサポートを追加します。DataModelクラスでは、行は索引によって完全に識別されます。ただし、基になるデータが変更された場合に問題を回避するために、CollectionModelクラスが索引ではなく行キーに基づいています。
java.util.List、java.util.ArrayList、javax.faces.model.DataModelなど、別のモデル・インスタンスも使用できます。時系列の系列コンポーネントにより、インスタンスは自動的にCollectionModelクラスに変換されますが、機能は追加されません。CollectionModelクラスの詳細は、http://myfaces.apache.org/trinidad/trinidad-1_2/trinidad-api/apidocs/index.htmlにあるMyFaces TrinidadのJavadocを参照してください。
時系列を使用するには、JDeveloperでtimelineSeriesコンポーネントに次の属性が設定されている必要があります。
value: 時系列で表現されるデータ・モデルを参照するEL式。
var: レンダリング・フェーズで時系列コレクションの各要素を参照するために使用される変数の名前。この変数は、レンダリングが完了すると削除されるか、初期値に戻ります。
timelineSeriesコンポーネントの直下の子は、多くとも1つのtimelineItemコンポーネントである必要があります。このコンポーネントにより、スタンプ設定によるイベント・コンテンツのカスタマイズが可能になります。スタンプ設定を使用すると、時系列内に示されるイベントごとには子コンポーネントが作成されなくなります。コンポーネントのコンテンツは、時系列内に表示される各イベントのように、時系列アイテムごとに1回ずつ、繰り返しレンダリング(スタンプ設定)されます。
時系列アイテムがスタンプ設定されるたびに、現在のアイテムに対応する値がvarプロパティにコピーされ、オプションで、そのアイテムの追加データがvarStatusプロパティにコピーされます。これらのプロパティには、時系列アイテム・コンポーネント内のEL式でアクセスし、スタンプ設定されたaf:outputTextコンポーネントにアイテム値を渡したりできます。時系列のレンダリングが完了したら、varおよびvarStatusプロパティは削除されるか前の値に戻ります。
value、var、およびオプションのvarStatus属性の値は、時系列のデータ・モデル内、または、UI優先開発を使用している場合はクラスおよびマネージドBean内に、格納する必要があります。
例28-1に、アプリケーションにTimelineCBBeanマネージドBeanを追加するコードのサンプルを示します。このマネージドBeanは、データを含むクラスまたはBeanを参照し、オプションで、時系列をカスタマイズするその他のメソッドを追加します。ArrayListクラスで指定されているデータ・セットのリスト・アイテムがすべてこの例に含まれているわけではありません。
例28-1 時系列データを指定するためのマネージドBeanの例
//imports needed by methods
import java.text.DateFormat;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.Iterator;
import java.util.Set;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.bean.RequestScoped;
import javax.faces.component.behavior.ClientBehavior;
import javax.faces.component.behavior.ClientBehaviorHint;
import javax.faces.event.AjaxBehaviorEvent;
import oracle.adf.view.faces.bi.component.timeline.UITimelineSeries;
import org.apache.myfaces.trinidad.model.CollectionModel;
import org.apache.myfaces.trinidad.model.ModelUtils;
import org.apache.myfaces.trinidad.model.RowKeySet;
@ManagedBean(name="cb")
public class TimelineCBBean
{
private CollectionModel m_model;
public TimelineCBBean()
{
super();
}
public CollectionModel getModel()
{
if (m_model != null)
return m_model;
ArrayList _list = new ArrayList(10);
_list.add(new EmpEvent("0", parseDate("01.13.2010"), "Oracle Application
Express", "se198AyXcsk", null));
_list.add(new EmpEvent("1", parseDate("01.27.2010"), "Larry Ellison on the
Sun-Oracle Close", "ylNgcD2Ay6M", null));
...
m_model = ModelUtils.toCollectionModel(_list);
return m_model;
}
public void handleKey(AjaxBehaviorEvent event)
{
ClientBehavior _behavior = (ClientBehavior)event.getBehavior();
Set<ClientBehaviorHint> _hints = _behavior.getHints();
UITimelineSeries _series =
(UITimelineSeries)event.getComponent().findComponent("ts1");
if (_series == null)
return;
RowKeySet _rowKeySet = _series.getSelectedRowKeys();
Iterator _iterator = _rowKeySet.iterator();
ArrayList _list = (ArrayList)m_model.getWrappedData();
while (_iterator.hasNext())
{
Object _rowKey = _iterator.next();
Object _event = m_model.getRowData(_rowKey);
_list.remove(_event);
}
}
private static Date parseDate(String date)
{
Date ret = null;
try
{
ret = s_format.parse(date);
}
catch (ParseException e)
{
e.printStackTrace();
}
return ret;
}
static DateFormat s_format = new SimpleDateFormat("MM.dd.yyyy");
このマネージドBeanの例で提供されているのは、図28-7に示す従業員のプレゼンテーションの時系列用のデータ・モデルです。
TimelineCBBeanの完全なソース・コードは、ADF Facesデモ・アプリケーション内にあります。デモ・アプリケーションの詳細は、1.4項「ADF Facesデモ・アプリケーション」を参照してください。
時系列コンポーネントには構成可能な属性と子コンポーネントがあり、これらを追加または変更することにより、時系列の表示や動作をカスタマイズできます。接頭辞dvt:は、各時系列コンポーネント名の先頭に付いて、そのコンポーネントがADFデータ視覚化ツール(DVT)のタグ・ライブラリに属することを示します。
時系列の子コンポーネント、属性、およびサポートされているファセットを、次のエリアで構成できます。
時系列コンポーネント(timeline): 時系列の子コンポーネントとファセットをラップする親コンポーネントです。
時系列の系列(timelineSeries): 時系列コンポーネントの直下の子で、時系列のデータ・レイヤーの指定に使用されます。時系列内に少なくとも1つの系列を指定する必要があります。追加の系列をあと1つまで指定して、時系列間の比較に使用できます。
時系列の系列コンポーネントは、次のようなコンテキスト・メニューの構成に使用できるファセットをサポートします。
bodyContextMenu: 時系列コンポーネント内の選択不可能な要素に表示されるコンテキスト・メニューを指定します。
contextMenu: 時系列コンポーネントの選択可能な要素に表示されるコンテキスト・メニューを指定します。
時系列アイテム(timelineItem): timelineSeriesの子で、時系列内のイベントを表します。このコンポーネントは、af:outputText、af:image、af:panelGroupLayoutなど、多くのADF Facesコンポーネントの使用をサポートします。
マーカー(marker): 概要パネルでイベントを表す、構成可能な形状です。各属性は、timelineItemコンポーネントの指定されたoverviewItemファセットの子で指定されます。
時間軸(timeAxis): timelineの子で、時間軸、および概要時間軸の指定に使用されるtimelineOverviewの指定に使用されます。
時系列概要(timelineOverview): 時系列のすべての系列の全イベントの大局的な表示に使用されるオプションのコンポーネントです。ユーザーは、ズーム制御を使用して時系列をスクロールできます。
UI優先開発を使用してページを設計する場合は、コンポーネント・パレットを使用して時系列をJSFページに追加します。時系列コンポーネントをページにドラッグ・アンド・ドロップすると、時系列のアーティファクトとソース・コードがビジュアル・エディタに追加され、構造ウィンドウにタグ構造が追加されます。
ページに時系列を追加したら、プロパティ・インスペクタを使用してデータ値を指定し、表示属性を構成できます。プロパティ・インスペクタで、各属性フィールドのドロップダウン・メニューを使用して、プロパティの説明、およびEL式ビルダーまたはその他の専用ダイアログの表示などのオプションを表示できます。図28-8に、時系列のendTime属性のドロップダウン・メニューを示します。
|
注意: アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用して時系列を作成でき、バインドが自動的に行われます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた時系列の作成に関する項を参照してください。 |
開始する前に:
時系列の属性や時系列の子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、第28.2.2項「時系列の構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、第28.1.3項「時系列コンポーネントの追加機能」を参照してください。
ページに時系列を追加するには:
コンポーネント・パレットで、「ADFデータ視覚化」ページの「ガント」セクションから、Timelineコンポーネントをページにドラッグ・アンド・ドロップします。
プロパティ・インスペクタに時系列の属性を表示します。ヘルプ・ボタンを使用して、timelineコンポーネントの完全なタグ・ドキュメントを表示します。
「外観」セクションを開き、次の属性の値を入力します。
EndTime: 時系列の時間範囲に使用する終了日をyyyy-mm-dd形式で入力します。時系列に表示するデータ・コレクション内に含めるイベントの終了日を選択します。デフォルトでは、この属性には現在の日付が使用されます。
StartTime: 時系列の時間範囲に使用する開始日をyyyy-mm-dd形式で入力します。時系列に表示するデータ・コレクション内に含めるイベントの開始日を選択します。デフォルトでは、この属性には現在の日付が使用されます。
オプションで、次の属性の値を入力します。
Orientation: 属性のドロップダウン・メニューを使用して、デフォルトのレイアウトをhorizontalからverticalに変更します。
時系列の向きのサンプル・イメージについては、第28.1.2.1項「レイアウト・オプション」を参照してください。
ItemPosition: 垂直方向の時系列を使用する場合は、デフォルトで、時系列に使用可能なスペース内で時系列アイテムが縦に重複しません。デフォルト値は、noOverlapです。垂直方向の場合、この属性は水平に並ぶ時系列アイテムの表示には適用されません。
属性値randomを使用すると、時系列に使用可能なスペース内に時系列アイテムが垂直にランダムでレイアウトされるように指定できます。
Summary: 時系列の目的およびスクリーン・リーダーをサポートするための構造の概要を入力します。
TimeZone: 時系列に使用するタイムゾーンを入力します。設定されていない場合は、AdfFacesContextから値が特定されます。
「動作」セクションを開き、次の属性の値を入力します。
ItemSelection: ドロップダウン・リストを使用して、時系列内の時系列アイテムを選択可能にするかどうかを指定します。有効な値は、single (デフォルト)、multipleまたはnoneです。2つの時系列の場合、この設定は時系列の両方の系列に適用されます。
SortData: 時系列のイベントのソートを、時系列でイベントの時刻に基づいて自動的に行うか、時系列がバインドされているデータ・モデルにより手動で行うかの設定に使用します。有効な値は、auto (デフォルト)またはnoneです。
FetchStartTimeとFetchEndTime: これらの属性を使用して、データ・ソースからコンテンツを配信するときに使用される開始日と終了日を指定します。
時系列の時間軸を指定するには、次のようにします。
構造ウィンドウでtimelineノードを右クリックして、「dvt:timelineの中に挿入」→「時間軸」と選択します。
「時間軸の挿入」ダイアログで、時系列の時間軸に使用するスケールを入力します。有効な値は、twoyears、years、quarters、twomonths、months、twoweeks、weeks、days、sixhours、threehours、hours、halfhoursおよびquarterhoursです。
時系列に時系列概要を追加するには、次のようにします。
構造ウィンドウでtimelineノードを右クリックして、「dvt:timelineの中に挿入」→「時系列概要」と選択します。
構造ウィンドウでtimelineOverviewノードを右クリックして、「dvt:timelineOverviewの中に挿入」→「時間軸」と選択します。
「時間軸の挿入」ダイアログで、時系列の概要時間軸の表示に使用するスケールを入力します。有効な値は、twoyears、years、quarters、twomonths、months、twoweeks、weeks、days、sixhours、threehours、hours、halfhoursおよびquarterhoursです。
プロパティ・インスペクタで追加の属性を設定しないでコンポーネント・パレットからJSFページに時系列をドラッグ・アンド・ドロップすると、JDeveloperによりタグが1つのみ生成されます。例28-2に生成されるコードを示します。
時系列を作成するときに、「データ・コントロール」パネルを使用してデータ・コントロールにデータをバインドする場合は、JDeveloperにより、データ・モデルに基づいてコードが生成されます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた時系列の作成に関する項を参照してください。
時系列コンポーネントには、属性を表示するためのコレクション・データ・モデルが必要です。たとえば、図28-7に示す従業員のプレゼンテーションの時系列を作成するには、条件を満たす日付値とイベントに関する詳細を含むデータ・モデルを指定する必要があります。
UI優先開発を使用して時系列にデータを追加するには、クラス、マネージドBeanおよびメソッド(モデルを作成し、JDeveloperのクラス、Beanおよびメソッドを参照する)を作成します。
開始する前に:
時系列の属性や時系列の子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、第28.2.2項「時系列の構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、第28.1.3項「時系列コンポーネントの追加機能」を参照してください。
ページに時系列を追加します。ページへの時系列の追加の詳細は、第28.2.3項「ページへの時系列の追加方法」を参照してください。また、時系列の開始時間および終了時間が使用するデータ・モデルと一致していることを確認してください。
時系列のデータ・モデルを定義するクラスとマネージドBeanを作成し、時系列のデータを指定します。詳細と例は、第28.2.1項「時系列コンポーネントのデータ要件」を参照してください。クラス作成のヘルプは、JDeveloperのオンライン・ヘルプの「キュー・カード」→Hello Worldのビルド→Javaクラスの作成のトピックを参照してください。マネージドBeanの詳細は、2.6項「マネージドBeanの作成と使用」を参照してください。
UI優先開発で時系列にデータを追加するには:
構造ウィンドウでtimelineノードを右クリックして、「dvt:timelineの中に挿入」→「時系列の系列」と選択します。
timelineSeriesノードを右クリックして、「プロパティに移動」を選択します。
プロパティ・インスペクタで、「共通」セクションを開いて次の属性を設定します。
Value: 時系列をバインドするモデルのEL式を指定します。これは、org.apache.myfaces.trinidad.model.CollectionModelのインスタンスである必要があります。
|
注意:
|
たとえば、時系列をインスタンス化するために作成したマネージドBeanを参照します。従業員のプレゼンテーションの例では、時系列のマネージドBeanはcbという名前で、データは時系列が参照されたときにインスタンス化されています。この従業員プレゼンテーションの例のデータを時系列で使用するには、EL式の「Value」フィールドに#{cb.Model}と入力します。
EL式の作成のヘルプについては、第2.5.1項「EL式の作成方法」を参照してください。
Var: レンダリング・フェーズで時系列コレクションの各要素を参照するために使用される変数の名前を入力します。この変数は、レンダリングが完了すると削除されるか、初期値に戻ります。
たとえば、従業員プレゼンテーションの例のデータの各要素を参照するには、「Var」フィールドにevtと入力します。
VarStatus: オプションとして、レンダリング・フェーズの変数の名前を入力し、コレクション・モデルやループ・カウンタ情報など、コンポーネントの状態に関するコンテキスト情報にアクセスします。この変数は、レンダリングが完了すると削除されるか、初期値に戻ります。
構造ウィンドウでtimelineSeriesノードを右クリックし、「時系列の系列の中に挿入」→「時系列アイテム」と選択して、スタンプ設定によって時系列の系列データを表示するコンポーネントを追加します。
dvt:timelineItemのプロパティ・インスペクタで、「共通」セクションを開いて次の値を入力します。
Value: 時系列上にアイテムとして表示する日付に関連付けられた値を参照するEL式を入力します。たとえば、日付に関連付けられた従業員プレゼンテーションのコレクションでは、プレゼンテーション日付を時系列アイテムとして表示できます。
たとえば、従業員のプレゼンテーションのデータ・ソースを参照するには、#{evt.date}と入力します。
Group: オプションで、共通の日付を持つ時系列アイテムをグループとして表示し、実行時にそのグループを開いたり閉じたりできるように構成できます。デフォルトでは、閉じた表示に、グループ内のアイテム数を示す数値カウンタが表示されます。
時系列アイテムに時系列アイテムのデータ・コレクションの属性を表示するように構成するには、次のようにします。
時系列概要に表示される時系列アイテムを表すマーカーを構成するには、次のようにします。
構造ウィンドウでoverviewItemファセットを右クリックして、「f:facet-overviewItemの中に挿入」→「マーカー」と選択します。
プロパティ・インスペクタで、形状、サイズおよび塗りつぶしの色の値を適宜設定します。
例28-3 データにバインドされた時系列のコード・サンプル
<dvt:timeline id="tl1" startTime="2010-01-01" endTime="2011-12-31"
inlineStyle="width:1000px;height:500px" itemSelection="single">
<dvt:timelineSeries id="ts1" var="evt" value="#{cb.model}">
<dvt:timelineItem id="ti1" value="#{evt.date}">
<af:panelGroupLayout id="pg1" layout="horizontal">
<af:image id="img1" inlineStyle="width:30px;height:30px"
source="/resources/images/timeline/employment.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>
</dvt:timelineItem>
</dvt:timelineSeries>
<dvt:timeAxis id="ta1" scale="weeks"/>
<dvt:timelineOverview id="ov1">
<dvt:timeAxis id="ta2" scale="years"/>
</dvt:timelineOverview>
<f:ajax event="keyUp" execute="@this" listener="#{cb.handleKey}"/>
</dvt:timeline>
時系列の系列を1つまで追加して2つの時系列を構成し、2系列のイベントを比較できます。別のtimelineSeriesコンポーネントを追加、構成する場合も、手順は同じです。
この章の例では、クラスとマネージドBeanを使用して時系列にデータを提供しています。アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用して時系列を作成でき、バインドが自動的に行われます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のデータバインドされた時系列の作成に関する項を参照してください。
また、最終的にページのUIコンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合は、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールを使用します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のプレースホルダ・データ・コントロールを使用したページの設計に関する項を参照してください。
時系列アイテムを構成して、時系列にカスタムのタイム・スケールを追加できます。
時系列アイテムは、時系列に表示されるイベントを表します。timelineItemコンポーネントは、情報を表示し、イベントに関連付けられたアクションを指定するために、次のADFコンポーネントをサポートします。
レイアウト・コンポーネントには、af:panelFormLayout、af:panelGroupLayout、af:separator、af:showDetailItemおよびaf:spacerがあります。これらのコンポーネントの使用方法の詳細は、第8章「Webページ上のコンテンツの編成」を参照してださい。
メニュー・コンポーネントaf:menu。これらのコンポーネントの詳細は、第14章「メニュー、ツールバーおよびツールボックスの使用方法」を参照してください。
出力コンポーネントには、af:outputFormattedとaf:outputTextがあります。これらのコンポーネントの詳細は、第16章「出力コンポーネントの使用」を参照してください。
メッセージ・コンポーネントaf:outputLabelMessage。このコンポーネントの詳細は、第17章「ヒント、メッセージおよびヘルプの表示」を参照してください。
ナビゲーション・コンポーネントaf:commandButtonおよびaf:commandLink。これらのコンポーネントの詳細は、第18章「ナビゲーション・コンポーネントの使用」を参照してください。
イメージ・コンポーネントaf:image。af:imageコンポーネントの使用方法の詳細は、第16.4項「イメージの表示」を参照してください。
af:showPopupBehavior: af:showPopupBehavior:コンポーネントの使用方法の詳細は、第13.4項「ポップアップ要素の起動」を参照してください。
時系列アイテムは、構成可能な形状として時系列概要に表示されます。時系列アイテムのマーカーには、次の属性を指定できます。
fillColor: マーカー形状の色です。有効な値は、16進数のRGB色です。
opacity: マーカーの塗りつぶし色の不透明度です。有効な値の範囲は、0パーセント(透明)から100パーセント(不透明)です。
shape: 選択された時系列の各系列の値に対応する概要マーカーの形状です。有効な値は、事前に作成された7つの形状である、circle (デフォルト)、diamond、human、plus、square、triangleDown、triangleUpのいずれかです。この属性は、垂直方向の時系列ではサポートされません。
scaleXおよびscaleY: scaleX (水平)およびscaleY (垂直)のスケール係数です。有効な値はパーセンテージの数字です。マーカーが大きすぎる場合は、JDeveloperにより、時系列の概要領域に合せて自動的にマーカーのサイズが変更されます。これらの属性は、垂直方向の時系列ではサポートされません。
時系列と概要の軸にカスタム・タイム・スケールを作成できます。カスタム・タイム・スケールは、dvt:timeAxisのscale属性で構成します。
開始する前に:
時系列の属性や時系列の子コンポーネントが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、第28.2.2項「時系列の構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、第28.1.3項「時系列コンポーネントの追加機能」を参照してください。
ページにすでに時系列が存在している必要があります。ない場合は、この章の説明に従って時系列を作成します。詳細は、第28.2.3項「ページへの時系列の追加方法」を参照してください。
カスタム時間軸を作成し使用する手順:
CustomTimescale.javaインタフェースを実装して、時間軸を作成するためにgetNextDate(Date currentDate)メソッドをループでコールします。例28-4に、インタフェースのサンプル・コードを示します。
構造ウィンドウでtimelineノードを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタの「拡張」カテゴリで、CustomTimeScales属性に、カスタム時間軸のインタフェースの実装を登録します。
customTimeScales属性の値は、java.util.Mapオブジェクトです。指定したマップ・オブジェクトには、キー/値のペアが含まれます。キーはタイム・スケール名(fiveyears)で、値はCustomTimeScale.javaインタフェースの実装です。次に例を示します。
customTimesScales="#{timeline.customTimescales}"
時間軸または概要時間軸でカスタム・タイム・スケールを使用するには、構造ウィンドウでdvt:timeAxisノードを右クリックし、プロパティ・インスペクタでカスタム・タイム・スケール名を入力します。
例28-5に、時間軸にthreeyearsを、概要時間軸にfiveyearsを設定するサンプル・コードを示します。
時系列に、ポップアップのサポート、カスタム・コンテキスト・メニュー、ドラッグ・アンド・ドロップ操作などのインタラクティブ機能を追加できます。
timelineItemコンポーネントは、情報を提供したり、エンド・ユーザーからの入力を要求したりするポップアップのダイアログ、ウィンドウおよびメニューが表示されるように構成できます。af:popupコンポーネントを他のADF Facesコンポーネントで使用すると、セカンダリ・ウィンドウでの情報の表示および非表示、追加データの入力、コンテキスト・メニューなどの機能の呼出しを、エンド・ユーザーに許可する機能を構成できます。
ADF Facesのコンポーネントでは、ポップアップの表示または非表示にJavaScriptは不要です。af:showPopupBehaviorタグは宣言的ソリューションとなるため、popupコンポーネントを開くためのJavaScriptの作成や、スクリプトのpopupコンポーネントへの登録の必要がありません。これらのコンポーネントの詳細は、第13章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。
次のコンテキスト・メニュー・ファセットを使用して、時系列のコンテキスト・メニューを定義します。
bodyContextMenu: 時系列コンポーネント内の選択不可能な要素に表示されるコンテキスト・メニューを指定します。
contextMenu: 時系列コンポーネントの選択可能な要素に表示されるコンテキスト・メニューを指定します。
JSPまたはJSPXページの各ファセットでは、1つの子コンポーネントがサポートされます。これらのファセットを機能させるには、時系列のプロパティで選択が有効になっている必要があります。コンテキスト・メニューは、現在のところFlashでのみサポートされています。
af:popupコンポーネント内のaf:menuコンポーネントを使用してコンテキスト・メニューを作成します。ついで、指定されたトリガーに基づき、別のコンポーネントからコンテキスト・メニュー・ポップアップを起動できます。コンテキスト・メニューの構成の詳細は、第13章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。
時系列は、ページ上のコレクション・コンポーネントとの間のドロップ・ターゲットまたはドラッグ元として構成できます。たとえば、図28-6に示すように、1つのコレクションからアイテム(表の行など)をドラッグして時系列にドロップしたり、時系列からイベントをドラッグして表にドロップしたりできます。
時系列にドロップ・サポートを追加するには、timelineコンポーネントにaf:dropTargetタグを追加し、時系列がサポートするデータ・フレーバを組み込みます。ドロップ・イベントに応答する時系列のマネージドBeanにdropListenerメソッドを追加します。
時系列からコレクション・コンポーネントへのドラッグ・サポートを追加するには、timelineコンポーネントにaf:dragSourceタグを追加し、ドラッグを受ける側のコンポーネントにaf:collectionDropTargetタグを追加します。ドラッグを受ける側のコンポーネントには、org.apache.myfaces.trinidad.model.RowKeySetデータ・フレーバをaf:collectionDropTargetの子として組み込み、ドロップ・イベントに応答するためのdropListenerメソッドも定義します。
例28-6に、図28-6に示すADF Facesデモ・アプリケーションのJSFページのサンプル・コードを示します。af:tableコンポーネントの詳細は、第10章「表、ツリー、およびその他のコレクションベースのコンポーネントの使用」を参照してください。
例28-6 時系列のドロップ・ターゲットとドラッグ元のサンプル・コード
<dvt:timeline id="tl1" startTime="2010-01-01" endTime="2011-12-31"
inlineStyle="width:800px;height:400px" itemSelection="single">
<f:attribute name="horizontalFetchSizeOverride" value="3000"/>
<dvt:timelineSeries id="ts1" var="evt" value="#{dnd.timelineModel}">
<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/employment.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>
</dvt:timelineItem>
<af:dragSource actions="COPY" discriminant="model"/>
<af:dropTarget actions="COPY" dropListener="#{dnd.handleDropOnTimeline}">
<af:dataFlavor flavorClass="org.apache.myfaces.trinidad.model.RowKeySet"
discriminant="model2"/>
</af:dropTarget>
</dvt:timelineSeries>
<dvt:timeAxis id="ta1" scale="weeks"/>
<dvt:timelineOverview id="ov1">
<dvt:timeAxis id="ta2" scale="years"/>
</dvt:timelineOverview
</dvt:timeline>
<af:table var="row" value="#{dnd.tableModel}" rowSelection="single"
inlineStyle="width:370px;height:400px">
<af:column headerText="ID" width="20">
<af:outputText value="#{row.id}"/>
</af:column>
<af:column headerText="Event" width="340">
<af:outputText value="#{row.description}"/>
</af:column>
<af:dragSource actions="COPY" discriminant="model2"/>
<af:collectionDropTarget actions="COPY" modelName="model"
dropListener="#{dnd.handleDropOnTable}"/>
</af:table>
この例のデータ・モデルは、TimelineDnDBeanマネージドBeanにArrayListクラスを使用して定義されています。このクラス、およびこれをサポートするEmpEventクラスのソース・コードは、ADF Facesデモ・アプリケーション内にあります。デモ・アプリケーションの詳細は、1.4項「ADF Facesデモ・アプリケーション」を参照してください。
開始する前に:
時系列の属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、第28.2.2項「時系列の構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、第28.1.3項「時系列コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
ページに時系列を追加します。詳細は、第28.2.3項「ページへの時系列の追加方法」を参照してください。
時系列アイテムをドラッグ元として構成していて、ページへのコンポーネントの追加時に時系列をデータ・コントロールにバインドしていない場合は、データを時系列に追加します。UI優先開発を使用してデータを時系列に追加する場合の詳細は、第28.3.1項「時系列へのデータの追加方法」を参照してください。
ドラッグ・アンド・ドロップをサポートするのに必要な追加コンポーネントを作成します。
たとえば、ドラッグ元またはドロップ・ターゲットとして表を使用する場合は、ページに表を追加する必要があります。
時系列にドラッグ・アンド・ドロップ・サポートを追加するには:
構造ウィンドウでtimelineコンポーネントを右クリックして、「時系列の中に挿入」→「ドロップ・ターゲット」と選択します。
「ドロップ・ターゲットの挿入」ダイアログで、ドロップ・リスナーの名前を入力するか、ドロップダウン・メニューを使用して「編集」を選択し、時系列のマネージドBeanにドロップ・リスナー・メソッドを追加します。または、ドロップダウン・メニューを使用して式ビルダーを選び、ドロップ・リスナーのEL式を入力してください。
たとえば、dndというマネージドBeanにhandleDropOnTimeline()というメソッドを追加するには、「編集」を選択し、ドロップダウン・メニューから「dnd」を選択して、「メソッド」フィールドの右にある「新規」をクリックし、handleDropOnTimeline()メソッドを作成します。
例28-7に、図28-6に表示されている時系列のサンプル・ドロップ・リスナーと、それをサポートするメソッドを示します。
例28-7 時系列のサンプル・ドロップ・リスナー
// imports needed by methods
import java.text.DateFormat;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.bean.RequestScoped;
import oracle.adf.view.rich.datatransfer.DataFlavor;
import oracle.adf.view.rich.datatransfer.Transferable;
import oracle.adf.view.rich.dnd.DnDAction;
import oracle.adf.view.rich.event.DropEvent;
import org.apache.myfaces.trinidad.context.RequestContext;
import org.apache.myfaces.trinidad.model.CollectionModel;
import org.apache.myfaces.trinidad.model.ModelUtils;
import org.apache.myfaces.trinidad.model.RowKeySet;
// drop listener
public DnDAction handleDropOnTimeline(DropEvent event)
{
Date _date = (Date)event.getDropSite();
Transferable _transferable = event.getTransferable();
RowKeySet _rowKeySet = _transferable.getData(DataFlavor.ROW_KEY_SET_FLAVOR);
Object _rowKey = _rowKeySet.iterator().next();
EmpEvent _event = (EmpEvent)m_tableModel.getRowData(_rowKey);
_event.setDate(_date);
orderInsert(_event);
RequestContext.getCurrentInstance().addPartialTarget
(event.getDragComponent());
return DnDAction.COPY;
}
private void orderInsert(EmpEvent event)
{
int _index = -1;
ArrayList _list = (ArrayList)m_timelineModel.getWrappedData();
for (int i=0; i<_list.size(); i++)
{
EmpEvent _current = (EmpEvent)_list.get(i);
if (event.getDate().before(_current.getDate()))
{
_index = i;
break;
}
}
if (_index == -1)
_list.add(event);
else
_list.add(_index, event);
ArrayList _list2 = (ArrayList)m_tableModel.getWrappedData();
_list2.remove(event);
}
「OK」をクリックし、「データ・フレーバの挿入」ダイアログに、org.apache.myfaces.trinidad.model.RowKeySetを入力します。
構造ウィンドウでaf:dropTargetコンポーネントを右クリックし、「プロパティに移動」を選択して、プロパティ・インスペクタで次の属性を設定します。
Actions: ドロップ・ターゲットが受け入れる操作をスペース区切りのリストで入力します。許容値は、COPY、MOVEまたはLINKです。値を指定しない場合、ドロップ・ターゲットはCOPYを使用します。
Discriminant: ドロップ・ターゲットとドラッグ元が互換性のために共有するモデル名を指定します。この属性の値は、手順5で時系列からドラッグを受けるコレクション・コンポーネントに設定する、dragSourceコンポーネントのdiscriminant属性の値に一致する必要があります。
別のコレクション・コンポーネントを時系列へのドロップのドラッグ元として構成するには、次のようにします。
時系列をドラッグ元として構成するには、コンポーネント・パレットの「操作」パネルから、「ドラッグ元」のタグを時系列の子としてドラッグ・アンド・ドロップします。
構造ウィンドウでaf:dragSourceコンポーネントを右クリックし、「プロパティに移動」を選択して、プロパティ・インスペクタで次の属性を設定します。
Actions: コレクション・ドロップ・ターゲット・コンポーネントが受け入れる操作をスペース区切りのリストで入力します。
Discriminant: ドラッグ元とコレクション・ドロップ・ターゲットが互換性のために共有するモデル名を指定します。この属性の値は、手順8で時系列からドラッグを受けるコレクション・コンポーネントに設定する、af:collectionDropTargetコンポーネントのmodelName属性の値に一致する必要があります。
別のコレクション・コンポーネントを時系列からのドロップのドロップ・ターゲットとして構成するには、次のようにします。
コンポーネント・パレットの「操作」パネルで、「コレクション・ドロップ・ターゲット」を、ドロップを受けるコンポーネントにドラッグ・アンド・ドロップします。
たとえば、「コレクション・ドロップ・ターゲット」を、ドロップの結果を表示するaf:tableコンポーネントの子としてドラッグ・アンド・ドロップします。
ドロップ・ターゲットを挿入ダイアログで、ドロップ・リスナーの名前を入力するか、ドロップダウン・メニューを使用して編集を選び、ドロップ・リスナー・メソッドを適切なマネージドBeanに追加してください。
例28-8に、図28-6に表示されている時系列のサンプル・ドロップ・リスナーを示します。この例では、例28-7で使用されているものと同じインポートおよびヘルパー・メソッドが使用されるため、ここにはそれらを記載していません。
例28-8 時系列をドラッグ元として使用する表のサンプル・ドロップ・リスナー
//Drop Listener
public DnDAction handleDropOnTable(DropEvent event)
{
Integer _dropSite = (Integer)event.getDropSite();
Transferable _transferable = event.getTransferable();
RowKeySet _rowKeySet = _transferable.getData(DataFlavor.ROW_KEY_SET_FLAVOR);
Object _rowKey = _rowKeySet.iterator().next();
EmpEvent _event = (EmpEvent)m_timelineModel.getRowData(_rowKey);
ArrayList _list = (ArrayList)m_tableModel.getWrappedData();
_list.add(_dropSite.intValue(), _event);
ArrayList _list2 = (ArrayList)m_timelineModel.getWrappedData();
_list2.remove(_event);
RequestContext.getCurrentInstance().addPartialTarget
(event.getDragComponent());
return DnDAction.COPY;
}
private static Date parseDate(String date)
{
Date ret = null;
try
{
ret = s_format.parse(date);
}
catch (ParseException e)
{
e.printStackTrace();
}
return ret;
}
「OK」をクリックし、「データ・フレーバの挿入」ダイアログに、org.apache.myfaces.trinidad.model.RowKeySetを入力します。
構造ウィンドウでaf:dropTargetコンポーネントを右クリックし、「プロパティに移動」を選択します。
プロパティ・インスペクタにおいて、「アクション」フィールドに、ドロップ・ターゲットが受け入れる操作のリストを、空白で区切って入力します。
「ModelName」フィールドに、コレクションのモデルを定義します。modelName属性の値は、互換性の目的でドラッグ元の特定に使用されるStringオブジェクトです。この属性の値は、手順7で設定したaf:dragSourceコンポーネントのdiscriminant属性の値に一致する必要があります。
ADF FacesまたはADFデータ視覚化コンポーネントのドラッグ・アンド・ドロップの構成の詳細は、第34章「ドラッグ・アンド・ドロップ機能の追加」を参照してください。
