OEPEチュートリアル - OEPEによるMAFアプリケーションの構築

OEPEによるMAFアプリケーションの構築

パート2：デバイス機能との統合

Oracle Mobile Application Framework（MAF）では、すでにご存じの機能に加えて、デバイスに組み込まれている機能を統合できます。たとえば、デバイスのカメラ、連絡先、電子メール、SMS、GPSなどとの統合が可能です。チュートリアルのこの項では、カメラや電子メール・クライアントとやり取りする方法について説明します。

準備	アプリケーション
このチュートリアルは順番に完了できるように作られています。このパートはチュートリアルの2番目のステップですが、パート1で作成するアプリケーションの完成版をダウンロードすることもできます。アプリケーションの完成版から開始する場合は、右側のDownloadボタンを使用して圧縮ファイルをダウンロードし、作業領域にインポートしてください。

準備

アプリケーション

このチュートリアルは順番に完了できるように作られています。このパートはチュートリアルの2番目のステップですが、パート1で作成するアプリケーションの完成版をダウンロードすることもできます。アプリケーションの完成版から開始する場合は、右側のDownloadボタンを使用して圧縮ファイルをダウンロードし、作業領域にインポートしてください。

ステップ1：カメラとのやり取りの追加

この項では、デバイスのカメラと統合したり、TakePictureページに移動したりするためのボタンをEmployeeListページに追加します。TakePictureページでは、新たに写真を撮るためのボタンと、EmployeeListページに戻るためのボタンを追加します。また、撮ったばかりの写真を表示するイメージも追加します。エミュレータを使用する場合は、エミュレータから写真が提供されます。

OEPEで、emp-task-flow-definition.xml以外の開いているエディタのタブをすべて閉じます。
タスク・フロー・ダイアグラムにViewアクティビティをドラッグし、それにPictureという名前を付けます。
employeeListからpictureにControl Flow Caseを追加し、それにtakePictureという名前を付けます。
作業内容を保存します（ヒント：開いているすべてのファイルをSave Allボタンで保存します）。
「employeeList」ビュー・アクティビティをダブルクリックし、ベースになっているページをエディタで開きます。
secondaryファセットの「amx:commandButton」を選択します。
Propertiesタブで、TextをTake Pictureに、Button ActionをtakePictureに設定します。
作業内容を保存します。

これで、employeesList.amxページでの作業は完了です。次は、pictureビュー・アクティビティをサポートするページを作成します。

emps-task-flow-definition.xmlで「picture」ビュー・アクティビティをダブルクリックし、サポートするページを作成します。デフォルト名のまま「Finish」をクリックしてページを作成します。
作業内容を保存します。
headerファセットの下にあるoutputTextコンポーネントを探し、その値をTake Pictureに設定します。
作業内容を保存します。
デバイス機能のサポートはデータ・コントロールとして公開されます。
Data Control Paletteで「Data」タブを開き、「Device Features」ノードを展開してデバイス機能を表示します。MAFでサポートされているすべてのデバイス機能が、これらのデータ・コントロールによって抽象化されます。
「getPicture(int,int,int,boolean,int,int,int)」を展開します。
getPictureメソッドに必要なパラメータに注意してください。getPictureメソッドでは、コール元は、デバイスのさまざまな側面を制御するメソッドのパラメータを設定できます。たとえば、メソッド・コールでは、結果の品質、高さ、および幅を設定できます。
「getPicture(int,int,int,boolean,int,int,int)」をPicture.amxページにドラッグし、</amx:facet>終了タグの後ろにドロップします。コンテキスト・メニューから「Method」→「Button」を選択します。

Edit Action Bindingダイアログ・ボックスで、パラメータに次の値を入力し、「Finish」をクリックしてボタンを作成します。

名前	値
quality	50
destinationType	1
sourceType	1
allowEdit	true
encodingType	1
targetWidth	200
targetHeight	200

これで、getPictureメソッドをコールするボタンがページに追加されました。

デバイスにアクセスする必要があるメソッドを追加したため、ここでApplication Editorを開いてアクセス権を付与するオプションが表示されます。ここでは「Close」をクリックしてこのオプションを無視します。詳しい手順については後ほど説明します。
作業内容を保存します。

