ヘッダーをスキップ
Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド
11g リリース2(11.1.2.4.0)
B66719-05
  目次へ移動
目次
前
前 		 次
次		  

17 Calendarコンポーネントの使用方法

この章では、ADF Faces calendarコンポーネントを使用して、Calendarアプリケーションを作成する方法について説明します。

この章では、次の項目について説明します。

17.1 Calendarコンポーネントの作成について

ADF Facesには、特定のプロバイダ(プロバイダとはアクティビティの所有者)用に作成されたアクティビティをデフォルトで日次表示、週表示、月表示またはリスト表示するCalendarコンポーネントが含まれています。図17-1に、いくつかのサンプル・アクティビティがある週表示モードのADF Faces Calendar を示します。

図17-1 週表示を示しているADF Faces Calendar

週表示のCalendar。

これらのビューのサブセットのみ表示するようにCalendarを構成できます。たとえば、Calendarでmonthおよびlist表示を使用しない場合があります。図17-2に示すように、日表示と週表示のみ使用可能になるように構成できます。日表示および週表示のみ使用可能であるため、これらのボタンのみがツールバーに表示されます。

図17-2 週表示と日表示のみ使用するように構成されたCalendar

週表示と日表示のみ使用するように構成されたCalendar

デフォルトでは、Calendarにはformatting-localeパラメータを使用してtrinidad-config.xmlファイルに設定されたロケールに基づく日および時刻が表示されます。詳細は、A.6項「trinidad-config.xmlでの構成」を参照してください。このファイルでロケールが設定されていない場合は、ブラウザから送信されたロケールに基づきます。たとえば、米国のデフォルトでは、週の開始日は日曜日であり、午後2時は2:00 PMと表示されます。フランスのデフォルトでは、開始日は月曜日であり、午後2時は14:00と表示されます。Calendarのタイムゾーンもtrinidad-config.xmlのtime-zoneパラメータ設定に基づきます。このデフォルトは、Calendarの構成時にオーバーライドできます。詳細は、17.3項「Calendarコンポーネントの構成」を参照してください。

Calendarには、ユーザーが表示を(日、週、月またはリスト間で)変更、前または次の日、週、月に移動、および本日に戻ることのできる組込み機能のあるツールバーが含まれます。ツールバーは完全にカスタマイズ可能です。表示するボタンとテキストを選択でき、ボタンやその他のコンポーネントを追加することもできます。詳細は、17.5項「ツールバーのカスタマイズ」を参照してください。


ヒント:

これらのツールバー・ボタンを使用すると、Calendarの属性値が変わります。それらの値がセッション中に変わらないよう、永続するように構成できます。詳細は、第32章「JSFページでのユーザー・カスタマイズの許可」を参照してください。

値が永続され、ユーザーがシステムにログインするたびに使用されるように、アプリケーションを構成することもできます。この永続性を実現するには、アプリケーションでFusionテクノロジ・スタックを使用する必要があります。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「実行時のユーザー・カスタマイズの許可」の章を参照してください。

Calendarコンポーネントには、CalendarModelクラスから返されるアクティビティおよびプロバイダに基づくアクティビティが表示されます。デフォルトでは、Calendarコンポーネントは読取り専用です。つまり、Calendarコンポーネントは返されたアクティビティのみ表示できます。ユーザーがアクティビティを編集、作成および削除できるように、Calendarでサポートされているファセット内に機能を追加できます。特定のイベントが起動されると、それらの対応するファセット内にあるポップアップ・コンポーネントが開き、ユーザーがアクティビティまたはCalendarに対して操作を実行できるようになります。

たとえば、ユーザーがCalendar内のアクティビティをクリックすると、CalendarActivityEventが起動され、ActivityDetailファセットのポップアップ・コンポーネントが開きます。図17-3に示すように、ユーザーがアクティビティを表示および編集できるフォームを含んでいるダイアログ・コンポーネントを使用することもできます。

図17-3 アクティビティを編集するために実装されているダイアログ

アクティビティの編集ダイアログ

イベント、ファセットおよびポップアップ・コンポーネントを使用した追加機能の実装の詳細は、17.4項「ポップアップ・コンポーネントを使用した機能の追加」を参照してください。

Calendarコンポーネントでは、ADF Facesのドラッグ・アンド・ドロップ・アーキテクチャ機能がサポートされています。ユーザーは、アクティビティをCalendarの異なる領域にドラッグしてコピーまたは移動を行ったり、アクティビティのハンドルをドラッグしてアクティビティの期間を変更したりすることもできます。ドラッグ・アンド・ドロップ機能の追加の詳細は、33.7項「Calendarへのドラッグ・アンド・ドロップ機能の追加」を参照してください。

