1. Oracle Mobile Application Frameworkでのモバイル・アプリケーションの開発
  2. MAFアプリケーションのスキニング

9 MAFアプリケーションのスキニング

この章では、スキンを使用してMAFアプリケーションの外観をカスタマイズする方法について説明します。

この章の内容は次のとおりです。

MAFアプリケーション・スキンの概要

MAFではCascading Style Sheet (CSS)言語ベースのスキンを使用するので、MAFアプリケーション内の(その要素のアプリケーション機能で使用されるものを含む)すべてのアプリケーション・コンポーネントが一貫したルック・アンド・フィールを確実に共有するようになっています。

MAF AMXまたはHTMLコンポーネントを再構成してMAFアプリケーションの外観を変更するかわりに、コンポーネントの表示方法を変更するスキンを作成または拡張できます。

MAFアプリケーションのルック・アンド・フィールを変更するためのスキンの作成または編集は、反復的プロセスです。スキンを作成し、それをデバイスにデプロイして結果を表示できます。このプロセスを、スキンのレンダリング結果が希望どおりになるまで続行できます。ユーザー・インタフェース・コード(CSS、HTML、JavaScriptなど)をインスペクトおよびデバッグするためにAndroidおよびiOSプラットフォームが提供する開発者ツールは、このタスクでの重要なリソースです。これらのツールをMAFアプリケーションで使用する方法の詳細は、「AndroidプラットフォームでのUIコードのデバッグ方法」および「iOSプラットフォームでのUIコードのデバッグ方法」を参照してください。Visual Studioを使用して、ユニバーサルWindowsプラットフォームにデプロイするMAFアプリケーションでユーザー・インタフェース・コードをデバッグします。詳細は、「ユニバーサルWindowsプラットフォームでUIコードをデバッグする方法」を参照してください。

MAF AMXページの外観を決定するセレクタを定義するためにMAFで使用されるサポート済のスキンのファミリとバージョンは、次のとおりです。

amx
  mobileAlta-1.0
    mobileAlta-1.1
      mobileAlta-1.2
         mobileAlta-1.3
            mobileAlta-1.4
               mobileAlta-1.5   
                 mobileAlta-1.6

デフォルトで、新規作成したMAFアプリケーションでは最新バージョンのmobileAltaスキン・ファミリが使用されます。アプリケーションを以前のリリースから最新リリースに移行すると、そのアプリケーションでは移行前に使用するよう構成されていたスキンが引き続き使用されます。移行後のアプリケーションで別のスキン(たとえば最新バージョンのmobileAlta)を使用する場合は、「アプリケーションが使用するスキンの指定」の説明に従って、maf-config.xmlファイルを編集する必要があります。

図は、異なるスキンを使用して同じアプリケーション画面のレンダリングを示すことによって、mobileAltaスキン・ファミリと別のスキン・ファミリのルック・アンド・フィールの違いを示しています。mobileAltaスキン・ファミリは左側でレンダリングされます。

図9-1 mobileAltaと別のスキンのルック・アンド・フィールの比較

図9-1の説明が続きます
「図9-1 mobileAltaと別のスキンのルック・アンド・フィールの比較」の説明

MAFアプリケーションをデバイス、エミュレータまたはシミュレータにデプロイすることにより、MAFアプリケーションの使用するスキンのすべてのリソース(CSSファイルおよびイメージ)を表示できます。デプロイメントでは、これらのリソースは、デプロイメント処理で生成されるプラットフォーム固有のアーティファクト内で作成されるwww\cssディレクトリに移動されます。iOSデプロイメントの場合、www\cssディレクトリはtemporary_xcode_projectディレクトリ内にあります。iOSデプロイメントでは、これらのリソースは、作成された.IPAファイルに追加されるOracle_ADFmc_Container_Template.zipファイルにパッケージされます。Androidデプロイメントの場合、ディレクトリ・パスは%app%\deploy\Android1\framework\build\java_res\assets\www\cssとなり、Android1はデプロイメント・プロファイルの名前です。Androidデプロイメントでは、これらのリソースは、作成された.APKファイルに追加されるassets.zipファイルにパッケージされます。JDeveloperの「ビルド」→「すべてクリーン」コマンドにより、deployディレクトリ、およびwww\cssディレクトリを含むそのサブディレクトリが削除されることに注意してください。