次の手順では、getPictureメソッドの戻り値にバインドするコンポーネントを追加します。表示されているとおり、このメソッドの戻り値はStringです。確かに、カメラからの戻り値はテキストではなく写真ですが、テキスト・コンポーネントをページに追加する場合は、イメージとして追加するオプションがあります。このオプションを選択したコンポーネントでは、戻り値の内容がイメージとして解析されます。

Data Controlsパレットで、getPictureメソッドから戻されるStringを、先ほど追加したコマンド・ボタンの直後にドラッグし、「Text」→「Image」コンポーネントとしてドロップします。
もう一度「Close」をクリックし、Application Editorのプロンプトを閉じます。
作業内容を保存します。

次は、Pictureページからメイン・ページに戻るナビゲーションを定義します。
エディタで、primaryファセットの「amx:commandButton」を選択し、プロパティ・インスペクタを使用してTextプロパティにBackと入力し、Actionに__backと入力します（ヒント：Actionの値は、プロパティ・ドロップダウン・リストを使用して暗黙的な「__back」を選択します)。
作業内容を保存します。

これで、デバイス・レベルの機能をアプリケーションに追加する作業は終了したので、このデバイス機能へのアクセス権限を要求する必要があります。要求はmaf-feature. xmlで行います。
MAF Feature Editorを開き、「Employees」→「Device Access」の順に選択して展開します（ヒント：Project Explorerで「MAF」→「MAF Feature Editor」をダブルクリックします）。
Device Accessリストで「Camera Access」を選択します。この機能を選択することで、アプリケーションからこの機能を使用するための権限を実質的に求めることになります。ツールチップを見ると、この機能を使用する権限がまだアプリケーションに付与されていないことがわかります。アプリケーションからのアクセス権限は次のパートで付与します。
作業内容を保存します。
Device Accessで「application editor」リンクをクリックしてMAF Application Editorにナビゲートします。
Mobile Application Editorを見ると、Camera accessチェック・ボックスの横に警告アイコンがあることがわかります。ツールチップには、Employeesアプリケーションの機能がCamera Accessを要求していることが示されています。
「Camera access」を選択し、デバイスのカメラ機能へのアクセス権限をEmployeesアプリケーションに付与します。
作業内容を保存します。

これで、デプロイできる状態になりました。
前に行ったのと同様に、ツールバーの「Debug」ドロップダウン・リストをクリックし、「Debug Configurations」を選択します。
エミュレータとDebug Bridgeが稼働している場合は、Debugボタンが有効になります。ボタンが有効になったら「Debug」をクリックします。Debugボタンが有効にならない場合は、エミュレータまたはDebug Bridgeが稼働していません。エミュレータの起動方法がわからない場合は、このチュートリアルのパート1でエミュレータに関する手順を確認してください。
コンソール・ウィンドウに次のように表示されたら、デプロイメントは完了です。
エミュレータにナビゲートします。Applicationsリストで「Employees」をクリックします。
Employeesページで「Take Picture」をクリックします。
これで、カメラ・エミュレータが表示されます。ページ下部にあるシャッター・ボタンをクリックして写真を撮ります。
写真を撮ると、カメラの左下にチェック・マークが表示されます。写真を保存するためにこのチェック・マークをクリックします。この操作を実行すると、写真が保存されてコール元のページに戻ります。
TakePictureページには、カメラ・エミュレータで撮影したばかりのイメージが表示されます。

これで、Mobile Application Framework（MAF）を使用した、標準のデバイス機能（カメラ）とのやり取りが正常に完了しました。次の項では、デバイスの電子メール機能とやり取りするJavaプログラムを追加します。

ステップ2：電子メールを送信するJavaコードの追加

この項では、アプリケーションから電子メールを送信する機能を追加してアプリケーションを拡張します。電子メールの送信にはさまざまな側面があります。1つ目として、電子メールを送信できるJavaクラスが必要です。2つ目として、このクラスをコールできるコードをアプリケーションに追加する必要があります。また、JavaクラスをマネージドBeanとしてアプリケーションに登録する必要もあります。

最初の手順では、Javaクラスを作成し、用意されているコードをクラスにコピーします。

