JSFを使用したAjaxベースのユーザー・インタ フェースの開発：Oracle ADF Faces Rich Clientコンポーネント概要

目的

このチュートリアルでは、Oracle ADF Faces Rich Clientを使用してJSFページを作成する方法について説明します。 Oracle ADF Faces Rich Clientは、Ajax機能が組み込まれている標準JSFコンポーネントのセットです。Ajaxを利用すると、標準インターネット・テクノロジー上で リッチ・クライアントのようなアプリケーションを実行でき、JSFが提供するサーバー側コントロールを利用すると、一般的なAjaxアプリケーションによ くみられる大量のJavaScriptへの依存を軽減できます。

所要時間

60分

トピック

このチュートリアルでは、以下のトピックについて説明します。

	概要
	シナリオ
	前提条件
	スタートアップ・アプリケーションの開始
	ページ・テンプレートの作成
	ページ・テンプレートを使用したページの作成
	ADF表コンポーネントとADFバインディング
	ページのテスト
	イメージ・コンポーネントとグラフィック・コンポーネント の使用
	部分ページ・レンダリングの実装
	メニューの使用
	ページへのポップアップ機能の追加
	ページへのドラッグ・アンド・ドロップ機能の追加
	Oracle ADFデータ可視化コンポーネントの使用
	スキンを使用したアプリケーションのルック・アンド・ フィールの変更
	まとめ

スクリーンショットの表示

このアイコンの上にカーソルを置くと、すべてのスクリーンショットがロード し、表示されます。（警告：この操作によって、同時にすべてのスクリーンショットがロードされるため、ご使用のインターネット接続によっては応答時間が遅 くなる場合があります。）

注：各手順に関連したスクリーンショットのみを表示する場合は、それぞれの手順にあるアイコンの 上にカーソルを置いてください。スクリーンショットをクリックすると、非表示になります。

概要

このチュートリアルでは、Oracle ADF Faces Rich Clientを使用してJSFページを作成する方法について説明し、ドラッグ・アンド・ドロップ、ポップアップ、イメージなどの容易に実装できる機能を紹 介します。

トピック・リスト に戻る

シナリオ

既存のアプリケーションから始めて、ページ・テンプレートを作成 して、ページの構築に使用します。

ページの片側にショッピング・カートのコンテンツを表示し、反対 側に選択可能な製品を表示します。別のペインに製品の詳細が表示されます。ドラッグ・アンド・ドロップ機能を実装し、選択した製品をショッピング・カー ト・エリアに移動することで、ショッピング・カートに入れられるようにします。また、タブおよびアコーディオンを作成し、ポップアップ・ウィンドウを追加 します。

トピック・リストに戻る

前提条件

このチュートリアルを始める前に、次のことを確認してください。

トピック・リストに戻る

スタートアップ・アプリケーションの開始

コンポーネントを作成する前に、まずはスタートアップ・アプリ ケーションを開始する必要があります。以下の手順を実行します。

1.	アプリケーション・ナビゲータで「 Open Application」をクリックします。
2.	Select Application to addダイアログで、 C:\Tutorial\ディ レクトリへ移動し、「 Tutorial.jws」を選択します。 「 Open」をクリックします。移行の警告メッセージが表示された場合は、移行の操作を受け入れま す。
3.	アプリケーション・ナビゲータにアプリケーションがロードされ、 adffacesrcプ ロジェクトが表示されます。

トピック・リストに戻る

ペー ジ・テンプレートの作成

この項では、アプリケーションのページ作成に使用するページ・テ ンプレートを作成します。ページ・テンプレートを作成するには、以下の手順を実行します。

