この本を読んでFLEX Builder 3の性能の良さがよくわかったので、使いこなせるように復習がてらアプリケーションを作ってゆく。
リファレンスとして以下の本も手元に用意した。
まず最初に作るのは、ブログパーツのようなもの。
Amazonのアフェリエイトで以下のようなウィジェットと呼ばれるものがある。
これはまったくすばらしい。
仕様が公開されているわけではないので詳しいところはわからないが、基本的な構造としては以下のような具合になっている。
・自分のアフェリエイトのアカウントに、このウィジェットに表示させるデータのリストを登録する。
・それを表示させるHTMLが自動生成されるので、それをコピーして表示させたい部分にペーストする。
というわけで、とりあえずこれと同じようなものをFlex Builder 3で作ってみることにする。
まず最初にアプリケーションの基本構造について考える。
Flashでアプリケーションを作る場合は好き勝手に自由に作れば良いが、Flex Builder 3で作るときは"MVC"を意識したほうが良い。
どうしてかと言うと、概略は以下のような感じ。
１．Flex Builder 3は、Flexアプリケーションを作るためのオーサリングツール。
２．Flexアプリケーションというのは、Flexコンポーネントで作るアプリケーション。
３．Flexコンポーネントというのは、Flexフレームワークでアプリケーションを開発するためのAS3.0のライブラリ。
４．FlexフレームワークはMVCでアプリケーションを作成することを前提にしているフレームワーク。
だから逆に言うと、MVCを意識してFlex Builder 3でアプリケーションを作ると、するっとRIAができる。
今、急に思い出したのだが、もう２年以上前に下のようなサンプルを作ったことがある。
PCが壊れてソースが全部なくったので、記憶からもまったく消えていたのだが、何か引っかかるのでサーバーを探していたらswfだけ残っていた。
使い方としては、
１．keywordに検索キーワードを入れる。
２．categoryで検索カテゴリーを選択する。
３．searchボタンをクリックする。
４．しばらくするとプレートのような形で検索結果が出てくるので、どれかを選んでクリックする。
５．右側に詳細情報が出てくるので、buy nowボタンをクリックすると、amazonの購入ページが開く。
これを以下のような感じに修正していこうとしている頃にPCがだめになったような気がする。
なんだかとてもなつかしい。
それはさておき、MVCのMにあたるモデルを作る。
AmazonECSの一番新しいAPIのリファレンスは、これ（2008-8-19）らしい。
とりあえずItemSearchというオペレーションでXMLを返してもらう。
Flex3では、文字通りmx:Modelとかmx:XMLとかいうタグがあるのだが、これらはコンパイル時にフィックスしてしまうものなので、先々のことを考えて今回は使わない。
普通にXMLのインスタンスをモデルとしても良いが、カスタムでモデル用のクラスを作ってあるので、それを使用する。
外部ファイルのロードにはmx:HTTPServiceというタグを使うこともできるが、カスタムでXMLをロードするクラスが作ってあったので、こちらもそれを使う。
コードは以下のようになる。
xmldatamanagerが今回のモデル役になっている。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
applicationComplete="init()">
<mx:Script>
<![CDATA[
import jp.co.example.amazon.*;
import jp.co.example.core.data.*;
import jp.co.example.core.event.*;
import jp.co.example.core.load.*;
private var urlmanager:URLManager=new URLManager();
private var xmlloader:XMLLoader=new XMLLoader();
private var xmldatamanager:XMLDataManager=new XMLDataManager();
private function init():void{
urlmanager.init();
loadXML();
}
private function loadXML():void{
var urlstr:String=urlmanager.makeURLStr('ItemSearch',['Flash','Books']);
xmlloader.addEventListener(XMLLoader.LOAD_XML_COMPLETE,onLoadXML);
var xml:XML=<xml url=""/>;
xml.@url=urlstr;
xmlloader.loadXML(xml);
}
private function onLoadXML(ce:CustomEvent):void{
xmldatamanager.datasource=XML(ce._target.data);
xmldisp.text=xmldatamanager.datasource.toXMLString();
}
]]>
</mx:Script>
<mx:TextArea width="100%" height="100%" id="xmldisp"/>
</mx:Application>
注意点としては、flashplayer9からswfとそれが呼び出すXMLのドメインが違うと、XMLのダウンロードを拒否するようになっているので、swfと同じドメインにcfmファイルを作ってXMLを中継させている。
実行結果は以下のようになる。