Praveen Singh

Dojo Toolkit Tutorial (AMD): Simple template based widget using AMD concepts

Introduction`


Dojo Toolkit Tutorial (AMD): Simple template based widget using AMD concepts

A step-by-step tutorial for creating a modular template based widget in DOJO.
We will create a simple counter widget first and put the event on it.

step by step video tutorial



Setup


  1. Build package structure like below.

  2. Run everything in a server. If you are on mac, Simplest way is, run: python -m SimpleHTTPServer 8888 at DOJO_TEST level. On window....find similar way.

Code


A simple hook up index file


Path:DOJO_TEST/app/widget/index.html
<!DOCTYPE html>
<html>

<head>
 <title>Counter</title>
 <script>
 var dojoConfig = {
 async: true,
 packages: [{
 name: "app",
 location: "/DOJO_TEST/app"
 }]
 };
 </script>

</head>

<body>
 <div id="widgetContainer"></div>

 <script src="/DOJO_TEST/lib/dojo/dojo/dojo.js" data-dojo-config="async: true"></script>
 <script type="text/javascript">

 require(["app/widget/SimpleWidget"],
 function(SimpleWidget) {
 var widget = new SimpleWidget();
 widget.placeAt("widgetContainer");
 });
 </script>
</body>

</html>

                

Create a septate file for template and put the code like below

Path:DOJO_TEST/app/widget/templates/counterView.html

<div>
 <span>0</span>
 <br>
 <button>Increment</button>&nbsp;
 <button>Decrement</button>
</div>

                

A simple AMD module of counter widget.

Path:DOJO_TEST/app/widget/SimpleWidget.js

/**
 * define() is a foundational AMD API.
 * It allows us to define a module and its dependencies.
 * Once dojo/query and dojo/on are loaded (which doesn't happen until their dependencies are loaded, and so on),
 * the callback function is called and module instance passed to it.
 */
define([
    "dojo/_base/declare",
    "dojo/on",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dojo/text!./templates/counterView.html"
], function(declare, on, _WidgetBase, _TemplatedMixin, template) {

    /**
     * dijit._WidgetBase is the base class for all widgets in dijit, and in general
     * is the base class for all dojo based widgets.
     *
     * It provide life cycle method which get called at diffrent stages
     *
     */
    return declare([_WidgetBase, _TemplatedMixin], {

        /**
         * templateString is property used by _TemplatedMixin, to get the HTML template and put attach point
         * and event on it.
         * @type {[type]}
         */
        templateString: template,

        /**
         * constructor method will be called before the parameters are mixed into the widget,
         * and can be used to initialize arrays
         */
        constructor: function() {
            console.log("in constructor");
        },

        /**
         * Most used life cycle method of _WidgetBase.
         * At this stage, widget has been rendered but not attached to node.
         */
        postCreate: function() {
            console.log("in postCreate");

        }
    });
});

                


  • by this time your module should loaded.
  • You must be getting view: Two button and one label saying "0"
  • Nothing will happen if you click the button


Let's upgrade and put event on the view.

Path:DOJO_TEST/app/widget/templates/counterView.html

<div>
 <span data-dojo-attach-point="output"></span>
 <br>
 <button data-dojo-attach-point="inc" data-dojo-attach-event="onclick:incCounter">Increment</button>&nbsp;
 <button data-dojo-attach-point="dec" data-dojo-attach-event="onclick:decrCounter">Decrement</button>
</div>
                

Let's upgrade and put the handler for events.

Path:DOJO_TEST/app/widget/SimpleWidget.js

                /**
 * define() is a foundational AMD API.
 * It allows us to define a module and its dependencies.
 * Once dojo/query and dojo/on are loaded (which doesn't happen until their dependencies are loaded, and so on),
 * the callback function is called and module instance passed to it.
 */
define([
    "dojo/_base/declare",
    "dojo/on",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dojo/text!./templates/counterView.html"
], function(declare, on, _WidgetBase, _TemplatedMixin, template) {

    /**
     * dijit._WidgetBase is the base class for all widgets in dijit, and in general
     * is the base class for all dojo based widgets.
     *
     * It provide life cycle method which get called at diffrent stages
     *
     */
    return declare([_WidgetBase, _TemplatedMixin], {

        /**
         * templateString is property used by _TemplatedMixin, to get the HTML template and put attach point
         * and event on it.
         * @type {[type]}
         */
        templateString: template,

        counter: 0,

        /**
         * constructor method will be called before the parameters are mixed into the widget,
         * and can be used to initialize arrays
         */
        constructor: function() {
            console.log("in constructor");
        },

        /**
         * Most used life cycle method of _WidgetBase.
         * At this stage, widget has been rendered but not attached to node.
         */
        postCreate: function() {
            console.log("in postCreate");
            this.output.innerHTML = this.counter;

        },

        /**
         * Increases counter value to one.
         */
        incCounter: function() {
            console.log("in incCounter");
            this.output.innerHTML = (++this.counter);

        },

        /**
         * Decrease counter value to one.
         */
        decrCounter: function() {
            console.log("in decrCounter");
            this.output.innerHTML = (--this.counter);

        }

    });
});

                


On refreshing the HTML, you should get output like below

Contact Me


If you want to contact me for feedback or suggestion or doubt. You can do so by commenting on Blogger article or in Youtube contact section.

You can also approach me dropping me mail directly at mails.icodingclub@gmail.com

1 comment:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai

    ReplyDelete