カスタム・スタイルシートについて

ルック・アンド・フィールに対して実装できる最も簡単なカスタマイズは、カスタム・スタイルシートによるカスタム・スタイル定義です。

カスタム・スタイルシートは、親ルック・アンド・フィールのスタイルシートで定義されるスタイルを拡張します。ADF UIXにおけるカスタム・スタイルシート文書は、任意の数の特定ユーザー環境用のスタイル定義を含むXMLスタイルシート言語文書(.xssファイル)です。これらのカスタム・スタイル定義は、カスタム・スタイルシートが拡張している親スタイルシートの上に自動的にマージされます。

このリリースでは、カスタム・スタイルシートで親ルック・アンド・フィールのスタイルシートを明示的にインポートする必要がなくなりました。たとえば、シンプル・ルック・アンド・フィール(simple-desktop.xss)を拡張するカスタム・スタイルシートを作成する場合に、simple-desktop.xssをインポートする必要はありません。かわりに、カスタム・ルック・アンド・フィール用のルック・アンド・フィール構成ファイルで、拡張する親ルック・アンド・フィールを指定します。

カスタム・スタイルシート文書を作成するときに使用する主なUIX要素を次に示します。

スタイルシート文書の定義で使用する上の要素や他の要素の詳細は、「UIX要素リファレンス」「UIXスタイル」を参照してください。カスタマイズ可能なスタイルおよびアイコンの詳細は、「UIXカスタマイズ・リファレンス」を参照してください。

UIXでは、base-desktop.xss simple-desktop.xssの2つの親スタイルシートが提供されており、これを拡張してアプリケーション用のカスタム・スタイルシートを作成できます。いずれの親スタイルシートも、スタイル・クラス名を使用して、CSSスタイルと生成されるHTMLコンテンツとを関連付けます。たとえば、スタイル・クラスOraGlobalHeaderSelected(globalHeaderコンポーネント内で選択された項目のスタイル)によって次のようなコンテンツが生成されます。


<td class="OraGlobalHeaderSelected">
  <a href="...">The Selected Item</a>
</td>    

親スタイルシートでは、OraGlobalHeaderSelectedスタイルが次のように定義されます。


<style selector=".OraGlobalHeaderSelected">
  <property name="font-family">Arial,Helvetica,Geneva,sans-serif</property>
  <property name="font-size">10pt</property>
  <property name="font-weight">bold</property>
  <property name="background-color">#336699</property>
  <property name="color">#ffffff</property>
  <property name="text-decoration">none</property>
</style>    
カスタム・スタイルシートでは、次のようにフォントの色やサイズ、globalHeaderで選択された項目の背景の色を変更できます。

<style selector=".OraGlobalHeaderSelected">
  <property name="font-size">16pt</property>
  <property name="background-color">red</property>
  <property name="color">blue</property>
</style>    

UIXスタイルシートについて
カスタム・アイコンについて
カスタム・レンダラについて

カスタム・ルック・アンド・フィールの作成
ADF UIXページの操作
Webアプリケーション設計ツールの使用

 

Copyright © 1997, 2004, Oracle. All rights reserved.