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

Introduction...

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

Modularity...

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


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

References

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){
                this.name = name;
                this.age = age;
                this.residence = residence;
                }
            });
});

How to define a Dojo widget...


define([  // Here is the set of dependencies on other modules
    "dojo/_base/declare", 
    "dijit/_WidgetBase", 
    "dijit/_TemplatedMixin", 
    "dijit/_WidgetsInTemplateMixin",
    "dojo/text!custom/templates/MyWidget.html", // The template file
    "dijit/form/Button"
    ], 
    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

References

Use a spacebar or arrow keys to navigate