ルック・アンド・フィールに対して実装できる最も簡単なカスタマイズは、カスタム・スタイルシートによるカスタム・スタイル定義です。
カスタム・スタイルシートは、親ルック・アンド・フィールのスタイルシートで定義されるスタイルを拡張します。ADF UIXにおけるカスタム・スタイルシート文書は、任意の数の特定ユーザー環境用のスタイル定義を含むXMLスタイルシート言語文書(.xss
ファイル)です。これらのカスタム・スタイル定義は、カスタム・スタイルシートが拡張している親スタイルシートの上に自動的にマージされます。
このリリースでは、カスタム・スタイルシートで親ルック・アンド・フィールのスタイルシートを明示的にインポートする必要がなくなりました。たとえば、シンプル・ルック・アンド・フィール(simple-desktop.xss
)を拡張するカスタム・スタイルシートを作成する場合に、simple-desktop.xss
をインポートする必要はありません。かわりに、カスタム・ルック・アンド・フィール用のルック・アンド・フィール構成ファイルで、拡張する親ルック・アンド・フィールを指定します。
カスタム・スタイルシート文書を作成するときに使用する主なUIX要素を次に示します。
<styleSheetDocument>
: .xss
スタイルシート文書のルート要素です。UIXスタイルのネームスペースはhttp://xmlns.oracle.com/uix/style
です。
<styleSheet>
: 特定のユーザー環境に適用するスタイルのセットを定義します。<styleSheet>
要素はいくつでも定義できます。<styleSheet>
の属性は、スタイル定義を適用するユーザー環境を指定します。たとえば、<styleSheet browsers="netscape"></styleSheet>
はユーザーのブラウザがNetscapeの場合にのみ適用されるスタイルです。要素に属性がない場合には、すべてのユーザー環境にスタイルが適用されます。
<style>
: セレクタまたは名前によって識別されるスタイル・プロパティのグループを定義します。セレクタベースのスタイル(たとえば<style selector=".OraInstructionText">
)は、.xss
文書から生成される任意のCSSスタイルシートに含められます。名前ベースのスタイル(たとえば<style name="DefaultFont">
)は、生成されるCSSスタイルシートには含められません。名前ベースのスタイルは、セレクタベースの複数のスタイル間で共有される共通プロパティの定義に使用できます。セレクタベースのスタイルは、子要素<includeStyle>
または<includeProperty>
を使用して名前ベースのスタイルを参照することができます。名前ベースのスタイルに加えた変更は、そのスタイルを参照するすべてのセレクタベースのスタイルに自動的に反映されるため、カスタマイズのプロセスも簡略化できます。
スタイルシート文書の定義で使用する上の要素や他の要素の詳細は、「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.