注意:

MAF DOM構造に依存するスタイルを記述しないでください。また、これらのファイル内で定義されている一部のセレクタは、サポートされていない場合があります。

maf-config.xmlファイル(「maf-config.xmlファイルについて」を参照)およびmaf-skins.xmlファイル(「maf-skins.xmlファイルについて」を参照)を使用して、MAFアプリケーションのスキニングを制御します。maf-config.xmlファイルでは、アプリケーション・コンポーネントのレンダリングに使用するデフォルトのスキン・ファミリを指定し、maf-skins.xmlファイルでは、デフォルトのスキン・ファミリをカスタマイズしたり、新しいスキン・ファミリを定義することができます。

maf-config.xmlファイルについて

MAFアプリケーションを作成すると、JDeveloperによって、maf-config.xmlファイルがMAFアプリケーションのMETA-INFノードに移入されます。このファイル自体には、ベースMAFスキン・ファミリであるmobileAltaが移入されます(次の例を参照)。 

<?xml version="1.0" encoding="UTF-8" ?>
<adfmf-config xmlns="http://xmlns.oracle.com/adf/mf/config">
  <skin-family>mobileAlta</skin-family>
  <skin-version>v1.5</skin-version>
  ....
</adfmf-config>

注意:

EL式を使用して実行時にスキンの値を決定できます。「エンド・ユーザーによる実行時のアプリケーション・スキンの変更の有効化」を参照してください。

<skin-family>または<skin-version>タグの値を指定しない場合は、MAFアプリケーションで自動的に最新のスキン・ファミリまたはスキン・バージョンが使用されます。

MAFでは階層としてスキンが適用されます。最上位にはデバイス固有のスキン、その後にプラットフォーム固有のスキン、ベース・スキンmobileAltaと続きます。MAFのmobileAltaスキン・ファミリの場合、この階層は次のように表されます。

  1. mobileAlta.<DeviceModel> (たとえばmobileAlta.iPhone5,3)

  2. mobileAlta.iOSまたはmobileAlta.Android

  3. mobileAlta

ヒント:

デバイス固有またはプラットフォーム固有のスキンを作成する予定の場合は、その値を取得する必要があるデバイスまたはプラットフォームにDeviceDemoサンプル・アプリケーションをデプロイします。DeviceDemoサンプル・アプリケーションの「プロパティ」アプリケーション機能には、デバイス・モデルおよびアプリケーションが実行されているプラットフォームの値が表示されます。「サンプルのMAFアプリケーション」を参照してください。

図は、実行時にMAFでスキンのこの階層が適用される様子をイラストレーションで示しています。SkinningDemoサンプル・アプリケーション(「サンプルのMAFアプリケーション」を参照)でも、この実装を示しています。

MAFでは、この階層のデバイス固有のレベルで定義されたセレクタを優先します。つまり、MAFでは、mobileAlta.iOSで定義されたセレクタを、同じセレクタに対するmobileAlta.iPhone5,3の定義で上書きします。「maf-skins.xmlファイルについて」で定義されている<extends>要素によって、この階層がMAFランタイム用に定義されます。様々なレベルでのスキンの適用方法の詳細は、「スキニングに関する必知事項」を参照してください。

図9-2 実行時のMAFのスキン階層の適用

図9-2の説明が続きます
「図9-2 実行時のMAFのスキン階層の適用」の説明

maf-skins.xmlファイルについて

アプリケーション・コントローラ・プロジェクトのMETA-INFノードにあるmaf-skins.xmlファイルによって、既存のスキンを拡張して新しいスキンを定義したり、既存のスキンに新しいスタイル・シートを追加することができます。

デフォルトでは、このファイルは空ですが、表9-1に示されている要素によって子要素を記述します。これらの子要素をこのファイルに移入することで、mobileAltaを拡張したり、アプリケーションで使用できるCSSファイルを定義できます。新しいスキンを作成したり、既存のスキンを拡張するには、<skin>要素を使用します。

表9-1 <skin>要素の子要素

要素 説明

<id>

maf-skins.xmlファイルのスキンを識別する必須要素。指定する値は、次のいずれかの形式に従う必要があります。

  • skinFamily-version

  • skinFamily-version.platform

