1. ADFSkin.zipファイルをダウンロードします。 このアイコンを右クリックしてコンテキスト・メニューから「対象をファイルに保存」を選択し、adfskin.zipファイルを任意のローカル・ディレクトリにダウンロードします。

2. 選択したローカル・ディレクトリ（labsなど）で、adfskin.zipファイルを解凍します。

3. 「スタート」→「すべてのプログラム」→「Oracle Fusion Middleware 11.1.2」→「JDeveloper Studio 11.1.2」を選択して、JDeveloperを起動します。

4. ロールを選択するよう指示されたら、「Studio Developer (All Features)」を選択して、「OK」をクリックします。

   

5. Tip of the Dayウィンドウを閉じます。

ロードが終了すると、JDeveloper IDEが表示されます。 詳細表示
最初にJDeveloperを開くと、Start Pageが表示されます。 後でStart Pageを再表示する場合は、「Help」→「Start Page」を選択します。



JDeveloperについて学習するためのさまざまなオプションが用意されています。 これらのオプションを確認したら、Start Pageタブ上の「X」をクリックしてStart Pageタブを閉じます（タブにマウスを合わせると、「X」が表示されます）。

6. アプリケーション・ナビゲータで「Open Application」リンクをクリックします。

   

   ダウンロードした事前定義済みのアプリケーションから、新しいADFスキン・アフィル（.css）を作成して、サンプル・アプリケーションのルック・アンド・フィールを変更します。

7. Open Applicationダイアログで、「C:\labs\ADFSkin\ADFSkinSample\ADFSkinSample.jws」ファイルを選択して、「Open」をクリックします。

   

   プロジェクトを移行するよう指示された場合は、「Yes」をクリックします。

8. アプリケーションがOracel JDeveloperにロードされた後は、データベース接続を確認します。 「Model」プロジェクトを右クリックして、コンテキスト・メニューから「Project Properties」を選択します。

   

9. Project Propertiesダイアログで、「Business Components」を選択し、必要であれば「Load Extension」 をクリックして適切なライブラリ・ファイルをロードします。

   

10. Connectionフィールドの横にある、「Editアイコンをクリックします。

    

11. Edit Database Connectionダイアログで、以下の値を入力します。 ここに例として示した値は、使用環境に合わせて変更する必要があります。

    プロパティ	値
    Connection Name	hrconn
    Username/Password	hr/<使用しているhrパスワード>
    Save Password	チェック・ボックスを選択
    Driver	Thin
    Host Name	スキーマがインストールされているマシン（例：localhost）
    SID	HRスキーマがインストールされているデータベース（XE、orclなど）

    
アプリケーションは、データベースと通信できる必要があります。 詳細表示データベース接続は起動用のアプリケーションですでに作成されていますが、値が現在の環境に適したものであることを確認する必要があります。

12. 「Test Connection」をクリックして、接続可能であることを確認します。

    
接続に成功したら、「OK」をクリックします。 詳細表示
接続に失敗した場合、正しいパラメータを入力しており、Oracleデータベースとリスナー・サービスが実行中であることを確認します。
接続は、Initialize Business Components Projectページにも表示されます。

13. 「Model」プロジェクト・ノードを開いて、このアプリケーション用に作成されたビジネス・コンポーネントを確認します。 アプリケーション・ナビゲータは、次のように表示されます。

    
Modelプロジェクト・ノードには、アプリケーションに必要なすべてのデータ・モデルのビジネス・コンポーネントが含まれています。 詳細表示

これらは、エンティティ・オブジェクト、ビュー・オブジェクト、外部キー・リンク、外部キー関連、アプリケーション・モジュールです。 アプリケーション・モジュールはデータ・コントローラ・プロバイダとして機能し、ページとデータベース間でのデータ・バインディングを可能にします。 アプリケーション・モジュールは、、エンドユーザー・タスクに関連する論理作業ユニットのビジネス・サービス・メソッドおよびUI対応データ・モデルをカプセル化するOracle ADF Business Componentsのコンポーネントです。
「Model」ノードを閉じます。

14. ここでは、「ViewController」ノードを開いて、各ノード間を自由にナビゲートしてに既存のコンポーネントを確認してください。
    アプリケーション・ナビゲータは、次のように表示されます。

    

ADFスキンはCSSファイルの一種で、外観をカスタマイズする必要があるコンポーネントのCSSスタイル・プロパティを、CSS（カスケーディング・スタイル・シート）仕様に基づいて定義します。

