Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1(11.1.1.9.0) B52029-12 |
|
![]() 前 |
![]() 次 |
この章ではADF Faces Calendarコンポーネントを使用して、Calendarアプリケーションを作成する方法について説明します。
この章では、次の項目について説明します。
ADF Facesには、特定のプロバイダ(プロバイダとはアクティビティの所有者)に関してアクティビティを日次表示、週表示、月表示またはリスト表示するCalendarコンポーネントが含まれています。図15-1に、いくつかのサンプル・アクティビティがある週表示モードのADF Faces Calendarを示します。
これらのビューのサブセットのみ表示するようにCalendarを構成できます。たとえば、Calendarでmonth
およびlist
表示を使用しない場合があります。図15-2に示すように、日表示と週表示のみ使用可能になるように構成できます。日表示および週表示のみ使用可能であるため、これらのボタンのみがツールバーに表示されます。
デフォルトでは、Calendarにはtrinidad-config.xml
ファイルに設定されているロケールに基づく日付と時間が表示されます(A.6項「trinidad-config.xmlでの構成」を参照)。このファイルにロケールが指定されていない場合、ブラウザから送信されたロケールに基づいて表示されます。たとえば、米国のデフォルトでは、週の開始日は日曜日であり、午後2時は2:00 PMと表示されます。フランスのデフォルトでは、開始日は月曜日であり、午後2時は14:00と表示されます。Calendarのタイムゾーンもtrinidad-config.xml
の設定に基づきます。このデフォルトは、Calendarの構成時にオーバーライドできます。詳細は、15.3項「Calendarコンポーネントの構成」を参照してください。
Calendarは、CalendarModel
クラスを使用して、特定の期間のアクティビティを表示します。Calendarのモデル・クラスの独自の実装を作成する必要があります。アプリケーションでFusionテクノロジ・スタックを使用する場合は、アクティビティを表すデータソースに対するADFビジネス・コンポーネントを作成でき、作成するとモデルが作成されます。その後、Calendarを宣言的に作成でき、そのCalendarは自動的にそのモデルにバインドされます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のADF Faces Calendarコンポーネントの使用に関する項を参照してください。
アプリケーションでFusionテクノロジ・スタックを使用しない場合は、CalendarModel
クラスと、関連するCalendarActivity
クラスおよびCalendarProvider
クラスの独自の実装を作成します。これらのクラスは、抽象メソッドを使用する抽象クラスです。Calendarの実装に適した、メソッドを支援する機能を提供する必要があります。詳細は、15.2項「Calendarの作成」を参照してください。
Calendarには、ユーザーが表示を(日、週、月またはリスト間で)変更、前または次の日、週、月に移動、および本日に戻ることのできる組込み機能のあるツールバーが含まれます。ツールバーは完全にカスタマイズ可能です。表示するボタンとテキストを選択でき、ボタンやその他のコンポーネントを追加することもできます。詳細は、15.5項「ツールバーのカスタマイズ」を参照してください。
ヒント: これらのツールバー・ボタンを使用すると、Calendarの属性値が変わります。それらの値がセッション中に変わらないよう、永続するように構成できます。詳細は、第34章「JSFページでのユーザー・カスタマイズの許可」を参照してください。値が永続され、ユーザーがシステムにログインするたびに使用されるように、アプリケーションを構成することもできます。この永続性を実現するには、アプリケーションでFusionテクノロジ・スタックを使用する必要があります。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「実行時のユーザー・カスタマイズの許可」の章を参照してください。 |
Calendarコンポーネントには、CalendarModel
クラスから返されるアクティビティおよびプロバイダに基づくアクティビティが表示されます。デフォルトでは、Calendarコンポーネントは読取り専用です。つまり、それは返されたアクティビティのみ表示できます。ユーザーがアクティビティを編集、作成および削除できるように、Calendarでサポートされているファセット内に機能を追加できます。特定のイベントが起動されると、それらの対応するファセット内にあるポップアップ・コンポーネントが開き、ユーザーがアクティビティまたはCalendarに対して操作を実行できるようになります。
たとえば、ユーザーがCalendar内のアクティビティをクリックすると、CalendarActivityEvent
が起動され、ActivityDetail
ファセットのポップアップ・コンポーネントが開きます。図15-3に示すように、ユーザーがアクティビティを表示および編集できるフォームを含んでいるダイアログ・コンポーネントを使用することもできます。
イベント、ファセットおよびポップアップ・コンポーネントを使用した追加機能の実装の詳細は、15.4項「ポップアップ・コンポーネントを使用した機能の追加」を参照してください。
Calendarコンポーネントでは、ADF Facesのドラッグ・アンド・ドロップ・アーキテクチャ機能がサポートされています。ユーザーは、アクティビティをCalendarの異なる領域にドラッグしてコピーまたは移動を行ったり、アクティビティのハンドルをドラッグしてアクティビティの期間を変更したりすることもできます。ドラッグ・アンド・ドロップ機能の追加の詳細は、35.7項「Calendarへのドラッグ・アンド・ドロップ機能の追加」を参照してください。
デフォルトでは、カレンダのアクティビティは青色の「ランプ」を使用して表示されます。色ランプとは、特定の色ファミリ内の色のセットであり、アクティビティの様々な状態を表すのに使用されます。図15-1に示すように、デフォルトのCalendarでは、日次表示で表示される短期間のアクティビティの場合、アクティビティの時間は濃い青の背景色で表示され、アクティビティのタイトルは薄い青の背景色で表示されます。色ランプを変更することで、アクティビティの表示方法をカスタマイズできます。
各アクティビティはプロバイダ、つまり所有者に関連付けられています。図15-4に示すように、複数のプロバイダのアクティビティを表示できるようにCalendarを実装する場合、各プロバイダのアクティビティが異なる色で表示されるようにそれぞれのアクティビティのスタイルを設定できます。
Calendarコンポーネントをページに追加する前に、ADF Faces Calendarの抽象クラスを拡張するJavaクラスのCalendarで必要なロジックを実装する必要があります。ADF Facesアプリケーションの場合は、マネージドBeanとしてクラスを作成します。クラスを作成すると、Calendarをページに追加できます。
注意: アプリケーションでFusionテクノロジ・スタックを使用する場合は、ADFビジネス・コンポーネントを使用してCalendarクラスを実装します。これにより、Calendarコンポーネントを宣言的に作成してバインドできます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のADF Faces Calendarコンポーネントの使用に関する項を参照してください。 |
ロジックを実装する前に、次の項で説明されているCalendarModel
クラスおよびCalendarActivity
クラスについて理解しておくと役立ちます。
Calendarコンポーネントは、CalendarModel
クラスの実装にバインドする必要があります。CalendarModel
クラスには、Calendarのデータが含まれます。このクラスは、次の一連のパラメータに基づき、Calendarアクティビティのコレクションを返します。
プロバイダID: アクティビティの所有者。たとえば、Calendarが現在セッション中の所有者に関連付けられているアクティビティのみ返すように、またはその他の所有者のアクティビティも返すようにCalendarModel
クラスを実装できます。
時間範囲: その時間内に開始するすべてのアクティビティの時間の拡大を返す必要があります。Calendarの日付範囲はその開始時刻を含み、終了時刻を含まないため(ハーフ・オープンとも呼びます)、開始時刻より前に開始し、開始時刻より後(また、終了時刻より前)に終了するものを含め、その範囲と交差するすべてのアクティビティを返します。
Calendarアクティビティは、Calendar上のオブジェクトを表し、通常は一定の期間にわたります。CalendarActivity
クラスは抽象クラスであり、このクラスのメソッドは特定のアクティビティに関する情報を返すために実装できます。
アクティビティは再帰可能で、関連するキーワードを設定でき、特定の時間タイプ(時または分など)に設定できます。アクティビティには開始日と終了日、ロケーション、タイトルおよびタグを設定することもできます。
CalendarProvider
クラスは、アクティビティの所有者を表します。プロバイダは、Calendarに対して有効化または無効化できます。
CalendarModel
クラスおよびCalendarActivity
クラスの独自の実装を作成し、抽象メソッドを実装してロジックを提供します。
Calendarモデル・クラスを作成する手順:
Calendarのロジックを保持するマネージドBeanを作成します。このBeanでは、次のことを行う必要があります。
oracle.adf.view.rich.model.CalendarModel
クラスを拡張する。
抽象メソッドを実装する。
CalendarModel
クラスの詳細は、ADF Faces Javadocを参照してください。
Calendarに必要なその他の機能を実装する。たとえば、ADF Facesデモ・アプリケーションのoracle.adfdemo.view.calendar.rich.model.DemoCalendarBean
マネージドBeanにタイムゾーンを設定するロジックを追加します。(デモ・アプリケーションの詳細は、ADF Facesデモ・アプリケーションに関する項を参照)。
マネージドBeanの作成の詳細は、2.6項「マネージドBeanの作成と使用」を参照してください。
アクティビティのロジックを保持するマネージドBeanを作成します。このBeanでは、次のことを行う必要があります。
oracle.adf.view.rich.model.CalendarActivity
クラスを拡張する。
抽象メソッドを実装する。
Calendarに必要なその他の機能を実装する。例については、ADF Facesデモ・アプリケーションのoracle.adfdemo.view.calendar.rich.model.DemoCalendarActivity
マネージドBeanを参照してください。
ヒント: アクティビティの個々のインスタンスにスタイルを設定する場合(たとえば、各プロバイダのアクティビティを異なる色で表示する場合)、getTags メソッドでアクティビティ・インスタンスを表す文字列を返す必要があります。詳細は、15.6.1項「アクティビティのスタイル設定方法」を参照してください。 |
プロバイダの情報とロジックを保持するマネージドBeanを作成します。
oracle.adf.view.rich.model.CalendarProvider
クラスを拡張する。
抽象メソッドを実装する。
プロバイダに必要なその他の機能を実装する。
Calendarコンポーネントを作成する手順:
コンポーネント・パレットの「共通コンポーネント」セクションから、CalendarをドラッグしてJSFページにドロップします。
ヒント: calendar コンポーネントは、子を拡大できる親コンポーネントによって拡大できます。calendarが拡大できないコンポーネントの子コンポーネントの場合は、デフォルトの幅と高さが使用され、ユーザーは実行時に拡大できません。ただし、インライン・スタイル属性を使用して、デフォルトの幅と高さをオーバーライドできます。デフォルトの高さと幅の詳細は、15.3項「Calendarコンポーネントの構成」を参照してください。コンポーネントの拡大の詳細は、8.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。 |
プロパティ・インスペクタの「カレンダ・データ」セクションを開き、CalendarModelクラスを拡張するマネージドBeanに解決されるEL式をValue
に入力します。
Calendarの多くの表示属性(週の開始日、1日の始まりに表示する時刻など)を構成します。
プロパティ・インスペクタを使用してCalendarを構成します。
Calendarを構成する手順:
プロパティ・インスペクタで、calendarに対する属性を表示します。ヘルプ・ボタンを使用して、calendar
コンポーネントのタグの完全なドキュメントを表示します。
calendar
コンポーネントを選択した状態で、プロパティ・インスペクタの「共通」セクションを開き、次の設定を行います。
AvailableViews: 使用可能な表示を選択します。値は次のいずれかまたはその組合せにすることができます。
month
week
day
list
all
複数の値を入力する場合は、値の間にスペースを入力します。たとえば、Calendarで日および週表示を使用する場合は、次のように入力します。
day week
注意: all が入力された場合は、リストで省略されているかどうかにかかわらず、すべての表示を使用できます。 |
対応するボタンは、リストに出現する順序でツールバーに自動的に表示されます。
注意: month 表示の特定の日のタスクのオーバーフローを処理するために、month を入力し、all を入力しない場合は、day も入力する必要があります。 |
View: Calendarを表示するときのデフォルトの表示(day
、list
、month
またはweek
)を選択します。ユーザーは、Calendarのツールバーにある対応するボタンをクリックしてこの値を変更できます。
StartDayOfWeek: 月表示または週表示の左端に週の開始日として表示される曜日を入力します。設定しない場合、デフォルトはユーザーのロケールに基づきます。有効な値は次のとおりです。
sun
mon
tue
wed
thu
fri
sat
StartHour: 日表示および週表示の上部に表示される時間(0が午前0時の24時間形式)を表す数値を入力します。day
表示またはweek
表示のCalendarが午前12:01に開始する場合、そのCalendarはstartHour
値に自動的にスクロールされ、表示の上部に表示されます。ユーザーは、startHour
の値より前に開始したアクティビティを確認するために、いつでもこの時間より前にスクロールできます。
ListType: list
表示でアクティビティを表示する方法を選択します。有効な値は次のとおりです。
day
: アクティブな日のアクティビティのみ表示します。
dayCount
: listCount
属性の値に基づき、アクティブな日以降を含む日数を表示します。
month
: アクティブな日が属する月のアクティビティをすべて表示します。
week
: アクティブな日が属する週のアクティビティをすべて表示します。
ListCount: 表示する日のアクティビティ数を入力します(listType
属性がdayCount
に設定されている場合のみ使用します)。
図15-5に、listType
がdayCount
に設定され、listCount
値が14
に設定されているリスト表示のCalendarを示します。
プロパティ・インスペクタの「カレンダ・データ」セクションを開き、次の設定を行います。
ActiveDay: Calendarに表示される日付範囲を決定するために使用される日を設定します。デフォルトでは、アクティブ日はユーザーの今日の日付です。Calendarを初めて開くときのデフォルトのアクティブ日を今日の日付にする場合は、この設定を変更しないでください。
別の日を選択した場合、その日がactiveDay
属性の値になります。たとえば、Calendarに初めてアクセスする場合、現在の日付がアクティブ日になります。ユーザーは、月表示の日リンクをクリックすることでアクティブ日にする別の日を選択できます。アクティブ日は、ユーザーが別の月または年を選択した場合にも変更されます。
TimeZone: Calendarのタイムゾーンを設定します。設定しない場合、値はAdfFacesContext
から取得されます。有効な値はjava.util.TimeZone
オブジェクトです。
プロパティ・インスペクタの「外観」セクションを開き、次の設定を行います。
AllDayActivityOrder: 終日アクティビティの表示を制御するために、アクティビティのタグに対応する文字列のリストを指定します。アクティビティはタグごとにグループ化されて、allDayActivityOrder
で指定された順に表示されます。アクティビティにタグがない場合や、アクティビティのタグがallDayActivityOrderのリストで指定されていない場合は、そのようなアクティビティがまとめてデフォルトのグループとして表示されます。
各グループの中では、アクティビティが多い順に行が表示されます。たとえば、allDayActivityOrder = "holiday absence"
の場合は、終日アクティビティはこの順序で表示されます。
holiday
タグ付きのアクティビティ
absence
タグ付きのアクティビティ
タグのないアクティビティ
HourZoom: Calendarに表示される時間セルのズーム係数を設定します。ズーム係数は、day
またはweek
表示の時間の高さに適用されます。有効な値は、autoまたはゼロ以外の正の数(小数も可)です。デフォルトの値は1
です。
1
より大きい値を指定すると、指定した倍率でカレンダが拡大されます。たとえば、値2
を指定すると、Calendarが200%に拡大されます。値0.5
を指定すると、Calendarが50%に縮小されます。auto
を設定すると、密にスケジュールされた時間的に重ならない複数のアクティビティが縦方向のスペース不足のために重なって表示されることのないように、Calendarが最も見やすい表示となる最適な係数で拡大されます。
TimeSlotsPerHour: 日または週表示で1時間当たりに表示するタイム・スロットの数を設定します。タイム・スロットとは、1時間当たりのマイナー分割(時間をさらに短い間隔に分割する点線で示される)の数です。たとえば、値4
を指定すると、1時間当たり4つのタイム・スロットがレンダリングされ、各スロットが15分になります。有効な値は、autoまたはゼロ以外の正の整数です。デフォルト値はautoです。
autoを設定すると、Calendarではスキン・プロパティ-tr-time-slots-per-hour
が使用されます。たとえば、af|calendar {-tr-time-slots-per-hour: 4}
を指定すると、15分間隔のマイナー分割(点線)がレンダリングされます。
calendar領域をユーザーがドラッグしてサイズ変更できるようにするには、プロパティ・インスペクタの「その他」セクションを展開し、splitterCollapsed
およびsplitterPosition
属性を設定します。スプリッタは、カレンダの日表示および週表示の終日アクティビティ領域と時間指定アクティビティ領域を分けます(月表示とリスト表示には無効です)。デフォルトでは、splitterCollapsedがfalse
になっています。これは、終日アクティビティ領域と時間指定アクティビティ領域の両方が表示されるという意味です。スプリッタが縮小されている(splitterCollapsed = true
)場合、終日アクティビティ領域が非表示になり、時間指定アクティビティ領域が拡張して、使用可能なスペースをすべて縦方向に使用します。splitterPosition
属性では終日アクティビティ領域の高さの初期値をピクセルで指定し、残りのスペースが時間指定アクティビティ領域になります。有効な値は、auto
またはゼロ以外の正の整数です。デフォルトの値はauto
です。詳細は、calendar
コンポーネントのタグのドキュメントを参照してください。
ユーザーが既存のアクティビティのハンドルをドラッグして、そのアクティビティの期間を拡張または縮小できるようにする場合は、CalendarActivityDurationChangeListener
のハンドラを実装します。このハンドラには、アクティビティの終了時間を変更する機能を含める必要があります。ユーザーがアクティビティを移動し、開始時間および終了時間を変更できるようにするには、ドラッグ・アンド・ドロップ機能を実装します。詳細は、35.7項「Calendarへのドラッグ・アンド・ドロップ機能の追加」を参照してください。
これで、次の機能を追加できます。
ポップアップ・コンポーネントを使用したアクティビティの作成、編集および削除。詳細は、15.4項「ポップアップ・コンポーネントを使用した機能の追加」を参照してください。
Calendar上でのアクティビティを移動します。詳細は、35.7項「Calendarへのドラッグ・アンド・ドロップ機能の追加」を参照してください。
ツールバーのツールバー・ボタンを変更または追加します。詳細は、15.5項「ツールバーのカスタマイズ」を参照してください。
Calendarとイベントの外観を変更します。詳細は、15.6項「Calendarのスタイル設定」を参照してください。
Calendarには、アクティビティの編集や追加など、Calendarに必要な追加機能を簡単に実装する方法を提供するためにファセットとともに使用する2つのイベントがあります。この2つのイベントとは、CalendarActivityEvent
(アクティビティに対するアクションが発生したときに起動します)とCalendarEvent
(カレンダ自体に対するアクションが発生したときに起動します)です。追加機能を提供するためのこれらのイベントの使用の詳細は、15.4項「ポップアップ・コンポーネントを使用した機能の追加」を参照してください。
Calendarでは、特定の変更が発生したときに起動されるイベントもサポートされています。ユーザーが、アクティビティが表示されるボックスをドラッグして、アクティビティの期間を変更すると、CalendarActivityDurationChangeEvent
が起動されます。CalendarDisplayChangeEvent
は、表示属性の値が変更されたときに起動されます。たとえば、ユーザーがview
属性をday
からmonth
に変更した場合は、カレンダが自動的に再レンダリングされます(理由は、カレンダ・コンポーネントが部分ページ・レンダリング(PPR)のターゲットとなり、その結果として即時リフレッシュが起動されるからです)。
ユーザーがアクティビティを処理すると、CalendarActivityEvent
が起動します。このイベントにより、ユーザーのアクションに基づいて、ファセットに含まれるポップアップ・コンポーネントが表示されます。たとえば、ユーザーがアクティビティを右クリックした場合、CalendarActivityEvent
により、activityContextMenu
内のポップアップ・コンポーネントが表示されます。イベントはサーバーにも配信され、構成されたリスナーがイベントを処理できます。ファセットのポップアップ・コンポーネントを作成します(または、ポップアップ・コンポーネントを使用しない場合は、サーバー側リスナーを実装します)。このポップアップ・コンポーネントとファセットの中で開発者が実装した機能によって、ユーザーがアクティビティを作成、削除および編集したり、カレンダのインスタンスを構成したりできるようになります。
表15-1に、イベントを起動する様々なユーザー・アクション、起動されるイベント、およびイベントが起動されたときにファセットのコンテンツを表示する関連のファセットを示します。表では、ポップアップ・コンポーネントで使用する必要のあるコンポーネントも示します。ファセット内に、関連リスナーのハンドラで実装された機能とともに、ポップアップおよび関連コンポーネントを作成します。ポップアップ・コンポーネントを表のいずれのファセットにも挿入しない場合は、関連イベントがサーバーに配信されるため、イベントのハンドラを実装することでサーバーでイベントを処理できます。
表15-1 Calendar Facesイベントおよび関連ファセット
ユーザー・アクション | イベント | 関連ファセット | ポップアップで使用するコンポーネント |
---|---|---|---|
アクティビティを右クリックします。 |
|
|
|
アクティビティを選択して、[Del]キーを押します。 |
|
|
|
アクティビティをクリックまたはダブルクリックするか、アクティビティを選択して[Enter]キーを押します。 |
|
|
|
アクティビティの上にカーソルを置きます。 |
|
|
|
Calendar(アクティビティ上やツールバー内ではありません)を右クリックします。 |
|
|
|
Calendarの空き領域(アクティビティではありません)をクリックまたはダブルクリックします。 |
|
|
|
機能を追加するには、関連ファセット内にポップアップ・コンポーネントと関連コンポーネントを作成します。
ポップアップ・コンポーネントを使用して機能を追加する手順:
図15-6に示すように、「構造」ウィンドウでaf:calendarコンポーネント・ノードを開き、Calendarファセットを表示します。
表15-1に基づき、機能を提供するユーザー・アクションに対応するポップアップ・コンポーネントをファセットに作成します。たとえば、アクティビティをクリックして[Del]キーを押すことで、ユーザーがアクティビティを削除できるようにする場合は、activityDelete
ファセットにポップアップ・ダイアログを追加します。
ポップアップ・コンポーネントを追加するには、「構造」ウィンドウでファセットを右クリックし、「facetNameの中に挿入」
→「ポップアップ」を選択します。
ポップアップ・コンポーネントの作成の詳細は、第13章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。
例15-1に、activityDelete
ファセットで使用されるダイアログ・ポップアップ・コンポーネントのJSFコードを示します。
例15-1 アクティビティの削除ダイアログのJSFコード
<f:facet name="activityDelete"> <af:popup id="delete" contentDelivery="lazyUncached"> <!-- don't render if the activity is null --> <af:dialog dialogListener="#{calendarBean.deleteListener}" affirmativeTextAndAccessKey="Yes" cancelTextAndAccessKey="No" rendered="#{calendarBean.currActivity != null}"> <af:outputText value="NOTE: This popup is for demo purposes only, it is not part of the built in functionality of the calendar."/> <af:spacer height="20"/> <af:outputText value="Are you sure you want to delete this activity?"/> <af:panelFormLayout> <af:inputText label="Title" value="#{calendarBean.currActivity.title}" readOnly="true"/> <af:inputDate label="From" value="#{calendarBean.currActivity.from}" readOnly="true"> <af:convertDateTime type="date" dateStyle="short" timeZone="#{calendarBean.timeZone}" pattern="#{calendarBean.currActivity.dateTimeFormat}"/> </af:inputDate> <af:inputDate label="To" value="#{calendarBean.currActivity.to}" readOnly="true"> <af:convertDateTime type="date" dateStyle="short" timeZone="#{calendarBean.timeZone}" pattern="#{calendarBean.currActivity.dateTimeFormat}"/> </af:inputDate> <af:inputText label="Location" readOnly="true" rendered="#{calendarBean.currActivity.location != null}" value="#{calendarBean.currActivity.location}"/> </af:panelFormLayout> </af:dialog> </af:popup> </f:facet>
図15-7に、ユーザーがアクティビティをクリックして[Del]キーを押したときに、ダイアログがどのように表示されるかを示します。
calendarActivityListener
に必要なロジックを実装します。たとえば、activityDeleteFacet
のダイアログを実装している場合は、現在のアクティビティを保存できるロジックをcalendarActivityListener
に実装して、(次の手順で)ダイアログ・リスナーにロジックを実装するときに削除するアクティビティがわかるようにします。例15-2に、ADF Facesデモ・アプリケーションのcalendar.jspx
ページのcalendarActivityListener
を示します。
例15-2 calendarActivityLIstenerハンドラ
public void activityListener(CalendarActivityEvent ae) { CalendarActivity activity = ae.getCalendarActivity(); if (activity == null) { // no activity with that id is found in the model System.out.println("No activity with event " + ae.toString()); setCurrActivity(null); return; } System.out.println("providerId is " + activity.getProviderId()); System.out.println("activityId is " + activity.getId()); setCurrActivity(new DemoCalendarActivityBean((DemoCalendarActivity)activity, getTimeZone()))
ポップアップ・イベントのハンドラにポップアップ・コンポーネントのロジックを実装します。たとえば、「削除」ダイアログの場合、ダイアログが閉じたときに実際のアクティビティを削除するdialogListener
のハンドラを実装します。ダイアログおよび他のポップアップ・コンポーネントの作成の詳細は、第13章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。
デフォルトでは、カレンダのツールバーを使用して、ユーザーは日、週、月およびリストのビュー切替え、ビュー内の前後の項目への移動、現在の日への移動ができます。また、ツールバーには、現在の表示のテキストによる説明も表示されます。たとえば日表示では、図15-8に示すようにアクティブ日が表示されます。
図15-9に、カスタマイズされているツールバーを示します。このツールバーには、一番上のツールバーに右揃えされているボタンおよび2番目のツールバーのボタンを含め、ツールバー・ボタンが追加されています。
作成するカスタム・ファセットに、追加するツールバーおよびツールバー・ボタンを配置します。次に、含まれている項目の表示方法および表示場所を決定するキーワードとともに、ツールバーの属性からファセットを参照します。
ツールバーをカスタマイズする手順:
コンポーネント・パレットの「JSF」ページで、「コア」パネルから、追加するツールバーの各セクションの「ファセット」をドラッグ・アンド・ドロップします。たとえば、図15-9に示されているカスタム・ボタンを追加するには、4つのfacet
タグを追加します。各ファセットには、ページに対する一意な名前を付けてください。
ヒント: ADF Facesの今後のリリースと競合が生じないようにするには、すべてのファセット名をcustomToolbar で開始します。たとえば、図15-9に示されている「位置合せ」ボタンを含むツールバーのセクションは、customToolbarAlign ファセットです。 |
コンポーネント・パレットのADF Facesページで、「共通コンポーネント」パネルからツールバーを各ファセットにドラッグ・アンド・ドロップし、ツールバー・ボタンを追加して、必要に応じてボタンとツールバーを構成します。ツールバーとツールバー・ボタンの詳細は、14.3項「ツールバーの使用方法」を参照してください。
プロパティ・インスペクタのtoolboxLayout
属性の横のドロップダウン・メニューから、「編集」を選択します。
「プロパティの編集: ToolboxLayout」ダイアログで、この属性の値を設定します。この値は、カスタム・ファセット名のリストに、カスタム・ファセット内のコンテンツを表示する順序で設定する必要があります。これらのファセットのみでなく、次のキーワードを使用して、デフォルトのツールバーのすべてまたは一部を含めることもできます。
all
: デフォルトのツールバーにすべてのツールバー・ボタンおよびテキストを表示します。
dates
: 「前へ」ボタン、「次へ」ボタンおよび「今日」ボタンのみ表示します。
range
: 現在の日付範囲を示す文字列のみ表示します。
views
: ユーザーが表示を変更できるボタンのみ表示します。
注意: all キーワードを使用する場合、dates 、range およびviews キーワードは無視されます。 |
たとえば、customToolbar1
およびcustomToolbar2
という名前の2つのファセットを作成し、デフォルトのツールバー全体をカスタム・ツールバーの間に表示させる場合、toolboxLayout
属性の値は次のリスト項目となります。
customToolbar1
all
customToolbar2
ツールバーのレイアウトは、次のキーワードを使用して決定することもできます。
newline
: 新しい行の次の名前付きファセット(またはtoolboxLayout
属性のリストの次のキーワード)にツールバーを配置します。たとえば、customToolbar2
ファセットのツールバーを新しい行に表示させる場合、リストは次のようになります。
customToolbar1
all
newline
customToolbar2
デフォルトのツールバーのすべては使用せず、viewsセクションとdatesセクションのみ使用し、それぞれのセクションを新しい行に表示させる場合、リストは次のようになります。
customToolbar1
customToolbar2
newline
views
newline
dates
stretch
: 使用可能なすべての領域を埋めるために拡大されるspacerコンポーネントを追加して、次の名前付きファセット(またはデフォルトのツールバーの次のキーワード)がツールバーに右揃えで表示されるようにします。図15-9に表示されるツールバーのtoolboxLayout
属性の値、およびcustomToolbarAlignファセットに配置されているツールバーを、例15-3
に示します。customToolbarBold
ファセットに表示されているツールバー・ボタンは、stretch
キーワードがファセットの前に指定されているため、ツールバー内で右揃えで表示されています。
例15-3 カスタム・ツールバーの値
<af:calendar binding="#{editor.component}" id="calendar1" value="#{calendarBean.calendarModel}" timeZone="#{calendarBean.timeZone}" toolboxLayout="customToolbarAlign all customToolbarTZ stretch customToolbarBold newline customToolbarCreate" . . . <f:facet name="customToolbarAlign"> <af:toolbar> <af:commandToolbarButton id="alignLeft" shortDesc="align left" icon="/images/alignleft16.png" type="radio" selected="true"/> <af:commandToolbarButton id="alignCenter" shortDesc="align center" icon="/images/aligncenter16.png" type="radio" selected="false"/> <af:commandToolbarButton id="alignRight" shortDesc="align right" icon="/images/alignright16.png" type="radio" selected="false"/> </af:toolbar> </f:facet> . . . </af:calendar>
他のADF Facesコンポーネントと同様、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」で説明されているように、Calendarコンポーネントもスタイル設定できます。ただし、標準のスタイル設定手順とともに、CalendarコンポーネントにはCalendarのインスタンスのスタイル設定を簡単にする特定の属性があります。これらの属性は次のとおりです。
activityStyles
: 各アクティビティ・インスタンスを個々にスタイル設定できます。たとえば、異なるプロバイダに属しているアクティビティを別の色で表示できます。
dateCustomizer
: 月表示の日にCalendar日以外の文字列を表示できます。たとえば、図15-10に示されているように、カウントダウンまたはカウントアップ・タイプの数値を表示できます。この属性を使用すると、日のヘッダーの空白部分に文字列を追加できます。たとえば、1日に作業する合計時間を表示できます。この属性を使用して、休日など、特定の日を色分けすることができます。詳細は、15.6.3項「日付のカスタマイズ方法」を参照してください。
activityStyles
属性は、InstanceStyles
オブジェクトを使用して、アクティビティの特定のインスタンスをスタイル設定します。InstanceStyles
クラスは、スキニング・キーに基づくインスタンスごとのインライン・スタイルを提供します。
activityStyles
属性は、特定のプロバイダに属しているアクティビティを特定の色を使用して表示するために最もよく使用されます。たとえば、図15-11に示されているCalendarは、異なる3つのプロバイダに属しているアクティビティを示しています。プロバイダのアクティビティを表すために使用されている色は、左のペインで変更できます。activityStyles
属性は、アクティビティが関連付けられているプロバイダに基づき、各アクティビティに表示される色を決定するために使用します。
このCalendarでは、単一の色を使用するかわりに、色の範囲が使用されています。これは、色ランプと呼ばれます。色ランプとは、特定の色ファミリ内の色のセットであり、アクティビティの様々な状態を表すのに使用されます。たとえば、Tedのアクティビティでは青色のランプを使用しています。期間が1日以内のアクティビティは、青色の中間色のテキストで表示されます。複数日にまたがるアクティビティは、青色の中間色のボックスに白いテキストで表示されます。濃い青は開始時間の背景色で、薄い青はタイトルの背景色です。これらの異なる青は、すべて青い色ランプの一部です。
CalendarActivityRamp
クラスは、InstanceStyles
のサブクラスであり、代表的な色を取得して(たとえば、自分のアクティビティには赤が選択されています)、Calendarで各アクティビティを表示するために使用する正しい色ランプを返すことができます。
activityStyles
属性は、map
オブジェクトにバインドする必要があります。マップ・キーは、アクティビティに対するgetTags
メソッドから返されるセットです。InstanceStyles
オブジェクトのマップ値は、ほとんどの場合CalendarActivityRamp
のインスタンスです。このInstanceStyles
オブジェクトはスキンニング・キーを取り込み、各アクティビティのスタイルを返します。
アクティビティをスタイル設定する手順:
CalendarActivity
クラスで、getTags
メソッドが、返された文字列を特定のスタイルにマップするためにactivityStyles
属性で使用される文字列セットを返すようにします。たとえば、図15-11に示す様々なプロバイダに様々な色ランプを使用するには、各プロバイダ用の文字列を返す必要があります。この場合、現在のユーザーに属するアクティビティはMe
を返し、L.E.に属するアクティビティはLE
を返し、T.F.に属するアクティビティはTF
を返します。CalendarActivity
クラスの実装の詳細は、15.2.2項「カレンダを作成する方法」を参照してください。
キーがgetTags
メソッドから返された文字列であり、値がInstanceStyles
オブジェクト(CalendarActivityRamp
インスタンスなど)であるマップを作成します。
たとえば、図15-11に示すように異なる色ランプを使用する場合は、表15-2に示されている値を使用してマップを作成できます。
表15-2 activityStyles属性のマップ
キー(文字列セット) | 値(InstanceStylesオブジェクト) |
---|---|
|
|
|
|
|
|
「構造」ウィンドウでCalendarコンポーネントを選択し、プロパティ・インスペクタでactivityStyles
属性をマップにバインドします。
各アクティビティに対するCalendarのレンダリング中、レンダラはCalendarActivity.getTags
メソッドをコールして文字列セットを取得します。次に、文字列セットはactivityStyles
属性にバインドされているマップに渡され、InstanceStyles
オブジェクトが返されます(CalendarActivityRamp
の場合もあります)。
次の例を参照してください。
文字列セット{"Me"}
が渡された場合、赤のCalendarActivityRamp
が返されます。
文字列セット{"LE"}
が渡された場合、オレンジのCalendarActivityRamp
が返されます。
文字列セット{"TF"}
が渡された場合、青のCalendarActivityRamp
が返されます。
月表示の日のヘッダーに日付の数値文字列以外の内容を表示する場合、dateCustomizer
属性を、日付に表示する内容を決定するDateCustomizer
クラスの実装にバインドできます。dateCustomizer属性を使用すると、日のヘッダーの空白部分に文字列を追加できます。たとえば、1日に作業する合計時間を表示できます。
日付を色分けするには、DateCustomizer
クラスにgetInlineStyle
という名前の新しいメソッドを実装します。getInlineStyle
メソッドはインラインのCSSスタイルを返します。これは、キーによって指定されたCalendarのセクションのスタイル属性に適用できます。getInlineStyle
を使用すると、月グリッドの日付に背景色を設定できます。アクセシビリティのために、色コードで提供される情報は、スクリーン・リーダーにも使用可能である必要があります。dateHeaderStamp
ファセットによってこの情報を公開し、日セルのヘッダー・セクションに表示されるコンポーネントを指定できます。たとえば、休日が色分けされている場合、shortDesc
を休日名に設定してaf:image
を指定できます。表示する日付をプログラムで指定することもできます。イメージがその日付のヘッダーに表示されます。DateCustomizer
クラスの詳細は、ADF Faces Javadocを参照してください。dateHeaderStamp
ファセット詳細は、calendar
コンポーネントのタグのドキュメントを参照してください。
日付文字列をカスタマイズする手順:
oracle.adf.view.rich.util.DateCustomizer
クラスのサブクラスを作成します。このサブクラスは、次のスキニング・キーを使用して、表示する内容を決定します。
DateCustomizer.format
メソッドに渡されるキーは、次のとおりです。
af|calendar::day-header-row
: 日表示で、ヘッダーの曜日をカスタマイズします。たとえば、「木曜」を「木」で置換します。
af|calendar::day-header-row
-misc: 日表示で、ヘッダーの曜日の下のテキストをカスタマイズします。たとえば、「1月1日」に「元日」を表示します。
af|calendar::list-day-of-month-link
: リスト表示で、日付リンクのテキストをカスタマイズします。たとえば、「1月1日」を「元日」で置換します。
af|calendar::list-day-of-week-column
: リスト表示で、左のリスト列の曜日をカスタマイズします。たとえば、「木曜」を「木」で置換します。
af|calendar::list-day-of-week-column-misc
: リスト表示で、左のリスト列の曜日の下に表示されるテキストをカスタマイズします。たとえば、「1月1日」に「元日」を表示します。
af|calendar::month-grid-cell-header-day-link
: 月表示で、セル・ヘッダーの日付リンクのラベルをカスタマイズします。たとえば、「5」を「-34」で置換します。
af|calendar::month-grid-cell-header-misc
: 月表示で、セル・ヘッダーの空き領域に様々なテキストを追加します。たとえば、1月1日に対して「元日」というテキストを追加します。
af|calendar::week-header-day-link
: 週表示で、ヘッダーの各日付の日付リンクをカスタマイズします。たとえば、「1/1(日)」を「元日」で置換します。
af|calendar::week-header-cell-misc
: 週表示で、ヘッダーの日付の下に表示されるテキストをカスタマイズします。たとえば、「1月1日」に「元日」を表示します。
af|calendar::toolbar-display-range:day
: 日表示、またはlistType = day
のときのリスト表示で、ツールバーの日付文字列をカスタマイズします。
af|calendar::toolbar-display-range:month
: 月表示、またはlistType = month
のときのリスト表示で、ツールバーの日付文字列をカスタマイズします。
DateCustomizer.formatRange
メソッドに渡されるキーは、次のとおりです。
af|calendar::toolbar-display-range:week
: 週表示、またはlistType = week
のときのリスト表示で、ツールバーの日付範囲文字列をカスタマイズします。
af|calendar::toolbar-display-range:list
: リスト表示、またはlistType = dayCount
のときのリスト表示で、ツールバーの日付範囲文字列をカスタマイズします。
DateCustomizer.getInlineStyle
メソッドに渡されるキーは、次のとおりです。
af|calendar::list-row
: リスト表示で、CSSスタイルを現在のアクティビティ行に適用します。
af|calendar::month-grid-cell
: 月表示で、指定された日付のCSSスタイルを適用します。
マネージドBeanの中で、DateCustomizer
クラスのインスタンスを作成します。次に例を示します。
private DateCustomizer _dateCustomizer = new DemoDateCustomizer();
Calendarコンポーネントで、マネージドBeanに作成したDateCustomizer
インスタンスにdateCustomizer
属性をバインドします。
例15-4に示すDemoDateCustomizer
クラスの例では、週の最初の曜日のところに週番号が表示され、日付のかわりに特定の日までのカウントダウン数値が表示されます(図15-10を参照)。例15-5に示すDemoDateCustomizer
クラスの例では、色分けした休日が表示され、例15-6に示す例では、File ExplorerアプリケーションのdateCustomizerCalendar
.jspx
ページに使用されたとき、dateHeaderStamp
ファセットを使用して色分けした休日が表示されます。
例15-4 カウントダウン数値を表示するDateCustomizer
public class MyDateCustomizer extends DateCustomizer { public String format(Date date, String key, Locale locale, TimeZone tz) { if ("af|calendar::month-grid-cell-header-misc".equals(key)) { // return appropriate string } else if ("af|calendar::month-grid-cell-header-day-link".equals(key)) { // return appropriate string } return null; } }
例15-5 色分けした休日を表示するDateCustomizer
public class MyDateCustomizer extends DateCustomizer { public String getInlineStyle(Date date, String key, Locale locale, TimeZone tz) { if ("af|calendar::day-all-day-activity-area".equals (key) || "af|calendar::day-timed-activity-area".equals (key) || "af|calendar::week-all-day-activity-area".equals (key) || "af|calendar::week-timed-activity-area".equals (key) || "af|calendar::month-grid-cell".equals(key) || "af|calendar::list-row".equals(key)) { Calendar curCal = Calendar.getInstance (tz, locale); curCal.setTime (date); if (_getUSHoliday (curCal) != null) return "background-color: #fafaeb;"; } return null; } }