目的	所要時間	アプリケーション
このチュートリアルでは、Oracle ADF Mobileを使用したアプリケーションの開発方法について説明します。これから作成するアプリケーションの完成版を確認するには、「Download」ボタンをクリックして最終的なアプリケーションのzipファイルをダウンロードし、JDeveloperのmyworkフォルダに解凍してください。	2.5時間

JDeveloperで作業する場合、アプリケーション内のプロジェクトとして作業を整理します。JDeveloperは、アプリケーションおよびプロジェクトを作成するために利用できる、いくつかのテンプレートを提供します。テンプレートは、さまざまな種類のアプリケーションを開発するうえで必要となる基本的なテクノロジーに基づいて事前設定されており、ニーズに適したテンプレートを選択することで作業環境を構築できます。その後で、設定を行って、使用する予定のその他のテクノロジーを追加できます。

最初に、Oracle ADF Mobileアプリケーション・テンプレートを使用して、アプリケーションを作成します。次に、構築中のアプリケーションを保持するモバイル機能を作成します。

1. JDeveloper 11.1.2.4を開きます。

2. アプリケーション・ナビゲータで「New Application」をクリックします。

   

3. New Galleryで、「General」→「Applications」→「Mobile Application (ADF)」を選択して、「OK」をクリックします。
   

   

4. Create Mobile Application (ADF)ウィザードで、アプリケーション名をEmployeesにして、Application Package Prefixにmycompと入力します。「Next」をクリックします。



5. デフォルトのプロジェクト名（ApplicationController）のままにして、「Next」をクリックします。



6. Default Package名を確認し、デフォルト値のままにして「Next」をクリックし、次に進みます。



7. 2つ目のプロジェクトのProject Nameをデフォルト値のままにして、「Next」をクリックします。



8. ウィザードの最後のステップで、Default Package名を確認し、「Finish」をクリックしてアプリケーションを作成します。



アプリケーションが作成され、アプリケーション・ナビゲータで開かれます。アプリケーション・ナビゲータは、次のように表示されます。

Oracle ADF Mobileアプリケーションをデプロイする場合、モバイル・デバイス上では単一のアプリケーションとなります。このアプリケーションは通常、複数の部分で構成されます。たとえば、検索コンポーネント、ドキュメント（ヘルプ・ページなど）、データ入力フォーム、リストがあります。これらの部品はそれぞれ、アプリケーション内の一機能として定義されます。この項では、アプリケーションの一部分としてデプロイされる機能を作成します。

1. Oracle ADF Mobileアプリケーションの機能は、adfmf-feature.xmlファイル内に定義します。このファイルをまだ開いていない場合は、ダブルクリックして、エディタで開きます。



2. adfmf-features.xmlで、Features表の緑のプラス記号「」をクリックして、新しい機能を作成します。



3. 新しい機能名をEmployeesにして、「OK」をクリックします。



4. Features表の緑のプラス記号「」をクリックして、新しい機能をもう1つ作成します。Feature NameにHelpと入力して、「OK」をクリックします。



5. Features表で、「Help」機能を選択します。Features表の下の「Content」タブをクリックします。Typeで「Local HTML」を選択します。



6. URLプロパティの隣にある「」Create（緑のプラス記号）アイコンをクリックして、ローカルHTMLファイルを作成します。



7. File Nameにhelp.htmlと入力して、「OK」をクリックします。



8. ファイルが作成され、エディタで開かれます。help.htmlファイルに"This document will be the Help System"と入力します。



9. adfmf-feature.xmlに戻り、Features表で「Employees」を選択して、Contentタブで、TypeがADF Mobile AMXに設定されていることを確認します。



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

この項では、Employees機能によって使用されるADFタスク・フローを作成します。ADFタスク・フローには、相互作用する複数のページが含まれます。タスク・フローは、この相互作用の構造を定義するものです。

