Oracle ADF Mobileを使用したモバイル・アプリケーションの構築

パート2： Oracle ADF MobileアプリケーションでのWebサービスの使用
この項では、先ほど完成したアプリケーションを利用し、コンポーネントを追加して拡張します。 アプリケーションにいくつかのビュー・コンポーネントを追加します。 次に、Webサービスに基づいたADFデータ・コントロールを定義します。 最後の項では、Webサービスを使用して従業員の給与情報を更新するページを作成します。
準備 アプリケーション

この項では、Webサービスを使用するデータ・コントロールを作成します。 Webサービスは、マシン上でローカルで実行されます。 現在、Webサービスを含むOracle JDeveloperワークスペースをダウンロードできます。 このチュートリアルの後半で、Webサービスの実行方法について学習します。

右のDownloadボタンを使用して圧縮ファイルをダウンロードし、そのファイルをmyWorkディレクトリに解凍します。

SampleWS.zipのダウンロード
ステップ1： アプリケーションへのビュー・コンポーネントの追加

    このパートでは、既存のアプリケーションにビュー・コンポーネントとナビゲーション・ルールを追加します。 これらのコンポーネントのためのページは、次の項で作成します。

  1. エディタで「EmpsTaskFlow.xml」を開きます。

    alt text

  2. コンポーネント・パレットからタスク・フローにビュー・アクティビティを追加し、それにSalaryUpgradeという名前を付けます。

    alt text

  3. タスク・フローに別のビュー・アクティビティをドラッグし、それにTakePictureという名前を付けます。

    alt text

  4. empListとTakePictureの間にコントロール・フロー・ケースを描画します。 このフローにtakePictureという名前を付けます。

    alt text

  5. EmpListとSalaryUpgradeの間にコントロール・フロー・ケースを描画します。 このフローにgoWSという名前を付けます。

    alt text

    6. これで、アプリケーションの残りの部分の基礎となるコンポーネントが作成されました。

ステップ2： Webサービス・データ・コントロールの定義

この項では、アプリケーションで使用するWebサービスを開いて実行します。 次に、Webサービスに基づいたデータ・コントロールを作成し、そのデータ・コントロールをアプリケーションから使用します。

  1. このチュートリアルの「準備」の手順では、SampleWS.zipをダウンロードし、それを任意のmyWorkディレクトリに解凍しました。 まだしていない場合は、このチュートリアルの先頭に移動し、ファイルを今すぐダウンロードおよび解凍してください。

  2. JDeveloperで、「File」→「Open」をクリックして、SampleWS.jwsを解凍するときに使用したディレクトリに移動します。 「SampleWS.jws」を選択し、「Open」をクリックします。

    alt text

  3. アプリケーション・ナビゲータで、「Project 1」→「Application Sources」→「a」を展開してService.javaを表示します。 「Service.java」を右クリックして、「Run」を選択します。

    alt text

  4. Oracle WebLogic Server（Oracle WLS）を初めて起動した場合は、パスワードを入力するよう求められます。 パスワードを入力し、そのパスワードを確認して、「OK」をクリックします。 Oracle WLSを初めて実行している場合は、デフォルト・ドメインが構築されるため、始まるまでに数分かかることがあります。

    alt text

  5. Webサービスがデプロイされ、実行中になると、Runningメッセージ・タブに完了メッセージが表示されます。 Webサービスがデプロイされ、実行中のペイン 重要な注意点： Webサービスが何らかの理由で停止した場合は、Webサービスを再起動する必要があります。そうしないと、デプロイされたモバイル・アプリケーションが正しく機能しません。 特に、従業員の給与を更新しようとすると、エラーが表示されます。

    alt text

  6. Target URLのリンクをクリックして、HTTP Analyzerを開きます。 このHTTP Analyzerを使用して、Webサービスをテストできます。 各パラメータに値を入力したら、「Send Request」をクリックします。 Webサービスがリクエストを処理し、すべてHTTP Analyzer内から結果を返します。

    alt text

  7. HTTP Analyzerペインの上部にある「WSDL URL」を右クリックして、「Copy」を選択します。 このWSDLアドレスは、データ・コントロールを作成するときに使用します。

    alt text

    8. これでWebサービスが実行中になったので、Employeesワークスペースに戻ってWebサービスを使用します。

  8. アプリケーション・ナビゲータのドロップダウン・リストを使用して、Employeesワークスペースに戻ります。

    alt text

  9. 「ViewController」プロジェクトを右クリックして、「New」を選択します。

    alt text

  10. New Galleryで、「Business Tier」→「Data Controls」→「Web Service Data Control」を選択し、「OK」をクリックします。

    alt text

  11. デバイスまたはエミュレータにデプロイしている場合は、Webサービスが実行されているマシンのIPアドレスを指定する必要があります。

    1. WindowsマシンでIPアドレスを見つけるには、コマンド・ウィンドウを起動します（「スタート」→「ファイル名を指定して実行」を選択し、CMDと入力して「OK」をクリックします）。

      alt text

    2. コマンド・ウィンドウで、ipconfigと入力し、[Enter]キーを押します。

      alt text

    3. マシンのIPアドレスをコピーします。 このIPアドレスをWebサービス・データ・コントロールのURLに使用します。 下の図では、セキュリティのためにIPアドレスが黒く塗りつぶされています。

      alt text

  12. Create Web Service Data Controlウィザードで、Webサービス・データ・コントロールにSalaryServiceという名前を付け、WSDLのURLをURLフィールドに貼り付けます。 「Next」をクリックします。

    ここでも、セキュリティのために、下の図のIPアドレスは見えなくなっています。

    alt text

  13. 「SalaryUpgrade」メソッドを選択し、それをSelectedリストに移動して、「Finish」をクリックします。

    alt text

  14. 作業内容を保存します。

  15. 「Data Controls」パレットを開き、「Refresh」をクリックして、新しいWebサービス・データ・コントロールであるSalaryServiceを表示します。

    alt text

    16. これで、SalaryService Webサービスに基づいたデータ・コントロールが作成されました。 次の手順では、前に追加したビュー・アクティビティのためのSalaryUpgradeページを作成します。 また、EmpsListページへのナビゲーションも追加します。