1. アプリケーション・ナビゲータで、「ViewController」プロジェクトを右クリックして、コンテキスト・メニューから「New」を選択します。

   

2. New Galleryダイアログで、「Web Tier」ノードを開き、「JSF/Facelets」を選択し、続いて右側のペインにある「ADF Skin」を項目として選択します。

   

   「OK」をクリックします。

3. Create ADF Skin Fileダイアログで、ファイル名をMyNewSkin.cssに変更します。 既存のスキンのディレクトリ・パスに、\MyNewSkinを追加します。 「Use as the default skin family for this project」チェック・ボックスを選択し、Extendsフィールドで、拡張するスキンとしてドロップダウン・リストから「fusionFx-simple-v2.desktop」を選択します。

   

   「OK」をクリックします。

Oracle ADFは、拡張が可能な一連のADFスキンを提供しています。 詳細表示
新しいスキン・ファイルは、アプリケーション・ナビゲータの「Web Content」→「skins」→「MyNewSkin」ノードの下に表示されます。



4. MyNewSkin.cssは、ナビゲートできるコンポーネントのセレクタ・ツリーで選択すると、デフォルトでは、設計エディタ内に開かれます。 コンポーネントに移動すると、そのコンポーネントのビューによってプレビューが更新されます。

   
「Source」エディタ・タブをクリックすると、新しい空のスキン・ファイルが表示されます。 詳細表示




5. アプリケーション・ナビゲータを下方向にスクロールして、Home.jspxエントリの場所を特定します。 エントリを右クリックして、コンテキスト・メニューから「Run」を選択し、Firefoxブラウザでページを起動します。 これによって、アプリケーションが動作していること、および拡張したスキンfusionFx-simple-v2.desktopのルック・アンド・フィールを確認します。 これは、スキン・ファイルに対する変更と､このスキン・ファイルによるfusionFx-simple-v2ルック・アンド・フィールのオーバーライドをまだ実行していないからです。

   
   JDeveloperを新規インストールした後で、アプリケーションを最初にデプロイするときは、Oracle WebLogic Serverのデフォルト・ドメインを作成する必要があります。 詳細表示
   
   「Create Default Domain」ダイアログで、8桁の新しいパスワードを入力して確認します。
   
   
   
   「OK」をクリックします。

6. ページがロードされている間に、「WEB-INF」ノードを開き、「trinidad-skins.xml」をダブルクリックしてエディタで開きます。

   
trinidad-skins.xmlファイルは、アプリケーションで利用できるすべてのカスタム・スキンのレジストリ・ファイルです。 詳細表示
このファイルは、Oracleルック・アンド・フィールを使用する場合は不要なため、デフォルトでは存在していません。


7. ソースを表示して、スキン・ファイルMyNewSkinが他の既存スキンに追加されたことを確認します。 これらのスキンは登録済みスキンであり、プロジェクトで使用することができます。

   
現在選択しているタブの右隅にある「x」をクリックして、エディタを閉じます。 詳細表示


8. 「trinidad-config.xml」ファイルをダブルクリックします。 アプリケーションに適用されている現在のスキンが、直前に作成したMyNewSkinであることを確認します。

   

   現在選択しているタブの右隅にある「x」をクリックして、エディタを閉じます。

実行中のアプリケーションに適用されるカスタム・スキンの構成には、ファミリー名が使用されます。 詳細表示
これは、静的な構成として行うことも、Expression Language（EL）を使用して動的に行うこともできます。 値を条件付きで設定するには、表示するスキンを特定するために評価されるEL式を入力します。 たとえば、ユーザーのブラウザでロケールがドイツに設定されているときはGermanスキンを使用し、それ以外のロケールではEnglishスキンを使用する場合は、trinidad-config.xmlファイルに次のエントリを追加します。
<skin-family>#{facesContext.viewRoot.locale.language=='de' ? 'german' : 'english'}</skin-family>

9. Firefoxのウィンドウに切り替えると、ブラウザにHomeページがロードされます。

   
   

10. メイン・メニュー・ツールバーから、「View」→「Firebug」を選択します。

    

CSSクラスを検索する簡単な方法は、FirebugというMozilla Firefox用の無料アドオンを使用することです。 詳細表示
FirebugはWeb開発用の便利なツールで、あらゆるWebページでCSS、HTML、JavaScript、Netリクエストのデバッグ、編集、および監視ができます。

FirebugをFirefoxにインストールするには、Firefoxのメニューから「ツール」→「アドオン」を選択し、検索フィールドにfirebugと入力します。 「インストール」をクリックすると、自動的にダウンロードとインストールが実行されます。