デフォルトでは、Calendarは青いランプを使用してアクティビティを表示します。色ランプは、すべてが同じ色相(たとえば青)に基づいている色のグループです。図17-1に示すように、デフォルトのCalendarでは、日次表示で表示される短期間のアクティビティの場合、アクティビティの時間は濃い青の背景色で表示され、アクティビティのタイトルは薄い青の背景色で表示されます。色ランプを変更することで、アクティビティの表示方法をカスタマイズできます。

各アクティビティはプロバイダ、つまり所有者に関連付けられています。図17-4に示すように、複数のプロバイダのアクティビティを表示できるようにCalendarを実装する場合、各プロバイダのアクティビティが異なる色で表示されるようにそれぞれのアクティビティのスタイルを設定できます。

図17-4 様々なプロバイダのアクティビティがある月表示

単一の月を表示しているCalendar

17.1.1 Calendarのユースケースと例

Calendarコンポーネントでは、日、週、月またはリスト表示でのアクティビティの作成など、カレンダ関連の機能を実装するために必要な機能が提供されます。表示の切替えに使用できるカスタマイズ可能なツールバーが備えられています。構成可能な週の開始や日の開始機能もあります。他のADF Facesコンポーネントと同様に、スタイルと外観をカスタマイズするためのスキニングもサポートされます。

Calendarファセットに挿入することでポップアップを作成し、機能をさらに追加できます。ユーザーがある領域からCalendar内の別の領域にアクティビティをドラッグ・アンド・ドロップできるようにCalendarを実装することもできます。

Calendarは、CalendarModelクラスを使用して、特定の期間のアクティビティを表示します。Calendarのモデル・クラスの独自の実装を作成する必要があります。アプリケーションでFusionテクノロジ・スタックを使用する場合は、アクティビティを表すデータソースに対するADF Business Componentsを作成でき、作成するとモデルが作成されます。その後、Calendarを宣言的に作成でき、そのCalendarは自動的にそのモデルにバインドされます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のADF Faces Calendarコンポーネントの使用に関する項を参照してください。

アプリケーションでFusionテクノロジ・スタックを使用しない場合は、CalendarModelクラスと、関連するCalendarActivityクラスおよびCalendarProviderクラスの独自の実装を作成します。これらのクラスは、抽象メソッドを使用する抽象クラスです。Calendarの実装に適した、メソッドを支援する機能を提供する必要があります。詳細は、17.2項「Calendarの作成」を参照してください。

17.1.2 Calendarの追加機能

Calendarコンポーネントを実装する前に、他のADF Faces機能を理解することが役立つ場合があります。また、ページにCalendarコンポーネントを追加した後で、検証やアクセシビリティなどの機能を追加することが必要になる場合があります。Calendarコンポーネントで使用できる他の機能へのリンクを次に示します。

  • クライアント・コンポーネント: コンポーネントはクライアント・コンポーネントにすることができます。クライアントでコンポーネントを処理するには、第4章「ADF Facesクライアント側アーキテクチャの使用方法」を参照してください。

  • JavaScript API: すべてのコンポーネントには、プロパティ値を設定または取得するために使用できるJavaScriptクライアントAPIがあります。詳細は、ADF Faces JavaScript APIドキュメントを参照してください。

  • イベント: コンポーネントは、なんらかのロジックを実行することでアプリケーションで対応できるサーバー側とクライアント側両方のイベントを起動します。詳細は、第6章「イベントの処理」を参照してください。

  • ヒントとメッセージを表示でき、Calendarコンポーネントにオンライン・ヘルプを関連付けることができます。詳細は、第19章「ヒント、メッセージおよびヘルプの表示」を参照してください。

  • Calendarコンポーネントから行った選択に基づいてページの他のコンポーネントを更新できます。詳細は、5.3項「最適化されたライフサイクルの使用」を参照してください。

  • スキンを使用して外観を変更できます。詳細は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。

  • コンポーネントをアクセス可能にできます。詳細は、第30章「アクセス可能なADF Facesページの開発」を参照してください。

  • 文字列を値として受け取る属性に値を入力するかわりに、プロパティ・ファイルを使用できます。これらのファイルにより、これらの文字列の翻訳を管理できます。詳細は、第29章「ページの国際化およびローカライズ」を参照してください。

  • 追加機能のためのポップアップを作成できます。追加機能を提供するためのこれらのイベントの使用の詳細は、17.4項「ポップアップ・コンポーネントを使用した機能の追加」を参照してください。

  • アプリケーションでFusionテクノロジ・スタックを使用する場合は、ADFビジネス・コンポーネントがどのように構成されているかに基づいて、カレンダを作成できます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「データバインドされた基本的なページの作成」の章を参照してください。アプリケーションでEnterprise JavaBeansを使用する場合は、同じことを行うことができます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Java EE開発者ガイド』のデータバインドされた基本的なページの作成に関する項を参照してください。