1.	アプリケーション・ナビゲータで、「 adffacesrc」プロジェクトを右クリックして、コンテ キスト・メニューから「 New」を選択します。
2.	New Galleryで、Categoriesペインから「 Web Tier」→「 JSF」 カテゴリを選択し、「 JSF Page Template」項目を選択します。 「 OK」をクリックします。
3.	Create JSF Page Templateで、Page Template Nameに simpleを 入力します。 Facet Definitionsタブで、 Addボタン「 」をクリックし、Nameに centerを入力します。 「 Attributes」タブ、次に Addボタン「 」をクリックして、Nameに title、Default Valueに Default titlesを入力します。 「 OK」をクリックします。
4.	設計エディタで simple.jspテンプレート・ページが開きます。
5.	コンポーネント・パレットの「 ADF Faces」→「 Layout」 ライブラリを使用して、「 Decorative Box」を空のページにドロップします。 プロパティ・インスペクタの Style and Themeタブで、 Themeプ ロパティを lightに設定します。（mediumまたはdarkという値も使用できます。）
6.	「 Panel Group Layout」を topファセット にドラッグ・アンド・ドロップします。 プロパティ・インスペクタで、 Layoutプロパティを horizontalに 設定します。
7.	アプリケーション・ナビゲータで、「 Web Content」ノード→「 images」 ノードを開き、「 brandingImage.gif」ノードを Panel Group Layoutにドラッグ・アンド・ドロップします。コンテキスト・メニューで、「 ADF Faces Image」 を選択します。
8.	「 ADF Faces」→「 Layout」から、「 Spacer」 をイメージの横にドロップします。 Widthプロパティを 100に 設定します。
9.	「 ADF Faces」→「 Common Components」 から、「 Output Text」をspacerコンポーネントの下にドロップします。 Valueフィールドで、ドロップダウン・リストから「 Expression Builder」を 選択します。 Expression Builderで、既存の式を削除し、「 JSP Objects」→「 attrs」 →「 title」を選択します。 「 OK」をクリックします。
10.	コンポーネント・パレットから「 Facet Ref」をドラッグし、 centerファ セット上にドロップします。 Insert Facet Refダイアログで、Facet Nameとして「 center」を選 択します。「 OK」をクリックします。
11.	テンプレート・ページの構造とデザインは、次のように表示されます。
12.	JDeveloperメニュー・バーの Save Allアイコン「 」をクリックするか、メニューから「 File」→「 Save All」を 選択してダイアグラムを保存します。

トピック・リストに戻る

ペー ジ・テンプレートを使用したページの作成

このチュートリアルを始める前に、次のことを確認してください。

	ページの基本的なレイアウトの設計
	ページ・タイトルのカスタマイズ

トピック・リストに戻る

ページの基本的なレイアウト の設計

ページの基本的なレイアウトを作成するには、以下の手順を実行します。

1.	「 adffaces」プロジェクトを右クリックして、コンテキスト・メニューから「 New」 を選択します。
2.	New Galleryで、Categoriesペインから「 Web Tier」→「 JSF」 を選択します。Itemsペインで、「 JSF Page」を選択します。 「 OK」をクリックします。
3.	Create JSF Pageダイアログで、File Nameをデフォルト値の untitled1.jspxの ままにして、 Create as XML Document (*.jspx)チェック・ボックスが選択されているこ とを確認します。Use Page Templateフィールドのドロップダウン・リストから「 simple」を選択 します。 「 OK」をクリックします。
4.	アプリケーション・ナビゲータに新規ノードとして untitled1.jspxが表示され、 simple.jspxテンプレートを使用して、設計エディタが開きます。
5.	コンポーネント・パレットの「 ADF Faces」→「 Layout」 ライブラリを使用して、「 Panel Splitter」コンポーネントをドラッグし、 centerファ セットにドロップします。
6.	別の「 Panel Splitter」コンポーネントをドラッグして、パネル・スプリッタの' second' ファセットにドロップします。 Structureペインで、「 panelSplitter」コンポーネントを開き、「 showDetailItem」 コンポーネントを選択します。プロパティ・インスペクタで、Orientationを「 vertical」に設定しま す。
7.	「 Panel Accordion」コンポーネントをドラッグして、パネル・スプリッタの左側の' first' ファセットにドロップします。 Structureペインで、「 showDetailItem」コンポーネントを選択し、プロパ ティ・インスペクタで、Textを「 My Cart」に設定します。
8.	作成したアコーディオン内をクリックして、右クリックのコンテキスト・メニューから「 Insert after Show Detail Item」→「 Show Detail Item」を選択します。 追加した「 Show Detail Item」について、プロパティ・インスペクタのCommonタブで、Text フィールドを More Infoに変更します。
9.	「 Panel Collection」コンポーネントをドラッグし、右側の' first' ファセットにドロップします。
10.	「 Panel Tabbed」コンポーネントをドラッグし、右側の' second' ファセットにドロップします。 Structureペインで、作成した「 af:showDetailItem」コンポーネントを選 択し、プロパティ・インスペクタで、Textフィールドに Product Detailsと入力します。
11.	「 Product Details」タブを右クリックし、コンテキスト・メニューから「 Insert After Show Detail Item」→「 Show Detail Item」を選択し ます。 Structureペインで、作成した「 af:showDetailItem」コンポーネントを選 択し、プロパティ・インスペクタで、Textフィールドに Ratingと入力します。
12.	ページは次のように表示されます。
13.	JDeveloperメニュー・バーの Save Allアイコン「 」をクリックするか、メニューから「 File」→「 Save All」を 選択してダイアグラムを保存します。
14.	ページの設計エディタ内を右クリックし、コンテキスト・メニューから「 Run」を選択して、デフォ ルト・ブラウザにページをロードします。
15.	ブラウザにページがロードされます。
16.	パネルの境界線を移動させたり、タブを確認したりしてみます。
17.	More Infoの プラス記号（ページの下部）をクリックして、アコーディオンを試します。
18.	ブラウザ・ウィンドウを開いたままにして、JDeveloperに戻ります。

