※本記事は正式版の情報に基づいて更新されています

この記事では、Flex 4.5 SDK と Flash Builder 4.5 を使った Android デバイス向けアプリケーションの開発手順を解説します。

開発には Flash Builder 4.5 をダウンロードしてインストールします。アプリケーションのテストとデバッグには、Flash Builder 4.5 のエミュレーターが利用できます。そのため、アプリケーションの開発は Android デバイス無しでも行えます。

この記事で開発するアプリは以下の機能を持っています。

  • 従業員リストの表示
  • 従業員の詳細情報表示
  • 従業員検索キーワード入力用のコントロール
  • 従業員に電話やメールの送信
  • 組織情報の検索

パート 1: 基本となるモバイルアプリケーション

最初に、従業員の一覧を表示する簡単なモバイルアプリケーションを作ります。

ステップ 1: Flex Mobile Project の作成

  1. メニューから File>New>Flex Mobile Project と選択
  2. Project Location タブにプロジェクト名として EmployeeDirectory を指定し Next をクリック
  3. Mobile Settings タブが表示されたらデフォルト値のまま Finish をクリック
  4. 展開した zip ファイルの assets フォルダを、EmployeeDirectory プロジェクトの src ディレクトリ下にコピー

ステップ 2: アプリケーションの記述

  1. EmployeeDirectory.mxml をエディタで開く。以下の点を確認。
    1. ルートタグは ViewNavigatorApplication
    2. ViewNavigatorApplication の firstView 属性の値はEmployeeDirectoryHomeView
  2. EmployeeDirectoryHomeView.mxml をエディタで開き、以下のように記述する
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView" creationComplete="srv.send()"> <fx:Declarations> <s:HTTPService id="srv" url="assets/employees.xml"/> </fx:Declarations> <s:List id="list" top="0" bottom="0" left="0" right="0" dataProvider="{srv.lastResult.list.employee}" labelField="lastName"/> </s:View>

ステップ 3: アプリケーションの実行

  1. EmployeeDirectory.mxml のエディタ内で右クリックし、実行構成からモバイルアプリケーションを選ぶ
  2. 起動方法からデスクトップ上を選択し、対象のデバイスを選ぶ (例; Google Nexus One)
  3. 実行をクリックしてアプリを実行

     

パート 2: アイコンアイテムレンダラーの使用

アプリが動いたら、従業員情報を表示するアイコンアイテムレンダラーを指定します。

ステップ 1: EmployeeDirectoryHomeView.mxml の編集

EmployeeDirectoryHomeView.mxml 内の List にインラインで itemRenderer を定義。1 行目に姓と名前 2 行目に役職を表示するよう設定。

<s:List id="list" top="0" bottom="0" left="0" right="0" dataProvider="{srv.lastResult.list.employee}"> <s:itemRenderer> <fx:Component> <s:IconItemRenderer label="{data.firstName} {data.lastName}" messageField="title"/> </fx:Component> </s:itemRenderer> </s:List>

ステップ 2: アプリ実行

アプリケーションを実行。以下のように表示される。

パート 3: ナビゲーション機能の追加

ここで、従業員の詳細情報を表示するEmployeeDetailsView というビューをつくり、ビュー間でのナビゲーションと情報の受け渡しを実現します。

ステップ 1: EmployeeDetailsView ビューの作成

  1. EmployeeDirectory プロジェクトの views フォルダーで右クリックをして New>MXML Component と選択。EmployeeDetailsView をコンポーネント名に指定して Finish をクリック
  2. EmployeeDetailsView を以下のように実装
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Employee Details"> <s:HGroup verticalAlign="middle" gap="12"> <s:Image source="assets/pics/{data.picture}"/> <s:VGroup> <s:Label text="{data.firstName} {data.lastName}"/> <s:Label text="{data.title}"/> <s:Label text="{data.department}"/> <s:Label text="{data.city}"/> </s:VGroup> </s:HGroup> </s:View>

ステップ 2: EmployeeDetailsView ビューの表示

EmployeeDirectoryHomeView.mxml ファイルを開き、List コンポーネントに change イベントで EmployeeDetailsView を表示するよう処理を追加する。

<s:List id="list" top="0" bottom="0" left="0" right="0" dataProvider="{srv.lastResult.list.employee}" change="navigator.pushView(EmployeeDetailsView, list.selectedItem)"> <s:itemRenderer> <fx:Component> <s:IconItemRenderer label="{data.firstName} {data.lastName}" messageField="title"/> </fx:Component> </s:itemRenderer> </s:List>

ステップ 3: アプリケーションの実行

