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分
このチュートリアルでは、以下のトピックについて説明します。
スクリーンショットの表示
このアイコンの上にカーソルを置くと、すべてのスクリーンショットがロード
し、表示されます。（警告：この操作によって、同時にすべてのスクリーンショットがロードされるため、ご使用のインターネット接続によっては応答時間が遅
くなる場合があります。）
注：各手順に関連したスクリーンショットのみを表示する場合は、それぞれの手順にあるアイコンの 上にカーソルを置いてください。スクリーンショットをクリックすると、非表示になります。
このチュートリアルでは、Oracle ADF Faces Rich Clientを使用してJSFページを作成する方法について説明し、ドラッグ・アンド・ドロップ、ポップアップ、イメージなどの容易に実装できる機能を紹 介します。
シナリオ
既存のアプリケーションから始めて、ページ・テンプレートを作成 して、ページの構築に使用します。
ページの片側にショッピング・カートのコンテンツを表示し、反対 側に選択可能な製品を表示します。別のペインに製品の詳細が表示されます。ドラッグ・アンド・ドロップ機能を実装し、選択した製品をショッピング・カー ト・エリアに移動することで、ショッピング・カートに入れられるようにします。また、タブおよびアコーディオンを作成し、ポップアップ・ウィンドウを追加 します。
このチュートリアルを始める前に、次のことを確認してください。
| 1. |
Oracle JDeveloper 11g製品版にアクセスできるか、または インストール済みであること。この製品は、Oracle Technology Networkからダウンロードできます。
|
| 2. |
スタートアップ・アプリケーションをダウンロードします。次のリ ンクを右クリックしてコンテキスト・メニューから「対象をファイルに保存」を選択し、Tutorial.zipファ イルを任意のローカル・ディレクトリにダウンロードします。
|
| 3. |
選択したローカル・ディレクトリ上で、Tutorial.zipファ イルを解凍します。
|
| 4. |
「スタート」→「すべてのプログラム」 →「Oracle Fusion Middleware」→「JDeveloper Studio 11.1.1.0.0」を選択して、Oracle JDeveloperを起動します。
Migrate User Settingsダイアログ・ボックスが開いたら、「NO」 をクリックします。 ユーザー・ロールを設定するよう尋ねられたら、「Default」 を選択します。
Tip of the Dayウィンドウを閉じます。
|
| 5. |
JDeveloper IDEが表示されます。
|
コンポーネントを作成する前に、まずはスタートアップ・アプリ ケーションを開始する必要があります。以下の手順を実行します。
| 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ボタン「
「Attributes」タブ、次にAddボタン「
「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アイコン「 |
」をクリックし、Nameにcenterを入力します。 このチュートリアルを始める前に、次のことを確認してください。
 |
