<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="100%" height="100%" viewSourceURL="srcview/index.html">
    
    <!--
        Yahoo Image Search REST Api Adobe Flex example by Prayank Swaroop is licensed under a Creative Commons Attribution 3.0 License.
        Article on this example: http://www.prayank.net/flexblog/index.php/2007/06/20/flex-yahoo-rest-api-sample/
    -->
    
    <!--
       We want to use the Yahoo! Image Search REST API, for this we need to use a HTTPService
       in Flex. 
       
       The description of the Yahoo! Image Search API is available here:
       http://developer.yahoo.com/search/image/V1/imageSearch.html
       
       For a REST API, we need its url.
       And we need to pass it the operational parameters to get our results. In case of Yahoo! Image Search API
       there are two required parameters:
       
       appid - a developer needs to get this id from Yahoo!, you can get it for you application here:
                   http://developer.yahoo.com/faq/index.html#appid
                   
       query - query string is the search input string for finding the images. In our case, we will take this
                   as the text in the TextInput. 
    -->
    <mx:HTTPService id="yahoo_image_search"
                                    url="http://search.yahooapis.com/ImageSearchService/V1/imageSearch">
        <mx:request>
            <appid>get your appid from Yahoo</appid>
            <query>{input.text}</query>
        </mx:request>
    </mx:HTTPService>

    <mx:Panel width="100%" height="100%" layout="vertical" title="Yahoo Image Search!">
        <mx:HBox width="100%">
            <mx:TextInput width="303" id="input"/>
            <mx:Button label="Search" click="{yahoo_image_search.send()}"/>
        </mx:HBox>
        <mx:Label text="Click on a datagrid row to see the full image, in the lower half of the screen"/>
        
        <!-- 
            The result return by the Yahoo! Image Search API is in a XML format. Hence, the Flex Datagrid
            can easily parse this information, and automagically display it in the datagrid. 
         -->
        <mx:DataGrid width="100%" height="50%" id="datagrid" dataProvider="{yahoo_image_search.lastResult.ResultSet.Result}"/>
        
        <mx:Canvas width="100%" height="50%">
            <mx:Image x="10" y="10" source="{datagrid.selectedItem.Thumbnail.Url}"/>
        </mx:Canvas>
    </mx:Panel>
    
</mx:Application>