アプリを実行し、リストから従業員を選択すると、その従業員の詳細情報画面が表示される

パート 4: アクションバーの追加

次に、アプリケーションにアクションバーを追加し、以下の機能を持たせます。

  • 全てのビューに最初のビューに戻るためのホームボタンを提供
  • 従業員検索用のコントロールを提供

ステップ 1: ホームボタンの作成

  1. EmployeeDirectoryView.mxml ファイルを開き、</s:ViewNavigatorApplication> タグの前に以下の内容を記述
<s:navigationContent> <s:Button icon="@Embed('assets/home.png')" click="navigator.popToFirstView()"/> </s:navigationContent>
  1. アプリケーションを実行して確認。ナビゲーション要素がビューではなくアプリケーションレベルで定義されているため、全てのビューで表示される

ステップ 2: 検索バーの作成

  1. EmployeeDirectoryHomeView.mxml ファイルを開く
  2. </fx:Declarations> タグの下に、以下のように titleContent と actionContent を追加
<s:titleContent> <s:TextInput id="key" width="100%"/> </s:titleContent> <s:actionContent> <s:Button icon="@Embed('assets/search.png')" click="srv.send()"/> </s:actionContent>
  1. この実装では、検索ボタンを押すと常に全ての従業員が返される。アプリのユーザーが検索後にデータが表示されるように、View から creationComplete の定義を削除
  2. アプリケーションを実行して確認

     

ステップ 3: EmployeeDirectoryHome からホームボタンの削除

最初のビューにホームボタンは不要なので (また混乱の元になる可能性もあるため) 削除します。

  1. EmployeeDirectoryHomeView.mxml ファイルを開き、<s:titleContent> タグの直前に空の navigatonContent タグを追加する
<s:navigationContent/>
  1. アプリケーションを実行して確認

ステップ 4: 検索結果の保存

詳細情報のビューを表示した状態でデバイスの Back ボタンを使って従業員一覧ビューに戻ると、空のリストが表示されます。これは、新しいビューを表示する際、それまで表示されていたビューが自動的に破棄されるためです。そのため、Back ボタンをクリックした際には、従業員一覧ビューが再度作られます。

ビューは切り替え時に破棄されますが、data 属性は保存されるため、再度ビューを生成する際にそのデータを再度適用することができます。

  1. HTTPService の result イベントで、ビューの data 属性に lastResult の値を設定する
<s:HTTPService id="srv" url="assets/employees.xml" result="data=srv.lastResult.list.employee"/>
  1. List の dataProvider にビューの data 属性をバインドする
<s:List id="list" top="0" bottom="0" left="0" right="0" dataProvider="{data}" change="navigator.pushView(EmployeeDetailsView, list.selectedItem)"> <s:itemRenderer> <fx:Component> <s:IconItemRenderer label="{data.firstName} {data.lastName}" messageField="title"/> </fx:Component> </s:itemRenderer> </s:List>
  1. アプリケーションを実行して確認

パート 5: デバイス機能との連携

アプリケーションから、従業員に電話をかけたりメールを送る機能を追加します。

ステップ 1: 利用出来る操作リストの表示

  1. EmployeeDetailsView.mxml の <s:HGoup> タグの直前に <fx:Script> ブロックを追加する
<fx:Script> <![CDATA[ ]]> </fx:Script>
  1. <fx:Script> ブロック内に、バインド可能な ArrayCollection を actions という名前で宣言する
[Bindable] protected var actions:ArrayCollection;
  • その際 ArrayCollection クラスの import 文を忘れずに
import mx.collections.ArrayCollection;
  1. 以下のアイコンを埋め込む。これらは、操作リスト用のアイテムレンダラーで使用する
[Embed("assets/sms.png")] private var smsIcon:Class; [Embed("assets/phone.png")] private var phoneIcon:Class; [Embed("assets/mail.png")] private var mailIcon:Class;
  1. data 属性のセッターをオーバーライドして、従業員のデータに応じて操作リストを表示出来るようにする (例:メール送信はメールアドレスの登録されている従業員のみで有効に)
override public function set data(value:Object):void { super.data = value; actions = new ArrayCollection(); if (data.officePhone) { actions.addItem({type: "tel", name: "Call office", details: data.officePhone, icon:phoneIcon}); } if (data.cellPhone) { actions.addItem({type: "tel", name: "Call mobile", details: data.cellPhone, icon:phoneIcon}); actions.addItem({type: "sms", name: "SMS", details: data.cellPhone, icon:smsIcon}); } if (data.email) { actions.addItem({type: "mailto", name: "Email", details: data.email, icon:mailIcon}); } }
  1. </s:HGroup> タグの下に、操作リスト表示用の List コンポーネントを追加し、actions ArrayCollection とバインド
