データバインドされたカレンダおよびカルーセル・コンポーネントの作成

37 データバインドされたカレンダおよびカルーセル・コンポーネントの作成

この章では、ADFビジネス・コンポーネントでモデル化されたデータから、カレンダ・コンポーネントとカルーセル・コンポーネントを作成する方法について説明します。これらのコンポーネントの作成には、ADFデータ・コントロールとADF Facesコンポーネントを使用します。

この章の内容は次のとおりです。

データバインドされたADF Facesカレンダおよびカルーセル・コンポーネントについて

ADF Faces Calendarコンポーネントでは、ユーザー・アクティビティが日、週、月ごとに、またはリスト・ビューで表示されます。Carouselコンポーネントを使用すると、一連のイメージからイメージを1つ表示できます。

ADF Faces CalendarおよびADF Faces Carouselは、アプリケーションにカレンダ機能を組み込んだり、回転するイメージを表示する場合に使用できる複雑なコンポーネントです。ADF Faces Calendarはアクティビティを日、週、月単位で表示したり、特定のプロバイダのリスト・ビューに表示します。カレンダは、ビューの一部のみを表示するように構成できます。Calendarには、ユーザーが表示を(日、週、月またはリスト間で)変更、前または次の日、週、月に移動、および本日に戻ることのできる組込み機能のあるツールバーが含まれます。ツールバーはカスタマイズ可能で、表示するボタンやテキストの選択に加え、ボタンやその他のコンポーネントの追加もできます。

ADF Facesのカルーセルは、環状に回転するイメージを表示します。ユーザーはスライダを使用するか、イメージをクリックすることで、そのイメージを選択できます。これは、水平方向または垂直方向に構成できます。カルーセルとともに他のコンポーネントを使用できます。ツールバーやメニュー・バーを追加して、ユーザーが現在のオブジェクトに対してアクションを実行できるようにするボタンやメニュー項目をそれらに追加できます。

データバインドされたADF Facesカレンダおよびカルーセル・コンポーネントのユースケースと例

ADF Faces Calendarは、カレンダ機能をアプリケーションに追加する場合に使用できます。日付、時刻、件名、場所および所有者などの、カレンダによって提供されるコンテンツを表す関連データがデータ・ストアに含まれている必要があります。使い慣れたエンティティ・オブジェクトとビュー・オブジェクトのパターンを使用してデータをモデリングし、さらに「データ・コントロール」パネルからドラッグ・アンド・ドロップしてカレンダを作成できます。

Carouselコンポーネントを使用すると、一連のイメージからイメージを1つ表示できます。ユーザーは、そのイメージを表示する前後に各イメージの部分ビューを確認したり、イメージを順にスクロールできます。それには、スライダやナビゲーション・ボタンを使用します。カルーセルは、高度な視覚化表現を必要とするオブジェクトの表示に役立ちます。たとえば、カタログに写真コレクションや商品を表示する際に使用できます。

データバインドされたADF Facesカレンダおよびカルーセル・コンポーネントの追加機能

ADF Facesカレンダおよびカルーセル・コンポーネントを構成または使用する前に、その他のOracle ADF機能について理解しておいてください。また、カレンダおよびカルーセル・コンポーネントで実行できる内容について読むことが必要な場合があります。次に、関連する他の機能へのリンクを示します。

個人ユーザー用にカレンダをカスタマイズし、そのユーザーがカレンダにアクセスすると、選択した構成でカレンダが表示されるようにできます。詳細は、「実行時のユーザー・カスタマイズの許可」を参照してください。
カレンダはエンティティ・オブジェクトに基づいています。エンティティ・オブジェクトの作成の詳細は、「エンティティ・オブジェクトを使用したビジネス・ドメイン・レイヤーの作成」を参照してください。
部分ページ・レンダリングとpartialTriggers属性の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「部分ページ・コンテンツの再レンダリング」の章を参照してください。
Carouselコンポーネントは、ツリー・バインディングを使用してデータを反復します。ツリー・バインディングの詳細は、「表のイテレータと値バインディング」を参照してください。

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

ADF Faces Calendarは、カレンダ機能をアプリケーションに追加する場合に使用できます。日付、時刻、件名、場所および所有者などの、カレンダによって提供されるコンテンツを表す関連データがデータ・ストアに含まれている必要があります。

