| Oracle® Fusion Middleware Oracle ADFスキンの開発 12c (12.2.1.1) E77402-01 |
|
 前へ |
 次へ |
この章の内容は次のとおりです。
JDeveloperのADFスキンのエディタは、Oracle ADFを使用してビルドされたアプリケーション用のADFスキンを作成するツールです。ここでは、ADFスキニング・フレームワークによって公開されるセレクタを編集し、変更をプレビューし、完成したADFスキンをADFライブラリJARにパッケージ化するための多くのソース・エディタおよびビジュアル・エディタが提供されています。
JDeveloperのADFスキンのエディタの主な機能には次のものがあります。
ADFデザイン・エディタ (デザイン・エディタ)では、用意されたコントロールを使用してSkyrosまたはADFスキンから拡張されたADFスキンを宣言によって変更できます。
ADFスキン・セレクタ・エディタ(セレクタ・エディタ)では、セレクタ・ツリー内のADFスキニング・フレームワークによって公開されるすべてのセレクタを表示できます。
「プロパティ」ウィンドウでは、セレクタ・ツリーで選択したセレクタのプロパティを変更できます。
デフォルトでは、「ADFスキン・ファイルの作成」で説明しているように、Skyros ADFスキンから拡張するADFスキンを作成する場合にデザイン・エディタが開きます。このエディタは様々なコントロールを用意して、アプリケーションの最も一般的なスタイルに設定されたパーツを変更します。
デザイン・エディタの下部には、ボタン、リンクおよびパネル・アコーディオンなどの一般的に使用される様々なADF Facesコンポーネントをレンダリングする多くのサンプル・ページが表示されます。これらのページは、エディタの上部で様々なコントロールに加えた変更を反映するためにリフレッシュされます。「ブラウザでプレビュー」アイコンは、クリックするとブラウザでサンプル・ページがレンダリングされます。たとえば図4-1では、このアイコンをクリックするとInternet Explorerのサンプル・ページがレンダリングされます。「デザイン・エディタのサンプル・ページをレンダリングするブラウザの変更方法」で説明しているように、もう1つのブラウザでサンプル・ページをレンダリングする方法を選べます。
デザイン・エディタの上部には、アプリケーション・ページの様々な領域(ブランド領域、グローバル領域、ボタン、リンクおよびメニューなど)のセレクタを変更するためのコントロールがまとめられた様々なタブが表示されます。各タブ内に、カラー・ピッカー、入力テキスト・コンポーネントおよびダイアログを起動するためのリンクなどのユーザー・インタフェース・コントロールが表示されます。図4-1に、ADFスキンをSkyros ADFスキンから拡張した場合に表示される、デザイン・エディタ内の「一般」タブを示します。このタブでは、フィールドの横のドロップダウン矢印をクリックした場合に起動できるカラー・ピッカーがレンダリングされます。そこでは、現在の色の値、種々のフォントとフォント・サイズを選択できるドロップダウン・リスト、およびダイアログを起動するためのリンクが表示されます(そのダイアログ内では、ADFスキンが参照するイメージをステータス・アイコン、アニメーションおよびコンポーネントに置き換えることができます)。
図4-1 Skyrosで拡張したADFスキンに表示されるADFスキン・デザイン・エディタ
デザイン・エディタでコントロールを使用して加えられたいかなる変更にも、CSS構文が生成されます(ADFスキンのソース・ファイル内に記述されます)。デザイン・エディタは、アプリケーションの一般的なスタイルに設定されたパーツの変更に役立ちます。たとえば、「ブランド領域」タブを1回クリックするとダイアログが起動し、ここでアプリケーションのページのブランド領域内のロゴとしてレンダリングするための新しいイメージを選択できます。最も一般的なスタイルに設定されたパーツの変更以上のことをする必要がある場合は、「ADFスキン・セレクタ・エディタの使用」で説明しているように、セレクタ・エディタを使用することを検討します。
デザイン・エディタを使用して色およびイメージを変更する方法の詳細は、「ADFスキン・デザイン・エディタのイメージおよび色の変更」を参照してください。
図4-2にセレクタ・エディタを示します。各ラベル番号は、図4-2に続くリスト内の説明に対応しています。作成したADFスキンがAltaスキン・ファミリから拡張された場合、セレクタ・エディタはデフォルトで開きます。ADFスキンがSkyrosスキン・ファミリを拡張した場合は、「セレクタ」タブをクリックすることでセレクタ・エディタにアクセスできます。
図4-2 ADFスキン・セレクタ・エディタ
「アプリケーション」ウィンドウの「プロジェクト」ノードに、作成したADFスキンのソース・ファイルが表示されます。また、関連する構成ファイルおよびイメージ・ファイルも表示します。デフォルトでは、JDeveloperはADFスキンをskinsという名前のディレクトリに保存します。別のディレクトリ名を指定してソース・ファイルを保存できます。ADFスキン作成の詳細は、「ADFスキンのソース・ファイルの作成」を参照してください。
「構造」ウィンドウには、ADFスキン・ファイルに追加したセレクタ、グローバル・セレクタ別名、スタイル・クラスおよび@ルールが一覧表示されます。
セレクタ・ツリーを表示または非表示にするには、「区切りの非表示/表示」アイコンをクリックします。
セレクタ・ツリーに表示されるセレクタをフィルタリングします。
入力テキスト・フィールドにテキストを入力してセレクタ・ツリーに表示されるセレクタのリストをフィルタリングするか、フィルタ・アイコンを使用して次のように表示できます。
使用可能なセレクタ: セレクタ・ツリーのすべてのセレクタ
更新済セレクタ: ADFスキン内で変更したセレクタのみ
セレクタと@ルール: 関連する@ルールがあるセレクタのみ
「拡張スキン」リストには、現在のADFスキンの拡張元ADFスキンのリストが表示されます。インポート済ADFスキンも指定します。
詳細は、「ADFスキンのナビゲート」を参照してください。
新規スタイル・クラス、別名セレクタまたは@ルールを作成するには、「追加」アイコンを使用します。
新規スタイル・クラスの作成の詳細は、「スタイル・クラスの使用」を参照してください。別名セレクタの作成の詳細は、「グローバル・セレクタ別名の使用」を参照してください。@ルールの作成の詳細は、「@ルールの使用」を参照してください。
ADFスキンに追加したセレクタを削除するには、「削除」アイコンをクリックします。
「プロパティ」ウィンドウでセレクタのプロパティに変更を加えた後にプレビュー・ペインを更新するには、「リフレッシュ」アイコンをクリックします。
セレクタ・ツリーで選択したアイテムに擬似クラスを適用するには、「擬似クラスの追加」アイコンをクリックします。
擬似クラスの詳細は、「ADFスキニング・フレームワークでの擬似クラス」を参照してください。
セレクタ・ツリーで選択したアイテムに対する変更を取り消すには、「プロパティ設定のクリア」アイコンをクリックします。
ADFスキンで指定した擬似クラスを削除するには、スキン・ファイルからの擬似クラスの削除アイコンをクリックします。
「表示モード」リストでは、セレクタ・ツリーでグローバル・セレクタ別名に加えた変更がグローバル・セレクタ別名を参照するコンポーネントに及ぼす影響をプレビューできます。「表示モード」リストには、グローバル・セレクタ別名を参照するすべてのコンポーネントが表示されます。「表示モード」リストでは、1つのコンポーネント固有セレクタのプロパティに加えた変更がそのコンポーネントのすべてのサブタイプに及ぼす影響をプレビューすることもできます。たとえば、図4-3は、graphコンポーネント(af|dvt-graph)のADFデータ視覚化コンポーネント・セレクタを示しており、すべてのグラフ・タイプに変更を適用するコンポーネント固有の一連のセレクタが表示されています。他のいずれかのタイプのグラフ(棒、ファンネル、パレートなど)でセレクタに加えた変更をプレビューするには、「表示モード」リストを使用します。
図4-3 コンポーネントの「表示モード」リスト
グローバル・セレクタ別名の詳細は、「グローバル・セレクタ別名の使用」を参照してください。
セレクタ・ツリーには、ADFスキンで値を構成できるセレクタ、グローバル・セレクタ別名、スタイル・クラスおよび@ルールのリストが表示されます。
詳細は、「ADFスキン・セレクタ・エディタの使用」を参照してください。
「リフレッシュ」アイコン(8)をクリックすると、ADFスキンでセレクタに加えた変更のプレビューがプレビュー・ペインにレンダリングされます。
ADFスキン・ファイルのソースを表示することもできます。
ヒント:
ADFスキンのソース・ビューとデザイン・ビューを並べてレンダリングするには、プレビュー・ペインから起動できるコンテキスト・メニューから「ドキュメントの分割」を選択します。
「プロパティ」ウィンドウでは、ADFスキンで構成できるプロパティが識別されます。
詳細は、「「プロパティ」ウィンドウの使用」を参照してください。
テーマのタブでは、サポートされているテーマに加える変更をプレビューできます。
Altaスキン(およびAltaスキンを拡張したスキン)はテーマを使用しません。
セレクタ・ツリーには、スタイル・クラス、グローバル・セレクタ別名、およびADF FacesやADFデータ視覚化コンポーネントの外観を変更するためにプロパティを構成できるセレクタのリストが表示されます。
図4-4に、セレクタ・エディタ内のセレクタ・ツリーによって公開されるノードを示します。
スタイル・クラス
スタイル・クラスでは、コンポーネントの特定のインスタンスに適用できる1つ以上のスタイル・プロパティを定義します。セレクタ・エディタでは、継承されたスタイル・クラスが、一般的な用途、ノート・ウィンドウおよびポップアップ用に定義されたスタイル・クラスに分類されます。詳細は、「スタイル・クラスの使用」を参照してください。
グローバル・セレクタ別名
グローバル・セレクタ別名では、1つ以上のセレクタに適用できるスタイル・プロパティを定義します。セレクタ・エディタでは、継承されたグローバル・セレクタ別名が、一般的な用途、アイコンおよびメッセージ用に定義されたセレクタ別名に分類されます。詳細は、「グローバル・セレクタ別名の使用」を参照してください。
グループ化したセレクタ
複数のセレクタに適用する1つの宣言にグループ化されたスタイル・プロパティが識別されます。たとえば、図4-4に、buttonおよびlinkコンポーネントのセレクタのグループ化されたセレクタを示します。
@ルール
@ルールは、アプリケーションのページが、特定のブラウザを使用するときなどの特定の環境でレンダリングされる場合のスタイル・プロパティを定義する方法です。詳細は、「@ルールの使用」を参照してください。
Facesコンポーネント・セレクタ
セレクタではプロパティを設定できるADF Facesコンポーネントが識別されます。セレクタ・エディタに擬似要素、コンポーネント・セレクタ別名および下位セレクタのサブカテゴリが表示されます。簡潔にするため、ADF Facesコンポーネントのノードは展開されていません。詳細は、「コンポーネント固有セレクタの使用」 を参照してください。
データ視覚化コンポーネント・セレクタ
セレクタではプロパティを設定できるADFデータ視覚化コンポーネントが識別されます。セレクタ・エディタに擬似要素、コンポーネント・セレクタ別名および下位セレクタのサブカテゴリが表示されます。詳細は、「コンポーネント固有セレクタの使用」 を参照してください。
図4-4 セレクタ・ツリー
セレクタ・エディタのプレビュー・ペインは、セレクタ・ツリーで現在選択されているコンポーネントのインタラクティブ・プレビューを表示します。このプレビューの上にマウスを置いて、コンポーネントの外観を変更するようカスタマイズする必要がある特定の疑似要素を指定するテキストを表示します。このプレビューのパーツをクリックすると、今クリックした対象の外観を変更するようにプロパティを構成できる場所に移動します。また、図4-5に示すように、疑似要素を右クリックしてコンテキスト・メニューを起動し、そこに現在の疑似要素に含まれるセレクタ疑似要素の階層化リストを表示させることもできます。
図4-5 カレンダ・コンポーネントのインタラクティブ・プレビュー
表示されたコンテキスト・メニューのエントリをクリックするか、他のコンポーネント・セレクタの疑似要素で定義されたプロパティを使用するcalendarコンポーネントの一部をクリックすると、セレクタ・ツリー内の疑似要素に移動します。たとえば、図4-5に示すコンテキスト・メニューのaf|button::linkをクリックすると、図4-6に示すように、コンポーネント・プレビューによって、セレクタ・エディタのセレクタ・ツリー内のbuttonコンポーネント・セレクタの疑似要素の場所へと移動します。
図4-6 buttonコンポーネントのリンク疑似要素
「プロパティ」ウィンドウの主要な機能は、ADFスキニング・フレームワークで公開されるセレクタに対するCSSプロパティおよびADFスキン・プロパティの値を設定できるようにすることですが、これ以外にも数多くの機能があります。これらの機能では、次のことを実行できます。
ADFスキンを開発するプロジェクトにイメージをコピーします。
詳細は、「ADFスキンのイメージおよび色の使用」を参照してください。
図4-7に示すように、拡張ADF(青いアイコン)スキンから値を継承するプロパティとADFスキンで構成したプロパティ(緑のアイコン) を識別します。
図4-7に示すように、@ルールで関連付けられたプロパティを識別します。
@ルールの詳細は、「@ルールの使用」を参照してください。
セレクタに対して構成できるADFスキン・プロパティを示します。
詳細は、「ADFスキニング・フレームワークでのプロパティ」を参照してください。
ADFスキンで継承されているプロパティを定義している、拡張ADFスキンのセレクタにナビゲートします(宣言に移動)。
詳細は、「ADFスキンのナビゲート」を参照してください。
色の値をサポートするプロパティの色を定義できるダイアログを起動します。
図4-7に、ADFスキンを編集するときに「プロパティ」ウィンドウに表示される様々なコントロールの概要を示します。
図4-7 ADFスキンの「プロパティ」ウィンドウ内のコントロール
情報ヒントを表示するために、図4-8に示すように、@ルールに関連付けられたプロパティまたはその値を継承するプロパティを示すアイコンの上にマウスを置きます。この情報ヒント内のリンクをクリックすると、@ルールまたは継承されたプロパティ値が定義されたADFスキンのソース・ファイルに移動します。
図4-8 ソース宣言へ移動するリンクを示す情報ヒント
ADFスキンを作成するとき、「ADFスキン・ファイルの作成」で説明しているように、拡張する元となるADFスキンを選択します。新しく作成するADFスキンが継承するプロパティが定義されているADFスキンを、拡張する元として選択します。最初のADFスキンを作成する場合は、Oracle ADFによって提供されるいずれかのADFスキンを選択する必要があります。
その後作成するADFスキンでは、作成したADFスキン、またはOracle ADFで提供されるいずれかのADFスキンを拡張できます。たとえば、Oracle ADFによって提供されるsimple ADFスキンを拡張して、skinAという名前の最初のADFスキンを作成するとします。次に、skinBという名前の2番目のADFスキンを作成します。skinBを作成するときは、skinAまたはOracle ADFで提供されるいずれかのADFスキンを拡張することを選択できます。skinAからskinBを拡張することを選択した場合のADFスキン間の継承関係を図4-9に示します。
Oracle ADFで提供されるADFスキンの詳細は、「Oracle ADFで提供されるADFスキンの継承関係」および「Oracle ADFで提供されるADFスキン」を参照してください。
図4-9 ADFスキン間の継承関係の例
ビジュアル・エディタの「拡張スキン」リストには、現在のADFスキンの拡張元ADFスキンのリストが表示されます。このリストはまた、スキンが拡張したADFスキンのいずれかがインポート済スキンを含むかを識別します。図4-10に、図4-9で示した継承関係を実装した場合に表示されるADFスキンのリストを示します。表示する拡張ADFスキンを開くには、「拡張スキン」リストでその拡張ADFスキンをクリックします。
図4-10 「拡張スキン」リスト
注意:
Oracle ADFで提供されるADFスキンのセレクタのプロパティは、編集できません。ユーザーが作成した拡張ADFスキンのセレクタのプロパティのみを変更できます。
「プロパティ」ウィンドウで表示される「宣言に移動」メニューを使用して、拡張ADFスキンにおける、他のADFスキンによって継承されるスタイル・プロパティを宣言している場所に移動できます。たとえば、「ADFスキンのナビゲート」に示すように、skinA ADFスキンはaf|buttonセレクタのaccess-key擬似要素のRedの背景色を定義するとします。
図4-11 プロパティ値の宣言
skinA ADFスキンから拡張されたskinB ADFスキンは、skinA ADFスキン内で定義されたプロパティ値を継承します。「ADFスキンのナビゲート」に、background-colorプロパティの値がRedになっている、セレクタ・エディタ内のskinB ADFスキンを示します。
図4-12 拡張スキンからのプロパティ値の継承
プロパティの宣言に移動するには、次のようにします。
図4-13 「宣言に移動」コンテキスト・メニュー
図4-14に示すように、ソース・ビューで拡張ADFスキンが開きます。拡張ADFスキンが、ユーザーが作成したADFスキンである場合は、定義されているプロパティ値を変更できます。Oracle ADFで提供されるADFスキン(「Oracle ADFで提供されるADFスキン」を参照)は、読取り専用です。
図4-14 拡張ADFスキンで定義されるプロパティ値
