| Oracle® Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド 11g リリース2(11.1.2.2.0) B69399-01 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド 11g リリース2(11.1.2.2.0) B69399-01 |
|
前 |
次 |
この章では、Fusion Webアプリケーションで、ADF Faces CalendarコンポーネントとCarouselコンポーネントをページに追加する方法について説明します。
この章の内容は次のとおりです。
ADF Faces CalendarおよびADF Faces Carouselは、アプリケーションにカレンダ機能を組み込んだり、回転するイメージを表示する場合に使用できる複雑なコンポーネントです。ADF Faces Calendarはアクティビティを日、週、月単位で表示したり、特定のプロバイダのリスト・ビューに表示します。カレンダは、一部のビューのみ表示するように構成できます。Calendarには、ユーザーが表示を(日、週、月またはリスト間で)変更、前または次の日、週、月に移動、および本日に戻ることのできる組込み機能のあるツールバーが含まれます。ツールバーはカスタマイズ可能で、表示するボタンやテキストの選択に加え、ボタンやその他のコンポーネントの追加もできます。
ADF Faces Carouselは、スライダを使用したり別のイメージをクリックすることにより、選択可能なイメージを回転ループに表示できます。これは、水平方向または垂直方向に構成できます。カルーセルとともに他のコンポーネントを使用できます。ツールバーやメニュー・バーを追加して、ユーザーが現在のオブジェクトに対してアクションを実行できるようにするボタンやメニュー項目をそれらに追加できます。
ADF Faces Calendarは、カレンダ機能をアプリケーションに追加する場合に使用できます。日付、時刻、件名、場所および所有者などの、カレンダによって提供されるコンテンツを表す関連データがデータ・ストアに含まれている必要があります。使い慣れたエンティティ・オブジェクトとビュー・オブジェクトのパターンを使用してデータをモデリングし、さらに「データ・コントロール」パネルからドラッグ・アンド・ドロップしてカレンダを作成できます。
Carouselコンポーネントを使用すると、一連のイメージからイメージを1つ表示できます。ユーザーは、そのイメージを表示する前後に各イメージの部分ビューを確認したり、イメージを順にスクロールできます。それには、スライダやナビゲーション・ボタンを使用します。カルーセルは、高度な視覚化表現を必要とするオブジェクトの表示に役立ちます。たとえば、カタログに写真コレクションや商品を表示する際に使用できます。
ADFモデル・レイヤーを構成または使用する前に、他のADF機能を理解しておくと役立つ場合があります。また、モデル・レイヤーの構成によって可能になることについても、確認しておくことをお薦めします。次に、関連する他の機能へのリンクを示します。
個人ユーザー用にカレンダをカスタマイズし、そのユーザーがカレンダにアクセスすると、選択した構成でカレンダが表示されるようにできます。詳細は、第40章「実行時でのユーザー・カスタマイズの許可」を参照してください。
カレンダはエンティティ・オブジェクトに基づいています。エンティティ・オブジェクトの作成の詳細は、第4章「エンティティ・オブジェクトを使用したビジネス・ドメイン・レイヤーの作成」を参照してください。
部分ページ・レンダリングおよびpartialTriggers属性の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「部分ページ・コンテンツのレンダリング」を参照してください。
Carouselコンポーネントは、ツリー・バインディングを使用してデータを反復します。ツリー・バインディングの詳細は、27.2.2.1項「表のイテレータと値バインディング」を参照してください。
ADF Facesには、作成されたアクティビティを日、週、月単位のビューに表示するカレンダ・コンポーネントが含まれています。図32-1に、いくつかのサンプル・アクティビティがある週表示モードのADF Faces Calendarを示します。
このコンポーネントには、次の機能も含まれています。
月単位、週単位、日単位、およびリスト・ビューを切り替えるためのツールバー。
|
ヒント: これらのツールバー・ボタンを使用すると、Calendarの属性値が変わります。この値が保持されるように構成し、特定のユーザーがカレンダーにアクセスしたときには必ずその値で表示されるようにできます。詳細は、第40章「実行時でのユーザー・カスタマイズの許可」を参照してください。 |
週のはじめの曜日および1日の開始時刻の設定。たとえば、カレンダの1週間は日曜日に、1日は午前8時から始まるように設定できます。
スキニング・キーを使用した構成可能なスタイル。
さらに、その他のADF Facesコンポーネントやリッチ・クライアント・フレームワークを使用して、次の機能を実装することもできます。
ポップアップ機能: サポートされているフェースに配置されたコンポーネント。ある特定のイベントに応答し、ユーザーがアクティビティやカレンダに従って行動できるようにします。たとえば、ユーザーがCalendar内のアクティビティをクリックすると、CalendarActivityEventが起動され、ActivityDetailファセットにあるポップアップ・コンポーネントがすべて表示されます。図32-2に示すように、ユーザーがアクティビティを表示および編集できるフォームを含んでいるダイアログ・コンポーネントを使用することもできます。
ドラッグ・アンド・ドロップ機能: calendarDropTargetタグを追加して、ユーザーがアクティビティをカレンダの別の場所にドラッグできるようにすることができます。その後、アクティビティで実際に時刻が変更され、データ・ストアに保持されるように機能を実装します。
ツールバーのカスタマイズ: デフォルトでは、ツールバーにはユーザーがビューを切り替えるためのボタンとともに、「前へ」、「次へ」ボタンや現在の日付に戻るためのボタンが含まれます。また、このツールバーには現在の日付範囲(日表示の場合は日付)が表示されます。ユーザーが選択したボタンを含むファセットを追加して、ツールバーをカスタマイズすることができます。
スキニング: カレンダはスキニング・キーを使用して、使用する色やアイコンなどを決定できます。スキンを拡張して、カレンダの外観を変更できます。
組込み機能の構成や、追加機能の実装に関する詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「Calendarコンポーネントの使用方法」を参照してください。
ADF Faces CalendarコンポーネントはCalendarModelクラスにバインドする必要があります。このクラスは、ユーザーがADF Business Componentsを使用して、カレンダ・データを管理するときに、このユーザーのために作成することができます。たとえば、日付、時刻、件名、場所、所有者など、アクティビティの詳細を表すデータがデータ・ストアに入っているとします。このデータを表すエンティティ・オブジェクトを作成してから、このデータを表示するためのビュー・オブジェクトを作成した場合、関連するコレクションを「データ・コントロール」パネルからドラッグ・アンド・ドロップして、カレンダを作成できます。JDeveloperはモデルを宣言的に作成して、このモデルにビューをバインドし、カレンダを起動したときに正しいデータが表示されるようにします。ただし、モデルを作成するためには、ADF Business Componentsを持つデータ・モデル・プロジェクトのエンティティ・オブジェクトおよび同じプロジェクト内のビュー・オブジェクトに、有効日指定の属性が必要です。また、ビュー・オブジェクトには、指定された日付範囲に対する正しいアクティビティを返すように問合せを修正するための変数も必要です。
JSFページでカレンダを作成する前に、まず、カレンダの属性を表す具体的な属性を持つエンティティ・オブジェクトを作成する必要があります。その後、このエンティティ・オブジェクトからビュー・オブジェクトを作成し、表示する日付範囲と現在のタイムゾーンを表す名前付きバインド変数を使用して、問合せを編集してください。これにより、この問合せから、カレンダーの指定されたビューに表示すべきアクティビティのみが返されるようになります。
たとえば、あるアクティビティを表すデータベース・テーブルがあるとします。これには、タイトル列、開始時刻、終了時刻、所有者を表すプロバイダ・オブジェクトへの参照が含まれています。このテーブルに基づいて、(次の手順で説明するとおり、要件を満たすことを保証しながら)エンティティ・オブジェクトとビュー・オブジェクトを作成します。その後、ビュー・オブジェクトに、カレンダに現在表示されている開始時刻と終了時刻を表す名前付きバインド変数、カレンダで現在使用されているタイムゾーンを追加します。これにより、問合せはその時間範囲内に収まるアクティビティのみを返すようになります。
JSFページにカレンダ・コンポーネントを追加すると、これを構成して、必要な機能をさらに追加できるようになります。
作業を始める前に、次のようにします。
カレンダの作成時には使用可能なオプションに関する知識が役立つ場合があります。詳細は、32.2項「ADF Faces Calendarコンポーネントの使用方法」を参照してください。
ADF Faces Calendarを作成する手順:
データ・ソースに基づいて、エンティティ・オブジェクトを作成します。このエンティティ・オブジェクトには、表32-1に示す属性が含まれていなければなりません。これらの属性は、必ずしも、この表に示す名前を使用する必要はありません。どのような名前でもつけられます。ただし、記載されているタイプのいずれかでなければなりません。後述の手順で、これらの属性を、CalendarModelの属性にマップします。
表32-1 カレンダに必須の属性
| 属性 | 有効なタイプ | 説明 |
|---|---|---|
|
開始時間 |
|
アクティビティの開始時刻 |
|
終了時間 |
|
アクティビティの開始時刻 |
|
ID |
|
一意のID |
|
プロバイダID |
|
アクティビティの所有者を表すプロバイダ・オブジェクトのID |
|
タイトル |
|
アクティビティの簡単な説明 |
このエンティティ・オブジェクトも、表32-2に示す既知の属性を含むことができます(必須ではありません)。
表32-2 カレンダに必要に応じて指定できる属性
| 属性 | タイプ | 説明 |
|---|---|---|
|
繰返し |
|
アクティビティの繰返しステータス。有効な値は |
|
アラーム |
|
アクティビティに関連付けられたアラームがあるかどうか。有効な値は |
|
時間タイプ |
|
アクティビティに関連付けられている時間のタイプ。有効値は |
|
場所 |
|
アクティビティの場所。 |
|
タグ |
|
アクティビティのキーワード |
エンティティ・オブジェクトは、CalendarModelが認識していない属性を含むこともできます。これらの属性は、後述の手順でカスタム・プロパティとしてモデルに追加できます。
エンティティ・オブジェクトの作成の詳細は、第4章「エンティティ・オブジェクトを使用したビジネス・ドメイン・レイヤーの作成」を参照してください。
関連するビュー・オブジェクトを作成します。概要エディタの「問合せ」ページで、次に対する名前付きバインド変数を作成します。
タイムゾーンを表す文字列
カレンダに表示されている現在の日付範囲の開始日を表す日付
カレンダに表示されている現在の日付範囲の終了日を表す日付
|
ヒント: ADF Facesカレンダの日付は「半分空いている」状態です。つまり、カレンダは、開始時刻ちょうど、またはそれ以降に始まり、終了時刻前に(ちょうどではない)アクティビティすべてを戻します。 |
名前付きバインド変数の作成の詳細は、5.10項「バインド変数の使用」を参照してください。
アクティビティのプロバイダ(所有者)を表すエンティティ・オブジェクトを作成します。このエンティティ・オブジェクトには、表32-3に示す属性が含まれていなければなりません。これらの属性は、必ずしも、この表に示す名前を使用する必要はありません。どのような名前でもつけられます。ただし、記載されているタイプでなければなりません。後述の手順で、これらの属性を、CalendarProviderの属性にマップします。
このプロバイダのビュー・オブジェクトを作成します。
新しいビュー・オブジェクトがアプリケーション・モジュールの一部であることを確認し、必要に応じて、「データ・コントロール」パネルをリフレッシュします。
24.3項「Webページの作成」の手順に従って、JSFページを作成します。
「データ・コントロール」パネルから、ステップ2で作成したアクティビティに対応するビュー・オブジェクトを表すコレクションをドラッグし、カレンダとしてドロップします。
「カレンダ・バインディング」ダイアログで、CalendarModelおよびCalendarProviderクラスにバインド変数と属性をマップします。詳細は、「ヘルプ」をクリックするか、[F1]を押してください。
デフォルトでは、カレンダは読取り専用で、そのときにデータ・ストアに入っているアクティビティのみが返されます。『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「Calendarコンポーネントの使用方法」に説明されている手順に従って、カレンダを構成し、その他の機能を実装する必要があります。
たとえば、新しいアクティビティを作成できるようにするには、カレンダの作成に使用したものと同じデータ・コントロールを使用し、(『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のダイアログの作成方法に関する項の説明に従って)ダイアログで入力フォームを作成します。入力フォームの作成に関する詳細は、26.6項「入力フォームの作成」を参照してください。
コレクションをカレンダとしてドロップすると、JDeveloperにより次の処理が行われます。
アクティビティ・コレクションへのイテレータ・バインディングを1つと、プロバイダ・コレクションへのイテレータ・バインディングを1つ定義します。
アクティビティ・コレクションでexecuteWithParams操作へのアクション・バインディングを定義します。表示するアクティビティを返す問合せの実行のために呼び出されるのはこの操作です。この操作には日付範囲とタイムゾーンを決定するためのパラメータが必要であるため、(ビュー・オブジェクトで名前付きバインド変数として作成された)パラメータそれぞれについて、NamedData要素も作成されます。NamedData要素の詳細は、28.2.2.2項「メソッドでのパラメータの使用方法」を参照してください。
カレンダ・バインディングを定義します。このバインディングには、ウィザードを使用して定義したように、コレクションの行を表すnode要素が含まれており、データ・コントロール属性をカレンダ・アクティビティの属性にマップします。valueはデータ・コントロール属性、typeはカレンダ属性です。カスタム定義属性では、typeはcustom、valueはデータ・コントロール属性になります。各行(ノード)はrowKeyで表されます。これはアクティビティIDです。
また、利用可能なプロバイダのソースとマッピングを決定するproviderDefinition要素もあります。このマッピングにより、カレンダ・モデルはプロバイダの状態(有効または無効)に基づいてアクティビティをフィルタできるようになります。
|
ヒント: カスタム属性にアクセスするには、 |
例32-1に、カレンダのページ定義コードを示します。
例32-1 カレンダ・バインディングのページ定義コード
<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>
例32-2に示すとおり、JDeveloperはCalendarModelクラスにカレンダ値をバインドするコードをJSFページに挿入します。
例32-2 カレンダのJSFページ・コード
<af:form>
<af:calendar value="#{bindings.ActivityView1.calendarModel}"/>
</af:form>
CalendarModelクラスは、カレンダ・バインディングへのアクセスにCalendarActivityDefinitionクラスを使用します。
カレンダにアクセスすると、executeWithParams操作が、カレンダ・コンポーネントのviewおよびactiveDay属性により決定されるstartDateおよびendDateパラメータ値を使って呼び出されます。たとえば、view属性がmonth、activeDayが当日の日付(ここでは、2009年2月6日とします)に設定されている場合、startDateの値はFebruary 1, 2009、endDateの値はFebruary 28, 2009になります。デフォルトでは、タイムゾーン値はtrinidad-config.xmlファイルのtime-zone設定から取得されます(詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のtrinidad-config.xmlでの構成に関する項を参照してください)。したがって、問合せは、この日付範囲内に収まるアクティビティのみを返すように制限されます。
カレンダ・コンポーネントはCalendarModelにバインドされているため、問合せがデータを返すとき、CalendarModelはCalendarActivityDefinitionクラスを使用して、カレンダ・バインディング・クラスにアクセスし、このバインディングが提供するマッピングを使用して、データ・ソースからカレンダに値をマップします。
図32-3に示すように、イメージを回転カルーセルに表示できます。正面にある画像を変更するには、下部のスライダを使用するか、または別の画像を正面にドラッグします。
表示されるイメージごとに子carouselItemコンポーネントを組み込み、これらのコンポーネントを個々のイメージにバインドするかわりに、carouselコンポーネントを完成コレクションにバインドし、ツリーがデータの各行をスタンプ処理するのと同じ方法で、各アイテムの値をスタンプ処理して、1つのcarouselItemコンポーネントを繰り返しレンダリングします。各項目にスタンプが設定されると、現在の項目のデータが、carouselコンポーネントvar属性を使用するEL式を使用して特定可能なプロパティにコピーされます。カルーセルのレンダリングが完了したら、このプロパティは削除されるか前の値に戻ります。カルーセルはnodeStampファセットを持っています。このファセットは、各アイテムに関するテキストと簡単な説明の表示に使用されるcarouselItemコンポーネントのホルダで、各アイテムについて表示されるイメージの親コンポーネントでもあります。Carouselコンポーネントの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のカルーセルでの画像の表示に関する項を参照してください。
Fusion WebアプリケーションでCarouselコンポーネントを使用する場合、「データ・コントロール」パネルを使用して、コンポーネントを作成します。また、カルーセルのスピン・イベントの処理にはマネージドBeanを使用します。その他のロジックについては、アイテムの表示が必要になる可能性があります。
作業を始める前に、次のようにします。
カレンダの作成時には使用可能なオプションに関する知識が役立つ場合があります。詳細は、32.3項「ADF Faces Carouselコンポーネントの使用方法」を参照してください。
次のタスクを完了する必要があります。
カルーセルに表示されるコレクションに対するビュー・オブジェクトを作成します。
次の最小セットの属性を使用して、ビュー・オブジェクトを定義します。
タイトル。これは、カルーセル内の画像の下に表示されます。
ユーザーがイメージ上にカーソルを置いたときに表示するテキストに使用される短い説明
データバインドされたCarouselコンポーネントを作成する手順:
「データ・コントロール」パネルから、ビュー・オブジェクトで使用されるコレクションをページにドラッグし、ポップアップ・メニューから「カルーセル」を選択します。
プロパティ・インスペクタの「動作」セクションで、ロジックを実行し、カルーセルを回転させる必要のあるときに、この回転を処理するハンドラ・メソッドにCarouselSpinListenerをバインドします。例32-3は、カルーセルの作成に使用されたProductsビュー・オブジェクトで製品画像の表示処理に使用されるハンドラ・メソッドを示します。
例32-3 CarouselSpinEventのハンドラ
public void handleCarouselSpin(CarouselSpinEvent event)
{
RichCarousel carousel = getCarousel();
carousel.setRowKey(event.getNewItemKey());
detailNodeItem = (JUCtrlHierNodeBinding)carousel.getRowData();
}
public JUCtrlHierNodeBinding getDetailNodeItem()
{
// Get the initial item
if(detailNodeItem == null)
{
RichCarousel carousel = getCarousel();
Object oldKey = carousel.getRowKey();
try
{
Object key = carousel.getCurrentItemKey();
getCarousel().setRowKey(key);
detailNodeItem = (JUCtrlHierNodeBinding)carousel.getRowData();
}
finally
{
carousel.setRowKey(oldKey);
}
}
return detailNodeItem;
}
プロパティ・インスペクタの「拡張」セクションで、バインディング属性のドロップダウン・メニューをクリックし、「編集」を選択します。「属性の編集:バインディング」ダイアログで、ステップ2で作成したマネージドBeanを選択します。新しいプロパティcarouselを作成します。これにより、ハンドラ・メソッドがCarouselオブジェクトにアクセスできるようになります。
構造ウィンドウで、carouselコンポーネントとnodeStampファセットを展開し、carouselItemコンポーネントを選択します。
CarouselItemコンポーネントのtext属性を、カルーセルのvar属性で設定されている変数値(デフォルトではitem)を使用して、データ・モデルの関連するプロパティにバインドします。したがって、carouselItemのtext属性の値はitem.titleになります(titleがデータ・モデルのカルーセル・アイテムで使用されるテキストへのアクセスに使用されるプロパティである場合)。
Productsビュー・オブジェクトを使用していた場合、この値は#{item.ProductName}になります。
プロパティ・インスペクタの「拡張」セクションで、バインディング属性のドロップダウン・メニューをクリックし、「編集」を選択します。「属性の編集:バインディング」ダイアログで、ステップ2で作成したマネージドBeanを選択します。新しいプロパティcarouselItemを作成します。
コンポーネント・パレットの「ADF Faces」ページで、「共通コンポーネント」パネルから、Imageをドラッグし、carouselItemの子としてドロップします。
「イメージの挿入」ダイアログに、画像ソースへのパスを入力します。必ず、カルーセルでこのアイテムを表している変数を使用してください。たとえば、この製品の画像ファイルへのパスは通常、次のようになります。
/imageservlet?detail=#{Products.ProductId}
カルーセル内の画像については、次を使用します。
/imageservlet?detail=#{item.ProductId}
carouselおよびcarouselItemコンポーネントのその他の属性の設定に関する詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』のカルーセルの作成方法に関する項を参照してください。
カルーセル内のアイテムに関する追加情報を提供する場合は、同じビュー・オブジェクトをドラッグし、たとえばフォームとしてページにドロップできます。カルーセルが回転したら、そのときに表示されているアイテムの情報が再表示させるようにするには、フォーム内のコンポーネントで、このフォームが含まれるコンポーネントのpartialTrigger属性にCarouselコンポーネントのIDを設定する必要があります。
たとえば、図32-3にある各アイテムの情報を表示するフォームはpanelBoxコンポーネントに含まれています。panelBoxコンポーネントのpartialTrigger属性はc1に設定されていますが、これはこのCarouselコンポーネントのIDです。これは、carouselItemがCarouselSpinEventを呼び出すと必ず、panelBoxがリフレッシュされ、カレントにされたばかりのアイテムに関する情報が表示されるようになるということを意味しています。部分ページ・レンダリングおよびpartialTriggers属性の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』の「部分ページ・コンテンツのレンダリング」を参照してください。
例32-4は、図32-3に示すカルーセルのページ・コードを示しています。
例32-4 部分トリガーにより、表示されているカルーセル・アイテムに合せてフォームが更新される
<af:carousel
currentItemKey="#{bindings.Products.treeModel.rootCurrencyRowKey}"
value="#{bindings.Products.treeModel}" var="item"
id="c1"
carouselSpinListener="#{carBean.handleCarouselSpin}">
<f:facet name="nodeStamp">
<af:carouselItem id="ci1" text="#{item.ProductName}"
binding="#{carBean.carouselItem}">
<af:image source="/imageservlet?detail=#{item.ProductId}"
id="i1"/>
</af:carouselItem>
</f:facet>
</af:carousel>
<af:panelBox text="PanelBox1" id="pb1" partialTriggers="c1">
<af:panelFormLayout id="pfl1">
<af:panelLabelAndMessage label="#{bindings.ProductName.hints.label}"
id="plam2">
<af:outputText value="#{bindings.ProductName.inputValue}"
id="ot4"/>
</af:panelLabelAndMessage>
.
.
.
</af:panelBox>
「データ・コントロール」パネルからコレクションをカルーセルとしてドロップすると、ツリーの値バインディングが作成されます。ツリーはノードの階層で構成され、各サブノードは上位レベルのノードから分岐します。
ツリー・バインディングは、イテレータ・バインディングによって公開されたデータ全体を反復します。このカルーセルは、イテレータ・バインディングからの結果セットを、collectionModelの拡張であるtreeModelオブジェクト内にラップします。collectionModelにより、コレクションの各アイテムは、var属性を使用してカルーセル・コンポーネント内で使用できるようになります。ツリー・バインディングの詳細は、27.2.2.1項「表のイテレータと値バインディング」を参照してください。
例32-5に示すように、JDeveloperはcarouselコンポーネントとその子carouselItemコンポーネントの両方をページに追加します。
例32-5 Carouselコンポーネントのページ・コード
<af:carousel
currentItemKey="#{bindings.Products.treeModel.rootCurrencyRowKey}"
value="#{bindings.Products.treeModel}" var="item"
id="c1"
carouselSpinListener="#{carBean.handleCarouselSpin}">
<f:facet name="nodeStamp">
<af:carouselItem id="ci1" text="#{item.ProductName}"/>
</f:facet>
</af:carousel>
カルーセルの値は、関連するコレクションのtreeModelにバインドされています。また、カルーセルのcurrentItemKey属性は、バインディング・オブジェクトのrootCurrencyRowKeyにバインドされています。この例では、カルーセルがProductsイテレータ・バインディングのアイテムを反復します。イテレータ・バインディングは、現在の製品を追跡するrowKeySetにバインドします。デフォルトでは、カルーセルのcurrentItemKey属性は、バインディング・オブジェクトのrootCurrencyRowKeyにバインドされています。このため、カルーセルの正面に表示されている製品が、ルートおよびカレント・アイテムになります。carouselItemコンポーネントは、item変数を使用して、カルーセル・タグに表示されているカレント・アイテムのカレント・データ・オブジェクトにアクセスします。
