<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" 
    viewSourceURL="sources/flickrDemo/srcview/index.html">

    <mx:states>
        <mx:State name="RESULTS">
            <mx:SetProperty target="{panel1}" name="width" value="647"/>
            <mx:SetProperty target="{panel1}" name="height" value="392"/>
            <mx:SetProperty target="{vs}" name="visible" value="true"/>
            <mx:SetProperty target="{controlbar1}" name="visible" value="true"/>
        </mx:State>
    </mx:states>
    
    <mx:HTTPService id="myService" url="http://api.flickr.com/services/rest/?method=flickr.photos.search"
        showBusyCursor="true" resultFormat="e4x" result="currentState='RESULTS'">
        
        <mx:request xmlns="">
            <api_key>7beb3afd9e417e3dbf7a17d73616ce0f</api_key>
            <tags>{queryString.text}</tags>
        </mx:request>
        
    </mx:HTTPService>
    
    <mx:Panel title="Flickr Demo" layout="absolute" height="129" width="275" id="panel1" resizeEffect="Resize">
        
        <mx:TextInput x="10" y="10" id="queryString"/>
        
        <mx:Button x="178" y="10" label="Search" click="myService.send()"/>
        
        <mx:ViewStack id="vs" left="10" top="40" bottom="10" right="10" visible="false">
            
            <mx:Canvas label="View 1" width="100%" height="100%">
            
                <mx:DataGrid width="100%" height="100%" dataProvider="{myService.lastResult.photos.photo}">
                    
                </mx:DataGrid>
                
            </mx:Canvas>
            
            <mx:Canvas label="View 2" width="100%" height="100%">
            
                <mx:TileList minHeight="0" width="100%" height="100%" rowHeight="150" columnWidth="150" dataProvider="{myService.lastResult.photos.photo}">
                
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:VBox horizontalAlign="center" verticalAlign="middle">
                                <mx:Image width="100" height="100"
                                    source="http://farm{data.@farm}.static.flickr.com/{data.@server}/{data.@id}_{data.@secret}.jpg"/>
                            </mx:VBox>
                        </mx:Component>
                    </mx:itemRenderer>
                
                </mx:TileList>
                
            </mx:Canvas>
            
        </mx:ViewStack>
        
        <mx:ControlBar horizontalAlign="right" visible="false" id="controlbar1">
            <mx:LinkBar x="548" y="360" dataProvider="{vs}">
            </mx:LinkBar>
        </mx:ControlBar>
        
    </mx:Panel>
    
</mx:Application>