In this procedure you learn how to customize widgets using the ModelHelper class in the Genero Browser Client (GBC) project.

The GBC has two main widgets types:

• Simple widgets
• Container widgets

The ModelHelper class is designed to help you with their customization. The source is available at gbc-project-dir/src/js/base/helpers/ModelHelper.js. For details about the ModelHelper APIs and their functions see API reference.

Extending a basic widget using ModelHelper

The sample code creates a basic 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'],
  /**
   * @param {gbc} context
   * @param {classes} cls
   */
  function(context, cls) {

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

        constructor: function() {
          $super.constructor.call(this);
          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>";
          }
        }
      };
    });
  }
);