- Requirements
Prerequisite knowledge Required products Sample files
Flash Builder 4.7 Premium (Download trial)
User level    
Beginning    

 

In this exercise you will use Flash Builder to create an MXML class and reuse the class to display employee information (see Figure 1).
 
Review your task.
Figure 1. Review your task.
In this exercise you will learn how to:
 

 
Design an application

In this section you will add Flex controls to the application.
 
  1. Download the ex1_06_starter.zip file if you haven't already, and extract the file ex1_06_starter.fxp to your computer.
  2. Return to Flash Builder and import the file ex1_06_starter.fxp.
  3. Open the ex1_06_starter.mxml file.
  4. Switch to Design mode.
  5. From the Components view Controls branch, drag a Label control and drop it into the Design area (see Figure 2).
Add a Label control to the application.
Figure 2. Add a Label control to the application.
  1. Use the Properties view to assign the Label control a text property with a value of Employee Portal.
  2. Return to Source mode.
  3. Locate the Styles comment and add a Style tag to your code.
  4. Set the source property's value to Styles.css.
<fx:Style source="Styles.css"/>
  1. To the Employee Portal Label control, add a height property with a value of 40, a width property with a value of 300, and a styleName property with a value of titleHeader.
<s:Label x="10" y="10" height="40" width="300" text="Employee Portal" styleName="titleHeader"/>
  1. Save the file and run the application.
    You should see the style applied to the Label control (see Figure 3).
     
The titleHeader style applied to the Label control
Figure 3. The titleHeader style applied to the Label control
  1. Return to Flash Builder and switch to Design mode.
  2. From the Controls branch, drag an Image control and drop it into the editor (see Figure 4).
Add an Image control to the application.
Figure 4. Add an Image control to the application.
  1. Use the Properties view to assign the Image control Source property a value of images/aparker.jpg (see Figure 5).
Assign a source property of images/aparker.jpg.
Figure 5. Assign a source property of images/aparker.jpg.
  1. From the Components view Controls branch, drag a Label control and drop it below the Image control (see Figure 6).
Place a Label control below the Image control.
Figure 6. Place a Label control below the Image control.
  1. Use the Properties view to assign the Text property a value of Athena Parker.
  2. Save the file.
  3. Run the application.
    The application should look as shown in Figure 7.
     
Run the application.
Figure 7. Run the application.
  1. Return to Flash Builder and switch to Source mode.
  2. Locate the Image control and change it from Image to BitmapImage.
<s:BitmapImage x="10" y="58" source="images/aparker.jpg"/>
    Note: It is a best practice to only use the Image control if you need to skin an image (for instance, with a background or border).To just display an image, use BitmapImage.
     
  1. Save the file and run the application.
  2. Note that your application has not changed.
     

 
Creating and using an MXML component

In this section you create a custom component to use in place of the controls added to the application in the last section.
 
  1. Return to Flash Builder.
  2. In the Package Explorer, select the src folder then select File > New > Folder.
  3. Name the Folder components (see Figure 8).
Name the folder components.
Figure 8. Name the folder components.
  1. Click Finish.
  2. In the Package Explorer, select the components folder and then select File > New > MXML Component.
  3. Name the component EmployeeDisplay.
  4. Base the component on the Spark Group container.
  5. Delete the Width and Height values.
    The New MXML Component dialog box should look as shown in Figure 9.
     
Create a new MXML component.
Figure 9. Create a new MXML component.
  1. Click Finish.
  2. Open ex1_06_starter.mxml and switch to Source mode.
  3. Cut the BitmapImage and Label controls that are used for the employee's name and paste them into the EmployeeDisplay.mxml below the Declarations block.
  4. Note: You are only cutting the BitmapImage and Label controls that are specific to the employee. Do not cut the Employee Portal Label control.
     
<?xml version="1.0" encoding="utf-8"?> <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Declarations> </fx:Declarations> <s:BitmapImage x="10" y="58" source="images/aparker.jpg"/> <s:Label x="10" y="140" text="Athena Parker"/> </s:Group>
  1. From the BitmapImage control, delete the x and y properties:
