Skip to content

widget files view model js

Nicolas HILAIRE edited this page Apr 18, 2016 · 1 revision

#viewModel.js

This javascript file contains the viewModel of your widget. This viewmodel contains all computing that allows to display values on widget.

The file is always formatted like following:

widgetViewModelCtor =

/**
 * Create a ViewModel
 * @constructor
 */
function widgetViewModel() {
    /**
     * Observable data
     */
    var self = this;
    this.time = ko.observable("00:00");
    this.date = ko.observable("");

    /**
     * Initialization method
     * @param widget widget class object
     */
    this.initialize = function () {
        var self = this;

    //toolbar API initialization
    self.widgetApi.toolbar({
            activated: false
        });
        /* Custom code here */
    };

    /**
    * Callback for a resized event
    */
    this.resized = function () {
        var width = this.widget.getWidth();
        var height = this.widget.getHeight();
        
        /* Custom code here */
    };

    /**
    * Callback for a configuration changed event
    */
    this.configurationChanged = function () {
        var self = this;

    if ((isNullOrUndefined(self.widget)) || (isNullOrUndefinedOrEmpty(self.widget.configuration)))
        return;

        /* Custom code here */
    }

    /**
    * New acquisition handler
    * @param keywordId keywordId on which new acquisition was received
    * @param data Acquisition data
    */
    this.onNewAcquisition = function (keywordId, data) {
        var self = this;

        /* Custom code here */
    }
};

This empty skeleton of widget is a class that contains a mandatory method:

  • initialize(): This method is called when widget has been created onto the page and must be initialized. The widget object is accessible from "this.widget" member.

It also contains optionnal methods:

  • resized(): This method is called when the widget has been ended resized. It is also called during the widget creation.

  • configurationChanged(): This method is called when the widget has been configured. The configuration is available using "this.widget.configuration" member. It is also called during the widget creation.

  • onNewAcquisition(keywordId, data): This method is called when a registered keyword has generated a new data. To see how to register a keyword, see Widget Api below.

All of these methods must return immediately. If they contains deffered treatment they must return a promise. If this object is returned, the Application will wait for the end of the promise to continue running the widget.

       /**
        * Initialization method
        */
       this.initialize = function () {

           var self = this;
           var d = new $.Deferred();

           self.widgetApi.loadLibrary([
               "libs/highstock/js/highstock.js",
               "libs/highstock/js/highcharts-more.js",
               "libs/highstock/js/modules/exporting.js",
               "libs/highcharts-export-clientside/js/highcharts-export-clientside.min.js"
           ]).done(function () {

               //toolbar initilization
               self.widgetApi.toolbar({
                   activated: true,
                   displayTitle: true,
               });

               /* Custom code here */

               //resolve promise
               d.resolve();
           });
           //returns the promise
           return d.promise();
       };
Clone this wiki locally