Decorator Design Pattern – OOP

This is a Servoy Tutorial on how to use the decorator design pattern with object-oriented programming in Servoy. This is an advanced Servoy tutorial, so you may want to familiarize yourself with the other object-oriented Servoy tutorials at this site before reading this one.

The purpose of the decorator pattern is to add additional functionality to your object dynamically at runtime. Since Javascript objects are mutable, this is a fairly straightforward process.

The idea behind the decorator pattern is that you start off with a base object that has some common properties and functions. You can then pick and choose from a pool of decorators to add additional functionality to the object, thereby customizing it for a specific situation.

Lets take a look at a real scenario to see how we use this pattern in Servoy. Assume that you are selling products, each product has a cost and a list price. Depending on who you sell that product to, you may need to add taxes to the list price in order to arrive at the final sales price. In Canada, depending on which province you sell the product to, the taxes vary. So how can the decorator pattern assist us in handling this scenario?

Well, first we need to create our base object that has the common properties for the products we will sell. This is our constructor.

/**
 * Parent Constructor
 * @constructor 
 * @extends {saleProto}
 * 
 * @param {String} itemNr
 * @param {Number} cost
 * @param {Number} list
 */
function Sale(itemNr, cost, list) {
	this.item = itemNr;
	this.cost = cost || 0;
	this.list = list || 0;
	this.provTax = 0;
	this.fedTax = 0; 
	this.totalTax = 0; 
	this.total = list || 0; 
}

Next, we need to define some common functions to the prototype of our constructor. Because we will be selling lots of products, we are putting our functions on the prototype to conserve memory; only one instance of the prototype and its functions will be shared among all objects created with the constructor. In this example, we are only adding a few functions; one to get the total of all taxes, and the other to get the total price for the item. In a live scenario, you would probably have a lot more functions defined on the prototype.

/**
 * A prototype method for the ItemPrice constructor
 */
function saleProto(){
	this.getTotal = function(){
		this.total = this.list + this.getTotalTax();
		return this.total || 0;
	};
	this.getTotalTax = function(){
		this.totalTax = this.provTax + this.fedTax;
		return this.totalTax || 0;
	}
}

Then we are ready to initialize the prototype for Servoy by assigning a self-invoked function to a variable, as we have seen in earlier Servoy tutorials.

/**
 * Initialize the constructor and proto methods
 */
var initItemPrice = (function(){
   Sale.prototype = new saleProto();
   Sale.prototype.constructor = Sale;
}())

Now we can look at two different ways to decorate our base object. The first approach is to use simple functions that receive a sales object and enhance it. Here is a series of functions that can be used to decorate the base object for Manitoba and Saskatchewan Provincial Sales Tax, Canadian Federal Sales Tax and to format the total in Canadian currency. Obviously, you could create many more decorator functions (like provincial taxes for the other Canadian provinces).

/**
 * Decorate with FederalTax
 * @param {Sale} oSale
 */
function setFedTax(oSale){
	return oSale.fedTax = oSale.list * 0.07;
}

/**
 * Decorate with ManitobaTax
 * @param {Sale} oSale
 */
function setMbTax(oSale){
	return oSale.provTax = oSale.list * 0.06;
}

/**
 * Decorate with SaskatchewanTax
 * @param {Sale} oSale
 */
function setSkTax(oSale){
	return oSale.provTax = oSale.list * 0.05;
}

/**
 * Decorate with CDN currency
 * @param {Sale} oSale
 */
function getTotalCDN(oSale){
	return oSale.total = "$" + (oSale.list +oSale.getTotalTax()).toFixed(2) + " CDN";
}

To use the decorator functions with our base object is now very simple. When we sell a product, we simply create a new instance of the base object using the constructor, and then decorate it depending on our needs, in the order that we want (if that’s important).

function useDecoratorMethod(){

	var newSale = new Sale("B100", 25, 200); // the item that was sold

	application.output(setFedTax(newSale));
	// 114.000000000000002
	application.output(setMbTax(newSale));
	// 12.0
	application.output(newSale.getTotalTax());
	// 26.0
	application.output(newSale.getTotal());
	// 226.0
	application.output(getTotalCDN(newSale));
	// $226.00 CDN
}

An even more elegant way to handle the decorating of the base object, in my opinion (because I prefer to work with objects), is to create a single decorator object that contains all the methods you need. This keeps all the decorator code in a single object, making it easier to maintain and extend. Here is my decorator object that does the same thing as the functions:

var saleDecorators = {
	fedTax: function(oSale){
		return oSale.fedTax = oSale.list * 0.07;
	},
	MBTax: function(oSale){
		return oSale.fedTax = oSale.list * 0.06;
	},
	SKTax: function(oSale){
		return oSale.fedTax = oSale.list * 0.05;
	},
	totalCDN: function(oSale){
		return oSale.total = "$" + (oSale.list +oSale.getTotalTax()).toFixed(2) + " CDN"
	}
};

This is how you use the decorator object approach:

function useDecoratorMethod(){

	var newSale = new Sale("B100", 25, 200); // the item that was sold

	application.output(saleDecorators.SKTax(newSale));
	// 10.0
	application.output(saleDecorators.totalCDN(newSale));
	// $222.00 CDN
}

If you have been following along with my Servoy tutorials, you should now be realizing that learning object-oriented programming is worth the effort. It will make your approach to solving problems more elegant, maintainable and extendable.

That concludes this Servoy tutorial on the decorator design pattern using object-oriented programming. I hope you enjoyed it, and I look forward to bringing you more Servoy tutorials in the future.