1. まだ開いていない場合は、アプリケーション・ナビゲータで「adfmf-feature.xml」をダブルクリックして、エディタで開きます。すでに開いている場合は、adfmf-feature.xmlタブをクリックできます。



2. エディタで「Employees」機能を選択して、「Content」タブをクリックします。



3. Content表のFileフィールドの隣にある「」Add（緑のプラス記号）アイコンをクリックして、「Task Flow」を選択します。この操作によりタスク・フローが作成され、このタスク・フローがEmployees機能に関連付けられます。



4. Createダイアログ・ボックスで、File NameプロパティにEmpsTaskFlow.xmlと入力し、「OK」をクリックします。



タスク・フローが作成され、エディタで開かれます。



これで、タスク・フローにコンテンツを追加できるようになりました。このコンテンツは、ビュー・アクティビティ（ページへのポインタ）とコントロール・フロー・ケース（ナビゲーション・コントロール）で構成されます。

5. JDeveloperの右上隅にはコンポーネント・パレットがあります。このパレットからタスク・フローにビュー・アクティビティをドラッグします。



6. ビュー・アクティビティの名前がタスク・フロー・ダイアグラム上でハイライトされます。このビュー・アクティビティ名をempListに変更します。



7. 2つ目のビュー・アクティビティをタスク・フローにドラッグして、graphという名前にします。



これで、タスク・フローに2つのビュー・アクティビティが作成されました。次の手順では、これらのビュー・アクティビティ間にナビゲーション・ルール（コントロール・フロー・ケース）を作成します。

8. コンポーネント・パレットで「Control Flow Case」をクリックします。



9. コントロール・フロー・ケースを選択した後、「empList」ビュー・アクティビティをクリックし、次に「graph」ビュー・アクティビティをクリックします。



10. このコントロール・フロー・ケースの名前としてshowGraphと入力します。



11. 「showGraph」コントロール・フロー・ケースを選択して、プロパティ・インスペクタのBehaviorで、Transitionプロパティとして「flipRight」を選択します。



EmpsTaskFlowは、次のように表示されます。



作成したビュー・アクティビティは、ページへのポインタに過ぎません。このチュートリアルの後半で、その基になるページを作成します。

Oracle ADFには、データを管理するアプリケーション・レイヤーがあります。そのため、UIでデータの保管先や保管方法を気にすることなくデータを使用できます。このレイヤーのことをデータ・コントロール・レイヤーと言います。

このチュートリアルでは、アプリケーションのデータソースとしてPOJO（Plain Old Java Object）を使用します。この項では、Javaクラスを作成し、それらのクラスを基とするデータ・コントロールを生成する方法について説明します。アプリケーションのユーザー・インタフェース部分では、このデータ・コントロールを使用して、ユーザーにデータを表示します。

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



2. New Galleryで「Java Class」を選択して、「OK」をクリックします。



3. クラス名をEmpとし、その他はデフォルト値のままにして、「OK」をクリックします。



4. 次のprivate変数を追加します。Date hiredateを追加すると、インポート文を追加するように求められます。このインポート文として「java.util.Date」を選択します。

   private String name;
   private String email;
   private int salary;
   private Date hireDate;



5. 次のように2つのコンストラクタを追加します。

   public Emp(String name, String email) {
        super();
        this.name = name;
        this.email = email;
   }
   
   public Emp(String name, String email, int salary, Date hireDate) {
       super();
       this.name = name;
       this.email = email;
       this.salary = salary;
       this.hireDate = hireDate;
   }

コードは次のようになります。



6. コード・エディタ内を右クリックして「Generate Accessors」を選択します。この操作により、選択した変数のGetterおよびSetterが作成されます。



7. 「Emp」を選択してその中のメソッドをすべて選択し、「Notify listeners when property changes」チェック・ボックスを選択して、「OK」をクリックします。



クラスのすべてのGetterおよびSetter（アクセッサ）が生成されます。

