| The culmination of your work in this lesson is to implement dragging a grocery item into the shopping cart, which you will do in this task. The tasks you have performed so far in this lesson have prepared you well for this last task; in fact, some of the code you have already written will be copied and pasted for use in this task. In this task, you will permit the user to click the grocery item, drag it to the small shopping cart, and then drop it in. The grocery item is displayed in a Canvas, and the shopping cart is a List. Because the Canvas is not a drag-and-dropenhanced component, you will have to pattern your code here after what you just wrote in the section, "Using a NondragEnabled Component in a Drag-and-Drop Operation." 1. | Open the file views/ecomm/GroceryDetail.mxml.
This is the component in which the grocery data is displayed, so this is where you will have to permit the data to be dragged.
Tip  | At first, you will drag all the data to the shopping cart and then write the code so that just the image of the item acts as the drag proxy. |
| | | 2. | In the <mx:Canvas> which is the root tag of the component, add a mouseMove event and have the event call a function named dragIt(). The function call should pass four parameters. The first is the drag initiator, which in this case is the component itself, which you reference as this. The second parameter is the data you will later place in the DragSource object. In this case, it is the instance of the Product class named groceryItem. The third parameter is the event, which is named event. The last parameter is the format that will be associated with this data. In this task, use cartFormat.
mouseMove="dragIt(this,groceryItem,event,'cartFormat')"
By placing the mouseMove event on the root container tag of the component it will enable the user to start the drag process by clicking any information about the grocery item.
| 3. | Open the file Task3_Label_to_List.mxml and copy the dragIt() function from the <mx:Script> block of that file to the bottom of the <mx:Script> block of GroceryDetail.mxml. Change the data type of the first parameter, initiator, from Label to Canvas. Change the data type of the second parameter, dsData, from String to Product.
private function dragIt(initiator:Canvas,dsData:Product,event:MouseEvent,format:String):void{ var ds:DragSource=new DragSource(); ds.addData(dsData,format); DragManager.doDrag(initiator,ds,event); }
The way in which you built this function in the previous section enabled you to bring it into this task almost unchanged. Because the initiator is a Canvas instead of a Label, and because the data you passed to it is an instance of a Product instead of a String, you had to change those data types and nothing else.
Recall that this function has two main purposes: to get data into the object being dragged and to permit the component to be dragged. The first line of code creates a new DragSource object; then the second line places the Product object passed to the function into the DragSource object and associates it with the format passed to the function. The third line of code actually enables the Canvas that contains the grocery item information to be dragged.
| 4. | At the top of the <mx:Script> block, import the mx.managers.DragManager and mx.core.DragSource classes.
These classes are used in the function you just copied into the file.
| 5. | Run the EComm.mxml application. You should be able to drag the grocery item data.
You see the drag proxy is the outline of the Canvas, or a big rectangular box. Later in this task, you will change the drag proxy to the image of the grocery item.
At this point there is no drop target, so you cannot drop the data anywhere.
| 6. | Open the file EComm.mxml.
This file contains the List that is your shopping cart to which grocery items are dragged.
| | | 7. | Locate the List with the id of cartView and add a dragEnter event to the List. In the ActionScript the event executes, call a doDragEnter() function and pass it two parameters: event and the String cartFormat.
dragEnter="doDragEnter(event,'cartFormat')"
You pass the information to this function that will permit the drag initiator to be dropped on the List.
| 8. | Open the file as/ecomm.as.
Remember that this file is actually what would be in the <mx:Script> block in EComm.mxml, but it was pulled out and placed in an external file.
| 9. | From the file Task3_Label_to_List.mxml, copy the doDragEnter() function from the <mx:Script> block and paste it to the bottom of the ecomm.as file.
private function doDragEnter(event:DragEvent,format:String):void{ if(event.dragSource.hasFormat(format)){ DragManager.acceptDragDrop(IUIComponent(event.target)); } }
Because you wrote the function generically using only the parameters passed to the function, no changes need to be made in this function.
This function has only one purpose: to check whether formats enable the drag initiator to be dropped. The if statement determines whether there are matching formats; then the acceptDragDrop() method allows the actual dropping to take place.
| 10. | At the top of the file, import the mx.managers.DragManager, mx.events.DragEvent and mx.core.IUIComponent classes.
These classes are used in the function you just copied into the file.
| 11. | Run the EComm.mxml application. You should be able to drag the grocery item data; when you drag over the shopping cart List, you should see the red X disappear and you can drop the drag proxy.
At this point, nothing happens when you drop the drag proxy.
| | | 12. | In EComm.mxml, locate the List with the id of cartView and add a dragDrop event to the List. In the ActionScript, the event calls a doDragDrop() function and passes it two parameters: event and the String cartFormat.
dragDrop="doDragDrop(event,'cartFormat')"
You pass the information to this function which will place data in the shopping cart.
| 13. | In the file Task3_Label_to_List.mxml, copy the doDragDrop() function from the <mx:Script> block of that file to the bottom of the ecomm.as file. Remove the code in the body of the function so you are left with just the skeleton of the function.
private function doDragDrop(event:DragEvent,format:String):void{ }
In this case, the code in the function will completely change. You previously placed a String in a Label; now you will be adding a ShoppingCartItem to a shopping cart, so none of the existing code is applicable except the signature of the function.
Tip | Open the file valueObjects/ShoppingCartItem.as and review that the constructor's parameters are a Product object and an optional quantity. |
| 14. | As the first line of code in the function, create a variable local to the function named prodObj, data typed as Product. Use the static buildProduct() method of the Product class to set prodObj equal to a new Product object. The argument of the buildProduct() method should be the object in the DragSource. Retrieve it using the dataForFormat() method.
var prodObj:Product=Product.buildProduct(event.dragSource.dataForFormat(format));
This Product object is needed to create a ShoppingCartItem in the next step of the task.
| 15. | Next in the function, create a variable local to the function named sci, data typed as ShoppingCartItem. Set that variable equal to a new ShoppingCartItem. The argument of the ShoppingCartItem constructor should be the Product object created in the last step.
var sci:ShoppingCartItem = new ShoppingCartItem(prodObj);
Here is a quick review of how the Product object got in the DragSource:
In steps 2 and 3 of this task you passed a Product object to the dragIt() function. The function placed the product object into the DragSource object using the addData() method and associated it with the cartFormat format. In this function you retrieved that same Product and will now place it in the shopping cart.
| | | 16. | As the last line of code in the function, invoke the addItem() method of the cart ShoppingCart object and pass the sci ShoppingCartItem variable as a parameter. Check to be sure your function appears as shown here.
private function doDragDrop(event:DragEvent,format:String):void{ var prodObj:Product=Product.buildProduct(event.dragSource.dataForFormat(format)) var sci:ShoppingCartItem = new ShoppingCartItem(prodObj); cart.addItem(sci); }
The method invocation actually places the ShoppingCartItem object in the shopping cart.
| 17. | As of Flex 2, there is a bug in the drop target's location. As a work around for the bug add the following code to the bottom of ecomm.as:
override public function localToContent(point:Point):Point { return point; }
| 18. | Run the application. You can now drag and drop grocery items into the shopping cart.
You see that the drag-and-drop operation is working, but the drag proxy is the whole container that surrounds the grocery item data. In the next step you add code so the drag proxy becomes just the image of the grocery item.
| 19. | Return to GroceryDetail.mxml and locate the dragIt() function in the <mx:Script> block. At the top of the function create a new Image object local to the function named imageProxy. Use the load() method of the Image class to assign the current imageName in the groceryItem to the Image object. You can find the correct path for the image by finding it in the existing <mx:Image> tag currently displaying the grocery item. Finally, set both the height and width of the new Image object to 80.
var imageProxy:Image=new Image(); imageProxy.load("../assets/"+groceryItem.imageName); imageProxy.height=80; imageProxy.width=80;
The reason you must create a new Image object is because by default the drag-and-drop operation removes the drag proxy from its source. You could have simply given the image being displayed an instance name and used it as the drag proxy, but after dragging and dropping the image would no longer be shown with the other grocery item data. Also, the default width and height are 0 by default when you create a new Image object in ActionScript, so you must set those property values for the image to be visible.
| | | 20. | In the DragManager.doDrag() method invocation, add a fourth parameter of imageProxy.
DragManager.doDrag(initiator,ds,event,imageProxy);
This fourth parameter represents the dragImage. Instead of the outline of the container of the grocery item data being the drag proxy, you have now specified that only the image of the item should be displayed when dragging is taking place.
| 21. | Check to be sure that your dragIt() function appears as follows; then run the application. You should be able to drag the image of the grocery item and drop it in the cart.
private function dragIt(initiator:Canvas,dsData:Product,event:MouseEvent,format: String):void{ var imageProxy:Image=new Image(); imageProxy.load("../assets/"+groceryItem.imageName); imageProxy.height=80; imageProxy.width=80; var ds:DragSource=new DragSource(); ds.addData(dsData,format); DragManager.doDrag(initiator,ds,event,imageProxy); }
 This completes the last task of the lesson.
|
|
