3 March 2011
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 section you will create a custom component to contain the Employee Portal: Vehicle Request Form user interface, which is the application view.
You should see the Office Phone field populates with the employee's phone number.
VehicleRequestForm.mxmlfile 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.
Scriptblock between the opening
Grouptag, add the
creationCompleteevent with a value of
<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" creationComplete="init()">
Scriptblock, delete the
importstatements for the FaultEvent and the
ResultEventpackages as well as the
init()and within the function, remove the
Scriptblock, delete the
importstatement for the
CalenderLayoutChangeEventpackage and delete the
Applicationtag, change the value of the
<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="850" creationComplete="employeeService.send()">
Declarationsblock, paste the Form container code.
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.
Scriptblock, change the
employeesvariable declaration from
[Bindable] public var employees:ArrayCollection = new ArrayCollection();
components:VehicleRequestFormtag, add the
employeesproperty with a value bound to the
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.
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.