<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundColor="#FFFFFF"
    backgroundAlpha="0"
    horizontalAlign="left"
    verticalGap="15" horizontalGap="15">

	  <mx:Script>
		<![CDATA[
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;
            import mx.events.ListEvent;

            [Bindable]
            private var photoFeed:ArrayCollection = new ArrayCollection();

            private function requestPhotos():void {
                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;
            }

            //show text message when user selects image
            private function showMessage(event:Event):void {
                message.text = "You selected: " + event.currentTarget.selectedItem.title + "\nUploaded by: " +
 event.currentTarget.selectedItem.credit;
			}
         ]]>
    </mx:Script>

	<!-- photo service -->
	 <mx:HTTPService id="photoService"
        url="http://api.flickr.com/services/feeds/photos_public.gne"
        result="photoHandler(event)" />

    <!-- search -->
    <mx:Form>
    	<mx:FormItem label="Search Term"
    		direction="horizontal">
		    <mx:TextInput id="searchTerms" />
		    <mx:Button label="Search"
				click="requestPhotos()" />
    	</mx:FormItem>
    </mx:Form>

	<!-- result, data is passed to the itemRenderer by Flex through the data property -->
	<mx:TileList id="mylist"
		labelField="thumbnail"
		dataProvider="{photoFeed}"
		width="600" height="200"
		paddingTop="25" left="5"
		itemClick="showMessage(event)">
		<mx:itemRenderer>
			<mx:Component>
                <mx:VBox width="125" height="125"
                    paddingRight="5" paddingLeft="5"
                    horizontalAlign="center">
                    <mx:Image
                        height="75" width="75"
                        source="{data.thumbnail.url}"/>
                </mx:VBox>
            </mx:Component>
		</mx:itemRenderer>
	</mx:TileList>

	<mx:Text id="message"
		paddingTop="20" />

</mx:Application>