Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Brief introduction on Dojo Widgets creation


Every day applications using JavaScript: This means the browser need to load more JavaScript code


An application is modular means:

AMD (Asynchronous Module Definition)

The Asynchronous Module Definition API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded Load only what is required !!!

Create modules with Define

define('myModule',          // Module name
    ['foo', 'bar'],         // Dependencies
    function ( foo, bar ) { // Dependencies comes here as parameters
        var myModule = {    // Module definition
            doStuff: function(){
                console.log('Si ten gullongs !!!');
        return myModule;    // Return the module

Use modules with Require

    ['foo', 'bar'],             // Dependencies
    function ( foo, bar ) {     // Dependencies comes here as parameters
        foo.doSomething();      // Rest of your code here


Dojo Widgets

Note: The controller handles the widget behavior to external events, allows to interact with the control, get/set values, etc

Class inheritance...

JavaScript is prototype inheritance but Dojo allows us to simulate class inheritance using declare

define(['dojo/_base/lang', 'dojo/_base/declare'], // Dependencies
       function(lang, declare){
            // Define your own class
            return declare(null, // The superclass (null means none)
                {  // Then define your own class
                constructor: function(name, age, residence){
       = name;
                this.age = age;
                this.residence = residence;

How to define a Dojo widget...

define([  // Here is the set of dependencies on other modules
    "dojo/text!custom/templates/MyWidget.html", // The template file
    function(declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, template) {
        return declare("custom.MyWidget",   // The new class name
                        [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin],  // Dependencies
            // The code goes here
            templateString: template,

Widgets inheritance

Be aware with some documentation, it is out of date !!!

Widgets life cycle (I)

constructor: Common for all prototypes postscript: Common for all classes created with declare     create:         postMixInProperties:         buildRendering:         postCreate: Probably the main method. Allows to initialize the widget before the DOM code is added to the document. startup: Probably the second most important method. Executed once the widget code is added to the document.
NOTE: Startup must be executed manually when you create a widget programmatically

Widgets life cycle (II)

destroyRecursive: Usually is the method to be executed to destroy a widget.     destroyDescendants:     destroy: This is the method you need to implement in your widgets.         uninitialize:         destroyRendering:
NOTE: Within the destroy method ensure to call the superclass one too.

Widgets Events

_WidgetBase offers methods to work with events and more


Use a spacebar or arrow keys to navigate