ステップ3： Webサービス・データ・コントロールの使用

Oracle ADFでは、すべてのデータ・コントロールを使用する手順は同じです。 データ・コントロールがJavaクラス、ADF Business Component、Webサービスのいずれに基づいていても、問題ありません。 この項では、Salary Serviceデータ・コントロールを使用するアプリケーションに要素を追加します。

  1. エディタで「EmpsList.amx」を開きます。

    alt text

  2. 前に行ったのと同様に、エディタのスプリッタを使用して、コードとページのプレビューの両方を表示します。

    alt text

  3. ページで作業中に、より詳細な情報を画面に表示できるように、デバイス・タイプとして「iPad」を選択します。

    alt text

  4. ソース・コード・エディタで、Id cb2を含むボタン（ページの右端のボタン）を選択します。 プロパティ・インスペクタで、TextをUpdateに、ActionをgoWSに設定します。

    alt text

  5. 作業内容を保存します。

    6. 次に、Webサービスを利用するために使用する2ページ目のSalaryUpgradeを設計します。

  6. エディタで「EmpsTaskFlow.xml」を開きます。

    alt text

  7. 「SalaryUpgrade」をダブルクリックして、ページを作成します。 「OK」をクリックして、新しいページをデフォルト値のままにします。

    alt text

    8. このページには2つの部分があります。 最初の部分は、現在選択されている行の従業員データを表示します。 2番目の部分は、Webサービスを起動するために使用されます。

  8. 従業員データを表示するには、「emps」コレクションをPanel Pageにドラッグし、ADF Mobile Formとしてドロップします。

    alt text

  9. NameとSalaryを除くすべての属性を削除し、「OK」をクリックして、フォームをページに追加します。

    alt text

  10. エディタの一番下にある「Bindings」タブをクリックして、NameとSalaryのバインディングがページに追加されていることを確認します。

    alt text

    11. このデータ・コントロールおよびバインディングには従業員データが表示されますが、ページに、現在選択されている行のデータが表示されることを確認する必要があります。 現在の行を選択するには、その行を設定するメソッドのコールを追加します。

  11. 必要な行が表示されるようにするには、このメソッドをコールするアクション・バインディングを追加します。 Bindingsパネルにある「Add」アイコン（緑のプラス記号）をクリックします。

    alt text

  12. バインディング・タイプとして「action」を選択し、「OK」をクリックします。

    alt text

  13. Create Action Bindingエディタで、「empsIterator」を選択し、OperationをsetCurrentRowWithKeyValueに設定します。

    alt text

  14. rowKeyパラメータのValueプロパティを#{pageFlowScope.empId}に設定します。 この変数は、前のempList.amxページから現在のrowKeyを保存するために作成したことを覚えておいてください。

    alt text

    15. これでアクション・バインディングが作成されたので、これを実行可能ファイルのリストに追加する必要があります。

  15. Executablesパネルにある「」Addアイコン（緑のプラス記号）をクリックします。

    alt text

  16. タイプとして「invokeAction」を選択し、「OK」をクリックします。

    alt text

  17. idをsetEmpIdに、BindsをsetCurrentRowWithKeyValueに設定します。 「OK」をクリックします。

    alt text

  18. invokeActionがリスト内の最後の実行可能ファイルであることに注意してください。 このアクションはイテレータ内の現在の行を設定するため、実行される最初のアクションであるべきです。

    alt text

  19. 「setEmpId」を実行可能ファイル・リストの一番上にドラッグします。

    alt text

    20. 次の手順では、Webサービスをコールするコンポーネントを追加します。

  20. 作業内容を保存します。

  21. SalaryUpgrade.amxページの「Source」タブをクリックします。

  22. SalaryServiceデータ・コントロールから、「SalaryUpgrade」メソッドをPanel Pageにドラッグし、ADF Mobile Buttonとしてドロップします。

    alt text

    23. Salary Upgrade Webサービスは、Name、Date、Salary、Commissionの各パラメータを受け入れます。 NameとSalaryは、今追加したフォーム上のフィールドです。 そのため、このWebサービスをコールする場合は、そのフォーム上のフィールドからNameとSalaryを渡します。

  23. nameパラメータのValueプロパティの隣にある下矢印をクリックし、「Show El Expression Builder」をクリックします。

    alt text

  24. Expression Builderを使用して「bindings.name.inputValue」を選択し、「OK」をクリックします。 （この式は、フォーム上のnameフィールドの現在の値を取得します。）

    alt text

  25. 同じ手順をsalフィールドに対して繰り返します。 （ヒント：Expression Builderで、「bindings.salary.inputValue」を選択し、「OK」をクリックします。）

    alt text

    26. 次の2つのパラメータの場合は、各値に、後でデータを移入するviewScope変数を入力します。

  26. 前と同じプロセスを使用して、「date」パラメータを選択し、Valueに#{viewScope.start}と入力します。ます。

    alt text

  27. 前と同じプロセスを使用して、「comm」パラメータを選択し、Valueに#{viewScope.commission}と入力します。

    alt text

  28. 「OK」をクリックして、ボタンを作成します。

    alt text

  29. 作業内容を保存します。

  30. 「Bindings」タブをクリックして、今追加したバインディングを調べます。

    alt text

  31. Structureペインの「SalaryUpgrade」を展開して、パラメータを表示します。

    alt text

  32. 各パラメータをクリックし、プロパティ・インスペクタに各パラメータのND値が表示されることを確認します。

    alt text

    alt text

    33. これまで見てきたように、SalaryUpgrade Webサービスは4つのパラメータを受け入れます。 最初の2つの値は、empsデータ・コントロールからすでに作成したフォームから取得されます。 そのため、残りの2つの値をどこからか取得する必要があります。 2つのフォーム・フィールドを使用するためのSalaryUpgradeメソッド・コールに対するバインディングは、すでに設定されています。 ここで、2つの追加のパラメータ値（dateおよびcommission）を受け入れるためのフィールドを作成し、それらの値を作成済みのviewScopeパラメータに保存する必要があります。

  33. SalaryUpgradeページの「Source」タブをクリックし、コンポーネント・パレットから「Switch (Boolean)」コンポーネントをStructureウィンドウ内のPanel Form Layoutコンポーネントにドラッグします。（ヒント：Switchコンポーネントは、コンポーネント・パレット内のText and Selectionの下にあります。）

    alt text

    alt text

  34. プロパティ・インスペクタで、labelをCommissioned?に、Valueを#{viewScope.commission}に設定します。

    alt text

  35. 「Input Date」コンポーネントをPanel Form Layoutにドラッグします。

    alt text

    alt text

  36. プロパティ・インスペクタで、labelをStartingに、Valueを#{viewScope.start}に設定します。

    37. これにより、Webサービスに渡されるパラメータ値が作成されましたが、Webサービスからの結果も表示させるようにします。

  37. 「SalaryService」データ・コントロールを展開して、Webサービスからの結果を表すStringを表示します。

    alt text

  38. 「String」をPanel Pageにドラッグし、ADF Mobile Output Textとしてドロップします。

    alt text

    39. この時点で、ページは完成し、動作可能になります。 ただし、出力フィールドはWebサービスのコールに基づいているため、ページがWebサービスをコールした後で、ユーザーは開始日や歩合値を入力できるようになります。 次の手順では、SalaryUpgradeボタンがクリックされた後にのみWebサービスをコールするようにページを設定します。

  39. 最初に、Webサービスからの結果を保持するOutput Textフィールドのレンダリングを制御します。 それには、Renderedプロパティに条件を追加します。 Expression Builderを使用して、Renderedプロパティを設定し、新しい変数#{viewScope.displayResults == 'Y'}を評価します。 「OK」をクリックします。

    alt text

  40. 次に、viewScope.displayResults変数の値をYに設定するsetPropertyListenerコンポーネントを追加します。 これを行うには、「Set Property Listener」コンポーネントをSalaryUpgradeボタンにドラッグし、次のプロパティを設定します。
        From：#{'Y'}
        To：#{viewScope.displayResults}
        Type：action

    alt text

    alt text

    alt text

  41. 最後に、コール元のページに戻るための方法を提供する必要があります。 最初のボタン（cb1）を選択し、プロパティ・インスペクタで、TextをBackに、Actionを__backに設定します。

    alt text

    alt text

  42. 作業内容を保存します。

    43. 前のいくつかの手順の結果として、ユーザーがcommissionおよびdateフィールドに値を入力し、SalaryUpgradeボタンをクリックすると、ページはWebサービスをコールして結果を表示します。

    最終的なアプリケーションの準備として、EmpsTaskFlow上にTakePictureという名前のビュー・アクティビティを作成しました。 このチュートリアルのパート3では、デバイス・サービスを使用するためにそのビュー・アクティビティを使用します。 ただし、このパートでアプリケーションをデプロイする前に、そのビュー・アクティビティのプレースホルダとしてのページを作成する必要があります。

  43. デフォルト値を使用して、TakePictureビュー・アクティビティのためのデフォルトの空のページを作成します。 （ヒント：「EmpsTaskFlow」を開き、「TakePicture」をダブルクリックし、「OK」をクリックして、ページをデフォルト値のままにします。）

    alt text

  44. 作業内容を保存します。

    45. 次に、アプリケーションをデプロイおよびテストします。

  45. JDeveloperのApplicationメニューから「Deploy Android2 to Android emulator」を選択します。

    alt text

  46. LogウィンドウのDeploymentタブで、デプロイメントが完了していることを確認します。

    alt text

  47. アプリケーションが動作するには、SalaryUpgrade Webサービスが実行されている必要があることを覚えておいてください。 Webサービスを実行するための手順は、このチュートリアルのステップ2にあります。

  48. エミュレータまたはデバイスで、Applicationsページに移動し、「Emps」アプリケーションを開きます。

    alt text

    49. エミュレータに、アプリケーションのエントリ・ページであるEmp Listページが表示されます。

    alt text

  49. ページの左側にある右矢印をクリックして、従業員のリストを表示します。

    alt text

  50. 「Shay」（またはリスト内の任意の従業員）をクリックして、従業員を選択します。

    alt text

  51. 「Update」ボタンをクリックします。 アプリケーションに、SalaryUpgradeページが表示されます。

    alt text

  52. Android Emulator UIを使用して、salaryを5555に変更し、CommissionをOnに設定して、Start Dateを今日から数日後に変更します。

    alt text

  53. 「SalaryUpgrade」をクリックします。 SalaryUpgradeボタンの下に表示されるメッセージに注意してください。 このメッセージは、SalaryUpgrade Webサービスから返されたものです。 アプリケーションは正常にWebサービスをコールし、返された値を表示しました。

    alt text

これで、Webサービスを使用するアプリケーションにADFコントロールが正常に追加されました。 このチュートリアルの次の項では、いくつかのネイティブなデバイス機能をアプリケーションに統合します。

前へ 1 2 3 次へ
ブックマーク 印刷 すべて表示 | すべて非表示
トップへ戻る
Copyright © 2013, Oracle and/or its affiliates. All rights reserved.