17.2 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クラスについて理解しておくと役立ちます。

17.2.1 Calendarのクラス

Calendarコンポーネントは、CalendarModelクラスの実装にバインドする必要があります。CalendarModelクラスには、Calendarのデータが含まれます。このクラスは、次の一連のパラメータに基づき、Calendarアクティビティのコレクションを返します。

  • プロバイダID: アクティビティの所有者。たとえば、Calendarが現在セッション中の所有者に関連付けられているアクティビティのみ返すように、またはその他の所有者のアクティビティも返すようにCalendarModelクラスを実装できます。

  • 時間範囲: その時間内に開始するすべてのアクティビティの時間の拡大を返す必要があります。Calendarの日付範囲はその開始時刻を含み、終了時刻を含まないため(ハーフ・オープンとも呼びます)、開始時刻より前に開始し、開始時刻より後(また、終了時刻より前)に終了するものを含め、その範囲と交差するすべてのアクティビティを返します。

Calendarアクティビティは、Calendar上のオブジェクトを表し、通常は一定の期間にわたります。CalendarActivityクラスは抽象クラスであり、このクラスのメソッドは特定のアクティビティに関する情報を返すために実装できます。

アクティビティは再帰可能で、関連するキーワードを設定でき、特定の時間タイプ(TIME(開始および終了時刻あり)やALLDAYなど)に設定できます。アクティビティには開始日と終了日、ロケーション、タイトルおよびタグを設定することもできます。

CalendarProviderクラスは、アクティビティの所有者を表します。プロバイダは、Calendarに対して有効化または無効化できます。

17.2.2 カレンダを作成する方法

CalendarModelクラスおよびCalendarActivityクラスの独自の実装を作成し、抽象メソッドを実装してロジックを提供します。

始める前に:

CalendarModelおよびCalendarActivityクラスに関する知識が役立つ場合があります。詳細は、17.2.1項「Calendarのクラス」を参照してください。

他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、17.1.2項「Calendarの追加機能」を参照してください。

Calendarモデル・クラスを作成する手順:

  1. Calendarのロジックを保持するマネージドBeanを作成します。このBeanでは、次のことを行う必要があります。

    • oracle.adf.view.rich.model.CalendarModelクラスを拡張する。

    • 抽象メソッドを実装する。

      CalendarModelクラスの詳細は、ADF Faces Javadocを参照してください。

    • Calendarに必要なその他の機能を実装する。たとえば、ADF Facesデモ・アプリケーションのoracle.adfdemo.view.calendar.rich.model.DemoCalendarBeanマネージドBeanでのように、タイム・ゾーンを設定するロジックを追加できます(デモ・アプリケーションの詳細は、第2章「ADF Facesデモ・アプリケーション」を参照してください)。

    マネージドBeanの作成の詳細は、3.6項「マネージドBeanの作成と使用」を参照してください。

  2. アクティビティのロジックを保持するマネージドBeanを作成します。このBeanでは、次のことを行う必要があります。

    • oracle.adf.view.rich.model.CalendarActivityクラスを拡張する。

    • 抽象メソッドを実装する。

    • Calendarに必要なその他の機能を実装する。例については、ADF Facesデモ・アプリケーションのoracle.adfdemo.view.calendar.rich.model.DemoCalendarActivityマネージドBeanを参照してください。


      ヒント:

      アクティビティの個々のインスタンスにスタイルを設定する場合(たとえば、各プロバイダのアクティビティを異なる色で表示する場合)、getTagsメソッドでアクティビティ・インスタンスを表す文字列を返す必要があります。詳細は、17.6.1項「アクティビティのスタイル設定方法」を参照してください。

  3. プロバイダの情報とロジックを保持するマネージドBeanを作成します。

    • oracle.adf.view.rich.model.CalendarProviderクラスを拡張する。

    • 抽象メソッドを実装する。

    • プロバイダに必要なその他の機能を実装する。

