In this exercise, you will create an ActionScript class and use instances of the class to populate employee data, as shown in Figure 1.

Figure 1. Create an ActionScript class.

In this exercise, you will learn how to:

• Create an ActionScript class
• Create class instances using ActionScript
• Bind to the instance data
• Create an ActionScript class method
• Reuse the method

Requirements

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

Flash Builder 4

• Download
• Learn more

Sample files:

• ex1_04_starter.zip (ZIP, 275 KB)
• ex1_04_solution.zip (ZIP, 275 KB)

Prerequisite knowledge

• Exercise 1.1: Creating and skinning an application
• Exercise 1.3: Creating and using MXML classes

Creating an ActionScript class

In this section you will create an ActionScript class.

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

5. Name the class Employee (see Figure 2).

   

   Figure 2. Name the new class Employee.

6. Keep the default settings and click Finish.

7. Within the class declaration, create three public variables named imageFile, firstName and lastName, all data typed to the String class.

   public class Employee
   {
   public var imageFile:String;
   public var firstName:String;
   public var lastName:String;
   ...

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

   public function Employee(fileName:String, fName:String,
   lName:String)
   {
    
   }

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

   public function Employee(fileName:String, fName:String,
   lName:String)
   {
       imageFile = fileName;
       firstName = fName;
       lastName = lName;
   }

10. Save the file.

Creating instances using ActionSctipt

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

1. Open the EmployeeDirectory.mxml file.

2. Below the Script comment, create a Script block.

   <!-- Script
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
       
   <fx:Script>
       <![CDATA[
   
       ]]>
   </fx:Script>

3. Create a private variable named firstEmployee and use code lookup to data type the variable to the Employee class (see Figure 2).

   

   Figure 3. Use code lookup to define the data class of the firstEmployee variable.

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

   <fx:Script>
       <![CDATA[
           import components.Employee;
           private var firstEmployee:Employee              
       ]]>
   </fx:Script>

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

   private var firstEmployee:Employee =new Employee;

6. Pass the new Employee class component a fileName parameter of abrilliam.jpg, a fName parameter of Andrew and an lName parameter of Brilliam.

   private var firstEmployee:Employee = new Employee
   ("abrilliam.jpg","Andrew","Brilliam");

7. Create another private variable named secondEmployee with a data typed to the Employee class.

   private var firstEmployee:Employee = new Employee
   ("abrilliam.jpg","Andrew","Brilliam");
   private var secondEmployee:Employee

8. Assign the secondEmployee variable to a new instance of the Employee class component, passing a fileName parameter of akotter.jpg, a fName parameter of Annette and an lName parameter of Kotter.

   private var secondEmployee:Employee = new Employee
   ("akotter.jpg","Annette","Kotter");

9. Locate the first EmployeeDisplay component instance.

10. Assign firstEmployee.imageFile to the first component's imageFile property as a bindable value.

    <components:EmployeeDisplay imageFile="{firstEmployee.imageFile}"
    
        fullName="Andrew Brilliam"/>

11. Save the file.

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

    

    Figure 4. Save the file and view the warnings.

12. Make the firstEmployee and secondEmployee variables bindable by adding the Bindable keyword in brackets.

    [Bindable]
    private var firstEmployee:Employee = new Employee
    ("abrilliam.jpg","Andrew","Brilliam");
     
    [Bindable]
    private var secondEmployee:Employee = new Employee
    ("akotter.jpg","Annette","Kotter");

13. Save the file.

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

    

    Figure 5. Save the file and view the warning.

14. Open the Employee.as file.

15. Add the Bindable declaration to the imageFile variable.

    [Bindable]
    public var imageFile:String;

16. Save the file.

17. Open the Problems view.

    You should see the warnings no longer exists.

18. Return to the EmployeeDirectory.mxml main application file.

19. To the second custom component tag's imageFile property, add the secondEmployee.imageFile bindable value.

      <components:EmployeeDisplay_ex09 x="0" y="112" 
          imageFile="{secondEmployee.imageFile}" 
          fullName="Annette Kotter"/>

20. Save the file.

Binding to the instance data

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

1. Open EmployeeDisplay.mxml
2. Within the Script block, locate and delete the two bindable variables.

3. Below the import statements comment, import the Employee class component.

   // import statements ----------------------------------------
   import components.Employee;

4. Below the variable declarations comment, declare a Bindable public variable named employeeData and, using code lookup, assign the variable a data type of the Employee class.

   // variable declarations ------------------------------------
   [Bindable]
   public var employeeData:Employee;

5. Locate the Image control tag.

6. Update the source property's binding to display the info from the employeeData variable.

     <mx:Image source="images/{employeeData.imageFile}" />

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

   <s:Label x="0" y="80" text=""/>

8. Save the file.

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

9. Open EmployeeDirectory.mxml.

10. From the first component tag, remove the imageFile and fullName properties.

    <components:EmployeeDisplay x="10" y="41"/>

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

    <components:EmployeeDisplay x="10" y="41"
        employeeData="{firstEmployee}"/>

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

    <components:EmployeeDisplay x="105" y="41"
        employeeData="{secondEmployee}"/>

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

Your application should appear as shown in Figure 6.

Figure 6. Run the application.

Creating an ActionScript class method

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.

   ...
   this.lastName = lName;
   }
         
   public function createFullName():String
   {
   
   }

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

   public function createFullName():String
   {
       return firstName + " " + lastName;
   }

4. Save the file.

Populating the name field

In this section you reuse the createFullName() function to dynamically display the employee name below the Image 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.

   <s:Label x="10" y="92"
       text="{employeeData.createFullName()}"/>

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

You should see the components now display the employee's names, as shown in Figure 7.

Figure 7. View the application with employee names.

Test your knowledge

In this tutorial you learned how to create an ActionScript class and use instances of it to display data.

What declaration is used to allow a variable to be used for multiple instances?

[Bindable]

What is a function called that is created within an ActionScript class?

A class method.

About the author