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

 

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.
 
Review your task for this exercise.

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

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).
Select Data > Connect to Data/Service.
Figure 2. Select Data > Connect to Data/Service.
  1. In the Connect to Data/Service dialog box, select HTTP (see Figure 3).
Click HTTP to select that type of data service.
Figure 3. Click HTTP to select that type of data service.
  1. Click Next.
  2. In the Operations section, change the Operation from Operation1 to getEmployees.
  3. Change the URL value for the getEmployees operation to:
    http://adobetes.com/f45iaw100/remoteData/employees.xml.
  4. 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.
Create a data operation and service name.
Figure 4. Create a data operation and service name.
  1. Click Finish.
    You should see the Data/Services view showing the EmployeeService data service (see Figure 5).
     
View the EmployeeService data service in the Data/Services view.
Figure 5.View the EmployeeService data service in the Data/Services view.
  1. Right-click the getEmployees() item and select Configure Return Type (see Figure 6).
Right-click the getEmployees() operation and select Configure Return Type.
Figure 6. Right-click the getEmployees() operation and select Configure Return Type.
  1. 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).
Leave the default settings within the Configure Return Type dialog box.
Figure 7. Leave the default settings within the Configure Return Type dialog box.
  1. Click Next.
  2. In the Auto-Detect Return Type dialog box, leave the default settings (see Figure 8).
Leave the default settings for the Auto-Detect Return Type dialog box.
Figure 8. Leave the default settings for the Auto-Detect Return Type dialog box.
  1. Click Next.
  2. In the Return Type Detected Successfully dialog box, change the root of the properties returned by the operation to employee (see Figure 9).
Select employee as the root of the getEmployees() return type.
Figure 9. Select employee as the root of the getEmployees() return type.
  1. Click Finish.
  2. In the Data/Services view, expand the getEmployees() operation.
    You should see the properties of the employee data displayed (see Figure 10).
     
View the data model by expanding the getEmployees() method.
Figure 10. View the data model by expanding the getEmployees() method.

 
Create 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. 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).
Add a DropDownList control to the application.
Figure 11. Add a DropDownList control to the application.
  1. From the Data/Services view, drag the getEmployees() operation and drop it on the DropDownList control (see Figure 12).
Drag the getEmployees() operation and drop it on the DropDownList control.
Figure 12. Drag the getEmployees() operation and drop it on the DropDownList control.
    You should see the Bind To Data dialog box appear.
     
  1. In the List properties section, select lastName from the Bind to field drop-down list (see Figure 13).
Select lastName for the List control field to display.
Figure 13. Select lastName for the List control field to display.
  1. Click OK.
  2. Right-click the DropDownList control and select Generate Details Form (see Figure 14).
Right-click the DropDownList control, then select Generate Details Form.
Figure 14. Right-click the DropDownList control, then select Generate Details Form.
  1. 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).
Clear the Make form editable check box.
Figure 15. Clear the Make form editable check box.
  1. Click Next.
  2. In the Property Control Mapping dialog box, clear the lastName property to remove it from the form (see Figure 16).
Remove the last name property from the Form.
Figure 16. Remove the last name property from the Form.
  1. Click Finish.
  2. Move the generated form to the right of the DropDownList control (see Figure 17).
Move the generated Form container.
Figure 17. Move the generated Form container.
  1. Save the file and run the application.
  2. Select an employee from the DropDownList control (see Figure 18).
Select an employee from the DropDownList control.
Figure 18. Select an employee from the DropDownList control.
You should see the Form container populate the fields with the data for that employee (see Figure 19).
 
See the Form container populate with information.
Figure 19. See the Form container populate with information.
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.
 
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.