Oracle® Fusion Middleware Oracle JDeveloperによるWebCenter Portalアセットとカスタム・コンポーネントの開発 12c (12.2.1) E72546-01 |
|
前 |
次 |
この章の内容は次のとおりです。
スキンを使用すると、色、フォント、イメージ、およびアプリケーション・コンポーネントの高さや幅などのディメンションの詳細を定義して、自社に適したルック・アンド・フィールを表すことができます。
この項には次のトピックが含まれます:
スキンは、カスケード・スタイル・シート(CSS)仕様に基づきます。スキンは、アプリケーション・コンポーネントのスタイルを定義する種々のスキン・セレクタを含むCSSファイルです。コンポーネントのスタイル関連のプロパティを変更することによって、コンポーネントのルック・アンド・フィールを調整できます。アプリケーション内でスキンを使用すると、各コンポーネントに対して個別にスタイルを指定したり、各ページにスタイルシートを挿入する必要がなくなります。各コンポーネントで自動的に、スキンで定義されているスタイルが使用されます。スキンにより、ポータル・ページ自体を変更せずにアプリケーションの外観を変更できます。
WebCenter Portalで使用するスキンの作成または変更には、ある程度別個の2つのタスクとしてアプローチできます。1つ目のタスクは、ページの背景や中央などのページの大まかな要素に基本的なスタイル要素を適用して、企業ブランドのルック・アンド・フィールを規定することです。これは、大抵の場合、最初にしておくことです。2つ目も同様で、より細かいページ要素のいくつかにスタイルを適用して、ルック・アンド・フィールを微調整することです。
多くの場合、これらを組み合せたアプローチも効果的です。大まかな要素(ページ背景、本体の主要部分など)を取り込んでそれらとともに従来のCSSスタイルを適用すると、ADFスキンの使用が特定的になっても、WebCenter Portalの外観全体が生成されます。
ADFスタイルに加えてCSSベースのスタイルと他の技術を使用する場合、WebCenter Portalの外部にスタイル・アセットを格納すると役立つことが多いです。そのために、コンテンツ・サーバーを使用してWebCenter Portal用の非構造アセットをすべて管理できます。アセットに環境内で管理するCSSやイメージなどを追加して、リビジョン・コントロールとワークフローを提供できます。このベスト・プラクティスにより、設計チームは、変更のたびに開発チームを巻き込まなくてもWebCenter Portalにアクセスして作業できるようになります。
WebCenter Portalでは、portal-skin.css
ファイルで定義されるportal
スキンをデフォルトで使用します。WebCenter Portalアセット・アプリケーションを作成すると、簡単にこのスキンをJDeveloperにコピーして貼り付けて特定の要件に合せて変更することも、最初から新しいスキンを作成することもできます。WebCenter Portalでのアセットのコピー方法の詳細は、『Oracle WebCenter Portalでのポータルの構築』のアセットのコピーに関する項を参照してください。
この項には次のトピックが含まれます:
この項では、新しいスキン用にWebCenter Portalアセット・アプリケーションを作成する方法について説明します。アセット・アプリケーションが関連するアーティファクトとともに作成されると、続いて「スキンの編集」の説明に従ってスキンのCSSファイルを変更できます。
注意:
イメージやアイコンなどのアセット関連のアーティファクトをコンテンツ・サーバーに格納し、必要な場合にコンテンツを容易に特定して移動できるようにアセット・アーティファクト専用のフォルダ構造をコンテンツ・サーバー上で作成することをお薦めします。こうすることで、このようなコンテンツを他のユーザーが開発者を巻き込まずに変更できるようにもなります。
スキン用にWebCenter Portalアセット・アプリケーションを作成するには:
スキン・アセット・アプリケーションを作成すると、次のアーティファクトとともにデフォルト・スキンが生成されます。
CSSスキン・セレクタ・ファイル(Skin1.css
など)
trinidad-skins.xml
: スキン定義ファイル
どちらのファイルも図8-2に示すようにナビゲーション・バーに表示されます。
CSSファイルを編集してスタイル・セレクタを編集または追加することにより、最初に作成したスキンを編集できます。
注意:
WebCenter Portalで既存または組込みのスキンをコピーし、JDeveloperでページ・スタイルのCSSファイルに貼り付けることをお薦めします。次に、このスキンを新しいスキンの起点として使用し、変更が終了したらWebCenter Portalに公開します。WebCenter Portalでのアセットのコピー方法の詳細は、『Oracle WebCenter Portalでのポータルの構築』のアセットのコピーに関する項を参照してください。
スキンを編集するには:
WebCenter Portalアセット・アプリケーションを作成し、スキンのCSSファイルを編集したら、次の工程はスキンを公開してWebCenter Portalでテストします。アセットを共有アセットとしてWebCenter Portalに公開する、またはポータル・アセットとして特定のポータルに公開する方法の詳細は、「WebCenter Portalアセットの公開」を参照してください。
実際のアプリケーション・ロジックに影響を与えずに、ユーザー、ページ、アプリケーションなどに対して、それぞれ異なるスキンを割り当てることができます。スキンを条件付で設定するには、trinidad-config.xml
ファイルで<skin-family>
エントリを使用します。
動的に評価できるEL式を使用して、表示するスキンを決定できます。たとえば、ユーザーのブラウザがドイツ語ロケールに設定されているときドイツ語スキンを使用し、それ以外では英語スキンを使用する場合には、trinidad-config.xml
ファイルで次の<skin-family>
エントリを使用します。
<skin-family>#{facesContext.viewRoot.locale.language=='de' ? 'german' : 'english'}</skin-family>
詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のスキンを動的に変更するためのコンポーネントの構成方法に関する項を参照してください。
注意:
<skin-family>
のデフォルト値は、アセット・アプリケーションとともに作成したスキン・アセットの名前(Skin1
など)から空白または特殊文字を除いたものです。デフォルト値を変更すると、アプリケーション・ユーザーは実行時にリソース・マネージャでスキンを設定できません。
また、SkinSetting
APIを使用して、ユーザー向けスキンを条件付で設定することもできます。詳細は、Oracle WebCenter Portal Java APIリファレンスを参照してください。