カスタム・スキンの作成

カスタム・スキンは、シンプル・スキンを拡張し、セレクタをオーバーライドすることで作成します。カスタム・スキンを作成した後は、アプリケーションにスキンを登録する必要があります。このスキンのカスタム・リソース・バンドルを作成することで、コンポーネントで使用するテキストも変更できます。

カスタム・スキンを作成する手順は、次のとおりです。

  1. シンプル・スキンを使用しているページを確認し、変更の必要があるテキストを判断します。スキンを変更する手順については、「スキンを使用するためのアプリケーションの構成」を参照してください。
  2. JDeveloperで、CSSファイルを作成します。
  3. ADF Facesコンポーネントをスキニングするためのセレクタ」を参照し、オーバーライドするセレクタをCSSファイルに追加し、必要に応じてプロパティを設定します。CSS仕様でサポートされるいずれのプロパティも設定できます。また、ユーザー独自の別名クラスも作成できます。詳細は、後述の手順を参照してください。
  4. ファイルをディレクトリに保存します。

別名をオーバーライドすると、複数のコンポーネントの表示が変更されます。変更可能な対象を理解できるように、「ADF Facesコンポーネントをスキニングするためのセレクタ」を注意して読んでください。

別名クラスを作成する手順は、次のとおりです。

  1. 別名のセレクタ・クラスを作成します。たとえば、カーソルをリンク上に置いたときのリンクの色を設定するために使用する、次のような別名を作成できます。
    .MyLinkHoverColor:alias {color: #CC6633;}
  2. この別名を別のセレクタに挿入するには、既存のセレクタに擬似要素を追加して、新しいセレクタを作成し、-ora-rule-ref:selectorプロパティを使用して別名を参照します。たとえば、メニュー・バーが有効な間、そのメニュー・バーで浮出し色を使用するには、次のようにします。
    af|menuBar::enabled-link:hover
    {
    -ora-rule-ref:selector(".MyLinkHoverColor:alias");
    }

CSSを作成した後は、スキンを登録し、そのスキンを使用するようにアプリケーションを構成する必要があります。


スキンについて
カスタム・スキンについて