Oracle Enterprise Pack for Eclipse Oracle Mobile Application Framework (OEPE Edition)でのモバイル・アプリケーションの開発 リリース2.1.3 E67371-01 |
|
前 |
次 |
この章では、スキンを使用してMAFアプリケーションの外観をカスタマイズする方法について説明します。
この章の内容は次のとおりです。
MAFではCascading Style Sheet (CSS)言語ベースのスキンを使用するので、MAFアプリケーション内の(その要素のアプリケーション機能で使用されるものを含む)すべてのアプリケーション・コンポーネントが一貫したルック・アンド・フィールを確実に共有するようになっています。MAF AMXまたはHTMLコンポーネントを再構成してMAFアプリケーションの外観を変更するかわりに、コンポーネントの表示方法を変更するスキンを作成または拡張できます。
MAF AMXページの外観を決定するセレクタを定義するためにMAFで使用されるサポート済のスキンのファミリとバージョンは、次のとおりです。
amx mobileAlta-1.0 mobileAlta-1.1 mobileAlta-1.2 mobileAlta-1.3 mobileFusionFx-1.0 mobileFusionFx-1.1
デフォルトで、新規作成したMAFアプリケーションでは最新バージョンのmobileAlta
スキン・ファミリが使用されます。アプリケーションを以前のリリースから最新リリースに移行すると、そのアプリケーションでは移行前に使用するよう構成されていたスキンが引き続き使用されます。移行後のアプリケーションで別のスキン(たとえば最新バージョンのmobileAlta
)を使用する場合は、第8.3項「アプリケーションが使用するスキンの指定」の説明に従って、maf-config.xml
ファイルを編集する必要があります。
図8-1は、異なるスキンを使用して同じアプリケーション画面のレンダリングを示すことによって、mobileAlta
スキン・ファミリとmobileFusionFx
スキン・ファミリのルック・アンド・フィールの違いを示しています。
図8-2は、これらのスキンのファミリとバージョンの継承関係を示しています。
MAFアプリケーションの最初のデプロイ後に作成されるwww/css
ディレクトリには、これらのCSSファイルが格納されます。このディレクトリにアクセスするには、MAFアプリケーションをシミュレータまたはデバイスにデプロイし、deploy
ディレクトリ(例: C:\OEPE\mywork\
app_name
\deploy
)に移動します。www\css
ディレクトリは、デプロイメントによって生成された、プラットフォーム固有のアーティファクト内にあります。iOSデプロイメントの場合、このディレクトリはtemporary_xcode_project
ディレクトリ内にあります。Androidデプロイメントの場合、このディレクトリはAndroidアプリケーション・パッケージ(.apk
)ファイルのassets
ディレクトリ内にあります。
注意: MAF DOM構造に依存するスタイルを記述しないでください。また、これらのファイル内で定義されている一部のセレクタは、サポートされていない場合があります。 |
maf-config.xml
ファイル(第8.1.1項「maf-config.xmlファイルについて」を参照)とmaf-skins.xml
ファイル(第8.1.2項「maf-skins.xmlファイルについて」を参照)を使用して、MAFアプリケーションのスキニングを制御します。maf-config.xml
ファイルでは、アプリケーション・コンポーネントのレンダリングに使用するデフォルトのスキン・ファミリを指定し、maf-skins.xml
ファイルでは、デフォルトのスキン・ファミリをカスタマイズしたり、新しいスキン・ファミリを定義することができます。
MAFアプリケーションを作成すると、OEPEによって、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.3</skin-version> .... </adfmf-config>
MAFでは階層としてスキンが適用されます。最上位にはデバイス固有のスキン、その後にプラットフォーム固有のスキン、ベース・スキンmobileAlta
と続きます。MAFのmobileAlta
スキン・ファミリの場合、この階層は次のように表されます。
mobileAlta.
<DeviceModel>
(例: mobileAlta.iPhone5,3
)
mobileAlta.iOS
またはmobileAlta.Android
mobileAlta
図8-3は、実行時にMAFでスキンのこの階層が適用される様子をイラストレーションで示しています。SkinningDemo
サンプル・アプリケーション(付録G「サンプルのMAFアプリケーション」を参照)でも、この実装を示しています。
MAFでは、この階層のデバイス固有のレベルで定義されたセレクタを優先します。つまり、MAFでは、mobileAlta.iOS
で定義されたセレクタを、mobileAlta.iPhone
で定義された同じセレクタで上書きします。<extends>
要素(第8.1.2項「maf-skins.xmlファイルについて」を参照)によって、この階層がMAFランタイム用に定義されます。様々なレベルでのスキンの適用方法の詳細は、第8.8項「スキニングに関する必知事項」を参照してください。
アプリケーション・コントローラ・プロジェクトのMETA-INF
ノードにあるmaf-skins.xmlファイルによって、既存のスキンを拡張して新しいスキンを定義したり、既存のスキンに新しいスタイル・シートを追加することができます。
デフォルトでは、このファイルは空ですが、表8-1に示されている要素によって子要素を記述します。これらの子要素をこのファイルに移入することで、mobileAlta
を拡張したり、アプリケーションで使用できるCSSファイルを定義できます。新しいスキンを作成したり、既存のスキンを拡張するには、<skin>
要素を使用します。
表8-1 <skin>要素の子要素
要素 | 説明 |
---|---|
|
たとえば、Apple iPadまたはiPhoneへのデプロイ時に、ユーザーのアプリケーションの外観を定義するスキンをユーザーのアプリケーションに登録するには、 |
|
スキン・ファミリを識別する必須要素。 |
|
この要素を使用して、拡張するスキンのスキンIDを指定することによって既存のスキンを拡張します。 <skin> <id>mySkin-v1</id> <family>mySkin</family> <extends>mobileAlta-v1.3</extends> <style-sheet-name>styles/myskin.css</style-sheet-name> <version> <name>v1</name> </version> </skin> |
|
MAFアプリケーションのプロジェクト内のCSSファイルの場所を指定するには、相対URLを使用します。たとえば、SkinningDemoサンプル・アプリケーションの
|
|
スキンの異なるバージョンを指定します。詳細は、第8.5項「MAFスキンのバージョニング」を参照してください。 |
表8-2に、スタイルシートを既存のスキンに統合する場合に、MAF CSS内で<skin-addition>
要素を定義するために使用できる要素を示しています。
表8-2 <skin-addition>の子要素
要素 | 説明 |
---|---|
|
スタイルシートをさらに追加する必要があるスキンのIDを指定します。指定可能な値には、MAFによって提供されるスキン(たとえば、 |
|
MAFアプリケーションのプロジェクト内のCSSファイルの場所を指定するには、相対URLを使用します。たとえば、SkinningDemoサンプル・アプリケーションの
|
次の例では、<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.3.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デバイスにレンダリングしたり、これらの要素を定義してすべてのデバイスのプラットフォームに対するスタイルを処理することもできます。表8-3に、iOSプラットフォームに属するすべてのデバイス、および特定のiOSデバイス・タイプ(タブレット、電話、シミュレータ)をターゲットにするこれらの要素の使用例を示します。
表8-3 プラットフォームおよびデバイス固有のスタイル
デバイス | 例 |
---|---|
iPhone |
<skin-addition> <skin-id>mobileAlta-v1.3.iPhone5,1</skin-id> <style-sheet-name>iPhoneStylesheet.css</style-sheet-name> </skin-addition> |
iPad |
<skin-addition> <skin-id>mobileAlta-v1.3.iPad4,2</skin-id> <style-sheet-name>iPadStylesheet.css</style-sheet-name> </skin-addition> |
iPhoneシミュレータ |
<skin-addition> <skin-id>mobileAlta-v1.3.iPhone Simulator x86_64</skin-id> <style-sheet-name>iPhoneSimStylesheet.css</style-sheet-name> </skin-addition> |
すべてのiOSデバイス |
<skin-addition> <skin-id>mobileAlta-v1.3.iOS</skin-id> <style-sheet-name>iOSSimStylesheet.css</style-sheet-name> </skin-addition> |
アプリケーションにカスタム・スキンを追加するには、OEPE内にCSSファイルを作成します。CSSはアプリケーションとともにデプロイするために、OEPEによりプロジェクトのソース・ファイルに配置されます。
カスタム・スキンをアプリケーションに追加する手順:
「アプリケーション」ウィンドウで、ViewContentを展開し、cssフォルダを右クリックして「新」→「その他」を選択します。「新規ギャラリ」ダイアログで、「Web」を展開し、「CSSファイル」を選択します。「次へ」をクリックします。
ウィザードの新規CSSファイル・ページで、CSSファイルの名前を指定します。
「終了」をクリックします。
Eclipseに新しいCSSファイルが開かれ、アプリケーション用のスタイルを定義できます。
maf-config.xml
ファイルで値を構成して、アプリケーションで使用するスキンを決定します。
使用するアプリケーションのスキンを指定するには:
プロジェクト・エクスプローラで、アセンブリ・プロジェクト、adf
、META-INF
の順に展開し、maf-config.xml
ファイルをダブルクリックしてXMLエディタで開きます。
maf-config.xml
ファイルに、使用するスキンの<skin-family>
要素、および<skin-version>
要素(オプション)の値を指定します(図8-4を参照)。
ソース・エディタにファイルを表示するには、XMLエディタの下部にある「ソース」タブをクリックします。次の例に、モバイル・アプリケーションでmobileAlta.v1.2
スキンを使用するために必要な構成を示します。
<adfmf-config xmlns="http://xmlns.oracle.com/adf/mf/config"> <skin-family>mobileAlta</skin-family> <skin-version>v1.2</skin-version> </adfmf-config>
注意: アプリケーションが実行時に使用するスキンを動的に選択する場合、EL式を<skin-family> 要素の値として設定します。詳細は、第8.10項「エンド・ユーザーによる実行時のアプリケーション・スキンの変更の有効化」を参照してください。 |
maf-skins.xml
ファイルにカスタム・スキンを識別するプロパティ値を追加することで、ユーザーのアプリケーションにカスタム・スキンを登録します。
カスタム・スキンを登録する手順:
プロジェクト・エクスプローラで、「アプリケーション・プロジェクト」→「src」→「META-INF」の順に展開し、maf-skins.xmlをダブルクリックしてXMLエディタで開きます。
「設計」タブに切り替えます。adfmf-skinsタグを選択し、右クリックします。「子を追加」→「skin」を選択します。
skinノードを展開し、デフォルトでidタグとfamilyタグが作成されていることを確認してください。右クリックしてから、「子を追加」→「extends」を選択してextendsを作成するか、または「子を追加」→「style-sheet-name」
を選択してstyle-sheet-name
を作成することができます。
次のフィールドのいずれかを選択し、値を次のように編集するために「コンテンツ」列に進みます。
ファミリ: スキンのファミリ名の値を入力します。
新しい名前を入力するか、既存のファミリ名を指定できます。既存のファミリ名を指定した場合は、第8.5項「MAFスキンのバージョニング」に示すように、スキンをバージョニングして、同じファミリ値を持つスキンを区別します。
入力する値は、作成するスキンを登録するmaf-skins.xml
の<family>
要素の値として設定されます。アプリケーションのmaf-config.xml
の<skin-family>
要素では、実行時にこの値を使用してアプリケーションで使用されるスキンを識別します。
ID: skinFamily-version
またはskinFamily-version.platform
のいずれかの名前書式を使用してスキンのIDを入力します。たとえば、mySkinFamily-v1.1.android
と入力します。
拡張対象: 拡張する親スキンの名前を入力します。たとえば、カスタム・スキンでmobileAlta-v1.2
スキンを拡張する場合は、mobileAlta-v1.2
と入力します。
スタイルシート名: スタイルシートの名前を入力または選択します。
ファイルmaf-skins.xml
を保存します。
<version>
要素を使用して、maf-skins.xml
ファイルでスキンのバージョン番号を指定できます。maf-skins.xml
ファイル内の<family>
要素の値が同じスキンを区別する場合はこのオプション機能を使用します。この機能は、いくつかの既存の動作を変更するために既存のスキンの新規バージョンを作成する場合に役立ちます。特定のスキンを使用するようにアプリケーションを構成する場合は、第8.3項「アプリケーションが使用するスキンの指定」に説明されているように、maf-config.xml
ファイルで値を指定してください。
maf-skins.xml
ファイル内の<version>
要素に値を入力して、スキンのバージョンを指定します。
ベスト・プラクティス: アプリケーションのmaf-skins.xml ファイルに登録する各スキンのバージョン情報を指定します。 |
プロジェクト・エクスプローラで、「アプリケーション・プロジェクト」→「src」→「META-INF」の順に展開し、maf-skins.xml
をダブルクリックしてXMLエディタで開きます。
「設計」タブに切り替えます。skinタグを選択し、右クリックします。「子を追加」→「version」を選択します。
「version」を右クリックし、「子を追加」→「default」を選択します。第8.5項「MAFスキンのバージョニング」に示すように、maf-config.xml
ファイルの<skin-version>
要素に値が指定されていないときアプリケーションでスキンのこのバージョンを使用する場合には、defaultタグを選択し、「コンテンツ」列に移動し、defaultの値をtrue
として設定します。
skinタグの下のnameタグを選択し、「コンテンツ」列に進みます。「名前」フィールドの値を入力します。たとえば、これがスキンの最初のバージョンである場合はv1
と入力します。
ファイルmaf-skins.xml
を保存します。
スキン用に構成するバージョン情報は、実行時にアプリケーションでスキンが適用されるときに、プラットフォーム値およびデバイス値より優先されます。実行時に、MAFアプリケーションでは、プラットフォーム固有のスキンが適用される前にデバイス固有のスキンが適用されます。スキンのバージョン情報が指定されている場合、アプリケーションでは最初に、指定したスキンのバージョン値と一致するスキンを検索します。スキン・バージョン値およびデバイス値と一致するスキンが見つかると、アプリケーションではこのスキンが適用されます。指定したスキン・バージョンのスキンがデバイス固有のスキン内で見つからなかった場合、アプリケーションでは指定したバージョンのスキンをプラットフォーム固有のスキン内で検索します。使用可能なプラットフォーム固有のスキン内で、指定したバージョンと一致するスキンが見つからない場合、アプリケーションではベース・スキンを検索します。
次の例は、3つのスキン(customFamily-v1.iphone5,3
、customFamily-v2.iPhone
およびcustomFamily-v3.iPhone
)を参照するmaf-skins.xml
の例を示しています。これらの各スキンの<family>
要素は同じ値(customFamily
)になっています。<version>
要素の子要素の値によって、これらのスキンがそれぞれ区別されます。
実行時に、アプリケーションのmaf-config.xml
ファイルにおける<skin-family>
要素の値としてcustomFamily
が指定されたアプリケーションでは、customFamily-v1.iphone5,3
を使用します。これは、このスキンがmaf-skins.xml
ファイルでデフォルト・スキンとして構成されているためです(<default>true</default>
)。この動作は、第8.3項「アプリケーションが使用するスキンの指定」で説明されているように、maf-config.xml
ファイル内の<skin-version>
要素に値を指定してオーバーライドできます。たとえば、maf-config.xml
ファイル内の<skin-version>
要素の値としてv2
を指定した場合、アプリケーションはmaf-skins.xml
ファイル内でデフォルトとして定義されているcustomFamily-v1.iphone5,3
ではなくcustomFamily-v2.iPhone
を使用します。
(maf-config.xml
ファイル内の<skin-version>
要素を使用して)取得するスキンのバージョンを指定しない場合、アプリケーションはmaf-skins.xml
ファイル内の<default>true</default>
要素を使用してデフォルトとして定義されているスキンを使用します。デフォルトのスキンを指定しない場合、アプリケーションはmaf-skins.xml
ファイル内で定義される最後のスキンを使用します。次の例で、定義される最後のスキンはcustomFamily-v3.iPhone
です。
<?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.iPhone</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.iPhone</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を追加できます。
始める前に:
第12.2項「タスク・フローの作成」の説明に従って、MAFタスク・フローを作成します。スキンのCascading Style Sheet (CSS)ファイルを作成または追加します。CSSファイルを作成するには、ビュー・コントローラ・プロジェクトのViewContentフォルダを右クリックし、「ファイル」→「新」→「その他」を選択し、フィルタにCSSと入力します。「Web」→「CSSファイル」を選択します。
アプリケーション機能にスタイルを追加するには:
maf-feature.xml
ファイルを開きます。コンテンツ・タイプとして「AMXページ」を持つ機能があることを確認します。
「アウトライン」セクションで、「機能」→機能名→「コンテンツ」→「機能ID」の順に展開し、「包含」を選択します。選択時に、「包含」セクションはエディタの右側に表示されます(図8-6を参照)。
「参照」ボタンを選択し、「包含」セクションに含めるファイルを選択します。これによって、CSSスタイルシートまたはJavaScriptファイルの選択ダイアログが開きます(図8-7)。
ビュー・コントローラ・プロジェクトのViewContentディレクトリの下で、以前に作成したCSSファイルを選択します。
注意: .css ファイルは、ビュー・コントローラ・プロジェクト内に配置する必要があり、アプリケーション・コントローラ・プロジェクト内に配置されている.css ファイルを含めることはできません。 |
変更をモバイル機能エディタに保存します。
maf-skins.xml
ファイルで定義されるCSSファイル(次の例を参照)は、Apple iPhoneとiPadの異なる表示要件に適応するようにスキンを拡張する方法を示します。これらのスタイルは降順に適用されます。SkinningDemoサンプル・アプリケーションでは、アプリケーションを異なるデバイスにデプロイするときに、カスタマイズされたスタイルを適用できるようにする方法のデモが提供されています。この例を確認するには、「ファイル」→「新」→「MAFサンプル」を選択し、MAFサンプル・ページからSkinningDemoを選択します。
たとえば、iOSレベルでは、スタイルシート(次の例のmobileAlta
)がiPhoneまたはiPadのどちらにも適用されます。デバイス固有のスタイル用には、iPhoneおよびiPadのスキンに対して<skin-id>
要素を定義します。スキニングのデモ・アプリケーションでは、この要素によって定義されたカスタム・スキンの使用方法が示されています。
<?xml version="1.0" encoding="UTF-8" ?> <adfmf-skins xmlns="http://xmlns.oracle.com/adf/mf/skins"> <skin> <id>mobileAlta-v1.2.iPhone</id> <family>mobileAlta</family> <extends>mobileAlta-v1.2.iOS</extends> <style-sheet-name>skins/mobileAlta-v1.2.iphone.css</style-sheet-name> </skin> <skin> <id>mobileAlta-v1.2.iPad</id> <family>mobileAlta</family> <extends>mobileAlta-v1.2.iOS</extends> <style-sheet-name>skins/mobileAlta-v1.2.ipad.css</style-sheet-name> </skin> <skin> <id>mobileAlta-v1.2.iPod</id> <family>mobileAlta</family> <extends>mobileAlta-v1.2.iOS</extends> <style-sheet-name>skins/mobileAlta-v1.2.ipod.css</style-sheet-name> </skin> <!-- Skin Additions --> <skin-addition> <skin-id>mobileAlta-v1.2.iPhone</skin-id> <style-sheet-name>skins/mystyles.iphone.addition1.css</style-sheet-name> </skin-addition> <skin-addition> <skin-id>mobileAlta-v1.2.iPhone</skin-id> <style-sheet-name>skins/mystyles.iphone.addition2.css</style-sheet-name> </skin-addition> <skin-addition> <skin-id>mobileAlta-v1.2.iOS</skin-id> <style-sheet-name>skins/mystyles.ios.addition2.css</style-sheet-name> </skin-addition> </adfmf-skins>
スキンを拡張するかわりに、CSSファイルを既存のスキンに追加できます。
新しいスタイルシートをスキンに追加するには:
プロジェクト・エクスプローラで、「アプリケーション・プロジェクト」→「src」→「META-INF」フォルダの順に展開し、maf-skins.xml
ファイルをダブルクリックしてXMLエディタで開きます。
「設計」タブに切り替えます。adfmf-skins
タグを選択し、右クリックします。「子の追加」→「skin-addition」を選択します。
skin-additionタグの下でskin-idタグを選択します。「コンテンツ」列に移動し、新しいスタイルを追加するスキンのIDを入力します(たとえば、mobileAlta-v1.2
)。
skin-additionタグを右クリックし、「子を追加」→「style-sheet-name」を選択します。style-sheet-nameタグを選択し、「コンテンツ」列に進みます。ViewContentフォルダに対するcssファイルの相対パスを指定します。たとえば、ViewContent/css/myaddedcss.css
にcssファイルを作成した場合は、値としてcss/myaddedcss.css
を入力します。
ファイルmaf-skins.xml
を保存します。
注意: DOM変更構造を使用するカスタム・スタイルを作成すると、MAFアプリケーションがハングする可能性があります。特に、display プロパティでは、MAF AMXから変換されたHTMLでレンダリングに問題が発生します。このプロパティは、table 、table-row 、table-cell などの値を使用してコンポーネントを表に変換しており、適切な親の表オブジェクト内に含まれていない表関連の構造が作成される可能性があります。この問題はアプリケーションのユーザー・インタフェース自体には表示されないことがありますが、ロギング・コンソールではSignal 10の例外によってレポートされます。 |
エンド・ユーザーが実行時に他のスキンを選択できるように、アプリケーションを構成できます。エンド・ユーザーが必要により適したスキンを使用して、アプリケーションをレンダリングできるようにする場合に、この機能を構成します。
図8-8では、ボタンを表示して、エンド・ユーザーが実行時にアプリケーションで使用されるスキンを変更できるようにすることで、この機能をどのように実装するかを示しています。ページ上のボタンを構成して、後からアプリケーションのモバイル・アプリケーション・エディタでskin-family
プロパティにより評価されるscope値を設定します。
アプリケーションのモバイル・アプリケーション・エディタでskin-family
プロパティの値の更新を可能にするコンポーネントを公開することにより、エンド・ユーザーがアプリケーションのスキンを変更できるようにします。
エンド・ユーザーが実行時にアプリケーションのスキンを変更できるようにするには:
モバイル・アプリケーション・エディタでスキン・ファミリ・プロパティを設定するために使用する1つ以上のコンポーネントを構成するページを開きます。
エンド・ユーザーが実行時に多数の使用可能なスキンの1つを選択できるようにする多数のコンポーネント(ボタン・コンポーネントなど)を構成します(図8-8を参照)。
次の例に、図8-8のようにエンド・ユーザーが実行時に使用可能なスキンを選択できるようにする、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"/> ...
エンド・ユーザーによって選択されたスキンの値を格納するには、アプリケーションのビュー・コントローラ・プロジェクトにマネージドBeanを記述します。次の例は、エンド・ユーザーが選択した値を取得し、それをマネージドBean内のskinFamily
の値の設定に使用するメソッドを示しています。次の例は、新しいスキンを使用するためにアプリケーションのすべての機能をリセットするメソッドも示しています。
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()); } } }
プロジェクト・エクスプローラで、「アプリケーション・リソース」パネルを展開し、「ディスクリプタ」→ADF Meta-INFノードの順に展開し、maf.config.xmlファイルをダブルクリックします。
maf-config.xml
ファイルで、EL式を記述してスキン・ファミリを動的に評価します。
<skin-family>#{applicationScope.SkinBean.skinFamily}</skin-family>
実行時に、エンド・ユーザーは公開されたコンポーネントを使用して、別のスキンを選択します。前述の手順2の例で、これは複数のamx:commandButton
コンポーネントのうちの1つです。このコンポーネントは、エンド・ユーザーが選択した値をマネージドBeanに発行し、次にこれがマネージドBeanのプロパティ(skinFamily
)の値を設定します。実行時に、maf-config.xml
ファイルの<skin-family>
プロパティでは、EL式を使用してマネージドBeanから値を読み取ります。また、前述の手順3の例のマネージドBeanは、新しく指定したスキンを使用するアプリケーションに機能を再ロードします。
ヒント: <skin-family> プロパティと同様に、EL式を使用して、実行時にmaf-config.xml ファイルの<skin-version> プロパティの値を設定できます。 |
アプリケーションの機能を個別にリセットして新しいスキンをロードするかわりに、次のクラスからresetApplication
メソッドを起動することもできます(次の例を参照)。
oracle.adfmf.framework.api.AdfmfContainerUtilities
詳細は、Oracle Mobile Application Framework Java APIリファレンスを参照してください。