次の手順では、必要となる従業員データを格納するクラスを作成します。

8. 先ほどの手順と同様に、Javaクラスを作成し、Empsという名前にします（ヒント：「ViewController」を右クリックして、「New」を選択し、「Java Class」を選択します）。



クラスは、次のように表示されます。



9. 次のコードは、Empsクラス全体のコードです。エディタにこのコードをすべて置き換えます。

package mycomp.mobile;

import java.util.ArrayList;
import java.util.Calendar;
import java.util.Date;
import java.util.List;

public class Emps {
    private List s_emps = null;

    public Emps() {
      super();
    }

    public Emp[] getEmps() {
      //This Method gets a list of the employees and their emails
      Emp[] emps = null;
      s_emps = new ArrayList();
      s_emps.add(new Emp("Bill", "bill@oracle.com",4000, getADate(2011,3,24,9,0) )) ;
      s_emps.add(new Emp("Gary", "gary@oracle.com", 5000, getADate(2007,2,24,9,0) )) ;
      s_emps.add(new Emp("Jeff", "jeff@oracle.com", 5500, getADate(2003,2,19,9,0) )) ;
      s_emps.add(new Emp("Joe", "joe@oracle.com", 4000, getADate(2012,2,13,9,0) )) ;
      s_emps.add(new Emp("Shay", "shay@oracle.com",6000, getADate(2002,2,21,9,0) )) ;
      emps = (Emp[]) s_emps.toArray(new Emp[s_emps.size()]);
      return emps;
    }

    private Date getADate(int y,int m, int d,int h, int mi) {
      Calendar c1 = Calendar.getInstance();
      c1.set(y, m, d, h, mi);
      Date retDate = c1.getTime();
      return retDate;
    }

}

コードは次のようになります。



これで、データソースとなるJavaクラスを作成できました。次に、アプリケーションでデータを使用するためのADFデータ・コントロールを作成します。

10. アプリケーション・ナビゲータで「Emps.java」を選択します（ヒント：[ALT]を押しながら[Home]を押す方法もあります）。



11. ツールバーの「Save All」をクリックして、作業内容を保存します。

12. Buildメニューで「Rebuild ViewController.jpr」を選択します。この操作により、プロジェクトのすべてのクラス・ファイルが再ビルドされます。

    

13. アプリケーション・ナビゲータで「Emps.java」を右クリックし、「Create Data Control」を選択します。



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

これでデータ・コントロールを定義できましたので、アプリケーションのUI部分の作成を開始できます。

この項では、タスク・フローに対して作成したビュー・アクティビティに関連付けるページを作成します。すでにナビゲーション・ルールを作成しているため、ここではページを作成して、アプリケーション・ナビゲーション用のボタンを追加します。

1. エディタで「EmpsTaskFlow.xml」を開きます（ヒント：タブは開いたままのはずですが、開いていない場合は、アプリケーション・ナビゲータで「EmpsTaskFlow.xml」をダブルクリックします）。



2. 「empList」をダブルクリックして、すべてのページ・ファセットを選択します。「OK」をクリックして、ページを作成します。



3. ドラッグ・バーを使用して、エディタを2つのセクションに分割します。ドラッグ・バーは、エディタ下側のスクロール・バーの右にある小さな垂直バーです。



4. エディタで、右側のペインの一番下にある「Preview」タブをクリックして、UIをプレビューします。



5. コード・セクションのheaderファセット内にある「outputText」コンポーネントをクリックして、valueプロパティにEmp Listと入力します。



6. ソース・エディタで、primaryファセット内のボタンを選択し、プロパティ・インスペクタで、TextプロパティにGraphと入力します。ユーザーがこのボタンをクリックすると、アプリケーションに従業員データのグラフが表示されます。



7. ActionプロパティにshowGraph（Graphページへ移動するナビゲーション・ケースの名前）と入力します。



