Crear widgets propios

Para crear un widget propio es muy importante entender el ciclo de vida que tienen. Los widgets se declaran usando el módulo dijit/_WidgetBase y ejecutará los siguientes métodos en este orden:

1. constructor
2. postcript
   1. postMixInProperties
   2. buildRendering
   3. postCreate(): es el método más importante a tener en cuenta y se ejecuta después de que todas las propiedades hayan sido ejecutadas pero antes de que el fragmento sea añadido al código.
3. startup(): este método se introduce para gestionar el widget después de haber sido añadido al DOM. Si el widget se instancia a través de código habrá que llamar a este método manualmente.

Ejemplo:

Se pretende crear un widget consistente en un botón-contador. Cada vez que se haga clic en el botón se incrementará en uno el valor del contador.

La función constructor(opt) del widget espera recibir como parámetro un objeto con dos valores:

• id: con el identificador del elemento del DOM donde se va a renderizar.
• init: con el valor al que se debe inicializar el contador (por defecto: 0).

define([
  "dojo/_base/declare",
  "dojo/dom-construct",
  "dijit/_WidgetBase"
  ],function(declare, domConstruct, _WidgetBase){

    return declare([_WidgetBase], {

      constructor: function(opt){
          this._i = opt.init || 0;

          if(!opt.id){
            console.error("Debes especificar un id del elemento");
            return -1;
          }
          this._id = opt.id;
      },

      buildRendering: function(){
        // create the DOM for this widget
        this.domNode = domConstruct.create("button", {innerHTML: this._i});
        domConstruct.place(this.domNode, this._id);
      },

      postCreate: function(){
        // every time the user clicks the button, increment the counter
        this.connect(this.domNode, "onclick", "increment");
      },

      increment: function(){
        this.domNode.innerHTML = ++this._i;
      }

    });
});

También definiremos tres métodos más:

• buildRendering: genera y añade el elemento al DOM.
• postCreate: vincula la función increment() al evento clic del elemento del DOM.
• increment: aumenta el valor del contador.

La siguiente tarea es utilizar el widget creado en una aplicación. Para ello comenzamos inicializando la variable dojoConfig:

var dojoConfig = (function(){
    var base = location.href.split("/");
    base.pop();
    base = base.join("/");
    return {
      async: true,
      isDebug: true,
      packages:[{
         name: 'myApp', location: base + '/js'
     }]
    };
  })();

Ejecutamos una función anónima que recupera la URL donde se está ejecutando el fichero index.html que incluye el widget que y establecemos un paquete con nombre myApp que tiene como ruta la misma que el fichero index.html + /js. Así podremos usar el widget de la siguiente manera:

require([
  "myApp/MyWidget",
  "dojo/domReady!"
  ],function(MyWidget){

    myWidget = new MyWidget({
      id: "container",
      init: 3
    });
  }
);

Ejemplo en funcionamiento Código completo