11. ページの下部に表示されているデバッグ・ペインに移動して確認します。 デバッグ・ペインには、デフォルトでHTMLタブが表示されます。

    

12. 右側のペインにあるスタイルタブに、MyNewSkinを使用していることが表示されます。 マウスのカーソルを「MyNewSkin」リンクに合わせると、使用しているスキン・ファイルの場所が表示されます。 その場所が、すでに追加してあるアプリケーションの場所であることを確認します。

    
ここでは、ページのルック・アンド・フィールで引き続きデフォルトの融合スタイルが使用されていることに注意してください。 詳細表示
新しいプロパティによって拡張するMyNewSkinにまだ変更を加えていないために、ルック・アンド・フィールでデフォルトの融合スタイルが使用されています。


13. メイン・メニュー・ツールバーから、再び「View」→「Firebug」を選択して、デバッグ・ペインを非表示にします。

    

14. ブラウザ・ウィンドウを閉じないで、JDeveloperに戻ります。

ADFスキンは、特定のコンポーネントまたはコンポーネントのグループにCSSスタイル・プロパティをどのように適用するかを規定するルールを定義します。

1. MyNewSkinの設計エディタで、「Faces Component Selectors」→「Document」→「af|document」エントリを選択します。

   

2. プロパティ・インスペクタ（表示されていない場合は、メイン・メニューから「View」→「Property Inspector」を選択）で、背景色を黄色に変更します。 Background Colorフィールドの右側にある下向き矢印をクリックし、「Edit」を選択します。

   

3. Background Colorダイアログで、RGB Hexフィールドに#fcfacbと入力します。

   

   「OK」をクリックします。

4. ドロップダウン・リストを使用して、Background Imageプロパティをnoneに設定します。

   

5. ツールバーの「Save All」ボタンをクリックして、作業内容を保存します。

   

6. Firefoxのウィンドウに切り替えて、ページを再ロードします。

   

7. 背景の変更がブラウザに反映されていることを確認します。

   
   

8. ここからは、アプリケーションのテキスト・フォントを変更します。
   ブラウザ・ウィンドウは閉じないで、JDeveloperに切り替えてスキン・エディタに戻り、「Global Selector Aliases」→「Font」ノードを開いて、「.AFDefaultFontFamily」エントリを選択します。

   
各カテゴリには、これらのタイプのADF Facesスキン・セレクタが1つ以上含まれています。 詳細表示
標準セレクタは、スタイルを適用できる要素を直接表すセレクタです。 たとえば、af|bodyはaf:bodyコンポーネントを表します。 このタイプの要素には、CSSスタイル、プロパティ、アイコンを設定できます。

9. プロパティ・インスペクタのFont/Text セクションで、Font Family属性のドロップダウン・リストから「Times New Roman」を選択します。

   

10. ナビゲータで、「.AFDefaultFont:alias」を選択します。

    
alias疑似クラスは特別な種類のクラスで、スキン・ファイルのコードを体系化する構文支援機能としての役割を果たします。 詳細表示
たとえば、この疑似クラスを使用すると、1つ以上のコンポーネントまたはあるコンポーネントの1つ以上の部分に対してスタイルを設定できます。 また、独自のalias疑似クラスを作成して、他のセレクタに含めることもできます。 たとえば、多数のフォーム・コンポーネントのラベル色を指定するalias疑似クラス（.AFLabel:alias）を定義できます。 alias疑似クラスのそれ以降の変更は、alias疑似クラスによって参照されているすべてのコンポーネントに影響を与えます。

af|inputText::label,
af|inputChoice::label,
af|selectOneChoice::label {-tr-rule-ref: ".AFLabel:alias"}
.AFLabel:alias { color: blue }
The .AFLabel:alias pseudo-class has color set to blue, but you can change all the component's label color to red by simply changing .AFLabel:alias:

.AFLabel:alias {color: red}

11. Font/Textセクションで、Font Sizeを12 pxに設定します。

    

12. Line Boxセクションで、Line Heightを18 pxに設定します。

    

13. ツールバーの「Save All」ボタンをクリックして、作業内容を保存します。

14. ブラウザ・ウィンドウに切り替えて、ページを再ロードします。

    

15. ページのフォントが変更されていることを確認します。

    

    ブラウザ・ウィンドウは、閉じないでください。 ここからは、パネル・ヘッダーのルック・アンド・フィールを変更します。