トピックに戻る

トピック・リストに戻る

ページ・タイトルのカスタマ イズ

次の手順では、ページ・テンプレートで定義したページ・タイトル・コンポーネントをカスタマイズします。

1.	JDeveloperに戻って、「 simple.jspx」タ ブをクリックして、設計エディタでページ・テンプレートを開きます。
2.	ページ設計で「 title」コンポーネントを選択します。
3.	プロパティ・インスペクタで、「 Style」ノードを展開し、 「 Text」タブの Colorフィールドで、ドロップダウン・リストをクリック し、任意の色を選択します（例ではAquaを選択）。 Sizeフィールドで、ドロップダウン・リストから「 large」 を選択します。
4.	JDeveloperメニュー・バーの Save Allアイコン「 」をクリックするか、メニューから「 File」→「 Save All」を 選択します。
5.	アプリケーションを実行しているブラウザ・ウィンドウに戻り、「 Reload/Refresh」 ボタンをクリックします。 JDeveloperアプリケーションを保存したあと、ブラウザ・ウィンドウをリフレッシュする と、バインディング・コンポーネントを更新していない限り、アプリケーションに加えた新しい変更内容が反映されます。この場合、ブラウザに変更内容を反映 させるには、JDeveloperから、そのページを再実行する必要があります。
6.	新しい汎用タイトルの特性をともない、ページがリフレッシュされます。
7.	ブラウザ・ウィンドウを開いたままにして、JDeveloperに戻ります。
8.	設計エディタで「 untitled1」ページを開きます。
9.	Structureペインで、「 pageTemplate」タグを選択し、プロパティ・インスペク タで、 titleプロパティを Store Frontに設定します。
10.	JDeveloperメニュー・バーの Save Allアイコン「 」をクリックするか、メニューから「 File」→「 Save All」を 選択します。
11.	アプリケーションを実行しているブラウザ・ウィンドウに戻り、「 Reload/Refresh」 ボタンをクリックします。
12.	新しいタイトルの特性をともない、ページがリフレッシュされます。
13.	ブラウザ・ウィンドウを 開いたままにして、 JDeveloperに戻ります。

トピックに戻る

トピック・リストに戻る

ADF表コンポーネントとADFバインディング

データ・コントロールを作成し、ADF表コンポーネントにバインドするには、以下の手順に従います。

トピック・リストに戻る

ページ のテスト

ページをテストするには、以下の手順を実行してください。

トピック・リストに戻る

イメー ジ・コンポーネントとグラフィック・コンポーネントの使用

