ptg 328 LESSON : Using Drag and Drop Introducing the Drag and Drop Manager e rst step in understanding the Drag and Drop Manager is to learn the terminology sur- rounding it. e terminology is summarized in the following table. Drag and Drop Manager Terminology Term Definition Drag initiator Component or item from which a component is being dragged. Drag source Data being dragged. Format Property of the DragSource that allows an object to be dropped, or not, on another object. The data in the DragSource is also associated with the format. The data type of the formats are simple strings. Drag proxy Image displayed during the dragging process. Drop target Component that the drag proxy is over. e following gure gives you a visual representation of the terminology: Drag source (data being dragged—non-visual) Drag initiator (dragging from) Drag proxy (image during the drag) Drop target (dragging to) ere are three phases to a drag-and-drop operation: 1. Initiating: A user clicks a Flex component or an item in a Flex component and then begins to move the component or item while holding down the mouse. e component or item is the drag initiator. From the Library of Wow! eBook Download from www.eBookTM.com ptg 329 Dragging and Dropping Between Two DataGrids 2. Dragging: While holding down the mouse button, the user moves the mouse around the screen. Flex displays an image called a drag proxy, and the associated non-visual object called the drag source holds the data associated with the component or item being dragged. 3. Dropping: When the user moves the pointer over another component that will allow it, the item can be dropped on a drop target. e data is then inserted into the new compo- nent in some way. Flex components fall into two groups when it comes to drag-and-drop support: those with enhanced drag-and-drop functionality and those without. e following list-based controls have enhanced support for drag and drop: <s:List>• <mx:DataGrid>• <mx:PrintDataGrid>• <mx:Tree>• <mx:Menu>• <mx:List>• <mx:HorizontalList>• <mx:TileList>• What this means to you as a developer is that your life will be a little bit easier when imple- menting drag and drop with those controls that have enhanced support. In fact, in many cases that might require no more than setting a single property value for each of the controls involved in the drag-and-drop operation. Dragging and Dropping Between Two DataGrids Yo u r  r s t f o r a y i n t o i m p l e m e n t i n g d r a g - a n d - d r o p o p e r a t i o n s i n F l e x w i l l b e b e t w e e n t w o DataGrids. Because they are list-based components and have enhanced drag-and-drop support, you will need to write very little code. Two properties are important in this rst phase: dragEnabled and dropEnabled. Here are their descriptions: dragEnabled• : Assigned a Boolean value to specify whether the control is allowed to act as a drag initiator (defaults to false). When it’s true, the user can drag items from the component. From the Library of Wow! eBook Download from www.eBookTM.com ptg 330 LESSON : Using Drag and Drop dropEnabled• : Assigned a Boolean value to specify whether the control is allowed to act as a drop target (defaults to false). When it’s true, the user can drop items onto the control using the default drop behavior. Stated most simply, you set the dragEnabled property in the component from which you are dragging to true, and set the dropEnabled property in the component on which you are drop- ping to true. So now you will put your drag-and-drop knowledge to use by implementing drag and drop from one DataGrid to another DataGrid. 1 Import the DragDropStart.fxp from the Lesson13/independent/ folder into Flash Builder. Please refer to Appendix A for complete instructions on importing a project. 2 Open the Task1_DG_to_DG.mxml le. Yo u w i l l u s e t h i s p r o j e c t i n s t e a d o f t h e F l e x G r o c e r o n e b e c a u s e s o m e o f t h e w o r k i n t h i s lesson will not be directly involved with the FlexGrocer site. 3 Examine the code in the Task1_DG_to_DG.mxml le, and then run it. Note that the existing code does not use any concepts you have not already learned in this book. e le uses an HTTPService remote procedure call (RPC) to retrieve grocery info. e le then uses a result handler to place the data into an ArrayCollection, which is then used as a dataProvider in a DataGrid. When you run the application, you see you have a DataGrid populated with grocery product information and another DataGrid below it. Try to drag and drop between the DataGrids; you will see that this functionality is not yet working. 4 In the rst DataGrid, set the dragEnabled property to true. Run the application; you can click one of the rows in the DataGrid and drag the drag proxy around the screen. Setting this property did two obvious things: It enabled dragging and created the drag proxy, the image attached to the pointer when dragging. Another non-visual event occurred at the same time: A DragSource object was created to hold the data. e data is associated with a format named items, as the following gure from the debugger shows: From the Library of Wow! eBook Download from www.eBookTM.com ptg 331 Dragging and Dropping Between Two DataGrids DragSource object Actual data here 5 In the <fx:Script> block below the existing variable declaration, create a bindable private variable named targetGridDP of data type ArrayCollection and assign it a new ArrayCollection. en bind this variable as the dataProvider of the second DataGrid, whose id is targetGrid. [Bindable] private var targetGridDP:ArrayCollection=new ArrayCollection(); … <mx:DataGrid id=”targetGrid” dataProvider=”{targetGridDP}” ese two steps initialize the dataProvider of the drop target DataGrid. is means it tells the control what the data type is of the data it will be dealing with. If you do not do this, you will get runtime errors. 6 In the second DataGrid, set the dropEnabled property to true. Your second DataGrid should appear as follows: <mx:DataGrid id=”targetGrid” dataProvider=”{targetGridDP}” dropEnabled=”true”> <mx:columns> <mx:DataGridColumn dataField=”name” headerText=”Product”/> <mx:DataGridColumn dataField=”category” headerText=”Category”/> </mx:columns> </mx:DataGrid> From the Library of Wow! eBook Download from www.eBookTM.com ptg 332 LESSON : Using Drag and Drop Yo u ’ v e d o n e t h r e e b a s i c s t e p s s o f a r t o e n a b l e d r a g - a n d - d r o p f o r t h e a p p l i c a t i o n : Added the • dragEnabled property to the drag initiator Initialized the drop target’s • dataProvider Added the • dropEnabled property to the drop target Now you’re ready to test. 7 Run the application and drag from the rst DataGrid and drop onto the second. Notice that the entire set of data for the row is dragged, not just the visible properties in the DataGrid. e category column is not displayed in the rst DataGrid, but when dropped, that column is displayed in the second DataGrid. is shows you that all the data for the row is in the DragSource, not just the rows that happen to be displayed. Drop target DragSource object From the Library of Wow! eBook Download from www.eBookTM.com ptg 333 Dragging and Dropping Between a DataGrid and a List Dragging and Dropping Between a DataGrid and a List In the description of the dropEnabled property, the following sentence was used: “When it’s true, the user can drop items onto the control using the default drop behavior.” So what is this “default drop behavior”? Basically it means that Flex will try to gure out what should be dropped and do what it thinks is best, but that might not be what you want. In the previous exercise it was clear to Flex that when dragging from one DataGrid to another, the columns in the drop target DataGrid should be lled with like-named properties from the DragSource data. In this task you will drag from a DataGrid to a List component. In this case the “default drop behavior” won’t know what data to drop into the List component and will dump the whole object into the List, which is not what you want. Yo u w i l l u s e a d r a g e v e n t t o g e t t h e d a t a t h a t y o u w a n t i n t o t h e L i s t c o m p o n e n t . H e r e i s a s u m - mary of the events for both the drag initiator and the drop target: Drag Initiator Events Drag Events Description mouseDown and mouseMove (MouseEvent class) Not drag events but used to start the drag-and-drop process when not using dragEnabled components. The mouseDown event is broadcast when the user selects a control with the mouse and holds down the mouse button. The mouseMove event is broadcast when the mouse moves. dragComplete event (DragEvent class) Broadcast when a drag operation is completed, either when the drag data drops onto a drop target or when the drag-and-drop operation ends without performing a drop operation. Drop Target Events Drag Events (all events of the DragEvent class) Description dragEnter Broadcast when a drag proxy moves over the target from outside the target. dragOver Broadcast as the user moves the pointer over the target, after the dragEnter event. dragDrop Broadcast when the mouse is released over the target. dragExit Broadcast when the user drags outside the drop target, but does not drop the data onto the target. From the Library of Wow! eBook Download from www.eBookTM.com ptg 334 LESSON : Using Drag and Drop Now it is time to get to work. 1 Examine the code in the Task2_DG_to_List.mxml le, and then run it. Drag from the DataGrid to the List; you will see [objec t O bject] appear in the List. e default drop behavior did not know what data you wanted placed in the List, so it dropped the whole data object in. Because the List cannot display the entire object, it lets you know what has happened by displaying [o bject O bjec t]. e following gure shows the default behavior when dragging from DataGrid to the List. 2 Add a dragDrop event listener to the List, and select Generate DragDrop handler to have Flash Builder create the event handler for you. e code generated calls the newly created event handler and passes the event object as a parameter. <s:List id=”targetList” width=”200” dropEnabled=”true” dataProvider=”{targetListDP}” dragDrop=”targetList_dragDropHandler(event)”/> e event is named dragDrop, and you have no control over that. e function name is created using the instance name of the dispatching object, followed by an underscore, followed by the event name, nally followed by the word Handler. 3 Check that the event handler was created in the <fx:Script> block. Note that the event is data typed as DragEvent and the function will not return any data, so the data type is void. is function will be called when the user drops the drag proxy onto the List, which is the drop target in this application. Later in this task, you will write code in this function to display just the name of the product in the List. 4 Remove the TODO comment from the newly created event handler. As the rst line of code in the function, create a variable local to the function named dgRow typed as Object. Assign the dgRow variable the data in the DragSource object associated with the ite ms format. Use the dataForFormat() method. var dgRow:Object=event.dragSource.dataForFormat(“items”); From the Library of Wow! eBook Download from www.eBookTM.com ptg 335 Dragging and Dropping Between a DataGrid and a List e dataForFormat() method is a method of the DragSource class. It retrieves from the DragSource object the data associated with the particular format—in this case, items. NoTe: Remember that the format name associated with data in a DataGrid is always item s. 5 Set a breakpoint at the closing brace of the doDragDrop() function. You do this by double- clicking in the marker bar just to the le of the line numbers in the editor. You will see a small blue dot appear to indicate the breakpoint was set. e breakpoint will cause Flash Builder to halt execution at the marked line of code, and you will be able to check values of variables. Recall that you rst learned about debugging in Lesson 2, “Getting Started.” 6 Debug the application and drag a row to the List. When you drop the drag proxy, the process ow will return to Flash Builder. Open the Flash Debug perspective. Examine the dgRow variable value in the Variables view. You should see that the variable contains all the data from that DataGrid row. e following gure shows the row of data being dragged: Notice that the variable contains an array of length 1, which means you have only 1 index, which is 0. Also note that the name property contains the name of the product. From the Library of Wow! eBook Download from www.eBookTM.com ptg 336 LESSON : Using Drag and Drop Tip: If you want to allow the user to drag multiple rows of data, set the DataGrid allowMultipleSelection property equal to true. 7 Ter mi nate t he de bu gg ing sess ion by c li ck in g the re d squ are in e it her the De bu g or Console views. Return to the Flash perspective by clicking the chevron (>>) in the upper- right corner of Flash Builder and selecting that perspective. Normally, the Flash perspective is best to work in because you can see so much more of your code. 8 As the third line of code in the function, add the name of the product to the List by using the addItem() method of the List’s dataProvider. Remember that the dgRow variable con- tained an array of length 1, so use dgRow[0].name to reference the name. targetList.dataProvider.addItem(dgRow[0].name); is is a case in which viewing how the data is stored using the debugger is very helpful in retrieving the information. 9 Run the application and drag from the DataGrid to the List. You should see the product being placed in the List, but [obje c t O bjec t] also appears. e event continued to do what it was supposed to do, even though you displayed some dierent data; hence, you still see the reference to the object. 10 As the last line in the function, use the event class’s preventDefault() method to cancel the event default behavior. event.preventDefault(); In this case, you can cancel the default behavior. Not all events can be canceled; you must check the documentation for denitive answers on an event-by-event basis. By canceling this event, you prevent the display of [object O bject] in the List. 11 Run the application. When you drag from the DataGrid to List, only the name of the product appears in the List. is wraps up our second task in this lesson on drag and drop. From the Library of Wow! eBook Download from www.eBookTM.com ptg 337 Using a Non-Drag-Enabled Component in a Drag-and-Drop Operation Using a Non-Drag-Enabled Component in a Drag-and-Drop Operation So far, you have been taking advantage of enhanced functionality in list-based components when it concerns drag and drop. Now it is time to learn how to implement drag and drop on non-enhanced components. In this particular task, the use case is very simple: You want to drag a Label control to a List. Because the Label does not have enhanced drag-and-drop func- tionality, there is more of a burden on you as the developer to implement it. Understanding what the list-based components did for you is a good place to start when hav- ing to write all the implementation yourself. Here is a list of mechanisms, hidden from you when using the list-based components, that you will need to use when implementing drag and drop without the help of the enhanced components: Assign the data to the DragSource object.• Check to see whether the formats allow dropping onto the drop target.• Use the data in the drop target (although in the second exercise you did some of • this manually). Permit the component to be dragged.• Accept the drop.• Although you have been using the DragSource class up to now in this lesson, you will need to dig deeper into the class when implementing all the functionality yourself. In this exercise, you use the following methods of the DragSource class: DragSource Class Methods Method Description addData(data:* ,fo r m a t:Strin g):v oid Adds data to the associated format in the DragSource object; the * denotes that the data can be of any data type. hasFormat(format:String):Boolean Returns true if the DataSource object contains a matching format of the drop target; otherwise, it returns false. dataForFormat(format:String):Array of * Retrieves the data for the specified format added by the addData() method; returns an Array of objects containing the data in the requested format; a single item is returned in a one-item Array. From the Library of Wow! eBook Download from www.eBookTM.com [...]... assign the source property of the BitmapImage the value of the content property of the Image tag Why not just assign the source property of Image to the source property of BitmapImage? This, again, goes back to the functionality of the Image tag You specify a source in the Image tag, which is the path to the object to load The Image tag then places the retrieved image in the content property The BitmapImage... + 1; } This method allows users to navigate from the CustomerInfo to the CreditCardInfo to the Review views of the ViewStack Whether they are in the CustomerInfo or the CreditCardInfo view, clicking the Continue button will bring them to the next screen 14 Still in the Script block, add a method called handleEdit(), which accepts an event as an instance of the Event class and a void return type The. .. to see whether the formats of the two objects match Use the hasFormat() method of the DragSource object, which is contained in the event object The argument of the hasFormat() method should be the format parameter passed to the function Remember the hasFormat() method returns true if the DataSource object contains a matching format of the drop target; otherwise, it returns false if(event.dragSource.hasFormat(format)){... DragSource was imported for you Else, import mx.core DragSource manually Remember that the addData() method’s two parameters assign the data and the format to the DragSource object In this case the data is the product being displayed in the VGroup, and the format is the format string passed to the event handler 7 As the last line of code in the function, permit the Image to be dragged by calling the. .. myLabelData=event.dragSource.dataForFormat(format); myList.dataProvider.addItem(myLabelData); } Now when you drag the Label to the List, you will see that the data from the Label, the String “My data here” is displayed in the List The following figure shows the List after successfully dropping the Label data Download from www.eBookTM.com From the Library of Wow! eBook Dragging a Grocery Item to the Shopping Cart 343 ... can invoke directly from the class without first instantiating it 8 Run the application and drag the Label At this point there is no drop target that will accept the Label You now move on to coding the List to accept the drop of the Label and to display the data passed in the DragSource in the List 9 In the List, add a dragEnter event and have it call a function named doDragEnter() The function should... variable local to the function named ds typed as a DragSource and set it equal to a new DragSource object var ds:DragSource=new DragSource(); This creates the DragSource object that will have data added to it 6 Next in the function, use the addData() method of the ds DragSource object to add the data passed in the dsData parameter to the ds object Associate it with the format passed in the format parameter... dragDrop=”doDragDrop(event,myFormat’)” ’ Download from www.eBookTM.com From the Library of Wow! eBook 342 LESSON 13 : Using Drag and Drop You are passing the data needed to have the data retrieved from the DragSource and have it displayed in the List 16 At the bottom of the block, create a private function named doDragDrop(), which returns void The function should accept two parameters Name the first parameter event,... ProductItem.mxml from the components package 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 3 Locate the just below the tag set In that container, locate the ... In this task, use the string cartFormat mouseDown=”img_mouseDownHandler(event,cartFormat’)” ’ Download from www.eBookTM.com From the Library of Wow! eBook 344 LESSON 13 : Using Drag and Drop By placing the mouseDown event on the Image, it will enable the user to start the drag process by clicking the image 5 Locate the newly created event handler in the block and remove the TODO comment Add . in the List. 11 Run the application. When you drag from the DataGrid to List, only the name of the product appears in the List. is wraps up our second task in this lesson on drag and drop. From. drop without the help of the enhanced components: Assign the data to the DragSource object.• Check to see whether the formats allow dropping onto the drop target.• Use the data in the drop target. allow the dropping of the initiator. From the Library of Wow! eBook Download from www.eBookTM.com ptg 3 41 Using a Non-Drag-Enabled Component in a Drag-and-Drop Operation 11 Insert into the function