Dropping and Adding Items
The checkltemAcceptance method relies on some housekeeping operations performed as items are dropped: it expects the box weight to be correct and the allRMASerials list to be up-to-date. These go into Tree's onDndDrop extension point. The chain of events on a drop goes like this:
1. The user lets go of the mouse.
2. checkAcceptance and checkltemAcceptance are called. If they both return true, the drop proceeds.
3. Tree updates the display and the data store.
4. Lastly, Tree calls the onDndDrop extension point. If no method is connected there, the drop operation ends.
The signature for onDnDDrop is onDndDrop(dojo.dnd.source source, dojo. dnd.source[] nodes, boolean copy). It's like most other drag-and-drop extension points, but it adds the copy parameter, which is set to true if the user holds down [Shift while dragging.
This doesn't matter in our app.
boxDrop: function(source, nodes, copy) {
// The DnD controller contains the drop target (the box). // For convenience, convert this to an item var targetBoxItem = this.domToItem(this.dndController.current);
// The weight is init'ed to zero and we add weight as items // are dropped into it.
var currentBoxWeight = this.store.getValue(targetBoxItem, "weight");
// Handle more than 1 serial number, if needed for (var i=0;i<nodes.length;i++) { // Convert to an item var draggedItem = this.domToItem(nodes[i]); // Remember the serial number this.allRMASerials.push(ordJson.getValue(draggedItem,"id"));
// Add the weight of this serial, obtaining the weight from
// the order item var thisSerialWeight =
parseInt(ordJson.getValue(draggedItem,"weight")); currentBoxWeight += thisSerialWeight;
this.store.setValue(targetBoxItem, "weight", currentBoxWeight);
// Store it back in the item store, if(this.dndController.containerState == "Over"){ // Stop dragging this.dndController.isDragging = false;
// Create a new dropped item in the target var items = this.dndController.itemCreator( nodes, this.dndController.current
// Create a data store item for each dragged serial number // The tree then changes to match it. for(var i =0; i < items.length; i++){
pInfo = {parent: targetBoxItem, attribute: "children"}; var newItem = this.store.newItem(items[i], pInfo);
// Cancel all other event handlers this.dndController.onDndCancel();
- □ C1 Boxes E a box 1
BURT".
"6MMYH<5GS2
HRT4
S £3 Yodelling Pickle
PCKL1 + ^ Gummy Tapeworm
S -3 Gummy Haggis GMMYHGGS1 GMMYHGGS2 GMMYHGGS3 GMMYHGGS4 - order 9B8900 □ 3 Worlds Largest Inflatable Heart HRT1 HRT2I HRT3 HRTd
Figure 13.6: The tragic return of gummy haggis
Similar to checkltemAcceptance, the drop operation loops through all dropped items, adds the weights to the current box total, and stores the serial numbers in allRMASerials. At this point, the drop operation ends, and the user can drag another item. All of these operations happen in a controlled, intuitive fashion, and to the user, it's one fluid motion. In Figure 13.6, you can see the action in progress.
Between the two source files, there are about 250 lines of source code including comments. That's not too bad for an application with drag and drop, access to outside services, validation, and tree control!
Other JavaScript toolkits have tree widgets, but none has the clean MVC architecture of Dijit. Because dojo.data is flexible and standard, reading/writing hierarchical values is a breeze, no matter what the server data format is. And the tree display update is automatic. If you've ever tried writing data to the browser and then "screen-scraping" it back off to do calculations, you realize how important that integration is. It's a real time-saver. In the next chapter, we'll see another widget that integrates tightly with dojo.data: Grid.
Post a comment