JSFページでは、製品をイメージとグラフで表示できます。これらのイメージは、スタートアップ・アプリケー ションに含まれています。JSFページでのイメージ表示を拡張するには、以下の手順に従います。

1.	Oracle JDeveloperに戻り、 Product Detailsペインで「 cost」 フィールドを右クリックして、コンテキストから「 Convert」を選択します。 Convertダイアログで「 Input Number Spinbox」を選択します。 「 OK」をクリックします。Confirm Convertダイアログ・ボックスの「 OK」 をクリックします。
2.	image列の値がテキスト・タイプに設定されています。イメージを表示するには、列の構造を変換する必要があります。Product Detailsペインで、「 image」フィールドを右クリックし、コンテキスト・メニューから「 Convert」 を選択します。 Convertダイアログで「 Image」を選択します。 「 OK」をクリックします。Confirm Convertダイアログ・ボックスの「 OK」 をクリックします。
3.	作成した新しいimageフィールド（ソース・フィールドの横）については、ドロップダウン・リストから「 Expression Builder」を選択します。
4.	Expression Builderダイアログで、「 ADF Bindings」→「 bindings」 →「 image」→「 inputValue」を選択します。 「 OK」をクリックします。
5.	Structureペインの「 image」コンポーネントの下で、「 validator」 コンポーネントを削除してページの設計に表示されているエラーを解消します。
6.	Product Detailsペインで、「 rating」フィールドを右クリックし、コンテキス ト・メニューから「 Convert」を選択します。 Convertダイアログで「 Input Number Slider」を選択します。 「 OK」をクリックします。Confirm Convertダイアログ・ボックスの「 OK」 をクリックします。
7.	Product Detailsペインで、「 description」フィールドを右クリックし、 コンテキスト・メニューから「 Convert」を選択します。 Convertダイアログで「 Rich Text Editor」を選択します。 「 OK」をクリックします。Confirm Convertダイアログ・ボックスの「 OK」 をクリックします。
8.	Structureペインの「 richTextEditor」コンポーネントの下で、「 validator」 コンポーネントを削除してページの設計に表示されているエラーを削除します。
9.	Product Detailsペインは次のように表示されます。
10.	JDeveloperメニュー・バーの Save Allアイコン「 」をクリックするか、メニューから「 File」→「 Save All」を 選択します。
11.	ブラウザ・ウィンドウに戻り、ページを 再ロードします。
12.	Ratingスライダを移動してみます。
13.	数字のスピンボックスを使用して、 costを変更してみます。
14.	manufacturedの日付フィールドに不正な日付の値を入力してみます。 有効な日付を再入力します。
15.	descriptionテキスト・フィールドで単語を選択して、Rich Textエディタを試します。 色ボックスの横の 矢印をクリックし、パレットから色を選択します。 選択したテキストのサイズを拡大します。
16.	Product表の上を移動し、任意の行をダブルクリックします。 Product Detailsペインでは、製品に加えた変更内容が反映されません。このような同期を実装するには、部分ページ・レンダリング機能を追加する必要がありま す。
	JDeveloperに戻ります。

トピック・リストに戻る

部分 ページ・レンダリングの実装

Product表で別の行を選択した場合にProduct Detailsをリフレッシュするには、部分レンダリング動作を設定する必要があります。この機能を実装するには、以下の手順に従います。

トピック・リストに戻る

メ ニューの使用

ページにメニュー機能を実装するには、以下の手順に従います。

