- Requirements
Prerequisite knowledge Required products Sample files
 
Flash Builder 4.7 Premium (Download trial)
User level    
Beginning    

 

In this exercise you will use an XML file to populate the Employee Portal: Vehicle Request Form with dynamic data (see Figure 1).
 
Review your task.
Figure 1. Review your task.
In this exercise you will learn how to:
 

 
View the sample data

 

In this section you will view the data source for this exercise.
 
  1. Open a browser and navigate to http://adobetes.com/f45iaw100/remoteData/employees.xml.
    You should see the employees.xml file displayed in the browser (see Figure 2). Note the structure of the file consists of multiple employee nodes nested within an employees node. Each employee node contains data for a single employee.
     
    For this example, employees.xml is a static XML file. However, if you are using an application server, you can simply call a dynamically generated XML file using the same techniques outlined here.
     
View the employees.xml file in a browser.
Figure 2. View the employees.xml file in a browser.

 
Retrieve the sample data

 

In this section you will use an HTTPService object to connect to the employees.xml you viewed in the previous section.
 
  1. Open Flash Builder.
  2. Download and expand the ex1_04_starter.zip file if you haven't already and import the ex1_04_starter.fxp project file into Flash Builder.
  3. Open the ex1_04_starter.mxml file.
  4. Locate the Declarations block.
  5. With your cursor between the opening and closing Declarations tags, press CTRL+Space to invoke the content assist tool and show code templates. Type HTTPS and select the HTTPService template (see Figure 3).
Invoke the content assist tool and select the HTTPService template.
Figure 3. Invoke the content assist tool and select the HTTPService template.
  1. To the HTTPService object template, change the id property’s to employeeService and change the url property’s with a value of http://adobetes.com/f45iaw100/remoteData/employees.xml.Remove the fault, result, resultFormat, and showBusyCursor properties from your code.
<fx:Declarations> <s:HTTPService id="employeeService" url="http://adobetes.com/f45iaw100/remoteData/employees.xml"/> </fx:Declarations>
  1. Within the opening Application tag, use the content assist tool to generate a creationComplete event for the application (see Figure 4).
    To use the content assist tool, start by typing the name of the property or event desired, then use the content assist window to select the desired property or event and either double-click it with the mouse or press the Enter key.
     
Use the content assist tool to generate a creationComplete event for the application.
Figure 4. Use the content assist tool to generate a creationComplete event for the application.
  1. Give the creationComplete event, a value of employeeService.send().
    The employeeService.send()method will tell the HTTPService object to retrieve the XML data from the specified URL.
     
  2. Save the file.

 
Use the Network Monitor to confirm data retrieval

 

Note: In order to complete this part of the exercise, you must have Flash Builder Premium Edition installed. If you have Flash Builder Standard Edition installed, skip this section and continue with the next section. If you want to download and install a trial version of Flash Builder Premium Edition, be sure to 1) back up your existing workspace and projects, 2) uninstall Flash Builder Standard Edition, and then 3) install the trial version of Flash Builder Premium Edition. To compare the Standard Edition with the Premium Edition, check out the Upgrade Details page.
 
In this section you will use the Flash Builder 4.5 Network Monitor to view the data returned from the HTTPService call.
 
  1. Open the Network Monitor view (see Figure 5).
Open the Network Monitor view.
Figure 5.Open the Network Monitor view.
  1. Click the Enable Monitor button (see Figure 6).
Turn on the Network Monitor.
Figure 6. Turn on the Network Monitor.
  1. Click the Run button to run the application,You will see the browser open.
  2. Return to Flash Builder and double-click the Network Monitor tab to maximize the view.
  3. Select the recording of the HTTPService call (see Figure 7).
  4. Note: If the workspace you are using has multiple projects open, you may not see the recording in the Network Monitor. Close all other projects and enable the monitor again for your current project and make sure the message in the Network Monitor view reads, "Enabled for project 'ex1_04_starter."
     
Select the HTTPService recording.
Figure 7. Select the HTTPService recording.
  1. On the right side of the window, click the Response tab.
  2. Expand the Response body tree to reveal the employee data.
    Note that the data structure displayed in the Network Monitor matches that of the employees.xml file you viewed in the first section (see Figure 8).
     
Expand the Response body tree to reveal the employee data.
Figure 8. Expand the Response body tree to reveal the employee data.
  1. Double-click the Network Monitor tab to minimize the view.

 
Display data in a control

 

In this section you will use the HTTPService object to populate a Flex control with data.
 
  1. Return to the ex1_04_starter.mxml file.
  2. Locate the DropDownList instance block within the first FormItem container.
  3. To the DropDownList control, add a dataProvider property and bind it to the value employeeService.lastResult.employees.employee.
    The lastResult property of the employeeService HTTPService object accesses the array of data you viewed in the Network Monitor. The appended employees.employee statement uses dot notation to drill down into the XML data to set the employee object as the data to be displayed in the DropDownList control.
     
<s:Form x="10" y="70"> <s:FormItem label="Employee:"> <s:DropDownList id="dropDownList" dataProvider="{employeeService.lastResult.employees.employee}"/> </s:FormItem> ...
  1. Add the labelField property with a value of lastName to display that property in the control:
... <s:DropDownList id="dropDownList" dataProvider="{employeeService.lastResult.employees.employee}" labelField="lastName"/> ...
  1. Save the file and run the application.
  2. Click the DropDownList control to see it is populated with employee last names (see Figure 9).
View the data in the DropDownList control.
Figure 9. View the data in the DropDownList control.
  1. Return to Flash Builder.
  2. Within the Form block, locate the FormItem container that nests the phone TextInput control.
  3. To the TextInput control, add the text property and bind it to the value dropDownList.selectedItem.phone.
    The selectedItem property of the DropDownList control is used to reference the selected object within the control. In this case, it refers to the selected employee object. Appending .phone to the binding specifies the selected employee's phone value for display in the TextInput control.
     
... <s:FormItem label="Office Phone:"> <s:TextInput id="phone" text="{dropDownList.selectedItem.phone}"/> </s:FormItem> ...
  1. Save the file and run the application.
  2. Select an employee from the DropDownList control.
    You should see the Office Phone field populate with the selected employee's phone number (see Figure 10).
     
Select an employee in the DropDownList control to see the Office Phone field populate with the employee's phone number.
Figure 10. Select an employee in the DropDownList control to see the Office Phone field populate with the employee's phone number.
In this exercise you learned how to use an XML file to populate a form with dynamic data. In the next exercise you learn that you can use layout classes with any Spark container to configure the way Flex components appear on the screen.
 
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.