| Oracle® Fusion Middleware Oracle ADFモバイル・ブラウザ・アプリケーションの開発 12c (12.1.2) E48093-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モバイル・ブラウザ・アプリケーションでは、 |
Apache MyFaces Trinidadコンポーネントで移入されたJSFページを追加します。
ADFモバイル・ブラウザ・スキニングを使用してページ・レイアウトを最適化します。
スマートフォンまたはスマートフォン・シミュレータでアプリケーションをテストします。
ADFモバイル・ブラウザ・アプリケーション開発には、モバイル向けに最適化されたビュー・コントローラ・プロジェクトが必要です。
環境を構成するには、まず、ADFモバイル・ブラウザ・テクノロジを備えたプロジェクトを含むADFモバイル・ブラウザ・アプリケーションを作成します。
作業を始める前に、次のようにします。
必要に応じて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モバイル・ブラウザ・プロジェクトの短縮名(小文字)と、その |
「ADFモバイル・ブラウザ」を「選択可能」リストから「選択済」リストに移動することによって、プロジェクト用にADFモバイル・ブラウザ機能を選択します。
図2-4は、「選択可能」ウィンドウ内の「ADFモバイル・ブラウザ」機能を示しています。「ADFモバイル・ブラウザ」機能を「選択済」ウィンドウに移動すると、Java、JSF (JavaServer Faces)、JSPおよびサーブレット・テクノロジがプロジェクトで使用可能になり、図2-5に示すようにこれらも「選択済」ウィンドウに表示されます。
アプリケーションでADFタスク・フローを使用する場合は、「ADFページ・フロー」機能を「選択済」ウィンドウに追加します。図2-6に示すように、「ADFページ・フロー」機能により、ADF Faces、ADFページ・フロー、TrinidadおよびXMLテクノロジが追加されます。
「次へ」をクリックして「Java設定の構成」ページをナビゲートし、「終了」をクリックします。
図2-7に示すように、「アプリケーション」ウィンドウのFusion Webアプリケーション(adfm)内に、モバイル・ビュー・コントローラ・プロジェクト(mvc)が表示されます。
ビュー・コントローラ・プロジェクトを作成することで、モバイル・アプリケーションのページ・フロー定義ファイルfaces-config.xmlも作成されます。ページ・フローの作成については、『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-8に示すように、「JSFページの作成」ダイアログで、JSFページの名前を入力します。必要に応じて、ページのディレクトリの場所を入力します。FaceletsまたはJSP XMLを選択できます。
図2-9は、page1.jsfというモバイルJSFページのデザイナを示しています。
「コンポーネント」ウィンドウで、図2-9のように「Trinidad」を選択してから、Apache MyFaces Trinidadコンポーネントを使用してページを作成します。これらのコンポーネントの表示を最適化するには、第4章「ADFモバイル・ブラウザ・アプリケーションのスキニング」で説明されているスタイルおよびパターンを参照してください。図2-9は、af_m_toolbarスタイル・クラスをtr:panelHeaderコンポーネントに適用する様子を示しています。これにより、スマートフォン上でページ・ヘッダーがツールバーのような要素としてレンダリングされるようになります。
スマートフォン、スマートフォン・シミュレータまたはデスクトップ・ブラウザ上で、ADFモバイル・ブラウザ・アプリケーションをテストできます。実際のスマートフォンまたはスマートフォン・シミュレータでテストすると、デスクトップ・ブラウザ上でテストした場合よりも正確な結果が得られます。
デスクトップ・ブラウザを使用したADFモバイル・ブラウザ・アプリケーションのテストでは、テスト環境がかなり画一的になるため、おおよその結果しか得られません。デスクトップ・ブラウザではWebページの外観および動作が似ており、ビジネス・ロジックがまったく同じように実行されるためです。一方で、実際のスマートフォンを使用したアプリケーションのテストでは、モバイル・ブラウザの機能によってデスクトップ・ブラウザの場合とは異なる方法で動作が制御されるため、より正確な結果が得られます。Webサーバーがモバイル・ブラウザに固有のページを生成してページのルック・アンド・フィールを最適化するため、デスクトップ・ブラウザよりも通常は小さいモバイル・ブラウザでは、デスクトップ・ブラウザとは異なる方法でページがレンダリングされます。
また、ADFモバイル・ブラウザ・アプリケーションをスマートフォン上で直接テストする場合には、テストが必要なすべてのデバイスにはアクセスできない可能性があります。さらに、多くのモバイル・デバイスは、インターネットのみにアクセスでき、ファイアウォールの後ろにある開発環境にはアクセスできないため、ファイアウォールによってテストが複雑になることがあります。そのような場合は、かわりのテスト方法としてスマートフォン・シミュレータを使用できます。たとえば、BlackBerryスマートフォン・シミュレータ(図2-10)またはWindows Mobileデバイス・エミュレータ(図2-12)でアプリケーションをテストするには、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システムの場合は |
たとえば、Windows Mobile 6エミュレータを使用してアプリケーションをテストする場合は、アドレスをデスクトップのlocalhostのIPアドレス(127.0.0.1、図2-11)からコンピュータのネットワークIPアドレス(192.0.2.253、図2-12)に変更します。
また、ページ名の後に続くセッション指定を削除する必要があります。ページ名には通常、.jspxまたは.jspが追加されます。図2-11では、ページ名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