16. JDeveloperに戻って「Global Selector Aliases」ノードを閉じ、Faces Component Selectorsで「Panel Header」→「Pseudo-Elements」ノードを開き、3つのコンポーネントを更新します。 「title0」ノードを選択します。

    
疑似要素は、コンポーネントの特定領域にスタイルが適用できることを示すために使用されます。 詳細表示
疑似要素であることを示すには、セレクタが表しているコンポーネントの部分の先頭に、2つのコロンを追加します。 たとえば、af|chooseDate::days-rowは、カレンダー・グリッド内にある日付の外観に対応するスタイルとプロパティを提供します。

17. プロパティ・インスペクタで、title0コンポーネントに対応するBackground Colorの値を#fff27eに設定します（値を入力して[Enter]キーを押す）。

    

18. 「title-text0」→「Font/Text」→「Color」の順に選択してコンポーネントをRedに設定します。

    

19. 「content0」コンポーネントを選択し、プロパティを次のように設定します。

    セクション	プロパティ	値
    Common	Background Color	White（ドロップダウン・リストから）
    Common	Border	1px solid
    Common	Border Color	#fff27e

    

20. 設計エディタ内にレンダリングされる新しいパネル・ヘッダーの表示は、次のようになります。

    

21. ツールバーの「Save All」ボタンをクリックして、作業内容を保存します。

22. Firefoxで、ページを再ロードします。

    

23. UIが変更されたことを確認します。 また、この時点でHomeタブのみが選択可能な状態になっていることも確認します。 他のタブにアクセスするには、ログインが必要です。

    

1. 表ヘッダーの現在のルック・アンド・フィールを確認するには、アプリケーションにログインする必要があります。 「Login」リンクをクリックします。

   

2. Loginダイアログで、skingおよびWelcome1234と入力し、「OK」をクリックします。

   

3. これで、タブが選択可能な状態になります。 「Employees Overview」タブをクリックします。

   

   Employees表のヘッダーがレンダリングされていることを確認します。

   

4. ここからの手順では、表ヘッダーの背景を黄色およびフォントを赤色に変更します。
   JDeveloperに戻ります。 Faces Component Selectorsで、「PanelHeader」ノードを閉じて「Column」→「Pseudo-Elementsノードを開き、「column-header-table」エントリを選択します。

   

5. プロパティ・インスペクタのCommonセクションで、次のプロパティを設定します。

   プロパティ	値
   Background Color	#fff27e
   Background Image	none

   

6. Font/TextセクションのColor属性を、ドロップダウン・リストのRedに設定します。

   

   レンダリングされたペインは、次のように表示されます。

   

7. ツールバーの「Save All」ボタンをクリックして、作業内容を保存します。

8. Firefoxで、ページを再ロードします。

    

9. 「Employees Overview」タブをクリックして、表ヘッダーが変更されたことを確認します。

   

10. ここからは、パネル・リストにあるリンクのルック・アンド・フィールを変更します。 Welcome to Our Siteメッセージの下にあるパネル・リストを見ていきます。 ハイパーリンク・テキストにマウス・カーソルを合わせて、テキストに下線が表示されることを確認します。

    

11. JDeveloperに切り替え、「Column」ノードを閉じて「Panel List」→「Pseudo-Elements」ノードを開きます。 「link」エントリを選択します。

    

12. レンダリングされたペインには2つのセクションがあり、上側がlinkのプロパティ、下側がlink hoverのプロパティに対応していることを確認します。

    

13. linkのプロパティに対しては、プロパティ・インスペクタのFont/Textセクションで、次のプロパティを設定します。

    プロパティ	値
    Color	Red（ドロップダウン・リストから）
    Font Weight	bold（ドロップダウン・リストから）
    Text Decoration	underline（ドロップダウン・リストから）

    
    
    

14. レンダリングされたペインで「link:hover」セクションをクリックし、プロパティ・インスペクタのFont/Textセクションで、次のプロパティを設定します。

    プロパティ	値
    Font Weight	bold（ドロップダウン・リストから）
    Text Decoration	none（ドロップダウン・リストから）

    

15. ツールバーの「Save All」ボタンをクリックして、作業内容を保存します。

16. Firefoxで、ページを再ロードします。

    

17. パネル・リストのUIが変更されたことを確認します。 リンクは、これまでとは逆に、マウス・カーソルを合わせると赤色になり、下線の表示が消えます。

    

 

