Exercise 2.6: Separating the model, view, and controller

Model-View-Controller (MVC) is an architectural pattern that separates application UI from data and business logic. In this exercise, you will convert the Employee Portal: Vehicle Request Form (see Figure 1) into an MVC application. The form UI will be moved into a custom component and is the view. The data to populate the form is the model. The controller handles the business logic and is represented by the main application file.

In this exercise you will learn how to:

• Create a new MXML component
• Move controls to the custom component
• Pass data to the custom component

In this section you will create a custom component to contain the Employee Portal: Vehicle Request Form user interface, which is the application view.

1. Download the ex2_06_starter.zip file provided if you haven't already and extract the ex2_06_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex2_06_starter.fxp file.
4. Open the ex2_06_starter.mxml file.
5. Run the application.
6. Select an employee from the DropDownList control.

   You should see the Office Phone field populates with the employee's phone number.

7. Return to the ex2_06_starter.mxml file in Flash Builder.
8. In the Package Explorer view, right-click the src folder and select File > New > Folder.
9. In the New Folder window, set the Folder name to components and click Finish.
10. Right-click the components package and select New > MXML Component.
11. In the New MXML Component dialog box, type VehicleRequestForm for the Name and delete the Width and Height values (see Figure 2).

12. Click Finish.
13. In the Package Explorer view, note the VehicleRequestForm.mxml file in the components package (see Figure 3).

In this section you will move the Form container from the main application and convert it to a custom component.

1. From within the ex2_06_starter.mxml file, copy the Script block (see Figure 4).

2. Open the VehicleRequestForm.mxml file.
3. Paste the copied Script block between the opening Group and Declarations tags.
4. Within the opening Group tag, add the creationComplete event with a value of init()

5. Within the Script block, delete the import statements for the FaultEvent and the ResultEvent packages as well as the employeeService_resultHandler() and employeeService_ faultHandler() functions.
6. Change the name of the initApp() function to init() and within the function, remove the employeeService.send() method.
7. Return to the ex2_06_starter.mxml file.
8. From the Script block, delete the import statement for the CalenderLayoutChangeEvent package and delete the dateChangeHandler() and initApp() functions.
9. Within the opening Application tag, change the value of the creationComplete event to employeeService.send().

10. From the ex2_06_starter.mxml file cut the Form container block.
11. In the VehicleRequestForm.mxml file, below the Declarations block, paste the Form container code.
12. Save the file.
13. Return to the ex2_06_starter.mxml file and below the Label control code, type <components and use the content assist tool to create an instance of the VehicleRequestForm component (see Figure 5).

14. Save the file and run the application.
15. Click the DropDownList control to expand it. You should see there is no data displayed within the control.

In this section you will use the employees variable you copied to the custom component to populate the component's Form container with data passed from the main application.

1. Return to the VehicleRequestForm.mxml file in Flash Builder.
2. Within the Script block, change the employees variable declaration from private to public.

3. Save the file.
4. In the ex2_06_starter.mxml file, to the components:VehicleRequestForm tag, add the employees property with a value bound to the employees ArrayCollection variable:

5. Save the file and run the application.
6. Select an employee from the DropDownList control.You should see the application works as it did at the beginning of this exercise.

In this exercise you learned how to create a custom component and pass data to it using custom properties. This architecture is based on the Model-View-Controller design pattern. In the next exercise you will use the application you created 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.