Create widgets with the ModelHelper class APIs

The ModelHelper class in the Genero Web Client for JavaScript (GWC-JS) project provides APIs to help you customize widgets.

GWC-JS has two main widgets types:

Simple widgets (see Simple widget)
Container widgets (see Container widget)

The ModelHelper class provides APIs to help customization. It is available at project_dir/src/js/base/helpers/ModelHelper.js.

Table 1 lists the ModelHelper APIs and describes their function.

Table 1. ModelHelper APIs
Function	Description
addNewApplicationListener(`fct`) returns `unfct`	`fct` is the function called when a new application is started. `unfct` is the function to call to unregister the listener
addCloseApplicationListener(`fct`) returns `unfct`	`fct` is the function called when an application is closed. `unfct` is the function to call to unregister the listener.
addCurrentWindowChangeListener(`fct`) returns `unfct`	`fct` is the function called when the current window changes. `unfct` is the function to call to unregister the listener.
addAuiUpdateListener(`fct`) returns `unfunct`	`fct` is the function called when any DVM response is received . Be aware that this mechanism is global to all applications. On heavy updates this can slow down the application. `unfct` is the function to call to unregister the listener.
getCurrentApplication returns `win`	`win` is the current application object or null if the application cannot be found.
getApplication returns `app`	`app` is the application to which the widget belongs.
getNode(idref) returns `node`	`idref` is the AUI tree id reference. `node` is the related widget node or null if the node is not found.
getUserInterfaceNode returns `node`	`node` is the widget representing the User Interface node in the AUI tree or null if not found.
getAnchorNode returns `node`	`node` is the node holding the representation of value in the AUI tree.
getFieldNode returns `node`	Applies to FormField, Matrix or TableColumn. `node` is the field node corresponding to the widget or null if it does not apply.
getDecorationNode returns `node`	Applies to FormField, Matrix or TableColumn. `node` is the node holding the visual information (Edit, CheckBox, ComboBox, etc...) or null if not found.

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 project_dir/customization/default/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>";
          }
        }
      };
    });
  }
);