top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_496

Flex:◇チュートリアルを丁寧にやってみる(2) ・・・ 【Flex:4日目】

 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:4日目】


FC2ブログランキングにほんブログ村 IT技術ブログ Webサイト構築へブログ王ランキング人気ブログランキング人気ホームページランキングへ


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

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

 □デザインモードで、配置したボタン
<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 パート1 : inline itemRenderer」
      良さそうな解説がある

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

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


===============================
[ テスト(実行)してみる ]
===============================

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

  ▼

おぉ!うまくいったようだ。
チュートリアル:テスト「FlickrRIA を実行」
 ※"PHP" と入れて検索・・・

  ▼

チュートリアル:テスト「FlickrRIA を実行」結果


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

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

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

  ◆名前を FlickrThumbnail
   ベースを VBox で
   幅・高さを それぞれ 125 にして作成
幅・高さを それぞれ 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 を実行]

  ▼

OK!
(よしよし)

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

**************************************************
【今回の最終ソース】
・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>
commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/496-a59e8a4f
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。