• SIS Lab
  • >
  • Blog
  • >
  • Flexでウェブアルバムが作りたい！！(2)

Flexでウェブアルバムが作りたい！！(2)

更新日:2018.07.28 作成日:2009.12.25
#Flex

先日、作ろうと思ったモチベーションを書いたわけですけど、そのときのソースコード。

url="http://api.flickr.com/services/feeds/photos_public.gne?id=hogehoge@hoge"

hogehoge@hogeの部分は、自分のFlickrのidに置き換えてください。

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?id=hogehoge@hoge"
        result="photoHandler(event)" />

    <mx:HBox>
        <mx:Label text="Flickr tags or search terms:" />
        <mx:TextInput id="searchTerms" />
        <mx:Button label="Search"
            click="requestPhotos()" />
    </mx:HBox>

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

</mx:Application>

FlickrThumbnail.mxml

新規作成、mxmlコンポーネントから作成します

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
    width="125" height="125"
    horizontalAlign="center"
    paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">

    <mx:Image
        width="75" height="75"
        source="{data.thumbnail.url}" />

    <mx:Text width="100" text="{data.credit}" />

</mx:VBox>

以下のページを参考にさせてもらいました

Related contents