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

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

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

1. JDeveloper 12.1.3を開きます。

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

   

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

   

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



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



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



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



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



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

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

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



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



3. 新しい機能名をEmployeesにして、「OK」をクリックします。「Add a corresponding feature reference to maf-application.xml」のチェックボックスが選択されていることを確認してください。



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. maf-feature.xmlに戻り、Features表で「Employees」を選択して、Contentタブで、TypeがMAF AMXに設定されていることを確認します。



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

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

1. まだ開いていない場合は、アプリケーション・ナビゲータで「maf-feature.xml」をダブルクリックして、エディタで開きます。すでに開いている場合は、maf-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は、次のように表示されます。



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

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

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

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



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クラスを作成できました。次に、アプリケーションでデータを使用するためのMAFデータ・コントロールを作成します。

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



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

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

    

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



14. ウィザードで、名前とクラス名プロパティの値をそのままで「Next」をクリックします。



15. ステップ2で、デフォルト値のまま「Finish」をクリックします。



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

これでデータ・コントロールを定義できましたので、アプリケーションの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」コレクションをドラッグし、このコレクションをMAF List Viewとしてドロップします。Structureウィンドウでは、現在のページの階層ビューを簡単に確認できます。この階層ビューを使用して、コンポーネントを選択してページ上で移動する操作をより簡単に行うことができます。Structureウィンドウとエディタは、同じコードに基づいて動作するため、常に同期されています。
   
   作成したデータ・コントロールはコレクションとアトリビュートを含みます。empsコレクションは赤のテーブル・アイコンの一つです。AMXページで選択されていることを確認します。そうでないと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」コレクションをドラッグしますが、今回はこのコレクションをMAF Chartとしてドロップします。
    
    AMXページが選択されていることを確認します。そうでないとStructureウィンドウには何も表示されません。




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」を展開し、maf-application.xmlへ移動します。



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



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



25. Device Accessタブをクリックし、Network and Filesのチェックボックスを選択します。これにより、アプリケーションは、デプロイ先デバイス上のネットワークやファイルにアクセスできるようになります。



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

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

iOSの場合は、デプロイメント・プロファイルの作成時にReleaseモードを選択します。この方法については後ほど説明します。iOS環境を使用している場合は、最初の7つの手順をスキップして、8 (Applicationメニューから、Deploy > New Deployment Profileを選択します。)の手順を進めます。

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. 「Mobile Application Framework」を展開して、「Android Platforms」を選択します。Signing Credentialsセクションで、「Release」タブをクリックします。

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

   

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

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

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

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

   

9. デプロイメント・ターゲットに応じて、「MAF for Android」または「MAF for iOS」を選択して、「OK」をクリックします。






10. Androidにデプロイする場合、「Android Options」をクリックし、Build Modeとして「Release」を選択して、「OK」をクリックします。

    

    iOSにデプロイする場合は「OK」をクリックします。

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

    

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



iOSでは、 Deploy application to simulatorを選択し、「Next」をクリックします。




13. 「Finish」をクリックするとデプロイメントが開始します。AndroidエミュレータあるいはiOSシミュレータが起動し、実行していることを確認してください。



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



15. デプロイメントの完了後、ウィンドウをAndroidエミュレータに切り替えます。ホーム・アイコンを選択し、Employeesアイコンを見つけてください。



あるいはiOSで、ホーム・スクリーンのページ2へスクロールしてください。





16. Emp Listに、データソースのすべての従業員が表示されます。 注：エミュレータの処理は実際のデバイスよりも遅く、アプリケーションのロードに時間がかかる場合があります。



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

これで、実際に動作するMAFアプリケーションを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」データ・コントロールをドラッグして、MAF Read Only Formとしてドロップします。





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



これで、ページ上に従業員リストとそれぞれの従業員表示の2つのセクションが作成されました。

7. アプリケーションを再デプロイします。
   JDeveloperでApplicationメニューから、Androidエミュレータのために「Application」→「Deploy」→「Android2」を選択します。



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



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



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



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



12. 従業員リストを非表示するために矢印をクリックし、従業員詳細だけを表示します。



このチュートリアルの最初のパートは完了です。次のパートでは、従業員の給与を更新するWebサービスのコールを追加します。