Prerequisite knowledge

User level

Required products

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

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

Figure 4. Run the application to see the ColumnChart control populated with data.

Create a details form

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

Return to Flash Builder and switch to Design mode.

From the Components view Layout branch, drag a Form container and drop it below the ColumnChart control (see Figure 5).

Figure 5. Drag a Form container and drop it below the ColumnChart control.

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

Figure 6. Click OK to accept the default Width and Height for the Form container.

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

Figure 7. Drop four TextInput controls into the Form container.

Switch to Source mode.

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

Figure 8. Run the application to see the Form container.

Display chart data in a Form container

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

Return to Flash Builder.

To the ColumnChart control, use the content assist tool to assign the itemClick event (see Figure 9).

Figure 9. Use the content assist tool to add the itemClick event to the ColumnChart control.

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

Figure 10. Use the code assist tool to generate the ItemClickHandler function.

Locate the Script block.

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.

Above the selectedEmployee variable, use the content assist tool to add a Bindable metadata tag.

Click the first bar in the ColumnChart control to populate the Form container with the employee record for Athena Parker.

Within the Form container, change the Salary to 120000.

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

Figure 12. Change the Salary amount to see the ColumnChart control adjust to the change in data.

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.