ADF Facesには、カレンダ・コンポーネントが含まれています。このコンポーネントは、日単位、週単位、月単位でアクティビティを表示します。図37-1に、いくつかのサンプル・アクティビティがある週表示モードのADF Faces Calendarを示します。

図37-1 ADF Faces Calendar

このコンポーネントには、次の機能も含まれています。

月単位、週単位、日単位、およびリスト・ビューを切り替えるためのツールバー。

ヒント:

これらのツールバー・ボタンを使用すると、Calendarの属性値が変わります。この値が保持されるように構成し、特定のユーザーがカレンダにアクセスしたときには必ずその値で表示されるようにできます。詳細は、「実行時のユーザー・カスタマイズの許可」を参照してください。
週のはじめの曜日および1日の開始時刻の設定。たとえば、カレンダの1週間は日曜日に、1日は8:00 amから始まるように設定できます。
スキニング・キーを使用した構成可能なスタイル。

さらに、その他のADF Facesコンポーネントやリッチ・クライアント・フレームワークを使用して、次の機能を実装することもできます。

ポップアップ機能。サポートされているファセットに配置されたコンポーネント。特定のイベントに応答し、ユーザーがアクティビティやカレンダに従って行動できるようにします。たとえば、ユーザーがCalendar内のアクティビティをクリックすると、CalendarActivityEventが起動され、ActivityDetailファセットにあるポップアップ・コンポーネントがすべて表示されます。図37-2に示すように、ユーザーがアクティビティを表示および編集できるフォームを含んでいるダイアログ・コンポーネントを使用することもできます。

図37-2 ActivityDetailファセットの「編集」ダイアログ

「図37-2 ActivityDetailファセットの「編集」ダイアログ」の説明
ドラッグ・アンド・ドロップ機能: calendarDropTargetタグを追加して、ユーザーがアクティビティをカレンダの別の場所にドラッグできるようにすることができます。その後、アクティビティで実際に時刻が変更され、データ・ストアに保持されるように機能を実装します。
ツールバーのカスタマイズ: デフォルトでは、ツールバーにはユーザーがビューを切り替えるためのボタンとともに、「前へ」、「次へ」ボタンや現在の日付に戻るためのボタンが含まれます。また、このツールバーには現在の日付範囲(日表示の場合は日付)が表示されます。ユーザーが選択したボタンを含むファセットを追加して、ツールバーをカスタマイズすることができます。
スキニング: カレンダはスキニング・キーを使用して、使用する色やアイコンなどを決定できます。スキンを拡張して、カレンダの外観を変更できます。

組込み機能の構成方法や、追加機能の実装方法の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「カレンダ・コンポーネントの使用方法」の章を参照してください。

ADF Faces CalendarコンポーネントはCalendarModelクラスにバインドする必要があります。このクラスは、ユーザーがADFビジネス・コンポーネントを使用して、カレンダ・データを管理するときに、このユーザーのために作成することができます。たとえば、日付、時刻、件名、場所、所有者など、アクティビティの詳細を表すデータがデータ・ストアに入っているとします。このデータを表すエンティティ・オブジェクトを作成してから、このデータを表示するためのビュー・オブジェクトを作成した場合、関連するコレクションを「データ・コントロール」パネルからドラッグ・アンド・ドロップして、カレンダを作成できます。JDeveloperはモデルを宣言的に作成して、このモデルにビューをバインドし、カレンダを起動したときに正しいデータが表示されるようにします。ただし、モデルを作成するためには、ADFビジネス・コンポーネントを持つデータ・モデル・プロジェクトのエンティティ・オブジェクトおよび同じプロジェクト内のビュー・オブジェクトに、有効日指定の属性が必要です。また、ビュー・オブジェクトには、指定された日付範囲に対する正しいアクティビティを返すように問合せを修正するための変数も必要です。

ADF Faces Calendarの作成方法

JSFページでカレンダを作成する前に、まず、カレンダの属性を表す具体的な属性を持つエンティティ・オブジェクトを作成する必要があります。その後、このエンティティ・オブジェクトからビュー・オブジェクトを作成し、表示する日付範囲と現在のタイムゾーンを表す名前付きバインド変数を使用して、問合せを編集してください。これにより、この問合せから、カレンダの指定されたビューに表示すべきアクティビティのみが返されるようになります。