たとえば、Apple iPadまたはiPhoneへのデプロイ時に、ユーザーのアプリケーションの外観を定義するスキンをユーザーのアプリケーションに登録するには、mySkin-v1.iOSを指定します。登録するスキンによってiPadまたはiPhoneのいずれかのデバイスのアプリケーションの外観が定義される場合、iOSはiPadまたはiPhoneによって置き換えられます。Androidプラットフォームへのデプロイ時に、アプリケーションの外観を定義するスキンを登録する場合、.androidを指定します。

<family>

スキン・ファミリを識別する必須要素。

<extends>

この要素を使用して、拡張するスキンのスキンIDを指定することによって既存のスキンを拡張します。 

<skin>
  <id>mySkin-v1</id>
  <family>mySkin</family>
  <extends>mobileAlta-v1.6</extends>
  <style-sheet-name>styles/myskin.css</style-sheet-name>
  <version>
    <name>v1</name>
  </version>     
</skin>

<style-sheet-name>

MAFアプリケーションのプロジェクト内のCSSファイルの場所を指定するには、相対URLを使用します。たとえば、SkinningDemoサンプル・アプリケーションのmaf-skins.xmlファイルには、アプリケーション・コントローラ・プロジェクトのcssディレクトリのv1.cssスタイルシートへの次の参照が含まれます。

<style-sheet-name>css/v1.css</style-sheet-name>

<version>

スキンの異なるバージョンを指定します。「MAFスキンのバージョニング」を参照してください。

表9-2に、スタイルシートを既存のスキンに統合する場合に、MAF CSS内で<skin-addition>要素を定義するために使用できる要素を示しています。

表9-2 <skin-addition>の子要素

要素 説明

<skin-id>

スタイルシートをさらに追加する必要があるスキンのIDを指定します。指定可能な値には、MAFによって提供されるスキン(たとえば、mobileAlta-v1.6.iOS)またはユーザーによって作成されるカスタム・スキンなどがあります。

<style-sheet-name>

MAFアプリケーションのプロジェクト内のCSSファイルの場所を指定するには、相対URLを使用します。たとえば、SkinningDemoサンプル・アプリケーションのmaf-skins.xmlファイルには、アプリケーション・コントローラ・プロジェクトのcssディレクトリのv1.cssスタイルシートへの次の参照が含まれます。

<style-sheet-name>css/v1.css</style-sheet-name>

次の例では、<style-sheet-name>要素でCSSファイルの場所を、<skin-id>でターゲット・スキン・ファミリを指定しています。 

<?xml version="1.0" encoding="UTF-8" ?>
<adfmf-skins xmlns="http://xmlns.oracle.com/adf/mf/config">
  <skin-addition>
    <skin-id>mobileAlta-v1.6.iOS</skin-id>
    <style-sheet-name>skins/mystyles.iphone.addition1.css</style-sheet-name>
  </skin-addition>
</adfmf-skins>

<skin-id>および<style-sheet-name>要素を使用して特定のiOSまたはAndroidデバイスにレンダリングしたり、これらの要素を定義してすべてのデバイスのプラットフォームに対するスタイルを処理することもできます。表9-3に、iOSプラットフォームに属するすべてのデバイス、および特定のiOSデバイス・タイプ(タブレット、電話、シミュレータ)をターゲットにするこれらの要素の使用例を示します。

ヒント:

デバイス・モデルに関する情報を取得するには、「サンプルのMAFアプリケーション」に記載されているDeviceDemoサンプル・アプリケーションの使用を検討してください。

表9-3 プラットフォームおよびデバイス固有のスタイル

デバイス 例

iPhone

 
<skin-addition>
   <skin-id>mobileAlta-v1.6.iPhone5,1</skin-id>
   <style-sheet-name>iPhoneStylesheet.css</style-sheet-name>
</skin-addition>

iPad

 
<skin-addition>
   <skin-id>mobileAlta-v1.6.iPad4,2</skin-id>
   <style-sheet-name>iPadStylesheet.css</style-sheet-name>
</skin-addition>

iPhoneシミュレータ

 
<skin-addition>
   <skin-id>mobileAlta-v1.6.iPhone Simulator x86_64</skin-id>
   <style-sheet-name>iPhoneSimStylesheet.css</style-sheet-name>
