ヘッダーをスキップ
Oracle® Fusion Middleware Oracle Application Development Frameworkスキン・エディタ・ユーザーズ・ガイド
11gリリース2(11.1.2.3.0)
B66161-03
  目次へ移動
目次
前
前 		 次
次		  

6 ADFスキンのイメージの使用

この章では、ADFスキンでイメージを使用する方法について説明します。Fusion SimpleファミリのADFスキンから拡張したADFスキンを使用する場合に有効化される「イメージ」ウィンドウの使用方法に加え、コンポーネント・セレクタのイメージを変更する方法などの主要な機能について説明します。

この章には、次の項があります。

6.1 ADFスキンのイメージの使用について

イメージの場所を指定するURLを使用して、ADFスキンのイメージを参照できます。たとえば、複数のWebページで会社のロゴとして使用するイメージを指定する場合に行います。イメージを使用する他のシナリオには、エンド・ユーザーの注意を引くために警告メッセージまたはエラー・メッセージと一緒にイメージを表示する場合や、アプリケーションを視覚的により魅力的にするためにイメージをレンダリングする場合などがあります。図6-1に、ADFスキンによって参照されるイメージを使用すると、アプリケーションがレンダリングするユーザー・インタフェースがどのように変更されるかを表す例を示します。図6-1のページは、2つの異なるADFスキンを使用して、同じアプリケーションで同じページをレンダリングしたものです。

図6-1 イメージを使用するADFスキン

イメージを使用するADFスキン・ファイル

図6-1の前景にあるWebページが使用するADFスキンではイメージを参照していませんが、背景にあるWebページが使用するADFスキンでは会社のロゴをレンダリングしています。これは、イメージの場所を.AFBrandingBarLogoスタイル・クラスのbackground-imageプロパティの値として定義することにより、会社のロゴをレンダリングします。

background-imageプロパティの値としてイメージを定義する以外に、イメージを参照する様々なセレクタがあります。これらのイメージは、たとえば、実行時にレンダリングされるADF Facesコンポーネントのアイコンとして表示されます。詳細は、第2.1.2項「ADFスキン・セレクタおよびアイコン・イメージ」を参照してください。

6.2 コンポーネント・セレクタのイメージの変更

多くのADF FacesコンポーネントおよびADFデータ視覚化コンポーネントが、セレクタを使用してイメージを参照します。これらのイメージはコンポーネントの背景で表示されるか、コンポーネント上でアイコンまたはコントロールとしてレンダリングされます。ADFスキンを作成するとき、拡張元のADFスキンによって、これらのセレクタの値が、たとえば、イメージの相対パス、高さや幅のサイズなどとして提供されます。

図6-2に、表の列のデータを昇順でソートするコントロールをレンダリングするADF Faces tableコンポーネントの実行時ビューを示します。このコントロールをレンダリングするイメージは、ADF Faces columnコンポーネントのsort-ascending-icon-styleセレクタによって参照されます。

図6-2 sort-ascending-icon-styleセレクタによって参照されるイメージ

sort-ascending-icon-styleセレクタのイメージ

図6-3に、拡張ADFスキンのADF Faces columnコンポーネントのsort-ascending-icon-styleセレクタの値をADFスキンが継承するデザインタイム・ビューを示します。継承される値には、アイコンとして使用されるイメージのファイル名(sort_asc_ena.png)、イメージの高さと幅が含まれます。

図6-3 sort-ascending-icon-styleセレクタの継承される値

sort-ascending-icon-styleセレクタの継承される値

コンポーネントに関連付けられているイメージを参照するセレクタを公開するADF FacesコンポーネントとADFデータ視覚化コンポーネントの他の例には、次のものがあります。

コンポーネント・セレクタに関連付けられているイメージを変更する場合は、ADFスキンでセレクタを変更して、ADFスキンのプロジェクトにイメージをコピーする必要があります。第6.2.1項「イメージをプロジェクトにコピーする方法」の手順を使用してイメージを個別にコピーするか、または第6.3項「「イメージ」ウィンドウの使用」で説明しているように、「イメージ」ウィンドウを使用して複数のイメージをインポートできます。

プロジェクトにイメージをインポートした後、イメージを参照するセレクタでは、ADFスキンのソース・ファイル内のURLを使用してこのイメージを参照します。第10.3項「ADFスキンのADFライブラリJARへのパッケージ化」で説明しているように、ADFライブラリJARにADFスキン(と関連ファイル)をデプロイすると、このURLが更新されることに注意してください。


ヒント:

グローバル・セレクタ別名にイメージを関連付けます。このグローバル・セレクタ別名が複数のコンポーネント・セレクタによって参照されている場合に、後から異なるイメージを使用するには、1つの変更を加えるのみで済みます(グローバル・セレクタ別名に関連付けられているイメージを変更します)。グローバル・セレクタ別名の詳細は、第8.2項「グローバル・セレクタ別名の作成」を参照してください。

