<?xml version="1.0" encoding="utf-8"?>
<loc:TileListApp xmlns:mx="http://www.adobe.com/2006/mxml"
    styleName="basic-app" xmlns:loc="*">
    <mx:Style source="tilelist.css" />

    <!-- 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"
        styleName="basic-style-list"
        labelField="thumbnail"
        dataProvider="{photoFeed}"
        itemClick="showMessage(event)">
        <mx:itemRenderer>
            <mx:Component>
                <mx:VBox styleName="basic-vbox">
                    <mx:Image styleName="basic-image"
                        source="{data.thumbnail.url}"/>
                </mx:VBox>
            </mx:Component>
        </mx:itemRenderer>
    </mx:TileList>

    <mx:Text id="textMessage" styleName="basic-text" />

</loc:TileListApp>
