ADF Facesスキンを使用して、要求に合うようにルック・アンド・フィールを変更できます。ADF FacesではOracle、MinimalおよびSimpleというそのまま使用できる3つのスキンが用意されています。これらのスキンによりいくつかの基本的な書式設定をADF Facesコンポーネントに追加できます。どのコンポーネントでもスキンで説明されているスタイルが自動的に使用され、スキンへの変更はすべて実行時に反映されます。
さらに、カスタム・スキンを作成することでアプリケーションの外観をカスタマイズできます。カスタム・スキンとはSimpleスキンの拡張です。ADF Facesスキン内で使用できるセレクタにより、スキンを特定のコンポーネントに適用できます。必要に応じてこれらのセレクタのプロパティを編集して、ADF Facesコンポーネントをスキニングできます。スタイル・セレクタによりスタイル・プロパティを特定のコンポーネントに適用できます。アイコン・セレクタにより特定のコンポーネントのためにアイコンをレンダリングできます。
他のADF Facesコンポーネントと同様に、カスタマイズ可能なコンポーネントのセレクタが提供され、これによりpanelCustomizable
やshowDetailFrame
コンポーネントの外観を変更できるようになります。
カスタマイズ可能なコンポーネントのルック・アンド・フィールを変更するために、カスタム・スキンを作成し、セレクタをカスタム・スキンの.css
ファイルに追加できます。ADF Facesスキン、カスタム・スキンの作成、スキンを使用するためのアプリケーションの構成などの詳細は、ADF Facesでのスキンの使用を参照してください。カスタマイズ可能なコア・コンポーネントのスタイル化の詳細は、Oracle WebCenter Framwework開発者ガイドを参照してください。
次の表は、カスタマイズ可能なコンポーネントのルック・アンド・フィールを変更するために、.css
ファイルで指定できるセレクタを説明しています。
プロパティ・キー | 説明 |
---|---|
showDetailFrame {-ora-additional-actions-position-last: true}
|
このプロパティ・キーにより、シードされたアクションに関連する追加アクションの場所が変更されます。
このプロパティのデフォルト値は、シードされたアクションの後に追加アクションが常に表示されることを意味する |
showDetailFrame {-ora-menu-icon-display:false}
|
「アクション」メニューの
これを
このプロパティのデフォルト値は、各アイコンの左にアイコンが表示されないことを意味する |
panelCustomizable {-ora-menu-icon-display:false }
|
「アクション」メニューの
これを
このプロパティのデフォルト値は、各アイコンの左にアイコンが表示されないことを意味する |
次の表は、JSFのshowDetailFrame
およびpanelCustomizable
コンポーネントの外観を変更するために使用できるセレクタを説明しています。showDetailFrame
またはpanelCustomizable
コンポーネントで使用するスキニング・セレクタを指定するには、そのコンポーネント・インスタンスのBACKGROUND
属性を使用する必要があります。カスタマイズ可能なコンポーネント固有のセレクタで使用できるカラー・スキーマは、デフォルトおよびカスタム・スキンの両方ともLight、Medium、Darkの3つです。
グローバル・セレクタとは、複数のコンポーネントに影響を与えるセレクタです。次の表は、showDetailFrame
およびpanelCustomizable
コンポーネント両方のスキンに影響を与えるグローバル・スタイル・セレクタを説明しています。これらのスタイル・セレクタは両方のカスタマイズ可能なコンポーネントの他のスタイル・セレクタに含まれます。
セレクタ名 | 説明 |
---|---|
|
この別名スタイルにより、コンポーネントで上枠以外の3つの枠が定義されます。
例 |
|
この別名スタイルによりコンポーネントの上枠が定義されます。
例 |
.AFCUSTFrameComponentHeaderBase:alias
|
この別名スタイルによりコンポーネントのヘッダーが定義されます。
例 |
.AFCUSTFrameComponentContentBase:alias
|
この別名スタイルによりコンポーネントのコンテンツが定義されます。
例 |
.AFCUSTFrameComponentMenuGroupBase
|
カスタマイズ可能なコンポーネントのメイン・メニュー・コンテナをスタイル化します。
例 |
.AFCUSTFrameComponentMenuItemBase
|
各メニュー項目をスタイル化します。
例 |
.AFCUSTFrameComponentMenuSeparatorBase
|
メニュー・セパレータをスタイル化します。
例 |
コンポーネント・レベルのセレクタとは、特定のコンポーネントをスキニングするために使用できるセレクタのことです。次の表は、showDetailFrame
またはpanelCustomizable
コンポーネントを特にスキニングするために使用できるセレクタを説明しています。
アイコン・セレクタ | |
---|---|
名前 | 説明 |
panelCustomizable::ShowContentIcon:alias
|
このアイコンは、コンポーネントのメイン・メニューの「コンテンツの表示」オプションの左にレンダリングされます。
例 |
|
このアイコンは、ヘッダーの右隅にレンダリングされ、ユーザーが実行できるアクションのドロップダウン・メニューが表示されます。
例 |
|
このアイコンは、ヘッダーの右隅にレンダリングされ、ユーザーが実行できるアクションのドロップダウン・メニューが表示されます。
例 |
|
このアイコンはヘッダーの左隅にレンダリングされます。
例 |
|
このアイコンはヘッダーの左隅にレンダリングされます。
例 |
|
このアイコンは、コンポーネントのメイン・メニューの「最大化」アクションの左にレンダリングされます。
例 |
|
このアイコンは、コンポーネントのメイン・メニューの「最大化」アクションの左にレンダリングされます。
例 |
|
このアイコンは、コンポーネントにより公開される「最小化」アクションに対応する「リストア」アクションを表します。これはヘッダーの左隅にレンダリングされます。
例 |
|
このアイコンは、コンポーネントにより公開される「最小化」アクションに対応する「リストア」アクションを表します。これはヘッダーの左隅にレンダリングされます。
例 |
|
このアイコンは、コンポーネントにより公開される「最大化」アクションに対応する「リストア」アクションを表します。これはコンポーネントのメイン・メニューの「リストア」アクションの左にレンダリングされます。
例 |
|
このアイコンは、コンポーネントにより公開される「最大化」アクションに対応する「リストア」アクションを表します。これはコンポーネントのメイン・メニューの「リストア」アクションの左にレンダリングされます。
例 |
|
このアイコンは、コンポーネントのメイン・メニューの「移動」オプションの左にレンダリングされます。
例 |
|
このアイコンは、コンポーネントのメイン・メニューの「移動」オプションの左にレンダリングされます。
例 |
|
このアイコンは、コンポーネントのサブ・メニューの「左へ移動」オプションの左にレンダリングされます。
例 |
|
このアイコンは、コンポーネントのサブ・メニューの「左へ移動」オプションの左にレンダリングされます。
例 |
|
このアイコンは、コンポーネントのサブ・メニューの「右へ移動」オプションの左にレンダリングされます。
例 |
|
このアイコンは、コンポーネントのサブ・メニューの「右へ移動」オプションの左にレンダリングされます。
例 |
|
このアイコンは、コンポーネントのサブ・メニューの「上へ移動」オプションの左にレンダリングされます。
例 |
|
このアイコンは、コンポーネントのサブ・メニューの「上へ移動」オプションの左にレンダリングされます。
例 |
|
このアイコンは、コンポーネントのサブ・メニューの「下へ移動」オプションの左にレンダリングされます。
例 |
|
このアイコンは、コンポーネントのサブ・メニューの「下へ移動」オプションの左にレンダリングされます。
例 |
|
このアイコンは、編集アクション・ファセットを使用してレンダリングされる「編集」アクション・アイテムにレンダリングされます。
例 |
|
このアイコンは、編集アクション・ファセットを使用してレンダリングされる「編集」アクション・アイテムにレンダリングされます。
例 |
|
このアイコンは、ヘルプ・アクション・ファセットを使用してレンダリングされる「ヘルプ」アクション・アイテムにレンダリングされます。
例 |
|
このアイコンは、ヘルプ・アクション・ファセットを使用してレンダリングされる「ヘルプ」アクション・アイテムにレンダリングされます。
例 |
|
このアイコンは、コンポーネントの左上隅のカーブしたイメージにレンダリングされます。
例 |
|
このアイコンは、コンポーネントの左上隅のカーブしたイメージにレンダリングされます。
例 |
|
このアイコンは、コンポーネントの右上隅のカーブしたイメージにレンダリングされます。
例 |
|
このアイコンは、コンポーネントの右上隅のカーブしたイメージにレンダリングされます。
例 |
|
このアイコンは、フェードイン-フェードアウト・ツールバーの左部分にレンダリングされます。
例 |
|
このアイコンは、フェードイン-フェードアウト・ツールバーの左部分にレンダリングされます。
例 |
|
このアイコンは、フェードイン-フェードアウト・ツールバーの右部分にレンダリングされます。
例 |
|
このアイコンは、フェードイン-フェードアウト・ツールバーの右部分にレンダリングされます。
例 |
|
このアイコンは、フェードイン-フェードアウト・ツールバーの中央部分にレンダリングされます。
例 |
|
このアイコンは、フェードイン-フェードアウト・ツールバーの中央部分にレンダリングされます。
例 |
スタイル・セレクタ | |
---|---|
名前 | 説明 |
|
例 |
|
例 |
|
例 |
showDetailFrame::main-menu-container
|
例 |
showDetailFrame::sub-menu-container
|
例 |
A.af|showDetailFrame::menu-item
|
例 |
A:hover.af|showDetailFrame::menu-item
|
例 |
A.af|showDetailFrame::sub-menu-item
|
例 |
showDetailFrame::menu-item-separator
|
例 |
showDetailFrame::actions-image-separator
|
例 |
A.af|showDetailFrame::title-clickable
|
例 |
|
例 |
スタイル・セレクタ | |
---|---|
名前 | 説明 |
|
例 |
|
例 |
|
例 |
panelCustomizable::main-menu-container
|
例 |
panelCustomizable::sub-menu-container
|
例 |
A.af|panelCustomizable::menu-item
|
例 |
A:hover.af|panelCustomizable::menu-item
|
例 |
A.af|panelCustomizable::sub-menu-item
|
例 |
panelCustomizable::menu-item-separator
|
例 |
panelCustomizable::actions-image-separator
|
例 |
A.af|panelCustomizable::title-clickable
|
例 |
panelCustomizable::no-header-content
|
例 |
ADF Facesコンポーネントをスキニングするセレクタ
スキンについて
カスタム・スキンについて
Copyright © 1997, 2007, Oracle. All rights reserved.