ページの基本的なレイアウトの設計 | |
|
ページ・タイトルのカスタマイズ | |
ページの基本的なレイアウトを作成するには、以下の手順を実行します。
| 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アイコン「
|
| 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アイコン「
|
| 5. |
アプリケーションを実行しているブラウザ・ウィンドウに戻り、「Reload/Refresh」 ボタンをクリックします。 JDeveloperアプリケーションを保存したあと、ブラウザ・ウィンドウをリフレッシュする と、バインディング・コンポーネントを更新していない限り、アプリケーションに加えた新しい変更内容が反映されます。この場合、ブラウザに変更内容を反映 させるには、JDeveloperから、そのページを再実行する必要があります。
|
| 6. |
新しい汎用タイトルの特性をともない、ページがリフレッシュされます。
|
| 7. |
ブラウザ・ウィンドウを開いたままにして、JDeveloperに戻ります。
|
| 8. |
設計エディタで「untitled1」ページを開きます。
|
| 9. |
Structureペインで、「pageTemplate」タグを選択し、プロパティ・インスペク タで、titleプロパティをStore Frontに設定します。
|
| 10. |
JDeveloperメニュー・バーのSave Allアイコン「
|
| 11. |
アプリケーションを実行しているブラウザ・ウィンドウに戻り、「Reload/Refresh」 ボタンをクリックします。
|
| 12. |
新しいタイトルの特性をともない、ページがリフレッシュされます。
|
| 13. | ブラウザ・ウィンドウを開いたままにして、 JDeveloperに戻ります。 |
データ・コントロールを作成し、ADF表コンポーネントにバインドするには、以下の手順に従います。
| 1. |
ADFデータ・バインディング機能を使用して、既存のPOJOクラスからデータ・コントロールを作成します。
アプリケーション・ナビゲータは、次のようになります。
|
| 2. |
アプリケーション・ナビゲータで、「Data Controls」アコーディオン・パネルを開き、 「StoreProducts」ノードを展開します。Data Controlsペインは次のように表示されます。
|
| 3. |
「StoreProducts」→「products」デー タ・コントロールをドラッグして、untitled1ページの設計エディタのaf:panelCollectionへ ドロップします。
ポップアップ・メニューから「Tables」→「ADF Read-only Table」を選択します。
|
| 4. |
Edit Table Columnsダイアログで、「Row Selection」オプションと 「Sorting」オプションを選択します。
「OK」をクリックします。
|
| 5. |
Structureペインで表が選択された状態で、プロパティ・インスペクタのBehaviorタ ブにおいて、Column Selectionプロパティをドロップダウン・リストで「single」 に設定します。
|
| 6. |
Tableコンポーネントについては、プロパティ・インスペクタで、editと入力して、この単語 を含むプロパティを探します。
必要ならば、EditingModeプロパティが見つかるまで下矢印アイコンを使用し、続いてド ロップダウン・リストから「clickToEdit」を選択します。
|
| 7. |
Data Controlsペインから「products」をドラッグし、Product Detailsコンポーネント上にドロップします。
|
| 8. |
メニューから、「Forms」→「ADF Form」を選択し ます。
ダイアログで、「Include Submit Button」チェック・ボックスを選択します。
「OK」をクリックします。
|
| 9. |
ページは次のようになります。
|
| 10. |
JDeveloperメニュー・バーのSave Allアイコン「
|
| 11. |
ページ内で右クリックし、コンテキスト・メニューから「Run」を選択します。
|
ページをテストするには、以下の手順を実行してください。
| 1. |
デフォルトのWebブラウザにページがロードされたら、既存の製品データが表示されます。
|
| 2. |
列ヘッダーの1つを選択して、列を別の場所に移動します。
|
| 3. |
description列で列にサイズ変更を試します。
|
|
description列を選択した状態で、「Wrap」メニュー・オプションをクリックします。
複数の単語で構成されたフィールドが改行されていることを確認してください。
「Wrap」ボタンを再クリックして、前のレイアウトに戻ります。
|
|
| 4. |
「name」列を選択し、「Freeze」メニュー・オプショ ンをクリックします。
次に、水平スクロール・バーを再度使用して、右端の列を表示します。
name列が表示されたままになっていることを確認します。
|
| 5. |
「Detach」メニュー・オプションをクリックして、パネルのコンテンツをブラウザ内に独立表示 します。
「Detach」ボタンを再クリックして、前のレイアウトに戻します。
|
| 7. |
「View」メニュー・オプションを使用して、いくつかの列を非表示にします（たとえば、 description列）。
|
| 8. |
列ヘッダーをクリックして、製品のnameとcategoryで 降順および昇順ソートを実行します。矢印はカーソルを列のヘッダー上に移動した場合にのみ表示されます。
|
| 9. |
「Format」メニュー・オプションを使用して、列のサイズを変更することもできます。
|
| ブラウザ・ウィンドウを閉じます。 |
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アイコン「
|
| 11. |
ブラウザ・ウィンドウに戻り、ページを再ロードします。
|
| 12. |
Ratingスライダを移動してみます。
|
| 13. |
数字のスピンボックスを使用して、costを変更してみます。
|
| 14. |
manufacturedの日付フィールドに不正な日付の値を入力してみます。
有効な日付を再入力します。
|
| 15. |
descriptionテキスト・フィールドで単語を選択して、Rich Textエディタを試します。
色ボックスの横の矢印をクリックし、パレットから色を選択します。
選択したテキストのサイズを拡大します。
|
| 16. |
Product表の上を移動し、任意の行をダブルクリックします。 Product Detailsペインでは、製品に加えた変更内容が反映されません。このような同期を実装するには、部分ページ・レンダリング機能を追加する必要がありま す。
|
| JDeveloperに戻ります。 |
Product表で別の行を選択した場合にProduct Detailsをリフレッシュするには、部分レンダリング動作を設定する必要があります。この機能を実装するには、以下の手順に従います。
| 1. |
JDeveloperに戻って、Structureペインで、「Product Details」 コンポーネント内の「panelFormLayout」を選択します。
|
| 2. |
プロパティ・インスペクタのBehaviorタブで、Partial Triggerフィールドの横の下矢印を使用して「Edit」を選択します。
|
| 3. |
Edit Propertyダイアログで、「panelCollection」 コンポーネントを展開し、右矢印ボタンを使用して、選択済ペインで「table* - t1」を移動します。
「OK」をクリックします。
|
| 4. |
JDeveloperメニュー・バーのSave Allアイコン「
|
| 5. |
ブラウザ・ウィンドウに戻り、ページを再ロードします。
|
| 6. |
表の別の行を選択し、製品の詳細を変更します。
Product Detailsが、選択した行と同期化されていることがわかります。
|
| 7. |
ブラウザ・ウィンドウを開いたままにして、JDeveloperに戻ります。 |
ページにメニュー機能を実装するには、以下の手順に従います。
| 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アイコン「
|
| 8. |
ブラウザ・ウィンドウに戻り、ページを再ロードします。
|
| 9. |
メニュー・オプション「My Options」をクリックし、「Show Specials」を選択します。
|
| 10. |
ダイアログにJDeveloperのイメージがポップアップ表示されます。
「Cancel」をクリックします。ブラウザ・ウィンドウを開いたままにして、 JDeveloperに戻ります。 |
次に、Product Detailsとショッピング・カートの間にドラッグ・アンド・ドロップ機能を作成し、簡単なドラッグ・アンド・ドロップ操作で、Product Detailsから製品をショッピング・カートに入れられるようにします。ドラッグ・アンド・ドロップ機能を実装するには、以下の手順に従います。
| 1. |
JDeveloperに戻って、「outputText」コンポーネントを選択し、My Cartペインの上にドロップします。
プロパティ・インスペクタで、Output Textの値として「No Item Selected」 を入力します。
|
| 2. |
コンポーネント・パレットで、「ADF Faces」→「Operations」 ライブラリから、「Attribute Drag Source」コンポーネントを選択して、Product Detailsペインのnameフィールドにドロップします。
Insert Attribute Drag Sourceダイアログで、ドロップダウン・リストから「value」 を選択します。
「OK」をクリックします。
|
| 3. |
コンポーネント･パレットで「ADF Faces」→「Operations」 を展開し、「Attribute Drop Target」コンポーネントをドラッグして、No Item Selectedテキスト・フィールドにドロップします。
|
| 4. |
Insert Attribute Drop Targetダイアログで、Attributeフィールドに「value」 を選択します。
「OK」をクリックします。
|
| 5. |
JDeveloperメニュー・バーのSave Allアイコン「
|
| 6. |
ブラウザ・ウィンドウに戻って、ページを再ロードしてから、表で項目を選択し、対応する Product Detailsを表示します。
|
| 7. |
Product Detailsペインで、「name」フィールドを選択して、
My Cartにドラッグ・アンド・ドロップします。
|
| 8. |
製品がカートに追加されます。
|
| 9. |
ブラウザ・ウィンドウを閉じて、JDeveloperに戻ります。 |
次に、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データ可視化コンポーネントの使用 |
|
スキンを使用したアプリケーションのルック・アンド・フィールの変更 |