次の手順では、先ほど作成したデータ・コントロールから、データ・コンポーネントをページに追加します。

8. 「Data Controls」パレットを展開し、Empsデータ・コントロールを表示します。



9. Empsデータ・コントロール内からStructureウィンドウのPanel Pageノードに「emps」コレクションをドラッグし、このコレクションをADF Mobile List Viewとしてドロップします。Structureウィンドウでは、現在のページの階層ビューを簡単に確認できます。この階層ビューを使用して、コンポーネントを選択してページ上で移動する操作をより簡単に行うことができます。Structureウィンドウとエディタは、同じコードに基づいて動作するため、常に同期されています。




10. List Formatsで「Simple」を選択して、さらにVariationsでは、テキスト項目が仕切り線によってグループ化されているバリエーションを選択します。Stylesでリストの最初のスタイルが選択されていることを確認し、「OK」をクリックします。



11. Edit List Viewダイアログ・ボックスで、Divider Modeとして「First Letter」を選択し、「OK」をクリックします。



これで、最初のページが作成されました。次に、グラフを表示するページを作成します。

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

13. 先ほどと同様に、EmpsTaskFlow上で「graph」ビュー・アクティビティをダブルクリックします。



14. すべてのページ・ファセットが選択されていることを確認して、「OK」をクリックします。



15. ドラッグ・バーを使用してエディタ・ウィンドウを分割し、2つのビューを表示します。前述のとおり、ドラッグ・バーは、エディタ下側のスクロール・バーの右にある小さな垂直バーです。



16. エディタで、右側のペインの一番下にある「Preview」タブをクリックして、UIをプレビューします。



17. コード・セクションで、primaryファセットの「commandButton」を選択し、プロパティ・インスペクタで、Textにbackと入力し、Actionに__backと入力します。



18. empListページでの操作と同様に、Empsデータ・コントロール内からStructureウィンドウのPanel Pageノードに「emps」コレクションをドラッグしますが、今回はこのコレクションをADF Mobile Chartとしてドロップします。



19. Component Galleryで「Bar」とQuick Start Layoutの最初の項目を選択して、「OK」をクリックします。



20. Create Mobile Bar Chartウィザードで、「salary」をBarsフィールドにドラッグし、次に「name」をX Axisフィールドにドラッグします。「OK」をクリックします。



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

22. Application Resourcesで、「Descriptors」→「ADF META-INF」を展開し、adfmf-application.xmlへ移動します。



23. 「adfmf-application.xml」をダブルクリックして、エディタ・ビューで開きます。



24. Applicationタブでは、アプリケーション名を入力し、アプリケーション・メニューのプロパティを設定できます。「Feature References」タブをクリックし、このアプリケーションに含まれる機能を確認します。



これで、実際に動作するアプリケーションを作成できました。次の項では、アプリケーションをデプロイして、さらにテストします。

Oracle ADF Mobileアプリケーションをデプロイする際に、Releaseモードを使用することでパフォーマンスが向上します。このモードでは、最適化されたJVMおよび最小のJavaScriptライブラリとともにアプリケーションがデプロイされるため、アプリケーションのパフォーマンスが大幅に向上します。

iOSの場合は、デプロイメント・プロファイルの作成時にReleaseモードを選択します。この方法については後ほど説明します。iOS環境を使用している場合は、一部の手順をスキップして、8（デプロイメント開始の手順）に進むことができます。

Androidの場合は、Releaseモードを使用する前にローカルのキーストアを作成しておく必要があります。次の手順では、Androidデプロイメント用のキーストアを設定します。

1. コマンド・ウィンドウを開きます。JDeveloperによって使用されるJDK\binディレクトリへ移動します。このディレクトリの場所がわからない場合は、「Help」→「About」→「Properties」→「java.home」より、JDeveloperで使用中のJDKまたはJREを確認します。Windows 7の場合は、コマンド・ウィンドウを管理者として開くようにしてください。コマンド・ウィンドウを管理者として開くには、「スタート」をクリックし、スタートの検索ボックスにcmdと入力して、[CTRL]と[SHIFT]を押しながら[ENTER]を押します。

