| Right now, nothing happens in the DataEntry application when you click the Update/Delete buttons. You will change this now. You will not yet be actually writing data back to the server; that comes in a later lesson. Now you will display in a pop-up window the product information you will later deal with at the server. You will be creating a modal pop-up window. This means that a window will appear with the product information in it, and you will not be able to interact with any other components in the Flex application until you close the pop-up window. To build this functionality, you will use the TitleWindow class for the root tag in your component. You will also use the PopUpManager classin particular, the createPopUp() and removePopUp() methods. Your application will appear as follows with a pop-up window open.  1. | Right-click the views/dataEntry folder. Choose New > MXML Component. The filename should be ConfirmScreen.mxml, and the base component should be TitleWindow. After you select TitleWindow, set the layout to be vertical, remove any width and height values, and then click Finish.
In this case, you chose the <mx:TitleWindow> tag to be the base tag for your component. In the component you built earlier, you chose an <mx:HBox>. Your decision for the base tag should be driven by what you want the component to do.
| | | 2. | Add a close event to the <mx:TitleWindow> tag. The ActionScript for this close event should call the static method of the PopUpManager class removePopUp(), in which the argument for the method is this. Also set the showCloseButton property equal to true.
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" close="PopUpManager.removePopUp(this)" showCloseButton="true">
The TitleWindow class is well-suited for your use as a pop-up window because you can choose to display a close button, and when the user clicks that button the close event will handle that action and close the pop-up window.
Notice that the removePopUp() method is used. It is invoked directly from the class name; in this case, PopUpManager. Hence, you know it is must be a static method. You did not have to create an instance of the PopUpManager class to use the removePopUp() method.
The argument of the removePopUp() method, this, refers to the instance of the TitleWindow itself. So in fact you are telling the TitleWindow to close itself.
| 3. | Add an <mx:Script> to the block below the <mx:TitleWindow> tag. In the <mx:Script> block, import two classes: mx.managers.PopUpManager and valueObjects.Product. Also create a bindable public variable named prod, data typed as Product.
<mx:Script> <![CDATA[ import mx.managers.PopUpManager; import valueObjects.Product; [Bindable] public var prod:Product; ]]> </mx:Script>
The PopUpManager must be imported because you have used it in the handler for the close event. You will pass a Product object to be displayed in this pop-up window; hence the need for the bindable prod variable. And because that variable is of type Product, you must also import that class.
| | | 4. | Below the <mx:Script> block, create an <mx:Form> to display all the pertinent data about the product passed to this component, as shown here:
<mx:Form> <mx:FormItem label="Category ID"> <mx:Label text="{prod.catID}"/> </mx:FormItem> <mx:FormItem label="Product Name"> <mx:Label text="{prod.prodName}"/> </mx:FormItem> <mx:FormItem label="Unit"> <mx:Label text="{prod.unitID}"/> </mx:FormItem> <mx:FormItem label="Cost"> <mx:Label text="{prod.cost}"/> </mx:FormItem> <mx:FormItem label="List Price"> <mx:Label text="{prod.listPrice}"/> </mx:FormItem> <mx:FormItem label="Description"> <mx:Text htmlText="{prod.description}"/> </mx:FormItem> <mx:FormItem label="Organic"> <mx:Label text="{prod.isOrganic}"/> </mx:FormItem> <mx:FormItem label="Low Fat"> <mx:Label text="{prod.isLowFat}"/> </mx:FormItem> <mx:FormItem label="Image Name"> <mx:Label text="{prod.imageName}"/> </mx:FormItem> </mx:Form>
The purpose of this component is to display the updated or deleted product. The <mx:Form> will show the pertinent data in this modal window.
| 5. | Save the file.
You have completed building your second component. You will now return to UpdateDeleteProd.mxml and write the code to instantiate this component when needed. Don't forget that this component is a class, which is a child of the TitleWindow class, which you have now added to your Flex application for use whenever needed.
| 6. | In UpdateDeleteProd.mxml, import mx.managers.PopUpManager and valueObjects.Product. Also declare a private variable named win, data typed as ConfirmScreen, the class which your new component creates.
You will need the PopUpManager class to create the pop-up window, and because you will be passing a variable of type Product, you'll also need to import the Product class. The win variable will be used in popping up the confirm screen.
| | | 7. | Just below the <mx:Script> block, add an <mx:Model> tag with an id of prodModel. In the body of the <mx:Model> tag, create properties for all pertinent information gathered in the Form. The only value not gathered in the form is the catID. This value can be retrieved from the selected item from the Tree.
<mx:Model > <product> <catID>{productTree.selectedItem.@catID}</catID> <prodName>{prodName.text}</prodName> <unitID>{unitID.selectedItem.unitID}</unitID> <cost>{Number(cost.text)}</cost> <listPrice>{Number(listPrice.text)}</listPrice> <description>{description.text}</description> <isOrganic>{isOrganic.selected}</isOrganic> <isLowFat>{isLowFat.selected}</isLowFat> <imageName>{imageName.text}</imageName> </product> </mx:Model>
It is a very common practice to bind form data to a Model, which takes the individual pieces of form data gathered in each control and puts them into an object you can more readily use. In this case, you will soon use the prodModel object to build an object of type Product that can be passed to your new component.
Tip  | The <mx:Model> tag must have a root node, as <product> is in the Model shown. The name of the root node is not important. |
| 8. | Locate the two buttons at the bottom of the Form. Add a click event to the Update button; in the event handler, call a function named doProdUpdate(). Add a click event to the Delete button; in the event handler, call a function named doProdDelete().
<mx:Button label="Update" click="doProdUpdate()"/> <mx:Button label="Delete" click="doProdDelete()"/>
You are calling ActionScript functions when an event occurs.
| 9. | At the bottom of the <mx:Script> block, create the skeleton of a private function named showPopUp(), data typed as void. It should accept two parameters: prod, data typed as Product, and title, data typed as String.
private function showPopUp(prod:Product,title:String):void{ }
You will call this function in both the update and delete functions to display the product that is being acted upon.
| | | 10. | As the first line of code in the function, set the win variable created earlier (remember that it is data typed as ConfirmScreen) equal to win=ConfirmScreen(PopUpManager.createPopUp(this,ConfirmScreen,true)).
This line of code is a bit tricky and will take some work to understand. First, examine what is inside of the parentheses. Here you are calling the static method createPopUp(). This method accepts three parameters:
The first parameter is the parent of the pop-up window; in this case, this refers to the current component. The pop-up will appear in front of its parent. The second parameter is the class to be created for the pop-up window. Here you are using the component you just built: the ConfirmScreen class. The last parameter specifies whether the pop-up window should be modal or not.
If you were not passing data to the component, the code inside the parentheses would display a window, and you would not need any other code to perform the pop-up.
The rest of the code on this line is treating one object as a different type than it actually is. This is sometimes referred to as casting, or coercing, the object. You need to tell the compiler the expression in the parentheses is a ConfirmScreen object instance. You will now explore what this means and why it is possible.
If you did not cast the object to a ConfirmScreen object you would receive the following error:
Implicit coercion of a value with static type mx.core:IFlexDisplayObject to a possibly unrelated type views.dataEntry:ConfirmScreen
In the Adobe Flex 2 Language Refererence (sometimes referred to as ASDoc), it states that the createPopUp() method returns an object of type IFlexDisplayObject. You are trying to assign this object to a variable data typed as a ConfirmScreen, hence the compiler error indicating that they might be possibly unrelated. By surrounding the expression with ConfirmScreen and parentheses, you have told the compiler they can be the same type.
| 11. | When you call the showPopUp() function, you will be passing it two parameters, named prod and title, which hold data to be displayed in the pop-up. As the last two lines of code in the function, assign those parameters to like named properties of the win object.
private function showPopUp(prod:Product,title:String):void{ win=ConfirmScreen(PopUpManager.createPopUp(this,ConfirmScreen,true)); win.prod=prod; win.title=title; }
The reason you worked so hard to create and understand the win variable is because you needed it to pass data to the pop-up window. You can use the prod property you defined when you created the component as one way to pass data to the pop-up window. The title property is part of the TitleWindow class (actually it is a property inherited from the TitleWindow's parent class, Panel).
Now that you have created the showPopUp() function, you will use it in your update and delete functions.
| 12. | At the bottom of the <mx:Script> block, build the skeleton for a private function named doProdUpdate(). Because the function will not return a value, data type it as void.
This is the function that is called when the user clicks the Update button.
| | | 13. | In the function, use the var statement to create a variable named prod, data typed as Product. This variable should be set equal to an invocation of the static buildProduct() method of the Product class, passing the object built in the <mx:Model> tag, prodModel, as a parameter.
var prod:Product=Product.buildProduct(prodModel);
The variable created in this statement will be passed as a Product object to be displayed in the showPopUp() function.
| 14. | As the last line of code in the function, call the showPopUp() function you built earlier. The first parameter should be the prod variable. The second parameter should be a concatenated string that displays the word "product," followed by the product name, followed by the word "updated." Your completed function should appear as follows:
private function doProdUpdate():void{ var prod:Product=Product.buildProduct(prodModel); showPopUp(prod,"product "+ prod.prodName +" updated"); }
Remember that the code in this function will be replaced after you learn how to send data back to the server. At that time, you'll invoke the remote method to actually update the record in the database.
| 15. | Now create a doProdDelete() function. The easiest way to do this is to simply copy the function you just created and change the name of the function as well as the word "updated" in the concatenated string.
private function doProdDelete():void{ varprod:Product = Product.buildProduct(prodModel); showPopUp(prod,"product "+ prod.prodName +" deleted"); }
With these two functions now created, you're ready for testing.
| 16. | Be sure that the ConfirmScreen and UpdateDeleteProd components, are saved. Run the DataEntry.mxml main application page.
To test the functionality, select a product from one of the categories, and you will see the form filled. Click either the Update or Delete button, and you will see the modal pop-up window appear. Close the pop-up window. Be sure to test both the Update and Delete buttons.
|
|
