| Oracle® Fusion Middleware Oracle ADFスキンの開発 12c (12.2.1.1) E77402-01 |
|
 前へ |
 次へ |
この章の内容は次のとおりです。
ADFスキンでは、ADF FacesコンポーネントおよびADFデータ視覚化コンポーネントによって公開されるセレクタのプロパティを定義します。JDeveloperのエディタを使用して、ADFスキンのソース・ファイルを作成できます。ADFスキンのソース・ファイルはCSSファイルの一種であるため、エディタを使用しないで作成できます。ただし、エディタを使用すると、関連する構成ファイルが(ADFスキンを初めて作成したときに)作成されたり、(以降のADFスキンを作成するときに)変更されます。これらの構成ファイルの詳細は、「ADFスキンの構成ファイル」を参照してください。
ADF FacesコンポーネントおよびADFデータ視覚化コンポーネントが実行時にレンダリングされる方法を定義するADFスキン・ファイルをJDeveloperで作成できます。作成するADFスキンは、Oracle ADFによって提供されるADFスキン、または作成した既存のADFスキンのいずれかを拡張したものである必要があります。Oracle ADFによって提供されるADFスキンの間では、ADF FacesコンポーネントおよびADFデータ視覚化コンポーネントに対して定義されているカスタマイズのレベルが異なっています。Oracle ADFによって提供されるADFスキン間の継承関係の詳細は、「Oracle ADFで提供されるADFスキンの継承関係」を参照してください。Oracle ADFによって提供されるADFスキンにおけるカスタマイズのレベルの詳細、および拡張するADFスキンの推奨事項は、「Oracle ADFで提供されるADFスキン」を参照してください。
デフォルトでは、JDeveloperのエディタが、org.apache.myfaces.trinidad.desktopレンダー・キット用のADFスキンを作成します。render kitは、ADF Facesコンポーネント・マップを、特定のクライアントに適したコンポーネント・タグにマップする方法を定義します。
ADFスキンの作成後、デザイン・エディタなどの用意されているエディタを使用して、ADF FacesおよびADFデータ視覚化コンポーネントが公開するセレクタの値を変更できます。そのようにしない場合は、作成したADFスキンによって、拡張元のADFスキンと同じ外観が定義されます。詳細は、「コンポーネント固有セレクタの使用」 を参照してください。
Skyros ADFスキンから拡張されたADFスキンを作成する場合、デザイン・エディタを有効にします。このタブは、コントロールを使用して多くの頻繁に使用するセレクタのプロパティをセットできる概要ペインを提供します。デザイン・エディタの使用の詳細は、「ADFスキン・デザイン・エディタの使用」を参照してください。
「ディレクトリ」フィールドで提示されたデフォルト値を受け入れると、拡張子が.cssのファイルが、プロジェクト内のskinsディレクトリのサブディレクトリに生成されます。
図5-1に示すように、Altaスキンを拡張するADFスキンがセレクタ・エディタで開きます。セレクタ・エディタは、Skyros ADFスキンから拡張されたADFスキンを作成した場合にも利用可能です。
図5-1 セレクタ・エディタでAltaから拡張される新規に作成されたADFスキン
図5-2に示すように、Skyros ADFスキンを拡張したADFスキンがデザイン・エディタで開きます。
図5-2 「設計」タブのSkryosから拡張される新規に作成されたADFスキン
trinidad-skins.xmlファイルは、例5-1に示すように、作成したADFスキンのメタデータを含めるように変更されます。この例では、SkyrosファミリのADFスキンから拡張したADFスキンのエントリを示しています。例5-1には、このADFスキンと関連付けられたリソース・バンドルおよびレンダー・キットを指定する値も含まれます。リソース・バンドルの詳細は、「ADFスキンのテキストの使用」を参照してください。
「ADFスキンの作成」ダイアログで「このプロジェクトのデフォルト・スキン・ファミリとして使用」チェック・ボックスを選択すると、trinidad-config.xmlファイルは、新規ADFスキンがアプリケーションのデフォルトのスキンになるように変更されます。これは、JDeveloperからアプリケーションを実行した場合、アプリケーションは新規に作成されたADFスキンを使用することを意味します。詳細は、「WebアプリケーションへのADFスキンの適用」を参照してください。次の例に、例5-1のADFスキンがアプリケーションのデフォルトとなっているtrinidad-config.xmlファイルを示します。
<?xml version="1.0" encoding="windows-1252"?> <trinidad-config xmlns="http://myfaces.apache.org/trinidad/config"> <skin-family>skin2</skin-family> </trinidad-config>
ADFスキンのソース・ファイルには、次の例で示すように、コメントおよびネームスペース参照が含まれています。ADFスキンのソース・ファイル内のこれらのエントリにより、このファイルは、ファイル拡張子が.cssの非ADFスキン・ファイルと区別されます。ADFスキンのデザインまたはセレクタ・エディタで開くために、これらのエントリがソース・ファイルで必要となります。
/**ADFFaces_Skin_File / DO NOT REMOVE**/ @namespace af "http://xmlns.oracle.com/adf/faces/rich"; @namespace dvt "http://xmlns.oracle.com/dss/adf/faces";
プロジェクトでADFスキンを初めて作成すると、図5-1に示すように、リソース・バンドル・ファイル(skinBundle.properties)が生成されます。リソース・バンドルの使用の詳細は、「ADFスキンのテキストの使用」を参照してください。
例5-1 trinidad-skins.xmlファイル
<?xml version="1.0" encoding="windows-1252"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
....
<skin>
<id>skin2.desktop</id>
<family>skin2</family>
<extends>skyros-v1.desktop</extends>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/skin2/skin2.css</style-sheet-name>
<bundle-name>resources.skinBundle</bundle-name>
</skin>
</skins>
@importルールを使用して、JDeveloperプロジェクト内の他のADFスキンを使用するADFスキンにインポートできます。これにより、後者のADFスキンで定義されたスタイル・プロパティが使用するADFスキンで利用可能になります。次の例に、ADFスキン(skinA)を現在のADFスキンにインポートする有効な構文を示します。
/** Use the following syntax if skinA.css is in the same directory **/
@import "skinA.css";
@import url("skinA.css");
/** Use the following syntax if skinA.css is in another directory **/
@import "../skinA/skinA.css";
@import url("../skinA/skinA.css");
次の、2つのADFスキンを現在のADFスキンにインポートする例に示すように、@importルールは、すべての@charsetルールに従い、他のすべての@ルールおよびADFスキン内のルール・セットに優先する必要があります。
@charset "UTF-8";
@import url("../skinA/skinA.css");
@import url("../skinB/skinB.css");
/**ADFFaces_Skin_File / DO NOT REMOVE**/
@namespace af "http://xmlns.oracle.com/adf/faces/rich";
@namespace dvt "http://xmlns.oracle.com/dss/adf/faces";
af|inputText{
background-color: Green;
}
...
JARファイルにパッケージ化されたADFスキンをJDeveloperプロジェクトに追加できます。JARファイルからのADFスキンをプロジェクトに追加すると、「ADFスキン・ファイルの作成」で説明しているように、インポートしたADFスキンを新規ADFスキンの作成時に拡張できます。
ADFスキンのパッケージ化の使用に推奨されるJARファイルのタイプは、ADFライブラリJARファイルです。このタイプのJAR ファイルにADFスキンをパッケージ化する方法の詳細は、「ADFスキンのADFライブラリJARへのパッケージ化」を参照してください。
JARファイルにパッケージ化されたADFスキンをプロジェクトに追加できます。
ADFライブラリJARからADFスキンを追加するには、次のようにします。
「ADFスキン・ファイルの作成」で説明しているように、JARファイルから追加したADFスキンは、新規ADFスキンの作成時に「拡張対象」リストに表示されます。JARファイルから追加したADFスキンを拡張して新規ADFスキンを作成すると、追加したADFスキンの名前が、セレクタ・エディタのプレビュー・ペインの「拡張スキン」リストに表示されます。たとえば、図5-3では、skin2.css ADFスキンは、JARファイルからプロジェクトに追加されたADFスキン、jarredskin.cssを拡張して作成されました。
図5-3 「拡張スキン」リスト内のインポートされたADFスキン
追加したADFスキンで定義されているプロパティは、青い上矢印付きで「Properties」ウィンドウに表示されます。図5-4に示すように、プロパティの上にマウスを置くと、継承関係に関する情報ヒントが表示されます。
図5-4 インポートされたADFスキンから継承されたプロパティ
