In this exercise, you will use parameters within an HTTPService object to request specific data (see Figure 1).

Figure 1. Filter the DataGrid control results based on parameters passed to the server from the DropDownList control.

In this exercise, you will learn how to:

• Use an HTTPService object to filter data

Requirements

In order to complete this tutorial, you need the following software and files:

Flash Builder 4

• Try
• Buy

Exercise files:

• ex4_05_starter.zip (ZIP, 20 KB)
• ex4_05_solution.zip (ZIP, 20 KB)

Prerequisite knowledge:

• Exercise 1.1: Creating and Skinning an application
• Exercise 4.3: Populating an application with data and handling faults

Using parameters to filter data

In this section, you will pass a parameter to the server to return filtered data.

1. Download the ex4_05_starter.zip file if you haven't already and extract the file ex4_05_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex4_05_starter.fxp file.
4. Open the EmployeeDirectory.mxml file.
5. Run the application.

6. Click the Get Employees Button control. You should see the DataGrid control populate with data (see Figure 2).

   

   Figure 2. Click the Get Employees button to populate the DataGrid control.

7. Return to the EmployeeDirectory.mxml file in Flash Builder.
8. Switch to Source mode.
9. Locate the DataGrid control.
10. Below the DataGrid control, add a DropDownList control with both opening and closing tags.

    ...
             <mx:DataGridColumn dataField="managerID"/>
          </mx:columns>
      </mx:DataGrid>
      
      <s:DropDownList>
      </s:DropDownList>
      
      <s:Button label="Get Employees" 
      click="employeeService.send()"/>
      ...

11. To the DropDownList control, assign locationList as the id property:

    <s:DropDownList id="locationList">
    
    </s:DropDownList>
    

12. Between the DropDownList tags, add a dataProvider property tag block:

    <s:DropDownList id="locationList">
    <s:dataProvider>
    
    </s:dataProvider>
    </s:DropDownList>
    

    You are going to populate this DropDownList control with static data. Remember that dataProvider properties for List-based controls commonly accept data in the form of an array.

13. Between the dataProvider tags, add an ArrayList control instance:

    <s:DropDownList id="locationList"> 
    <s:dataProvider>
    <s:ArrayList>
    
    </s:ArrayList>
    </s:dataProvider> 
    </s:DropDownList>

14. Within the ArrayList control, assign the value All using the String tag set:

    <s:DropDownList id="locationList"> 
        <s:dataProvider>
            <s:ArrayList>
            	<fx:String>All</fx:String>
            </s:ArrayList>
        </s:dataProvider> 
    </s:DropDownList>
    

15. Within the ArrayList tags, below the first string instance, assign the values San Francisco, Chicago, and Los Angeles using separate String instances for each.

    <s:DropDownList id="locationList"> 
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>All</fx:String>
                <fx:String>San Francisco</fx:String>
                <fx:String>Chicago</fx:String>
                <fx:String>Los Angeles</fx:String>
            </s:ArrayList>
        </s:dataProvider> 
    </s:DropDownList>

16. Locate the Declarations tags below the Declarations comment.
17. Between the nested HTTPService object, add a request tag set:

    <fx:Declarations>
    
    <s:HTTPService id="employeeService"
    url="http://adobetes.com/f4iaw100/remoteData/employeeData.cfm" 
    result="employeeService_resultHandler(event)" 
    fault="employeeService_faultHandler(event)">
    <s:request>
    
    </s:request>
    </s:HTTPService>
    
    </fx:Declarations>

18. Between the request tag set, create a location tag set:

    <s:HTTPService id="employeeService"
    url="http://adobetes.com/f4iaw100/remoteData/employeeData.cfm" 
    result="employeeService_resultHandler(event)" 
    fault="employeeService_faultHandler(event)">
    <s:request>
    	<location></location>
    </s:request>
    </s:HTTPService>

19. Bind the value of the location property to the selected data object of the DropDownList control, locationList.selectedItem:

    <s:HTTPService id="employeeService"
        url="http://adobetes.com/f4iaw100/remoteData/employeeData.cfm" 
        result="employeeService_resultHandler(event)" 
        fault="employeeService_faultHandler(event)">
        <s:request>
      	  <location>{locationList.selectedItem}</location>
        </s:request>
    </s:HTTPService>
    

20. Save the file and run the application.
21. Select Los Angeles from the DropDownList control.

22. Click the Get Employees button. You should see the DataGrid control appear populated with the employees located in the city selected in the DropDownList control (see Figure 3).

    

    Figure 3. Select Los Angeles from the DropDownList control and click the Get Employees button to populate the DataGrid control with employees from that location.

Test your knowledge

In this exercise, you learned how to use an HTTP service request to pass parameters to return filtered data.

What HTTPService property can be used to send data to the server?

The request property.

What property can you use to populate data in List based controls?

The dataProvider property.

What is the parent of the location tag?

The request tag.

About the author