Calendarコンポーネントを作成する手順:

  1. コンポーネント・パレットで、「データ・ビュー」セクションから「カレンダ」をドラッグしてJSFページにドロップします。


    ヒント:

    calendarコンポーネントは、子を拡大できる親コンポーネントによって拡大できます。calendarが拡大できないコンポーネントの子コンポーネントの場合は、デフォルトの幅と高さが使用され、ユーザーは実行時に拡大できません。ただし、インライン・スタイル属性を使用して、デフォルトの幅と高さをオーバーライドできます。デフォルトの高さと幅の詳細は、17.3項「Calendarコンポーネントの構成」を参照してください。コンポーネントの拡大の詳細は、9.2.1項「ジオメトリ管理およびコンポーネントの拡大」を参照してください。

  2. プロパティ・インスペクタの「カレンダ・データ」セクションを開き、CalendarModelクラスを拡張するマネージドBeanに解決されるEL式をValueに入力します。

17.3 Calendarコンポーネントの構成

Calendarの多くの表示属性(1日の始まりに表示する時刻など)を構成します。

17.3.1 Calendarコンポーネントの構成方法

プロパティ・インスペクタを使用してCalendarを構成します。

始める前に:

Calendarコンポーネントに関する知識が役立つ場合があります。詳細は、17.3項「Calendarコンポーネントの構成」を参照してください。

他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、17.1.2項「Calendarの追加機能」を参照してください。

Calendarを構成する手順:

  1. calendarコンポーネントを選択した状態で、プロパティ・インスペクタの「共通」セクションを開き、次の設定を行います。

    • View: Calendarが表示されるときのデフォルトにする表示を選択します。ユーザーは、Calendarのツールバーにある対応するボタンをクリックしてこの値を変更できます。有効な値は次のとおりです。

      • day

      • list

      • month

      • week

    • 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に設定されている場合のみ使用します)。

      図17-5に、listTypeがdayCountに設定され、listCount値が7に設定されている、アクティブな日が5月2日のリスト表示のCalendarを示します。

      図17-5 dayCountタイプを使用したリスト表示

      リスト表示のdayTypeリスト・タイプ

  2. プロパティ・インスペクタの「カレンダ・データ」セクションを開き、次の設定を行います。

    • ActiveDay: Calendarに表示される日付範囲を決定するために使用される日を設定します。デフォルトでは、アクティブ日はユーザーの今日の日付です。Calendarを初めて開くときのデフォルトのアクティブ日を今日の日付にする場合は、この設定を変更しないでください。

      別の日を選択した場合、その日がactiveDay属性の値になります。たとえば、Calendarに初めてアクセスする場合、現在の日付(2011年5月2日)がアクティブ日になります。ユーザーは、月表示の日リンクをクリックすることでアクティブ日にする別の日を選択できます。アクティブ日は、ユーザーが別の月または年を選択した場合にも変更されます。

    • TimeZone: Calendarのタイムゾーンを設定します。設定しない場合、値はAdfFacesContextから取得されます。有効な値はjava.util.TimeZoneオブジェクトです。デフォルトでは、trinidad-config.xmlファイルのformatting-localeパラメータに基づいて時刻が表示されます。詳細は、A.6項「trinidad-config.xmlでの構成」を参照してください。

  3. プロパティ・インスペクタの「外観」セクションを開き、AvailableViewsを設定します。値は次のいずれかまたはその組合せにすることができます。

    • month

    • week

    • day

    • list

    • all

    複数の値を入力する場合は、値の間にスペースを入力します。たとえば、Calendarで日および週表示を使用する場合は、次のように入力します。

    day week

    注意:

    allが入力された場合は、リストで省略されているかどうかにかかわらず、すべての表示を使用できます。

    対応するボタンは、リストに出現する順序でツールバーに自動的に表示されます。

    dayを使用可能な表示として入力しない場合、listおよびweek表示のアクティビティはday表示にリンクとして表示されません(allも入力しない場合)。


    注意:

    month表示の特定の日のタスクのオーバーフローを処理するために、monthを入力し、allを入力しない場合は、dayも入力する必要があります。

  4. ユーザーが既存のアクティビティのハンドルをドラッグして、そのアクティビティの期間を拡張または縮小できるようにする場合は、CalendarActivityDurationChangeListenerのハンドラを実装します。このハンドラには、アクティビティの終了時間を変更する機能を含める必要があります。ユーザーがアクティビティを移動し、開始時間および終了時間を変更できるようにするには、ドラッグ・アンド・ドロップ機能を実装します。詳細は、33.7項「Calendarへのドラッグ・アンド・ドロップ機能の追加」を参照してください。

