Implementing Add Product Functionality

If you open the file flex2tfs/Lesson07/assets/AddProduct.mxml, you will see there is nothing in this file that is new to you, so you do not need to spend the time typing the code for the new component. AddProduct.mxml contains the following major sections, all of which you have experience with:

• Building a data model with <mx:Model>

• Creating a form and binding the form data to the model

• Displaying a pop-up on form submission

Now, you will not write the new component, just use it.

1.	Copy the AddProduct.mxml component from Lesson07/assets to your flexGrocer/views/dataEntry directory. Open the file and note the two public properties defined named units and cats. Even though you are not writing this component, you still must have it in the correct location to use it properly.
2.	Open the main application file DataEntry.mxml. This is the file in which you will instantiate the AddProduct.mxml file.
3.	Below the instantiation of the UpdateDeleteProd component, instantiate the AddProduct component using the v prefix, which is defined in an XML namespace. You need to bind the categories variable to the cats property and bind the units variable to the units property. <v:AddProduct cats="{categories}" units="{units}"/> You are passing data into the two properties you examined in step 1 of this task. Remember that the categories data is retrieved from the data manager component you built, and the units data is retrieved from the HTTPService call in this file.
4.	Run the application DataEntry.mxml. You will see the update/delete product functionality on the top of the page and the add product functionality below that. Fill in the form for the add product functionality and click Add. You should see the new data appear in a pop-up window. Close the pop-up window. The look of the page is not optimal with the two kinds of functionality appearing on the same page. In a later lesson, you will learn about navigator containers and place these two components in what is called a TabNavigator.
5.	Get ready for the next task by closing any open editors. The next task uses different files than you have been working with up to this point in the lesson.