たとえば、あるアクティビティを表すデータベース表があるとします。これには、タイトル列、開始時刻、終了時刻、所有者を表すプロバイダ・オブジェクトへの参照が含まれています。この表に基づいて、(次のステップで説明するとおり、要件を満たすことを保証しながら)エンティティ・オブジェクトとビュー・オブジェクトを作成します。その後、ビュー・オブジェクトに、カレンダに現在表示されている開始時刻と終了時刻を表す名前付きバインド変数、カレンダで現在使用されているタイムゾーンを追加します。これにより、問合せはその時間範囲内に収まるアクティビティのみを返すようになります。

カレンダ・コンポーネントは、JSFページに追加した後で構成と機能の追加が可能になります。

始める前に:

カレンダの作成時には使用可能なオプションに関する知識が役立つ場合があります。詳細は、「ADF Faces Calendarコンポーネントの使用方法」を参照してください。

ADF Faces Calendarを作成するには:

データ・ソースに基づいて、エンティティ・オブジェクトを作成します。このエンティティ・オブジェクトには、表37-1に示す属性が含まれていなければなりません。これらの属性は、必ずしも、この表に示す名前を使用する必要はありません。どのような名前でもつけられます。ただし、記載されているタイプのいずれかでなければなりません。後述のステップで、これらの属性を、CalendarModelの属性にマップします。

表37-1 カレンダに必須の属性

属性	有効なタイプ	説明
開始時間	`java.util.Date、java.sql.Date、oracle.jbo.domain.Date、oracle.jbo.domain.TimeStamp`	アクティビティの開始時刻
終了時間	`java.util.Date、java.sql.Date、oracle.jbo.domain.Date、oracle.jbo.domain.TimeStamp`	アクティビティの開始時刻
ID	`String`	一意のID
プロバイダID	`String`	アクティビティの所有者を表すプロバイダ・オブジェクトのID
タイトル	`String`	アクティビティの簡単な説明

このエンティティ・オブジェクトには、表37-2に示す既知の属性を含めることができます(必須ではありません)。

表37-2 カレンダに必要に応じて指定できる属性

属性	タイプ	説明
繰返し	`String`または`CalendarActivity.Recurring`	アクティビティの繰返しステータス。有効な値は`SINGLE`(繰り返さない)、`RECURRING`(繰り返す)、または`CHANGED`(このアクティビティは繰返しアクティビティの一部だが、修正されていて、親アクティビティとは異なる)です。
アラーム	`String`または`CalendarActivity.Reminder`	アクティビティに関連付けられたアラームがあるかどうか。有効な値は`ON`または`OFF`です。
時間タイプ	`String`または`CalendarActivity.TimeType`	アクティビティに関連付けられている時間のタイプ。有効値は`ALLDAY`および`TIME`です。値`ALLDAY`を持つアクティビティには、時間は関連付けられていません。これらは1日中続くとみなされます。値`TIME`を持つアクティビティは具体的な継続時間を持ちます。
場所	`String`	アクティビティの場所。
タグ	`String`値の`Set`、またはセミコロンで区切った`String`値のリスト。	アクティビティのキーワード

エンティティ・オブジェクトは、CalendarModelが認識していない属性を含むこともできます。これらの属性は、後述のステップでカスタム・プロパティとしてモデルに追加できます。

エンティティ・オブジェクトの作成の詳細は、「エンティティ・オブジェクトを使用したビジネス・ドメイン・レイヤーの作成」を参照してください。

関連するビュー・オブジェクトを作成します。概要エディタの「問合せ」ページで、次に対する名前付きバインド変数を作成します。
- タイムゾーンを表す文字列
- カレンダに表示されている現在の日付範囲の開始日を表す日付
- カレンダに表示されている現在の日付範囲の終了日を表す日付
  
  ヒント:
  
  ADF Facesカレンダの日付は「半分空いている」状態です。つまり、カレンダは、開始時刻ちょうどまたはそれ以降に始まり、終了時刻前に(ちょうどではない)アクティビティすべてを戻します。
  
  名前付きバインド変数の作成の詳細は、「バインド変数の使用」を参照してください。

