If customer can only drag products around the page, it makes
no sense. So the next step is creating a ShoppingCartBehavior
Behavior class which implements Sys.Preview.UI.IDropTarget interface and will
be attached to the shopping cart DOM element to make it act as the drop target.
Still in ShoppingCart.js file, add the instance fields to
the ShoppingCartBehavior class.
Listing 15 - Instance Fields of ShoppingCartBehavior
Dflying.ShoppingCartBehavior = function(element) {
// initialize base class
Dflying.ShoppingCartBehavior.initializeBase(this, [element]);
// product list of this shopping cart
this._products = new Object();
}
Similar to DraggableProductBehavior, then we have to define
the prototype part of the ShoppingCartBehavior class.
Listing 16 - Prototype Part of ShoppingCartBehavior
Dflying.ShoppingCartBehavior.prototype = {
}
In the prototype part of the ShoppingCartBehavior class, we first
implement the IDropTarget interface. List 17 shows the methods defined in IDropTarget
interface and the customized implementations in our case.
Listing 17 - Implement IDragSource Interface
// return a DOM element represents the shopping cart
get_dropTargetElement: function() {
return this.get_element();
},
// if this draggable item can be dropped into this drop target
canDrop: function(dragMode, dataType, data) {
return (dataType == "Product" && data);
},
// drop this draggable item into this drop target
drop : function(dragMode, dataType, data) {
if (dataType == "Product" && data) {
// the first product of this type, set quantity to 1
if (this._products[data.Id] == null) {
this._products[data.Id] = {Product: data, Quantity: 1};
}
// already contains products of this type, increase the quantity by 1
else {
this._products[data.Id].Quantity++;
}
// refresh shopping cart UI
this._refreshShoppingCart();
// set background color of shopping cart element to white
this.get_element().style.backgroundColor = "#fff";
}
},
// this method will be called when a draggable item is entering this drop target
onDragEnterTarget : function(dragMode, dataType, data) {
if (dataType == "Product" && data) {
// set background color of shopping cart element to gray
this.get_element().style.backgroundColor = "#E0E0E0";
}
},
// this method will be called when a draggable item is leaving this drop target
onDragLeaveTarget : function(dragMode, dataType, data) {
if (dataType == "Product" && data) {
// set background color of shopping cart element to white
this.get_element().style.backgroundColor = "#fff";
}
},
// this method will be called when a draggable item is hovering on this drop target
onDragInTarget : function(dragMode, dataType, data) {
},
The helper function _refreshShoppingCart()
mentioned above is used to refresh the UI of the shopping cart according to the
products in it.
Listing 18 - Helper Function _refreshShoppingCart()
// refresh shopping cart UI according to current products
_refreshShoppingCart: function() {
var cartBuilder = new Sys.StringBuilder();
for (var id in this._products) {
cartBuilder.append("<div>");
cartBuilder.append(this._products[id].Product.Name);
cartBuilder.append(" * ");
cartBuilder.append(this._products[id].Quantity);
cartBuilder.append("</div>");
}
this.get_element().innerHTML = cartBuilder.toString();
},
And another function defined in this prototype part of the ShoppingCartBehavior
class is getProductsToBeOrdered(). The other part of
the application can just call this function to get a dictionary object that
represents products currently in customer's shopping cart; the key is the product
ID and the value is product quantity.
Listing 19 - getProductsToBeOrdered() Function
getProductsToBeOrdered: function() {
var productsToBeOrdered = new Object();
for (var id in this._products) {
productsToBeOrdered[id] = this._products[id].Quantity;
}
return productsToBeOrdered;
},
The next will be the initialize()
and dispose() method, which is essential to ASP.NET
AJAX client side components. You may find the calls to DragDropManager's registerDropTarget() and unregisterDropTarget()
method to register/unregister the drop target.
Listing 20 - initialize() and dispose() Method
initialize: function() {
// initialize base class
Dflying.ShoppingCartBehavior.callBaseMethod(this, "initialize");
// register this drop target in DragDropManager
Sys.Preview.UI.DragDropManager.registerDropTarget(this);
},
dispose: function() {
// unregister this drop target in DragDropManager
Sys.Preview.UI.DragDropManager.unregisterDropTarget(this);
// disponse base class
Dflying.ShoppingCartBehavior.callBaseMethod(this, "dispose");
}
After finishing the prototype part, let us register it with
the client side ASP.NET AJAX framework.
Listing 21 - Register ShoppingCartBehavior Class
Dflying.ShoppingCartBehavior.registerClass("Dflying.ShoppingCartBehavior",
Sys.UI.Behavior, Sys.Preview.UI.IDropTarget);
Once the ShoppingCartBehavior is attached to a DOM element,
the element could accept products dropping into it.
Before closing ShoppingCart.js, we should also include this
line of code at the bottom of the file to notify ASP.NET AJAX client side
framework that this JavaScript file has been downloaded successfully.
Listing 22 - Notify ASP.NET AJAX Client Side
Framework
if(typeof(Sys)!=='undefined') Sys.Application.notifyScriptLoaded();