| Oracle® Fusion Middleware Oracle ADFモバイル・ブラウザ・アプリケーションの開発 12c (12.2.1.3.0) E90370-01 |
|
 前 |
 次 |
この章では、ADFモバイル・ブラウザの開発環境を構成する方法、ADFモバイル・ブラウザ・ビューを作成する方法、およびアプリケーションを構築してテストする方法について説明します。
この章には次の項が含まれます:
ADFモバイル・ブラウザ・アプリケーションは、モバイル・デバイス用に最適化されているADF Facesアプリケーションです。そのため、モバイル・ブラウザ・アプリケーションは、標準のADF Facesアプリケーション用に作成されたモデル・プロジェクトを使用できます。または、ADFモバイル・ブラウザ・ビュー・コントローラ・プロジェクトを既存のADF facesアプリケーションに追加することができます。ADFモバイル・ブラウザ・ビュー・コントローラ・プロジェクトの作成後、Apache MyFaces Trinidadコンポーネントによって作成されたJSFページからモバイル・ブラウザ・アプリケーションを構築できます。
ADFモバイル・ブラウザ・アプリケーションを作成するには、次の手順を実行します。
アプリケーションおよびモデル・プロジェクトの作成による環境の構成
|
ヒント: 既存のADFアプリケーションのビジネス・ロジック・コンポーネントを使用できます。 |
ADFモバイル・ブラウザ・ビュー・コントローラ・プロジェクトを追加します。
ADFタスク・フローまたはADFページ・フローを作成します。
|
注意: ADFモバイル・ブラウザ・アプリケーションで使用されるADFタスク・フローは、ページ全体のみをサポートしています。ページ・フラグメント、ダイアログ内のポップアップ、またはリージョンはサポートしていません。ADFページ・フローを使用するADFモバイル・ブラウザ・アプリケーションでは、trinidad-simpleスキン・ファミリのみがサポートされます。 |
Apache MyFaces Trinidadコンポーネントで移入されたJSFページを追加します。
ADFモバイル・ブラウザ・スキニングを使用してページ・レイアウトを最適化します。
スマートフォンまたはスマートフォン・シミュレータでアプリケーションをテストします。
ADFモバイル・ブラウザ・アプリケーション開発には、モバイル向けに最適化されたビュー・コントローラ・プロジェクトが必要です。カスタム・プロジェクトの作成ウィザードに表示される使用可能なテクノロジのリストからTrinidadを選択して明示的にプロジェクトに追加し、Apache MyFaces Trinidadコンポーネントをプロジェクトに含める必要があります。
環境を構成するには、まず、ADFモバイル・ブラウザ・テクノロジを備えたプロジェクトを含むADFモバイル・ブラウザ・アプリケーションを作成します。カスタム・プロジェクトの作成ウィザードに表示される使用可能なテクノロジのリストからTrinidadを選択して明示的にプロジェクトに追加し、Apache MyFaces Trinidadコンポーネントをプロジェクトに含める必要があります。
始める前に:
必要に応じてADFモデル・プロジェクトを作成します。それ以外の場合、ADFモバイル・ブラウザ・アプリケーションでは、モデル・プロジェクトを既存のADFアプリケーションと共有できます。
ADFモバイル・ブラウザ・アプリケーションおよびADFモバイル・ブラウザ・プロジェクトを作成するには、次の手順を実行します。
「ファイル」→「新規」→「アプリケーション」を選択します。
「新規ギャラリ」で、「アプリケーション」→「ADF Fusion Webアプリケーション」を選択します。「OK」をクリックします。
図2-2に示すように、「ADF Fusion Webアプリケーションの作成」ウィザードの「アプリケーションの名前付け」ページでアプリケーションの名前を入力し、必要に応じて「ディレクトリ」フィールドにアプリケーションの場所を入力します。
「終了」をクリックします。
「ADF Fusion Webアプリケーション」を選択すると、モバイル・ビュー・プロジェクトによって使用されるモデル・プロジェクトが作成されます。図2-3は、「アプリケーション」ウィンドウに表示された、アプリケーションのモデル・プロジェクトおよび生成済のビュー・コントローラ・プロジェクトを示しています。
|
注意: 生成されたビュー・コントローラ・プロジェクトを使用してモデル・プロジェクト内でビジネス・ロジックを設計しないでください。かわりに、次の手順を実行してモバイル・ビュー・コントローラ・プロジェクトを作成します。 |
次のように、モバイル・ビュー・コントローラ・プロジェクトを作成します。
「ファイル」→「新規」→「プロジェクト」を選択します。
「カスタム・プロジェクト」を選択し、「OK」をクリックします。
図2-4に示されているように、「カスタム・プロジェクトの作成」ウィザードで、まずプロジェクト名を入力します。たとえば、mvc(モバイル・ビュー・コントローラの省略名)と入力します。
|
ヒント: モバイル・デバイスのブラウザでより容易に識別される、短いURL文字列を作成するには、小文字、ADFモバイル・ブラウザ・プロジェクトの短縮名、およびその.jspxページを使用してください。2.4項「ADFモバイル・ブラウザ・アプリケーションのテスト」も参照してください。 |
「ADFモバイル・ブラウザ」を「選択可能」リストから「選択済」リストに移動することによって、プロジェクト用にADFモバイル・ブラウザ機能を選択します。
図2-4は、「選択可能」ウィンドウ内の「ADFモバイル・ブラウザ」機能を示しています。「ADFモバイル・ブラウザ」機能を「選択済」ウィンドウに移動すると、Java、JSF (JavaServer Faces)、JSPおよびサーブレット、およびXMLテクノロジがプロジェクトで使用可能になり、図2-5に示すようにこれらも「選択済」ウィンドウに表示されます。
図2-6に示すようにTrinidadを「使用可能」リストから「選択済」リストに移動し、プロジェクト用のApache MyFaces Trinidadコンポーネントを選択します。
アプリケーションでADFタスク・フローを使用する場合は、「ADFページ・フロー」機能を「選択済」ウィンドウに追加します。図2-7に示すように、「ADFページ・フロー」機能により、ADF FacesおよびADFページ・フローを含むその他のテクノロジが追加されます。
「次へ」をクリックして「Java設定の構成」ページをナビゲートし、「終了」をクリックします。
図2-8に示すように、「アプリケーション」ウィンドウのFusion Webアプリケーション(adfm)内に、モバイル・ビュー・コントローラ・プロジェクト(mvc)が表示されます。
ビュー・コントローラ・プロジェクトを作成することで、モバイル・アプリケーションのページ・フロー定義ファイルfaces-config.xmlも作成されます。ページ・フローの作成の詳細は、Oracle Fusion Middleware Oracle ADF FacesによるWebユーザー・インタフェースの開発のページ・フローの定義に関する項を参照してください。
ADFモバイル・ブラウザおよびADFページ・フロー・テクノロジをADFモバイルのカスタム・ビュー・プロジェクトに追加すると、次のADFスキン関連構成ファイルとスタイル・シートが作成されます。それらの構成ファイルとスタイル・シートにより、ターゲットのモバイル・ブラウザにコンポーネントが適切にレンダリングされるようになります。表2-1は、ADFモバイル・ブラウザ・ビュー・コントローラ・プロジェクトのWebコンテンツ・フォルダにある、これらのファイルを示しています。
表2-1 スキニング関連のアーティファクト
| スキニング・ファイル | 場所 | 説明 |
|---|---|---|
|
|
モバイル・ビュー・コントローラ・プロジェクトのスタイル・ノード |
基本的なHTMLブラウザと、古いバージョンのスマートフォンで使用されるブラウザに使用されます。4.2項「ADFモバイル・ブラウザのスキニングの実装」も参照してください。 |
|
|
モバイル・ビュー・コントローラ・プロジェクトのスタイル・ノード |
iOSやBlackBerryなどで動くスマートフォンに使用されます。4.2項「ADFモバイル・ブラウザのスキニングの実装」も参照してください。 |
モバイル・ブラウザ・アプリケーションの開発では、Webプロジェクト内にWebページを作成します。通常、アプリケーションには、ユーザー・インタフェースを実装する場合はWebプロジェクトを、ビジネス・レイヤーを実装する場合はADFビジネス・コンポーネントまたはOracle EclipseLinkプロジェクトを作成します。
ADFモバイル・ブラウザ・アプリケーション・ページの作成では、最初にJSFページを作成してから、そこにApache MyFaces Trinidadコンポーネントを移入します。通常、モバイル・アプリケーションのJSFページを作成する前に、まずfaces-config.xmlファイルを使用してナビゲーション・ルールを作成します。
モバイルJSFページを作成するには、次の手順を実行します。
「アプリケーション」ウィンドウでモバイル・ビュー・コントローラ・プロジェクトを選択し、「新規」→「ページ」を選択します。
図2-9に示すように、「JSFページの作成」ダイアログで、JSFページの名前を入力します。必要に応じて、ページのディレクトリの場所を入力します。FaceletsまたはJSP XMLを選択できます。
図2-10は、page1.jsfというモバイルJSFページのデザイナを示しています。
「コンポーネント」ウィンドウで、図2-10のように「Trinidad」を選択してから、Apache MyFaces Trinidadコンポーネントを使用してページを作成します。これらのコンポーネントの表示を最適化するには、第4章「ADFモバイル・ブラウザ・アプリケーションのスキニング」で説明されているスタイルおよびパターンを参照してください。図2-10は、af_m_toolbarスタイル・クラスをtr:panelHeaderコンポーネントに適用する様子を示しています。これにより、スマートフォン上でページ・ヘッダーがツールバーのような要素としてレンダリングされるようになります。
スマートフォン、スマートフォン・シミュレータまたはデスクトップ・ブラウザ上で、ADFモバイル・ブラウザ・アプリケーションをテストできます。実際のスマートフォンまたはスマートフォン・シミュレータでテストすると、デスクトップ・ブラウザ上でテストした場合よりも正確な結果が得られます。
デスクトップ・ブラウザを使用したADFモバイル・ブラウザ・アプリケーションのテストでは、テスト環境がかなり画一的になるため、おおよその結果しか得られません。デスクトップ・ブラウザではWebページの外観および動作が似ており、ビジネス・ロジックがまったく同じように実行されるためです。一方で、実際のスマートフォンを使用したアプリケーションのテストでは、モバイル・ブラウザの機能によってデスクトップ・ブラウザの場合とは異なる方法で動作が制御されるため、より正確な結果が得られます。Webサーバーがモバイル・ブラウザに固有のページを生成してページのルック・アンド・フィールを最適化するため、デスクトップ・ブラウザよりも通常は小さいモバイル・ブラウザでは、デスクトップ・ブラウザとは異なる方法でページがレンダリングされます。
また、ADFモバイル・ブラウザ・アプリケーションをスマートフォン上で直接テストする場合には、テストが必要なすべてのデバイスにはアクセスできない可能性があります。さらに、多くのモバイル・デバイスは、インターネットのみにアクセスでき、ファイアウォールの後ろにある開発環境にはアクセスできないため、ファイアウォールによってテストが複雑になることがあります。そのような場合は、かわりのテスト方法としてスマートフォン・シミュレータを使用できます。たとえば、BlackBerryスマートフォン・シミュレータ(図2-11)またはWindows Mobileデバイス・エミュレータ(図2-13)でアプリケーションをテストするには、RIM社の開発者サイト(http://us.blackberry.com)からスマートフォン・シミュレータをダウンロードするか、Microsoft社の開発者サイト(http://www.microsoft.com)からデバイス・エミュレータをダウンロードします。その後、それらを構成してWebサーバーに接続する必要があります。ADFモバイル・ブラウザのシミュレータおよびエミュレータのダウンロードおよび構成の詳細は、Oracle Technology NetworkのOracle ADFモバイルでのモバイル・アプリケーション開発に関するページにある、ADFモバイルおよびJDeveloperでのモバイル・デバイス・シミュレータの実行に関するドキュメントを参照してください。このページにアクセスするには、Oracle Technology NetworkのOracle Application Development Frameworkの概要ページ(http://www.oracle.com/technetwork/developer-tools/adf/overview/index.html)で「Oracle ADF Mobile」を選択します。
アプリケーションは、デスクトップ・ブラウザでテストした後、シミュレータでテストできます。デスクトップ・ブラウザに表示されたURLを使用できますが、localhostのIPアドレス(127.0.0.1)を使用している場合は、コンピュータのネットワークIPアドレスに変更する必要があります。
|
ヒント: ネットワークIPアドレスを取得するには、Windowsシステムの場合はipconfigコマンド・インタフェースを、LinuxまたはUNIXシステムの場合はifconfigコマンドを使用します。 |
たとえば、Windows Mobile 6エミュレータを使用してアプリケーションをテストする場合は、アドレスをデスクトップのlocalhostのIPアドレス(127.0.0.1、図2-12)からコンピュータのネットワークIPアドレス(192.0.2.253、図2-13)に変更します。
また、ページ名の後に続くセッション指定を削除する必要があります。ページ名には通常、.jspxまたは.jspが追加されます。図2-12では、ページ名homeに.jspxが追加されています。
アプリケーションをデバッグするには、一般的に、コードのサイクルを繰り返した後でアプリケーションをテストします。変更されたアプリケーションをテストするには、次のいずれかまたは両方を実行する必要があります。
ページのリフレッシュ
ブラウザ・キャッシュのクリア
|
ヒント: 同じアプリケーションを開発する場合、URLは変化しないため、再入力する必要はありません。 |
ADFモバイル・ブラウザ・アプリケーションを適切に表示するには、Windows MobileおよびBlackBerryのブラウザ用にブラウザの設定を調整する必要があります。
Microsoft Windows Mobile 5および6、Microsoft Pocket Internet Explorer
表示を最適化するには、「Fit to Screen」表示を選択します(「Menu」、「View」、「Fit to Screen」の順に選択するとアクセスできます)。
|
注意: 「1列」ビュー・オプションを選択すると、レイアウトに問題が生じます。このオプションは選択しないでください。 |
BlackBerryブラウザ4.n
ADFモバイル・ブラウザは、JavaScriptのサポートが有効になっている場合にのみ動作します。JavaScriptサポートが有効になっていることを確認するには、次の手順を実行します。
「Options」→「Browser Configuration」を選択します。
次の表が選択されていることを確認します。
Support JavaScript
Allow JavaScript Popup
Support HTML Tables