アクティビティのプロバイダ(所有者)を表すエンティティ・オブジェクトを作成します。このエンティティ・オブジェクトには、表37-3に示す属性が含まれていなければなりません。これらの属性は、必ずしも、この表に示す名前を使用する必要はありません。どのような名前でもつけられます。ただし、記載されているタイプでなければなりません。後述のステップで、これらの属性を、CalendarProviderの属性にマップします。

表37-3 CalendarProviderクラスの属性

属性	タイプ	説明
ID	`String`	一意のID。
表示名	`String`	カレンダに表示できるプロバイダ名。

このプロバイダのビュー・オブジェクトを作成します。
新しいビュー・オブジェクトがアプリケーション・モジュールの一部であることを確認し、必要に応じて、「データ・コントロール」パネルをリフレッシュします。
「Webページの作成」の手順に従って、JSFページを作成します。
「データ・コントロール」パネルから、ステップ2で作成したアクティビティに対応するビュー・オブジェクトを表すコレクションをドラッグし、カレンダとしてドロップします。

ヒント:

「カレンダ」オプションは、ビュー・オブジェクトに必須属性(表37-1を参照)とバインド変数(ステップ2を参照)が含まれている場合にのみ、コンテキスト・メニューに表示されます。
「カレンダ・バインディング」ダイアログで、CalendarModelおよびCalendarProviderクラスにバインド変数と属性をマップします。詳細は、「ヘルプ」をクリックするか、[F1]を押してください。
デフォルトでは、カレンダは読取り専用で、そのときにデータ・ストアに入っているアクティビティのみが返されます。『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「カレンダ・コンポーネントの使用方法」の章の説明に従って、カレンダを構成し、追加機能を実装することが必要になります。

たとえば、新しいアクティビティを作成できるようにするには、カレンダを作成したときに使用したものと同じデータ・コントロールのコレクションを使用して、ダイアログに入力フォーム作成します(ダイアログの作成手順は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のダイアログの作成方法に関する項を参照)。入力フォームの作成の詳細は、「入力フォームの作成」を参照してください。

カレンダの作成時に行われる処理

コレクションをカレンダとしてドロップすると、JDeveloperにより次の処理が行われます。

アクティビティ・コレクションへのイテレータ・バインディングを1つと、プロバイダ・コレクションへのイテレータ・バインディングを1つ定義します。
アクティビティ・コレクションでexecuteWithParams操作へのアクション・バインディングを定義します。表示するアクティビティを返す問合せの実行のために呼び出されるのはこの操作です。この操作には日付範囲とタイムゾーンを決定するためのパラメータが必要であるため、(ビュー・オブジェクトで名前付きバインド変数として作成された)パラメータそれぞれについて、NamedData要素も作成されます。NamedData要素の詳細は、「メソッドのパラメータ」を参照してください。
ノート:

カレンダ・ページ定義ファイルのNDTypeとしてjava.sql.Dateを指定すると、ランタイム・エラーが発生します。かわりに次のサポートされたデータ型の1つを使用してください。
- oracle.jbo.domain.Timestamp
- oracle.jbo.domain.Date
- java.sql.Timestamp
- java.util.Date
カレンダ・バインディングを定義します。このバインディングは、ウィザードで定義したとおり、コレクションの行を表すnode要素を含み、データ・コントロール属性をカレンダ・アクティビティの属性にマップします。valueはデータ・コントロール属性、typeはカレンダ属性です。カスタム定義属性では、typeはcustom、valueはデータ・コントロール属性になります。各行(ノード)はrowKeyで表されます。これはアクティビティIDです。

また、利用可能なプロバイダのソースとマッピングを決定するproviderDefinition要素もあります。このマッピングにより、カレンダ・モデルはプロバイダの状態(有効または無効)に基づいてアクティビティをフィルタできるようになります。

ヒント:

カスタム属性にアクセスするには、value要素で定義された属性名で渡されるCalendarActivity.getCustomAttributes()メソッドを使用します。

次の例は、カレンダのページ定義コードを示しています。