6.2.1 イメージをプロジェクトにコピーする方法

コンテキスト・メニューを使用して、拡張ADFスキンによって参照されるイメージをADFスキンのプロジェクトのディレクトリにコピーします。続けて、必要な変更をイメージに加えます。

ADFスキン・イメージをプロジェクトにコピーするには、次のようにします。

  1. ビジュアル・エディタのセレクタ・ツリーで、変更するイメージを参照するセレクタを選択します。

    たとえば、図6-1に示すように、ADF Faces columnコンポーネントのsort-ascending-icon-styleセレクタを選択して、昇順アイコンを変更します。

    図6-4 columnコンポーネントのsort-ascending-icon-styleセレクタ

    表の列のsort-ascending-icon-styleセレクタ

  2. 図6-5に示すように、プロパティ・インスペクタで、「共通」セクションを開いて、「背景イメージ」リストから「イメージのコピー」を選択します。

    図6-5 ADFスキン・プロジェクトにイメージをインポートするための「イメージのコピー」メニュー

    ADFスキンにイメージをインポートするための「イメージのコピー」メニュー

    これは、ADFスキンのプロジェクトにイメージをコピーします。

6.2.2 プロジェクトにイメージをコピーした場合の処理

イメージは、ADFスキンのプロジェクトに生成されるサブディレクトリにコピーされます。たとえば、ADF Faces columnコンポーネントのsort-ascending-icon-styleセレクタが参照するイメージをコピーする場合、sort_asc_ena.pngファイルが次のディレクトリにコピーされます。

/public_html/skins/skin1/images/af_column

af_columnはADF Faces columnコンポーネントを示します。

プロパティ・インスペクタのプロパティの相対URL値が、イメージの新しい場所を参照するよう変更されます。図6-6に例を示します。

さらに、プロパティ・インスペクタで、プロパティ・ラベルの左側に緑色のアイコンが表示され、セレクタが拡張ADFスキンからイメージを継承しなくなったことが示されます。図6-6に、sort_asc_ena.pngファイルをADFスキンのプロジェクトにインポートした後のプロパティ・インスペクタを示します。拡張ADFスキンの「高さ」と「幅」のプロパティの値が、引き続きADFスキンによって継承されることに注意してください。

図6-6 ADFスキンへのイメージのインポート後のプロパティ・インスペクタ

スキンへのイメージのインポート後のプロパティ・インスペクタ

最後に、ADFスキンのソース・ファイルにCSS構文が表示されます。例6-1に、図6-6に示す値に対応するCSS構文を示します。

例6-1 イメージをインポートした後のADFスキンのソース・ファイルに含まれるCSS構文

af|column::sorted-ascending-icon-style
{
  background-image: url("images/af_column/sort_asc_selected.png");
}

6.3 「イメージ」ウィンドウの使用

「イメージ」ウィンドウを使用して、ADFスキンのFusion Simpleファミリから拡張されるADFスキンに使用するイメージを管理できます。これは、開いているADFスキンの「イメージ」タブをクリックしてアクセスできます。


注意:

「イメージ」ウィンドウの機能を使用するには、そのADFスキンがADFスキンのFusion Simpleファミリから拡張されたものである必要があります。他のスキン・ファミリからADFスキンを拡張すると、「イメージ」ウィンドウを使用できません。

図6-7に、ADFスキンの「イメージ」タブを初めてクリックしたときに表示される「イメージ」ウィンドウを示します。「イメージの生成に次を使用」リストに、次のオプションが表示されます。

「生成されたイメージ」リストには、「スキンに適用」ボタンをクリックしてADFスキンに適用できるイメージが表示されます。「スキンに適用」ボタンをクリックすると、「生成されたイメージ」リストで選択したイメージが、ADFスキンを保管するプロジェクト内のディレクトリのサブディレクトリである、イメージ・ディレクトリにインポートされます。

図6-7 ADFスキンの「イメージ」ウィンドウ

ADFスキンの「イメージ」ウィンドウ

「イメージの生成に次を使用」リストで「現在のスキン別名」を選択したときに表示される「別名色」リストには、レイアウトとアイコンのイメージの色に影響する色別名が表示されます。これらの色別名は、使用可能な色別名のサブセットです。このサブセットに含まれる色別名を変更すると、アプリケーションの外観を大幅に変更できます。図6-8に、これらの色別名を使用するページの部分にラベルが付けられる、アプリケーションのページを示します。たとえば、ブックマーク可能なリンクでは、ユーザーがリンクをクリックすると、.AFLightVisitedLinkForeground色別名が使用されるようになります。

図6-8 色別名を使用するアプリケーションのページ

色別名を使用するアプリケーションのページ

図6-9に、色別名の使用にラベルが付けられる別の例を示します。

図6-9 色別名を使用するADF Faces表コンポーネント

色別名を使用するADF Faces表コンポーネント