ここからは、タブ形状に別のイメージを使用し、また異なるフォントと色を定義することで、タブのルック・アンド・フィールを変更します。 このために、アプリケーションとともに提供されるイメージ・ファイルを使用します。

1. ブラウザ・ウィンドウは、閉じないでください。 JDeveloperに戻り、「Panel List」ノードを閉じます。

   

2. Global Selector Aliasesフォルダへ移動し、「Component Group Tabs」ノードを開きます（新規画面）。

   
このノードには、タブを定義している既存のコンポーネントが多数あります。 詳細表示
その一部は最上部にあるタブ（Aboveタブ）に対応し、残りはフッターにあるタブ（Belowタブ）に対応します。 各タブには、開始部分､中間部分、終了部分があります。 ここでは、アプリケーションのヘッダー・タブのみを変更します。

3. 「AFTabAboveEndSelectedBackground:alias:ltr」エントリを選択します。

   

4. プロパティ・インスペクタのCommonセクションで、Background Imageプロパティの右端にある下向き矢印をクリックし、コンテキスト・メニューから「Edit」を選択します。

   

5. Edit Propertyダイアログで、「skins」→「NewImages」→「af_panelTabbed」へナビゲートし、すでに提供されている既存のイメージの中から「t3_above_end_a.png」を選択します。

   

   「OK」をクリックします。 値は、次のようになります。

   エイリアス・コンポーネント	Background Image
   .AFTabAboveEndSelectedBackground:alias	t3_above_end_a.png

6. Endタブの次のパラメータに対して、上記と同じ手順を実行します。

   エイリアス・コンポーネント	Background Image
   .AFTabAboveEndUnselectedBackground:alias:ltr	t3_above_end_n.png
   .AFTabAboveEndUnselectedDisabledBackground:alias:ltr	t3_above_end_d.png

同じ手順を、MiddleコンポーネントとStartコンポーネントに対しても実行できます。 詳細表示
次の操作では、用意されたファイルを使用してMiddleコンポーネントとStartコンポーネントの値を設定します。 ファイルを使用しない場合は、次の値を移入する必要があります。

エイリアス・コンポーネント	Background Image
.AFTabAboveMiddleSelectedBackground:alias	t3_above_mid_a.png
.AFTabAboveMiddleUnselectedBackground:alias	t3_above_mid_n.png
.AFTabAboveMiddleUnselectedDisabledBackground:alias	t3_above_mid_d.png
.AFTabAboveStartSelectedBackground:alias:ltr	t3_above_start_a.png
.AFTabAboveStartUnselectedBackground:alias:ltr	t3_above_start_n.png
.AFTabAboveStartUnselectedDisabledBackground:alias:ltr	t3_above_start_d.png

7. MiddleとStartの値を用意されたファイルから移入するには、アプリケーション・ナビゲータでreadme.txtファイルを検索し、ファイルをダブルクリックしてソース・エディタで開きます。

   

8. 先頭の2行を除くテキスト全体を、選択してコピーします。

   

   readme.txtを閉じます。

9. MyNewSkin.cssファイルを表示した状態で、エディタ・ペインの下部にある「Source」タブをクリックします。 ファイルを下までスクロール・ダウンして、イメージの使用が最初に定義されている部分を見つけ、それに関連するすべてのコンポーネント定義を選択します。 選択した部分を右クリックして、コンテキスト・メニューから「Paste」を選択します。

   

10. 選択された文が、ファイルからクリップボードにコピーしたテキストで置き換えられます。

    

11. エディタの下部にある「Design」タブをクリックし、「Panel Tabbed」→「af|panelTabbed」を選択して、新しいタブ定義に対応するレンダリングの状態を確認します。

    

12. ツールバーの「Save All」ボタンをクリックして、作業内容を保存します。

13. Firefoxのブラウザ・ウィンドウに切り替えます。

    

14. タブに対して定義された新しいルック・アンド・フィールを確認するには、[Ctrl]キーを押しながら「Reload」ボタンを同時にクリックします（この操作でページがリフレッシュされない場合は、JDeveloperからHomeページを再実行します）。 新しいページがレンダリングされたことを確認します。 「Employees Overview」タブをクリックして、タブが選択状態および非選択状態になったときのルック・アンド・フィールを確認します。

    

15. JDeveloperに戻ります。 ここでは、タブにあるリンクのテキスト色を更新して、現在のスタイリングに合ったものにする必要があります。「af|panelTabbed」ノードにナビゲートして、「Source」タブをクリックします。

    

