timeline
コンポーネントを使用し、簡単なUI優先開発を使用してデータを表示する方法について説明します。データ要件、タグ構造、およびコンポーネントの概観と動作をカスタマイズするためのオプションの定義についても説明します。
アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用して時系列を作成することもできます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「データ・バインドされたガント・チャートおよび時系列コンポーネントの作成」の章を参照してください。
この章の内容は次のとおりです。
対話型のデータ視覚化ツールであるtimelineを使用すると、ユーザーはイベントを時間順に表示して、定義された時間範囲内で時間を進めたり戻したりできます。各イベントは時系列アイテムとして表され、単純なADFコンポーネントを使用してテキストやイメージなどの情報を表示したり、リンクなどのアクションを提供したりします。2つの時系列を構成して2系列のイベントを表示し、関連する情報を並べて比較することもできます。
時系列コンポーネントでは、関連付けられた時系列アイテムのグループ(共通の雇用日など)やアクティビティのグループ(多数ある従業員用書類の記入完了など)を開いたり、閉じたりできます。また、時系列コンポーネントでは、時間範囲を調整して表示を変更し、ズーム・インやズーム・アウトを行う機能もサポートします。
時系列は、時間軸に沿った時系列アイテムとしてのイベントの表示、時系列に表示可能な期間に対応する移動可能な概要ウィンドウ、および時系列の時間増分全体を示した概要時間軸で構成されます。表示可能な時間範囲は、水平方向のズーム制御を使用して変更できます。イベントに対応する各時系列アイテムは、関連付けられた情報やアクションを表示し、時間軸への引出線と概要時間軸内のマーカーで表されます。
たとえば、図29-1の時系列は、Summit DVTの例における従業員の雇用日を時間順に表示するように構成されています。この例では、各イベントを表す時系列アイテムに、イメージとラベル付きテキストを使用して従業員に関する情報を表示しています。概要ウィンドウは、時系列アイテムを表示する時間範囲を定義します。このウィンドウは、ズーム・コントロールを変更するか、ウィンドウの端の位置を変更して拡大または縮小することでサイズを調整できます。選択が構成されている場合は、時系列アイテム、引出線、および概要パネルのイベント・マーカーが強調表示されます。
図29-1 従業員の雇用日の時系列
2つの時系列を使用して最大2系列のイベントを比較できます。図29-2に、10年間にわたる2人の従業員の変化のイベントを比較した2つの時系列を示します。時系列イベントは、3年を超える期間を表す概要ウィンドウに四半期単位の時間軸を使用して表示されています。現在の日付は、概要時間軸の線で示されます。
図29-2 従業員の変化イベントを比較した2つの時系列
時系列をどのように使用し、どのようにカスタマイズできるかを理解するには、次の要素と機能について理解すると役に立ちます。
デフォルトでは、時系列は時系列に表示可能な期間に対応する移動可能な概要ウィンドウを含む概要パネルをサポートします。調整可能なズーム・レベルを含む時系列の時間増分全体を表示するオプションの概要時間軸を時系列に追加できます。
図29-3に、時系列の特定の期間に発生するイベントを表示する概要パネルを含む、講演の仕事の時系列を示します。時系列の時間軸は、毎時と半年の間で調整可能なズーム・レベルを含む時系列の時間増分全体を表示します。
図29-3 「時系列概要」パネルおよび時間軸
デフォルトでは、時系列は水平方向に表示され、イベントは水平の時間軸と概要パネルに沿ってレイアウトされます。このレイアウトを垂直方向に変更して、イベントが垂直の時間軸と概要パネルに沿って表示されるようにできます。水平方向の場合は時系列アイテムが画面で互いに重ならないように指定できますが、この構成を垂直方向のアイテムに適用できません。
図29-4に、水平方向の時系列と、同じ時系列を垂直方向にしたものとの比較を示します。
図29-4 水平方向と垂直方向の時系列
時系列に表示される各イベントは、時系列アイテムとして表示されます。時系列アイテムには、イメージ、テキスト、テキスト・ラベルなどのデータ表示コンポーネントや、リンク、ボタン、メニューなどのアクションを含めることができます。イベントは、引出線で時系列の時間軸内の日付に結び付けられます。イベントは、概要パネル内に、構成可能なマーカーとして示されます。
デフォルトでは、時系列アイテムは実行時の選択に対応するようには構成されていません。構成を行うことで、単一または複数の時系列アイテムの選択が可能になります。実行時には、イベント、引出線、および概要パネル内のマーカーが強調表示されます。
共通の日付を持つ時系列アイテムをグループとして表示し、実行時にそのグループを開いたり閉じたりできるように構成できます。デフォルトでは、閉じた表示に、グループ内のアイテム数を示す数値カウンタが表示されます。グループ化された時系列アイテムの任意の場所をクリックすると、閉じた表示の全アイテムが開き、時系列内をクリックすると開いた表示が閉じます。
図29-5に、カウンタを持つ時系列アイテムが開いた表示になる様子を示します。
図29-5 時系列のグループ・カウンタと開かれた表示
時系列コンポーネントは、表など、別のコレクション・コンポーネントとの間のドラッグ・アンド・ドロップ操作をサポートします。
図29-6に、ドロップ・ターゲットおよびドラッグ元として構成された時系列を示します。ユーザーが表のいずれかの行を時系列にドラッグすると、属性が時系列アイテムとして表示されます。また、時系列アイテムを選択して表にドラッグすれば、属性を行に表示できます。
図29-6 ドロップ・ターゲットおよびドラッグ元として構成された時系列
時系列にデータ・ソースからどのようにデータを配信するかを構成できます。データは、レンダリング時にデータが使用可能になり次第、または、コンポーネントのシェルがレンダリングされた後の遅延フェッチのいずれかで、時系列に配信できます。時系列では、デフォルトで、使用可能になり次第すぐのデータ・ソースからのコンテンツ配信がサポートされます。contentDelivery
属性は、デフォルトでwhenAvailable
に設定されています。
時系列は仮想化されています。つまり、サーバーの一部のデータのみがクライアントに配信され、表示されます。日付に関連する値に基づいて、一度に特定の数の行または列をデータ・ソースからフェッチするように時系列を構成できます。フェッチ・サイズを構成するには、fetchStartTime
およびfetchEndTime
を使用してください。
時系列では、HTML5、FlashおよびPortable Network Graphics (PNG)のイメージ形式がサポートされます。すべてのイメージ形式で、右から左への表示を使用するロケールがサポートされます。
デフォルトでは、時系列はクライアント・ブラウザでサポートされている最良の出力形式で表示されます。最良の出力形式をクライアントで使用できない場合、アプリケーションでは使用可能な形式がデフォルトになります。たとえば、クライアントがHTML5をサポートしていない場合、アプリケーションでは次が使用されます。
Flash (Flash Playerが使用可能な場合)
アプリケーション全体でFlashコンテンツの使用を制御するには、adf-config.xml
でflash-player-usage
コンテキスト・パラメータを設定します。詳細は、「コンポーネント出力形式としてのFlashの構成」を参照してください。
PNG出力形式
静的レンダリング、たとえば、Flash表示パンおよびズーム状態の保持は、印刷可能なPNG出力形式使用時には完全にサポートされますが、次のような一部の対話機能は使用できません。
アニメーション
コンテキスト・メニュー
ドラッグ・アンド・ドロップ・ジェスチャ
ポップアップのサポート
選択項目
ADF Facesでは、印刷または電子メール用の簡略化されたモードで、ADF Faces WebアプリケーションからJSFページを出力できます。たとえば、ユーザーがページ(またはページの一部)を印刷できるようにし、一方でWebブラウザでレンダリングされているとおりにページを印刷するのではなく、スクロールバーやボタンなど、印刷ページに必要ないアイテムを削除することが望ましい場合があります。ページが電子メールで送信される場合は、電子メール・クライアントが正しく表示できるようにページを簡略化する必要があります。
ADF Facesでは、印刷または電子メール用の簡略化されたモードで、ADF Faces WebアプリケーションからJSFページを出力できます。たとえば、ユーザーがページ(またはページの一部)を印刷できるようにし、一方でWebブラウザでレンダリングされているとおりにページを印刷するのではなく、スクロールバーやボタンなど、印刷ページに必要ないアイテムを削除することが望ましい場合があります。ページが電子メールで送信される場合は、電子メール・クライアントが正しく表示できるようにページを簡略化する必要があります。このような出力用に簡略化されたページを作成する場合の詳細は、「様々な出力モードの使用」を参照してください。
印刷可能または電子メール送信可能なページに出力されるJSFページに時系列が表示された場合:
現在時系列に表示されているイベントのみがコンテンツに含まれます。
電子メール・モードでは、イベントは表として表示されます。
印刷モードでは、時系列の概要はレンダリングされません。
timeline
コンポーネントを実装する前に、その他のADF Faces機能を理解しておくと役に立ちます。また、いったん時系列をページ追加すると、検証やアクセシビリティなどの機能を追加する必要があることに気付く場合があります。
timeline
コンポーネントで使用できるその他の機能へのリンクは、次のとおりです。
部分ページ・レンダリング: 他のコンポーネントで実行されたアクションに基づく新しいデータをページ上に表示するために、時系列をリフレッシュできます。詳細は、「部分ページ・コンテンツの再レンダリング」を参照してください。
パーソナライズ: 有効になっている場合、ユーザーは実行時の時系列の表示方法を変更できます。アプリケーションがユーザーのカスタマイズを許可するように構成されていないかぎり、ユーザーがページを終了するとそれらの値は保持されません。詳細は、「JSFページでのユーザー・カスタマイズの許可」を参照してください。
アクセシビリティ: デフォルトでは、時系列コンポーネントはアクセス可能です。時系列コンポーネントのあるアプリケーション・ページを、スクリーン・リーダーのユーザーがアクセスできるように構成できます。詳細は、「アクセス可能なADF Facesページの開発」を参照してください。
タッチ装置: ADF Facesアプリケーションがタッチ装置で動作することがわかれば、その装置に固有のページを作成する作業がベスト・プラクティスになります。詳細は、「ADF Facesを使用したタッチ装置のWebアプリケーションの作成」を参照してください。
コンテンツ配信: contentDelivery
属性を使用して時系列を構成することにより、コンポーネントのレンダリング直後に、またはコンポーネントがレンダリングされた後の別のリクエストで、データ・ソースからデータをフェッチするようにできます。詳細は、「コンテンツの配信」を参照してください。
自動データ・バインディング: アプリケーションでFusionテクノロジ・スタックが使用されている場合、ADFビジネス・コンポーネントの構成に基づいて、自動的にバインドされた時系列を作成できます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「データ・バインドされたガント・チャートおよび時系列コンポーネントの作成」の章を参照してください。
注意:
最終的にページのUIコンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールを使用します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のプレースホルダ・データ・コントロールを使用したページの設計に関する項を参照してください。
さらに、各データ視覚化コンポーネントには、コンテンツの配信方法、自動部分ページ・レンダリング(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内に、格納する必要があります。
次の例に、アプリケーションにTimelineCBBean
マネージドBeanを追加するコードのサンプルを示します。このマネージドBeanは、データを含むクラスまたはBeanを参照し、オプションで、時系列をカスタマイズするその他のメソッドを追加します。ArrayList
クラスで指定されているデータ・セットのリスト・アイテムがすべてこの例に含まれているわけではありません。
//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の例で提供されているのは、図29-7に示す従業員のプレゼンテーションの時系列用のデータ・モデルです。TimelineCBBean
の完全なソース・コードは、ADF Facesコンポーネント・デモ・アプリケーション内にあります。デモ・アプリケーションの詳細は、「ADF Facesコンポーネント・デモ・アプリケーション」を参照してください。
図29-7 従業員のプレゼンテーションの時系列
時系列コンポーネントには構成可能な属性と子コンポーネントがあり、これらを追加または変更することにより、時系列の表示や動作をカスタマイズできます。接頭辞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式ビルダーまたはその他の専用ダイアログの表示などのオプションを表示できます。図29-8に、時系列のendTime
属性のドロップダウン・メニューを示します。
図29-8 時系列のendTime属性の値
注意:
アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用して時系列を作成でき、バインドが自動的に行われます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のデータバインドされた時系列の作成に関する項を参照してください。
始める前に:
時系列の属性や時系列の子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「時系列の構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「時系列コンポーネントの追加機能」を参照してください。
ページに時系列を追加するには:
「コンポーネント」ウィンドウで、「ADFデータ視覚化」ページの「ガント」セクションから、Timeline
コンポーネントをページにドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウに、時系列の属性を表示します。ヘルプ・ボタンを使用して、timeline
コンポーネントの完全なタグ・ドキュメントを表示します。
「外観」セクションを開き、次の属性の値を入力します。
EndTime: 時系列の時間範囲に使用する終了日をyyyy-mm-dd
形式で入力します。時系列に表示するデータ・コレクション内に含めるイベントの終了日を選択します。デフォルトでは、この属性には現在の日付が使用されます。
StartTime: 時系列の時間範囲に使用する開始日をyyyy-mm-dd
形式で入力します。時系列に表示するデータ・コレクション内に含めるイベントの開始日を選択します。デフォルトでは、この属性には現在の日付が使用されます。
オプションで、次の属性の値を入力します。
Orientation: 属性のドロップダウン・メニューを使用して、デフォルトのレイアウトをhorizontal
からvertical
に変更します。
時系列の向きのサンプル・イメージについては、「レイアウト・オプション」を参照してください。
ItemPosition: 垂直方向の時系列を使用する場合は、デフォルトで、時系列に使用可能なスペース内で時系列アイテムが縦に重複しません。デフォルト値は、noOverlap
です。垂直方向の場合、この属性は水平に並ぶ時系列アイテムの表示には適用されません。
属性値random
を使用すると、時系列に使用可能なスペース内に時系列アイテムが垂直にランダムでレイアウトされるように指定できます。
Summary: 時系列の目的およびスクリーン・リーダーをサポートするための構造の概要を入力します。
TimeZone: 時系列に使用するタイムゾーンを入力します。設定されていない場合は、AdfFacesContext
から値が特定されます。
「動作」セクションを開き、次の属性の値を入力します。
ItemSelection: ドロップダウン・リストを使用して、時系列内の時系列アイテムを選択可能にするかどうかを指定します。有効な値は、single
(デフォルト)、multiple
またはnone
です。2つの時系列の場合、この設定は時系列の両方の系列に適用されます。
SortData: 時系列のイベントのソートを、時系列でイベントの時刻に基づいて自動的に行うか、時系列がバインドされているデータ・モデルにより手動で行うかの設定に使用します。有効な値は、auto
(デフォルト)またはnone
です。
FetchStartTimeとFetchEndTime: これらの属性を使用して、データ・ソースからコンテンツを配信するときに使用される開始日と終了日を指定します。
時系列の時間軸を指定するには、次のようにします。
構造ウィンドウでtimeline
ノードを右クリックして、「時系列の中に挿入」→「時間軸」と選択します。
「時間軸の挿入」ダイアログで、時系列の時間軸に使用するスケールを入力します。有効な値は、twoyears
、years
、quarters
、twomonths
、months
、twoweeks
、weeks
、days
、sixhours
、threehours
、hours
、halfhours
およびquarterhours
です。
オプションの時系列の時間軸を追加するには、次のようにします。
構造ウィンドウでtimeline
ノードを右クリックして、「時系列の中に挿入」→「時系列概要」と選択します。
構造ウィンドウでtimelineOverview
ノードを右クリックして、「時系列概要の中に挿入」→「時間軸」と選択します。
「時間軸の挿入」ダイアログで、時系列の概要時間軸の表示に使用するスケールを入力します。有効な値は、twoyears
、years
、quarters
、twomonths
、months
、twoweeks
、weeks
、days
、sixhours
、threehours
、hours
、halfhours
およびquarterhours
です。
JDeveloperでは、「プロパティ」ウィンドウで追加の属性を設定せずに、「コンポーネント」ウィンドウからJSFページに時系列をドラッグ・アンド・ドロップすると、単一のタグのみが生成されます。
次の例に生成されたコードを示します。
<dvt:timeline startTime="2012-06-27" endTime="2012-06-27" id="t1"/>
時系列を作成するときに、「データ・コントロール」パネルを使用してデータ・コントロールにデータをバインドする場合は、JDeveloperにより、データ・モデルに基づいてコードが生成されます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「データ・バインドされたガント・チャートおよび時系列コンポーネントの作成」の章を参照してください。
時系列コンポーネントには、属性を表示するためのコレクション・データ・モデルが必要です。たとえば、図29-7に示す従業員のプレゼンテーションの時系列を作成するには、条件を満たす日付値とイベントに関する詳細を含むデータ・モデルを指定する必要があります。
UI優先開発を使用して時系列にデータを追加するには、クラス、マネージドBeanおよびメソッド(モデルを作成し、JDeveloperのクラス、Beanおよびメソッドを参照する)を作成します。
始める前に:
時系列の属性や時系列の子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「時系列の構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「時系列コンポーネントの追加機能」を参照してください。
ページに時系列を追加します。時系列のページへの追加の詳細は、「ページへの時系列の追加方法」を参照してください。時系列の開始時間と終了時間が、使用しているデータ・モデルと整合性が取れていることを確認します。
時系列のデータ・モデルを定義するクラスとマネージドBeanを作成し、時系列のデータを指定します。詳細および例は、時系列コンポーネントのデータ要件」を参照してください。クラス作成のヘルプは、『Oracle JDeveloperによるアプリケーションの開発』の「Javaコードの使用」の章を参照してください。マネージドBeanのヘルプは、「マネージドBeanの作成と使用」を参照してください。
UI優先開発で時系列にデータを追加するには:
構造ウィンドウでtimeline
ノードを右クリックして、「時系列の中に挿入」→「時系列の系列」と選択します。
timelineSeries
ノードを右クリックして、「プロパティに移動」を選択します。
「プロパティ」ウィンドウで、「共通」セクションを開き、次の属性を設定します。
Value: 時系列をバインドするモデルのEL式を指定します。これは、org.apache.myfaces.trinidad.model.CollectionModel
のインスタンスである必要があります。
注意:
java.util.List
、array、javax.faces.model.DataModel
など、別のモデル・インスタンスも使用できます。インスタンスは時系列コンポーネントにより自動的にCollectionModel
に変換されます。
たとえば、時系列をインスタンス化するために作成したマネージドBeanを参照します。従業員のプレゼンテーションの例では、時系列のマネージドBeanはcb
という名前で、データは時系列が参照されたときにインスタンス化されています。この従業員プレゼンテーションの例のデータを時系列で使用するには、EL式の「Value」フィールドに#{cb.Model}
と入力します。
EL式の作成のヘルプについては、「EL式の作成方法」を参照してください。
Var: レンダリング・フェーズで時系列コレクションの各要素を参照するために使用される変数の名前を入力します。この変数は、レンダリングが完了すると削除されるか、初期値に戻ります。
たとえば、従業員プレゼンテーションの例のデータの各要素を参照するには、「Var」フィールドにevt
と入力します。
VarStatus: オプションとして、レンダリング・フェーズの変数の名前を入力し、コレクション・モデルやループ・カウンタ情報など、コンポーネントの状態に関するコンテキスト情報にアクセスします。この変数は、レンダリングが完了すると削除されるか、初期値に戻ります。
構造ウィンドウでtimelineSeries
ノードを右クリックし、「時系列の系列の中に挿入」→「時系列アイテム」と選択して、スタンプ設定によって時系列の系列データを表示するコンポーネントを追加します。
dvt:timelineItem
の「プロパティ」ウィンドウで、「共通」セクションを開き、次の値を入力します。
Value: 時系列上にアイテムとして表示する日付に関連付けられた値を参照するEL式を入力します。たとえば、日付に関連付けられた従業員プレゼンテーションのコレクションでは、プレゼンテーション日付を時系列アイテムとして表示できます。
たとえば、従業員のプレゼンテーションのデータ・ソースを参照するには、#{evt.date}
と入力します。
Group: オプションで、共通の日付を持つ時系列アイテムをグループとして表示し、実行時にそのグループを開いたり閉じたりできるように構成できます。デフォルトでは、閉じた表示に、グループ内のアイテム数を示す数値カウンタが表示されます。
EndTime: オプションで、継続時間を表す時系列アイテムを構成できます。終了時間を時系列アイテムの値に追加することにより、ある時点ではなく時間の範囲を表すことができます。詳細は、「時系列アイテムの期間の構成」を参照してください。
時系列アイテムに時系列アイテムのデータ・コレクションの属性を表示するように構成するには、次のようにします。
構造ウィンドウのコンテキスト・メニューを使用してコンポーネントを挿入し、時系列アイテムのレイアウトを定義します。
「プロパティ」ウィンドウを使用して、時系列アイテムのコンテンツと表示属性を指定します。value
属性には、データ・コレクションの行を参照するEL式を使用します。
たとえば、次の例で強調表示されているコードは、図29-7の従業員プレゼンテーションの時系列でスタンプ設定される時系列アイテムのコンポーネント構造と属性定義を示しています。
<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>
注意:
時系列アイテムのレイアウトとコンテンツは多くの方法で指定できます。詳細は、「時系列アイテムのカスタマイズ」を参照してください。
時系列概要パネルに表示される時系列アイテムを表すマーカーを構成するには、次のようにします。
構造ウィンドウでoverviewItem
ファセットを右クリックして、「f:facet-overviewItemの中に挿入」→「マーカー」と選択します。
「プロパティ」ウィンドウで、形状、サイズおよび塗りつぶし色を指定する値を必要に応じて設定します。デフォルトでは、概要パネルに表示されるマーカーは四角形です。
時系列の系列を1つまで追加して2つの時系列を構成し、2系列のイベントを比較できます。別のtimelineSeries
コンポーネントを追加、構成する場合も、手順は同じです。
次の例に、図29-2に表示されている2つの時系列のコードを示します。
<af:panelGroupLayout layout="horizontal"> <af:selectOneChoice id="soc" label="Employee (TOP)" value="#{timeline.firstEmp}" autoSubmit="true" valueChangeListener="#{timeline.handleValueChange}"> <af:forEach items="#{timeline.employees}" var="ce"> <af:selectItem label="#{ce.name}" value="#{ce.id}"/> </af:forEach> </af:selectOneChoice> <af:spacer width="5"/> <af:outputText value="vs."/> <af:spacer width="5"/> <af:selectOneChoice id="soc2" label="Employee (BOTTOM)" value="#{timeline.secondEmp}" autoSubmit="true" valueChangeListener="#{timeline.handleValueChange}"> <af:forEach items="#{timeline.employees}" var="ce"> <af:selectItem label="#{ce.name}" value="#{ce.id}"/> </af:forEach> </af:selectOneChoice> </af:panelGroupLayout> <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>
この章の例では、クラスとマネージドBeanを使用して時系列にデータを提供しています。アプリケーションでFusionテクノロジ・スタックが使用される場合、データ・コントロールを使用して時系列を作成でき、バインドが自動的に行われます。
詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「データバインドされたガント・チャートおよび時系列の作成」の章を参照してください。
また、最終的にページのUIコンポーネントでADFデータ・バインディングが使用されることがわかっていても、データ・コントロールの準備ができる前にページを開発する必要がある場合は、手動でコンポーネントをバインドするのではなく、プレースホルダ・データ・コントロールを使用します。プレースホルダ・データ・コントロールを使用すると、開発済データ・コントロールを使用した場合と同じ宣言的な開発が行われます。詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』のプレースホルダ・データ・コントロールを使用したページの設計に関する項を参照してください。
時系列アイテムを構成して、時系列にカスタムのタイム・スケールを追加できます。
時系列アイテムは、時系列に表示されるイベントを表します。timelineItem
コンポーネントは、情報を表示し、イベントに関連付けられたアクションを指定するために、次のADFコンポーネントをサポートします。
レイアウト・コンポーネントには、af:panelFormLayout
、af:panelGroupLayout
、af:separator
、af:showDetailItem
およびaf:spacer
があります。これらのコンポーネントの使用方法の詳細は、「Webページ上のコンテンツの編成」を参照してください。
メニュー・コンポーネントaf:menu
。これらのコンポーネントの詳細は、 「メニュー、ツールバーおよびツールボックスの使用方法」を参照してください。
出力コンポーネントには、af:outputFormatted
とaf:outputText
があります。これらのコンポーネントの詳細は、「出力コンポーネントの使用」を参照してください。
メッセージ・コンポーネントaf:outputLabelMessage
。このコンポーネントの詳細は、「ヒント、メッセージおよびヘルプの表示」を参照してください。
ナビゲーション・コンポーネントaf:button
およびaf:link
。これらのコンポーネントの詳細は、「ナビゲーション・コンポーネントの使用」を参照してください。
イメージ・コンポーネントaf:image
。af:image
コンポーネントの使用方法の詳細は、「イメージの表示」を参照してください。
af:showPopupBehavior:
af:showPopupBehavior
コンポーネントの使用方法の詳細は、「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。
時系列アイテムは、構成可能な形状として時系列概要パネルに表示されます。時系列アイテムのマーカーには、次の属性を指定できます。
fillColor
: マーカー形状の色です。有効な値は、16進数のRGB色です。
opacity
: マーカーの塗りつぶし色の不透明度です。有効な値の範囲は、0
パーセント(透明)から100
パーセント(不透明)です。
shape
: 選択された時系列の各系列の値に対応する概要マーカーの形状です。有効な値は、事前に作成された7つの形状である、circle
(デフォルト)、diamond
、human
、plus
、square
、triangleDown
、triangleUp
のいずれかです。この属性は、垂直方向の時系列ではサポートされません。
scaleX
およびscaleY
: scaleX
(水平)およびscaleY
(垂直)のスケール係数です。有効な値はパーセンテージの数字です。マーカーが大きすぎる場合は、JDeveloperにより、時系列の概要領域に合せて自動的にマーカーのサイズが変更されます。これらの属性は、垂直方向の時系列ではサポートされません。
時系列アイテムに対し特定の時間のインスタンスを指定するのではなく、期間または範囲を構成できます。
たとえば、図29-9では、1時間以上の期間にまたがり、棒として表示される時系列アイテムを含む時系列を示しています。時系列の概要パネルも棒の表示を使用した時系列アイテムを表します。
図29-9 期間を含む時系列アイテム
時系列の期間の棒を指定するには、timelineItem
コンポーネントに対しvalue
およびendTime
属性の両方を設定します。値は、時系列のデータ・モデルに格納するか、またはUI優先開発を使用している場合はクラスおよびマネージドBeanに格納する必要があります。次のサンプル・コードでは、時系列アイテムの日付は、期間の棒として構成されます。
<dvt:timeline id="tl1" startTime="2013-09-21" endTime="2013-09-27" itemSelection="multiple" orientation="horizontal"> <dvt:timelineSeries id="ts1" var="evt" value="#{timeline.durationModel}"> <dvt:timelineItem id="ti1" value="#{evt.date}" group="#{evt.group}" endTime="#{evt.endDate}"> <af:panelGroupLayout id="pg1" layout="horizontal"> <af:panelGroupLayout id="pg2" layout="vertical"> <af:outputText id="ot2" inlineStyle="color:#084B8A" value="#{evt.description}" noWrap="true"/> <af:outputText id="ot3" 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="hours"/> <dvt:timelineOverview id="ov1"> <dvt:timeAxis id="ta2" scale="months"/> </dvt:timelineOverview> </dvt:timeline>
次のスキン・セレクタを使用して、期間の棒のスタイルをカスタマイズできます。
af|dvt-timelineItem::duration
af|dvt-timelineItem::duration:focused
af|dvt-timelineItem::duration:selected
af|dvt-timelineItem::duration:highlighted
次のスキン・セレクタを使用して、概要パネルで使用されるマーカーのスタイルもカスタマイズできます。
af|dvt-timelineItemOverview::duration
af|dvt-timelineItemOverview::duration:focused
af|dvt-timelineItemOverview::duration:selected
af|dvt-timelineItemOveriew::duration:highlighted
時系列と概要の軸にカスタム・タイム・スケールを作成できます。カスタム・タイム・スケールは、dvt:timeAxis
のscale
属性で構成します。
始める前に:
時系列の属性や時系列の子コンポーネントが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「時系列の構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「時系列コンポーネントの追加機能」を参照してください。
ページにすでに時系列が存在している必要があります。ない場合は、この章の説明に従って時系列を作成します。詳細は、「ページへの時系列の追加方法」を参照してください。
カスタム時間軸を作成し使用する手順:
時系列のスキニング・キーの完全なリストは、Oracle Fusion Middleware Documentation Oracleデータ視覚化ツール・スキン・セレクタ・タグ・リファレンスを参照してください。JDeveloperのヘルプ・センターからリストにアクセスするには、「ドキュメント・ライブラリ」、「Fusion MiddlewareリファレンスとAPI」の順に選択します。スキンを使用したアプリケーションのカスタマイズの詳細は、「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
時系列に、ポップアップのサポート、カスタム・コンテキスト・メニュー、ドラッグ・アンド・ドロップ操作などのインタラクティブ機能を追加できます。
時系列timelineItem
コンポーネントは、情報を提供したり、エンド・ユーザーからの入力を要求したりするポップアップのダイアログ、ウィンドウおよびメニューが表示されるように構成できます。af:popup
コンポーネントを他のADF Facesコンポーネントで使用すると、セカンダリ・ウィンドウでの情報の表示および非表示、追加データの入力、コンテキスト・メニューなどの機能の呼出しを、エンド・ユーザーに許可する機能を構成できます。
ADF Facesのコンポーネントでは、ポップアップの表示または非表示にJavaScriptは不要です。af:showPopupBehavior
タグは宣言的ソリューションとなるため、popup
コンポーネントを開くためのJavaScriptの作成や、スクリプトのpopup
コンポーネントへの登録の必要がありません。これらのコンポーネントの詳細は、「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。
次のコンテキスト・メニュー・ファセットを使用して、時系列のコンテキスト・メニューを定義できます。
bodyContextMenu
: 時系列コンポーネント内の選択不可能な要素に表示されるコンテキスト・メニューを指定します。
contextMenu
: 時系列コンポーネントの選択可能な要素に表示されるコンテキスト・メニューを指定します。
各ファセットでは、1つの子コンポーネントがサポートされます。コンテキスト・メニューは、現在のところFlashおよびHTML5でのみサポートされています。
af:popup
コンポーネント内のaf:menu
コンポーネントを使用してコンテキスト・メニューを作成します。ついで、指定されたトリガーに基づき、別のコンポーネントからコンテキスト・メニュー・ポップアップを起動できます。コンテキスト・メニューの構成の詳細は、「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。
技術的な制限のために、Flashのレンダリング形式の使用時には、現在のところコンテキスト・メニューのコンテンツはFlash Playerのコンテキスト・メニューを使用して表示されます。このため、Flash Playerにより定義されたいくつかの制限があります。
Flashでは、コンテキスト・メニューのサブメニューは使用できません。
Flashでは、カスタム・メニュー項目は15に制限されます。コンポーネントの組込みメニュー項目(円グラフのinteractiveSliceBehavior
メニュー項目など)は、制限に考慮されます。
Flashでは、メニュー項目がテキストのみに制限されます。ADF Facesメニューで可能なアイコンなどのコントロールは、Flashメニューでは使用できません。
各メニュー・キャプションには、1つ以上の表示可能な文字を含める必要があります。制御文字、改行文字およびその他の空白文字は無視されます。キャプションは100文字以内です。
別のカスタム項目と同一のメニュー・キャプションは、一致する項目の表示または非表示に関係なく無視されます。メニュー・キャプションは、組込みキャプションまたは既存のカスタム・キャプションと比較されます(大文字/小文字、句読点、空白は考慮されません)。
次のキャプションは許可されません。ただし、単語同士をつなげて使用して、カスタム・キャプションを作成できます: 保存、ズーム・イン、ズーム・アウト、100%、すべて表示、品質、再生、ループ、巻戻し、進む、戻る、ロードされない映画、バージョン情報、印刷、再描画リージョンの表示、デバッガ、元に戻す、切取り、コピー、貼付け、削除、すべて選択、開く、新規ウィンドウで開くおよびリンクのコピー。
次の単語は、単独または他の単語とともにカスタム・キャプションで表示できません: Adobe、Macromedia、Flash Playerまたは設定。
さらに、Flashからのコンテキスト・メニュー項目のリクエストは同期コールであるため、コンテキスト・メニューの呼出し時には、ELを評価するサーバー・リクエストは不可能です。選択したオブジェクトごとに異なるコンテキスト・メニューを提供するために、コンテキスト・メニューのポップアップでcontentDelivery="lazyUncached"
設定が使用される場合、メニューはあらかじめフェッチされます。状況により変化するコンテキスト・メニューの場合、これはメニュー定義内のEL式が、異なる選択や通貨の状況により、レンダリング時に繰り返しコールされることを意味します。あらかじめフェッチされたこれらのコンテキスト・メニューを使用する場合、アプリケーションでは次の事項を認識しておく必要があります。
コンテキスト・メニューの表示方法の定義に使用するEL式では、実行時間の長いコードまたは遅いコードは実行しないでください。これは、actionListener
など、メニュー項目が選択された後にコールされるaf:commandMenuItem
属性には当てはまりません。
今後、Flashの制限が解決された場合、ADFコンテキスト・メニューがFlashコンテキスト・メニューのかわりに表示されます。アップグレードの互換性を確保するには、メニューがあらかじめフェッチされている場合と、メニューの開始時にEL式が評価される場合の両方でEL式が機能するようにコードを作成する必要があります。アプリケーションが依存するコンポーネントの状態は、selection
とcurrency
のみです。
時系列は、ページ上のコレクション・コンポーネントとの間のドロップ・ターゲットまたはドラッグ元として構成できます。
たとえば、図29-6に示すように、1つのコレクションからアイテム(表の行など)をドラッグして時系列にドロップしたり、時系列からイベントをドラッグして表にドロップしたりできます。
時系列にドロップ・サポートを追加するには、timeline
コンポーネントにaf:dropTarget
タグを追加し、時系列がサポートするデータ・フレーバを組み込みます。ドロップ・イベントに応答する時系列のマネージドBeanにdropListener
メソッドを追加します。
時系列からコレクション・コンポーネントへのドラッグ・サポートを追加するには、timeline
コンポーネントにaf:dragSource
タグを追加し、ドラッグを受ける側のコンポーネントにaf:collectionDropTarget
タグを追加します。ドラッグを受ける側のコンポーネントには、org.apache.myfaces.trinidad.model.RowKeySet
データ・フレーバをaf:collectionDropTarget
の子として組み込み、ドロップ・イベントに応答するためのdropListener
メソッドも定義します。
次の例に、図29-6に示すADF Facesコンポーネント・デモ・アプリケーションのJSFページのサンプル・コードを示します。af:table
コンポーネントの詳細は、「表、ツリー、およびその他のコレクションベースのコンポーネントの使用」を参照してください。
<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コンポーネント・デモ・アプリケーション内にあります。デモ・アプリケーションの詳細は、「ADF Facesコンポーネント・デモ・アプリケーション」を参照してください。
始める前に:
時系列の属性や子タグが機能にどのような影響を与えるかについて理解しておくと役立ちます。詳細は、「時系列の構成」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「時系列コンポーネントの追加機能」を参照してください。
次のタスクを完了する必要があります。
ページに時系列を追加します。詳細は、「ページへの時系列の追加方法」を参照してください
時系列アイテムをドラッグ元として構成していて、ページへのコンポーネントの追加時に時系列をデータ・コントロールにバインドしていない場合は、データを時系列に追加します。UI優先開発を使用してデータを時系列に追加する場合の詳細は、「時系列へのデータの追加方法」を参照してください。
ドラッグ・アンド・ドロップをサポートするのに必要な追加コンポーネントを作成します。
たとえば、ドラッグ元またはドロップ・ターゲットとして表を使用する場合は、ページに表を追加する必要があります。
時系列にドラッグ・アンド・ドロップ・サポートを追加するには:
構造ウィンドウでtimeline
コンポーネントを右クリックして、「時系列の中に挿入」→「ドロップ・ターゲット」と選択します。
「ドロップ・ターゲットの挿入」ダイアログで、ドロップ・リスナーの名前を入力するか、ドロップダウン・メニューを使用して「編集」を選択し、時系列のマネージドBeanにドロップ・リスナー・メソッドを追加します。または、ドロップダウン・メニューを使用して式ビルダーを選び、ドロップ・リスナーのEL式を入力してください。
たとえば、dnd
というマネージドBeanにhandleDropOnTimeline()
というメソッドを追加するには、「編集」を選択し、ドロップダウン・メニューから「dnd」を選択して、「メソッド」フィールドの右にある「新規」をクリックし、handleDropOnTimeline()
メソッドを作成します。
次の例に、サンプルのドロップ・リスナーと図29-6に表示される時系列のサポート・メソッドを示します。
// 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:table
コンポーネントの子としてドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウで、コンポーネントの「Actions」フィールドに、ドロップ・ターゲットが受け入れる操作をスペース区切りのリストで入力します。
コンポーネントの「Discriminant」フィールドに、ドロップ・ターゲットとドラッグ元が互換性のために共有するモデル名を指定します。
時系列をドラッグ元として構成するには、「コンポーネント」ウィンドウの「操作」パネルから、「ドラッグ元」のタグを時系列の子としてドラッグ・アンド・ドロップします。
構造ウィンドウでaf:dragSource
コンポーネントを右クリックし、「プロパティに移動」を選択して、「プロパティ」ウィンドウで次の属性を設定します。
Actions: コレクション・ドロップ・ターゲット・コンポーネントが受け入れる操作をスペース区切りのリストで入力します。
Discriminant: ドラッグ元とコレクション・ドロップ・ターゲットが互換性のために共有するモデル名を指定します。この属性の値は、手順8で時系列からドラッグを受けるコレクション・コンポーネントに設定する、af:collectionDropTarget
コンポーネントのmodelName
属性の値に一致する必要があります。
別のコレクション・コンポーネントを時系列からのドロップのドロップ・ターゲットとして構成するには、次のようにします。
「コンポーネント」ウィンドウの「操作」パネルで、「コレクション・ドロップ・ターゲット」を、ドロップを受けるコンポーネントにドラッグ・アンド・ドロップします。
たとえば、「コレクション・ドロップ・ターゲット」を、ドロップの結果を表示するaf:table
コンポーネントの子としてドラッグ・アンド・ドロップします。
ドロップ・ターゲットを挿入ダイアログで、ドロップ・リスナーの名前を入力するか、ドロップダウン・メニューを使用して編集を選び、ドロップ・リスナー・メソッドを適切なマネージドBeanに追加してください。
次の例に、図29-6に表示される時系列のサンプル・ドロップ・リスナーを示します。この例では、前述の例で使用されているものと同じインポートおよびヘルパー・メソッドが使用されるため、ここにはそれらを記載していません。
//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データ視覚化コンポーネントのドラッグ・アンド・ドロップの構成の詳細は、「ドラッグ・アンド・ドロップ機能の追加」を参照してください。