<executables>
    <iterator Binds="ActivityView1" RangeSize="-1"
              DataControl="AppModuleDataControl" id="ActivityView1Iterator"/>
    <iterator Binds="EmployeesView1" RangeSize="25"
              DataControl="AppModuleDataControl" id="EmployeesView1Iterator"/>
  </executables>
  <bindings>
    <action IterBinding="ActivityView1Iterator" id="ExecuteWithParams"
            RequiresUpdateModel="true" Action="executeWithParams">
      <NamedData NDName="startTime"
                 NDValue="#{bindings.ActivityView1.startDate}"
                 NDType="oracle.jbo.domain.Date"/>
      <NamedData NDName="endTime" NDValue="#{bindings.ActivityView1.endDate}"
                 NDType="oracle.jbo.domain.Date"/>
      <NamedData NDName="timeZone"
                 NDValue="#{bindings.ActivityView1.timeZoneId}"
                 NDType="java.lang.String"/>
    </action>
    <calendar IterBinding="ActivityView1Iterator" id="ActivityView1"
              xmlns="http://xmlns.oracle.com/adf/faces/binding"
              ActionBindingName="ExecuteWithParams">
      <nodeDefinition DefName="model.ActivityView">
        <AttrNames>
          <Item Type="id" Value="Id"/>
          <Item Type="providerId" Value="ProviderId"/>
          <Item Type="title" Value="Title"/>
          <Item Type="startTime" Value="StartTime"/>
          <Item Type="endTime" Value="EndTime"/>
        </AttrNames>
      </nodeDefinition>
      <providerDefinition IterBindingName="EmployeesView1Iterator">
        <AttrNames>
          <Item Type="id" Value="EmployeeId"/>
          <Item Type="displayName" Value="FirstName"/>
        </AttrNames>
      </providerDefinition>
    </calendar>
  </bindings>

次の例に示すとおり、JDeveloperはCalendarModelクラスにカレンダ値をバインドするコードをJSFページに挿入します。

<af:form>
  <af:calendar value="#{bindings.ActivityView1.calendarModel}"/>
</af:form>

CalendarModelクラスは、カレンダ・バインディングへのアクセスにCalendarActivityDefinitionクラスを使用します。

実行時に行われる処理: カレンダ・バインディングの動作方法

カレンダにアクセスすると、executeWithParams操作が、カレンダ・コンポーネントのviewおよびactiveDay属性により決定されるstartDateおよびendDateパラメータ値を使って呼び出されます。たとえば、view属性がmonthに設定されていて、activeDayが現在の日付(例: May 5, 2013)に設定されている場合、startDateはMay 1, 2013になり、endDateの値はMay 31, 2013になります。デフォルトでは、タイムゾーン値はtrinidad-config.xmlファイルのtime-zone設定から取得されます(詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のtrinidad-config.xmlでの構成に関する項を参照)。したがって、問合せは、この日付範囲内に収まるアクティビティのみを返すように制限されます。

カレンダ・コンポーネントはCalendarModelにバインドされているため、問合せがデータを返すとき、CalendarModelはCalendarActivityDefinitionクラスを使用して、カレンダ・バインディング・クラスにアクセスし、このバインディングが提供するマッピングを使用して、データ・ソースからカレンダに値をマップします。

ADF Faces Carouselコンポーネントの使用方法

ADF Faces Carouselコンポーネントを使用すると、一連のイメージからイメージを1つ表示できます。ユーザーは、そのイメージを表示する前後に各イメージの部分ビューを確認したり、イメージを順にスクロールできます。

図37-3に示すように、イメージを回転カルーセルに表示できます。正面にある画像を変更するには、下部のスライダを使用するか、または別の画像を正面にドラッグします。

図37-3 Carouselコンポーネント

「図37-3 Carouselコンポーネント」の説明

表示されるイメージごとに子carouselItemコンポーネントを組み込み、これらのコンポーネントを個々のイメージにバインドするかわりに、carouselコンポーネントを完成コレクションにバインドし、ツリーがデータの各行をスタンプ処理するのと同じ方法で、各アイテムの値をスタンプ処理して、1つのcarouselItemコンポーネントを繰り返しレンダリングします。各項目にスタンプが設定されると、現在の項目のデータが、carouselコンポーネントvar属性を使用するEL式を使用して特定可能なプロパティにコピーされます。カルーセルのレンダリングが完了したら、このプロパティは削除されるか前の値に戻ります。カルーセルはnodeStampファセットを持っています。このファセットは、各アイテムに関するテキストと簡単な説明の表示に使用されるcarouselItemコンポーネントのホルダーで、各アイテムについて表示されるイメージの親コンポーネントでもあります。カルーセル・コンポーネントの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のカルーセルでのイメージの表示に関する項を参照してください。

