- Requirements
Prerequisite knowledge
Required products
Sample files
Exercise 1.1: Setting up Flash Builder and your project files Flash Builder 4.7 Premium (Download trial)
User level    
Beginning    

 

 

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

Create an ActionScript class.
Figure 1. Create an ActionScript class.

Create an ActionScript class

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).
Name the new class Employee.
Figure 2. Name the new class Employee.
  1. Keep the default settings and click Finish.
  2. 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).
public class Employee { public var imageFile:String; ...
  1. Repeat step 7 to create two more public variables named firstName and lastName.
public class Employee { public var imageFile:String; public var firstName:String; public var lastName:String; ...
  1. In 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) { }
  1. 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; }
    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.
  1. Save the file.

Create instances using ActionSctipt

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.
<!-- Script ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <fx:Script> <![CDATA[ ]]> </fx:Script>
  1. 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).
Use content assist to define the data class of the firstEmployee variable.
Figure 3. Use content assist to define the data class of the firstEmployee variable.
  1. 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>
  1. Assign the firstEmployee variable to a new instance of the Employee class component:
private var firstEmployee:Employee =new Employee;
  1. Pass the new Employee class component a fileName parameter of aparker.jpg, a fName parameter of Athena and an lName parameter of Parker.
private var firstEmployee:Employee = new Employee ("aparker.jpg","Athena","Parker");
  1. Using the quick assist tool create another private variable named secondEmployee, data typed to the Employee class.
private var firstEmployee:Employee = new Employee ("aparker.jpg","Athena","Parker"); private var secondEmployee:Employee
  1. 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.
private var secondEmployee:Employee = new Employee ("stucker.jpg","Saul","Tucker");
  1. Locate the first EmployeeDisplay component instance.
  2. Assign firstEmployee.imageFile to the first component's imageFile property as a bindable value:
<components:EmployeeDisplay x="10" y="60" imageFile="{firstEmployee.imageFile}" fullName="Athena Parker"/>
  1. Save the file.
    You should see two binding warnings in the Problems view (see Figure 4).
Save the file and view the warnings.
Figure 4. Save the file and view the warnings.
  1. Make the firstEmployee and secondEmployee variables bindable by using content assist to add the Bindable keyword in brackets:
[Bindable] private var firstEmployee:Employee = new Employee ("aparker.jpg","Athena","Parker"); [Bindable] private var secondEmployee:Employee = new Employee ("stucker.jpg","Saul","Tucker");
  1. Save the file.
    The binding warning still exists for the imageFile variable (see Figure 5).
Save the file and view the warning.
Figure 5. Save the file and view the warning.
  1. Open the Employee.as file.
  2. Type [B above the imageFile variable to invoke the content assist tool. Add the Bindable declaration to the imageFile variable.
[Bindable] public var imageFile:String;
  1. Save the file.
  2. Open the Problems view.
    Note that the warnings no longer exists.
  3. Return to the ex2_07_starter.mxml main application file.
  4. To the second custom component tag's imageFile property, add the secondEmployee.imageFile bindable value:
<components:EmployeeDisplay x="105" y="60" imageFile="{secondEmployee.imageFile}" fullName="Saul Tucker"/>
  1. Save the file.

Binding to the instance data

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.
// import statements ---------------------------------------- import components.Employee;
  1. 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.
// variable declarations ------------------------------------ [Bindable] public var employeeData:Employee;
  1. Locate the BitmapImage control tag.
  2. Update the source property's binding to display the info from the employeeData variable:
<s:BitmapImage source="images/{employeeData.imageFile}" />
  1. Locate the Label control and delete the value of the text property.
<s:Label x="0" y="80" text=""/>
  1. Save the file.
    Note: You will see four errors populate the Problems view. You will fix these next.
  2. Open ex2_07_starter.mxml.
  3. From the first component tag, remove the imageFile and fullName properties:
<components:EmployeeDisplay x="10" y="60"/>
  1. Add the employeeData property and bind it to the value of the firstEmployee variable:
<components:EmployeeDisplay x="10" y="60" employeeData="{firstEmployee}"/>
  1. Repeat steps 10 and 11 for the second component tag.
<components:EmployeeDisplay x="105" y="60" employeeData="{secondEmployee}"/>
  1. Save the file.
  2. Run the application.
Your application should appear as shown in Figure 6.
Run the application.
Figure 6. Run the application.

Create 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:
... lastName = lName; } public function createFullName():String { }
  1. Within the method, return the firstName variable and the lastName variable with a space between them:
public function createFullName():String { return firstName + " " + lastName; }
  1. Save the file.

Populate the name field

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:
<s:Label x="10" y="92" text="{employeeData.createFullName()}"/>
  1. Save the file.
  2. Run the application.
  3. The components now display the employee's names (see Figure 7).
View the application with employee names.
Figure 7. View the application with employee names.
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.
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.