Getting Started with Flex 2 > Lessons > Use Web Services > Insert a WebService component

Insert a WebService component

You use the Flex WebService component to access a SOAP-based web service and retrieve information about recent blog posts.

1. In Source mode, enter the following <mx:WebService> tag immediately after the opening <mx:Application> tag:

   <mx:WebService id="wsBlogAggr" 
       wsdl="http://weblogs.macromedia.com/mxna/webservices/mxna2.cfc?wsdl"
       useProxy="false">
   </mx:WebService>
   

   The wsdl property specifies the location of the WSDL file for the web service. As of this writing, the location was still valid, but you should check to make sure it hasn't changed. You can find the latest WSDL file location on the developers page at www.adobe.com/go/mxna_developers, under Web Services.

   NOTE

   If you want, you can also use the following alias in the component: http://www.adobe.com/go/flex_mxna_wsdl.

   The useProxy property specifies that you don't want to use a proxy on a server. For more information, see Review your access to remote data sources.

2. Specify the parameters to pass to the web service method.

   According to the API documentation, the getMostPopularPosts method takes the following required parameters:

   • daysBack specifies the number of days you want to go back.
   • limit specifies the total number of rows you want returned.

   To specify these parameters, enter the following tags between the opening and closing <mx:WebService> tags:

   <mx:operation name="getMostPopularPosts">
       <mx:request>
           <daysBack>30</daysBack>
           <limit>{cbxNumPosts.value}</limit>
       </mx:request>
   </mx:operation>
   

   The name property of an <mx:operation> tag must match the web service method name.

   You use a constant for the value of the daysBack parameter, but you bind the value of the limit parameter to the value of the selected item in the cbxNumPosts ComboBox control. You want the user to specify the number of posts to list.

   The next step is to prompt the application to call the web service method. You decide the method should be called when the ComboBox control changes in response to the user selecting an option.

3. In the <mx:ComboBox> tag, add the following change property (in bold):

   <mx:ComboBox x="30" y="25" id="cbxNumPosts"
       change="wsBlogAggr.getMostPopularPosts.send()"> 
   

   The final application code should look like the following:

   <?xml version="1.0" encoding="utf-8"?>
   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
       <mx:WebService id="wsBlogAggr" 
           wsdl="http://weblogs.macromedia.com/mxna/webservices/mxna2.cfc?wsdl"
           useProxy="false">
           <mx:operation name="getMostPopularPosts">
               <mx:request>
                   <daysBack>30</daysBack>
                   <limit>{cbxNumPosts.value}</limit>
               </mx:request>
           </mx:operation>
       </mx:WebService>
       <mx:Panel x="10" y="10" width="475" height="400" layout="absolute"
           title="Most Popular Posts">
   
           <mx:ComboBox x="30" y="25" id="cbxNumPosts" change="wsBlogAggr.getMostPopularPosts.send()">
               <mx:Object label="Top 5" data="5" />
               <mx:Object label="Top 10" data="10" />
               <mx:Object label="Top 15" data="15" />
           </mx:ComboBox>
           
           <mx:DataGrid x="30" y="75" id="dgTopPosts" width="400">
               <mx:columns>
                   <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
                   <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
                   <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
               </mx:columns>
           </mx:DataGrid>
   
           <mx:LinkButton x="30" y="250" 
               label="Select an item and click here for full post"/>
       </mx:Panel>
       
   </mx:Application>
   

   When the user selects an option in the ComboBox control, the getMostPopularPosts method of the wsBlogAggr WebService component is called. The method's parameters are specified in the WebService component's <mx:operation> tag. The limit parameter is set at run time depending on the option the user selects.

The application is ready to call the web service. The next step is to display the data returned by the web service.

Flex 2.01