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

Tweet

Tileコンポーネントの作成

Flickrから取得してきたイメージを表示するためにTileListというコンポーネントを使用する。 HBoxコンポーネントの後、Applicationタグの終了タグの直前に以下の記述を追加しよう。 デザインモードでドラッグ＆ドロップした後に編集してもよい。

<mx:TileList width="100%" height="100%"
    dataProvider="{photoFeed}">

</mx:TileList>

以下の部分がポイントだと推測できる。前回のエントリーで述べたように、photoFeed変数にはFlickrから取得した結果が何らかの形で格納されている。それをTileList内にこれまたどのような形かで表示するのだろう。前回も述べたとおり、詳細はよくわかっていない。

dataProvider="{photoFeed}"

分かっているのはphotoFeed変数はArrayCollection型ということだけだ。でもそれで十分かもしれない。 そもそもTileListというのは日本語で言えば「タイルを並べたもの」ということなので、dataProvider（データ提供者）に与えたArrayCollectionの中身を一つずつ取って並べて表示するのだろう。

TileListの中にさらに記述を追加していく。 説明はすっ飛ばしてコードだけ見てみよう。

<mx:TileList width="100%" height="100%"
    dataProvider="{photoFeed}">
    <mx:itemRenderer>
        <mx:Component>
            <mx:VBox width="125" height="125"
                paddingBottom="5"
                paddingLeft="5"
                paddingTop="5">

            </mx:VBox>
        </mx:Component>
    </mx:itemRenderer>
</mx:TileList>

幅や高さ、余白など見た目の部分はVBoxで設定しているようだ。 それ以外のitemRendererやComponentはどういう働きをしているのかよくわからないが、恐らく概念的に必要なのだろう。我ながら都合のいい解釈だ。

そして最後にVBoxの中に実際の画像とテキストを配置する。 全て記述し終えるとこのようになる。

<mx:TileList width="100%" height="100%"
    dataProvider="{photoFeed}">
    <mx:itemRenderer>
        <mx:Component>
            <mx:VBox width="125" height="125"
                paddingBottom="5"
                paddingLeft="5"
                paddingTop="5"
                paddingRight="5">

                <mx:Image width="75" height="75"
                    source="{data.thumbnail.url}"/>

                <mx:Text text="{data.credit}"/>
            </mx:VBox>
        </mx:Component>
    </mx:itemRenderer>
</mx:TileList>

完成！！

セーブしたらメニューより[実行]→[FlickrRIAを実行]を選択し実行してみよう。 うまくいけば、ブラウザが起動するはずだ。検索ワードを入力して検索ボタンを押せばもちろん取得された画像が表示される。 たった54行のソースコードで、しかも一部分はビジュアルエディタで生成したもので、このような見た目も何となく洗練されたアプリケーションができてしまうのだ。 多種多様なコンポーネントを使いこなしたら、相当色んなことができるのではないだろうか。

カスタムコンポーネントを作成し、サムネイル部分を分割する

画像のサムネイル表示部分を別のファイルに分割する。 どうやらカスタムコンポーネントと呼ぶらしい。 そうすることで管理しやすくなる、かどうかは正直わからないが、別のアプリケーションでその部品を再利用できるようになることは確かだ。

メニューより[ファイル]→［新規］→[MXMLコンポーネント]を選択。以下のパラメータで作成する。

• ファイル名　「FlickrThumbnail」
• ベース　「VBox」
• 幅 「125」
• 高さ 「125」

ひな型が自動生成されるため、その内部に先ほど作成したVBoxの中身の部分をコピーする。

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="125" height="125">

    <mx:Image width="75" height="75"
        source="{data.thumbnail.url}"/>

    <mx:Text text="{data.credit}"/>
</mx:VBox>

次にFlickrRIA.mxml内のitemRenderer以下のコンポーネントをバッサリ削除する。 そしてTileListのitemRenderer属性でFlickrThumnailを指定することでFlickrThumnail.mxmlが使用される。

<mx:TileList wi dth="100%" height="100%"
    dataProvider="{photoFeed}"
    itemRenderer="FlickrThumbnail">

</mx:TileList>

セーブ後、実行して同じように動作すれば成功。 最後にここまでに作成したソースコードを掲載しておく。

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.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:TileList width="100%" height="100%"
        dataProvider="{photoFeed}"
        itemRenderer="FlickrThumbnail">

    </mx:TileList>
</mx:Application>

FlickrThumbnail.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="125" height="125">

    <mx:Image width="75" height="75"
        source="{data.thumbnail.url}"/>

    <mx:Text text="{data.credit}"/>
</mx:VBox>

お疲れさんっした！！