Flex：◇チュートリアルを丁寧にやってみる（２）・・・【Flex：４日目】

　2008-11-23

　進展が遅い・・・
　期日は確実に迫って来ている。

引き続き
　チュートリアルを丁寧に進めて見る。

**************************************************
【前回の最終ソース】
**************************************************

<?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;
	]]>
	</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="さて、何をお探ししましょう？キーワードを入れてくださいませ！" width="272"/>
		<mx:TextInput width="133"/>
		<mx:Button label="ボタン"/>
	</mx:HBox>
</mx:Application>

　◎前回の復習　と　用語ポイント

　追記に　▼

※この連載は、はじめて「Flex」に取り組んだmetaboyが、
　60日間体験版を利用して、ゆっくりと学んでゆく、詳細な記録です。
　　　　　　　　　　　　　　　　　　　　　（本日の作業時間：3.5時間）
【Flex：４日目】

**************************************************
【作業詳細】
**************************************************

===============================
[ ボタンをトリガに ]
===============================

　□デザインモードで、配置したボタン

<mx:Button label="ボタン"/>

に、トリガ　を追加

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

※requestPhotos()　として用意　併せて、表示文字列も変更

===============================
[ テキストボックスを識別 ]
===============================

<mx:TextInput width="133" id="searchTerms"
			enter="requestPhotos()" />

※テキストボックスには、識別させるための　id を用意する

===============================
[ イベントハンドラを準備 ]
　Flickr API　に
　　・HTTPService request
　　　と keyword を送る　部分
===============================

　□ボタンをクリックされることで、呼び出される
　　private function　を準備

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

・void　　：関数が値を返さないように指定
　　　　　void 型は特殊な型で、値は undefined のみ。
・photoService.cancel();
　　　　　：すでに発行されていたらその命令を一度キャンセルし
　　　　　　（ photoService のキャンセルメソッドの実行）
　　　　　　（初期化行動）
・params　：パラメータ用変数を用意　var params:Object = new Object();
　　　　　　params.format = 'rss_200_enc';
　　　　　　　・これは、Flickrで値を得るためのもの（らしい？）
　　　　　　params.tags = searchTerms.text;
　　　　　　　・ここで、さきほど用意した　id値を利用するわけだ
・params　：パラメータ用変数を用意　var params:Object = new Object();
・photoService.send(params);
　　　　　：パラメータの値を伴って、データを送信・・・と。

===============================
[ イベントハンドラを準備 ]
　Flickr API　で
　　・HTTPService request
　　　の結果を得る部分
===============================

　□HTTPServiceオブジェクトで、定義してある
　　result="photoHandler(event)"　として
　　結果が書き込まれる部分のことですね。

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

・event:ResultEvent
　　　　　：ResultEvent型のオブジェクトとして引数のeventに代入
　　　　　　ArrayCollection　の形で　変数 photoFeed に組み込む
　　　　　※Flickr API の仕様のようだ

===============================
[ 取得した情報をレイアウト配置 ]
　Flickr API　から得た情報を
　　レイアウト配置する部分だ
===============================

　□ボタン（</mx:HBox>）の下に配置
　　リストコントロールなどの一部の
　　 Flex フレームワークコンポーネントは、
　　"データプロバイダ" からのデータを表します。
　　データプロバイダとは、コントロールによって必要とされる
　　データを含むオブジェクトのこと（ by Flex ガイド )

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

・photoFeed
　　　　　：先に作成し定義してある
　　　　　　function photoHandler　の結果が入ってくる

　□中身をチュートリアルに従い、組み込む

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:VBox>
        </mx:Component>
    </mx:itemRenderer>
</mx:TileList

・mx:itemRenderer　　：理解がグレーなので
　　　　　　後日、習得を試みよう。
　　　　　　バナナ研究所　さんで
　　　　　　「itemRenderer パート１ : inline itemRenderer」
　　　　　　良さそうな解説がある

・source="{data.thumbnail.url};
　　　　　：ここは、Flickr API を理解してから、かな。

　よし、これで一通り終えた。

===============================
[ テスト（実行）してみる ]
===============================

　□ファイルメニュー　から
　　[実行] ＞ [FlickrRIA を実行]
　　※このプロジェクト名で実行　ということだね。

　　▼

おぉ！うまくいったようだ。

　※"PHP" と入れて検索・・・

　　▼

===============================
[ カスタムコンポーネント化 ]
　部品にできるところを分割別ファイルに
===============================

　□どんなプログラムでも、よくやることではあるけれど
　　部品化・汎用化のひとつとして、チュートリアルでは
　　表示する部分を別のコンポーネントにする
　　説明が続く。
　　やっておこう・・・

　　◆ファイルメニュー　から
　　　[ファイル] ＞ [新規] ＞ [MXMLコンポーネント] を実行

　　◆名前を　FlickrThumbnail
　　　ベースを　VBox　で
　　　幅・高さをそれぞれ 125 にして作成

　　　これが最初の（自動的に生成される）ソースだ

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

　　◆表示する外観を決定している部分も移植する
　　　※mx:VBox　の属性のひとつとして移植

<xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 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>

　　◆属性を少し追加して・・・

<xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="125" height="125"
	paddingBottom="5"
	paddingLeft="5"
	paddingTop="5"
	paddingRight="5"
	horizontalScrollPolicy="off"
	verticalScrollPolicy="off"
	horizontalAlign="center">
	<mx:Image width="75" height="75"
	    source="{data.thumbnail.url}"/>
	
	<mx:Text text="{data.credit}"/>
</mx:VBox>

　　◆メインファイルで　この新しく作成した
　　　カスタムコンポーネントを利用する設定

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

	</mx:TileList>

===============================
[ 再テスト（実行） ]
===============================

　□ファイルメニュー　から
　　[実行] ＞ [FlickrRIA を実行]

　　▼

ＯＫ！
（よしよし）

なんとなくわかってきたようーな。

**************************************************
【今回の最終ソース】
・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="さて、何をお探ししましょう？キーワードを入れてくださいませ！" width="272"/>
		<mx:TextInput width="133" id="searchTerms"
			enter="requestPhotos()" />
		<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"
	                paddingBottom="5"
	                paddingLeft="5"
	                paddingTop="5"
	                paddingRight="5"
	                horizontalScrollPolicy="off" verticalScrollPolicy="off"
    				horizontalAlign="center">
	<mx:Image width="75" height="75"
	    source="{data.thumbnail.url}"/>
	
	<mx:Text text="{data.credit}"/>
</mx:VBox>