<s:List id="list" dataProvider="{actions}" top="160" left="0" right="0" bottom="0"> <s:itemRenderer> <fx:Component> <s:MobileIconItemRenderer paddingTop="8" paddingBottom="8" verticalGap="6" labelField="name" messageField="details" decoratorClass="{data.icon}"/> </fx:Component> </s:itemRenderer> </s:List>
  1. アプリケーションを実行して操作リストが表示されることを確認。この時点ではまだ操作の実行はできない

ステップ 2: 操作の起動

  1. List コンポーネントに change イベントハンドラー list_changeHandler を追加
<s:List id="list" dataProvider="{actions}" top="160" left="0" right="0" bottom="0" change="list_changeHandler(event)"> <s:itemRenderer> <fx:Component> <s:MobileIconItemRenderer paddingTop="8" paddingBottom="8" verticalGap="6" labelField="name" messageField="details" decoratorClass="{data.icon}"/> </fx:Component> </s:itemRenderer> </s:List>
  1. list_changeHandler を以下のように実装
protected function list_changeHandler(event:IndexChangeEvent):void { var action:Object = list.selectedItem; switch (action.type) { case "tel": navigateToURL(new URLRequest("tel:"+action.details)); break; case "sms": navigateToURL(new URLRequest("sms:"+action.details)); break; case "mailto": navigateToURL(new URLRequest("mailto:"+action.details)); break; } }
  • spark.events.IndexChangeEvent クラスの import を忘れずに (mx.events.IndexChangedEvent では無いことに注意)
import spark.events.IndexChangeEvent;
  1. アプリケーションを実行して確認

パート 6: ローカル SQLite データベースの利用

アプリケーションが SQLite データベースからデータを取得するよう、ロジックを変更します。

ステップ

  1. zip ファイルの model フォルダを EmployeeDirectory プロジェクトの src ディレクトリ下にコピーする
  2. EmployeeDAO クラスと Employee クラスの内容を確認
    1. EmployeeDAO クラスは、データソースへのアクセスロジックを実装。データベースに存在しない従業員の情報作成ロジックも持つ
    2. Employee クラスは従業員情報用のバリューオブジェクト
  3. EmployeeDirectoryHomeView.mxml の HTTPService (もしくは RemoteObject) を EmployeeDAO で置き換える
<model:EmployeeDAO id="srv"/>
  • model 名前空間はドキュメントルートの View タグで定義
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Home" xmlns:model="model.*">
  1. 検索ボタンの click イベント処理を以下のように変更(EmployeeDAO がデータベースアクセスに同期 API を使用しているため、findByName() 関数の戻り値を直接代入)
<s:Button icon="@Embed('assets/search.png')" click="data=srv.findByName(key.text)"/
  1. アプリケーションを実行して確認

パート 7: 組織情報の扱い

最後に、上司や部下を表示する機能を追加します。従業員の詳細情報画面に、それぞれの情報を表示するアクションを追加します。

ステップ 1: 部下一覧ビューの作成

  1. EmployeeDirectory プロジェクトの views フォルダーを右クリックし、New>MXML Component と選択。DirectReportsView をコンポーネント名に指定して Finish をクリック
  2. DirectReportsView.mxml を以下のように実装
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Direct Reports"> <s:List id="list" top="0" bottom="0" left="0" right="0" dataProvider="{data.directReports}" change="navigator.pushView(EmployeeDetails, list.selectedItem)"> <s:itemRenderer> <fx:Component> <s:MobileIconItemRenderer messageField="title" label="{data.firstName} {data.lastName}"/> </fx:Component> </s:itemRenderer> </s:List> </s:View>

ステップ 2: アクションの追加

  1. EmployeeDetailsView.mxml に以下の 2 つのアクションを追加
if (data.manager) { actions.addItem({type: "employee", name: "View manager", details: data.manager.firstName + " " + data.manager.lastName, employee: data.manager}); } if (data.directReports && data.directReports.length > 0) { actions.addItem({type: "reports", name: "View direct reports", details: "(" + data.directReports.length + ")", employee: data}); }
  1. List の change ハンドラーに 2 つの case 文を追加
case "employee": navigator.pushView(EmployeeDetails, action.employee); break; case "reports": navigator.pushView(DirectReports, action.employee); break;

ステップ 3: アプリケーションの実行

  1. 上司のいる従業員を選択、View manager をクリック
  2. 部下のいる従業員を選択、View direct reports をクリック