| Your first foray into implementing drag-and-drop operations in Flex will be between two DataGrids. Because they are list-based components and have enhanced drag-and-drop support, this will require the least amount of coding on your part to make work. Two properties are important in this first 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 true, the user can drag items from the component. dropEnabled: Assigned a Boolean value to specify whether the control is allowed to act as a drop target (defaults to false). When 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 dropping 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. | Select File > New > Flex Project. Select Basic and then click Next.
You do not need FDS or ColdFusion support for this project.
| 2. | Make the project name flex2tfs_DragDrop and use your flex2tfs/Lesson12/dragDrop/start folder. Click Next.
The directory contains starter files you will use for your exploration of drag and drop.
| 3. | Click the Browse button next to the Main application file option and select the file Task1_DG_to_DG.mxml. Click OK and then click Finish.
You are creating a new project because some of the work in this lesson will not be directly involved with any of the three applications you are working on from the FlexGrocer site.
| 4. | Examine the code in the Task1_DG_to_DG.mxml file, and then run it.
Note that the existing code does not use any concepts you have not already learned in this book. The file uses an HTTPService remote procedure call (RPC) to get back grocery info. It then uses a result handler to place the data into an ArrayCollection and is then used as a dataProvider in a DataGrid. When you run the application you see you have a DataGrid populated with grocery product info and another DataGrid below it. Try to drag and drop between the DataGrids; you will see that this functionality is not yet working.
| | | 5. | In the first 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 mouse pointer when dragging. Another nonvisual event occurred at the same time, and that is a DragSource object was created to hold the data. The data is associated with a format named items, as the following screenshot from the debugger shows:
| 6. | In the <mx:Script> block below the existing variable declaration, create a bindable private variable named targetGridDP of data type ArrayCollection and set it equal to a new ArrayCollection. Then bind this variable as the dataProvider of the second DataGrid, whose id is targetGrid.
These two steps initialize the dataProvider of the drop target DataGrid. This 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 run-time errors.
| | | 7. | In the second DataGrid, set the dropEnabled property to TRue. Your second DataGrid should appear as follows:
<mx:DataGrid dataProvider="{targetGridDP}" dropEnabled="true"> <mx:columns> <mx:DataGridColumn dataField="name" headerText="Product"/> <mx:DataGridColumn dataField="category" headerText="Category"/> </mx:columns> </mx:DataGrid>
You've done three basic steps so far to drag-and-dropenable the application:
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.
| 8. | Run the application and drag from the first DataGrid and drop into the second.
Notice that the entire set of data for the row is dragged, not just the visible properties in the DataGrid. The category column is not displayed in the first DataGrid, but when dropped, that column is displayed in the second DataGrid. This shows you that all the data for the row is in the DragSource, not just the rows that happen to be displayed.
|
|
