In this exercise, you will use Flash Builder to display details about the employee that is selected from a DropDownList control (Figure 1). To do this you will both request and retrieve data from a server and use the Flash Builder form generation wizard.

Figure 1. Review your task for this exercise.

In this exercise, you will learn how to:

• Use the Data/Services wizard to connect to a data source
• Create a master/detail interface

Requirements

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

Flash Builder 4

• Try
• Buy

Sample files:

• ex4_06_starter.zip (ZIP, 28 KB)
• ex4_06_solution.zip (ZIP, 28 KB)

Prerequisite knowledge

• Exercise 1.1: Creating and skinning an application
• Exercise 4.4: Separating the model from the view

Using the Data/Services wizard to connect to a data source

In this section, you will use the Flash Builder Data/Services wizard to create a data service for this exercise.

If you have completed Exercise 4.4 and already have the EmployeeService data service created, you may skip to the Creating a master/detail interface section.

1. Download the ex4_06_starter.zip file if you haven't already and extract the file ex4_046_starter.fxp to your computer..
2. Open Flash Builder.
3. Import the ex4_06_starter.fxp file.

4. Select Data > Connect to Data/Service (see Figure 2).

   

   Figure 2. Select Data > Connect to Data/Service.

5. In the Connect to Data/Service dialog box, select HTTP (see Figure 3).

   

   Figure 3. Click HTTP to select that type of data service.

6. Click Next.
7. In the Operations section, change the Operation from Operation1 to getEmployees.
8. Change the URL value for the getEmployees operation to
   http://adobetes.com/f4iaw100/remoteData/employees.xml

9. In the Service details section, enter a Service name of EmployeeService. Note that the Service package value is created for you. Your Connect to Data/Services dialog box should appear as shown in Figure 4.

   

   Figure 4. Create a data operation and service name.

10. Click Finish.

    You should see the Data/Services view showing the EmployeeService data service (see Figure 5).

    

    Figure 5.View the EmployeeService data service in the Data/Services view.

11. Right-click the getEmployees() item and select Configure Return Type (see Figure 6).

    

    Figure 6. Right-click the getEmployees() operation and select Configure Return Type.

12. In the Configure Return Type dialog box be sure the radio button Auto-detect the return type from sample data is selected (see Figure 7).

    

    Figure 7. Leave the default settings within the Configure Return Type dialog box.

13. Click Next.

14. In the Auto-Detect Return Type dialog box, leave the default settings (see Figure 8).

    

    Figure 8. Leave the default settings for the Auto-Detect Return Type dialog box.

15. Click Next.

16. In the Return Type Detected Successfully dialog box, change the root of the properties returned by the operation to employee (see Figure 9).

    

    Figure 9. Select employee as the root of the getEmployees() return type.

17. Click Finish.

18. In the Data/Services view, expand the getEmployees() operation.

    You should see the properties of the employee data displayed (see Figure 10).

    

    Figure 10. View the data model by expanding the getEmployees() method.

Creating a master/detail interface

In this section, you will use a Flex framework component as a master control from which you will select an employee to display in a detailed view.

1. Switch to Design mode.

2. From the Components view Controls branch, drag a DropDownList control and drop it in the Design area (see Figure 11).

   

   Figure 11. Add a DropDownList control to the application.

3. From the Data/Services view, drag the getEmployees() operation and drop it on the DropDownList control (see Figure 12).

   

   Figure 12. Drag the getEmployees() operation and drop it on the DropDownList control. You should see the Bind To Data dialog box appear.

4. In the List properties section, select lastName from the Bind to field drop-down list (see Figure 13).

   

   Figure 13. Select lastName for the List control field to display.

5. Click OK.

6. Right-click the DropDownList control and select Generate Details Form (see Figure 14).

   

   Figure 14. Right-click the DropDownList control, then select Generate Details Form.

7. In the Generate Form dialog box, ensure Master-Detail is selected for the form and clear the Make form editable check box (see Figure 15).

   

   Figure 15. Clear the Make form editable check box.

8. Click Next.

9. In the Property Control Mapping dialog box, clear the lastName property to remove it from the form (see Figure 16).

   

   Figure 16. Remove the last name property from the Form.

10. Click Finish.

11. Move the generated form to the right of the DropDownList control (see Figure 17).

    

    Figure 17. Move the generated Form control.

12. Save the file and run the application.

13. Select an employee from the DropDownList control (see Figure 18).

    

    Figure 18. Select an employee from the DropDownList control.

    You should see the Form control populate the fields with the data for that employee (see Figure 19).

    

    Figure 19. See the Form control populate with information.

Test your knowledge

In this exercise, you learned how to use Flash Builder to generate a details form from a master control

What is the term for Flex control that determines which information populates the details form?

The term is Master control.

What do you need to do to make the operation returned by a data service more meaninful?

Configure the return type and tie the operation to a list control.

About the author