注意: 拡張する親ルック・アンド・フィールのスタイルシートをインポートする必要はありません。カスタム・スタイルシートで定義するスタイルは、実行時に親スタイルシート上で自動的にマージされます。
カスタム・スタイルシートを作成するには、次のようにします。
.xss
のファイルを作成します。任意のファイル名を使用できますが、拡張子は .xss
である必要があります(たとえばmycompany-desktop.xss
)。文書の先頭に<?xml version='1.0'?>
を挿入します。ファイルを保存します。
<jdev_install>/jdev/mywork/<Workspace_dir> /<Project_dir>/public_html/cabo/styles
.
ただし、スタイルシートはWebアプリケーションのコンテキスト・ルートの下やWebアプリケーションのクラス・パス上(カスタム・ルック・アンド・フィールをファイルにパッケージ化する場合)にも保存できます。
コード・エディタにXML文書が表示されます。
http://xmlns.oracle.com/uix/ui/style
ネームスペースを使用してルート要素<styleSheetDocument>
を挿入します。ここで、次の属性を指定します。
documentVersion
: この文書の特定のバージョンを識別するための一意の文字列識別子を指定します。この値は、生成されるスタイルシート・ファイルの名前に使用される場合があるので、必ず短くてファイル・システムでの使用に適した値にしてください。
version
: この文書で使用するXMLスタイルシート言語のバージョンを指定します。このリリースのバージョンは、「2.0」です。
<styleSheet>
セクションを挿入し、次の属性を指定します。
browsers
: このスタイルシートを適用するブラウザを指定します。各ブラウザを空白で区切ったリストで指定します。値を指定しない場合、スタイルシートはすべてのブラウザに適用されます。サポートされる値は、次のとおりです。
direction
: このスタイルシートを適用する言語の記述方向を指定します。値を指定しない場合、スタイルシートはすべての方向に適用されます。サポートされる値は、次のとおりです。
locales
: このスタイルシートを適用するロケールを指定します。各ロケールを空白で区切ったリストで指定します。値を指定しない場合、スタイルシートはすべてのロケールに適用されます。各ロケールは、言語コードまたは言語と国コードの組合せで指定します。言語コードは、ISO-639で定義されている小文字2文字の言語コード(「en」など)を使用します。国コードは、ISO-3166で定義されている大文字2文字の国コード(「US」など)を使用します。国コードを言語コードに追加して、スタイルシートの適用範囲を制限できます。国コードを指定する場合は、アンダースコア文字をセパレータとして使用します(「en_US」など)。
platforms
: このスタイルシートを適用するクライアント・オペレーティング・システムを指定します。各プラットフォームを空白で区切ったリストで指定します。値を指定しない場合、スタイルシートはすべてのクライアント・プラットフォームに適用されます。サポートされる値は、次のとおりです。
versions
: このスタイルシートを適用するブラウザの主なバージョン番号を指定します。各符号なしの整数を空白で区切ったリストで指定します。値を指定しない場合、スタイルシートはブラウザのすべてのバージョンに適用されます。
<styleSheet>
セクションに<style>
要素を挿入し、次の属性と子要素を指定します。
name
: スタイルの名前を指定します(ABCBannerLink、TabBarItemなど)。名前付きスタイルのプロパティは、<includeStyle>
要素または<includeProperty>
要素を使用して他のスタイルで使用できます。セレクタではなく名前を指定したスタイルは、生成されるCSSスタイルシートには含められません。
selector
: このスタイルのセレクタを指定します(.ABCStart、.OraGlobalButtonTextなど)。任意の有効なCSSセレクタを指定できます。セレクタを指定したスタイルは、生成されるCSSスタイルシートに含められます。
<property>
: 唯一のスタイル・プロパティを定義するには、この子要素を含めてこの属性を指定します。
name
: (必須)定義するプロパティの名前を指定します。任意のCSSプロパティ名(font-size
、font-size
など)を指定できます。
<compound-property>
: 複数の値を指定できるリストベースのプロパティを定義するには、この要素を追加してこの属性と子要素を指定します。
name
: (必須)定義する複合プロパティの名前を指定します。任意のCSSプロパティ名を指定できますが、<compoundProperty>
要素は、通常はborder
やfont
のように複数の値で構成されるプロパティでのみ使用されます。
<includeValue>
要素: この要素は、複合プロパティに1つの値を含める際に使用します。
propertyName
: (必須)含めるプロパティの名前(<includeValue propertyName="color"/>
など)を指定します。
<value>
要素: この要素は、複合プロパティに1つの値を定義する際に使用します。各<value>
要素には、複合プロパティの1つの値を指定する文字列を含めます。
<includeStyle>
: この要素は、あるスタイルのすべてのプロパティを別のスタイルに含めるために使用します。含めるスタイルは、名前またはセレクタを使用して参照できます。スタイルを含めることによって、スタイルのすべてのプロパティが挿入先のスタイルに含められます。1つ異なるのは、<includeStyle>
では参照先のスタイルのすべてのプロパティを含めるのに対して、<includeProperty>
では1つのプロパティのみを含める点です。<includeStyle>
の属性は、次のようになります。
name
: 含めるスタイルの名前(DefaultFontなど)を指定します。
selector
: 含めるスタイルのセレクタ(.OraGlobalButtonTextなど)を指定します。
<includeProperty>
: あるスタイルの1つのプロパティを別のスタイルに含めます。1つ異なるのは、<includeStyle>
では参照先のスタイルのすべてのプロパティを含めるのに対して、<includeProperty>
では1つのプロパティのみを含める点です。<includeProperty>
要素は通常、あるスタイルの色の値を、別のスタイルにおいて異なる名前で再利用する際に使用されます。<includeProperty>
の属性は、次のようになります。
localPropertyName
: 挿入先のスタイル内で使用するプロパティの名前を指定します。この属性では、リモート値を維持したままプロパティの名前をローカルで変更できます。たとえば、あるスタイルのbackground-colorというプロパティを含め、localPropertyName
属性をcolorに設定することによって、別のスタイルの背景色を前景色として使用できます。
<style>
要素を追加します。
<styleSheet>
セクションを追加します。
スタイルシート文書の定義で使用する上の要素の詳細は、「UIX要素リファレンス」の「UIXスタイル」を参照してください。UIXスタイルの使用方法とルック・アンド・フィールのカスタマイズおよびパーソナライズの詳細は、「ADF UIX開発者ガイド」を参照してください。
次の例に、すべてのユーザー環境に2つのカスタム・スタイルを追加するXMLスタイルシート文書と、言語の記述方向が右から左のユーザー環境のみに適用される1つのカスタム・スタイルを示します。
Example 1:
<?xml version="1.0" encoding="windows-1252"?>
<styleSheetDocument xmlns="http://xmlns.oracle.com/uix/style"
version="2.0">
<styleSheet>
<!-- Make globalHeader links center-aligned -->
<style selector=".OraGlobalHeaderBody">
<property name="text-align">center</property>
</style>
<!-- Adjust the header padding and text size/weight -->
<style selector=".OraContentContainerHeader">
<includeStyle name="MediumFont"/>
<property name="font-weight">bold</property>
<property name="padding-top">2px</property>
</style>
</styleSheet>
<styleSheet direction="rtl">
<style selector=".p_OraSideBar">
<property name="margin">0px 0px 0px 5px</property>
</style>
</styleSheet>
</styleSheetDocument>
次の例に、デフォルト・フォント・サイズを変更するカスタム・スタイルシートを示します。
Example 2:
<?xml version="1.0" encoding="windows-1252"?>
<styleSheetDocument xmlns="http://xmlns.oracle.com/uix/style">
<!-- A custom style sheet which overrides DefaultFont -->
<styleSheet>
<style name="DefaultFont">
<property name="font-family">Courier</property>
<property name="font-size">14pt</property>
</style>
</styleSheet>
</styleSheetDocument>
カスタム・ルック・アンド・フィールの作成
ADF UIXページの操作
Webアプリケーション設計ツールの使用
Copyright © 1997, 2004, Oracle. All rights reserved.