Servoy Tutorial: Decorator Design Pattern – OOP

    Servoy Tutorial Photo Credit: hernan.seoane via Compfight

    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.

    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.

    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.

    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).

    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).

    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:

    This is how you use the decorator object approach:

    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.

    Please subscribe to receive notification when new articles are published, and share your comments below.

    Gary Dotzlaw

    Gary Dotzlaw

    CEO at Dotzlaw Consulting
    Gary Dotzlaw has 20+ years of experience as a professional software developer and has worked with over 100 companies throughout the USA and Canada. Gary has extensive qualifications in all facets of the project life cycle, including initial feasibility analysis, conceptual design, technical design, development, implementation and deployment. Gary is an expert Servoy Developer, with extensive large-commercial project experience, and has written numerous advanced tutorials on Servoy development.