| Oracle WebCenter Framework開発者ガイド 10g（10.1.3.4） B50831-02 |
|
 戻る |
 次へ |
この章では、Oracle ADF Facesスキンでのカスタマイズ可能コア・コンポーネントのスタイル・セレクタの使用について解説し、スキンの登録方法と、スキンを使用するためのアプリケーションの構成方法を説明します。また、カスタマイズ可能コア・コンポーネントのスタイルおよびアイコンのセレクタと、スタイル関連プロパティをリストして説明します。最後に、ユーザーが実行時にスキンを選択できるスキン・セレクタを構築する方法と、選択した内容を複数のユーザー・セッションにわたって存続させる方法について説明します。
この章の内容は、次のとおりです。
Oracle WebCenter Frameworkでは、スタイル情報を適用するための機会が2つ提供されています。
スタイル・セレクタを使用してスキンを構築し、スキンをWebCenterアプリケーションに適用します。定義したスタイル・セレクタをOracle ADF Facesスキンに追加して、標準のCascading Style Sheet（CSS）を生成します。スキンをアプリケーションに適用する処理を、スキニングといいます。
プロパティ・インスペクタを介して、Oracle JDeveloperのスタイル・プロパティを使用して、スタイル情報を指定します。Oracle JDeveloperのスタイル・プロパティは、スキンまたはCSSからのスタイル情報を上書きします。
開始する前に、関連するテクノロジを理解しておくと役に立ちます。この項では、Oracle ADF Facesスキン、スタイル・セレクタおよびスタイル・プロパティについて簡単に説明します。この項の内容は、次のとおりです。
スキンは、アプリケーション全体に対して1か所に設定される、CSS 3.0構文に基づいたスタイルシートです。各コンポーネントのスタイルを設定したり、各ページにスタイルシートを挿入することなく、アプリケーション全体に対して1つのスキンを作成できます。各コンポーネントで自動的に、スキンで記述されているスタイルが使用されます。設計時のコード変更は必要ありません。
Oracle ADF Facesには、アプリケーション内で使用できる3つのスキンが用意されています。
Oracle: デフォルトのスキン。Oracleスキンは、アプリケーションのOracleのユーザー・インタフェース標準（Oracleブラウザのルック・アンド・フィール、Oracle BLAFとも呼ばれる）に準拠しています。
Minimal: Minimalスキンでは、一部の書式設定が提供されます。
Simple: Simpleスキンにはほとんど書式設定は含まれません。
これらのスキンはすべてADF Faces 10.1.3コンポーネント・ライブラリに含まれていますが、このリリースではソースはユーザーに公開されません。これらのスキンにアクセスするには、アプリケーションにこのライブラリおよびその他いくつかのライブラリを含めます。関連するライブラリを含める方法の詳細は、9.2.1項「アプリケーション内でデフォルト・スキンを使用可能にする方法」を参照してください。
デフォルト・スキン以外にも、会社に適したルック・アンド・フィールで独自のカスタム・スキンを作成できます。カスタム・スキンを拡張したり、Simpleスキンにより提供されたスタイル定義を上書きすることができます。今のところ、拡張可能なスキンはSimpleスキンのみです。つまり、独自のCSS（つまり、カスタム・スキン）を適用するとき、CSS内に含めていない要素はすべてSimpleスキンから継承されます。
カスタム・スキンを作成した後は、有効なスキンとしてアプリケーション内に登録し、そのスキンを使用するようにアプリケーションを構成する必要があります。詳細は、9.2.3項「スキンを登録する方法」および9.2.4項「特定のスキンを使用するようにアプリケーションを設定する方法」を参照してください。
カスタム・スキンを使用する場合は、暗黙的にSimpleスキンが適用されます。Simpleスキンの使用を明示的に指定する必要はありません。
ポートレットとカスタマイズ可能コア・コンポーネント（PanelCustomizableおよびShowDetailFrame）には、3種類のカラー・スキーム（Light、MediumおよびDark）を作成できます。これらの使用方法の詳細は、9.3.6項「ポートレットおよびカスタマイズ可能コア・コンポーネントへのカラー・スキームの適用」を参照してください。
スタイルシートのルールには、要素を識別するスタイル・セレクタと、要素の外観を記述するスタイル定義のセットが関連します。例9-1に、カスタマイズ可能コア・コンポーネントShowDetailFrameに適用されるスタイル・セレクタおよび定義を示します。
af|showDetailFrame::main-menu-container
{
background:#FFFFFF;
border-left:1px #969664 solid;
border-right:1px #515151 solid;
border-top:1px #969664 solid;
border-bottom:1px #515151 solid;
width:110px
}
例9-1では、ShowDetailFrameコンポーネントのメイン・メニュー・コンテナのスタイルを定義しています。スタイル定義では、メニューの背景色、メニューの幅、およびメニューを囲む境界線の濃さと色を指定しています。
Oracle ADF Facesスキンでは、3種類のスタイル・セレクタが使用されます。
標準セレクタ: スタイルを適用できる要素を直接的に表します。たとえば、af|bodyはaf:bodyコンポーネントを表します。この要素には、CSSスタイル、プロパティおよびアイコンを設定できます。
擬似要素を持つセレクタ: スタイルを適用できるコンポーネントの特定領域を示します。擬似要素は、セレクタが表すコンポーネント部分に続いて二重コロンがあるため、容易に識別できます。たとえば、af|showDetailFrame::header-top-borderは、ShowDetailFrameコンポーネントのヘッダーの上部境界線のスタイル・セレクタです。
別名擬似クラスを使用するセレクタ: 複数のコンポーネントまたは複数のコンポーネント部分に対してスタイルを設定するセレクタに使用されます。たとえば、.AFMenuBarItem:aliasセレクタは、すべてのaf:menuBarアイテム（af|menuBar::enabledやaf|menuBar::selectedなど）の間で共有されるスキン・プロパティを定義します。
カスタム・スキンで上書きしないセレクタはいずれも、Simpleスキン内に提供されているスタイル・セレクタのスタイル定義を使用します。
通常、Oracle ADF Facesコンポーネント・ライブラリ内で使用可能なコンポーネントごとにルック・アンド・フィールをカスタマイズすることはありません。たとえばSimpleスキンなどを使用してアプリケーションを確認することで、カスタマイズするコンポーネントを決定できます。
カスタマイズ可能コア・コンポーネントのスタイル・セレクタのリスト、説明およびコード例は、9.3項「ポートレットおよびカスタマイズ可能コア・コンポーネントのスタイル・セレクタとアイコン・セレクタのスタイル定義の指定」を参照してください。カスタマイズ可能コア・コンポーネント用のセレクタ以外のセレクタの詳細は、Oracle Technology Networkの「Selectors for Skinning ADF Faces Components」を参照してください。
http://www.oracle.com/technology/products/jdev/htdocs/partners/addins/exchange/jsf/doc/skin-selectors.html
ShowDetailFrameおよびPanelCustomizableコンポーネントのルック・アンド・フィールは、設計時に、スタイル関連プロパティInlineStyle、ContentInlineStyleおよびStyleClassを変更することによって調整できます。設計時に指定したスタイル関連プロパティは、コンポーネントのその特定のインスタンスに対するアプリケーション・スキンまたはCSS内に指定された対応するスタイルを上書きします。
たとえば、あるアプリケーション・ページに2つのShowDetailFrameコンポーネントを配置したとします。1つ目のコンポーネントのスタイル関連プロパティを変更します。2つ目のスタイル関連プロパティは変更しません。この場合、スタイル関連プロパティの変更内容は、1つ目のインスタンスのみに影響を与えます。
コンポーネントの特定のインスタンスについて、設計時にプロパティ・インスペクタを介して入力したスタイル指定内容は、実行時にスキンまたはCSSを介して指定した対応するスタイル定義よりも優先されます。
詳細は、9.4項「プロパティ・インスペクタを介したスタイルの定義」を参照してください。
アプリケーションでカスタム・スキンを使用する手順は、次のとおりです。
ADF FacesコンポーネントおよびADF Faces HTMLを、アプリケーション・リソースに含める必要があります。
スキンまたはCSSを、関連プロジェクトに追加する必要があります。
カスタム・スキンをアプリケーションに登録する必要があります。
使用するスキンをアプリケーションに指定する必要があります。
この項では、これらの必要条件を満たす方法について説明します。この項の内容は、次のとおりです。
Oracle ADF FacesのデフォルトのスキンであるOracle、MinimalおよびSimpleは、ADF Faces 10.1.3コンポーネント・ライブラリの一部です。スキンを適用するアプリケーションには、次のライブラリが含まれている必要があります。
次のライブラリは必須ではありませんが、WebCenterアプリケーションに追加すると役に立ちます。
この項では、アプリケーションにライブラリを含める方法と、ライブラリを使用するようにアプリケーションを構成する適切な方法を説明します。
アプリケーションにライブラリを含める手順は、次のとおりです。
アプリケーション・ナビゲータで、スキンを使用するプロジェクトをダブルクリックします。
これにより、「プロジェクト・プロパティ」ダイアログ・ボックスが開きます。
「プロジェクト・プロパティ」ダイアログ・ボックスの左ペインで、「JSPタグ・ライブラリ」を選択します。
ライブラリのリストの下の「追加」ボタンをクリックし、次のライブラリを選択します。
ADF Faces Components
ADF Faces HTML
JSF Core
JSF HTML
「OK」をクリックして、選択したライブラリを追加します。
次に、「配布済みライブラリ」の下にリストされている各ライブラリを選択し、「JSPビジュアル・エディタでのタグの実行」チェック・ボックスを選択します。
「OK」をクリックします。
カスタム・スキンをアプリケーションに追加するためのオプションは2つあります。
Oracle JDeveloper内でCascading Style Sheet（CSS）を作成します。これにより、CSSがプロジェクトのソース・ファイル内に適切に配置されます。
外部で作成したCSSをプロジェクト・ルートに追加します。
この項では、両方のアプローチについて簡単に説明します。この項の内容は、次のとおりです。
Oracle JDeveloperでCSSを作成する手順は、次のとおりです。
アプリケーション・ナビゲータで、スキンを使用するアプリケーションに属するプロジェクト（またはプロジェクト内のファイル）を右クリックし、ポップアップ・メニューから「新規」を選択します。
「新規ギャラリ」での「カテゴリ」で、「Web Tier」を開き、「HTML」を選択します。
「新規ギャラリ」の「項目」で、「CSSファイル」を選択します。
「OK」をクリックします。
これにより、Cascading Style Sheetの作成ウィザードが起動されます。
「ファイル名」フィールドに、CSSの名前を指定します。
「ディレクトリ名」フィールドに、CSSを格納するパスを指定します。
パスを入力するか、デフォルトを受け入れるか、または「参照」をクリックしてCSSの格納場所にナビゲートします。いずれの方法を使用する場合も、CSSは必ずプロジェクト・ルートの下に配置してください。
「OK」をクリックして、CSSを作成します。
これで、CSSを「エディタ」ペインで開き、アプリケーション（具体的にはカスタマイズ可能コア・コンポーネント）に対してスタイルを定義できるようになります。カスタマイズ可能コア・コンポーネントのスタイル・セレクタの詳細は、9.3項「ポートレットおよびカスタマイズ可能コア・コンポーネントのスタイル・セレクタとアイコン・セレクタのスタイル定義の指定」を参照してください。
Oracle JDeveloperのコンテキスト外でCSSを作成する場合は、CSSをOracle JDeveloperプロジェクト・ルートに移動またはコピーする必要があります。これによって、アプリケーションのデプロイ時に、確実にCSSが他のプロジェクト・リソース・ファイルとともにパッケージ化されます。
外部で作成したCSSをプロジェクト・ルートに追加する手順は、次のとおりです。
コンピュータのファイル・システム内で、CSSをコピーします。
必ず、参照されるイメージ・ファイルおよびその他の依存リソースをコピーに含めるか、移動するかして、CSSと参照先リソースの間のリンク整合性を維持してください。
ファイル・システム内で、関連プロジェクト内の「Webコンテンツ」フォルダにナビゲートします。
次に例を示します。
<JDev_Home> jdev mywork <Application Name> <Project Name> Web Content
CSSおよびその他のリソースをここに貼り付けるか移動します。または、ファイル・システム階層内のこのレベルまたはその下に、スキンおよびそのリソースを格納するための別のフォルダを作成します。
スキンを登録するには、adf-faces-skins.xmlという名前のファイルを作成し、スキンのID、ファミリ、場所などを示すタグの短いリストをこのファイルに移入します。この項では、adf-faces-skins.xmlファイルの作成および移入の方法について説明します。
adf-faces-skins.xmlファイルを作成する手順は、次のとおりです。
アプリケーション・ナビゲータで、スキンを適用するアプリケーションに属するプロジェクト内の「WEB-INF」フォルダを右クリックし、ポップアップ・メニューから「新規」を選択します。
「新規ギャラリ」の「General」ノードで、「XML」を選択します。
|
注意: 「新規ギャラリ」の「General」ノードに「XML」オプションが表示されない場合は、「フィルタ方法」スコープを「すべてのテクノロジ」に拡張します。 |
右ペインで、「XML文書」を選択します。
「OK」をクリックします。
これにより、XMLファイルの作成ダイアログ・ボックスが表示されます。
「ファイル名」フィールドに、ファイル名adf-faces-skins.xmlを入力します。
「ディレクトリ名」フィールドに、ファイルを格納する場所のパスを入力するか、デフォルトを受け入れます。
ファイルはWEB-INFフォルダに格納する必要があります。
オプションで、「参照」ボタンをクリックし、格納場所にナビゲートします。
「OK」をクリックして、ファイルを作成します。
「エディタ」ペイン内に新しいファイルが開きます。
「エディタ」ペインで、スキンの登録に必要なタグを入力します。
例9-2に、移入されたadf-faces-skins.xmlファイルを示します。
例9-2 移入されたadf-faces-skins.xmlファイル
<?xml version="1.0" encoding="ISO-8859-1"?>
<skins xmlns="http://xmlns.oracle.com/adf/view/faces/skin">
<skin>
<id>mycompany.desktop</id>
<family>mycompany</family>
<render-kit-id>oracle.adf.desktop</render-kit-id>
<style-sheet-name>skins/mycompany/myCompanySkin.css</style-sheet-name>
</skin>
</skins>
表9-1に、このファイル内で使用するタグをリストして説明します。
作業を保存します。
表9-1 adf-faces-skins.xmlファイル内で使用されるタグ
| タグ | 説明 |
|---|---|
|
このタグは、すべてのスキンの指定を開いて閉じます。
<skins xmlns="http://xmlns.oracle.com/adf/view/faces/skin">
<skin>[skin specification]</skin>
</skins>
|
|
|
このタグは、特定のスキンの指定を開いて閉じます。登録する各スキンに、1つずつskinタグを入力します。条件によって異なるスキン（たとえば、デスクトップ・デプロイ用に1つと、PDAデプロイ用に1つ）を使用する場合は、複数のスキンを登録します。 |
|
|
Expression Language（EL）式内でスキンを参照するために使用します。たとえば、ロケールごとに異なるスキンを使用する場合は、IDに基づいて適切なスキンを選択するEL式を作成できます。 |
|
|
スキンが属するファミリを識別します。この値は、 |
|
|
スキンに使用するレンダリング・キットを指定します。次のうち1つを入力してください。
|
|
|
カスタム・スキンまたはCSSファイルのパスを、プロジェクト・ルートからの相対パスで定義します。プロジェクトにスキンが取り込まれない場合は、このURLが適切に指定されていない可能性があります。 |
|
|
（オプション）コンポーネントにテキストを表示するために使用される、リソース・バンドルの完全修飾名。これについては、この章では説明していません。詳細は、Oracle JDeveloperのオンライン・ヘルプを参照してください。 |
特定のスキンを使用するようにアプリケーションを設定するには、adf-faces-config.xmlファイル内でskin-family要素に値を指定します。
skin-family要素に値を指定する手順は、次のとおりです。
プロジェクトのWEB-INFフォルダ内にあるadf-faces-config.xmlファイルを開きます。
<skin-family>のデフォルト値を、使用するスキンのファミリ名か、スキンBeanを参照するExpression Language式で置き換えます。
この値は、同じくWEB-INFフォルダ内にあるadf-faces-skins.xmlファイル内で<family>タグと</family>タグの間にあります。たとえば、adf-faces-skins.xml内のfamilyタグが次のようになっているとします。
<family>mycompany</family>
この場合、adf-faces-config.xmlファイル内で次のように入力します。
<skin-family>mycompany</skin-family>
または
<skin-family>#{skinBean.currentSkin}</skin-family>
作業を保存します。
Oracle WebCenter Suiteに付属のカスタマイズ可能コア・コンポーネント（PanelCustomizableおよびShowDetailFrame）の外観は、各自のスタイル・セレクタを使用して制御できます。この項では、カスタマイズ可能コア・コンポーネントに関連付けられているスタイル・セレクタをリストして説明し、その例を示します。また、backgroundプロパティを使用して、カスタマイズ可能コンポーネントの3つのスキン定義済外観から1つを選択する方法を示します。
|
注意: ShowDetailFrameコンポーネントのスタイルを定義するだけでなく、ShowDetailFrameのスタイル・セレクタおよびアイコン・セレクタによってポートレットのスタイルも定義します。 |
スタイル・セレクタおよびアイコン・セレクタを使用するには、これらをCSSまたはスキンに追加し、必要なスタイル定義を行い、スキンをアプリケーションに追加します（9.2項「アプリケーションへのカスタム・スキンの適用」）。
この項の内容は、次のとおりです。
プロパティ・キーは、カスタム・メニュー・アイテムおよびコンポーネント・アクション・アイコンの表示を制御する場合に使用します。プロパティ・キーをカスタム・スキン内に含めても、スキンに基づいて生成されるCSS内にこれらのキーは反映されません。
つまり、スキンからプロセスを経て、CSSが生成されます。生成されたCSSは、アプリケーションによって消費されます。生成されたCSS内には、カスタマイズ可能コンポーネントのほとんどのスタイル・セレクタが反映されています。ただし、プロパティ・キーは例外です。プロパティ・キーは、他のコンポーネント・スタイル・セレクタと同様にアプリケーションに影響を与えますが、最終的な生成済CSS内には反映されません。
表9-2に、カスタマイズ可能コア・コンポーネントに関連するプロパティ・キーをリストして説明します。
表9-2 カスタマイズ可能コア・コンポーネントのプロパティ・キー
| プロパティ・キー | 説明 |
|---|---|
showDetailFrame {-ora-additional-actions-position-last:true}
|
このプロパティ・キーは、コンポーネントの「処理」メニューの生成済アクションの前または後に追加アクションを配置します。 生成済アクションの前に追加アクションを配置する場合は、 デフォルト値は |
showDetailFrame {-ora-menu-icon-display:false}
|
このプロパティ・キーは、 「処理」メニューの各アクションの左側にアイコンを表示する場合は、 デフォルト値は このプロパティ・キーが |
panelCustomizable {-ora-menu-icon-display:false}
|
このプロパティ・キーは、 「処理」メニューの各アクションの左側にアイコンを表示する場合は、 デフォルト値は このプロパティ・キーが |
グローバル・スタイル・セレクタは、アプリケーション内の複数のコンポーネントのスタイルを定義する場合に使用します。表9-3に、Oracle WebCenter Suiteコンポーネントに関連するグローバル・スタイル・セレクタをリストして説明します。
図9-1に、グローバル・スタイル・セレクタによってスタイル設定される要素を示します。
表9-3 グローバル・スタイル・セレクタ
| スタイル・セレクタ | 説明 |
|---|---|
.AFCUSTFrameComponentBorderBaseLight:alias .AFCUSTFrameComponentBorderBaseMedium:alias .AFCUSTFrameComponentBorderBaseDark:alias 例
.AFCUSTFrameComponentBorderBaseDark:alias
{
border-style:solid;
border-width:1px;
border-color:#979991;
}
|
コンポーネントの左、右および下側の境界線のスタイルを設定します。上側の境界線は含まれません。 注意: light、mediumおよびdarkの説明は、9.3.6項「ポートレットおよびカスタマイズ可能コア・コンポーネントへのカラー・スキームの適用」を参照してください。 |
.AFCUSTFrameComponentTopBorderBaseLight:alias .AFCUSTFrameComponentTopBorderBaseMedium:alias .AFCUSTFrameComponentTopBorderBaseDark:alias 例
.AFCUSTFrameComponentTopBorderBaseMedium:alias
{
border-style:solid;
border-width:1px;
border-color:#979991;
}
|
コンポーネントの上側の境界線のスタイルを設定します。 注意: light、mediumおよびdarkの説明は、9.3.6項「ポートレットおよびカスタマイズ可能コア・コンポーネントへのカラー・スキームの適用」を参照してください。 |
.AFCUSTFrameComponentHeaderBase:alias 例
.AFCUSTFrameComponentHeaderBase:alias
{
color:#333333;
vertical-align:top;
font-size:11px;
font-family:Tahoma;
font-weight:bold;
height:20px;
border-style:none;
}
|
コンポーネントのヘッダー・テキストのスタイルを設定します。 注意: コンポーネント・ヘッダーの背景色のスタイルを設定するには、コンポーネントの |
.AFCUSTFrameComponentContentBase:alias 例
.AFCUSTFrameComponentContentBase:alias
{
color:#333333;
vertical-align:top;
font-size:11px;
font-family:Tahoma;
font-weight:bold;
height:20px;
border-style:none;
}
|
コンポーネント内のコンテンツのスタイルを設定します。この中のborder-styleは、コンポーネントを囲む境界線とは別の、内部のコンテンツ境界線に対して指定されています。 |
.AFCUSTFrameComponentMenuGroupBase:alias 例
.AFCUSTFrameComponentMenuGroupBase:alias
{
font-family:Tahoma;
color:#003366;
font-size:11px;
}
|
コンポーネントのメイン・メニュー・コンテナのスタイルを設定します。 |
.AFCUSTFrameComponentMenuItemBase:alias 例
.AFCUSTFrameComponentMenuItemBase:alias
{
font-family:Tahoma;
color:#003366;
font-size:11px;
}
|
メニュー・アイテムのスタイルを設定します。 |
.AFCUSTFrameComponentMenuSeparatorBase:alias 例
.AFCUSTFrameComponentMenuSeparatorBase:alias
{
padding:0px 2px 0px 2px;
}
|
メニュー・アイテムのセパレータのスタイルを設定します。 |
表9-4にリストされているスタイル・セレクタは、ShowDetailFrameおよびポートレット・コンポーネントのスキンを設定する場合に使用します。
|
注意: WebCenterアプリケーションでは、各ポートレットはポートレット・クロムとともにレンダリングされます（14.2項「ポートレットの構造」を参照）。ポートレット・クロムは、ShowDetailFrameコンポーネントと同じクロム・レンダリング・メカニズムを共有します。このため、ShowDetailFrameに適用されるスタイル・セレクタおよびアイコン・セレクタがポートレット・クロムにも適用されます。つまり、ShowDetailFrameコンポーネントのスタイルを定義するだけでなく、ShowDetailFrameのスタイル・セレクタおよびアイコン・セレクタを使用して、ポートレットのスタイルを定義します。 |
表9-4では、一部のShowDetailFrameスタイル・セレクタにはカラー・スキーム・オプションとしてlight、mediumおよびdarkがあります。これらのオプションの詳細は、9.3.6項「ポートレットおよびカスタマイズ可能コア・コンポーネントへのカラー・スキームの適用」を参照してください。
図9-2では、要素の大部分がShowDetailFrameスタイル・セレクタによってスタイル設定されています。この図には、ヘッダー・アイコンの周りの領域を設定する、サブメニュー・コンテナ、サブメニュー・アイテム、マウスを置いたときに表示されるメニュー・アイテムとサブメニュー・アイテム、およびアクション・アイコン・セパレータは示されていません。ShowDetailFrameでは、contentスタイル・セレクタ（af|showDetailFrame::content-[light,medium,dark]）は、下側、左側および右側のコンポーネント境界線のスタイルを設定することに注意してください。これに対し、グローバル・スタイル・セレクタは、下側と左右の境界線を指定するセレクタと、上側の境界線のスタイル・セレクタを提供します。
表9-4 ShowDetailFrameのスタイル・セレクタ
| スタイル・セレクタ | 説明 |
|---|---|
af|showDetailFrame::header-top-border-light af|showDetailFrame::header-top-border-medium af|showDetailFrame::header-top-border-dark 例
af|showDetailFrame::header-top-border-medium
{
border-top:1px #6699CC solid;
border-bottom:1px #6699CC solid;
background-color:#F7F7E7;
}
|
コンポーネント・ヘッダーの上下の境界線のスタイルと、ヘッダーの背景色を指定します。 |
af|showDetailFrame::header-light af|showDetailFrame::header-medium af|showDetailFrame::header-dark 例
af|showDetailFrame::header-medium
{
color:#336699;
font-family:Arial,Geneva,sans-serif;
font-size:small;
font-weight:bold;
white-space:nowrap;
vertical-align:middle;
width:100%;
position:relative
}
|
コンポーネントのヘッダーのテキストのスタイルを指定します。ヘッダーは通常、タイトルと、メニューや他のアクション・タイプへのリンクが含まれる、色付きのバナーです。
|
af|showDetailFrame::content-light af|showDetailFrame::content-medium af|showDetailFrame::content-dark 例
af|showDetailFrame::content-dark
{
border-left:1px #6699CC solid;
border-right:1px #515151 solid;
border-bottom:1px #515151 solid;
position:relative;
width:100%
}
|
コンポーネントの左右および下側の境界線のスタイルを指定します。 |
af|showDetailFrame::main-menu-container 例
af|showDetailFrame::main-menu-container
{
background:#FFFFFF;
border-left:1px #969664 solid;
border-right:1px #515151 solid;
border-top:1px #969664 solid;
border-bottom:1px #515151 solid;
width:110px
}
|
コンポーネントのメイン・メニュー・コンテナのスタイルを指定します。 |
af|showDetailFrame::sub-menu-container 例
af|showDetailFrame::sub-menu-container
{
background:#FFFFFF;
border-left:1px #969664 solid;
border-right:1px #515151 solid;
border-top:1px #969664 solid;
border-bottom:1px #515151 solid;
}
|
コンポーネントのサブメニュー・コンテナのスタイルを指定します。 |
A.af|showDetailFrame::menu-item 例
A.af|showDetailFrame::menu-item
{
font-family:Arial,Geneva,sans-serif; font-weight:normal;
font-size:small;
color:#000000;
display:block;
cursor:pointer;
text-decoration:none; white-space:nowrap;
background:#FFFFFF;
padding-top:4px;
padding-bottom:3px;
padding-left:5px;
padding-right:5px;
width:100%
}
|
コンポーネントのメイン・メニューの各アイテムのスタイルを指定します。 |
A:hover.af|showDetailFrame::menu-item 例
A:hover.af|showDetailFrame::menu-item
{
background-color:#CCCC99
}
|
ユーザーがコンポーネントのメイン・メニュー・アイテムにマウス・ポインタを置いたときにレンダリングされるスタイルを指定します。 |
A.af|showDetailFrame::sub-menu-item 例
A.af|showDetailFrame::sub-menu-item
{
font-family:Arial,Geneva,sans-serif; font-weight:normal;
font-size:small;
color:#000000;
display:block;
cursor:pointer;
text-decoration:none; white-space:nowrap;
background:#FFFFFF;
padding-top:4px;
padding-bottom:3px;
padding-left:5px;
padding-right:5px;
width:100%
}
|
コンポーネントのサブメニューの各アイテムのスタイルを指定します。 |
A:hover.af|showDetailFrame::sub-menu-item 例
A:hover.af|showDetailFrame::sub-menu-item
{
background-color:#CCCC99
}
|
ユーザーがコンポーネントのサブ・メニュー・アイテムにマウス・ポインタを置いたときにレンダリングされるスタイルを指定します。 |
af|showDetailFrame::actions-image-separator 例
af|showDetailFrame::actions-image-separator
{
padding-right:5px;
padding-top:1px;
padding-bottom:1px
}
|
コンポーネントの「処理」、「最小化」および「リストア」アイコンの周りのパディングのサイズを指定します。 9.3.5項「カスタマイズ可能コア・コンポーネントのアイコン・セレクタ」も参照してください。 |
af|showDetailFrame::menu-item-separator 例
af|showDetailFrame::menu-item-separator
{
border-top:1px solid #969664;
border-bottom:1px solid #515151;
margin:4px 2px
}
|
コンポーネントの「処理」メニューのコマンドまたはコマンド・グループを区切る線のスタイルを指定します。 デフォルトでは、セパレータは1本の太い線として表示されます。これを設定するには、 |
A.af|showDetailFrame::title-clickable 例
A.af|showDetailFrame::title-clickable
{
font-family:Arial,Geneva,sans-serif;
font-size:small;
font-weight:bold;
text-decoration:none;
display:block;color:#336699;
margin-left:5px
}
|
コンポーネントのタイトルがリンクになっているときに、そのタイトルに対してレンダリングされるスタイルを指定します。 |
af|showDetailFrame::no-header-content-light af|showDetailFrame::no-header-content-medium af|showDetailFrame::no-header-content-dark 例
af|showDetailFrame::no-header-content-medium
{
border-left:1px #6699CC solid;
border-right:1px #515151 solid;
border-bottom:1px #515151 solid;
border-top:1px #6699CC solid;
position:relative;
width:100%
}
|
コンポーネント・ヘッダーが無効になっているときに4つのコンポーネント境界線すべてに対してレンダリングされるスタイルを指定します。 |
表9-5にリストされているスタイル・セレクタは、PanelCustomizableコンポーネントのスキンを設定する場合に使用します。PanelCustomizableコンポーネントに関連するアイコン・セレクタについては、9.3.5項「カスタマイズ可能コア・コンポーネントのアイコン・セレクタ」を参照してください。
表9-5では、一部のスタイル・セレクタには3つのカラー・スキーム選択項目（light、mediumおよびdark）があることがわかります。これらの選択項目の詳細は、9.3.6項「ポートレットおよびカスタマイズ可能コア・コンポーネントへのカラー・スキームの適用」を参照してください。
図9-3では、要素の大部分がPanelCustomizableスタイル・セレクタによってスタイル設定されています。この図には、サブメニュー・コンテナ、サブメニュー・アイテム、およびマウスを置いたときに表示されるメニュー・アイテムとサブメニュー・アイテムは示されていません。PanelCustomizableでは、contentスタイル・セレクタ（af|panelCustomizable::content-[light,medium,dark]）は、下側、左側および右側のコンポーネント境界線のスタイルを設定することに注意してください。これに対し、グローバル・スタイル・セレクタは、下側と左右の境界線を指定するセレクタと、上側の境界線のスタイル・セレクタを提供します。
図9-3 PanelCustomizableのスタイル・セレクタによってスタイル設定される要素
表9-5 PanelCustomizableのスタイル・セレクタ
| スタイル・セレクタ | 説明 |
|---|---|
af|panelCustomizable::header-top-border-light af|panelCustomizable::header-top-border-medium af|panelCustomizable::header-top-border-dark 例
af|panelCustomizable::header-top-border-medium
{
border-top:1px #6699CC solid;
border-bottom:1px #6699CC solid;
background-color:#F7F7E7;
background-image:url(/<path>/setJoin.gif);
}
|
コンポーネント・ヘッダーの上下の境界線のスタイルと、ヘッダーの背景色を指定します。 |
af|panelCustomizable::header-light af|panelCustomizable::header-medium af|panelCustomizable::header-dark 例
af|panelCustomizable::header-medium
{
color:#336699;
font-family:Arial,Geneva,sans-serif;
font-size:small;
font-weight:bold;
white-space:nowrap;
vertical-align:middle;
width:100%;
position:relative
}
|
コンポーネントのヘッダーのテキストのスタイルを指定します。ヘッダーは通常、タイトルと、メニューや他のアクション・タイプへのリンクが含まれる、色付きのバナーです。
|
af|panelCustomizable::content-light af|panelCustomizable::content-medium af|panelCustomizable::content-dark 例
af|panelCustomizable::content-light
{
border-left:1px #6699CC solid;
border-right:1px #515151 solid;
border-bottom:1px #515151 solid;
position:relative;
width:100%
}
|
コンポーネントの左右および下側の境界線のスタイルを指定します。 |
af|panelCustomizable::main-menu-container 例
af|panelCustomizable::main-menu-container
{
background:#FFFFFF;
border-left:1px #969664 solid;
border-right:1px #515151 solid;
border-top:1px #969664 solid;
border-bottom:1px #515151 solid;
width:110px
}
|
コンポーネントのメイン・メニュー・コンテナのスタイルを指定します。 |
af|panelCustomizable::sub-menu-container 例
af|panelCustomizable::sub-menu-container
{
background:#FFFFFF;
border-left:1px #969664 solid;
border-right:1px #515151 solid;
border-top:1px #969664 solid;
border-bottom:1px #515151 solid;
}
|
コンポーネントのサブメニュー・コンテナのスタイルを指定します。 |
A.af|panelCustomizable::menu-item 例
A.af|panelCustomizable::menu-item
{
font-family:Arial,Geneva,sans-serif; font-weight:normal;
font-size:small;
color:#000000;
display:block;
cursor:pointer;
text-decoration:none; white-space:nowrap;
background:#FFFFFF;
padding-top:4px;
padding-bottom:3px;
padding-left:5px;
padding-right:5px;
width:100%
}
|
コンポーネントのメイン・メニューの各アイテムのスタイルを指定します。 |
A:hover.af|panelCustomizable::menu-item 例
A:hover.af|panelCustomizable::menu-item
{
background-color:#CCCC99
}
|
ユーザーがメイン・メニュー・アイテムにマウス・ポインタを置いたときにレンダリングされるスタイルを指定します。 |
A.af|panelCustomizable::sub-menu-item 例
A.af|panelCustomizable::sub-menu-item
{
font-family:Arial,Geneva,sans-serif; font-weight:normal;
font-size:small;
color:#000000;
display:block;
cursor:pointer;
text-decoration:none; white-space:nowrap;
background:#FFFFFF;
padding-top:4px;
padding-bottom:3px;
padding-left:5px;
padding-right:5px;
width:100%
}
|
サブメニューの各アイテムのスタイルを指定します。 |
A:hover.af|panelCustomizable::sub-menu-item 例
A:hover.af|panelCustomizable::sub-menu-item
{
background-color:#CCCC99
}
|
ユーザーがサブ・メニュー・アイテムにマウス・ポインタを置いたときにレンダリングされるスタイルを指定します。 |
af|panelCustomizable::actions-image-separator 例
af|panelCustomizable::actions-image-separator
{
padding-right:5px;
padding-top:1px;
padding-bottom:1px
}
|
コンポーネントの「処理」、「最小化」および「リストア」アイコンの周りのパディングのサイズを指定します。 9.3.5項「カスタマイズ可能コア・コンポーネントのアイコン・セレクタ」も参照してください。 |
af|panelCustomizable::menu-item-separator 例
af|panelCustomizable::menu-item-separator
{
border-top:1px solid #969664;
border-bottom:1px solid #515151;
margin:4px 2px
}
|
コンポーネントの「処理」メニューのコマンドまたはコマンド・グループを区切る線のスタイルを指定します。 |
af|panelCustomizable::no-header-content 例
af|panelCustomizable::no-header-content
{
border-left:1px #6699CC solid;
border-right:1px #515151 solid;
border-bottom:1px #515151 solid;
border-top:1px #6699CC solid;
position:relative;
width:100%
}
|
コンポーネント・ヘッダーが無効になっているときに4つのコンポーネント境界線すべてに対してレンダリングされるスタイルを指定します。 |
表9-6に示すセレクタは、カスタマイズ可能コア・コンポーネントで使用されるアイコンに適用されます。アイコンが表示されるかどうかは、コンポーネントのora-menu-icon-displayプロパティ・キーがtrueかfalseのどちらに設定されているかで決まります。プロパティ・キーについては、9.3.1項「カスタマイズ可能コア・コンポーネントのプロパティ・キー」を参照してください。
各アイコン・セレクタには、light、mediumおよびdarkのスキームがあります。これらのカラー・スキームの詳細は、9.3.6項「ポートレットおよびカスタマイズ可能コア・コンポーネントへのカラー・スキームの適用」を参照してください。
エラーなく簡単に移入するには、すべてのアプリケーションをWebCenterアプリケーションのルート・フォルダの下に格納してください。
|
注意: WebCenterアプリケーションでは、各ポートレットはポートレット・クロムとともにレンダリングされます（14.2項「ポートレットの構造」を参照）。ポートレット・クロムは、ShowDetailFrameコンポーネントと同じポートレット・クロム・レンダリング・メカニズムを共有します。このため、ShowDetailFrameに適用されるスタイル・セレクタおよびアイコン・セレクタがポートレット・クロムにも適用されます。つまり、ShowDetailFrameコンポーネントのスタイルを定義するだけでなく、ShowDetailFrameのスタイル・セレクタおよびアイコン・セレクタを使用して、ポートレットのスタイルを定義します。 |
表9-6 カスタマイズ可能コア・コンポーネントのアイコン・セレクタ
| セレクタ | 説明 |
|---|---|
|
showDetailFrame::light-ActionsIcon:alias showDetailFrame::medium-ActionsIcon:alias showDetailFrame::dark-ActionsIcon:alias 例
showDetailFrame::light-ActionsIcon:alias
{
content:url(/css/images/action.gif)
}
panelCustomizable::light-ActionsIcon:alias panelCustomizable::medium-ActionsIcon:alias panelCustomizable::dark-ActionsIcon:alias 例
panelCustomizable::dark-ActionsIcon:alias
{
content:url(/css/images/action.gif)
}
|
このアイコンは、「処理」メニューを表します。「処理」メニューには、ユーザーがコンポーネントに対して実行できるアクションがリストされます。 WebCenterアプリケーションでは、「処理」アイコンは、コンポーネント・ヘッダーの右隅にレンダリングされます。 |
|
showDetailFrame::light-MinimizeIcon:alias showDetailFrame::medium-MinimizeIcon:alias showDetailFrame::dark-MinimizeIcon:alias 例
showDetailFrame::light-MinimizeIcon:alias
{
content:url(/css/images/minimize.gif)
}
panelCustomizable::light-MinimizeIcon:alias panelCustomizable::medium-MinimizeIcon:alias panelCustomizable::dark-MinimizeIcon:alias 例
panelCustomizable::medium-MinimizeIcon:alias
{
content:url(/css/images/minimize.gif)
}
|
このアイコンは、「最小化」オプションを表します。「最小化」を選択すると、コンポーネントのビューがウィンドウの陰影のように閉じます。 WebCenterアプリケーションでは、「最小化」アイコンは、コンポーネント・ヘッダーの左側にレンダリングされます。 「 |
showDetailFrame::light-MaximizeIcon:alias showDetailFrame::medium-MaximizeIcon:alias showDetailFrame::dark-MaximizeIcon:alias 例
showDetailFrame::medium-MaximizeIcon:alias
{
content:url(/css/images/maximize.gif)
}
|
このアイコンは、 WebCenterアプリケーションでは、「最大化」アイコンは、コンポーネントの「処理」メニューの「最大化」コマンドの左側に表示されます。 |
panelCustomizable::light-MaximizeIcon:alias panelCustomizable::medium-MaximizeIcon:alias panelCustomizable::dark-MaximizeIcon:alias 例
panelCustomizable::dark-MaximizeIcon:alias
{
content:url(/css/images/maximize.gif)
}
|
このアイコンは、コンポーネント表示をコンテナのディメンションに拡大する「最大化」オプションを表します。同じコンテナ内の複数のコンポーネントが表示されている場合は、コンポーネントを最大化すると、他のコンポーネントは別の場所に移動されます。 WebCenterアプリケーションでは、「最大化」アイコンは、コンポーネントの「処理」メニューの「最大化」コマンドの左側に表示されます。 |
|
showDetailFrame::light-RestoreIcon:alias showDetailFrame::medium-RestoreIcon:alias showDetailFrame::dark-RestoreIcon:alias 例
showDetailFrame::medium-RestoreIcon:alias
{
content:url(/css/images/restore.gif)
}
panelCustomizable::light-RestoreIcon:alias panelCustomizable::medium-RestoreIcon:alias panelCustomizable::dark-RestoreIcon:alias 例
panelCustomizable::dark-RestoreIcon:alias
{
content:url(/css/images/restore.gif)
}
|
このアイコンは、最大化されたビューをデフォルトの表示モードに戻す「リストア」オプションを表します。 WebCenterアプリケーションでは、「リストア」アイコンは、コンポーネントの「処理」メニューの「リストア」コマンドの左側にレンダリングされます。 |
|
showDetailFrame::light-ExpandIcon:alias showDetailFrame::medium-ExpandIcon:alias showDetailFrame::dark-ExpandIcon:alias 例
showDetailFrame::medium-ExpandIcon:alias
{
content:url(/css/images/expand.gif)
}
panelCustomizable::light-ExpandIcon:alias panelCustomizable::medium-ExpandIcon:alias panelCustomizable::dark-ExpandIcon:alias 例
panelCustomizable::dark-ExpandIcon:alias
{
content:url(/css/images/expand.gif)
}
|
「開く」アイコンは、最小化されているコンポーネントを開くアクションを表します。「開く」アイコンは、「最小化」アイコンと切り替わります。つまり、コンポーネントが最小化されている場合は「開く」アイコンが表示され、コンポーネントが開かれている場合は「最小化」アイコンが表示されます。 WebCenterアプリケーションでは、「開く」アイコンは、コンポーネント・ヘッダーの左側に表示されます。 |
|
showDetailFrame::light-MoveIcon:alias showDetailFrame::medium-MoveIcon:alias showDetailFrame::dark-MoveIcon:alias 例
showDetailFrame::light-MoveIcon:alias
{
content:url(/css/images/move.gif)
}
panelCustomizable::light-MoveIcon:alias panelCustomizable::medium-MoveIcon:alias panelCustomizable::dark-MoveIcon:alias 例
af|panelCustomizable::dark-MoveIcon:alias
{
content:url(/css/images/move.gif)
}
|
このアイコンは、ページ上の他のコンポーネントからの相対的なコンポーネント位置を変更できる、「移動」オプションを表します。 WebCenterアプリケーションでは、「移動」アイコンは、コンポーネントの「処理」メニューの「移動」コマンドの左側に表示されます。 |
|
showDetailFrame::light-MoveLeftIcon:alias showDetailFrame::medium-MoveLeftIcon:alias showDetailFrame::dark-MoveLeftIcon:alias 例
showDetailFrame::dark-MoveLeftIcon:alias
{
content:url(/css/images/left.gif)
}
panelCustomizable::light-MoveLeftIcon:alias panelCustomizable::medium-MoveLeftIcon:alias panelCustomizable::dark-MoveLeftIcon:alias 例
panelCustomizable::light-MoveLeftIcon:alias
{
content:url(/css/images/left.gif)
}
|
このアイコンは、コンポーネント・サブメニューの「左へ移動」オプションを表します。「左へ移動」を選択すると、コンポーネントがページの左境界線に向かって水平に1ポジション移動します。たとえば、水平に並んだ3つのコンポーネントがあるとします。一番右のコンポーネントに対して「左へ移動」を選択します。すると、このコンポーネントが中央のコンポーネントになります。 WebCenterアプリケーションでは、「左へ移動」アイコンは、コンポーネントの「処理」メニューの「左へ移動」サブメニュー・アイテムの左側に表示されます。 |
|
showDetailFrame::light-MoveRightIcon:alias showDetailFrame::medium-MoveRightIcon:alias showDetailFrame::dark-MoveRightIcon:alias 例
showDetailFrame::medium-MoveRightIcon:alias
{
content:url(/css/images/right.gif)
}
panelCustomizable::light-MoveRightIcon:alias panelCustomizable::medium-MoveRightIcon:alias panelCustomizable::dark-MoveRightIcon:alias 例
panelCustomizable::medium-MoveRightIcon:alias
{
content:url(/css/images/right.gif)
}
|
このアイコンは、コンポーネント・サブメニューの「右へ移動」オプションを表します。「右へ移動」を選択すると、コンポーネントがページの右境界線に向かって水平に1ポジション移動します。たとえば、水平に並んだ3つのコンポーネントがあるとします。一番左のコンポーネントに対して「右へ移動」を選択します。すると、このコンポーネントが中央のコンポーネントになります。 WebCenterアプリケーションでは、「右へ移動」アイコンは、コンポーネントの「処理」メニューの「右へ移動」サブメニュー・アイテムの左側に表示されます。 |
|
showDetailFrame::light-MoveUpIcon:alias showDetailFrame::medium-MoveUpIcon:alias showDetailFrame::dark-MoveUpIcon:alias 例
showDetailFrame::light-MoveUpIcon:alias
{
content:url(/css/images/up.gif)
}
panelCustomizable::light-MoveUpIcon:alias panelCustomizable::medium-MoveUpIcon:alias panelCustomizable::dark-MoveUpIcon:alias 例
panelCustomizable::medium-MoveUpIcon:alias
{
content:url(/css/images/up.gif)
}
|
このアイコンは、コンポーネント・サブメニューの「上へ移動」オプションを表します。「上へ移動」を選択すると、ページ上の他のコンポーネントからの相対的なコンポーネント位置が垂直に移動します。たとえば、垂直に並んだ3つのコンポーネントがあるとします。中央のコンポーネントに対して「上へ移動」を選択します。すると、このコンポーネントが一番上のコンポーネントになります。 WebCenterアプリケーションでは、「上へ移動」アイコンは、コンポーネントの「処理」メニューの「上へ移動」サブメニュー・アイテムの左側に表示されます。 |
|
showDetailFrame::light-MoveDownIcon:alias showDetailFrame::medium-MoveDownIcon:alias showDetailFrame::dark-MoveDownIcon:alias 例
showDetailFrame::dark-MoveDownIcon:alias
{
content:url(/css/images/down.gif)
}
panelCustomizable::light-MoveDownIcon:alias panelCustomizable::medium-MoveDownIcon:alias panelCustomizable::dark-MoveDownIcon:alias 例
panelCustomizable::medium-MoveDownIcon:alias
{
content:url(/css/images/down.gif)
}
|
このアイコンは、コンポーネント・サブメニューの「下へ移動」オプションを表します。「下へ移動」を選択すると、ページ上の他のコンポーネントからの相対的なコンポーネント位置が垂直に移動します。たとえば、垂直に並んだ3つのコンポーネントがあるとします。中央のコンポーネントに対して「下へ移動」を選択します。すると、このコンポーネントが一番下のコンポーネントになります。 WebCenterアプリケーションでは、「下へ移動」アイコンは、コンポーネントの「処理」メニューの「下へ移動」サブメニュー・アイテムの左側に表示されます。 |
|
showDetailFrame::light-HeaderLeftIcon:alias showDetailFrame::medium-HeaderLeftIcon:alias showDetailFrame::dark-HeaderLeftIcon:alias 例
showDetailFrame::light-HeaderLeftIcon:alias
{
content:url(/css/images/headerleft.gif)
}
panelCustomizable::light-HeaderLeftIcon:alias panelCustomizable::medium-HeaderLeftIcon:alias panelCustomizable::dark-HeaderLeftIcon:alias 例
panelCustomizable::medium-HeaderLeftIcon:alias
{
content:url(/css/images/headerleft.gif)
}
|
このアイコンは、コンポーネント・ヘッダーの左上隅にイメージを提供します。 |
|
showDetailFrame::light-HeaderRightIcon:alias showDetailFrame::medium-HeaderRightIcon:alias showDetailFrame::dark-HeaderRightIcon:alias 例
showDetailFrame::light-HeaderRightIcon:alias
{
content:url(/css/images/headerright.gif)
}
panelCustomizable::light-HeaderRightIcon:alias panelCustomizable::medium-HeaderRightIcon:alias panelCustomizable::dark-HeaderRightIcon:alias 例
panelCustomizable::medium-HeaderRightIcon:alias
{
content:url(/css/images/headerright.gif)
}
|
このアイコンは、コンポーネント・ヘッダーの右上隅にイメージを提供します。 |
|
showDetailFrame::light-ToolbarLeftIcon:alias showDetailFrame::medium-ToolbarLeftIcon:alias showDetailFrame::dark-ToolbarLeftIcon:alias 例
showDetailFrame::dark-ToolbarLeftIcon:alias
{
content:url(/css/images/toolbarleft.gif)
}
panelCustomizable::light-ToolbarLeftIcon:alias panelCustomizable::medium-ToolbarLeftIcon:alias panelCustomizable::dark-ToolbarLeftIcon:alias 例
panelCustomizable::light-ToolbarLeftIcon:alias
{
content:url(/css/images/toolbarleft.gif)
}
|
このアイコンは、コンポーネントのフェードイン/フェードアウト・ツールバーの左部分を提供します。 フェードイン/フェードアウト・ツールバーは、 このツールバーには、本来はヘッダーに表示される「処理」メニューが含まれています。このツールバーを起動するには、ユーザーがコンポーネント・コンテンツ領域にマウスを置きます。 ページ設計が非常に単純であると、 |
|
showDetailFrame::light-ToolbarRightIcon:alias showDetailFrame::medium-ToolbarRightIcon:alias showDetailFrame::dark-ToolbarRightIcon:alias 例
showDetailFrame::medium-ToolbarRightIcon:alias
{
content:url(/css/images/toolbarright.gif)
}
panelCustomizable::light-ToolbarRightIcon:alias panelCustomizable::medium-ToolbarRightIcon:alias panelCustomizable::dark-ToolbarRightIcon:alias 例
panelCustomizable::dark-ToolbarRightIcon:alias
{
content:url(/css/images/toolbarright.gif)
}
|
このアイコンは、コンポーネントのフェードイン/フェードアウト・ツールバーの右部分を提供します。 フェードイン/フェードアウト・ツールバーの詳細は、 |
|
showDetailFrame::light-ToolbarCenterIcon:alias showDetailFrame::medium-ToolbarCenterIcon:alias showDetailFrame::dark-ToolbarCenterIcon:alias 例
showDetailFrame::medium-ToolbarCenterIcon:alias
{
content:url(/css/images/toolbarcenter.gif)
}
panelCustomizable::light-ToolbarCenterIcon:alias panelCustomizable::medium-ToolbarCenterIcon:alias panelCustomizable::dark-ToolbarCenterIcon:alias 例
panelCustomizable::dark-ToolbarCenterIcon:alias
{
content:url(/css/images/toolbarcenter.gif)
}
|
このアイコンは、コンポーネントのフェードイン/フェードアウト・ツールバーの中央部分を提供します。 フェードイン/フェードアウト・ツールバーの詳細は、 |
|
showDetailFrame::light-EditIcon:alias showDetailFrame::medium-EditIcon:alias showDetailFrame::dark-EditIcon:alias 例
showDetailFrame::dark-EditIcon:alias
{
content:url(/css/images/edit.gif)
}
panelCustomizable::light-EditIcon:alias panelCustomizable::medium-EditIcon:alias panelCustomizable::dark-EditIcon:alias 例
panelCustomizable::light-EditIcon:alias
{
content:url(/css/images/edit.gif)
}
|
このアイコンは、コンポーネント・メニューの「編集」オプションを表します。WebCenterアプリケーションでは、「編集」アイコンは、コンポーネントの「処理」メニューの「編集」メニュー・アイテムの左側に表示されます。 |
|
showDetailFrame::light-HelpIcon:alias showDetailFrame::medium-HelpIcon:alias showDetailFrame::dark-HelpIcon:alias 例
showDetailFrame::dark-HelpIcon:alias
{
content:url(/css/images/help.gif)
}
panelCustomizable::light-HelpIcon:alias panelCustomizable::medium-HelpIcon:alias panelCustomizable::dark-HelpIcon:alias 例
panelCustomizable::light-HelpIcon:alias
{
content:url(/css/images/help.gif)
}
|
このアイコンは、コンポーネント・メニューの「ヘルプ」オプションを表します。WebCenterアプリケーションでは、「ヘルプ」アイコンは、コンポーネントの「処理」メニューの「ヘルプ」メニュー・アイテムの左側に表示されます。 |
CSSまたはスキン内に3つの固有の外観を定義し、Oracle JDeveloperのプロパティ・インスペクタのbackgroundプロパティを介して、使用するいずれかの外観を指定できます。
|
注意: ShowDetailFrameコンポーネントのスタイルを定義するだけでなく、ShowDetailFrameのスタイル・セレクタおよびアイコン・セレクタを使用して、ポートレットのスタイルを定義します。 |
ポートレット、PanelCustomizableおよびShowDetailFrameコンポーネントには、backgroundプロパティが含まれます。このプロパティには、light、mediumまたはdarkの値を選択できます。デフォルト・スキン（Oracle、MinimalおよびSimple）には、3バージョンのスタイル・セレクタ（lightバージョン、mediumバージョンおよびdarkバージョン）が含まれます。コンポーネントまたはポートレット・インスタンスのbackgroundプロパティに指定された値に応じて、スキンは関連するスタイルまたはアイコン・セレクタ・バージョンを適用します。
同じ原則が、カスタム・スキンに対しても適用されます。たとえば、カスタム・スキンを作成し、af|showDetailFrame::header-top-borderスタイル・セレクタのlight、mediumおよびdarkバージョンを定義したとします。
af|showDetailFrame::header-top-border-light af|showDetailFrame::header-top-border-medium af|showDetailFrame::header-top-border-dark
アプリケーション・ページに3つのポートレットがあるとします。1つ目のポートレットのbackgroundプロパティの値としてlightを、2つ目のポートレットのbackgroundプロパティにmediumを、3つ目のポートレットのbackgroundプロパティにdarkを選択します。この場合、実行時に、スキンは次の方法でスタイル定義を適用します。
1つ目のポートレットにaf|showDetailFrame::header-top-border-lightを適用します。
2つ目のポートレットにaf|showDetailFrame::header-top-border-mediumを適用します。
3つ目のポートレットにaf|showDetailFrame::header-top-border-darkを適用します。
light、mediumおよびdarkという語は、明るさや暗さという観点で必ずしも意味を持つものではありません。各バージョン（light、mediumおよびdark）は、固有の色を使用して定義できます。たとえば、特定のスタイル・セレクタについて、lightバージョンは緑を使用して、mediumバージョンは赤を使用して、darkバージョンは黄色を使用して定義できます。light、mediumおよびdarkという語は、単に区別するためのものです。
3つのスタイル・オプションをサポートしているセレクタに対してこれらのオプションを使用してCSSまたはスキンを使用し、コンポーネントのbackgroundプロパティを設定して、特定のインスタンスに適用するオプションを指定します。
Oracle Technology Networkは、Oracle ADF Facesコンポーネントのスキニングに使用できるセレクタに関する有用な情報源を提供しています。次の記事に、Oracle ADF Facesを介して提供されるスタイル・セレクタの多くがリストされ、説明されています。
http://www.oracle.com/technology/products/jdev/htdocs/partners/addins/exchange/jsf/doc/skin-selectors.html
|
注意: カスタマイズ可能コア・コンポーネントのPanelCustomizableおよびShowDetailFrameは、このリリースで初めて導入されたものであり、Oracle JDeveloperのWebCenter Suite拡張要素に固有のコンポーネントなので、この記事には記載されていません。 |
「Developing and Using Oracle ADF Faces Skins」という記事には、Oracle、MinimalおよびSimpleスキンが含まれるWARファイルへのリンクがあり、これらのスキンをサンプル・ページに適用するプロセスが順に示されています。この記事には、例を実際に活用しながら、WARファイルからアプリケーションを作成する方法を説明しています。この記事は、次のURLにあります。
http://www.oracle.com/technology/products/jdev/101/howtos/adfskins
|
注意: Internet Explorerを使用してWARファイルをダウンロードするには、次のサイトにアクセスしてください。
|
ポートレットおよびカスタマイズ可能コア・コンポーネントのルック・アンド・フィールは、スタイル関連プロパティInlineStyle、ContentInlineStyleおよびStyleClassを変更することによって上書きできます。Oracle JDeveloperのプロパティ・インスペクタを介して指定したスタイルは、アプリケーションのスキンまたはスタイルシート（CSS）内に指定されている対応するスタイルを上書きします。また、ポートレットまたはコンポーネント・インスタンスに設定されているプロパティは、ポートレットまたはコンポーネントのそのインスタンスのみに影響します。アプリケーション内のその他のポートレットまたはコンポーネント・インスタンスは、影響を受けません。
|
注意: backgroundプロパティは、ポートレットおよびカスタマイズ可能コア・コンポーネントのルック・アンド・フィールを調整する際にも便利です。InlineStyle、ContentInlineStyleおよびStyleClassプロパティとは異なり、backgroundプロパティはスキンまたはCSSと関連して機能します。backgroundプロパティの詳細は、9.3.6項「ポートレットおよびカスタマイズ可能コア・コンポーネントへのカラー・スキームの適用」を参照してください。 |
この項では、スタイル関連プロパティとその使用方法について説明します。この項の内容は、次のとおりです。
スタイル関連プロパティを使用する前に、スタイル関連プロパティについてよく理解しておく必要があります。この項では、いくつかのスタイル関連プロパティを比較し、それらの使用例を示します。この項の内容は、次のとおりです。
スタイル・プロパティのInlineStyleとContentInlineStyleは、サポートする属性のタイプが類似しています。これらのプロパティの違いは、影響の範囲です。InlineStyleがコンポーネント全体のスタイル情報を提供するのに対し、ContentInlineStyleはコンポーネント・コンテンツのみのスタイル情報を提供します。
たとえば、InlineStyleプロパティを使用してbackground-color属性を設定した場合、コンポーネントとそのコンテンツが、指定した色で設定されます。しかし、ContentInlineStyleプロパティに別の背景色を設定した場合、コンポーネント・ヘッダーはInlineStyleの色でスタイル設定されますが、コンポーネント・コンテンツはContentInlineStyleの色でスタイル設定されます。
つまり、コンポーネント・コンテンツについては、ContentInlineStyleに指定した値が、InlineStyleに指定した値よりも優先されます。また、コンポーネント・インスタンスについては、ContentInlineStyleが、親コンポーネント（PanelCustomizableコンポーネント内にネストされたポートレットなど）のInlineStyle値とContentInlineStyle値のいずれにも優先されます。
例9-3に示すように、ContentInlineStyleを使用してポートレットの境界線を無効化できます（InlineStyleではできません）。
例9-3 ポートレット境界線の無効化
border-style:none; /*in the Property Inspector*/ contentInlineStyle="border-style:none;" /*in the adfp:portlet tag*/
プロパティ・インスペクタでは、InlineStyleによって、値を指定できるスタイル属性のリストが提供されます。ContentInlineStyleでは、この属性リストは提供されません。ContentInlineStyleとInlineStyleのいずれでも、スタイル属性の手動入力がサポートされています。これには、プロパティ・インスペクタでリストされた属性スコープ外の属性が含まれます（これらの属性が少なくともCSS 2.0に準拠している場合）。図9-4では、プロパティ・インスペクタでスタイル関連プロパティが追加されています。
図9-4 プロパティ・インスペクタでのContentInlineStyleおよびInlineStyleのスタイルの定義
例9-4に、adfp:portletタグ内でのこのような属性の書式を示します。
例9-4 adfp:portletタグ内でのスタイルの指定
<adfp:portlet value="#{bindings.RichTextPortlet1_1}"
portletType="/oracle/adf/portlet/RTPWSRP2_1157051886703/ap/E0default_65adffff_
010d_1000_800c_8d9049ad9bf7"
inlineStyle="border-color:rgb(0,0,0); border-style:dotted;"
contentInlineStyle="background-color:rgb(0,255,255);
background-repeat:repeat;"/>
InlineStyleにExpression Language（EL）式を使用して、インライン・スタイル属性を条件付きで設定することもできます。例9-5に、1つのアプローチを示します。
StyleClassプロパティは、スキンまたはCSS内に指定されたスタイルを上書きする手段と、無関係なスタイル・クラスをコンポーネントに適用する方法を提供します。たとえば、StyleClassプロパティを使用すると、PanelCustomizableスタイル・クラスをShowDetailFrameコンポーネントに適用できます。
StyleClassプロパティを使用してスキンのスタイルを上書きすることは、アクセシビリティのガイドラインに準拠しながら、スタイル・プロパティを使用してルック・アンド・フィールを操作するための1つの方法です。InlineStyleとContentInlineStyleは、ガイドラインに準拠しているとはみなされません。
スタイル・クラスは、スタイル・セレクタとは異なる方法で表されます。スタイル・セレクタがプロパティ・インスペクタでスタイル・クラスとして表示されるとき、またはソース・コード・タグ内に表示されるとき、スタイル・セレクタ内のパイプ（|）およびダブルコロン（::）はアンダースコアに置き換えられます。
スキン内では、スタイル・セレクタは例9-6のように記述できます。
コンポーネント・タグ内では、同じスタイル・セレクタがスタイル・クラスとして例9-7のように表されます。
例9-7 ソース・コード内でスタイル・クラスとして記述されたスタイル・セレクタ
<cust:showDetailFrame id="showDetailFrame1"
text="showDetailFrame 1"
binding="#{backing_untitled1.showDetailFrame1}"
styleClass="af_panelCustomizable_no-headercontent">
プロパティ・インスペクタでは、これは例9-8に示すように表されます。
|
注意: アイコン・セレクタは、スタイル・クラスとして使用されません。カスタマイズ可能コア・コンポーネントのスタイル・セレクタのリストは、9.3項「ポートレットおよびカスタマイズ可能コア・コンポーネントのスタイル・セレクタとアイコン・セレクタのスタイル定義の指定」を参照してください。 |
また、StyleClassプロパティを使用すると、複数のスタイル・クラスを入力できます。各スタイル・クラスは空白で区切ります。スタイル・クラスの入力は、手動で（つまりソース・コード内で）行うことも、プロパティ・インスペクタを使用することもできます。
プロパティ・インスペクタには、コンポーネントに適用するスタイル・クラスのリストを入力および並べ替えるための「styleClass」ダイアログ・ボックスが備わっています。このダイアログ・ボックスにアクセスするには、プロパティ・インスペクタでStyleClassプロパティの隣の「編集」アイコンをクリックします。
プロパティ値を変更するには、Oracle JDeveloperのプロパティ・インスペクタを使用します。
ポートレットまたはカスタマイズ可能コア・コンポーネントのスタイル・プロパティを指定する手順は、次のとおりです。
Oracle JDeveloperで、ポートレットまたは1つ以上のカスタマイズ可能コア・コンポーネント（PanelCustomizableまたはShowDetailFrame）が含まれるページを開きます。
Oracle JDeveloperエディタで、スタイル設定するコンポーネントを選択します。
プロパティ・インスペクタに、コンポーネント関連のプロパティが移入されます。「プロパティ・インスペクタ」タブをダブルクリックすると、編集しやすいように表示サイズが最大化されます。再びダブルクリックすると、プロパティ・インスペクタが通常の表示サイズに戻ります。
プロパティ・インスペクタで、ContentInlineStyle、InlineStyleおよびStyleClassプロパティに対して必要な値を指定します。
|
注意: プロパティ・インスペクタには、すべての有効なCSS属性がリストされるわけではありません。たとえば、ShowDetailFrameの幅を設定しようとしても、プロパティ・インスペクタのInlineStyleの下にWidth属性は表示されていません。この場合、属性が少なくともCSS 2.0に準拠していれば、「ソース」タブに移動して、コンポーネント・タグにスタイル属性を入力できます。 |
属性の値列内をクリックし、次のようにして必要な値に変更します。
InlineStyleプロパティには、これらの値が適切な構文で自動的に移入されます。
ContentInlineStyleプロパティには、手動でスタイル値を設定します。
StyleClassプロパティに対しては、次のようにします。
「StyleClass」の隣の列をクリックし、「編集」アイコン（...）をクリックして「styleClass」ダイアログ・ボックスを表示します。
「styleClass」ダイアログ・ボックスで、「新規」をクリックして、スタイル・クラスのリストに新しいスケルトン・アイテムを追加します。
スケルトン・アイテムをクリックして、スタイル・クラスを入力します。
「styleClass」ダイアログ・ボックスの「リスト」ヘッダーの下に、ページ・コンポーネントにすでに適用されているスタイル・クラスが（選択可能な状態で）リストされます。
作業を保存します。
スタイル関連プロパティに関連付けられた属性の詳細は、9.4.3項「ContentInlineStyleおよびInlineStyleプロパティの属性」を参照してください。
特定のコンポーネント・インスタンスの実行時CSSスタイル定義を上書きするには、設計時に、プロパティ・インスペクタで選択可能なスタイル関連プロパティを使用します。この方法の詳細は、9.4.2項「スタイル関連プロパティの変更」を参照してください。
プロパティ・インスペクタでは、InLineStyleプロパティによって、コンポーネントのスタイルを設定するための属性のサブリストが提供されます。これらのサブリスト属性の1つに値を指定すると、InlineStyleプロパティに（属性名を含む）適切な構文が移入されます。たとえば、font-family属性に値Arial,Helvetica,Geneva,sans-serifを割り当てると、InlineStyleプロパティには自動的に次の構文が移入されます。
font-family:Arial Helvetica Geneva sans-serif;
InlineStyleとContentInlineStyleのいずれにも、InlineStyleの下に提供される属性の他に、プロパティ・インスペクタの属性リストに表示されていない属性を手動で入力できます（それらの属性が少なくともCSS 2.0に準拠している場合）。このような属性は、adfp:portletタグ内で次のような書式で指定します。
inlineStyle="border-style:none;font-family:Arial Helvetica Geneva sans-serif;"
InlineStyleプロパティの属性は、World Wide Web ConsortiumのCSS標準に基づいています。詳細は、次のサイトを参照してください。
http://www.w3.org/Style/CSS/
表9-7に、Oracle JDeveloperのプロパティ・インスペクタを介してカスタマイズ可能コンポーネントに選択可能なスタイル属性の一部をリストして説明します。ポートレットもこれらのスタイル属性を使用することに注意してください。
表9-7 ポートレットおよびカスタマイズ可能コア・コンポーネントのスタイル属性
ポータル管理者またはユーザーが実行時にスキンを切り替えることができる機能を作成すると、便利です。この項では、実行時スキン・スイッチャを設定するためのシナリオと、スイッチャの変更内容を複数のユーザー・セッションにわたって存続させるシナリオについて説明します。
この項では、ブラウザごとにスキンの変更内容を格納する方法について説明します。ユーザーがアプリケーション・スキンを変更すると、アプリケーションで変更内容が表示されます。この変更内容は、ユーザーのローカル・コンピュータのブラウザCookieに格納されます。ローカル・コンピュータでの以降のブラウザ・セッションでは、選択したスキンを使用してアプリケーションが表示されます。別のブラウザを選択した場合、ブラウザCookieを無効化した場合、または別のコンピュータ上でアプリケーションを表示した場合、スキンの変更内容は反映されません。
ブラウザごとにスキンの変更内容を存続させるには、次の4つの手順を実行します。
マネージドBeanとして機能するJavaクラスを作成する手順は、次のとおりです。
アプリケーション・ナビゲータで、「ViewController」プロジェクトを右クリックし、ポップアップ・メニューから「新規」を選択します。
「新規ギャラリ」で「General」ノードを開き、「Simple Files」選択します。
「新規ギャラリ」の「項目」で、「Javaクラス」を選択します。
「OK」をクリックします。
「Javaクラスの作成」ダイアログ・ボックスの「名前」フィールドに、Javaクラスの名前を入力します。
たとえば、ClientSkinBeanと入力します。
「パッケージ」フィールドに「view」が指定されていて、拡張フィールドに「java.lang.Object」が指定されていることを確認します。「オプション属性」はデフォルト値のままにしておきます。
「OK」をクリックします。
アプリケーション・ナビゲータで、次の階層の下にJavaクラスが表示されます。
<project_name> */ For example, ViewController /* Application Sources view <Java_class_name> */ For example, ClientSkinBean.java /*
アプリケーション・ナビゲータで、Javaクラスを右クリックし、ポップアップ・メニューから「開く」を選択します。
これにより、「エディタ」ペイン内にJavaクラスが開きます。
「エディタ」ペインで、「ソース」ビューに切り替え、ブラウザCookieを介して持続スキンを設定するためのコードを追加します。
例9-9に、このコードの実装を示します。
例9-9 ブラウザCookieを介してスキン変更を存続させるためのJavaクラス
package view;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* ClientSkinBean is a class for persisting ADF JSF skin changes as
* a cookie in the user's browser.
* It is intended to be used as a JSF backing bean.
* It stores the skin setting under the cookie name "ADFSkin".
*/
public class ClientSkinBean {
private String _skin = null;
// You can modify the _cookieName for your own application.
private static String _cookieName = "ADFSkin";
public ClientSkinBean() {
}
/**
* Get the current skin setting. The default is oracle.
* @return the name of the skin to use
*/
public String getSkin() {
if (_skin == null)
{
FacesContext context = FacesContext.getCurrentInstance();
ExternalContext extContext = context.getExternalContext();
HttpServletRequest servletRequest =
(HttpServletRequest) extContext.getRequest();
Cookie[] cookies = servletRequest.getCookies();
for (int i = 0; i < cookies.length; i++) {
Cookie cookie = cookies[i];
if (_cookieName.equals(cookie.getName()))
{
_skin = cookie.getValue();
return _skin;
}
}
_skin = "oracle";
return _skin;
}
else
return _skin;
}
/**
* Make the skin setting persistent. The default is oracle.
* @param skin the name of the skin.
*/
public void setSkin(String skin) {
FacesContext context = FacesContext.getCurrentInstance();
ExternalContext extContext = context.getExternalContext();
HttpServletResponse servletResponse =
(HttpServletResponse) extContext.getResponse();
Cookie userCookie = new Cookie(_cookieName, skin);
// Set the cookie's age to a year. You can set this to your own value.
userCookie.setMaxAge(60*60*24*365);
servletResponse.addCookie(userCookie);
_skin = skin;
}
}
変更を保存します。
faces-config.xmlファイルを使用して、JavaクラスをマネージドBeanとして登録します。faces-config.xmlファイルは、プロジェクトのWEB-INFフォルダに格納されています。
Javaクラスを登録する手順は、次のとおりです。
アプリケーション・ナビゲータで、「faces-config.xml」ファイルを右クリックし、ポップアップ・メニューから「開く」を選択します。
9.5.1.1項で作成したJavaクラスを登録します。
例9-10に、9.5.1.1項で作成したクラスを登録する方法を示します。スキンに関連する部分は、太字で示しています。
例9-10 マネージドBeanとしてのJavaクラスの登録
<faces-config xmlns="http://java.sun.com/JSF/Configuration"> <managed-bean> <managed-bean-name>clientSkinBean</managed-bean-name> <managed-bean-class>view.ClientSkinBean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean> <application> <default-render-kit-id>oracle.adf.core</default-render-kit-id> </application> </faces-config>
変更を保存します。
adf-faces-config.xmlファイル内でExpression Language（EL）式を使用して、マネージドBeanを参照します。Beanを参照すると、アプリケーションのスキン選択に対して、固定値ではなく変数値の式を使用できます。
アプリケーション・スキンを指定する方法の詳細は、9.2項「アプリケーションへのカスタム・スキンの適用」を参照してください。
adf-faces-config.xmlファイル内にEL式を入力する手順は、次のとおりです。
アプリケーション・ナビゲータで、adf-faces-config.xmlファイルを右クリックし、ポップアップ・メニューから「開く」を選択します。
adf-faces-config.xmlファイルは、プロジェクトWEB-INFフォルダの中にあります。
<skin-family>タグと</skin-family>タグの間に、マネージドBeanを参照するEL式を入力します。
次に例を示します。
<adf-faces-config xmlns="http://xmlns.oracle.com/adf/view/faces/config">
<skin-family>#{clientSkinBean.skin}</skin-family>
</adf-faces-config>
変更を保存します。
実行時にスキンを切り替えるためのロジックを設定した後は、スキン・スイッチャをレンダリングするユーザー・インタフェース（UI）コンポーネントを指定します。
アプリケーションjspxファイルを作成するか、既存のファイルを開きます。
既存のファイルを開くには、アプリケーション・ナビゲータでそのファイルを右クリックし、ポップアップ・メニューから「開く」を選択します。アプリケーションjspxファイルは、プロジェクトのWeb Contentフォルダに格納されています。アプリケーションjspxファイルの作成方法の詳細は、「ページの要件」を参照してください。
「エディタ」ペインで、「ソース」ビューに切り替え、スキン・スイッチャのロジックを入力します。
例9-11に、スキン・スイッチャのコードの実装を示します。
例9-11 スキン・スイッチャの実装
<jsp:root version="2.0">
<jsp:output omit-xml-declaration="true" doctype-root-element="HTML"
doctype-system="http://www.w3.org/TR/html4/loose.dtd"
doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/>
<jsp:directive.page contentType="text/html;charset=windows-1252"/>
<f:view>
<afh:html>
<afh:head title="ClientChangeSkin">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252"/>
</afh:head>
<afh:body>
<h:form>
<af:selectOneChoice label="Select Look and Feel"
id="showOneChoice1" value="#{clientSkinBean.skin}">
<!-- Specify skins to display on selection list: default, custom, or both -->
<af:selectItem label="oracle" value="oracle"/>
<af:selectItem label="[menu item label]" value="[skin name]"/>
<af:selectItem label="[menu item label]" value="[skin name]"/>
<af:selectItem label="minimal" value="minimal"/>
<af:selectItem label="simple" value="simple"/>
</af:selectOneChoice>
<af:commandButton text="Apply Selected Look and Feel"
id="commandButton1"/>
</h:form>
</afh:body>
</afh:html>
</f:view>
</jsp:root>
変更を保存します。
ページを実行し、スキンの切替えを試行します。リストから別のスキンを選択し、変更を有効にするためのコマンド・ボタンをクリックします。例9-11に示したコードを使用した場合は、コマンド・ボタンの変更内容（具体的にはoracleスキンとsimpleスキンの間）に注意してください。独自のコードを作成する際は、これらのデフォルト・スキンではなく独自のスキンを参照することもできます。ブラウザを閉じてから開くと、スキンの変更が持続しています。
このアプローチと9.5.1項で説明したアプローチとでは、スキンの変更の影響を受ける人が異なります。このアプローチでは、スキンを変更すると、変更が行われたブラウザだけでなく、アプリケーションを使用するすべてのユーザーが影響を受けます。ブラウザのCookieが無効になっている環境でアプリケーションを実行する場合は、このアプローチを使用する必要があります。このアプローチでは、変更はすべてのユーザーに影響するため、通常は、権限のあるユーザーのみが変更を行えるようになんらかのセキュリティ・メカニズムを実装します。
すべてのユーザーにわたってスキンを存続させるには、次の4つの手順を実行します。
マネージドBeanとして機能するJavaクラスを作成する手順は、次のとおりです。
アプリケーション・ナビゲータで、「ViewController」プロジェクトを右クリックし、ポップアップ・メニューから「新規」を選択します。
「新規ギャラリ」で「General」ノードを開き、「Simple Files」選択します。
「新規ギャラリ」の「項目」で、「Javaクラス」を選択します。
「OK」をクリックします。
「Javaクラスの作成」ダイアログ・ボックスの「名前」フィールドに、Javaクラスの名前を入力します。
たとえば、ServerSkinBeanと入力します。
「パッケージ」フィールドに「view」が指定されていて、拡張フィールドに「java.lang.Object」が指定されていることを確認します。「オプション属性」はデフォルト値のままにしておきます。
「OK」をクリックします。
アプリケーション・ナビゲータで、次の階層の下にJavaクラスが表示されます。
<project_name> */ For example, ViewController /* Application Sources view <Java_class_name> */ For example, ServerSkinBean.java /*
アプリケーション・ナビゲータで、Javaクラスを右クリックし、ポップアップ・メニューから「開く」を選択します。
これにより、「エディタ」ペイン内にJavaクラスが開きます。
「エディタ」ペインで、「ソース」ビューに切り替え、ブラウザCookieを介してスキンを存続させるためのコードを追加します。
例9-12に、このコードの実装を示します。
例9-12 すべてのユーザーに影響を与えるスキン変更を存続させるためのJavaクラス
package view;
import java.io.BufferedReader;
import java.io.FileNotFoundException;
import java.io.FileReader;
import java.io.FileWriter;
import java.io.IOException;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletResponse;
/**
* ServerSkinBean is a class for making ADF JSF skin persistent as
* application customization. It is intended to be used as a JSF backing bean.
* It stores the skin setting under the application's context root in a
* simple text file called appSkinConfig.
*/
public class ServerSkinBean {
private String _skin = null;
private static String _defaultSkin = "oracle";
public ServerSkinBean() {
}
/**
* Get the current skin setting. The default is oracle.
* @return the name of the skin to use
*/
public String getSkin() {
FacesContext context = FacesContext.getCurrentInstance();
ExternalContext extContext = context.getExternalContext();
ServletContext svtCtx = (ServletContext)extContext.getContext();
String appSkinConfig = svtCtx.getRealPath("/" + "appSkinConfig");
try {
// Attempt to open the skin config file and read the setting
FileReader fileReader =
new FileReader(appSkinConfig);
BufferedReader bufferedReader = new BufferedReader(fileReader);
_skin = bufferedReader.readLine();
if ((_skin == null) || (_skin.length() == 0) || (_
skin.trim().length() == 0)) {
setSkin(_defaultSkin);
}
return _skin;
} catch (FileNotFoundException e) {
setSkin(_defaultSkin);
return _skin;
} // no saved state
catch (IOException e) {
System.out.println(e.getMessage());
_skin = _defaultSkin;
return _skin;
}
}
/**
* Make the skin setting persistent. The default is oracle.
* @param skin the name of the skin.
*/
public void setSkin(String skin) {
FacesContext context = FacesContext.getCurrentInstance();
ExternalContext extContext = context.getExternalContext();
ServletContext svtCtx = (ServletContext)extContext.getContext();
String appSkinConfig = svtCtx.getRealPath("/" + "appSkinConfig");
try
{
_skin = skin;
FileWriter writer = new FileWriter(appSkinConfig, false);
writer.write(_skin + "\n");
writer.close();
}
catch (IOException e) {
System.out.println(e.getMessage());
}
}
}
変更を保存します。
faces-config.xmlファイルを使用して、JavaクラスをマネージドBeanとして登録します。faces-config.xmlファイルは、プロジェクトのWEB-INFフォルダに格納されています。
Javaクラスを登録する手順は、次のとおりです。
アプリケーション・ナビゲータで、「faces-config.xml」ファイルを右クリックし、ポップアップ・メニューから「開く」を選択します。
9.5.2.1項で作成したJavaクラスを登録します。
例9-13に、9.5.2.1項で作成したクラスを登録する方法を示します。スキンに関連する部分は、太字で示しています。
例9-13 マネージドBeanとしてのJavaクラスの登録
<faces-config xmlns="http://java.sun.com/JSF/Configuration"> <managed-bean> <managed-bean-name>serverSkinBean</managed-bean-name> <managed-bean-class>view.ServerSkinBean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean> <application> <default-render-kit-id>oracle.adf.core</default-render-kit-id> </application> </faces-config>
変更を保存します。
adf-faces-config.xmlファイル内でEL式を使用して、マネージドBeanを参照します。Beanを参照すると、アプリケーションのスキン選択に対して、固定値ではなく変数値の式を使用できます。
アプリケーション・スキンを指定する方法の詳細は、9.2項「アプリケーションへのカスタム・スキンの適用」を参照してください。
adf-faces-config.xmlファイル内にEL式を入力する手順は、次のとおりです。
アプリケーション・ナビゲータで、adf-faces-config.xmlファイルを右クリックし、ポップアップ・メニューから「開く」を選択します。
adf-faces-config.xmlファイルは、プロジェクトWEB-INFフォルダの中にあります。
<skin-family>タグと</skin-family>タグの間に、マネージドBeanを参照するEL式を入力します。
次に例を示します。
<adf-faces-configxmlns="http://xmlns.oracle.com/adf/view/faces/config">
<skin-family>#{serverSkinBean.skin}</skin-family>
</adf-faces-config>
変更を保存します。
実行時にスキンを切り替えるためのロジックを設定した後は、スキン・スイッチャをレンダリングするUIコンポーネントを指定します。
スキン・スイッチャUIを作成する手順は、次のとおりです。
アプリケーションjspxファイルを作成するか、既存のファイルを開きます。
既存のファイルを開くには、アプリケーション・ナビゲータでそのファイルを右クリックし、ポップアップ・メニューから「開く」を選択します。アプリケーションjspxファイルは、プロジェクトのWeb Contentフォルダに格納されています。アプリケーションjspxファイルの作成方法の詳細は、「ページの要件」を参照してください。
「エディタ」ペインで、「ソース」ビューに切り替え、スキン・スイッチャのロジックを入力します。
例9-14に、スキン・スイッチャのコードの実装を示します。
例9-14 スキン・スイッチャの実装
<jsp:root version="2.0">
<jsp:output omit-xml-declaration="true" doctype-root-element="HTML"
doctype-system="http://www.w3.org/TR/html4/loose.dtd"
doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/>
<jsp:directive.page contentType="text/html;charset=windows-1252"/>
<f:view>
<afh:html>
<afh:head title="ServerChangeSkin">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252"/>
</afh:head>
<afh:body>
<h:form>
<af:selectOneChoice label="Select Look and Feel"
id="showOneChoice1" value="#{serverSkinBean.skin}">
<!-- Specify skins to display on selection list: default, custom, or both -->
<af:selectItem label="[menu item label]" value="[skin name]"/>
<af:selectItem label="[menu item label]" value="[skin name]"/>
<af:selectItem label="oracle" value="oracle"/>
<af:selectItem label="minimal" value="minimal"/>
<af:selectItem label="simple" value="simple"/>
</af:selectOneChoice>
<af:commandButton text="Apply Selected Look and Feel"
id="commandButton1"/>
</h:form>
</afh:body>
</afh:html>
</f:view>
</jsp:root>
変更を保存します。
ページを実行し、スキンの切替えを試行します。リストから別のスキンを選択し、変更を有効にするためのコマンド・ボタンをクリックします。例9-14に示したコードを使用した場合は、コマンド・ボタンの変更内容（具体的にはoracleスキンとsimpleスキンの間）に注意してください。ブラウザを閉じてから開くと、スキンの変更が持続しています。
独自のコードを作成する際は、これらのデフォルト・スキンではなく独自のスキンを参照することもできます。例9-14に、カスタム・スキンを参照できる2つのエントリを示します。カスタム・スキンは、必要なだけいくつでも参照できます。また、デフォルト・スキンの参照を省略することもできます。
