Oracle® Fusion Middleware Oracle Application Development FrameworkによるFusion Webアプリケーションの開発 12c (12.2.1) E70030-02 |
|
![]() 前 |
![]() 次 |
この章の内容は次のとおりです。
ADF Faces CalendarおよびADF Faces Carouselは、アプリケーションにカレンダ機能を組み込んだり、回転するイメージを表示する場合に使用できる複雑なコンポーネントです。ADF Faces Calendarはアクティビティを日、週、月単位で表示したり、特定のプロバイダのリスト・ビューに表示します。カレンダは、ビューの一部のみを表示するように構成できます。Calendarには、ユーザーが表示を(日、週、月またはリスト間で)変更、前または次の日、週、月に移動、および本日に戻ることのできる組込み機能のあるツールバーが含まれます。ツールバーはカスタマイズ可能で、表示するボタンやテキストの選択に加え、ボタンやその他のコンポーネントの追加もできます。
ADF Facesのカルーセルは、環状に回転するイメージを表示します。ユーザーはスライダを使用するか、イメージをクリックすることで、そのイメージを選択できます。これは、水平方向または垂直方向に構成できます。カルーセルとともに他のコンポーネントを使用できます。ツールバーやメニュー・バーを追加して、ユーザーが現在のオブジェクトに対してアクションを実行できるようにするボタンやメニュー項目をそれらに追加できます。
ADF Faces Calendarは、カレンダ機能をアプリケーションに追加する場合に使用できます。日付、時刻、件名、場所および所有者などの、カレンダによって提供されるコンテンツを表す関連データがデータ・ストアに含まれている必要があります。使い慣れたエンティティ・オブジェクトとビュー・オブジェクトのパターンを使用してデータをモデリングし、さらに「データ・コントロール」パネルからドラッグ・アンド・ドロップしてカレンダを作成できます。
Carouselコンポーネントを使用すると、一連のイメージからイメージを1つ表示できます。ユーザーは、そのイメージを表示する前後に各イメージの部分ビューを確認したり、イメージを順にスクロールできます。それには、スライダやナビゲーション・ボタンを使用します。カルーセルは、高度な視覚化表現を必要とするオブジェクトの表示に役立ちます。たとえば、カタログに写真コレクションや商品を表示する際に使用できます。
ADF Facesカレンダおよびカルーセル・コンポーネントを構成または使用する前に、その他のOracle ADF機能について理解しておいてください。また、カレンダおよびカルーセル・コンポーネントで実行できる内容について読むことが必要な場合があります。次に、関連する他の機能へのリンクを示します。
個人ユーザー用にカレンダをカスタマイズし、そのユーザーがカレンダにアクセスすると、選択した構成でカレンダが表示されるようにできます。詳細は、「実行時でのユーザー・カスタマイズの許可」を参照してください。
カレンダはエンティティ・オブジェクトに基づいています。エンティティ・オブジェクトの作成の詳細は、「エンティティ・オブジェクトを使用したビジネス・ドメイン・レイヤーの作成」を参照してください。
部分ページ・レンダリングとpartialTriggers属性の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「部分ページ・コンテンツの再レンダリング」を参照してください。
Carouselコンポーネントは、ツリー・バインディングを使用してデータを反復します。ツリー・バインディングの詳細は、「表のイテレータと値バインディング」を参照してください。
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ファセットの「編集」ダイアログ
ドラッグ・アンド・ドロップ機能: calendarDropTarget
タグを追加して、ユーザーがアクティビティをカレンダの別の場所にドラッグできるようにすることができます。その後、アクティビティで実際に時刻が変更され、データ・ストアに保持されるように機能を実装します。
ツールバーのカスタマイズ: デフォルトでは、ツールバーにはユーザーがビューを切り替えるためのボタンとともに、「前へ」、「次へ」ボタンや現在の日付に戻るためのボタンが含まれます。また、このツールバーには現在の日付範囲(日表示の場合は日付)が表示されます。ユーザーが選択したボタンを含むファセットを追加して、ツールバーをカスタマイズすることができます。
スキニング: カレンダはスキニング・キーを使用して、使用する色やアイコンなどを決定できます。スキンを拡張して、カレンダの外観を変更できます。
組込み機能の構成方法や、追加機能の実装方法の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「カレンダ・コンポーネントの使用方法」を参照してください。
ADF Faces CalendarコンポーネントはCalendarModel
クラスにバインドする必要があります。このクラスは、ユーザーがADFビジネス・コンポーネントを使用して、カレンダ・データを管理するときに、このユーザーのために作成することができます。たとえば、日付、時刻、件名、場所、所有者など、アクティビティの詳細を表すデータがデータ・ストアに入っているとします。このデータを表すエンティティ・オブジェクトを作成してから、このデータを表示するためのビュー・オブジェクトを作成した場合、関連するコレクションを「データ・コントロール」パネルからドラッグ・アンド・ドロップして、カレンダを作成できます。JDeveloperはモデルを宣言的に作成して、このモデルにビューをバインドし、カレンダを起動したときに正しいデータが表示されるようにします。ただし、モデルを作成するためには、ADFビジネス・コンポーネントを持つデータ・モデル・プロジェクトのエンティティ・オブジェクトおよび同じプロジェクト内のビュー・オブジェクトに、有効日指定の属性が必要です。また、ビュー・オブジェクトには、指定された日付範囲に対する正しいアクティビティを返すように問合せを修正するための変数も必要です。
JSFページでカレンダを作成する前に、まず、カレンダの属性を表す具体的な属性を持つエンティティ・オブジェクトを作成する必要があります。その後、このエンティティ・オブジェクトからビュー・オブジェクトを作成し、表示する日付範囲と現在のタイムゾーンを表す名前付きバインド変数を使用して、問合せを編集してください。これにより、この問合せから、カレンダの指定されたビューに表示すべきアクティビティのみが返されるようになります。
たとえば、あるアクティビティを表すデータベース表があるとします。これには、タイトル列、開始時刻、終了時刻、所有者を表すプロバイダ・オブジェクトへの参照が含まれています。この表に基づいて、(次の手順で説明するとおり、要件を満たすことを保証しながら)エンティティ・オブジェクトとビュー・オブジェクトを作成します。その後、ビュー・オブジェクトに、カレンダに現在表示されている開始時刻と終了時刻を表す名前付きバインド変数、カレンダで現在使用されているタイムゾーンを追加します。これにより、問合せはその時間範囲内に収まるアクティビティのみを返すようになります。
カレンダ・コンポーネントは、JSFページに追加した後で構成と機能の追加が可能になります。
始める前に:
カレンダの作成時には使用可能なオプションに関する知識が役立つ場合があります。詳細は、「ADF Faces Calendarコンポーネントの使用方法」を参照してください。
ADF Faces Calendarを作成するには:
コレクションをカレンダとしてドロップすると、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
クラスを使用して、カレンダ・バインディング・クラスにアクセスし、このバインディングが提供するマッピングを使用して、データ・ソースからカレンダに値をマップします。
図37-3 に示すように、イメージを回転カルーセルに表示できます。正面にある画像を変更するには、下部のスライダを使用するか、または別の画像を正面にドラッグします。
図37-3 Carouselコンポーネント
表示されるイメージごとに子carouselItem
コンポーネントを組み込み、これらのコンポーネントを個々のイメージにバインドするかわりに、carousel
コンポーネントを完成コレクションにバインドし、ツリーがデータの各行をスタンプ処理するのと同じ方法で、各アイテムの値をスタンプ処理して、1つのcarouselItem
コンポーネントを繰り返しレンダリングします。各項目にスタンプが設定されると、現在の項目のデータが、carousel
コンポーネントvar
属性を使用するEL式を使用して特定可能なプロパティにコピーされます。カルーセルのレンダリングが完了したら、このプロパティは削除されるか前の値に戻ります。カルーセルはnodeStamp
ファセットを持っています。このファセットは、各アイテムに関するテキストと簡単な説明の表示に使用されるcarouselItem
コンポーネントのホルダーで、各アイテムについて表示されるイメージの親コンポーネントでもあります。カルーセル・コンポーネントの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のカルーセルでイメージを表示する方法に関する項を参照してください。
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コンポーネントを作成するには:
「データ・コントロール」パネルからコレクションをカルーセルとしてドロップすると、ツリーの値バインディングが作成されます。ツリーはノードの階層で構成され、各サブノードは上位レベルのノードから分岐します。
ツリー・バインディングは、イテレータ・バインディングによって公開されたデータ全体を反復します。このカルーセルは、イテレータ・バインディングからの結果セットを、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
変数を使用して、カルーセル・タグに表示されているカレント・アイテムのカレント・データ・オブジェクトにアクセスします。