ナビゲートしやすくするために、開いているエディタをすべて閉じます。
New Java Classダイアログを開き、「EmployeeView」→「src」→「model」で新しいクラスを作成します（ヒント：「EmployeeView」→「src」→「model」を右クリックし、「New」→「Class」を選択します）。
ダイアログでクラス名をemailBeanに設定し、「Finish」をクリックしてJavaクラスを作成します。
作成されたemailBean Javaクラスがエディタで開きます。次のコードをコピーしてエディタに貼り付け、クラスのコードをすべて置き換えます。

package model;
import oracle.adf.model.datacontrols.device.DeviceManager;
import oracle.adf.model.datacontrols.device.DeviceManagerFactory;
import oracle.adfmf.amx.event.ActionEvent;

public class emailBean {
String name;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public emailBean() {
    }
    public void sendEmail(ActionEvent actionEvent) {
        DeviceManager deviceManager = DeviceManagerFactory.getDeviceManager();
        deviceManager.sendEmail("Gary@oracle.com", // to
                                "" , // cc
                                "An email", //subject
                                "Hello from my MAF application", //body
                                "", // bcc
                                "", // attachments
                                "" //mimeTypes
                                );
     }
}

作業内容を保存します。

これでJavaクラスの作成が終了したので、このクラスをマネージドBeanとして登録します。
「EmployeeView」→「ViewContent」の順に選択し、「emp-task-flow-definition.xml」をダブルクリックします。
「Overvview」タブを選択し、Outlineで「Managed Beans」をクリックし、「Add a managed bean」をクリックします。
Managed Beanパネルで、Beanの名前をemailBeanに設定します。
参照ボタンを使用してemailBean - modelを探し、これを選択して「OK」をクリックします。Create Managed Beanダイアログ・ボックスで次のプロパティ値を設定し、「OK」をクリックします。

これで、Javaクラス（emailBean）の作成と登録が終了しました。マネージドBean内ですぐにこのメソッドを使用できます。
「employeeList.amx」ページをダブルクリックしてエディタで開きます。
パレットのフィルタを使用して、commandボタンを探します。
commandボタンを</amx:listItem>タグの直後にドラッグします。こうすると、従業員リストの後にボタンが配置されます。
Textの値をSend Emailに設定します。
Bind to a dynamic valueボタンを使用して、Action ListenerプロパティのExpression Builderを開きます。
Expression Builderで、「Managed Beans」→「emailBean」の順に選択して「void sendEmail(ActionEvent actionEvent)」をダブルクリックし、「OK」をクリックします。これで、追加しようとしているボタンがsendEmailメソッドにバインドされます。
「Finish」をクリックしてボタンを作成します。
作業内容を保存します。

先ほどカメラ機能で行った手順と同様に、このデバイス機能へのアクセスを要求する必要があります。
「MAF」→「MAF Feature Editor」をダブルクリックしてエディタを開きます。
「Device Access」を選択し、「Email access」チェック・ボックスを選択します。要求したアクセス権がまだアプリケーションに付与されていないことを示す警告が表示されます。
作業内容を保存します。
先ほどと同様に、「application editor」リンクをクリックしてアプリケーション・エディタを開きます。
Email accessチェック・ボックスの横に、アプリケーションがこのデバイス機能へのアクセス権を要求していることを示す警告が表示されているのがわかります。「Email access:」チェック・ボックスをクリックし、機能へのアクセス権をアプリケーションに付与します。
作業内容を保存します。

これで、sendMailメソッドを使用するマネージドBeanの作成が終了しました。また、このメソッドをコールするボタンのPictureページへの追加も終了しました。最後は、機能へのアクセス権を要求してアプリケーションに付与しました。これで、アプリケーションをデプロイしてテストできます。
メニューから「Debug」をクリックし、「Debug Configurations」を選択します。
前に行ったのと同様に、作成したMAF構成を選択し、「Debug」をクリックします。

構築とデプロイが完了したら、正常に構築できたことを示すメッセージが表示されます。
エミュレータに切り替えてEmployeeアプリケーションを実行します。
電子メール・ボタンをPictureページに配置したことを思い出してください。「Take Picture」をクリックします。
Employeesページで「Send Mail」をクリックします。エミュレータの電子メール設定をセットアップしていない場合は、ネイティブの電子メール・クライアントがコールされているがクライアントがまだ構成されていないことを示すメッセージが表示されます。