これで、次の機能を追加できます。

17.3.2 実行時の処理: CalendarイベントおよびPPR

Calendarには、アクティビティの編集や追加など、Calendarに必要な追加機能を簡単に実装する方法を提供するためにファセットとともに使用する2つのイベントがあります。この2つのイベントは、CalendarActivityEvent(アクティビティでアクションが発生したときに起動します)とCalendarEvent(Calendar自体でアクションが発生したときに起動します)です。追加機能を提供するためのこれらのイベントの使用の詳細は、17.4項「ポップアップ・コンポーネントを使用した機能の追加」を参照してください。

Calendarでは、特定の変更が発生したときに起動されるイベントもサポートされています。CalendarActivityDurationChangeEventは、ユーザーが終了時刻をドラッグするかドラッグ・アンド・ドロップで開始時刻を変更することによりアクティビティの期間を変更した場合に起動します。コンポーネントによって表示属性の値が変更されると(たとえば、view属性がmonthからdayに変更された場合)、常にCalendarDisplayChangeEventが起動されます。

CalendarDisplayChangeEventが起動されると、Calendarコンポーネントは部分ページ・レンダリング(PPR)のターゲットとしてコンポーネント自体を追加し、Calendarをすぐにリフレッシュできるようにします。これは、Calendarでは、プログラムを使用して表示が変更された場合、Calendarを再レンダリングする必要があることが前提となっているためです。たとえば、view属性をdayからmonthに変更した場合、Calendarは自動的に再レンダリングされます。

17.4 ポップアップ・コンポーネントを使用した機能の追加

ユーザーがアクティビティを処理すると、CalendarActivityEventが起動します。このイベントにより、ユーザーのアクションに基づいて、ファセットに含まれるポップアップ・コンポーネントが表示されます。たとえば、ユーザーがアクティビティを右クリックした場合、CalendarActivityEventにより、activityContextMenu内のポップアップ・コンポーネントが表示されます。イベントはサーバーにも配信され、構成されたリスナーがイベントを処理できます。ファセットのポップアップ・コンポーネントを作成します(または、ポップアップ・コンポーネントを使用しない場合は、サーバー側リスナーを実装します)。これは、これらのポップアップ・コンポーネントとファセットにあり、そこではユーザーがアクティビティを作成、削除および編集し、Calendarのインスタンスを構成できる機能を実装できます。

表17-1に、イベントを起動する様々なユーザー・アクション、起動されるイベント、およびイベントが起動されたときにその内容を表示する関連ファセットを示します。表では、ポップアップ・コンポーネントで使用する必要のあるコンポーネントも示します。ファセット内に、関連リスナーのハンドラで実装された機能とともに、ポップアップおよび関連コンポーネントを作成します。ポップアップ・コンポーネントを表のいずれのファセットにも挿入しない場合は、関連イベントがサーバーに配信されるため、イベントのハンドラを実装することでサーバーでイベントを処理できます。

表17-1 Calendar Facesイベントおよび関連ファセット

ユーザー・アクション イベント 関連ファセット ポップアップで使用するコンポーネント

アクティビティを右クリックします。

CalendarActivityEvent

activityContextMenu: 指定されたポップアップ・コンポーネントを使用して、ポップアップ・メニューを表示します。ポップアップ・メニューでは、アクティビティに対して実行するいくつかのアクション(編集や削除など)を選択できます。

menu

アクティビティを選択して、[Del]キーを押します。

CalendarActivityEvent

activityDelete: 指定されたポップアップ・コンポーネントを使用して、ユーザーが選択したアクティビティを削除できるダイアログを表示します。

dialog

アクティビティをクリックまたはダブルクリックするか、アクティビティを選択して[Enter]キーを押します。

CalendarActivityEvent

activityDetail: 指定されたポップアップ・コンポーネントを使用して、アクティビティの詳細を表示します。

dialog

アクティビティの上にカーソルを置きます。

CalendarActivityEvent

activityHover: 指定されたポップアップ・コンポーネントを使用して、アクティビティに関する高水準な情報を表示します。

noteWindow

Calendar(アクティビティ上やツールバー内ではありません)を右クリックします。

CalendarEvent