</skin-addition>

すべてのiOSデバイス

 
<skin-addition>
   <skin-id>mobileAlta-v1.6.iOS</skin-id>
   <style-sheet-name>iOSSimStylesheet.css</style-sheet-name>
</skin-addition>

アプリケーションへのカスタム・スキンの追加

アプリケーションにカスタム・スキンを追加するには、JDeveloper内にCSSファイルを作成します。CSSはアプリケーションとともにデプロイするために、JDeveloperによりプロジェクトのソース・ファイルに配置されます。

カスタム・スキンをアプリケーションに追加する手順:

  1. 「アプリケーション」ウィンドウで、ApplicationControllerプロジェクトを右クリックして、「新規」→「CSSファイル」を選択します。
  2. 「Cascading Style Sheetの作成」ダイアログで、CSSファイルの名前およびディレクトリを指定します。
  3. 「OK」をクリックします。

これで、CSSエディタにCSSを開いて、アプリケーションのスタイルを定義できます。

アプリケーションが使用するスキンの指定

maf-config.xmlファイルで値を構成して、アプリケーションで使用するスキンを決定します。

使用するアプリケーションのスキンを指定するには:

  1. 「アプリケーション」ウィンドウで、maf-config.xmlファイルをダブルクリックします。デフォルトでは、これは、「アプリケーション・リソース」ペインの「ディスクリプタ」および「ADF META-INF」ノードの下にあります。
  2. maf-config.xmlファイルで、使用するスキンの<skin-family>要素、および<skin-version>要素(オプション)の値を指定します。

    例9-1は、MAFアプリケーションでmobileAlta-v1.6スキンを使用するのに必要な構成を示しています。

例9-1 アプリケーションのスキンを指定する構成

<adfmf-config xmlns="http://xmlns.oracle.com/adf/mf/config">
  <skin-family>mobileAlta</skin-family>
  <skin-version>v1.6</skin-version>
</adfmf-config>

注意:

アプリケーションが実行時に使用するスキンを動的に選択する場合、EL式を<skin-family>要素の値として設定します。「エンド・ユーザーによる実行時のアプリケーション・スキンの変更の有効化」を参照してください。

カスタム・スキンの登録

maf-skins.xmlファイルにカスタム・スキンを識別するプロパティ値を追加することで、ユーザーのアプリケーションにカスタム・スキンを登録します。

カスタム・スキンを登録する手順:

  1. 「アプリケーション」ウィンドウで、「ApplicationController」→「アプリケーション・ソース」→「META-INF」を開き、「maf-skins.xml」をダブルクリックします。
  2. 「構造」ウィンドウで、「adfmf-skins」ノードを右クリックし、「adfmf-skinsの中に挿入」→「skin」を選択します。
  3. 「skinの挿入」ダイアログで、次のようにフィールドに入力します。

    • ファミリ: スキンのファミリ名の値を入力します。

      新しい名前を入力するか、既存のファミリ名を指定できます。既存のファミリ名を指定した場合は、「MAFスキンのバージョニング」の説明に従ってスキンをバージョニングして、同じファミリ値を持つスキンを区別します。

      入力する値は、作成するスキンを登録するmaf-skins.xmlの<family>要素の値として設定されます。アプリケーションのmaf-config.xmlの<skin-family>要素では、実行時にこの値を使用してアプリケーションで使用されるスキンを識別します。

    • ID: skinFamily-versionまたはskinFamily-version.platformのいずれかの名前書式を使用してスキンのIDを入力します。たとえば、mySkinFamily-v1.2.androidです。

    • 拡張対象: 拡張する親スキンの名前を入力します。たとえば、カスタム・スキンでmobileAlta-v1.6スキンを拡張する場合は、mobileAlta-v1.6と入力します。

    • スタイルシート名: スタイルシートの名前を入力または選択します。

  4. 「 OK」をクリックします。

MAFスキンのバージョニング

スキンを区別する場合は、MAFスキンをバージョニングできます。

<version>要素を使用して、maf-skins.xmlファイルでスキンのバージョン番号を指定できます。maf-skins.xmlファイル内の<family>要素の値が同じスキンを区別する場合はこのオプション機能を使用します。この機能は、いくつかの既存の動作を変更するために既存のスキンの新規バージョンを作成する場合に役立ちます。特定のスキンを使用するようにアプリケーションを構成する場合は、maf-config.xmlファイルで値を指定します。「アプリケーションが使用するスキンの指定」を参照してください。