データバインドされたCarouselコンポーネントの作成方法

Fusion Webアプリケーションでカルーセル・コンポーネントを使用する場合は、このコンポーネントの作成に「データ・コントロール」パネルを使用します。また、カルーセルのスピン・イベントの処理にはマネージドBeanを使用します。その他のロジックについては、アイテムの表示が必要になる可能性があります。

始める前に:

カルーセルの作成時に選択可能なオプションについて理解しておいてください。詳細は、「ADF Faces Carouselコンポーネントの使用方法」を参照してください。

また、カルーセルと併用できる機能について理解しておくとよいでしょう。詳細は、「データバインドされたADF Facesカレンダおよびカルーセル・コンポーネントの追加機能」を参照してください。

JDeveloperで、次の手順を実行します。

カルーセルに表示されるコレクションに対するビュー・オブジェクトを作成します。たとえば、図37-3に示すようなカルーセルを作成する場合は、Inventoryビュー・オブジェクトを使用します。

マネージドBeanを作成して、そのマネージドBeanに、カルーセルの回転を処理するメソッドを保持します。次の例は、アイテムをカルーセルに表示するために使用できるハンドラ・メソッドを示しています。

public void handleCarouselSpin(CarouselSpinEvent event) 
{
// This method is invoked when there is a spin event on the carousel in
// InventoryControl.jsff. The purpose is to get the newly selected item in the
// carousel and update the iterator current row with the value  

// get the bindingContainer
  DCBindingContainer dcBindings = (DCBindingContainer)
  BindingContext.getCurrent().getCurrentBindingsEntry();
  // get the NewItemKey from the event object. The first entry in the list is the
  // currently selected item
  List itemKeyList = (List) event.getNewItemKey();
  // create a Key ojbect instance and set it to the first key in the list
  Key currentItemKey = (Key) itemKeyList.get(0);
  // get the iteratorBinding    
  DCIteratorBinding inventoryIterator =
 dcBindings.findIteratorBinding("InventoryIterator");
 // set the iterator 
 inventoryIterator.setCurrentRowWithKey(currentItemKey.toStringFormat(true));
}

データバインドされたCarouselコンポーネントを作成するには:

「データ・コントロール」パネルから、ビュー・オブジェクトで使用されるコレクションをページにドラッグし、ポップアップ・メニューから「カルーセル」を選択します。
「プロパティ」ウィンドウの「動作」セクションで、前提条件として作成したハンドラ・メソッドにCarouselSpinListenerをバインドします。
構造ウィンドウで、carouselコンポーネントとnodeStampファセットを展開し、carouselItemコンポーネントを選択します。
CarouselItemコンポーネントのtext属性を、ビュー・オブジェクトの関連プロパティにバインドします。このバインドには、カルーセルのvar属性に設定されている変数値(デフォルトではitem)を使用します。たとえば、ビュー・オブジェクトのName属性を使用する場合、carouselItemのtext属性の値は、#{item.Name}になります。

それ以外のプロパティをtext属性にバインドすることで、別の情報を表示することもできます。たとえば、インベントリ・カルーセルでは、NameプロパティとAmountInStockプロパティの両方をtext属性にバインドします。
「コンポーネント」ウィンドウの「ADF Faces」ページで、「一般コントロール」パネルから「イメージ」をドラッグし、それを子としてcarouselItemにドロップします。
「イメージの挿入」ダイアログに、画像ソースへのパスを入力します。必ず、カルーセルでこのアイテムを表している変数を使用してください。たとえば、この製品の画像ファイルへのパスは通常、次のようになります。
```
/images/products/#{item.Filename}
```
shortDesc属性をテキストにバインドします。このテキストは、マウス・ポインタをイメージ上に移動したときに表示されます。次に例を示します。
```
#{item.Name}
```
carouselコンポーネントとcarouselItemコンポーネントのその他の属性を設定する方法は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のカルーセルの作成方法に関する項を参照してください。
カルーセル内のアイテムに関する追加情報を提供する場合は、同じビュー・オブジェクトをドラッグして、たとえば表としてページにドロップします。この表内のコンポーネントに、カルーセルの回転後に表示される現行のアイテムの情報が再表示されるようにするには、フォームを含んでいるコンポーネントのpartialTrigger属性をカルーセル・コンポーネントのIDに設定する必要があります。
たとえば、各アイテムの情報を表示する表があるとします(図37-3を参照)。このtableコンポーネントのpartialTrigger属性は、カルーセル・コンポーネントのIDであるc1に設定されます。これにより、carouselItemでCarouselSpinEventを起動するたびに、tableがリフレッシュされ、カルーセルで現行になったアイテムの情報を表示する行が表内の現行の行になります。

