Exercise 1.4: Adding data to your application

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

In this exercise you will learn how to:

• View the sample data
• Retrieve the sample data
• Use the Network Monitor to confirm data retrieval
• Display data in a control

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.

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).

6. 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.

7. 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.

8. 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.

9. Save the file.

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).

2. Click the Enable Monitor button (see Figure 6).

3. Click the Run button to run the application,You will see the browser open.
4. Return to Flash Builder and double-click the Network Monitor tab to maximize the view.
5. Select the recording of the HTTPService call (see Figure 7).

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."

6. On the right side of the window, click the Response tab.
7. 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).

8. Double-click the Network Monitor tab to minimize the view.

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.

4. Add the labelField property with a value of lastName to display that property in the control:

5. Save the file and run the application.
6. Click the DropDownList control to see it is populated with employee last names (see Figure 9).

7. Return to Flash Builder.
8. Within the Form block, locate the FormItem container that nests the phone TextInput control.
9. 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.

10. Save the file and run the application.
11. 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).

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.