Exercise 3.7: Using two-way binding

In this exercise you will populate a ColumnChart control bound to value object instances stored in the employees ArrayCollection instance. You will also create a two-way binding. As you change the value in the Form container, you will update the data in the ArrayCollection object, which will immediately update the ColumnChart control (see Figure 1).

In this exercise, you will learn how to:

• Make ActionScript class properties bindable
• Bind the data model to a chart
• Create a details form
• Display chart data in a Form container
• Create a two-way binding

In this section, you will make the Employee ActionScript class bindable.

1. Download the ex3_07_starter.zip file if you haven't already and extract the ex3_07_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex3_07_starter.fxp file.
4. From the Package Explorer view, open the Employee.as file in the valueObjects package.
5. Use the content assist tool to make the Employee class definition bindable by adding a Bindable metadata tag.
   

6. Save the file.

In this section, you will use a chart to display employee salary data.

1. Open the ex3_07_starter.mxml file.
2. Switch to Design mode.
3. From the Components view Charts branch, drag a ColumnChart control and drop it below the header text (see Figure 2).

4. Within the Create Chart dialog box, type employeeChart for the ID.
5. Click the check box next to Include legend to disable this option.

   Your Create Chart dialog box should appear as shown in Figure 3.

6. Click OK.
7. Switch to Source mode.
8. Below the UI components comment, locate the ColumnChart control tags.
9. To the opening ColumnChart tag, bind employees as the dataProvider.

10. To the nested series tag set, assign salary as the yfield.

11. Save the file and run the application.

    You should see the ColumnChart control populated with the employee salary data (see Figure 4).

In this section, you will create a form that will be used to display information about the employee item selected in the ColumnChart control.

1. Return to Flash Builder and switch to Design mode.
2. From the Components view Layout branch, drag a Form container and drop it below the ColumnChart control (see Figure 5).

3. In the Insert Form dialog box, click OK to accept the default values (see Figure 6).

4. From the Components view's Controls branch, drag four instances of the TextInput control and drop them into the Form container (see Figure 7).

5. Switch to Source mode.
6. Save the file and run the application.

   You should see the ColumnChart control is populated with information and the Form container is empty (see Figure 8).

In this section you will use an event handler function to populate the Form container based on the item selected from the ColumnChart control.

1. Return to Flash Builder.
2. To the ColumnChart control, use the content assist tool to assign the itemClick event (see Figure 9).

3. Use the content assist tool to generate an ItemClick handler function for the itemClick event (see Figure 10).

4. Locate the Script block.
5. Within the Script block, below the employees variable declaration, type selectedEmployee and press Ctrl+1 to invoke the quick assist tool and select the Create instance variable 'selectedEmployee' option. This will create a private variable named selectedEmployee data typed to the Object class. Use the content assist tool (Ctrl+Space) to change the data type to the Employee class.
6. Above the selectedEmployee variable, use the content assist tool to add a Bindable metadata tag.

7. Within the Script block, locate the employeeChart_itemClickHandler() function.
8. Within the function, remove the stub code and assign the line of code to the selectedEmployee variable. Cast the event.hitData.item object value to the Employee class using the as operand.

9. Below the UI components comment, locate the Form block.
10. Inside the Form block, set the FormItem containers' label properties to First Name:, Last Name:, Location: and Salary:, respectively.

11. Locate the TextInput control nested within the FormItem container for the employee first name and bind its text property to the value selectedEmployee.firstName.

12. Locate the TextInput control nested within the FormItem container for the employee last name and bind its text property to the value selectedEmployee.lastName.

13. Locate the TextInput control nested within the FormItem container for the employee location and bind its text property to the value selectedEmployee.location.

14. Locate the TextInput control nested within the FormItem container for the employee salary and bind its text property to the value selectedEmployee.salary.

15. Save the file and run the application.
16. Click a bar within the ColumnChart control.

    You should see the Form container is populated with the employee data from the item you clicked on in the ColumnChart control (see Figure 11).

17. Within the Form container, change the Salary value.

    You should see the ColumnChart control does not update when the Salary value is changed.

In this section you will create a two-way binding to the data that populates the chart.

1. Return to the ex3_07_starter.mxml file in Flash Builder.
2. Inside the FormItem container labeled Salary locate the TextInput control and assign its id property a value of salaryInput.

3. In the text property, place an @ operator before the binding to create a two-way binding between the TextInput control and the bound variable.

4. Save the file and run the application.
5. Click the first bar in the ColumnChart control to populate the Form container with the employee record for Athena Parker.
6. Within the Form container, change the Salary to 120000.

You should see the ColumnChart control changes to reflect the salary entered (see Figure 12).

In this exercise you learned how to make an ActionScript class bindable, display the data model using a ColumnChart control and create a two-way binding. In the next exercise you will use Flash Builder to display details about the employee that is selected from a DropDownList control.