<s:BitmapImage source="images/aparker.jpg"/>
  1. Change the value of the Label control's x property to 0 and y property to 80:
<s:Label x="0" y="80" text="Athena Parker"/>
  1. Save the file.
  2. Return to ex1_06_starter.mxml.
  3. Below the UI components comment, add an instance of the custom component by typing the characters <Empl and then pressing Enter when the content assist tool displays the custom component (see Figure 10).
Use content assist to add an instance of the EmployeeDisplay component.
Figure 10. Use content assist to add an instance of the EmployeeDisplay component.
  1. Within the opening Application tag, ensure the xml namespace components has been generated. If not, add the namespace assigned to the contents of the components directory.
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:components="components.*">
  1. To the EmployeeDisplay component, add the x property with a value of 10 and the y property with a value of 60.
<components:EmployeeDisplay x="10" y="60"/>
  1. Switch to Design mode.
  2. From the Components view Custom branch, drag another EmployeeDisplay component and drop it into the Design area next to the first (see Figure 11).
Use the Components view to add another EmployeeDisplay component to the application.
Figure 11. Use the Components view to add another EmployeeDisplay component to the application.
  1. In the properties view, go to the Size and Position segment and change the x property value to 105 and make sure the y property value is 60.
  2. Save the file and run the application.
    You should see that the application contains two EmployeeDisplay components, as shown in Figure 12.
     
Run the application.
Figure 12. Run the application.
  1. Return to Flash Builder and switch to Source mode.
  2. Locate the second EmployeeDisplay component and notice that it is presented as a tag block.
  3. Remove the closing EmployeeDisplay tag and modify the opening tag so that it becomes a single instance of the component.
<components:EmployeeDisplay x="10" y="60"/> <components:EmployeeDisplay x="105" y="60"/>
  1. Save the file.

 
Create a class property

In this section, you will create two class properties and use them to display data.
 
  1. Open the EmployeeDisplay.mxml file.
  2. Below the opening Group container tag, create a Script block.
... xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ ]]> </fx:Script>
  1. In the Script block, type imageFile and use the quick assist tool, by pressing CTRL+1, to create a variable. Make the variable public and data typed to the String class.
  2. Make the new imageFile variable Bindable by typing [B above the variable to invoke the content assist tool and click enter when Bindable is displayed.
<![CDATA[ [Bindable] public var imageFile:String; ]]>
  1. Declare another Bindable public variable named fullName data typed to the String class by using the content assist and quick assist tools.
[Bindable] public var imageFile:String; [Bindable] public var fullName:String;
  1. In the source property of the BitmapImage control, replace the hard-coded employee image file name with the value of the imageFile variable.
<s:BitmapImage source="images/{imageFile}"/>
  1. To the Label control, bind the value of the text property to the value of the fullName variable.
<s:Label x="0" y="80" text="{fullName}"/>
  1. Save the file.
  2. Open ex1_06_starter.mxml.
  3. In Source mode, to the first custom component tag, add the imageFile property with a value of aparker.jpg.
<components:EmployeeDisplay x="10" y="60" imageFile="aparker.jpg"/>
  1. To the same component, add the fullName variable set to the value of Athena Parker.
<components:EmployeeDisplay x="10" y="60" imageFile="aparker.jpg" fullName="Athena Parker" />
  1. To the other custom component tag, add the imageFile property set to stucker.jpg and the fullName property set to Saul Tucker.
<components:EmployeeDisplay x="105" y="60" imageFile="stucker.jpg" fullName="Saul Tucker"/>
  1. Save the file.
  2. Run the application.
    The custom component now displays two different employees (see Figure 13).
     
Run the application.
Figure 13. Run the application.
In this exercise you learned to use Flash Builder to create an MXML class and reuse the class to display data. In the next exercise, you will use inline ActionScript to display the date selected from a DateChooser control. You will then use a function to achieve the same result as the inline ActionScript.
 
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.