Flexで作るAndroidアプリ開発チュートリアル 4

はじめに

FlashのオープンソースフレームワークであるFlexを使って効率良くAndroidアプリケーションを開発する方法をチュートリアル形式で紹介します。

今回使用す るツールやSDKは全てアドビシステムズにて開発中のバージョンであり、正式リリース(2011年上半期)前のプレビュー版となります。正式リリース後は ツールやSDKの変更が考えられますのでご注意ください。尚、プレビュー版で開発したアプリケーションの利用に対する制約は一切ありません。

サンプルAndroidアプリケーションについて

このチュートリアルでは、一般公開されている価格.com Webサービス(REST)を使用して、アイテムの最安値検索を行う簡単なAndroidアプリケーションを作成していきます。欲しいアイテムの名前やキーワードを入力すると、キーワードに合致したアイテム情報がリスト表示されるという簡単なアプリケーションです。

手順

前回までのチュートリアルで、価格.com Webサービスを利用し、入力された検索キーワードでアイテムのリスト表示をするAndroidアプリケーションを作成してきました。今回はアプリケーションの操作性を高めるためのUIを実装していきます。

ActionBar

アプリケーションを開発する上で、情報表示や操作方法の一貫性や直感性をユーザーに提供することは大事なことです。Flex フレームワーク “Hero”では、一つの画面(View)を以下のようなパーツやエリアに分け、ユーザーに提供する情報を整理することができます。

ここでは画面上部にあるActionBarに着目してみましょう。

ActionBarは、ユーザーが画面遷移操作をしたり、リロード操作などをするだけでなく、検索キーワード入力など、様々な操作を提供するUI配置エリアとして扱うことができます。ActionBar内は、さらに以下のようなエリア別の名前が定義されています。

navigationContent
画面遷移のための操作ボタン(「戻る」ボタンや「ホーム」ボタンなど)を配置します。

titleContent
画面タイトルや検索用のテキスト入力などを配置します。タイトル文字列は、titleプロパティで指定します。

actionContent
その画面での操作ボタン(「リロード」ボタンや「検索実行」ボタン、「編集」ボタンなど)を配置します。

※各エリアにどのような種類の操作系コンポーネントを配置するか、プログラム上の制約は特にありません。従って、navigationContentエリアに「編集」ボタンなどを配置してもコンパイルエラーなどは発生しません。制約はありませんが、UIの一貫性や直感性が保たれるように配慮する必要があります。なお、各エリアに何も指定しない場合は、ブランクエリアにすることができます。

これらのエリアを活用したActionBarの例を以下に示します。

全ての画面に戻るボタンを配置

それでは、ActionBarのnavigationContentエリアに一つ前の画面に戻るボタンを配置してみましょう。現在は画面階層がHomeViewとListViewの2階層しかありませんが、今後アイテムの詳細情報を表示する画面を3階層以降に用意する場合などを想定して、全ての画面に共通で表示される戻るボタンを配置しましょう。

全ての画面に共通で表示させたいボタンや文字などは、アプリケーションのルートとなる<s:MobileApplication>タグ内に、前述のActionBar内の3つのエリア単位で設定することが可能です。今回のチュートリアルでは、PriceCom.mxmlに<s:MobileApplication>タグがありますので、PriceCom.mxmlをソースビューで開き作業を進めていきます。

PriceCom.mxmlを次のように編集します。

navigator.popView()については、前回の「画面遷移を指定」の章をご覧下さい。

これを保存して、デスクトップ上で実行して確認してみましょう。デスクトップ上で実行するには、実行ボタンの横にある「▼」をクリックします。

メニューから「実行の構成…」を選択して「実行構成」ダイアログを開きます。「起動方法:」の「デスクトップ上:」を選択し、適当なデバイスを指定してから実行ボタンを押します。

このようにHomeView.mxmlとListView.mxmlのどちらにも「戻る」ボタンが表示されたのが分かります。今後、アイテム詳細表示の画面を追加した場合にも「戻る」ボタンが表示されるようになります。

ここで一手間加えましょう。「戻る」ボタンの文字列ラベルをアイコンに変更してアプリケーションらしさを出してみます。まず、Flash Builderのパッケージエクスプローラ上のsrcフォルダを右クリックし、「新規」>「フォルダー」から「assets」フォルダーを作成します。次に、以下の左向き矢印アイコン画像「back.png」をDLして、assetsフォルダーに保存します。

パッケージエクスプローラは次のようになります。

PriceCom.mxmlの18行目を以下のように変更します。

<s:Button icon="@Embed('assets/back.png')" click="button1_clickHandler(event)"/>

iconプロパティを使うことでボタンにアイコンを設定できます。「@Embed(‘画像ファイルパス’)」は、Flexで埋め込み画像ファイルを指定する方法です。

PriceCom.mxmlを保存して、実行してみましょう。

このようにアイコン付きのボタンに簡単に変更できました。