グローバル・セレクタ別名の「色」カテゴリの詳細は、第8.1項「グローバル・セレクタ別名について」を参照してください。

Oracle Technology Network(OTN) Webサイトでは、ADFスキンの開発プロセスの一部として、色別名リストで色別名を変更する方法を示すオンライン・デモを提供しています。詳細は、http://www.oracle.com/technetwork/developer-tools/adf/overview/index.htmlにアクセスしてください。

6.3.1 「イメージ」ウィンドウを使用したイメージの生成方法

「イメージ」ウィンドウを使用してイメージを生成するには、サポートされているいずれかのメソッドを選択し、そのメソッドを使用してADFスキンに変更を適用します。

「イメージ」ウィンドウを使用してイメージを生成するには、次のようにします。

  1. ADFスキンのFusion Simpleファミリを拡張するADFスキンを作成します。

    ADFスキンの作成の詳細は、第4.4項「ADFスキン・ファイルの作成」を参照してください。ADFスキンのFusion Simpleファミリの詳細は、第11.4項「Oracle ADFで提供されるADFスキン」を参照してください。

  2. 新しく作成されたADFスキンの「イメージ」タブをクリックします。

  3. 「イメージの生成に次を使用」リストからイメージを生成するために使用するメソッドを選択します。

  4. 含めるイメージ・タイプに適したオプションを選択します。

    • 区分のレイアウト: ADFスキンにこのタイプのイメージを含める場合は、このチェック・ボックスを選択します。

    • アイコン: ADFスキンにこのタイプのイメージを含める場合は、このチェック・ボックスを選択します。

  5. (オプション)「イメージの生成に次を使用」ドロップダウン・メニューから「現在のスキン別名」を選択した場合は、別名の色リストでエントリの値を変更します。

    次のように様々な方法があります。

    • 変更するグローバル・セレクタ別名の入力フィールドに16進数コードを直接入力します。

    • 「色相/彩度/明度の調整」をクリックして「色相/彩度/明度の調整」ダイアログを起動します。このダイアログで、ADFスキンが使用する色の色相、彩度、明度のレベルを調整できます。

    • 入力フィールドの横にあるドロップダウン・メニューをクリックして、カラー・ピッカーを起動します。カラー・ピッカーで「カスタム」ボタンをクリックして「カスタム・カラーの選択」ダイアログを起動するか、または「デフォルト」ボタンを使用してグローバル・セレクタ別名の値をリセットすることもできます。図6-10に、これらのボタンと、ボタンを最初に表示するドロップダウン・メニューを示します。

      図6-10 色別名のオプションの編集

      色別名のカラー・ピッカー

  6. (オプション)「イメージの生成に次を使用」ドロップダウン・メニューから「現在のスキン別名」を選択した場合は、「色の除外」アイコンをクリックして、イメージを生成するときに色別名が使用されないようにできます。図6-11に示すように、「色の除外」アイコンは、色別名にマウス・カーソルを重ねると表示されます。

    図6-11 色別名の「色の除外」アイコン

    色別名の「色の除外」アイコン

  7. 「生成されたイメージ」リストで、ADFスキンに適用するイメージを選択します。「生成されたイメージ」リストのチェック・ボックスを使用して、すべてのイメージを選択または選択を解除するか、1つ以上のイメージを選択します。デフォルトでは、選択されているイメージは、色別名の変更の結果として変更されたイメージです。


    注意:

    「生成されたイメージ」リストの下部にスクロールし、スキンに適用するすべてのイメージが選択されていることを確認します。

  8. 「スキンに適用」をクリックします。

6.3.2 「イメージ」ウィンドウを使用してイメージを生成した場合の処理

「生成されたイメージ」リストで選択したイメージ・ファイルがプロジェクトにインポートされます。ADFスキンのソース・ファイルに生成する各イメージにエントリが表示されます。「現在のスキン別名」オプションを使用してイメージを生成することを選択した場合は、「別名色」リストで変更する各グローバル・セレクタ別名にもエントリが表示されます。例6-2に、ADFスキンのソース・ファイルにあるいくつかのエントリを示します。このスキンでは、「現在のスキン別名」オプションを使用し、AFDarkestNeutralBackgroundおよびAFVeryLightBackgroundグローバル・セレクタ別名の値を変更してイメージが生成されています。

例6-2 イメージ生成後のADFスキンのソース・ファイル内のエントリ

af|panelWindow::footer-end
{
  background-image: url(images/generated/adf/images/fusion/dialog-footer-small-right.png); 
}
...
 
af|train::stop-icon-unvisited:hover, af|train-vertical::stop-icon-unvisited:hover
{
  background-image: url(images/generated/adf/images/fusion/train_unvisited_ovr.png); 
}
...
 
.AFDarkestNeutralBackground:alias
{
  background-color: #00ff00; 
}
.AFVeryLightBackground:alias
{
  background-color: #00ff00; 
}
  前
前 		 次
次
  目次へ移動
目次