Flex Tip of the Day #6: using REST services with Flex

To access REST services with Flex, you need to use the <mx:HTTPService> tag 

e.g. if the url for the REST service is : http://www.restservices.com/
and the required parameters and their values are:
paramA – valueA
paramB – valueB

you can call the service in the following manner:

<mx:HTTPService>
    <mx:request>
           url=”http://www.restservices.com/“

         <paramA>valueA</paramA>
         <paramB>valueB</paramB>
    </mx:request>
</mx:HTTPService> 
 

Have a look on the following example:  

<?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”>
       
    <!–
       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>