画面固有のActionBarを設定

ところで、実行してみると分かるように、ホーム画面であるHomeViewに「戻る」ボタンが表示されるのは違和感があります。また、ホーム画面の「戻る」ボタンを押すと「存在しない前の画面に戻る」という予期しない動作をしてしまいます。ということで、ホーム画面には「戻る」ボタンを表示しないように設定していきます。

HomeView.mxmlをソースビューで開き、</fx:Declarations>の行の下に次の一行を追加します。

<s:navigationContent />

HomeView.mxmlは、次のようになります。

追加した19行目は、「このHomeViewのActionBarのnavigationContentエリアには、何も指定しない」という意味になります。このようにPriceCom.mxmlの<s:MobileApplication>で指定した、全画面に共通で表示されるUIコンポーネントは、画面個別の指定で上書きすることができます。

さらに、ListViewのActionBarでも検索ができる以下のような画面仕様に変更していきます。

まず、次の虫眼鏡アイコン画像「search.png」をDLして、assetsフォルダーに保存してください。

ListView.mxmlをソースビューで開きます。</fx:Declarations>と<s:List id=”list” …>の間に以下のコードを追記します。

<s:titleContent>
    <s:TextInput id="searchInput" width="100%" text="{String(data)}"/>
</s:titleContent>

<s:actionContent>
    <s:Button icon="@Embed('assets/search.png')" />
</s:actionContent>

これは「ListViewのActionBarのtitleContentエリアに検索キーワード入力を、actionContentエリアに検索実行ボタンを指定する」という意味になります。なお、ホーム画面で入力された検索キーワードを表示するために、TextInputのtextプロパティに「{String(data)}」と指定しています。

次に、検索を実行するための関数を定義します。現在、ListView.mxmlの<fx:Script>タグ内は次のようになっています。

<fx:Script>
    <![CDATA[
    import mx.events.FlexEvent;

    protected function list_creationCompleteHandler(event:FlexEvent):void
    {
        searchResult.token = kakakuCom.search("XXX", String(data), "20");
    }

    ]]>
</fx:Script>

これを次のように編集します。

<fx:Script>
    <![CDATA[

    private function searchItem():void
    {
        searchResult.token = kakakuCom.search("XXX", searchInput.text, "20");
    }

    ]]>
</fx:Script>

既に存在したlist_creationCompleteHandler()メソッドの代わりに、searchItem()メソッドを作成しています。不要なimport文も削除しました。kakakuCom.search()の第2引数で「searchInput.text」が指定されているのは、ActionBar内で指定した検索キーワード入力に入力された文字列を指定していることになります。

ActionBar内のactionContentエリアに指定した検索ボタンからsearchItem()メソッドを呼び出します。

<s:actionContent>
    <s:Button icon="@Embed('assets/search.png')" click="searchItem()"/>
</s:actionContent>

list_creationCompleteHandler()イベントが削除されたので、<s:List>コンポーネントの指定も次のように変更します。

<s:List id="list" width="100%" height="100%" labelField="ProductName">
     <s:AsyncListView list="{searchResult.lastResult}"/>
</s:List>

今までは<s:List>コンポーネントのオブジェクトが生成されたタイミングで、list_creationCompleteHandler()メソッドが呼び出され、価格.comのWebサービスに対してアイテム検索が実行されていました。しかし、list_creationCompleteHandler()メソッドが削除され、代わりに作成されたsearchItem()メソッドはActionBar内の検索ボタンから呼び出されているだけです。つまり、ホーム画面からリスト画面に遷移した瞬間は、searchItem()メソッドが誰からも呼ばれておらず価格.comへのアイテム検索は実行されないことになります。

リスト画面が表示されたタイミングで自動的にアイテム検索が実行されるようにするため、ここでは画面がアクティブになった時に発生するviewActivateイベントを使って対処していきます。

<s:View>の指定を次のように変更します。

<?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"
        xmlns:kakakucom="services.kakakucom.*"
        viewActivate="searchItem()">

不要になった「title=”{String(data)}”」の記述は削除します。

ここまでの作業でListView.mxmlは次のようになりました。

※「XXX」の部分は自分で取得したAPIアクセスキーを使用してください。

では、ここまでの作業結果を実行して確認してみましょう。ホーム画面に戻らなくても、リスト画面でもアイテム検索ができるようになったことが分かります。

次回は

アプリケーションをブラッシュアップしていきます。(仮)

広告

One Response to Flexで作るAndroidアプリ開発チュートリアル 4

  1. たか says:

    Flex(4.5.1)でandroidの開発を始めて実施するのに、当サイトを見て実施してみようと思いましたが
    私の環境がおかしいのか?チュートリアル2の「データとサービス」がどうしても登録できません。
    「終了」ボタンを押下しても「Search」が出てこない状態です。
    誠にお手数をお掛けますが、services配下のソースをご開示頂けますと幸いです。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。