一年ほど前に「Flex2でFlickrの写真を取得してみる」というブログを書きました。それ以来Flexとはご無沙汰してしまった私なんですが、久しぶりにまた触ってみようと思いその続きを書いてみたいと思います。
まずは、前回のコードがFlex3で動作するのかどうか確認するためにコンパイルしてみたところ、使用しているライブラリの一つであるas3corelibによってコンパイル時に「 エラー: 型が見つからないか、コンパイル時定数ではありません : File。」という内容のエラーが出ました。
いろいろググってみたところ、こちらの「corelibをFlex3向けにコンパイルしてJSONを使う。」サイトにて対処方法が記載されていたのでこちらを参考に、エラーの該当箇所を削除しライブラリをコンパイルし直すということで、やってみたところ無事コンパイルすることができ、Flex3でも問題なく動作するようになりました。
そんなことで、次は前回から一歩進み画像をクリックしたときにその画像を表示するようなコードを追加したいと思います。
flickr.asに以下のコードを追加します。
import mx.managers.PopUpManager;
public function onClickImg(e:Event):void
{
//mx.controls.Alert.show(e.target.parent.source);
var vp:viewPhoto =
viewPhoto(PopUpManager.createPopUp(this, viewPhoto, false));
vp.url = e.target.parent.source;
PopUpManager.centerPopUp(vp);
}
flickr.mxmlには、画像を表示する部分のコードにclickプロパティを追加します。
<mx:Image width="100" height="88" source="http://static.flickr.com/{data.server}/{data.id}_{data.secret}_t.jpg" verticalAlign="middle" horizontalAlign="center" click="outerDocument.onClickImg(event)"/>
そして、ポップアップウィンドウのためのmxml（viewPhoto.mxml）を作成します。
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" showCloseButton="true" close="mx.managers.PopUpManager.removePopUp(this)" width="200" height="200" layout="absolute" creationComplete="setUrl()">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.managers.*;
[Bindable]
public var url:String;
public function setUrl():void {
photo.source = url;
}
]]>
</mx:Script>
<mx:Image id="photo" width="100" height="88" source="" verticalAlign="middle" horizontalAlign="center" />
</mx:TitleWindow>
これでコンパイルすると以下のようになります。
Flickrから写真を取得し、その写真をクリックするとポップアップが表示され取得した写真が表示されます。ポップアップウィンドウに同じ写真が表示されるだけでなので、出来れば大きな写真を表示したいとか、どうせなら写真の情報も一緒に表示したいとかまだまだ改善点はあるので、次回はその辺も作り込めるように勉強したいと思います。