| Oracle® Fusion Middleware Oracle ADFスキン・エディタによるADFスキンの作成 12c (12.1.2) E48016-01 |
|
 前 |
 次 |
この章では、ADFスキン・エディタおよびJDeveloperでADFスキンのソース・ファイルを作成する方法について説明します。また、以前のリリースのJDeveloperで作成されたアプリケーションまたはプロジェクトをADFスキン・エディタで開く方法、およびADFライブラリのJARファイルからADFスキンをインポートする方法に関する情報も提供しています。
この章には次の項が含まれます:
ADFスキンでは、ADF FacesコンポーネントおよびADFデータ視覚化コンポーネントによって公開されるセレクタのプロパティを定義します。JDeveloperまたはADFスキン・エディタのエディタを使用して、ADFスキンのソース・ファイルを作成できます。ADFスキンのソース・ファイルはCSSファイルの一種であるため、エディタを使用しないで作成できます。ただし、エディタを使用すると、関連する構成ファイルが(ADFスキンを初めて作成したときに)作成されたり、(以降のADFスキンを作成するときに)変更されます。これらの構成ファイルの詳細は、第12.3項「ADFスキンの構成ファイル」を参照してください。
ADFスキン・アプリケーションおよびADFスキン・プロジェクトをADFスキン・エディタで新規作成できます。
この項では、ADFスキン・アプリケーションとアプリケーションの中のプロジェクトをADFスキン・エディタで作成する方法について説明します。
新規ADFスキン・アプリケーションを作成するには、次のようにします。
メイン・メニューから、「ファイル」→「新規」→「ADFスキン・アプリケーション」を選択します。
「ADFスキン・アプリケーションの作成」ダイアログで、名前やディレクトリなど、アプリケーションの詳細を入力します。ウィザードに関するヘルプを表示するには、[F1]を押します。
「次へ」をクリックして「ADFスキン・プロジェクト」ページを開き、ここでADFスキン・プロジェクトの名前および保存先のディレクトリを指定します。
「ターゲット・アプリケーション・リリース」リストで、スキニングするアプリケーションで使用するOracle ADFのリリースを選択します。
ADFスキン・エディタによって、指定したリリースのADFスキン・プロジェクトが適切に構成されます。たとえば、第4.3.1項「ADFスキン・エディタでADFスキンを作成する方法」で説明しているように、ADFスキン・エディタによって、展開可能なADFスキンのリストがフィルタリングされます。ADFスキン・エディタはスキン・セレクタのリストもフィルタリングして、ターゲットにするリリースがサポートするスキン・セレクタのみを表示します。以前のリリースのADFスキン・プロジェクトをターゲットにした場合は、その後のリリースで導入されたスキン・セレクタは表示されません。
作業が完了したら、「終了」をクリックします。
「アプリケーション」ウィンドウを使用して、ADFスキン・アプリケーションの開発中に使用するADFスキン・プロジェクト(ADFスキンのソース・ファイル、イメージおよび関連ファイルのコレクション)を管理します。
新規の空のADFスキン・プロジェクトをADFスキン・アプリケーションで作成できます。
すべてのADFスキン・プロジェクトは、「デフォルト・プロジェクト・プロパティ」ダイアログで指定された設定を継承します。ADFスキン・プロジェクトは、作成するとすぐにアクティブなADFスキン・アプリケーションに追加されます。
新規ADFスキン・プロジェクトを作成するには、次のようにします。
「アプリケーション」ウィンドウで、プロジェクトが表示されるADFスキン・アプリケーションを選択します。
「ファイル」→「新規」→「ADFスキン・プロジェクト」を選択して、「ADFスキン・プロジェクトの作成」ダイアログを開きます。
「ADFスキン・プロジェクトの作成」ダイアログで、名前やディレクトリなど、プロジェクトの詳細を入力します。
「ターゲット・アプリケーション・リリース」リストで、スキニングするアプリケーションで使用するOracle ADFのリリースを選択します。
ADFスキン・エディタによって、指定したリリースのADFスキン・プロジェクトが適切に構成されます。たとえば、第4.3.1項「ADFスキン・エディタでADFスキンを作成する方法」で説明しているように、ADFスキン・エディタによって、展開可能なADFスキンのリストがフィルタリングされます。ADFスキン・エディタはスキン・セレクタのリストもフィルタリングして、ターゲットにするリリースがサポートするスキン・セレクタのみを表示します。以前のリリースのADFスキン・プロジェクトをターゲットにした場合は、その後のリリースで導入されたスキン・セレクタは表示されません。
作業が完了したら、「終了」をクリックします。
新規のADFスキンが「アプリケーション」ウィンドウに表示されます。このプロジェクトは、あらかじめ設定されているデフォルト・プロパティをすべて継承します。プロジェクトのプロパティを変更する場合は、プロジェクト・ノードをダブルクリックするか、右クリックして「プロジェクト・プロパティ」を選択します。
ADF FacesコンポーネントおよびADFデータ視覚化コンポーネントが実行時にレンダリングされる方法を定義するADFスキン・ファイルを、ADFスキン・エディタまたはJDeveloperで作成できます。作成するADFスキンは、Oracle ADFによって提供されるADFスキン、または作成した既存のADFスキンのいずれかを拡張したものである必要があります。Oracle ADFによって提供されるADFスキンの間では、ADF FacesコンポーネントおよびADFデータ視覚化コンポーネントに対して定義されているカスタマイズのレベルが異なっています。Oracle ADFが提供するADFスキン間の継承関係の詳細は、第1.4項「Oracle ADFで提供されるADFスキンの継承関係」を参照してください。Oracle ADFによって提供されるADFスキンにおけるカスタマイズのレベルの詳細、および拡張するADFスキンの推奨事項は、第12.4項「Oracle ADFで提供されるADFスキン」を参照してください。
デフォルトでは、ADFスキン・エディタおよびJDeveloper内のデザインおよびセレクタ・エディタが、org.apache.myfaces.trinidad.desktopレンダー・キット用のADFスキンを作成します。render kitは、ADF Facesコンポーネント・マップを、特定のクライアントに適したコンポーネント・タグにマップする方法を定義します。JDeveloperおよびADFスキン・エディタのソース・エディタを使用して、他のレンダー・キット用のADFスキンを作成できます。たとえば、ハンドヘルド・デバイスでレンダリングされるアプリケーション用のADFスキンを作成する場合、org.apache.myfaces.trinidad.pdaレンダー・キット用のADFスキンを作成できます。詳細は、第12.2項「ADFスキニング・フレームワークおよびサポートされているレンダー・キット」を参照してください。
ADFスキンの作成後、デザイン・エディタなどの用意されているエディタを使用して、ADF FacesおよびADFデータ視覚化コンポーネントが公開するセレクタの値を変更できます。そのようにしない場合は、作成したADFスキンによって、拡張元のADFスキンと同じ外観が定義されます。詳細は、第5章「コンポーネント固有セレクタの使用」を参照してください。
SkyrosまたはFusion SimpleファミリのADFスキンから拡張されたADFスキンを作成する場合、デザイン・エディタを有効にします。このタブは、コントロールを使用して多くの頻繁に使用するセレクタのプロパティをセットできる概要ペインを提供します。作成するADFスキンがFusion SimpleファミリのADFスキンの場合、デザイン・エディタに加えてイメージ・エディタを有効にします。イメージ・エディタは、Fusion SimpleファミリのADFスキンに関連付けられたイメージを管理するための追加機能を提供します。このエディタは、ADFスキンがSkyrosファミリのADFスキンから拡張されている場合は表示されません。イメージ・エディタの使用の詳細は、第6.5項「イメージ・エディタの使用」を参照してください。デザイン・エディタの使用の詳細は、第3.2項「ADFスキン・デザイン・エディタの使用」を参照してください。
ADFスキン・エディタでADFスキンを作成できます。
ADFスキン・エディタでADFスキンを作成するには、次のようにします。
「アプリケーション」ウィンドウで、新しいADFスキンを作成するプロジェクトを右クリックし、「新規作成」→「ADFスキン・ファイル」を選択します。
「ADFスキンの作成」ダイアログの「スキン・ファイル」ページで、次を入力します。
ファイル名: 新規ADFスキンのファイル名を入力します。
ディレクトリ: ADFスキンのCSSソース・ファイルを保存するディレクトリへのパスを入力するか、エディタが提示したデフォルトのディレクトリを受け入れます。
ファミリ: スキンのファミリ名の値を入力します。
入力フィールドに値を入力して、新規ファミリを定義するか、または既存のファミリを選択できます。ファミリにより、アプリケーションのADFスキンがグループ化されます。ADFスキンの特定のファミリを使用するようにアプリケーションを構成します。
入力する値は一意である必要があります。この値を参照して実行時にアプリケーションのADFスキンを選択するEL式を使用できます。
このプロジェクトのデフォルト・スキン・ファミリとして使用: ADFスキンをすぐにプロジェクトのデフォルトにしない場合は、このチェック・ボックスの選択を解除します。
「ADFスキンの作成」ダイアログの「基本スキン」ページで、次を入力します。
Show Latest Versions Only: このチェック・ボックスをクリアして、すべての利用可能なバージョンのADFスキンを表示します。
Available Skins: 拡張するADFスキンを選択します。ADF Facesには、拡張可能な数多くのADFスキンが備えられています。このリストには、このプロジェクトで以前に作成したすべてのADFスキンも含まれます。拡張するADFスキンの詳細および推奨事項は、第12.4項「Oracle ADFで提供されるADFスキン」を参照してください。
|
注意: 第4.2項「ADFスキン・アプリケーションおよびADFスキン・プロジェクトの作成」で説明しているように、ターゲット・アプリケーション・リリースとして選択した値によって、拡張できるADFスキンのリストが決定されます。 |
スキンID: 「ファイル名」に入力した値、およびADFスキンを作成する対象となるレンダー・キットのID(desktop)が連結されて表示される読取り専用フィールドです。これを拡張して別のADFスキンを作成する場合は、「拡張対象」リストからこの値を選択します。
ADFスキン・エディタにより、この値がtrinidad-skins.xmlファイル内の<id>要素に書き込まれます。
「終了」をクリックします。
JDeveloperでADFスキンを作成できます。
JDeveloperでADFスキンを作成するには、次のようにします。
「アプリケーション」ウィンドウで、ユーザー・インタフェースのコードが含まれるプロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「Web層」を展開し、「JSF/Facelets」、「ADFスキン」の順に選択し、「OK」をクリックします。
「ADFスキンの作成」ダイアログの「スキン・ファイル」ページで、次を入力します。
ファイル名: 新規ADFスキンのファイル名を入力します。
ディレクトリ: ADFスキンのCSSソース・ファイルを保存するディレクトリへのパスを入力するか、エディタが提示したデフォルトのディレクトリを受け入れます。
ファミリ: スキンのファミリ名の値を入力します。
入力フィールドに値を入力して、新規ファミリを定義するか、または既存のファミリを選択できます。ファミリにより、アプリケーションのADFスキンがグループ化されます。ADFスキンの特定のファミリを使用するようにアプリケーションを構成します。
入力する値は一意である必要があります。この値を参照して実行時にアプリケーションのADFスキンを選択するEL式を使用できます。
このプロジェクトのデフォルト・スキン・ファミリとして使用: ADFスキンをすぐにプロジェクトのデフォルトにしない場合は、このチェック・ボックスの選択を解除します。このチェック・ボックスを選択すると、第4.3.3項「ADFスキンを作成した場合の処理」で説明しているように、trinidad-config.xmlファイルが更新されます。
「ADFスキンの作成」ダイアログの「基本スキン」ページで、次を入力します。
Show Latest Versions Only: このチェック・ボックスをクリアして、すべての利用可能なバージョンのADFスキンを表示します。
Available Skins: 拡張するADFスキンを選択します。ADF Facesには、拡張可能な数多くのADFスキンが備えられています。このリストには、このプロジェクトで以前に作成したすべてのADFスキンも含まれます。拡張するADFスキンの詳細および推奨事項は、第12.4項「Oracle ADFで提供されるADFスキン」を参照してください。
スキンID: 「ファイル名」に入力した値、およびADFスキンを作成する対象となるレンダー・キットのID(desktop)が連結されて表示される読取り専用フィールドです。これを拡張して別のADFスキンを作成する場合は、「拡張対象」リストからこの値を選択します。
JDeveloperによって、この値がtrinidad-skins.xmlファイル内の<id>要素に書き込まれます。
「終了」をクリックします。
「ディレクトリ」フィールドで提示されたデフォルト値を受け入れると、拡張子が.cssのファイルが、プロジェクト内のskinsディレクトリのサブディレクトリに生成されます。図4-1に示すように、Fusion SimpleまたはSkyrosファミリのADFスキンを拡張したADFスキンがデザイン・エディタで開きます。
図4-2に示すように、ADFスキンをSkyrosまたはFusion SimpleファミリのADFスキン以外から拡張したADFスキンが、セレクタ・エディタで開きます。セレクタ・エディタは、SkyrosまたはFusion SimpleファミリのADFスキンから拡張されたADFスキンを作成した場合にも利用可能です。
trinidad-skins.xmlファイルは、例4-1に示すように、作成したADFスキンのメタデータを含めるように変更されます。この例では、SkyrosファミリのADFスキンから拡張したADFスキンのエントリを示しています。例4-1には、このADFスキンと関連付けられたリソース・バンドルおよびレンダー・キットを指定する値も含まれます。リソース・バンドルの詳細は、第7章「ADFスキンのテキストの使用」を参照してください。また、サポートされているレンダー・キットの詳細は、第12.2項「ADFスキニング・フレームワークおよびサポートされているレンダー・キット」を参照してください。
例4-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>
「ADFスキンの作成」ダイアログで「このプロジェクトのデフォルト・スキン・ファミリとして使用」チェック・ボックスを選択すると、trinidad-config.xmlファイルは、新規ADFスキンがアプリケーションのデフォルトのスキンになるように変更されます。これは、JDeveloperからアプリケーションを実行した場合、アプリケーションは新規に作成されたADFスキンを使用することを意味します。詳細は、第11.4項「WebアプリケーションへのADFスキンの適用」を参照してください。例4-2に、例4-1のADFスキンをアプリケーションのデフォルトとするtrinidad-config.xmlファイルを示します。
例4-2 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スキンのソース・ファイルには、例4-3で示すように、コメントおよびネームスペース参照が含まれています。ADFスキンのソース・ファイル内のこれらのエントリにより、このファイルは、ファイル拡張子が.cssの非ADFスキン・ファイルと区別されます。ADFスキンのデザインまたはセレクタ・エディタで開くために、これらのエントリがソース・ファイルで必要となります。
例4-3 新規作成された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スキンを初めて作成すると、図4-2に示すように、リソース・バンドル・ファイル(skinBundle.properties)が生成されます。リソース・バンドルの使用の詳細は、第7章「ADFスキンのテキストの使用」を参照してください。
@importルールを使用して、ADFスキン・プロジェクト内の他の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スキンをADFスキン・プロジェクトにインポートできます。JARファイルからのADFスキンをプロジェクトにインポートすると、第4.3項「ADFスキン・ファイルの作成」で説明しているように、インポートしたADFスキンを新規ADFスキンの作成時に拡張できます。
ADFスキンのパッケージ化の使用に推奨されるJARファイルのタイプは、ADFライブラリJARファイルです。このタイプのJAR ファイルにADFスキンをパッケージ化する方法の詳細は、第11.3項「ADFスキンのADFライブラリJARへのパッケージ化」を参照してください。
JARファイルにパッケージ化されたADFスキンをプロジェクトにインポートできます。
ADFライブラリJARからADFスキンをインポートするには、次のようにします。
メイン・メニューから「アプリケーション」→「プロジェクト・プロパティ」を選択します。
「プロジェクト・プロパティ」ダイアログで、「ライブラリとクラスパス」ページを選択し、「JAR/ディレクトリの追加」をクリックします。
「アーカイブまたはディレクトリの追加」ダイアログで、インポートするADFスキンが含まれているJARファイルに移動し、「選択」をクリックします。
JARファイルが「クラスパス・エントリ」リストに表示されます。
終わったら、「OK」をクリックします。
JARファイルからインポートしたADFスキンは、第4.3項「ADFスキン・ファイルの作成」で説明しているように、新規ADFスキンを作成するときに「拡張対象」リストに表示されます。JARファイルからインポートしたADFスキンを拡張して新規ADFスキンを作成すると、インポートしたADFスキンの名前が、セレクタ・エディタのプレビュー・ペインの「拡張スキン」リストに表示されます。たとえば、図4-3では、skin2.css ADFスキンは、JARファイルからプロジェクトにインポートされたADFスキン、jarredskin.cssを拡張して作成されました。
インポートしたADFスキンで定義されているプロパティは、青い上矢印付きで「Properties」ウィンドウに表示されます。図4-4に示すように、プロパティの上にマウスを置くと、継承関係に関する情報ヒントが表示されます。
前のリリースのJDeveloperで作成されたアプリケーションまたはプロジェクトを開くと、ADFスキン・エディタにより、プロジェクトをJDeveloper 12cフォーマットに移行するよう求められます。プロジェクトのコンテンツによっては、ADFスキン・エディタによって、一部の特定ソース・ファイルも移行するよう求められることがあります。プロジェクトをADFスキン・エディタで開いたり、ADFスキン・エディタを使用して移行する前に、プロジェクトのバックアップ・コピーを作成することをお薦めします。
