Exercise 3.8: Creating a master/detail interface with a wizard

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

In this exercise, you will learn how to:

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

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

1. Download the ex3_08_starter.zip file if you haven't already and extract the file ex3_08_starter.fxp to your computer..
2. Open Flash Builder.
3. Import the ex3_08_starter.fxp file.
4. Select Data > Connect to Data/Service (see Figure 2).

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

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

10. Click Finish.

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

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

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

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

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

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

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. Within the Package Explorer view, open the ex3_08_starter.mxml file.
2. Switch to Design mode.
3. From the Components view Controls branch, drag a DropDownList control and drop it in the Design area under the Employee Portal: Employee Information header (see Figure 11).

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

You should see the Bind To Data dialog box appear.

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

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

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

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

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

13. Save the file and run the application.
14. Select an employee from the DropDownList control (see Figure 18).

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

In this exercise you learned how to use Flash Builder to generate a details form from a master control. In the following exercises you learn about page layout and animation.