Widget JavaScript file

The js file contains specific JavaScript code that implements a widget as an element of the user interface. Examples are shown of how to extend existing widgets and implement the changes by registering them as new widget classes.

The js files contain functions for rendering the widget template file (.tpl.html) and dynamically building the DOM element. If you wish to customize a widget, you need to extend the standard widget class in a new widget js file contained in your customization project directory.

The js is associated with a template file, which needs to use the same name.

Note: If the template file does not have the same name as the js, it can be reference explicitly in the code using the __templateName value. For an example of this usage, see Add image with style class.

Extending a basic widget

This sample code shows the minimal code you need to extend a basic widget in js.

"use strict";

modulum('newWidget', ['baseWidget', 'WidgetFactory'],
  function(context, cls) {

    cls.newWidget = context.oo.Class(cls.baseWidget, function($super) {
      return {
        __name: "newWidget",

        /* your custom code */
      };
    });
    cls.WidgetFactory.register('widgetType', cls.newWidget);
  });

where:

newWidget is your custom widget
baseWidget is the built-in widget that it extends
widgetType is the widget representation (node name) in the AUI tree.

Extending a basic widget and registering a new widget style

Register a new widget style to allow for selective application of your customization as specified by the style settings in your form source.

"use strict";

modulum('newWidget', ['baseWidget', 'WidgetFactory'],
  function(context, cls) {

    cls.newWidget = context.oo.Class(cls.baseWidget, function($super) {
      return {
        __name: "newWidget",

        /* your custom code */
      };
    });
    cls.WidgetFactory.register('widgetType', ‘widgetStyle’, cls.newWidget);
  });

where:

newWidget is your custom widget
baseWidget is the built-in widget that it extends
widgetType is the widget representation (node name) in the AUI tree.
widgetStyle is the style name.

The widgetStyle argument (optional) allows you to reference your widget in your Genero form source. For example, in this form (.per) file snippet, the style "widgetStyle" is applied to the defined Edit form field:

EDIT f01 = formonly.edit, STYLE=”widgetStyle”;

Only fields with the style applied will be customized.

Example: Extending a simple widget

For simple widget customization, see the Edit widget example in project_dir/customization/default/js/MyEditWidget.js:

"use strict";

modulum('MyEditWidget', ['EditWidget', 'WidgetFactory'],
 
  function(context, cls) {

    /**
     * Edit widget.
     * @class classes.MyEditWidget
     * @extends classes.EditWidget
     */
    cls.MyEditWidget = context.oo.Class(cls.EditWidget, function($super) {
      /** @lends classes.MyEditWidget.prototype */
      return {
        __name: "MyEditWidget".
        
        setTitle: function(title) {
          $(this.getElement()).find(".title").text(title);
        },

        getTitle: function() {
          return $(this.getElement()).find(".title").text();
        }
      };
    });
    cls.WidgetFactory.register('Edit', cls.MyEditWidget);
  });

The customization extends the built-in EditWidget. You can reference an element in the HTML template for the widget (project_dir/customization/default/js/MyEditWidget.tpl.html) by using the this.getElement() function.

Example: Extending a container widget

For container widget customization, see the example in project_dir/customization/default/js/MyApplicationHostMenuWidget.js

"use strict";

modulum('MyApplicationHostMenuWidget', ['WidgetGroupBase', 'WidgetFactory'],
  
  function(context, cls) {

    cls.MyApplicationHostMenuWidget = context.oo.Class(cls.WidgetGroupBase, function($super) {
      /** @lends classes.MyApplicationHostMenuWidget.prototype */
      return {
        __name: "MyApplicationHostMenuWidget",

        _windowIconImage: null,
        _titleElement: null,
        _defaultTitle: "Customized Title Bar",

        _aboutMenu: null,
        _debugMenu: null,

        constructor: function() {
          $super.constructor.call(this);
          this._aboutMenu = cls.WidgetFactory.create('ApplicationHostAboutMenu');
          this._debugMenu = cls.WidgetFactory.create('ApplicationHostDebugMenu');
          this.addChildWidget(this._aboutMenu);
          this.addChildWidget(this._debugMenu);
        },

        [...]
        destroy: function() {
          this.removeChildWidget(this._aboutMenu);
          this.removeChildWidget(this._debugMenu);
          this._aboutMenu.destroy();
          this._aboutMenu = null;
          this._debugMenu.destroy();
          this._debugMenu = null;
          $super.destroy();
        },
        [...]
      };
    });
    cls.WidgetFactory.register('ApplicationHostMenu', cls.MyApplicationHostMenuWidget);
  });

For a Container widget, the base widget is always WidgetGroupBase. You add the child elements with this.addChildWidget and remove child elements with this.removeChildWidget.