Flex（プレビュー版）を使った Android アプリケーション開発

<?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="Home"
  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 のエディタ内で右クリックし、Run AS から Mobile Application を選ぶ
2. Launch method から On desktop を選択し、対象のデバイスを選ぶ （例； Google Nexus One）
3. Run をクリックしてアプリを実行

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

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

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

EmployeeDirectoryHome.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:MobileIconItemRenderer
        label="{data.firstName} {data.lastName}"
        messageField="title"/>
    </fx:Component>
  </s:itemRenderer>
</s:List>

ステップ 2: アプリ実行

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

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

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

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

1. EmployeeDirectory プロジェクトの views フォルダーで右クリックをして New>MXML Component と選択。EmployeeDetails をコンポーネント名に指定して Finish をクリック
2. EmployeeDetails を以下のように実装

<?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: EmployeeDetails ビューの表示

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

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

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

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

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

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

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

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

1. EmployeeDirectory.mxml ファイルを開き、</s:MobileApplication> タグの前に以下の内容を記述

   <s:navigationContent>
     <s:Button icon="@Embed('assets/home.png')"
       click="navigator.popToFirstView()"/>
   </s:navigationContent>

2. アプリケーションを実行して確認。ナビゲーション要素がビューではなくアプリケーションレベルで定義されているため、全てのビューで表示される

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

1. EmployeeDirectoryHome.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>

3. この実装では、検索ボタンを押すと常に全ての従業員が返される。アプリのユーザーが検索後にデータが表示されるように、View から creationComplete の定義を削除
4. アプリケーションを実行して確認

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

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

1. EmployeeDirectoryHome.mxml ファイルを開き、<s:titleContent> タグの直前に空の navigatonContent タグを追加する

   <s:navigationContent/>

2. アプリケーションを実行して確認

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

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

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

1. HTTPService の result イベントで、ビューの data 属性に lastResult の値を設定する

   <s:HTTPService id="srv" url="assets/employees.xml"
     result="data=srv.lastResult.list.employee"/>

2. List の dataProvider にビューの data 属性をバインドする

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

3. アプリケーションを実行して確認