詳細表示
| 目的 | 所要時間 | アプリケーション |
|---|---|---|
このチュートリアルでは、ページ・テンプレートに基づいてページを開発する方法を説明します。 続いてレイアウトの設計、データ・コンポーネントの追加、およびページのルック・アンド・フィールの変更を行います。 これから作成するアプリケーションの完成版を確認するには、「Download」ボタンをクリックして最終的なアプリケーションのzipファイルをダウンロードし、JDeveloperのmyworkフォルダに解凍してください。 このファイルには2個のzipファイル（tutorial.zipとtutorialsolution.zip）が含まれます。1つにはスタータ・アプリケーション、もう1つには完成したソリューションが付属しています。 |
2～2.5時間 |  |
このセクションでは、スタータ・アプリケーションを開いて、作成予定の追加ページに使用するページ・テンプレートを作成します。 ページ・テンプレートを作成するには、以下の手順を実行します。
ページ・テンプレートを使用して、ページ・レイアウト全体（ページの特定の属性値を含む）を定義できます。 詳細表示
-
アプリケーション・ナビゲータで「Open Application」をクリックします。
-
Open Application(s)ダイアログで、アプリケーションの解凍先フォルダを見つけて「Tutorial.jws」を選択します。
「Open」をクリックします。 移行の警告メッセージが表示された場合は、続行して移行操作を終了します。
-
アプリケーション・ナビゲータにアプリケーションがロードされ、adffacesrcプロジェクトが表示されます。
-
アプリケーション・ナビゲータで、「adffacesrc」プロジェクトを右クリックして、コンテキスト・メニューから「New」を選択します。
-
New GalleryのCategoriesペインで、「Web Tier」→「JSF/Facelets」を選択し、「ADF Page Template」項目を選択します。
「OK」をクリックします。
-
Create ADF Page Templateで、Page Template Nameにsimpleと入力します。
-
Facet Definitionsタブで、Add「
」ボタンをクリックし、Nameにcenterと入力します。 
-
「Attributes」タブをクリックし、Add「
」ボタンをクリックし、Nameにtitle、Default ValueにDefault Titleと入力します。
「OK」をクリックします。
-
設計エディタでsimple.jspxテンプレート・ページが開きます。
-
コンポーネント・パレットのADF Faces、Layoutノードを開いて、「Decorative Box」を空のページにドラッグします。
プロパティ・インスペクタのStyle and Themeタブで、Themeプロパティをlightに設定します。
-
Structureペインで、「panelGroupLayout」をtopファセットにドラッグ・アンド・ドロップします。
-
panelGroupLayoutを選択した状態で、プロパティ・インスペクタでLayoutプロパティをhorizontalに設定します。
-
アプリケーション・ナビゲータで、Web Content、imagesノードを開き、「brandingImage.gif」ノードをPanel Group Layoutにドラッグ・アンド・ドロップします。 コンテキスト・メニューで、「ADF Faces Image」を選択します。
-
ADF Faces、Layoutを開いて、「Spacer」を選択し、イメージの横にドロップします。
Widthプロパティを100に設定します。
-
ADF Faces、Common Componentsを開いて、「Output Text」をspacerコンポーネントの下にドロップします。
Valueフィールドで、ドロップダウン・リストから「Expression Builder」を選択します。
-
Expression Builderで既存の式を削除し、値を#{attrs.title}に設定します。
「OK」をクリックします。
-
コンポーネント・パレットのADF Facesドロップダウンで、Layoutノードを開いてCore Structureセクションまでスクロール・ダウンします。 「Facet」をcenterファセットにドラッグ・アンド・ドロップします。
Insert Facetダイアログで、ファセット名として「center」を選択し、「OK」をクリックします。
-
JDeveloperメニュー・バーのSave All「
」をクリックするか、メニューから「File」→「Save All」を選択してページを保存します。
テンプレートを作成したら、新しいページを作成し、ページのデフォルト構造としてテンプレートを使用できます。 このためには、以下の手順を実行します。
詳細表示 -
「adffaces」プロジェクトを右クリックし、コンテキスト・メニューから「New」を選択します。
-
New Galleryで、Web Tierノードを開き、「JSF/Facelets」を選択します。 次に、「Page」項目を選択して「OK」をクリックします。
-
Create JSF Pageダイアログで、ファイル名をデフォルト値のuntitled1.jspxのままにして、Document TypeがFaceletsに設定されていることを確認します。 Page Templateセクションのドロップダウン・リストから「simple」を選択します。
「OK」をクリックします。
-
アプリケーション・ナビゲータに新規ノードとしてuntitled1.jspxが表示され、simple.jspxテンプレートを使用する設計エディタが開きます。
-
コンポーネント・パレットのADF Faces、Layoutライブラリを開いて、「Panel Splitter」コンポーネントを選択し、centerファセットにドラッグ・アンド・ドロップします。
ADF Facesには、Panel Splitterの他にも、ページ上のその他のコンポーネントの配置に使用できるレイアウト・コンポーネントが多数あります。詳細表示 
-
別の「Panel Splitter」コンポーネントを、パネル・スプリッタの'second'ファセットにドラッグ・アンド・ドロップします。
-
Structureペインで、最初のpanelSplitterコンポーネントを開き、2番目のコンポーネントを選択します。 プロパティ・インスペクタで、Orientationをverticalに設定します。
-
「Panel Accordion」コンポーネントを、パネル・スプリッタの左側の'first'ファセットにドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、TextをMy Cartに設定します。
-
作成したアコーディオン内をクリックして「showDetailItem」を右クリックし、コンテキスト・メニューから「Insert After showDetailItem」→「Show Detail Item」を選択します。
追加したShow Detail Itemについて、プロパティ・インスペクタのCommonタブで、TextフィールドをMore Infoに変更します。
-
「Panel Collection」コンポーネントを、右側の'first'ファセットにドラッグ・アンド・ドロップします。
-
「Panel Tabbed」コンポーネントを、右側の'second'ファセットにドラッグ・アンド・ドロップします。 このコンポーネントは、Interactive Containers and Headersグループに表示されます。
Structureペインで、作成した「af:showDetailItem」コンポーネントを選択し、プロパティ・インスペクタのTextフィールドにProduct Detailsと入力します。
-
「Product Details」タブを右クリックし、コンテキストから「Insert After showDetailItem」→「Show Detail Item」を選択します。
Structureペインで、作成した「af:showDetailItem」コンポーネントを選択し、プロパティ・インスペクタで、TextフィールドにRatingと入力します。
ページは次のイメージのように表示されます。
-
すべての作業を保存します。 次にページを右クリックし、コンテキスト・メニューから「Run」を選択します。
-
ブラウザにページがロードされます。 タブを選択したり、More Infoパネルを開いたりして、操作を試します。 終了したら、ブラウザを開いたままJDeveloperに戻ります。
-
次のステップでは、ページ・タイトルをカスタマイズして、既存ページでどのように使用されるかを確認します。 このプロセスを開始するには、以前に作成したsimple.jsfテンプレートを開きます。
-
ページ・デザイナで、「title」コンポーネントを選択します。
プロパティ・インスペクタでStyleノードを開き、Font/TextノードのColorフィールドで、Colorドロップダウン・リストから任意の色を選択します（例ではAquaを選択）。
Font Sizeプロパティで、ドロップダウン・リストから「large」を選択します。
-
すべての作業を保存します。 ブラウザに戻り、ページを再ロードして新しい特性を表示します。
JDeveloperアプリケーションを保存した後、ブラウザ・ウィンドウをリフレッシュすると、アプリケーションに加えた新しい変更内容が反映されます。ただし、バインディング・コンポーネントを更新している場合、 ブラウザに変更内容を反映させるには、JDeveloperから、そのページを再実行する必要があります。
-
設計エディタでuntitledページを開きます。
-
Structureペインで「pageTemplate」タグを選択し、プロパティ・インスペクタでtitleプロパティをStore Frontに設定します。
-
すべての作業を保存します。 ブラウザに戻り、ページを再ロードして新しい特性を表示します。
ページ・レイアウトが完了したら、データを追加します。 このプロセスの最初のステップは、POJOからのデータ・コントロールの作成です。 このためには、以下の手順を実行します。
詳細表示 -
ADFデータ・バインディング機能を使用して、既存のPOJOクラスからデータ・コントロールを作成します。
アプリケーション・ナビゲータでApplication Sourcesノードを開き、tutorial.modelの「StoreProducts.java」を右クリックし、コンテキストから「Create Data Control」を選択します。
Bean Data Control Interfaceで「TransactionalDataConrtol」と「UpdatableDataControl」を選択し、「OK」をクリックします。
データ・コントロールの作成後、アプリケーション・ナビゲータにはDataControls.dcxファイルが含まれます。
-
アプリケーション・ナビゲータで、Data Controlsアコーディオン、StoreProductsノードを開きます。 Data Controlsペインは次のように表示されます。
-
「StoreProducts」→「products」データ・コントロールを選択して、untitled1ページの設計エディタのaf:panelCollectionにドラッグ・アンド・ドロップします。 ポップアップ・メニューから「Table」→「ADF Read-only Table...」を選択します。
ADF Faces表コンポーネントを使用して、行/列で構成される表として構造化データを表示できます。詳細表示
-
Edit Table Columnsダイアログで、Row Selectionの「Single Row」オプションと「Enable Sorting」オプションを選択します。
「OK」をクリックします。
-
Structureペインで「af:table」コンポーネントを選択し、プロパティ・インスペクタでBehaviorノードを開きます。 EditingModeプロパティをclickToEditに、ColumnStretchingをLastに設定します。
すべての作業を保存します。
-
Data Controlsペインに戻り、「products」をProduct Detailsタブ・コンポーネント上にドラッグ・アンド・ドロップします。 ポップアップ・メニューで「Form」→「ADF Form」を選択します。
-
Edit Form Fieldsダイアログで、「Include Submit Button」チェック・ボックスを選択します。
「OK」をクリックします。
-
ページは以下のイメージのようになります。
-
すべての作業を保存して、ページを実行します。
-
ページがロードされると、デフォルトで商品のリストが表示されます。
-
列ヘッダーの1つを選択して他の場所に移動します。
-
description列を使用して、列のサイズ変更を試します。
-
「name」列を選択し、「Detach」メニュー・オプションをクリックして、パネルのコンテンツをブラウザ内に独立表示します。
「Detach」オプションを再度クリックして元の表示に戻します。
-
Viewメニュー・オプションで一部の列を非表示にします。
この列は、再表示するまで非表示のままとなります。 表の下にメッセージが表示されるため、非表示の列があることが分かります。
試しの操作を終了したら、ブラウザを閉じてJDeveloperに戻ります。
-
次のいくつかのステップでは、ページにイメージやグラフィカル項目をいくつか追加します。
Product Detailsペインで、「cost」フィールドを右クリックし、コンテキスト・メニューから「Convert To...」を選択します。
グラフィカル・コンポーネントを使用して、エンドユーザーが簡単に操作できるようにする、さまざまな方法があります。詳細表示
Convertダイアログで、「Input Number Spinbox」を選択します。
「OK」をクリックし、Confirm Convertボックスで再度「OK」をクリックします。
-
image列の値がテキスト・タイプに設定されていることに注意してください。 イメージを表示するには、列の構造を変換する必要があります。 Product Detailsペインで「image」フィールドを右クリックし、コンテキストから「Convert To...」を選択します。
Convertダイアログで「Image」を選択します。
「OK」をクリックし、Confirm Convertボックスで再度「OK」をクリックします。
-
新しいimageフィールドを選択したまま、プロパティ・インスペクタに移動して、sourceフィールドのドロップダウン・リストから「Expression Builder」を選択します。
-
Expression Builderダイアログで、「ADF Bindings」→「bindings」→「image」→「inputValue」を選択します。
「OK」をクリックします。
-
Structureペインのimageコンポーネントの下で、「f:validator」コンポーネントを削除して、ページの設計に表示されているエラーを解消します。
-
Product Detailsペインで「rating」フィールドを右クリックし、コンテキスト・メニューから「Convert To...」を選択します。
Convertダイアログで「Slider(Number)」を選択します。
「OK」をクリックし、Confirm Convertボックスで再度「OK」をクリックします。
-
Product Detailsペインで「description」フィールドを右クリックし、コンテキスト・メニューから「Convert To...」を選択します。
Convertダイアログで「Rich Text Editor」を選択します。
「OK」をクリックし、Confirm Convertボックスで再度「OK」をクリックします。
-
StructureペインのrichTextEditorコンポーネントの下で、「validator」コンポーネントを削除してページの設計に表示されているエラーを削除します。
-
Product Detailsペインは次のように表示されます。
すべての作業を保存します。
-
ブラウザに戻ってページを再ロードします。
-
ratingスライダ、costスピンボックス、ポップアップ・カレンダーおよびRich Text Editorの操作を試します。
-
最後に、商品表の任意の行をダブルクリックします。 Product Detailsペインには、選択した商品の変更は反映されないので注意してください。 このような同期を実装するには、部分ページ・レンダリング機能を追加する必要があります。
Product表で別の行を選択した場合にProduct Detailsをリフレッシュするには、部分レンダリング動作を設定する必要があります。 そのために次の手順を実行してください。
詳細表示 -
JDeveloperに戻り、Product Detailsコンポーネントのaf:panelFormLoyoutに移動します。
-
プロパティ・インスペクタでBehaviorノードを開き、Partial Triggerフィールド横の下矢印を使用して「Edit」を選択します。
-
Edit PropertyダイアログでpanelCollection* - pc1コンポーネントを開き、右矢印ボタンを使用して、Selectedペインにtable* - t1を移動します。 これにより、商品詳細を含むPanel Form Layoutのリフレッシュをトリガーする要素が定義されます。
「OK」をクリックして、すべての作業を保存します。
-
ブラウザ・ウィンドウに戻り、ページを再ロードします。
-
表の別の行を選択し、商品詳細を変更します。 商品詳細が、表で選択されている商品レコードと同期されます。
-
ブラウザ・ウィンドウを開いたままにして、JDeveloperに戻ります。
操作コンポーネントとは、アプリケーションに機能を提供するコンポーネントです。 このセクションでは、メニュー、ポップアップ、および印刷可能なページを作成し、エンドユーザーがショッピング・カートに商品をドラッグできるようにします。 このタイプの機能を実装するには、次の手順を実行します。
詳細表示 -
アプリケーションで実装のメニューをクリックし、JDeveloperに戻ります。 2番目のパネルで「menu」コンポーネント・ファセットを右クリックし、コンテキストから「Insert Inside Facet」→「Menu」を選択します。
-
プロパティ・インスペクタを使用して、TextフィールドをMy Optionsに設定します。
また、Behaviorノードで、Detachableプロパティをtrueに設定します。
-
「Menu」を右クリックして、コンテキストから「Insert Inside Menu - My Options」→「Menu Item」を選択します。
プロパティ・インスペクタで、TextプロパティをExport to Excelに設定します。
-
Structureウィンドウで「af:commandMenuItem」コンポーネントを右クリックして、コンテキストから「Insert After af:commandMenuItem - Export to Excel」→「Menu Item」を選択します。
プロパティ・インスペクタで、TextプロパティをShow Specialsに設定します。
-
コンポーネント・パレットでADF Faces、Operations、Listenersライブラリ・ノードを開きます。 次に「Export Collection Action Listener」コンポーネントを選択して、Structureペインの「Export to Excel」メニュー項目の下にドロップします。
Insert Export Collectionダイアログで、ExportedIdにt1と入力し、Typeとして「excelHTML」を選択します。
「OK」をクリックします。
-
すべての作業を保存し、ブラウザに戻ってページを再ロードします。
-
メニュー・オプション「My Options」をクリックします。
メニュー・バーからメニュー・オプションが分離できます。
-
「Export to Excel」メニュー・オプションを選択します。
-
ブラウザによっては、ダウンロード以外のファイルのダウンロードができない場合があります。 ダイアログが表示され、このファイルをどうするかを尋ねられます。ファイルをExcelで開くか、保存することができます。
「Cancel」をクリックします。 ブラウザ・ウィンドウを開いたままにして、JDeveloperに戻ります。
-
次に、ポップアップ・ウィンドウを作成して特定の商品のプロパティを拡張してみましょう。
Structureペインで、「form」コンポーネントを選択します。 コンポーネント・パレットで、ADF Faces、Layout、Secondary Windowsライブラリを開き、「Popup」項目を選択してformにドロップします。
他の多くのADF Facesコンポーネントが含まれるポップアップ・コンポーネントを使用して、エンドユーザーからの情報やリクエスト入力を提供するさまざまなダイアログ、メニュー、ウィンドウを作成できます。詳細表示 
-
「popup」コンポーネントを右クリックして、コンテキスト・メニューから「Insert Inside popup」→「Dialog」を選択します。
-
コンポーネント・パレットから、General Controlsを開いて、「Image」コンポーネントを選択し、Dialog内にドロップします。
Insert Imageダイアログでクリックし、ドロップダウン・リストからソースとして「/images/JDeveloper.gif」イメージを選択します。
「OK」をクリックします。
-
イメージの外部をクリックして、ダイアログを閉じます。 untitled1.jsfページが前面に移動されたら、Structureペインから「af:dialog」を選択します。
-
コンポーネント・パレットで、「Operations」→「Behavior」ライブラリ→「Show Popup Behavior」コンポーネントを選択して、2番目のcommandMenuItem上にドロップします。
-
プロパティ・インスペクタのPopupIdフィールドで、ドロップダウン・リストから「Edit」を選択します。
Edit Propertyダイアログでクリックし、ノードを開いて「popup - p1」コンポーネントを選択し、「OK」をクリックします。
-
すべての作業を保存し、ブラウザに戻ってページを再ロードします。
「My Options」メニューをクリックし、「Show Specials」を選択します。
ダイアログにJDeveloperのイメージがポップアップ表示されます。
-
次に、Product Detailsとショッピング・カートの間にドラッグ・アンド・ドロップ機能を追加し、簡単なドラッグ・アンド・ドロップ操作で、Product Detailsから商品をショッピング・カートに入れられるようにします。
JDeveloperに戻って「Output Text」コンポーネントを選択し、My Cartペイン上にドロップします。
プロパティ・インスペクタで、Output Textの値としてNo Items Selectedを入力します。
-
コンポーネント・パレットで、「ADF Faces」→「Operations」→「Drag and Drop」ライブラリ→「Attribute Drag Source」コンポーネントを選択して、Product Detailsペインの「name」フィールドにドロップします。
Insert Attribute Drag Sourceダイアログで、ドロップダウン・リストから「value」を選択します。 Product Detailsペイン。
「OK」をクリックします。
-
コンポーネント･パレットの「ADF Faces」→「Operations」→「Drag and Drop」→「Attribute Drop Target」コンポーネントを選択して、No Item Selectedテキスト・フィールドにドラッグ・アンド・ドロップします。
Insert Attribute Drop Targetダイアログで、Attributeフィールドで「value」を選択します。 「OK」をクリックします。
-
すべての作業を保存し、ブラウザでページが再ロードされたら、表中の項目を選択して対応するProduct Detailsを表示します。
Product Detailsペインで、「name」フィールドを選択し、
... My CartのNo Items Selectedテキストにドラッグ・アンド・ドロップします。
商品がカートに追加されます。
「Cancel」をクリックします。 ブラウザ・ウィンドウを開いたまま、JDeveloperに戻ります。
-
次のいくつかのステップでは、メニュー・オプションを追加して最新情報を取得し、印刷可能なページにします。 JDeveloperでは、他のMenu Itemを追加して、TextプロパティをPrintable Pageに設定します。
-
Operations、Behaviorコンポーネントを開き、「Show Printable Page Behavior」をメニュー・オプションにドラッグします。
-
次のいくつかのステップでは、ポップアップ・ページを追加してカルーセルを使用して商品を表示します。
Layoutコンポーネントで、「Panel Group Layout」を選択して、Structureペインのf:facet - firstコンポーネントにドラッグします。
回転するカルーセルにイメージを表示できます。詳細表示
-
af:panel収集の上に移動します。 プロパティ・インスペクタでStyleノードを開き、Inline Styleを30pxに設定します。
ページは次のように表示されます。
-
General Controlsライブラリから「Button」をaf:panelGroupLayout上にドラッグします。 TextプロパティをPopupに設定します。
-
Layout→Secondary Windowsから、「Popup」をaf:panelGroupLayout上にドラッグします。 Popupボタンの下に配置されます。
">
-
新しい「af:popup」をクリックして、「Insert Inside popup」→「Dialog」を選択します。
プロパティ・インスペクタで、ダイアログTypeをokに設定します。
-
Data ControlsペインでStoreProductsを開き、「products」ノードを選択します。
ダイアログにドラッグしてドロップします。 メニューから「Carousel」を選択します。
-
General Controlsライブラリで、「Image」コンポーネントを選択して、カルーセルにドラッグ・アンド・ドロップします。
Insert Imageダイアログで、Sourceプロパティの値として#{item.image}を入力します。 ShortDescは空白にしておくことができます。
「OK」をクリックします。
-
すべての作業を保存し、Structureペインで「af:panelGroupLayout」を選択して、untitled1ページを前面に戻します。
-
Operations、Behaviorライブラリを開いて、「Show Popup Behavior」コンポーネントをPopupボタンにドロップします。
-
プロパティ・インスペクタで、PopupIdプロパティの「Edit」を選択します。
-
Edit Property: PopupIdダイアログで、view、document、formノードを開き、「popup - p2」コンポーネントを選択します。
「OK」をクリックします。
-
プロパティ・インスペクタで、Trigger Typeプロパティをactionに設定します。
-
すべての作業を保存し、ページを実行します。 ブラウザに表示されたら、「My Options」→「Printable Page」をクリックします。
ページの表コンポーネントがブラウザの別タブに表示され、プリンタに送信できる状態になります。
-
元のuntitled1.jsfページに戻り、「Popup」ボタンをクリックします。
-
ポップアップ・ウィンドウに商品イメージが表示されます。 ウィジェットをクリックして、すべての商品イメージを表示します。 テストが完了したら「OK」をクリックします。
-
ブラウザ・ウィンドウを開いたままにして、JDeveloperに戻ります。
ゲージを追加して特定の商品の評価を表示しようとしています。 このゲージを作成するには、次の手順を実行します。
ADFデータ可視化コンポーネントには、データの表示/分析用の優れたグラフィカル/表形式機能があります。 詳細表示
-
JDeveloperに戻って、「Rating」タブをクリックします。
-
コンポーネント・パレットで、ADF Data Visualization→Gaugeライブラリから、「Gauge」コンポーネントをRatingペインにドラッグ・アンド・ドロップします。
-
Create Gaugeダイアログで、「Dial」カテゴリを選択してから、ゲージ・タイプに「Dial with Thresholds」を選択し、左端のクイック・スタート・レイアウト提案を選択します。 「OK」をクリックします。
-
Ratingペインに新しいゲージが表示されます。
-
プロパティ・インスペクタのValueフィールドで、ドロップダウン・リストから「Expression Builder」を選択します。
Expression Builderダイアログで、式に「ADF Bindings」→「
bindings」→「rating」→「inputValue」を選択します。
「OK」をクリックします。
-
Structureペインで、「Gauge」コンポーネントを選択し、プロパティ・インスペクタで、Gauge DataのMaxValueフィールドを10に設定します。
「OK」をクリックします。
-
Structureペインで、gauge、thresholdSetコンポーネントを開きます。 最初のしきい値を選択し、プロパティ・インスペクタで、FillColorのドロップダウン・リストから「Edit」を選択します。
Edit Propertyダイアログで、パレットから「reddish」を選択し、「OK」をクリックします。
ThresholdMaxValueを4に設定します。
-
Structureペインで、2番目のしきい値を選択して、FillColorプロパティにyellowishを使用して、最後の手順を繰り返し、ThresholdMaxValueを7に設定します。
最後に、3番目のしきい値を選択して、FillColorプロパティにgreenishを使用して、最後の手順を繰り返し、ThresholdMaxValueを10に設定します。
-
Structureペインで、「dvt:gauge」コンポーネントを選択して、AppearanceのShortDescプロパティをrating gaugeに設定します。
-
すべての作業を保存します。 ゲージは次のイメージのように表示されます。
-
ページ内を右クリックして、「Run」を選択します。
-
表から商品を選択し、「Rating」タブをクリックすると、ゲージにその商品の最新の評価値が表示されます。
「Product Details」タブをクリックし、スライダを移動して、評価値を変更します。
「Rating」タブをクリックして、ゲージに新しい値が反映されていることを確認します。
最後に、パラメータ化されたcssファイルを使用して、アプリケーション全体のルック・アンド・フィールを変更する方法について説明します。 この機能を実装するには、以下の手順に従います。
詳細表示 アプリケーション・ナビゲータで、Web Content、WEB-INFノードを開き、「trinidad-config.xml」ファイルをダブルクリックして、エディタで開きます。
-
このファイルにはパラメータが含まれており、これを使用して別のcssファイルを使用できます。
-
アプリケーション・ナビゲータのskins→princessフォルダに、princess.cssファイルが存在します。
-
ブラウザ・ウィンドウで、URLの最後の部分（untitled1.jspxページ名の後）を削除します。
-
URLの末尾に文字列?skin=princessを追加し、[Enter]を押します。
-
アプリケーションのルック・アンド・フィールが変更されたことに注意してください。
色、タブ、およびアコーディオンでprincess cssが使用されています。ページを試してみます。
終了したら、ブラウザ・ウィンドウを閉じます。 これでこのチュートリアルは完了です。
- ページ・テンプレートの作成
- ページ・テンプレートを使用したページの設計
- 入力コンポーネントと出力コンポーネントの使用
- 部分ページ・レンダリングの実装
- 操作コンポーネントの使用
- Oracle ADFデータ可視化コンポーネントの使用
- スキンを使用したアプリケーションのルック・アンド・フィールの変更
- Oracle® Fusion Middleware Fusion Developer's Guide for Oracle Application Development Framework 11g Release 2 (11.1.2.0.0)
- Oracle® Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework 11g Release 2 (11.1.2.0.0)
すべて表示 | すべて非表示