1.	JDeveloperに戻り、2番目のパネルで「 menu」コンポーネント・ファセットを右ク リックし、コンテキスト・メニューから「 Insert inside Facets menus」→「 Menu」 を選択します。
2.	プロパティ・インスペクタを使用して、Textフィールドを My Optionsに設定します。 Behaviorタブで、Detachableプロパティを trueに 設定します。
3.	「 Menu」を右クリックして、コンテキスト・メニューから「 Insert inside Menu」→「 Menu Item」を選択します。 プロパティ・インスペクタで、Textフィールドに Export to Excelと入力します。
4.	Structureウィンドウで「 af:commandMenuItem」コンポーネントを右ク リックして、コンテキスト・メニューから「 Insert after af:commandMenuItem - Export to Excel」→「 Menu Item」を選択します。 プロパティ・インスペクタで、Textフィールドに Show Specialsと入力します。
5.	コンポーネント・パレットの「 ADF Faces」→「 Operations」 ライブラリから「 Export Collection Action Listener」を選択して、 Structureペインのメニュー項目「 Export to Excel」の下にドロップします。 Insert Export Collectionダイアログで、ExportedIdに t1を入 力し、Typeに「 excelHTML」を選択します。 「 OK」をクリックします。
6.	JDeveloperメニュー・バーの Save Allアイコン「 」をクリックするか、メニューから「 File」→「 Save All」を 選択します。
7.	ブラウザ・ウィンドウに戻り、ページを 再ロードします。
8.	メニュー・オプション「 My Options」をクリックします。 これで、メニュー・バーからメニュー・オプションを分離できます。
9.	「 Export to Excel」オプションを選択します。
10.	ダイアログが表示され、このファイルをどうするかを尋ねられます。ファイルをExcelで開くか、保存することができます。 「 Cancel」をクリックします。ブラウザ・ウィンドウを開いたままにして、 JDeveloperに 戻ります。

トピック・リストに戻る

ページへの ポップアップ機能の追加

次に、特定の製品プロパティを拡張するポップアップ・ウィンドウを作成します。ポッ プアップ機能を作成するには、以下の手順に従います。

1.	Structureペインで、「 form」コンポーネントを選択します。コンポーネント・パレット の Common Componentsライブラリで、「 Popup」を選択し、「 form」 にドロップします。
2.	「 popup」コンポーネントを右クリックして、コンテキスト・メニューから「 Insert inside Popup」→「 Dialog」を選択します。
3.	コンポーネント・パレットから「 Image」コンポーネントを選択して、 Dialog内 にドロップします。 Insert Imageダイアログで、ドロップダウン・リストから、ソースとして「 JDeveloper.gif」 イメージを選択します。 「 OK」をクリックします。
4.	イメージの外部をクリックして、ダイアログを閉じます。
5.	コンポーネント・パレットのOperationsライブラリから、「 Show Popup Behavior」 コンポーネントを選択して、2番目の commandMenuItemの上にドロップします。
6.	プロパティ・インスペクタのPopupIdフィールドで、ドロップダウン・リストから「 Edit」 を選択します。 Edit Propertyダイアログで、「 popup」コンポーネントを選択します。Idに pop1と 入力して、[ Enter]を押します。 「 OK」をクリックします。
7.	JDeveloperメニュー・バーの Save Allアイコン「 」をクリックするか、メニューから「 File」→「 Save All」を 選択します。
8.	ブラウザ・ウィンドウに戻り、ページを 再ロードします。
9.	メニュー・オプション「 My Options」をクリックし、「 Show Specials」を選択します。
10.	ダイアログにJDeveloperのイメージがポップアップ表示されます。 「 Cancel」をクリックします。ブラウザ・ウィンドウを開いたままにして、 JDeveloperに戻ります。

トピック・リストに戻る

ページ へのドラッグ・アンド・ドロップ機能の追加

次に、Product Detailsとショッピング・カートの間にドラッグ・アンド・ドロップ機能を作成し、簡単なドラッグ・アンド・ドロップ操作で、Product Detailsから製品をショッピング・カートに入れられるようにします。ドラッグ・アンド・ドロップ機能を実装するには、以下の手順に従います。

トピック・リストに戻る

Oracle ADFデータ可視化コンポーネントの使用

次に、ratingの値のゲージ表示を作成します。ゲージ・コンポーネントを作成するには、以下の手順に従いま す。

