Flexでウェブアルバムが作りたい!!(5)
移転しました。
user_idとapi_keyは各自のものに置き換えてください。そして、かなりコードはつぎはぎだらけで汚いですがなんとか動いています。
なんとか試行錯誤していくうちに、
- EventListenerの概念
- データバインディング
- itemRenderer
あたりがちょっとだけわかってきた気がします。
今後の課題としては、やはりポップアップ。
これがくせ者で、なかなか思い通りにデータを連携させることができません。
このデータの連携がうまく行かないせいで、卒論にも手がつかず・・・・
以下は、そのときのソースです。
FlickrSearch.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" initialize="init()"> <mx:Script> <![CDATA[ import flash.events.Event; import flash.events.IOErrorEvent; import flash.net.URLLoader; import flash.net.URLLoaderDataFormat; import flash.net.URLRequest; import mx.collections.ArrayCollection; //NSID、api_keyを格納 private var user_id:String = "1234567@1234"; private var api_key:String = "1234567890123456789"; private var tags:String = "apple"; private var loop:int = 50; //返り値のXMLを格納するXMLオブジェクトを生成 private var myXML:XML; [Bindable] public var ArrayURL:ArrayCollection; private function init():void{ //http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=b2e2bdd12587da70a37b430e1f09c2a3&user_id=35571855%40N06 var furl:String = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=" + api_key + "&tags=" + tags; var myURLReq:URLRequest = new URLRequest(furl); //リクエスト発行します var myXMLLoader:URLLoader = new URLLoader(); myXMLLoader.dataFormat = URLLoaderDataFormat.TEXT; myXMLLoader.addEventListener(Event.COMPLETE,setPhotoXML); myXMLLoader.addEventListener(IOErrorEvent.IO_ERROR,isError); myXMLLoader.load(myURLReq); } private function setPhotoXML(e:Event):void{ //読み込んだ後の処理を記述 myXML = new XML(e.target.data); ArrayURL = new ArrayCollection(); for(var i:int=0;i<loop;i++){ var photo_id:String = myXML.photos.photo[i].@id; var farm_id:String = myXML.photos.photo[i].@farm; var server_id:String = myXML.photos.photo[i].@server; var secret:String = myXML.photos.photo[i].@secret; var size:String = "m" var photoURL:String = "http://farm" + farm_id + ".static.flickr.com/" + server_id + "/" + photo_id + "_" + secret + "_" + size +".jpg" //var photoURL_m:String = "http://farm" + farm_id + ".static.flickr.com/" + server_id + "/" + photo_id + "_" + secret + "_" + "m" +".jpg" ArrayURL.addItem(photoURL); } } //例外処理 private function isError(e:IOErrorEvent):void{ trace("failed to Load photos info"); } ]]> </mx:Script> <mx:Panel width="880" height="650" layout="absolute" title="JOY Album" id="AlbumPanel" horizontalCenter="0" verticalCenter="-2"> <mx:TileList width="850" height="600" dataProvider="{ArrayURL}" itemRenderer="PhotoWindow" id="item" borderStyle="solid"> </mx:TileList> </mx:Panel> </mx:Application>
<?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="250" height="250" horizontalAlign="center" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"> <mx:Script> <![CDATA[ import mx.core.Application; import mx.controls.Label; import mx.controls.Alert; import mx.managers.PopUpManager; import mx.controls.Image; import flash.events.Event; [Bindable] public var thumbnil:Image; private function click():void{ //var pop:PopUpWIndow = PopUpWIndow(PopUpManager.createPopUp(this,PopUpWIndow,false)); //PopUpManager.centerPopUp(pop); } private function closePopup():void{ PopUpManager.removePopUp(this); } ]]> </mx:Script> <mx:Image source="{data}" id="photoIMG" scaleContent="true" themeColor="#009DFF" click="click()"></mx:Image> </mx:VBox>
<?xml version="1.0" encoding="utf-8"?> <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" showCloseButton="true" close="PopUpManager.removePopUp(this);" initialize="showImg(event)"> <mx:Script> <![CDATA[ import mx.managers.PopUpManager; [Bindable] public var bigImg:String; private function processLogin():void { // Check credentials (not shown) then remove pop up. PopUpManager.removePopUp(this); } private function showImg(event:Event):void{ //bigImg = event.target.pop.thumbnil; } ]]> </mx:Script> <mx:Image source="{}"> </mx:Image> <mx:Label text="{}"> </mx:Label> </mx:TitleWindow>