maf-skins.xmlファイル内の<version>要素に値を入力して、スキンのバージョンを指定します。

ベスト・プラクティス:

アプリケーションのmaf-skins.xmlファイルに登録する各スキンのバージョン情報を指定します。

MAFスキンをバージョニングするには:

  1. 「アプリケーション」ウィンドウで、maf-skins.xmlファイルをダブルクリックします。デフォルトでは、これは、アプリケーション・コントローラ・プロジェクトのMETA-INFノードにあります。
  2. 「構造」ウィンドウで、バージョニングするスキンのskinノードを右クリックし、「skinの中に挿入」→「version」を選択します。
  3. maf-config.xmlファイルの<skin-version>要素に値が指定されていない場合に、このバージョンのスキンがアプリケーションで使用されるようにするには、「アプリケーションが使用するスキンの指定」の説明に従って、「バージョンの挿入」ダイアログで、デフォルト・リストから「true」を選択します。
  4. 名前フィールドに値を入力します。たとえば、これがスキンの最初のバージョンである場合はv1と入力します。
  5. 「OK」をクリックします。

スキンのバージョニング時に行われる処理

スキン用に構成するバージョン情報は、実行時にアプリケーションでスキンが適用されるときに、プラットフォーム値およびデバイス値より優先されます。

実行時に、MAFアプリケーションでは、プラットフォーム固有のスキンが適用される前にデバイス固有のスキンが適用されます。スキンのバージョン情報が指定されている場合、アプリケーションでは最初に、指定したスキンのバージョン値と一致するスキンを検索します。スキン・バージョン値およびデバイス値と一致するスキンが見つかると、アプリケーションではこのスキンが適用されます。指定したスキン・バージョンのスキンがデバイス固有のスキン内で見つからなかった場合、アプリケーションでは指定したバージョンのスキンをプラットフォーム固有のスキン内で検索します。使用可能なプラットフォーム固有のスキン内で、指定したバージョンと一致するスキンが見つからない場合、アプリケーションではベース・スキンを検索します。

例9-2は、3つのスキン(customFamily-v1.iphone5,3、customFamily-v2.iPhone5,3およびcustomFamily-v3.iPhone5,3)を参照するmaf-skins.xmlの例を示しています。これらの各スキンの<family>要素は同じ値(customFamily)になっています。<version>要素の子要素の値によって、これらのスキンがそれぞれ区別されます。

実行時に、アプリケーションのmaf-config.xmlファイルにおける<skin-family>要素の値としてcustomFamilyが指定されたアプリケーションでは、customFamily-v1.iphone5,3を使用します。これは、このスキンがmaf-skins.xmlファイルでデフォルト・スキンとして構成されているためです。この動作は、「アプリケーションが使用するスキンの指定」で説明されているように、maf-config.xmlファイル内の<skin-version>要素に値を指定してオーバーライドできます。たとえば、maf-config.xmlファイルの<skin-version>要素の値としてv2を指定すると、アプリケーションでは、maf-skins.xmlファイルでデフォルト値として定義されているcustomFamily-v1.iphone5,3のかわりにcustomFamily-v2.iPhone5,3が使用されます。

(maf-config.xmlファイル内の<skin-version>要素を使用して)取得するスキンのバージョンを指定しない場合、アプリケーションはmaf-skins.xmlファイル内の<default>true</default>要素を使用してデフォルトとして定義されているスキンを使用します。デフォルトのスキンを指定しない場合、アプリケーションはmaf-skins.xmlファイル内で定義される最後のスキンを使用します。例9-2において、定義される最後のスキンはcustomFamily-v3.iPhone5,3です。

例9-2 バージョニングされたスキン・ファイルが含まれたmaf-skins.xmlファイル