1.	JDeveloperに戻って、「 Rating」タブをクリックします。
2.	コンポーネント・パレットで、「 ADF Data Visualization」→「 Gauge」 ライブラリから、「 Gauge」コンポーネントをドラッグして、 Ratingペイ ンにドロップします。
3.	Create Gaugeダイアログで、「 Dial」カテゴリを選択してから、ゲージ・タイプに「 Dial with Thresholds」を選択し、最後に、左端のクイック・スタート・レイアウト提案を選択します。 「 OK」をクリックします。
4.	Ratingペインに新しいゲージが表示されます。
5.	プロパティ・インスペクタの Valueフィールドで、ドロップダウン・リストから「 Expression Builder」を選択します。
6.	Expression Builderダイアログで、式に「 ADF Bindings」→「 bindings」 →「 rating」→「 inputValue」を選択します。 「 OK」をクリックします。
7.	Structureペインで、「 gauge」コンポーネントを選択し、プロパティ・インスペクタ で、「 Gauge Data」→「 Max Value」フィールドを 10に 設定します。 「 OK」をクリックします。
8.	Structureペインで、「 gauge」→「 thresholdSet」 コンポーネントを展開します。
9.	Structureペインで、最初のしきい値を選択し、プロパティ・インスペクタで FillColorの ドロップダウン・リストから「 Edit」を選択します。 Edit Propertyダイアログで、パレットから'赤'色を選択し、「 OK」をクリックしま す。 ThresholdMaxValueに 4を入力します。
10.	Structureペインで、2番目のしきい値を選択して、FillColorフィールドに'黄'色を使用して、最後の手順を繰り返 し、ThresholdMaxValueを 7に設定します。
11.	Structureペインで、3番目のしきい値を選択して、FillColorフィールドに'緑'色を使用して、最後の手順を繰り返 し、ThresholdMaxValueを 10に設定します。
12.	Ratingペインは次のように表示されます。
13.	ページ内で右クリックし、コンテキスト・メニューから「 Run」を選択します。
14.	ブラウザにページがロードされます。ratingの値を確認します。 「 Rating」タブをクリックします。
15.	ゲージには現在のratingの値が表示されます。
16.	「 Product Details」タブをクリックし、「 スライダ」 を移動して、 ratingの値を変更します。
17.	「 Rating」タブをクリックして、ゲージに変更内容が反映されていることを確認します。
	ブラウザ・ウィンドウを閉じずに、JDeveloperに戻ります。

トピック・リストに戻る

スキン を使用したアプリケーションのルック・アンド・フィールの変更

最後に、パラメータ化されたcssファイルを使用して、アプリケーション全体のルック・アンド・フィールを変更 する方法について説明します。この機能を実装するには、以下の手順に従います。

1.	アプリケーション・ナビゲータで「 Web Content」→「 WEB-INF」 ノードを展開し、「 trinidad-config.xml」ファイルをダブルクリックしてエディタで開きます。
2.	このファイルにはパラメータが含まれており、これを使用して別のcssファイルを使用できます。
3.	アプリケーション・ナビゲータの「 skins」→「 princess」 フォルダにある princess.cssファイルに注目します。
4.	ブラウザ・ウィンドウで、URLの最後の部分（untitled1.jspxページ名の後）を削除します。
5.	URLのあとに文字列 ?skin=princessを追加し、[ Enter] を押します。
6.	ページのルック・アンド・フィールが変わったことを確認します。
7.	色、タブ、およびアコーディオンでprincess cssが使用されています。 ページの新しい外観を試します。
	ブラウザのウィンドウを閉じます。これでOBEは完了です。

トピック・リストに戻る

まとめ

このチュートリアルでは、Oracle ADF Faces Rich Clientを使用してJSFページを作成し、いくつかの高度な機能を使用する方法について学習しました。

	ページ・テンプレートの作成
	ページ・テンプレートを使用したページの作成
	ADF表コンポーネントとADFバインディングの使用
	イメージ・コンポーネントとグラフィック・コンポーネントの使用
	部分ページ・レンダリングの実装
	メニューの使用
	ページへのポップアップ機能の追加
	ページへのドラッグ・アンド・ドロップ機能の追加
	Oracle ADFデータ可視化コンポーネントの使用
	スキンを使用したアプリケーションのルック・アンド・フィールの変更

トピック・リストに戻る

このアイコンの上にカーソルを置くと、すべてのスクリーンショットが非表示になります。