| Oracle® Fusion Middleware Oracle Application Development Frameworkスキン・エディタ・ユーザーズ・ガイド 11gリリース2(11.1.2.3.0) B66161-03 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Frameworkスキン・エディタ・ユーザーズ・ガイド 11gリリース2(11.1.2.3.0) B66161-03 |
|
前 |
次 |
この章では、ADFスキン・エディタおよびJDeveloperでADFスキンのソース・ファイルを作成する方法について説明します。また、以前のリリースのJDeveloperで作成されたアプリケーションまたはプロジェクトをADFスキン・エディタで開く方法、およびADFライブラリのJARファイルからADFスキンをインポートする方法に関する情報も提供しています。
この章には、次の項があります。
ADFスキンでは、ADF FacesコンポーネントおよびADFデータ視覚化コンポーネントによって公開されるセレクタのプロパティを定義します。JDeveloperまたはADFスキン・エディタのビジュアル・エディタを使用して、ADFスキンのソース・ファイルを作成できます。ADFスキンのソース・ファイルはCSSファイルの一種であるため、エディタを使用しないで作成できます。ただし、エディタを使用すると、関連する構成ファイルが(ADFスキンを初めて作成したときに)作成されたり、(以降のADFスキンを作成するときに)変更されます。これらの構成ファイルの詳細は、第11.3項「ADFスキンの構成ファイル」を参照してください。
ADFスキン・アプリケーションおよびADFスキン・プロジェクトをADFスキン・エディタで新規作成できます。
この項では、ADFスキン・アプリケーションとその中のプロジェクトをADFスキン・エディタで作成する方法について説明します。
新規ADFスキン・アプリケーションを作成するには、次のようにします。
「ファイル」→「新規」→「ADFスキン・アプリケーション」を選択して、「ADFスキン・アプリケーションの作成」ダイアログを開きます。
「ADFスキン・アプリケーションの作成」ダイアログで、名前やディレクトリなど、アプリケーションの詳細を入力します。ウィザードに関するヘルプを表示するには、[F1]を押します。
「次へ」をクリックして「ADFスキン・プロジェクト」ページを開き、ここでADFスキン・プロジェクトの名前および保存先のディレクトリを指定します。
「ターゲット・アプリケーション・リリース」リストで、スキニングするアプリケーションで使用するOracle ADFのリリースを選択します。
ADFスキン・エディタによって、指定したリリースのADFスキン・プロジェクトが適切に構成されます。たとえば、第4.4.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.4.1項「ADFスキン・エディタでADFスキンを作成する方法」で説明しているように、ADFスキン・エディタによって、展開可能なADFスキンのリストがフィルタリングされます。ADFスキン・エディタはスキン・セレクタのリストもフィルタリングして、ターゲットにするリリースがサポートするスキン・セレクタのみを表示します。以前のリリースのADFスキン・プロジェクトをターゲットにした場合は、その後のリリースで導入されたスキン・セレクタは表示されません。
作業が完了したら、「終了」をクリックします。
アプリケーション・ナビゲータに、新規ADFスキン・プロジェクトが表示されます。このプロジェクトは、あらかじめ設定されているデフォルト・プロパティをすべて継承します。プロジェクトのプロパティを変更する場合は、ファイル名をダブルクリックするか、右クリックして「プロジェクト・プロパティ」を選択します。
前のリリースのJDeveloperで作成されたアプリケーションまたはプロジェクトを開くと、ADFスキン・エディタにより、プロジェクトをJDeveloper 11gフォーマットに移行するよう求められます。プロジェクトのコンテンツによっては、ADFスキン・エディタによって、一部の特定ソース・ファイルも移行するよう求められることがあります。プロジェクトをADFスキン・エディタで開いたり、ADFスキン・エディタを使用して移行する前に、プロジェクトのバックアップ・コピーを作成することをお薦めします。
ADF FacesコンポーネントおよびADFデータ視覚化コンポーネントが実行時にレンダリングされる方法を定義するADFスキン・ファイルを、ADFスキン・エディタまたはJDeveloperで作成できます。作成するADFスキンは、Oracle ADFによって提供されるADFスキン、または作成した既存のADFスキンのいずれかを拡張したものである必要があります。Oracle ADFによって提供されるADFスキンの間では、ADF FacesコンポーネントおよびADFデータ視覚化コンポーネントに対して定義されているカスタマイズのレベルが異なっています。Oracle ADFが提供するADFスキン間の継承関係の詳細は、第1.5項「Oracle ADFで提供されるADFスキンの継承関係」を参照してください。Oracle ADFによって提供されるADFスキンにおけるカスタマイズのレベルの詳細、および拡張するADFスキンの推奨事項は、第11.4項「Oracle ADFで提供されるADFスキン」を参照してください。
ADFスキン・エディタおよびJDeveloperのビジュアル・エディタでは、org.apache.myfaces.trinidad.desktopレンダー・キット用のADFスキンの作成をサポートしています。
JDeveloperおよびADFスキン・エディタのソース・エディタを使用して、他のレンダー・キット用のADFスキンを作成できます。詳細は、第11.2項「ADFスキニング・フレームワークおよびサポートされているレンダー・キット」を参照してください。
ADFスキンを作成したら、ADF FacesコンポーネントとADFデータ視覚化コンポーネントが公開するセレクタの値を設定します。そのようにしない場合は、作成したADFスキンによって、拡張元のADFスキンと同じ外観が定義されます。詳細は、第5章「コンポーネント固有セレクタの使用」を参照してください。
ADFスキン・エディタでADFスキンを作成できます。
ADFスキン・エディタでADFスキンを作成するには、次のようにします。
アプリケーション・ナビゲータで、新規ADFスキンを作成するプロジェクトを右クリックし、「新規」→「ADFスキン・ファイル」を選択します。
「ADFスキン・ファイルの作成」ダイアログで、次を入力します。
ファイル名: 新規ADFスキンのファイル名を入力します。
ディレクトリ: ADFスキンのCSSソース・ファイルを保存するディレクトリへのパスを入力するか、エディタが提示したデフォルトのディレクトリを受け入れます。
ファミリ: スキンのファミリ名の値を入力します。
入力フィールドに値を入力して、新規ファミリを定義するか、または既存のファミリを選択できます。ファミリにより、アプリケーションのADFスキンがグループ化されます。ADFスキンの特定のファミリを使用するようにアプリケーションを構成します。
入力する値は一意である必要があります。この値を参照して実行時にアプリケーションのADFスキンを選択するEL式を使用できます。
このプロジェクトのデフォルト・スキン・ファミリとして使用: ADFスキンをすぐにプロジェクトのデフォルトにしない場合は、このチェック・ボックスの選択を解除します。
拡張対象: 拡張するADFスキンを選択します。ADF Facesには、拡張可能な数多くのADFスキンが備えられています。拡張するADFスキンの詳細および推奨事項は、第11.4項「Oracle ADFで提供されるADFスキン」を参照してください。
|
注意: 第4.2項「ADFスキン・アプリケーションおよびADFスキン・プロジェクトの作成」で説明しているように、ターゲット・アプリケーション・リリースとして選択した値によって、拡張できるADFスキンのリストが決定されます。 |
スキンID: 「ファイル名」に入力した値、およびADFスキンを作成する対象となるレンダー・キットのID(desktop)が連結されて表示される読取り専用フィールドです。これを拡張して別のADFスキンを作成する場合は、「拡張対象」リストからこの値を選択します。
ADFスキン・エディタにより、この値がtrinidad-skins.xmlファイル内の<id>要素に書き込まれます。
「OK」をクリックします。
JDeveloperでADFスキンを作成できます。
JDeveloperでADFスキンを作成するには、次のようにします。
アプリケーション・ナビゲータで、ユーザー・インタフェースのコードが含まれるプロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「Web層」を展開し、「JSF/Facelets」、「ADFスキン」の順に選択し、「OK」をクリックします。
「ADFスキン・ファイルの作成」ダイアログで、次を入力します。
ファイル名: 新規ADFスキンのファイル名を入力します。
ディレクトリ: ADFスキンのCSSソース・ファイルを保存するディレクトリへのパスを入力するか、エディタが提示したデフォルトのディレクトリを受け入れます。
ファミリ: スキンのファミリ名の値を入力します。
入力フィールドに値を入力して、新規ファミリを定義するか、または既存のファミリを選択できます。ファミリにより、アプリケーションのADFスキンがグループ化されます。ADFスキンの特定のファミリを使用するようにアプリケーションを構成します。
入力する値は一意である必要があります。この値を参照して実行時にアプリケーションのADFスキンを選択するEL式を使用できます。
このプロジェクトのデフォルト・スキン・ファミリとして使用: ADFスキンをすぐにプロジェクトのデフォルトにしない場合は、このチェック・ボックスの選択を解除します。このチェック・ボックスを選択すると、第4.4.3項「ADFスキンを作成した場合の処理」で説明しているように、trinidad-config.xmlファイルが更新されます。
拡張対象: 拡張するADFスキンを選択します。ADF Facesには、拡張可能な数多くのADFスキンが備えられています。拡張するADFスキンの詳細および推奨事項は、第11.4項「Oracle ADFで提供されるADFスキン」を参照してください。
スキンID: 「ファイル名」に入力した値、およびADFスキンを作成する対象となるレンダー・キットのID(desktop)が連結されて表示される読取り専用フィールドです。これを拡張して別のADFスキンを作成する場合は、「拡張対象」リストからこの値を選択します。
JDeveloperによって、この値がtrinidad-skins.xmlファイル内の<id>要素に書き込まれます。
「OK」をクリックします。
「ディレクトリ」フィールドで提示されたデフォルト値を受け入れると、拡張子が.cssのファイルが、プロジェクト内のskinsディレクトリのサブディレクトリに生成されます。このファイルは、図4-1に示すように、ADFスキンのビジュアル・エディタで開かれます。
trinidad-skins.xmlファイルは、例4-1に示すように、作成した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>fusionFx-v1.desktop</extends>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/skin2/skin2.css</style-sheet-name>
</skin>
</skins>
「新規ADFスキン・ファイルの作成」ダイアログで「このプロジェクトのデフォルト・スキン・ファミリとして使用」チェック・ボックスを選択すると、trinidad-config.xmlファイルは、新規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-1に示すように、リソース・バンドル・ファイル(skinBundle.properties)が生成されます。リソース・バンドルの使用の詳細は、第7章「ADFスキンのテキストの使用」を参照してください。
<version>要素を使用して、trinidad-skins.xmlファイルでADFスキンのバージョン番号を指定できます。trinidad-skins.xmlファイル内の<family>要素の値が同じであるADFスキンを区別する場合はこの機能を使用します。特定のADFスキンを使用するようにアプリケーションを構成する場合は、第10.4項「WebアプリケーションへのADFスキンの適用」で説明しているように、trinidad-config.xmlファイルで値を指定して行うことに注意してください。
trinidad-skins.xmlファイル内の<version>要素に値を入力して、ADFスキンのバージョンを指定します。
ADFスキンをバージョニングするには、次のようにします。
アプリケーション・ナビゲータで、trinidad-skins.xmlファイルをダブルクリックします。これは、デフォルトではWeb Content/WEB-INFノードにあります。
「構造」ウィンドウで、バージョニングするADFスキンのskinノードを右クリックし、「skinの中に挿入」→「version」を選択します。
trinidad-config.xmlファイルの<skin-version>要素に値が指定されていない場合にこのバージョンのADFスキンがアプリケーションで使用されるようにするには、第10.4項「WebアプリケーションへのADFスキンの適用」で説明しているように、バージョンの挿入のためのダイアログで、デフォルト・リストからtrueを選択します。
名前フィールドに値を入力します。たとえば、ADFスキンの最初のバージョンである場合はv1と入力します。
「OK」をクリックします。
例4-4に、ADFスキンの3つのファイル(skin1.css、skin2.cssおよびskin3.css)を参照するtrinidad-skins.xmlの例を示します。これらの各ADFスキンの<family>要素は同じ値(test)になっています。<version>要素の子要素の値によって、これらのADFスキンがそれぞれ区別されます。実行時に、アプリケーションのtrinidad-config.xmlファイルにおける<skin-family>要素の値としてtestが指定されたアプリケーションでは、skin3を使用します。これは、このADFスキンがtrinidad-skins.xmlファイルでデフォルト・スキンとして構成されているためです(<default>true</default>)。この動作は、第10.4項「WebアプリケーションへのADFスキンの適用」で説明しているように、trinidad-config.xmlファイル内の<skin-version>要素に値を指定してオーバーライドできます。
例4-4 バージョニングされたADFスキン・ファイルが含まれたtrinidad-skins.xml
<?xml version="1.0" encoding="windows-1252"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>skin1.desktop</id>
<family>test</family>
<extends>fusionFx-simple-v1.desktop</extends>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/skin1/skin1.css</style-sheet-name>
<version>
<name>v1</name>
</version>
</skin>
<skin>
<id>skin2.desktop</id>
<family>test</family>
<extends>skin1.desktop</extends>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/skin2/skin2.css</style-sheet-name>
<version>
<name>v2</name>
</version>
</skin>
<skin>
<id>skin3.desktop</id>
<family>test</family>
<extends>skin2.desktop</extends>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/skin3/skin3.css</style-sheet-name>
<version>
<default>true</default>
<name>v3</name>
</version>
</skin>
</skins>
ワーキング・セットによって、プロジェクトでファイルのサブセットを表示するようにアプリケーション・ナビゲータを構成できます。これは特に、大規模なプロジェクトを操作する際に便利です。独自のワーキング・セットを定義するまでは、使用可能な唯一のワーキング・セットは「Default」であり、これは現在のアプリケーションのすべてのファイルが含まれたワーキング・セットです。
ワーキング・セットを定義するには、「アプリケーション・ナビゲータ」のファイルまたはコンテナから選択するか、「ワーキング・セットの管理」ダイアログで対象とするフィルタ・パターンと対象外とするフィルタ・パターンを指定します。
アプリケーション・ナビゲータにあるオブジェクトをワーキング・セットにグループ化するには、次のようにします。
アプリケーション・ナビゲータで、新規のワーキング・セットに含めるオブジェクトを選択します。
アプリケーション・ナビゲータで、「ワーキング・セット」アイコンをクリックし、「選択から新規」を選択します。
これにより「別名保存」ダイアログが開きます。詳細は、[F1]を押すか、「別名保存」ダイアログ内で「ヘルプ」をクリックします。
ワーキング・セットの名前を入力し、「OK」をクリックします。
ファイル・フィルタとディレクトリ・フィルタを定義してワーキング・セットを作成するには、次のようにします。
アプリケーション・ナビゲータで、「ワーキング・セット」アイコンをクリックし、「ワーキング・セットの管理」を選択します。
この操作により、「ワーキング・セット」ダイアログが開きます。左側のツリーを使用して、含めるプロジェクトを選択します。右側のパネルで、現在のプロジェクトに含めるファイルを選択します。詳細は、[F1]を押すか、「ワーキング・セット」ダイアログ内で「ヘルプ」をクリックします。
「別名保存」をクリックして、ワーキング・セットを保存します。
「ログ」ウィンドウの検索結果からワーキング・セットを作成するには、次のようにします。
「ログ」ウィンドウで右クリックし、コンテキスト・メニューから「ワーキング・セットとして保存」を選択します。
「ワーキング・セットの作成」ダイアログで、ワーキング・セットの名前を入力します。
現在使用しているワーキング・セットを確認するには次のようにします。
アプリケーション・ナビゲータで、マウスを「ワーキング・セット」アイコンの上に置きます。現在のワーキング・セットの名前がツールチップとして表示されます。または、「ワーキング・セット」アイコンをクリックして、アクティブ・ワーキング・セットがチェックされているメニューを表示します。
アクティブ・ワーキング・セットを変更するには、次のようにします。
アプリケーション・ナビゲータで、「ワーキング・セット」アイコンをクリックし、開くワーキング・セットを選択します。
このワーキング・セットに含まれていないファイルはビューから削除されます。
ワーキング・セットのファイルおよびプロジェクトを編集するには、次のようにします。
アプリケーション・ナビゲータで、「ワーキング・セット」アイコンをクリックし、「ワーキング・セットの管理」を選択します。
この操作により、「ワーキング・セット」ダイアログが開きます。詳細は、[F1]を押すか、「ワーキング・セット」ダイアログ内で「ヘルプ」をクリックします。
「ワーキング・セット」ドロップダウン・リストから、変更するワーキング・セットを選択します。
必要に応じて変更を行います。
アプリケーション・ナビゲータでビューをリストアして、すべてのファイルを表示するには次のようにします。
アプリケーション・ナビゲータで、「ワーキング・セット」アイコンをクリックし、「(すべてのファイル)」を選択します。
JARファイルにパッケージ化されたADFスキンをプロジェクトにインポートできます。ADFスキンをプロジェクトにインポートすると、第4.4項「ADFスキン・ファイルの作成」で説明しているように、インポートしたADFスキンを新規ADFスキンの作成時に拡張できます。
ADFスキンのパッケージ化の使用に推奨されるJARファイルのタイプは、ADFライブラリJARファイルです。このタイプのJAR ファイルにADFスキンをパッケージ化する方法の詳細は、第10.3項「ADFスキンのADFライブラリJARへのパッケージ化」を参照してください。
他のタイプのJARファイルにパッケージ化したADFスキンをインポートできます。新規ADFスキンを作成するときの拡張元の選択肢として、これらのADFスキンがユーザー・インタフェースに表示されるようにするには、JARファイルのディレクトリ構造が例4-5で示しているものと同じである必要があります。JARファイルにはoracle.adf.common.services.ResourceService.svaファイルも含まれている必要があります。このファイルは、第10.3項「ADFスキンのADFライブラリJARへのパッケージ化」の指示に従って生成できます。
インポートするADFスキンが参照するイメージは、例4-5に示すように、adfという名前のディレクトリの下にある必要があります。
例4-5 非ADFライブラリJARファイルに必要なディレクトリ構造およびファイル
META-INF
| MANIFEST.MF
| oracle.adf.common.services.ResourceService.sva
| trinidad-skins.xml
|
+---adf
| \---skins
| \---jarredskin
| \---images
| \---af_column
| sort_des_selected.png
|
\---skins
\---jarredskin
jarredskin.css
JARファイルにパッケージ化されたADFスキンをプロジェクトにインポートできます。
ADFライブラリJARからADFスキンをインポートするには、次のようにします。
メイン・メニューから「アプリケーション」→「プロジェクト・プロパティ」を選択します。
「プロジェクト・プロパティ」ダイアログで、「ライブラリとクラスパス」ページを選択し、「JAR/ディレクトリの追加」をクリックします。
「アーカイブまたはディレクトリの追加」ダイアログで、インポートするADFスキンが含まれているJARファイルに移動し、「選択」をクリックします。
JARファイルが「クラスパス・エントリ」リストに表示されます。
終わったら、「OK」をクリックします。
JARファイルからインポートしたADFスキンは、第4.4項「ADFスキン・ファイルの作成」で説明しているように、新規ADFスキンを作成するときに「拡張対象」リストに表示されます。JARファイルからインポートしたADFスキンを拡張して新規ADFスキンを作成すると、インポートしたADFスキンの名前が、プレビュー・ペインの「拡張スキン」リストに表示されます。たとえば、図4-2では、skin2.css ADFスキンは、JARファイルからプロジェクトにインポートされたADFスキン、jarredskin.cssを拡張して作成されました。
インポートしたADFスキンで定義されているプロパティは、青い上矢印付きでプロパティ・インスペクタに表示されます。図4-3に示すように、プロパティの上にマウスを置くと、継承関係に関する情報ヒントが表示されます。