<?xml version="1.0" encoding="UTF-8" ?>
<adfmf-skins xmlns="http://xmlns.oracle.com/adf/mf/skin">
  <skin id="s1">
    <family>customFamily</family>
    <id>customFamily-v1.iphone5,3</id>
    <extends>customFamily-v1.iOS</extends>
    <style-sheet-name>iphone.css</style-sheet-name>
    <version>
      <default>true</default>
      <name>v1</name>
    </version>
  </skin>
  <skin id="s2">
    <family>customFamily</family>
    <id>customFamily-v2.iPhone5,3</id>
    <extends>customFamily-v1.iOS</extends>
    <style-sheet-name>iphone-v2.css</style-sheet-name>
    <version>
      <name>v2</name>
    </version>
  </skin>
  <skin id="s3">
    <family>customFamily</family>
    <id>customFamily-v3.iPhone5,3</id>
    <extends>customFamily-v1.iOS</extends>
    <style-sheet-name>iphone-v3.css</style-sheet-name>
    <version>
      <name>v3</name>
    </version>
  </skin>
</adfmf-skins>

デフォルト・スキン・スタイルのオーバーライド

MAF AMXアプリケーションでは、MAF AMXとして実装されたアプリケーション機能に対して特定のスタイルを指定し、それによって、maf-config.xmlおよびmaf-skins.xmlファイル内のアプリケーション・レベルで設定されているデフォルトのスキン・スタイルをオーバーライドできます。

アプリケーション機能に個別のスタイルを追加するには、CSSファイルを包含ファイルとして使用します。

maf-feature.xmlファイルの概要エディタの「包含」表では、MAF AMXアプリケーション機能にCSSを追加できます。

図9-3 「包含」表

図9-3の説明
「図9-3 「包含」表」の説明

始める前に:

「タスク・フローの作成」の説明に従ってMAFタスク・フローを作成します。このスキンのCSSファイルを作成または追加します。ビュー・コントローラ・プロジェクトを選択し、「新規」→「CSSファイル」を選択してCSSファイルを作成できます。または、次のようにCSSファイルをJARファイルにパッケージ化することもできます。

  1. メイン・メニューから「アプリケーション」→「プロジェクト・プロパティ」を選択します。

  2. 「プロジェクト・プロパティ」ダイアログで、「ライブラリとクラスパス」ページを選択し、「JAR/ディレクトリの追加」をクリックします。

  3. 「アーカイブまたはディレクトリの追加」ダイアログで、インポートするスキンが含まれているJARファイルに移動し、「選択」をクリックします。

    JARファイルが「クラスパス・エントリ」リストに表示されます。

  4. 「OK」をクリックします。

アプリケーション機能にスタイル・シートを追加する方法:

  1. 「追加」をクリックして、「包含」表に新しい行を作成します。

  2. 「インクルードの挿入」ダイアログで、次のフィールドに値を入力します。

    • ファイル: 追加するCSSスタイル・シートを参照して選択します。

    • タイプ: ドロップダウン・リストから「スタイルシート」を選択します。

  3. 「OK」をクリックします。

    注意:

    選択したスタイル・シートの.CSSファイルがビュー・コントローラ・プロジェクト内に存在する必要があります。

スキニングに関する必知事項

スタイルをカスタマイズし、アプリケーションを異なるデバイスにデプロイするときに適用できます。

maf-skins.xmlファイルで定義されるCSSファイル(例9-3を参照)は、Apple iPhoneとiPadの異なる表示要件に適応するようにスキンを拡張する方法を示します。これらのスタイルは降順に適用されます。SkinningDemoサンプル・アプリケーションでは、アプリケーションを異なるデバイスにデプロイするときに、カスタマイズされたスタイルを適用できるようにする方法のデモが提供されています。このサンプル・アプリケーションは、開発用コンピュータのJDeveloperインストール・ディレクトリ内にある次の場所のPublicSamples.zipファイルに含まれています。 

jdev_install/jdeveloper/jdev/extensions/oracle.maf/Samples

たとえば、iOSレベルでは、スタイルシート(例9-3のmobileAlta)がiPhoneまたはiPadのどちらにも適用されます。デバイス固有のスタイル用には、iPhoneおよびiPadのスキンに対して<skin-id>要素を定義します。スキニングのデモ・アプリケーションでは、この要素によって定義されたカスタム・スキンの使用方法が示されています。

例9-3 maf-skins.xmlファイルで定義されるスキニング・レベル

