Widgets with Modelhelper

The ModelHelper class can be found at gbc-project-dir/src/js/base/helpers/ModelHelper.js.

Extending a widget using ModelHelper

This sample code creates a simple widget for the header bar using some functions in the ModelHelper class. The code in the example is found in gbc-project-dir/customization/sample/js/MyHeaderBarWidget.js.

/// MyHeaderBarWidget.js
"use strict";

modulum('MyHeaderBarWidget', ['WidgetBase', 'WidgetFactory'],
  function(context, cls) {

    /**
     * @class MyHeaderBarWidget
     * @memberOf classes
     * @extends classes.WidgetBase
     */
    cls.MyHeaderBarWidget = context.oo.Class(cls.WidgetBase, function($super) {
      return /** @lends classes.MyHeaderBarWidget.prototype */ {
        __name: "MyHeaderBarWidget",
        /** @type {classes.ModelHelper} */
        _model: null,
        /** @type {number} */
        _appsCount: null,

        constructor: function(opts) {
          $super.constructor.call(this, opts);
          this._appsCount = 0;
          this._model = new cls.ModelHelper(this);
          this._model.addNewApplicationListener(this.onNewApplication.bind(this));
          this._model.addCloseApplicationListener(this.onCloseApplication.bind(this));
          this._model.addCurrentWindowChangeListener(this.onCurrentWindowChanged.bind(this));
        },

        onNewApplication: function(application) {
          ++this._appsCount;
          var elt = this.getElement().querySelector(".MyHeaderBarWidget-counter");
          elt.textContent = this._appsCount.toString();
        },

        onCloseApplication: function(application) {
          --this._appsCount;
          var elt = this.getElement().querySelector(".MyHeaderBarWidget-counter");
          elt.textContent = this._appsCount.toString();
        },

        onCurrentWindowChanged: function(windowNode) {
          var elt = this.getElement().querySelector(".MyHeaderBarWidget-title");
          if (windowNode) {
            elt.textContent = windowNode.attribute('text');
          } else {
            elt.textContent = "<NONE>";
          }
        }
      };
    });
  }
);