Flex Builder 3を使ってAdobeのチュートリアルを試す #3

Tweet

では続けていこう。 今回と次回で完結する予定だ。

HTTPServiceオブジェクトを作成する

「ソース」タブを選択し、ソースコード上のmx:HBoxの上部に以下の記述を追加する。

<mx:HTTPService id="photoService"
    url="http://api.flickr.com/services/feeds/photos_public.gne"
    result="photoHandler(event)"/>

それぞれの属性値に指定したのは以下のような意味があるはずだ。申し訳ないけど、ここは想像でしかない。 後でこれが間違いだとわかったら修正する。

属性名	意味
id	このHTTPServiceオブジェクトを保持する変数名
url	接続するURL
result	HTTPリクエストの結果を受け取ったときに実行されるメソッドと引数

この時点で画面はこのようになっているはずだ。

ちなみにphotoHandlerというメソッドはまだ作っていないため、この時点では以下のようなエラーがでているが気にしなくていい。 違うエラーメッセージが出ていたら全力で気にするべきだ。

1180: 未定義である可能性が高いメソッド photoHandler の呼び出しです。 FlickrRIA/src FlickrRIA.mxml 行 8

「bindable XML variable in ActionScript 3.0」を作成する

上手い日本語訳が思いつかない。。バインド可能XML変数？組み込みXML変数？まあそんな雰囲気で。

先ほど記述したHTTPServiceコンポーネントの上にもう一つコンポーネントを追加する。 今度はmx:Scriptというもので、どうやらそのコンポーネント内にActionScriptでプログラムを記述するためのものである。 <mx:Script>と打ち込むとコード補完をしてくれて以下のように一気に記述される。

<mx:Script>
    <![CDATA[

    ]]>
</mx:Script>

プログラムは<![CDATA[ と ]]>の間に記述することになる。 これはXMLにおけるコメントを記載するための仕様なのでFlexに限ったことではない。

まずは以下のように必要なクラスを使用できるようにimport宣言を行う。

<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.rpc.events.ResultEvent;

    ]]>
</mx:Script>

次に検索結果を格納する（変数名から想像するに）変数を宣言する。 [Bindable]という宣言を行うことで、その後のコンポーネントで使用可能になるということであろうか。 詳しくはわからないが、そんなことを気にしていては先に進めないので、とりあえず納得したことにする。

<mx:Script>
    <![CDATA[
        import mx.binding.utils.BindingUtils;
        import mx.collections.ArrayCollection;
        import mx.rpc.events.ResultEvent;

        [Bindable]
        private var photoFeed:ArrayCollection;

    ]]>
</mx:Script>

ここまで書くとわかるだろうが、どうやらActionScriptでは変数宣言は以下のようになるみたいだ。

var 変数名:変数の型

検索ボタンのハンドラ作成

引き続きソースコードの編集は続く。 mx:HBox内のmx:Buttonの部分を編集していこう。クリック時のイベントを定義するためにclick属性を追加する。

修正前

<mx:Button label="検索"/>

修正後

<mx:Button label="検索" click="requestPhotos()"/>

これで検索ボタンが押された時にはrequestPhotosというメソッドが実行されるわけだが、このメソッドもまだ実装していないためエラーが出る。

Flickr APIにHTTPリクエストでキーワードを送信する処理の実装

次に検索キーワードを入力するテキストボックスである、mx:TextInputを編集する。 単にidをつけるだけだ。

修正前

<mx:TextInput/>

修正後

<mx:TextInput id="searchTerms"/>

デザインを自分なりに変更してテキストボックスの大きさなどをいじった人はwidth="**"のような属性がある場合もある。 もちろんそれはあっても問題ない。

次に先ほどボタンに定義したハンドラ部分を実装しよう。 mx:Script内に以下のように関数宣言をする。

private function requestPhotos():void{
    photoService.cancel();
    var params:Object = new Object();
    params.format = 'rss_200_enc';
    params.tags = searchTerms.text;
    photoService.send(params);
}

photoServiceというのはmx:HTTPServiceタグのIDである。Flickrとの通信を制御するHTTPServiceオブジェクトだ。 ボタンが何度も押されたときの対策として、最初の行で現在の通信をキャンセルしているようだ。 その後はparamsというObject型変数にformatとtagsというパラメータをセットしている。 tagsの方にテキストボックスに入力されたテキストを代入している。 先ほどテキストボックスにsearchTermsというid属性を追加したのを憶えているだろうか。 また、formatやtagsというのはおそらくFlickr APIが定義しているパラメータなので、ここでは深くは掘り下げない。 tagsというパラメータに検索ワードを入れるという決まりがあるのだろう。

HTTPService 結果取得ハンドラの実装

Flickrから結果が返ってきたときに実行される処理を記述する。 先ほど書いたrequestPhotos()の後に書こう。 関数名はphotoHandlerとする。 HTTPServiceの宣言部に以下の記載があるためだ。 これにより、HTTPServiceオブジェクトは通信結果を取得するとただちにphotoHandler関数を実行する。

result="photoHandler(event)"

photoHandlerの内容は以下の通りだ。

private function photoHandler(event:ResultEvent):void{
    photoFeed = event.result.rss.channel.item as ArrayCollection;
}

Flickrから帰ってきた結果がどのようになっているのかわからないが、ResultEvent型のオブジェクトとして引数のeventに代入される。 そこからコレクションの形でphotoFeedに代入しているようだ。 この辺はFlickr APIやResultEventの仕様がわからなければ詳細はわからない。だから今回は気にしないことにしよう。

学習していく上で大切なことは、今自分が何を学ぼうとしているかを忘れないことだ。 自分が学ぶべき内容と本質的に関係ないものであれば、理解しないまま飛ばしても問題はない。 今回はもちろんFlex Builderの使用法、Flashアプリケーションの作成法を大まかに知ることが重要なので、そちらを優先した。 どうせResultEventの仕様はそのうち嫌でも調べなければいけないことになるだろう。

さて、ここまでのFlickrRIA.mxmlの全体を確認しよう。 足りなかった２つの関数も実装したので今ではエラーもないはずだ。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
     backgroundGradientColors="[0xFFFFFF,0xAAAAAA]"
     horizontalAlign="left"
     verticalGap="15" horizontalGap="15" >
    <mx:Script>
        <![CDATA[
            import mx.binding.utils.BindingUtils;
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;

            [Bindable]
            private var photoFeed:ArrayCollection;

            private function requestPhotos():void{
                photoService.cancel();
                var params:Object = new Object();
                params.format = 'rss_200_enc';
                params.tags = searchTerms.text;
                photoService.send(params);
            }

            private function photoHandler(event:ResultEvent):void{
                photoFeed = event.result.rss.channel.item as ArrayCollection;
            }
        ]]>
    </mx:Script>
    <mx:HTTPService id="photoService"
        url="http://api.flickr.com/services/feeds/photos_public.gne"
        result="photoHandler(event)"/>
    <mx:HBox width="100%">
        <mx:Label text="Flickrタグ もしくは検索ワード"/>
        <mx:TextInput id="searchTerms"/>
        <mx:Button label="検索" click="requestPhotos()"/>
    </mx:HBox>
</mx:Application>

次回、いよいよ完成する。