<?xml version="1.0" encoding="UTF-8" ?>
<adfmf-skins xmlns="http://xmlns.oracle.com/adf/mf/skins">
    <skin>
        <id>mobileAlta-v1.6.iPhone5,3</id>
        <family>mobileAlta</family>
        <extends>mobileAlta-v1.6.iOS</extends>
        <style-sheet-name>skins/mobileAlta-v1.6.iphone.css</style-sheet-name>
    </skin>
    <skin>
        <id>mobileAlta-v1.6.iPad iPad4,1</id>
        <family>mobileAlta</family>
        <extends>mobileAlta-v1.6.iOS</extends>
        <style-sheet-name>skins/mobileAlta-v1.6.ipad.css</style-sheet-name>
    </skin>
    <!--  Skin Additions -->
    <skin-addition>
        <skin-id>mobileAlta-v1.6.iPhone5,3</skin-id>
        <style-sheet-name>skins/mystyles.iphone.addition1.css</style-sheet-name>
    </skin-addition>
    <skin-addition>
        <skin-id>mobileAlta-v1.6.iPhone5,3</skin-id>
        <style-sheet-name>skins/mystyles.iphone.addition2.css</style-sheet-name>
    </skin-addition>
    <skin-addition>
        <skin-id>mobileAlta-v1.6.iOS</skin-id>
        <style-sheet-name>skins/mystyles.ios.addition2.css</style-sheet-name>
    </skin-addition>
</adfmf-skins>

スキンへの新しいスタイル・シートの追加

スキンを拡張するかわりに、CSSファイルを既存のスキンに追加できます。

新しいスタイルシートをスキンに追加するには:

  1. 「コンポーネント」ウィンドウから「構造」ウィンドウに、<skin-addition>要素をドラッグ・アンド・ドロップします。
  2. 図に示すように、「skin-additionの挿入」ダイアログに入力を行うことで、表9-2で説明した要素を<skin-addition>要素に移入します。

    • 新しいスタイルを追加するスキンの識別子を入力します。

    • CSSファイルの場所を取得します。

    図9-4 「skin-additionの挿入」ダイアログ

    図9-4の説明が続きます
    「図9-4 「skin-additionの挿入」ダイアログ」の説明
  3. 「OK」をクリックします。

注意:

DOM変更構造を使用するカスタム・スタイルを作成すると、MAFアプリケーションがハングする可能性があります。特に、displayプロパティでは、MAF AMXから変換されたHTMLでレンダリングに問題が発生します。このプロパティは、table、table-row、table-cellなどの値を使用してコンポーネントを表に変換しており、適切な親の表オブジェクト内に含まれていない表関連の構造が作成される可能性があります。この問題はアプリケーションのユーザー・インタフェース自体には表示されないことがありますが、ロギング・コンソールではSignal 10の例外によってレポートされます。

エンド・ユーザーによる実行時のアプリケーション・スキンの変更の有効化

エンド・ユーザーが実行時に他のスキンを選択できるように、アプリケーションを構成できます。

エンド・ユーザーが必要により適したスキンを使用して、アプリケーションをレンダリングできるようにする場合に、この機能を構成します。

図では、ボタンを表示してエンド・ユーザーが実行時にアプリケーションで使用されるスキンを変更できるようにすることで、この機能をどのように実装するかを示しています。ページ上のボタンを構成して、後からアプリケーションのmaf-config.xmlファイルのskin-familyプロパティにより評価されるscope値を設定します。

図9-5 実行時におけるアプリケーションのスキンの変更(iOSの場合)

図9-5の説明が続きます
「図9-5 実行時におけるアプリケーションのスキンの変更(iOSの場合)」の説明

アプリケーションのmaf-config.xmlファイルのskin-familyプロパティの値の更新を可能にするコンポーネントを公開することにより、エンド・ユーザーがアプリケーションのスキンを変更できるようにします。

エンド・ユーザーが実行時にアプリケーションのスキンを変更できるようにするには:

  1. maf-config.xmlファイルでスキン・ファミリ・プロパティを設定するために使用するコンポーネントを構成するページを開きます。
  2. 図に示すように、エンド・ユーザーが実行時に多数の使用可能なスキンの1つを選択できるようにする多数のコンポーネント(ボタン・コンポーネントなど)を構成します。

    次の例は、エンド・ユーザーが実行時に使用可能なスキンの1つを選択できるようにするamx:commandButtonコンポーネントの構成方法を示しています(図を参照)。各amx:commandButtonコンポーネントにより、actionListener属性の値を指定します。エンド・ユーザーがボタンをクリックすると、この属性でactionEventがskinsというマネージドBean上のメソッド(skinMenuAction)に渡されます。 

    ...
