In this exercise, you will use the Flash Builder Data/Services wizard to connect to a data source and retrieve data for your application.

In Model-View-Controller (MVC) terms, this data is your model and you will bind it to two controls: a DataGrid and a List control (see Figure 1). These two controls are your view. The controller is the main application file, which contains the business logic to manage and display the data.

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
• Define the data type for the returned data
• Use Flex controls to view the data

Requirements

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

Flash Builder 4

• Try
• Buy

Sample files:

• ex4_04_starter.zip (ZIP, 20 KB)
• ex4_04_solution.zip (ZIP, 28 KB)

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

In this section, you will use the Flash Builder Data/Services wizard to connect to a website to retrieve XML data.

1. Download the ex4_04_starter.zip file if you haven't already and extract the file ex4_04_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex4_04_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.

Defining the data type for the returned data

In this section, you will define the data type for the data that is returned from the getEmployees() operation.

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

   

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

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

3. Click Next.

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

5. Click Next.

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

7. Click Finish.

8. Within 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 getEmployees() return type and properties by expanding the getEmployees() method.

Using Flex controls to view the data

In this section, you will use two Flex framework controls to view the returned data. Both controls will access the same data in the model but will display different data in each of their views.

1. Switch to Design mode.

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

   

   Figure 11. Add a DataGrid control to the application.

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

   

   Figure 12. Drag the getEmployees() operation and drop it on the DataGrid control.

4. Save the file and run the application.

   You should see the DataGrid control is populated with employee data (see Figure 13).

   

   Figure 13. Run the application to see the DataGrid control is populated with employee data.

5. Return to Flash Builder.

6. From the Components view Controls branch, drag a paged List control and drop it below the DataGrid control (see Figure 14).

   

   Figure 14. Drag a paged List control and drop it below the DataGrid control.

7. From the Data/Services view, drag the getEmployees() operation and drop it on the paged List control (see Figure 15).

   

   Figure 15. Drag the getEmployees() operation and drop it onto the paged List control.

   You should see the Bind To Data dialog box.

8. In the Bind To Data dialog box, click the Existing call result radio button and leave the selected item as the getEmployeesResult.

9. In the List properties section, select firstName from the drop-down list (see Figure 16).

   

   Figure 16. Select firstName for the List control field to display.

10. Click OK.

11. With the paged List control selected, use the Properties view to assign a Width of 75 (see Figure 17).

    

    Figure 17. Assign the paged List control a width of 75.

12. Save the file and run the application.

    You should see both the DataGrid control and List control are populated with data. Note that the List control only displays the employee's first name.

    

    Figure 18. Run the application to see both controls being used to view the data within the model.

Test your knowledge

In this exercise, you learned how to use Flash Builder to model data and view it with Flex controls.

What Flash Builder view is used to show data services?

The Data/Services view.

What is the easiest way to apply a data operation to a Flex control.

Dragging it from the Data/Services view and dropping it on the control.

What must be done before a data operation can be used effectively?

The return type must be configured for that operation.

About the author