contextMenu: 指定されたポップアップ・コンポーネントを使用して、Calendarのポップアップ・メニューを表示します。

menu

Calendarの空き領域(アクティビティではありません)をクリックまたはダブルクリックします。

CalendarEvent

create: 指定されたポップアップ・コンポーネントを使用して、ユーザーがアクティビティを作成できるダイアログを表示します。

dialog

17.4.1 ポップアップ・コンポーネントを使用した機能の追加方法

機能を追加するには、関連ファセット内にポップアップ・コンポーネントと関連コンポーネントを作成します。

始める前に:

ポップアップ・コンポーネントに関する知識が役立つ場合があります。詳細は、17.4項「ポップアップ・コンポーネントを使用した機能の追加」を参照してください。

他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、17.1.2項「Calendarの追加機能」を参照してください。

ポップアップ・コンポーネントを使用して機能を追加する手順:

  1. 図17-6に示すように、構造ウィンドウでaf:calendarコンポーネント・ノードを開き、Calendarファセットを表示します。

    図17-6 構造ウィンドウ内のCalendarファセット

    構造ウィンドウ内のCalendarファセット

  2. 表17-1に基づき、機能を提供するユーザー・アクションに対応するポップアップ・コンポーネントをファセットに作成します。たとえば、アクティビティをクリックして[Del]キーを押すことで、ユーザーがアクティビティを削除できるようにする場合は、activityDeleteファセットにポップアップ・ダイアログを追加します。

    ポップアップ・コンポーネントを追加するには、構造ウィンドウでファセットを右クリックし、「facetNameの中に挿入」→「ComponentName」を選択します。

    ポップアップ・コンポーネントの作成の詳細は、第15章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。

    例17-1に、activityDeleteファセットで使用されるダイアログ・ポップアップ・コンポーネントのJSFコードを示します。

    例17-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: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>

    図17-7に、ユーザーがアクティビティをクリックして[Del]キーを押したときに、ダイアログがどのように表示されるかを示します。

    図17-7 アクティビティの削除ダイアログ

    Calendarのアクティビティの削除ダイアログ。

  3. calendarActivityListenerに必要なロジックを実装します。たとえば、activityDeleteFacetのダイアログを実装している場合は、現在のアクティビティを保存できるロジックをcalendarActivityListenerに実装して、(次の手順で)ダイアログ・リスナーにロジックを実装するときに削除するアクティビティがわかるようにします。例17-2に、ADF Facesデモ・アプリケーションのcalendar.jspxページのcalendarActivityListenerを示します。

    例17-2 calendarActivityLIstenerハンドラ

    public void activityListener(CalendarActivityEvent ae)
  {
    CalendarActivity activity = ae.getCalendarActivity();
    if (activity == null)
    {
      // no activity with that id is found in the model
      setCurrActivity(null);
      return;
    }
 
    setCurrActivity(new DemoCalendarActivityBean((DemoCalendarActivity)activity,
         getTimeZone()))

  4. ポップアップ・イベントのハンドラにポップアップ・コンポーネントのロジックを実装します。たとえば、「削除」ダイアログの場合、ダイアログが閉じたときに実際のアクティビティを削除するdialogListenerのハンドラを実装します。ダイアログおよび他のポップアップ・コンポーネントの作成の詳細は、第15章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。

17.5 ツールバーのカスタマイズ

デフォルトでは、Calendarのツールバーにより、ユーザーは日、週、月およびリスト間での表示の変更、表示の次または前の項目への移動、現在の日への移動、または現在の表示のテキスト説明の表示を行うことができます。たとえば日表示では、図17-8に示すようにアクティブ日が表示されます。

図17-8 日表示のCalendarのツールバー

日表示のCalendarのツールバー

図17-9に、カスタマイズされているツールバーを示します。このツールバーには、一番上のツールバーに右揃えされているボタンおよび2番目のツールバーのボタンを含め、ツールバー・ボタンが追加されています。

図17-9 カスタマイズされたCalendarのツールバー

カスタマイズされたCalendarのツールバー

17.5.1 ツールバーのカスタマイズ方法

作成するカスタム・ファセットに、追加するツールバーおよびツールバー・ボタンを配置します。次に、含まれている項目の表示方法および表示場所を決定するキーワードとともに、Calendarの属性からファセットを参照します。

始める前に:

Calendarツールバーのカスタマイズに関する知識が役立つ場合があります。詳細は、17.5項「ツールバーのカスタマイズ」を参照してください。

他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、17.1.2項「Calendarの追加機能」を参照してください。

ツールバーをカスタマイズする手順:

  1. コンポーネント・パレットの「JSF」ページで、「コア」パネルから、追加するツールバーの各セクションの「ファセット」をドラッグ・アンド・ドロップします。たとえば、図17-9に示されているカスタム・ボタンを追加するには、4つのfacetタグを追加します。各ファセットには、ページに対する一意な名前を付けてください。


    ヒント:

    ADF Facesの今後のリリースと競合が生じないようにするには、すべてのファセット名をcustomToolbarで開始します。たとえば、図17-9に示されている「位置合せ」ボタンを含むツールバーのセクションは、customToolbarAlignファセットです。

  2. コンポーネント・パレットの「ADF Faces」ページで、「レイアウト」パネルから「ツールバー」を各ファセットにドラッグ・アンド・ドロップし、ツールバー・ボタンを追加し、必要に応じてボタンとツールバーを構成します。ツールバーとツールバー・ボタンの詳細は、16.3項「ツールバーの使用方法」を参照してください。

  3. プロパティ・インスペクタのtoolboxLayout属性の横のドロップダウン・メニューから、「編集」を選択します。

  4. 「プロパティの編集: 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コンポーネントを追加して、次の名前付きファセット(またはデフォルトのツールバーの次のキーワード)がツールバーに右揃えで表示されるようにします。例17-3に、図17-9に表示されるツールバーのtoolboxLayout属性の値、およびcustomToolbarAlignファセットに配置されているツールバーを示します。customToolbarBoldファセットに表示されているツールバー・ボタンは、stretchキーワードがファセットの前に指定されているため、ツールバー内で右揃えで表示されています。

    例17-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>

17.6 Calendarのスタイル設定

他のADF Facesコンポーネントと同様、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」で説明されているように、Calendarコンポーネントもスタイル設定できます。ただし、標準のスタイル設定手順とともに、CalendarコンポーネントにはCalendarのインスタンスのスタイル設定を簡単にする特定の属性があります。これらの属性は次のとおりです。

17.6.1 アクティビティのスタイル設定方法

activityStyles属性は、InstanceStylesオブジェクトを使用して、アクティビティの特定のインスタンスをスタイル設定します。InstanceStylesクラスは、スキニング・キーに基づくインスタンスごとのインライン・スタイルを提供します。

activityStyles属性は、特定のプロバイダに属しているアクティビティを特定の色を使用して表示するために最もよく使用されます。たとえば、図17-11に示されているCalendarは、異なる3つのプロバイダに属しているアクティビティを示しています。プロバイダのアクティビティを表すために使用されている色は、左のペインで変更できます。activityStyles属性は、アクティビティが関連付けられているプロバイダに基づき、各アクティビティに表示される色を決定するために使用します。

図17-11 プロバイダごとに異なる色を表示するようにスタイル設定されているアクティビティ

プロバイダごとに異なる色

このCalendarでは、単一の色を使用するかわりに、色の範囲が使用されています。これは、色ランプと呼ばれます。色ランプは、色ファミリ内の色のセットであり、アクティビティの様々な状態を表します。たとえば、Tedのアクティビティでは青いランプを使用しています。期間が1日以内のアクティビティは、青色の中間色のテキストで表示されます。複数日にまたがるアクティビティは、青色の中間色のボックスに白いテキストで表示されます。濃い青は開始時間の背景色で、薄い青はタイトルの背景色です。これら3つの異なる青は、すべて青い色ランプの一部です。

CalendarActivityRampクラスは、組込み色ランプをサポートする(InstanceStylesの)サブクラスであり、代表的な色を取得して(たとえば、Tedのアクティビティには青が選択されています)、Calendarで各アクティビティを表示するために使用する正しい色ランプを返すことができます。

activityStyles属性は、mapオブジェクトにバインドする必要があります。マップ・キーは、アクティビティに対するgetTagsメソッドから返されるセットです。InstanceStylesオブジェクトのマップ値は、ほとんどの場合CalendarActivityRampのインスタンスです。このInstanceStylesオブジェクトはスキンニング・キーを取り込み、各アクティビティのスタイルを返します。

始める前に:

Calendarスタイルに関する知識が役立つ場合があります。詳細は、17.6項「Calendarのスタイル設定」を参照してください。

他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、17.1.2項「Calendarの追加機能」を参照してください。

アクティビティをスタイル設定する手順:

  1. CalendarActivityクラスで、getTagsメソッドが、返された文字列を特定のスタイルにマップするためにactivityStyles属性で使用される文字列セットを返すようにします。たとえば、図17-11に示す様々なプロバイダに様々な色ランプを使用するには、各プロバイダ用の文字列を返す必要があります。この場合、現在のユーザーに属するアクティビティはMeを返し、Maryに属するアクティビティはMJを返し、Tedに属するアクティビティはTCを返すことができます。CalendarActivityクラスの実装の詳細は、17.2.2項「カレンダを作成する方法」を参照してください。

  2. キーがgetTagsメソッドから返されたセットであり、値がInstanceStylesオブジェクト(CalendarActivityRampインスタンスなど)であるマップを作成します。

    たとえば、図17-11に示すように異なる色ランプを使用する場合は、表17-2に示されている値を使用してマップを作成できます。

    表17-2 activityStyles属性のマップ

    キー(文字列セット) 値(InstanceStylesオブジェクト)

    {"Me"}

    CalendarActivityRamp.getActivityRamp(CalendarActivityRamp.RampKey.RED)

    {"LE"}

    CalendarActivityRamp.getActivityRamp (CalendarActivityRamp.RampKey.ORANGE)

    {"TF"}

    CalendarActivityRamp.getActivityRamp (CalendarActivityRamp.RampKey.BLUE)

  3. 構造ウィンドウでCalendarコンポーネントを選択し、プロパティ・インスペクタでactivityStyles属性をマップにバインドします。

17.6.2 実行時の処理: アクティビティのスタイル設定

各アクティビティに対するCalendarのレンダリング中、レンダラはCalendarActivity.getTagsメソッドをコールして文字列セットを取得します。次に、文字列セットはactivityStyles属性にバインドされているマップに渡され、InstanceStylesオブジェクトが返されます(CalendarActivityRampの場合もあります)。

次の例を参照してください。

  • 文字列セット{"Me"}が渡された場合、赤のCalendarActivityRampが返されます。

  • 文字列セット{"LE"}が渡された場合、オレンジのCalendarActivityRampが返されます。

  • 文字列セット{"TF"}が渡された場合、青のCalendarActivityRampが返されます。

17.6.3 日付のカスタマイズ方法

月表示の日のヘッダーに日付の数値文字列以外の内容を表示する場合、dateCustomizer属性を、日付に表示する内容を決定するDateCustomizerクラスの実装にバインドできます。

始める前に:

Calendarスタイル設定に関する知識が役立つ場合があります。詳細は、17.6項「Calendarのスタイル設定」を参照してください。

他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、17.1.2項「Calendarの追加機能」を参照してください。

日付文字列をカスタマイズする手順:

  1. oracle.adf.view.rich.util.DateCustomizerクラスのサブクラスを作成します。このサブクラスは、次のスキニング・キーを使用して、表示する内容を決定します。

    • af|calendar::day-header-row: 日表示で、ヘッダーの曜日をカスタマイズします。たとえば、「木曜」を「木」で置換します。

    • af|calendar::list-day-of-month-link: リスト表示で、日付リンクのテキストをカスタマイズします。たとえば、「1月1日」を「元日」で置換します。

    • af|calendar::list-day-of-week-column: リスト表示で、左のリスト列の曜日をカスタマイズします。たとえば、「木曜」を「木」で置換します。

    • af|calendar::week-header-day-link: 週表示で、ヘッダーの各日付の日付リンクをカスタマイズします。たとえば、「1/1(日)」を「元日」で置換します。

    • af|calendar::month-grid-cell-header-misc: 月表示で、セル・ヘッダーの空き領域に様々なテキストを追加します。たとえば、1月1日に対して「元日」というテキストを追加します。

    • af|calendar::month-grid-cell-header-day-link: 月表示で、セル・ヘッダーの日付リンクのラベルをカスタマイズします。たとえば、「5」を「-34」で置換します。

      例17-4に、DemoDateCustomizerクラスを示します。このクラスでは、週の初日に週番号が表示され、その月の日のかわりに、図17-10に示すように特定の日までのカウントダウン数値が表示されます。

    例17-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;
 
  }
 
}

  2. マネージドBeanで、DateCustomizerクラスのインスタンスを作成します。次に例を示します。

    private DateCustomizer _dateCustomizer = new DemoDateCustomizer();

  3. Calendarコンポーネントで、マネージドBeanに作成したDateCustomizerインスタンスにdateCustomizer属性をバインドします。

  前
前 		 次
次
  目次へ移動
目次