Exercise 2.7: Creating an ActionScript class and instances

In this exercise you will use the application you made in Exercise 1.6 (Creating MXML custom components with ActionScript properties) to create an ActionScript class and use instances of the class to populate employee data (see in Figure 1).

In this exercise you will learn how to:

• Create an ActionScript class
• Create instances using ActionSctipt
• Binding to the instance data
• Create an ActionScript class method
• Populate the name field

In this section you will create an ActionScript class.

1. Download the ex2_07_starter.zip file if you haven't done so already and extract the file ex2_07_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex2_07_starter.fxp file.
4. Right-click on the components directory and select New > ActionScript class.
5. Name the class Employee (see Figure 2).

6. Keep the default settings and click Finish.
7. Within the class declaration, type imageFile and press CTRL+1 to invoke the quick assist tool and select the Create instance variable imageFile option. This creates a private variable. Change private to public and change the data type to the String class by using the content assist tool (CTRL+Space).

8. Repeat step 7 to create two more public variables named firstName and lastName.

9. In the constructor, accept three parameters, fileName, fName, and lName. Type all three parameters to the String class.

10. Assign each of the constructor arguments to its associated class property:

Note: When the argument names in the constructor match the class property names, it is a best practice to add this to the constructor argument name so that you can differentiate between the constructor arguments and the class property names. In this case, the argument names and the class property names are different, so you do not need to add this to the constructor argument names.

11. Save the file.

In this section, you will create multiple employee instances with ActionScript.

1. Open the ex2_07_starter.mxml file.
2. Below the Script comment, create a Script block.

3. Within the Script block, type firstEmployee and use the quick assist tool (CTRL+1) to create a private variable and use the content assist tool (CTRL+Space) to data type the variable to the Employee class (see Figure 3).

4. Within the Script block, ensure the components.Employee package was imported. If not, add the following code to import the package:

5. Assign the firstEmployee variable to a new instance of the Employee class component:

6. Pass the new Employee class component a fileName parameter of aparker.jpg, a fName parameter of Athena and an lName parameter of Parker.

7. Using the quick assist tool create another private variable named secondEmployee, data typed to the Employee class.

8. Assign the secondEmployee variable to a new instance of the Employee class component, passing a fileName parameter of stucker.jpg, a fName parameter of Saul and anlName parameter of Tucker.

9. Locate the first EmployeeDisplay component instance.
10. Assign firstEmployee.imageFile to the first component's imageFile property as a bindable value:

11. Save the file.

    You should see two binding warnings in the Problems view (see Figure 4).

12. Make the firstEmployee and secondEmployee variables bindable by using content assist to add the Bindable keyword in brackets:

13. Save the file.

    The binding warning still exists for the imageFile variable (see Figure 5).

14. Open the Employee.as file.
15. Type [B above the imageFile variable to invoke the content assist tool. Add the Bindable declaration to the imageFile variable.

16. Save the file.
17. Open the Problems view.

    Note that the warnings no longer exists.

18. Return to the ex2_07_starter.mxml main application file.
19. To the second custom component tag's imageFile property, add the secondEmployee.imageFile bindable value:

20. Save the file.

In this section you will bind the components to the employee instances.

1. Open EmployeeDisplay.mxml from the components package.
2. Within the Script block, locate and delete the two bindable variables.
3. Below the import statements comment, import the Employee class component.

4. Below the variable declarations comment, use the content and quick assist tools to declare a Bindable public variable named employeeData and assign the variable a data type of the Employee class.

5. Locate the BitmapImage control tag.
6. Update the source property's binding to display the info from the employeeData variable:

7. Locate the Label control and delete the value of the text property.

8. Save the file.

   Note: You will see four errors populate the Problems view. You will fix these next.

9. Open ex2_07_starter.mxml.
10. From the first component tag, remove the imageFile and fullName properties:

11. Add the employeeData property and bind it to the value of the firstEmployee variable:

12. Repeat steps 10 and 11 for the second component tag.

13. Save the file.
14. Run the application.

Your application should appear as shown in Figure 6.

In this section you will create a class method to display an employee's names.

1. Open the Employee.as file.
2. Below the Employee() method, create a new method named createFullName that takes no parameters and returns data typed to the String class:

3. Within the method, return the firstName variable and the lastName variable with a space between them:

4. Save the file.

In this section you reuse the createFullName() function to dynamically display the employee name below the BitmapImage control.

1. Open the EmployeeDisplay.mxml file.
2. Locate the Label control.
3. Bind the text property to the employeeData variable evaluated by the createFullName() function:

4. Save the file.
5. Run the application.

The components now display the employee's names (see Figure 7).

In this exrecise you learned how to create an ActionScript class and use instances of it to display data. In the next exercise you will convert this ArrayCollection of generic objects into an ArrayCollection of typed data.