Requirements

Prerequisite knowledge
 
User level
Beginning
Required products
Flash Builder 4.7 Premium (Download trial)
Sample files
ex5_03_starter.zip
 
 
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).
 
Preview the application.

Figure 1. Preview the application.

In this exercise, you will learn how to:
 

 
Make ActionScript class properties bindable

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.
package valueObjects { [Bindable] public class Employee { public var firstName:String; public var lastName:String; ...
  1. Save the file.

 
Bind the data model to a chart

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).
 Drag a ColumnChart control and drop it below the header text.

Figure 2. Drag a ColumnChart control and drop it below the header text.

  1. Within the Create Chart dialog box, type employeeChart for the ID.
  2. Click the check box next to Include legend to disable this option.
    Your Create Chart dialog box should appear as shown in Figure 3.
     
 Type employeeChart for the ID and choose not to include a legend.

Figure 3. Type employeeChart for the ID and choose not to include a legend.

  1. Click OK.
  2. Switch to Source mode.
  3. Below the UI components comment, locate the ColumnChart control tags.
  4. To the opening ColumnChart tag, bind employees as the dataProvider.
<mx:ColumnChart id="employeeChart" dataProvider="{employees}"> <mx:series> <mx:ColumnSeries displayName="Series 1" yField=""/> </mx:series> </mx:ColumnChart>
  1. To the nested series tag set, assign salary as the yfield.
<mx:ColumnChart id="employeeChart" dataProvider="{employees}"> <mx:series> <mx:ColumnSeries displayName="Series 1" yField="salary"/> </mx:series> </mx:ColumnChart>
  1. Save the file and run the application.
    You should see the ColumnChart control populated with the employee salary data (see Figure 4).
     
Run the application to see the ColumnChart control populated with data.

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.
 
  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).
Drag a Form container and drop it below the ColumnChart control.

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

  1. In the Insert Form dialog box, click OK to accept the default values (see Figure 6).
Click OK to accept the default Width and Height for the Form container.

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

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

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

  1. Switch to Source mode.
  2. 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).
     
 Run the application to see the Form container.

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.
 
  1. Return to Flash Builder.
  2. To the ColumnChart control, use the content assist tool to assign the itemClick event (see Figure 9).
 Use the content assist tool to add the itemClick event to the ColumnChart control.

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

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

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

  1. Locate the Script block.
  2. 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.
  3. Above the selectedEmployee variable, use the content assist tool to add a Bindable metadata tag.
[Bindable] private var employees:ArrayCollection = new ArrayCollection(); [Bindable] private var selectedEmployee:Employee;
  1. Within the Script block, locate the employeeChart_itemClickHandler() function.
  2. 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.
protected function employeeChart_itemClickHandler(event:ChartItemEvent):void { selectedEmployee = event.hitData.item as Employee; }
  1. Below the UI components comment, locate the Form block.
  2. Inside the Form block, set the FormItem containers' label properties to First Name:, Last Name:, Location: and Salary:, respectively.
<s:Form> <s:FormItem label="First Name:"> <s:TextInput/> </s:FormItem> <s:FormItem label="Last Name:"> <s:TextInput/> </s:FormItem> <s:FormItem label="Location:"> <s:TextInput/> </s:FormItem> <s:FormItem label="Salary:"> <s:TextInput/> </s:FormItem> </s:Form>
  1. Locate the TextInput control nested within the FormItem container for the employee first name and bind its text property to the value selectedEmployee.firstName.
<s:Form> <s:FormItem label="First Name:"> <s:TextInput text="{selectedEmployee.firstName}"/> </s:FormItem> ...
  1. Locate the TextInput control nested within the FormItem container for the employee last name and bind its text property to the value selectedEmployee.lastName.
<s:Form> <s:FormItem label="First Name:"> <s:TextInput text="{selectedEmployee.firstName}"/> </s:FormItem> <s:FormItem label="Last Name:"> <s:TextInput text="{selectedEmployee.lastName}"/> </s:FormItem> ...
  1. Locate the TextInput control nested within the FormItem container for the employee location and bind its text property to the value selectedEmployee.location.
<s:Form> <s:FormItem label="First Name:"> <s:TextInput text="{selectedEmployee.firstName}"/> </s:FormItem> <s:FormItem label="Last Name:"> <s:TextInput text="{selectedEmployee.lastName}"/> </s:FormItem> <s:FormItem label="Location:"> <s:TextInput text="{selectedEmployee.location}"/> </s:FormItem> ...
  1. Locate the TextInput control nested within the FormItem container for the employee salary and bind its text property to the value selectedEmployee.salary.
<s:Form> <s:FormItem label="First Name:"> <s:TextInput text="{selectedEmployee.firstName}"/> </s:FormItem> <s:FormItem label="Last Name:"> <s:TextInput text="{selectedEmployee.lastName}"/> </s:FormItem> <s:FormItem label="Location:"> <s:TextInput text="{selectedEmployee.location}"/> </s:FormItem> <s:FormItem label="Salary:"> <s:TextInput text="{selectedEmployee.salary}"/> </s:FormItem> </s:Form>
  1. Save the file and run the application.
  2. 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).
     
 Click a data item within the ColumnChart control to populate the Form container.

Figure 11. Click a data item within the ColumnChart control to populate the Form container.

  1. Within the Form container, change the Salary value.
    You should see the ColumnChart control does not update when the Salary value is changed.
     

 
Create a two-way binding

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.
... <s:FormItem label="Salary:"> <s:TextInput id="salaryInput" text="{selectedEmployee.salary}"/> </s:FormItem> </s:Form>
  1. In the text property, place an @ operator before the binding to create a two-way binding between the TextInput control and the bound variable.
<s:FormItem label="Salary:"> <s:TextInput id="salaryInput" text="@{selectedEmployee.salary}"/> </s:FormItem> </s:Form>
  1. Save the file and run the application.
  2. Click the first bar in the ColumnChart control to populate the Form container with the employee record for Athena Parker.
  3. Within the Form container, change the Salary to 120000.
You should see the ColumnChart control changes to reflect the salary entered (see Figure 12).
 
Change the Salary amount to see the ColumnChart control adjust to the change in data.

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