16. コードの末尾に次の文を入力して、タブの新しい外観を定義します。

    af|panelTabbed::header-center
    { background-image: url("../NewImages/af_panelTabbed/ptt.png"); }
    
    af|panelTabbed::tab af|panelTabbed::tab-text-link
    { color: white; font-weight: bold; }
    
    af|panelTabbed::tab:selected af|panelTabbed::tab-text-link { color:red; font-weight: bold; }
    
    af|panelTabbed::tab:hover af|panelTabbed::tab-text-link { color:white; }
    
    af|panelTabbed::tab:selected:hover af|panelTabbed::tab-text-link { color:red }
    
    
    

17. ツールバーの「Save All」ボタンをクリックして、作業内容を保存します。

18. Firefoxに戻ります。

    

    ページを再ロードします。

    

19. 新しいページがレンダリングされたことを確認します。 「Employees Overview」タブをクリックして、タブが選択状態および非選択状態になったときのルック・アンド・フィールを確認します。

    

動的スキンのUI変更を実装するには、以下の手順を実行する必要があります。

1. この新しいセクションでは、アプリケーションを再デプロイする必要があるため、ブラウザ・ウィンドウを閉じてJDeveloperに戻る必要があります。

2. 「Log」ウィンドウで、赤色の「Stop」アイコン内にある矢印をクリックし、「ADFSkinSample」を選択して実行中のアプリケーションを停止します。 IntegratedWebLogicServerを停止させないように注意してください。

   

3. ここでは、スキン・ドロップダウン・リストを有効にして、スキンを動的に切り替えられるようにします。 これを行うには、動的コードへの参照を含むtrinidad-configファイルを更新します。 「trinidad-config」ファイル・エディタを選択します。

   

   ソースが次のように表示されます。

   

4. コードからskin-familyタグを含むコメント行をコピーし、アクティブなskin-family MyNewSkinタグの代わりに貼付けます。
   
   

   <skin-family>#{sessionScope.skinFamily!=null?sessionScope.skinFamily : 'fusion'}</skin-family>
   
   

5. アプリケーション・ナビゲータで「Home.jspx」エントリをダブルクリックし、設計エディタでページを開きます。

   

6. 設計エディタで、myCompanyLogoの下にあるpanelGroupLayoutコンポーネント内をクリックします。 この選択によって、Structureペインの対応するコンポーネントがハイライト表示になります。

   

7. エディタ・ペインの下部にある「Source」タブをクリックします。 panelGroupLayoutがハイライト表示されます。

   

8. コメント化されているセクションがあることを確認します。

   

9. コメント終了タグ（-->）を切取り、コメント開始タグの行の末尾に貼付けます。

   <!-- Uncomment once you have updated trinidad-config to enable dynamic loading of skins-->
   
   

10. ツールバーの「Save All」ボタンをクリックして、作業内容を保存します。

11. 「Home.jspx」ページを右クリックし、「Run」を選択してページを再起動します。

    

12. ブラウザ・ウィンドウにページがロードされます。

    

13. Choose a Skinフィールドを使用して、ドロップダウン・リストから「MyNewSkin」を選択します。

    

14. 新しいUIが動的に変更されます。 Choose Skinフィールドを使用して、ドロップダウン・リストから別のスタイルのスキンを選択します（例： princess-skin）。

    

15. UIが動的に変更されます。

    

16. ドロップダウン・リストから別のルック・アンド・フィールのスキンを選択して、動作を確認します。

    

17. これで、スキンに関するこのチュートリアルは完了です。

このチュートリアルでは、パネル、パネル・タブ、フォント、表ヘッダー、リンクなどのコンポーネントのルック・アンド・フィールを、JDeveloperで独自のスキン（.cssファイル）を作成して変更する方法を確認しました。 さらに、アプリケーションを更新して、実行時にUIを動的に変更できるようにしました。 このチュートリアルで学習した内容は、以下のとおりです。

• 新しいADFスキンの作成および使用されているスキン値の確認
• ページの背景とフォント・ファミリーの変更
• 表ヘッダーとリンクのルック・アンド・フィールの更新
• ペイン本体とタブ形状の変更
• 動的スキン変更の実装

ADFスキンについて詳しくは、下記のWebサイトを参照してください。

• Oracle ADFスキン・エディタ・ユーザース・ガイド
• Oracle ADF Webユーザー・インタフェース開発者ガイドの「スタイルおよびスキンを使用した外観のカスタマイズ」
• Developer's Guide for Oracle WebCenterの「Creating and Managing Skins」
• Selectors for Skinning ADF Faces Components