2. 次のコマンドを入力します。ただし、Keystore NameとAlias Nameについては任意の名前に置き換えてください。下のスクリーンショットでは、両方ともemployeesと入力しています。コマンドを入力した後、[Enter]を押します。注：このコマンドは、コピーと貼付けを使用せずにコマンド・ウィンドウに直接入力する必要があります。

   keytool –genkey –v –keystore <Keystore Name>.keystore –alias <Alias Name> -keyalg RSA –keysize 2048 –validity 10000

   

3. 名前、都市、州などの情報の入力が求められます。これらの変数の値を入力します。

   

4. 最後にパスワードを入力します。

   

コマンドが完了すると、キーストアを使用できるようになります。次に、このキーストアを使用するようにJDeveloperを設定します。

5. JDeveloperメニューで「Tools」→「Preferences」を選択します。

6. 「ADF Mobile」を展開して、「Platforms」を選択します。Signing Credentialsセクションで、「Release」タブをクリックします。

7. Keystore Locationプロパティに、先ほど作成したキーストアの場所を入力します。Keystore Password、Key Alias、Key Passwordの値をそれぞれ入力して、「OK」をクリックします。

   

これで、JDeveloperにキーストアに関する情報を設定しましたので、デプロイメント・プロファイルでReleaseモードを使用できるようになりました。

次の手順では、デプロイメント・プロファイルを作成します。

前述のとおり、アプリケーションをデプロイする前に、エミュレータを起動しておく必要があります。この説明については、Android環境の設定と構成のチュートリアルを参照してください。

8. Applicationメニューから「Deploy」→「New Deployment Profile」を選択します。

   

9. 「ADF Mobile for Android」または「ADF Mobile for iOS」を選択して、「OK」をクリックします。



10. 「Android Options」または「iOS options」をクリックし、Build Modeとして「Release」を選択して、「OK」をクリックします。

    

11. アプリケーションをデプロイするには、Applicationメニューから「Deploy」→「ADROID_MOBILE_NATIVE_archive1」を選択します。



12. 「Deploy application to emulator」を選択して「Next」をクリックします。



13. 「Finish」をクリックするとデプロイメントが開始します。



14. Logウィンドウで、「Deployment」タブをクリックして、デプロイメント・メッセージを確認します。



15. デプロイメントの完了後、ウィンドウをAndroidエミュレータに切り替えます。



16. エミュレータ画面の下側中央にある「Apps」アイコンをクリックします。デバイスまたはエミュレータにデプロイされているアプリケーションが表示されます。



17. Appsページで「Employees」アプリケーションをクリックして、先ほど構築しデプロイしたアプリケーションを開きます。Emp Listに、データソースのすべての従業員が表示されます。 注：エミュレータの処理は実際のデバイスよりも遅く、アプリケーションのロードに時間がかかる場合があります。



18. 「Graph」ボタンをクリックして、Graphページへ移動します。

これで、実際に動作するOracle ADF MobileアプリケーションをAndroidエミュレータにデプロイできました。次の項では、UIを変更します。

これまでに実際に動作するアプリケーションを作成しましたので、次にOracle ADF Mobileレイアウト・コンポーネントの一部を利用するようにユーザー・インタフェースを改良します。

次の手順では、従業員リストをナビゲータ・ペインに移動します。また、従業員リストには表示しなかった従業員の詳細情報を表示する読取り専用フォームを追加します。従業員リストには従業員名のみが表示されます。また、ページを従業員リストと従業員フォームに2分割します。

1. JDeveloperで「empList.amx」ページを開きます（ヒント：アプリケーション・ナビゲータでページを見つけてダブルクリックするか、EmpsTaskFlowを使用して「empList」ビュー・コンポーネントをダブルクリックします）。



