In this exercise you will use the ArrayCollection object that you created in Exercise 4.7 to populate a Spark List control. You will also use the labelFuction property of the control to format the data that is displayed in it.

In order to allow the data to be bound to the List control, you will also need to make the value object class bindable.

Lastly, you will create a two-way binding to populate a TextInput control. As you change the value in the TextInput control, you will update the data in the ArrayCollection object, which will immediately update the List control.

Figure 1. Review your task in this exercise.

In this exercise, you will learn how to:

• Make an ActionScript class bindable
• Bind the data model to the List control
• Modify the List control's display
• Create a two-way binding

Requirements

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

Flash Builder 4

• Download
• Learn more

Sample files:

• ex4_08_starter.zip (ZIP, 20 KB)
• ex4_08_solution.zip (ZIP, 20 KB)

Prerequisite knowledge

• Exercise 1.1: Creating and skinning an application
• Exercise 4.7: Creating a typed data model

Making ActionScript class properties bindable

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

1. Download the ex4_08_starter.zip file if you haven't already and extract the file ex4_08_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex4_08_starter.fxp file.
4. From the Package Explorer view, open the Employee.as file.

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

6. Save the file.

Binding the data model to the List control

In this section, you will use two Flex controls to display data from the data model.

1. Open the EmployeeDirectiry.mxml file.
2. Locate the UI components comment.

3. Below the Label control, add a List control:

   <s:Label text="Employee Directory" 
       height="24" 
       color="#028198" 
       fontSize="24"
       fontWeight="bold"/>
       
   <s:List/>

4. To the List control, assign employeeList as the id property, bind the dataProvider property to the employees ArrayCollection variable, the labelField to firstName and assign the height to 100:

   <s:List id="employeeList" 
       dataProvider="{employees}" 
       labelField="firstName" 
       height="100"/>

5. Locate the Script block.

6. Make the employees variable bindable by adding the Bindable metadata tag:

   [Bindable]
   private var employees:ArrayCollection = new ArrayCollection;

7. Save the file.
8. Run the Employee Directory application.

You should see the List control populated with the first name of the employees.

Modify the List control's display

In this section, you will update the List control to display both the employee's first and last names.

1. Locate the List control and delete the labelField property and replace it with the labelFunction property with a value of employeeLabelFunction.

   <s:List id="employeeList" 
       dataProvider="{employees}" 
       labelFunction="employeeLabelFunction"
   
       height="100"/>

2. Below the last function in the Script block, create a private function named employeeLabelFunction that returns a value data typed to the String class:

   ...
       private function employeeLabelFunction():String
       {
    
       }
              
   
       ]]>
   </fx:Script>

3. Make the employeeLabelFunction() require one parameter named item that is data typed to the Object class:

   private function employeeLabelFunction(item:Object):String
   {
       
   }

4. Within the function, declare a variable named fullname and data type it to the String class:

   private function employeeLabelFunction(item:Object):String
   {
       var fullname:String;
   }

5. Assign the fullname variable to the item.firstName and item.lastName values combined with a space between them:

   private function employeeLabelFunction(item:Object):String
   {
       var fullname:String = item.firstName + " " + item.lastName;
   }

6. Use the return operation to return to the fullname variable to the application:

   private function employeeLabelFunction(item:Object):String
   {
       var fullname:String = item.firstName + " " + item.lastName;
       return fullname;
   }

7. Save the file.

8. Run the Employee Directory application.

   You should see the List control populated with the first and last names of the employees (see Figure 2).

   

   Figure 2. Run the application to see both the employee's first and last names displayed.

9. Return to the EmployeeDirectory.mxml file in Flash Builder.
10. Locate the List control.

11. Below the List control, create a TextInput control:

    <s:List id="employeeList" 
           dataProvider="{employees}" 
           labelFunction="employeeLabelFunction" 
           height="100"/>
        
    <s:TextInput/>

12. Assign the TextInput control an id of empNameInput, a y value of 150 and bind the text value to the employee's first name selected in the List control.

    Use the getItemAt() method of the ArrayCollection class to retrieve the firstName value of the List controls selectedIndex index. Remember the List control is populated using the employees ArrayCollection variable.

    <s:TextInput id="empNameInput" y="150" 
    text="{employees.getItemAt(employeeList.selectedIndex).firstName}"/>

13. Save the file and run the application.

    You should see the TextInput control is populated (see Figure 3).

    

    Figure 3. Click the first employee to see the TextInput control populated with the first employee's first name.

14. Click the first employee in the List control.

15. Within the TextInput control, type the name Frank.

    You should see the List control remains unchanged from the text entered into the TextInput control (see Figure 4).

    

    Figure 4. Change the name in the TextInput control to Frank.

Creating a two-way binding

In this section, you will use a two-binding to update the employee first name in the source employees ArrayCollection instance data using the TextInput control.

1. Return to the EmployeeDirectory.mxml file in Flash Builder.
2. Locate the TextInput control.

3. Within the control's text property value, add the @ character at the beginning of the assignment to create a two-way binding:

   <s:TextInput id="empNameInput" y="150" 
       text="@{employees.getItemAt(employeeList.selectedIndex).firstName}"/>

4. Save the file and run the application.

5. Within the TextInput control, change the name to Frank.

6. Click the first employee in the list.

   You should see the first employee's first name value changes to reflect the value in the TextInput control (see Figure 5).

   

   Figure 5. Change the first name of the first employee.

Test your knowledge

In this exercise, you learned how to make an ActionScript class bindable, display the data model in another view, and use a two-way binding.

What metadata tag can be used to make an ActionScript class or property bindable?

The Bindable metadata tag..

What property can be used with a function to create a custom label for data within a list based Flex control?

The labelFunction property.

What character is used to create a two-way binding between a Flex control and the data model?

The @ character.

About the author