さらに、カルーセルとカルーセル・アイテムのpartialTrigger属性を、表のIDであるt1に設定します。これにより、表で選択イベントが発生するたびに、カルーセルがリフレッシュされ、表内で現行になったアイテムがカルーセルでの現行アイテムになります。

部分ページ・レンダリングとpartialTriggers属性の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「部分ページ・コンテンツの再レンダリング」の章を参照してください。

次の例は、図37-3に示すカルーセルのページ・コードを示しています。
```
<f:facet name="first">
  <af:carousel currentItemKey="#{bindings.Inventory.treeModel.rootCurrencyRowKey}"
               value="#{bindings.Inventory.treeModel}" var="item" id="c1"
               carouselSpinListener="#{InventoryControl.handleCarouselSpin}"
               partialTriggers="::t1">
    <f:facet name="nodeStamp">
      <af:carouselItem id="ci1" text="#{item.Name} #{item.AmountInStock}"
                       partialTriggers="::t1">
        <af:image source="/images/products/#{item.Filename}"
                  shortDesc="#{item.Name}" id="i1"/>
      </af:carouselItem>
    </f:facet>
  </af:carousel>
</f:facet>
<f:facet name="second">
  <af:table value="#{bindings.Inventory.collectionModel}" var="row"
            rows="#{bindings.Inventory.rangeSize}"
            emptyText="#{bindings.Inventory.viewable ? 'No data to display.' :
                        'Access Denied.'}"
            fetchSize="#{bindings.Inventory.rangeSize}" rowBandingInterval="0"
            selectedRowKeys="#{bindings.Inventory.collectionModel.selectedRow}"
            selectionListener="#{bindings.Inventory.collectionModel.makeCurrent}"
            rowSelection="single" id="t1"
            columnStretching="last" partialTriggers="::c1">
```

カルーセルの作成時に行われる処理

「データ・コントロール」パネルからコレクションをカルーセルとしてドロップすると、ツリーの値バインディングが作成されます。ツリーはノードの階層で構成され、各サブノードは上位レベルのノードから分岐します。

ツリー・バインディングは、イテレータ・バインディングによって公開されたデータ全体を反復します。このカルーセルは、イテレータ・バインディングからの結果セットを、collectionModelの拡張であるtreeModelオブジェクト内にラップします。collectionModelにより、コレクションの各アイテムは、var属性を使用してカルーセル・コンポーネント内で使用できるようになります。ツリー・バインディングの詳細は、「表のイテレータと値バインディング」を参照してください。

次の例に示すように、JDeveloperはcarouselコンポーネントとその子carouselItemコンポーネントの両方をページに追加します。

<af:carousel
        currentItemKey="#{bindings.Products.treeModel.rootCurrencyRowKey}"
        value="#{bindings.Products.treeModel}" var="item"
        id="c1"
        carouselSpinListener="#{InventoryControl.handleCarouselSpin}">
  <f:facet name="nodeStamp">
    <af:carouselItem id="ci1" text="#{item.Name}"/>
  </f:facet>
</af:carousel>

カルーセルの値は、関連するコレクションのtreeModelにバインドされています。また、カルーセルのcurrentItemKey属性は、バインディング・オブジェクトのrootCurrencyRowKeyにバインドされています。この例では、カルーセルがProductsイテレータ・バインディングのアイテムを反復します。イテレータ・バインディングは、現在の製品を追跡するrowKeySetにバインドします。デフォルトでは、カルーセルのcurrentItemKey属性は、バインディング・オブジェクトのrootCurrencyRowKeyにバインドされています。このため、カルーセルの正面に表示されている製品が、ルートおよびカレント・アイテムになります。carouselItemコンポーネントは、item変数を使用して、カルーセル・タグに表示されているカレント・アイテムのカレント・データ・オブジェクトにアクセスします。