This first task will not add any functionality from the user's point of view. The exercise will improve the overall architecture of the DataEntry application. In fact, you'll want the application to appear exactly as it did before you started. What you will do is pull the visual elements of the application into a component, which is a view in terms of MVC architecture. DataEntry.mxml will begin to transform into the controller.
1. | Right-click the FlexGrocer project and create a folder named views. Right-click the views folder and create another folder named dataEntry.
It is a best practice to organize your components. In this case, the views folder will contain the views for all three of your application sections. Within the views folder, the dataEntry folder will be where you will be creating your first component.
|
2. | Right-click the dataEntry folder and then choose New > MXML Component. In the New MXML Component dialog box, set the filename to be UpdateDeleteProd.mxml and the base component to be an HBox, remove any width and height values, and then click Finish.
In this case, you are using an <mx:HBox> as your root tag, which means the children you insert in this component will be aligned beside each other.
|
3. | Insert an <mx:Script> block just after the <mx:HBox> tag.
You will have a large <mx:Script> block in this component. Some of the code you will copy from the old DataEntry.mxml file, whereas other code you will write new.
|
4. | Import the following three classes at the top of the <mx:Script> block:
flash.net.filereference
utils.Util
mx.collections.ArrayCollection
These are all classes you will be using in this component that you used previously in DataEntry.mxml. Feel free to copy the import statements from the DataEntry.mxml file.
|
| |
5. | From the DataEntry.mxml file, copy the bindable private variable units and paste it below the import statements in the component. Remove the instantiation of the new ArrayCollection from units and change the access modifier from private to public. Create another bindable public variable named foodColl, data typed as XMLListCollection.
[Bindable] public var units:ArrayCollection; [Bindable] public var foodColl:XMLListCollection;
Note  | When you data type the foodColl variable, Flex Builder will automatically import that class, which is mx.collections.XMLListCollection. |
When you copied the variable into the component, and created the second, they actually became properties of the component. Simply by using the var statement and defining the variables to be public you create properties of the components that can have data passed into them.
This is no small matter. The basic building blocks of object-oriented programming are objects, properties, and methods. So knowing how to create properties is a very important piece of information.
Later in this lesson, you will add public functions to a component. Just as public variables are properties, public functions are the methods of your components.
|
6. | Copy the three functions fileBrowse(), populateForm(), and resetForm() from the DataEntry.mxml page and paste them in the <mx:Script> block below the variable declarations.
You actually could have cut the three functions from the DataEntry.mxml page because they will no longer be needed there after this component is built. But for now, you will leave them there and remove them later.
|
7. | Copy the <mx:Tree> tag and the complete Form from the DataEntry.mxml page and paste them below the <mx:Script> block but above the closing <mx:HBox> tag in the component.
You can see that you are moving the functionality that displayed information in the main application page into this component. In the main application page, the Tree and Form were surrounded by an HBox. That is why an <mx:HBox> tag was used as the root tag for your new component.
|
| |
8. | Save the file.
You have now created your first MXML component. Now that the component is built, you will remove code no longer needed in the main application page and then instantiate the new component.
|
9. | Return to the DataEntry.mxml file and remove all the import statements except for the following:
import mx.collections.ArrayCollection; import mx.rpc.events.ResultEvent;
The removed import statements were needed for code that is now placed in the component.
|
10. | After you are sure that they have been copied correctly to the new component, remove the fileBrowse(), populateForm(), and resetForm() functions from the <mx:Script> block.
As mentioned earlier, these functions were left in until they had been copied correctly.
|
11. | Remove the Tree and Form and the HBox that contained them.
This is functionality that has been moved into the component.
|
12. | Add a namespace, using the letter v as a prefix, which allows you to use the components in the views/dataEntry folder. The code should appear as follows and be placed in the <mx:Application> tag:
xmlns:v="views.dataEntry.*"
There is currently only one component in the dataEntry folder, so you could have specified the name of that one component rather than using the *. Later in this lesson, you will create another component in the dataEntry folder and will want to use it also, and using the * enables use of all components in the directory.
|
13. | Just above the closing </mx:Application> tag, instantiate the new component using the prefix defined in the namespace, the letter v. The code should appear as follows:
<v:UpdateDeleteProd />
You have now created and instantiated your first custom MXML component. Notice that the invocation of your custom component looks very similar to instantiating one of the built-in components. You use the prefix (in this case the letter v instead of mx) and then the name of the component, followed by />. It is important to remember that the components you build are just as valid as the components that ship with Flex and are used in similar ways.
|
| |
14. | Return to the UpdateDeleteProd.mxml component and note the name of the two properties defined in the component: units and foodColl.
These two properties must be passed values for the component to work correctly, which means that in the invocation of the component in the main application page you use these property names and bind values to them.
|
15. | Return to DataEntry.mxml and add two property/value pairs to the instantiation of the component. To the left of the equal signs will be the properties defined in the component, and to the right of the equal signs will be the bindable variables created on this page. In this case, they are intentionally the same:
<v:UpdateDeleteProd units="{units}" foodColl="{foodColl}"/>
The property names and the variables bound to them do not have to be named the same, but your coding will be simpler if you do follow this practice.
|
16. | Change the layout property in the <mx:Application> tag so it is set equal to vertical.
You will be creating another component later in this lesson and will want the two to be displayed vertically.
|
| |
17. | Save the file and check to be sure that your code for that DataEntry.mxml file appears as follows:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="unitRPC.send();prodByCatRPC.send()" xmlns:v="views.dataEntry.*"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.rpc.events.ResultEvent; [Bindable] private var units:ArrayCollection =new ArrayCollection(); private function unitRPCResult(event:ResultEvent):void{ units = event.result.allUnits.unit; } ]]> </mx:Script> <mx:HTTPService url="http://www.flexgrocer.com/units.xml" result="unitRPCResult(event)"/> <mx:HTTPService url="http://www.flexgrocer.com/categorizedProducts.xml" resultFormat="e4x"/> <mx:XMLListCollection source="{prodByCatRPC.lastResult.category}"/> <v:UpdateDeleteProd units="{units}" foodColl="{foodColl}"/> </mx:Application>
You see that the main application page is a much smaller than it was and is now acting more like a controller. The main application page is now retrieving model data and instantiating the views.
|
18. | Run the DataEntry.mxml file. You see that the functionality has not changed by creating the component.
The purpose of this first task was not to add functionality to the application but also to rearchitect it. As the functionality of the DataEntry application continued to grow, the main application page would have become much too long and complex. Using components gives you the chance to break it up into manageable application modules.
|