<amx:commandButton text="Switch to Alta" 
     actionListener="#{applicationScope.SkinBean.switchToMobileAlta}" id="cb1"/>
<amx:commandButton text="Switch to Fusion Fx"
     actionListener="#{applicationScope.SkinBean.switchToMobileFusionFx}" id="cb2"/>
...
  3. エンド・ユーザーによって選択されたスキンの値を格納するには、アプリケーションのビュー・コントローラ・プロジェクトにマネージドBeanを記述します。例は、エンド・ユーザーが選択した値をとり、それをマネージドBean内のskinFamilyの値の設定に使用するメソッドを示しています。また、アプリケーション内のすべての機能をリセットして新しいスキンを使用し、「データ変更イベントの使用」で説明されているPropertyChangeSupportオブジェクトとPropertyChangeListenerオブジェクトを使用するメソッドも示しています。
  4. 「アプリケーション」ウィンドウで、「アプリケーション・リソース」パネルを開き、「ディスクリプタ」→「ADF Meta-INF」ノードを開き、maf.config.xmlファイルをダブルクリックします。
  5. maf-config.xmlファイルで、EL式を記述してスキン・ファミリを動的に評価します。

    <skin-family>#{applicationScope.SkinBean.skinFamily}</skin-family>

例9-4 アプリケーションのスキンを変更するためのマネージドBean

package application;
 
import javax.el.ValueExpression;
import oracle.adfmf.amx.event.ActionEvent;
import oracle.adfmf.framework.FeatureInformation;
import oracle.adfmf.framework.api.AdfmfContainerUtilities;
import oracle.adfmf.framework.api.AdfmfJavaUtilities;
import oracle.adfmf.java.beans.PropertyChangeListener;
import oracle.adfmf.java.beans.PropertyChangeSupport;
 
public class SkinBean {

    private String skinFamily = "mobileAlta";
    private PropertyChangeSupport propertyChangeSupport = new PropertyChangeSupport(this);
 
    public void setSkinFamily(String skinFamily) {
        String oldSkinFamily = this.skinFamily;
        this.skinFamily = skinFamily;
        propertyChangeSupport.firePropertyChange("skinFamily", oldSkinFamily, skinFamily);
    }
 
    public String getSkinFamily() {
        return skinFamily;
    }
 
    public void addPropertyChangeListener(PropertyChangeListener l) {
        propertyChangeSupport.addPropertyChangeListener(l);
    }
 
    public void removePropertyChangeListener(PropertyChangeListener l) {
        propertyChangeSupport.removePropertyChangeListener(l);
    }
 
    public void switchToMobileAlta(ActionEvent ev){
        this.switchSkinFamily("mobileAlta");
    }
 
    public void switchToMobileFusionFx(ActionEvent ev) {
        this.switchSkinFamily("mobileFusionFx");
    }
 
    public void switchSkinFamily(String family) {
        this.setSkinFamily(family);
        // reset all the features individually as follows to load the new skin
        FeatureInformation[] features = AdfmfContainerUtilities.getFeatures();
        for (int i = 0; i < features.length; i++) {
            AdfmfContainerUtilities.resetFeature(features[i].getId());
        }
    }
}

実行時に行われる処理: エンド・ユーザーによるアプリケーションのスキンの変更方法

実行時に、エンド・ユーザーは公開されたコンポーネントを使用して、別のスキンを選択します。

このコンポーネントは、エンド・ユーザーが選択した値をマネージドBeanに発行し、次にこれがマネージドBeanのプロパティ(skinFamily)の値を設定します。実行時に、maf-config.xmlファイルの<skin-family>プロパティでは、EL式を使用してマネージドBeanから値を読み取ります。また、例9-4のマネージドBeanは、新しく指定したスキンを使用するアプリケーションに機能を再ロードします。

ヒント:

<skin-family>プロパティと同様に、EL式を使用して、実行時にmaf-config.xmlファイルの<skin-version>プロパティの値を設定できます。