2. コンポーネント・パレットのLayoutセクションからStructureウィンドウのPanel Pageに「Panel Splitter」コンポーネントをドラッグします。





3. Structureウィンドウで「Panel Splitter」を展開して、Facet - navigatorとPanel Itemコンポーネントを表示します。



4. リストを新しいPanel Splitterの一部として表示するため、Structureウィンドウ内で「List View」コンポーネントを下のFacet - navigatorにドラッグします。





5. データ・コントロール・パレットからStructureウィンドウのPanel Itemに「emps」データ・コントロールをドラッグして、ADF Read Only Formとしてドロップします。





6. フォームのラベルとコンポーネントをデフォルト値のままにして、「OK」をクリックします。



これで、ページ上に従業員リストと従業員フォームの2つのセクションが作成されました。実行時に、ユーザーが選択した従業員がフォーム上に表示されるようにします。次の手順では、その動作を追跡するためのコンポーネントを追加します。

7. Structureウィンドウで、「List View」ノードを展開して、List Itemコンポーネントを表示します。



8. コンポーネント・パレットのOperationsセクションからStructureウィンドウのList Itemコンポーネントに、「Set Property Listener」コンポーネントをドラッグします。





9. Set Property Listenerには、From、To、Typeという3つのプロパティがあります。「Set Property Listener」コンポーネントを選択し、Fromパラメータに#{row.rowKey}と入力します。Toパラメータに#{pageFlowScope.empId}と入力します。「Type」パラメータではactionを選択します。row.rowKeyという式は、現在の行のidを返します。pageFlowScopeは、値を格納できる事前定義マネージドBeanです。この場合、現在の行のIdは、empId変数として格納されます。また、Typeにactionを設定したことで、ユーザーがリストから項目を選択したときに、現在の行のIdがpageFlowScope.empIdに格納されます。



次に、Empsデータ・コントロールよりパラメータを受け取り、イテレータの現在の行として、ユーザーが選択した行を設定する操作を追加します。

10. データ・コントロール・パレットの「Emps」→「Operations」を展開し、使用できるすべての操作を表示します。



11. 「setCurrentRowWithKey」操作をStructureウィンドウのList Itemにドラッグして、ADF Mobile Buttonとしてドロップします。



12. Edit Action Bindingダイアログ・ボックスのParametersで、パラメータのValueとして、Set Property ListenerのTo値と同じ値（#{pageFlowScope.empId}）を選択します。




このボタンを追加すると、2つのことが起こります。まず、このボタンがEmp Listに追加されます。次に、ボタンがクリックされたときに現在の行のキーを設定するためのアクション・リスナーが作成されます。 実際には、リスト内にボタンを表示するという外観は望んでいるものではありません。 行が選択されるたびに現在の行のキーを取得して、保管することを望んでいます。
次の手順では、ボタンのコードをコピーしてlistItemに追加し、ボタンを削除します。

13. コード・エディタでこのボタン・コンポーネントを探します。



14. 「actionListener」コードを選択して、上にあるlistItemコンポーネントにドラッグするか、このコードをコピーしてlistItem内に貼り付けます。





15. ボタンは必要ないため、「commandButton」を削除します。





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

この後、アプリケーションをデプロイして作業内容を確認できます。

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



18. アプリケーションがデプロイされた後、先ほどと同様に実行すると、ページに従業員の詳細情報が表示され、さらにページの左側に矢印が表示されます。



19. この矢印をクリックしてスプリッタを展開し、従業員リストを表示します。



20. 他の従業員をクリックして、その従業員の詳細情報を表示します。



21. ページがめくられ、従業員の詳細情報の表示に戻ります。



22. これで、このチュートリアルのパート1が完了しました。



パート2では、従業員の給与を更新するWebサービスのコールを追加します。