Base framework

The Source.js file already contains preconfigured source code that is required for various functions of the framework control and may not be modified in some cases. In JavaScript, a framework control is a JavaScript object that is described by various properties and methods. In other programming languages, the framework control would correspond to a class from which concrete instances (objects) are created at a later point in time.

Project information

Better support for IntelliSense in JavaScript:

// Provider for a best effort Intellisense of Visual Studio 2017/2019.
/// <reference path="C:\TwinCAT\Functions\TE2000-HMI-Engineering\Infrastructure\TcHmiFramework\Latest\Lib\jquery.d.ts" />
/// <reference path="C:\TwinCAT\Functions\TE2000-HMI-Engineering\Infrastructure\TcHmiFramework\Latest\TcHmi.d.ts" />
/// <reference path="C:\TwinCAT\Functions\TE2000-HMI-Engineering\Infrastructure\TcHmiFramework\Latest\Controls\System\TcHmiControl\Source.d.ts" />

// Provider for a best effort Intellisense of Visual Studio 2013/2015.
/// <reference path="C:\TwinCAT\Functions\TE2000-HMI-Engineering\Infrastructure\TcHmiFramework\Latest\Lib\jquery\jquery.js" />
/// <reference path="C:\TwinCAT\Functions\TE2000-HMI-Engineering\Infrastructure\TcHmiFramework\Latest\TcHmi.js" />

These comment lines include different files, allowing better IntelliSense support within the Source.js file. These lines are not required for using the control.

Information about the framework control:

/*
 * Generated 2/15/2018 10:57:13 AM
 * Copyright UserXY 2018
 * ........................
*/

These comment lines contain information about the creation of the framework control, which is generated automatically when the framework control project is created. These lines are not required for using the control.

Base structure of a framework control

/**
* Namespace: TcHmi
* [REQUIRED]
*/
(function (/** @type {globalThis.TcHmi} */ TcHmi) {
   /**
   * Namespace: TcHmi.Controls
   * [REQUIRED]
   */
   (function (/** @type {globalThis.TcHmi.Controls} */ Controls) {
      /**
      * Namespace: TcHmi.Controls.Custom
      * [CUSTOM]
      */
      var Custom;
         (function (Custom) {
         /** FrameworkControlJs1 object */
         var FrameworkControlJs1 = (function (_super) {
            __extends(FrameworkControlJs1, _super);

            /** Control specific logic */

            return FrameworkControlJs1;
         })(TcHmi.Controls.System.TcHmiControl);
      Custom.FrameworkControlJs1 = FrameworkControlJs1;
      })(Custom = Controls.Custom || (Controls.Custom = {}));
      /**
      * Register control...
      */
      Controls.register('framework-control-js1', Custom.FrameworkControlJs1, 'Custom/FrameworkControlJs1/', 'Custom/FrameworkControlJs1/Template.html');
   })(Controls = TcHmi.Controls || (TcHmi.Controls = {}));
})(TcHmi);

This code defines the base structure of a framework control and is required for using the control at runtime. In the event of invalid changes, the control can no longer be used properly.

Do not change the base structure of the framework control within Source.js. There is a risk that the control can no longer be used.

Definition of the namespaces

Within Source.js, various namespaces are referenced and defined, which are required for the framework.

TcHmi

(function (TcHmi) { })(TcHmi);

This function makes the control known within the "TcHmi" namespace. The framework cannot be accessed outside this namespace.

Controls

(function (Controls) { })(Controls = TcHmi.Controls || (TcHmi.Controls = {}));

This function makes the control known within the "Controls" namespace. This namespace contains all TwinCAT HMI controls (System, Beckhoff, Custom).

The control is registered in the control namespace which is required for the Engineering of the TwinCAT HMI. The transfer of the Template parameter is optional.

Controls.register('framework-control-js1', Custom.FrameworkControlJs1, 'Custom/FrameworkControlJs1/', 'Custom/FrameworkControlJs1/Template.html');

Custom

var Custom;
(function (Custom) { })(Custom = Controls.Custom || (Controls.Custom = {}));

This function defines the namespace for user-specific controls and makes the control known within the namespace. The concrete framework control object is defined in the custom namespace (prototypical control object) and then assigned to the custom namespace:

Custom.FrameworkControlJs1 = FrameworkControlJs1;

Prototypical control object

A framework control is defined by a JavaScript object within the custom namespace. The logic is implemented in this section (Constructor, System functions, Attributes, Functions, Events, Access rights).

var FrameworkControlJs1 = (function (_super) {
   __extends(FrameworkControlJs1, _super);

   /** Control specific logic */

   return FrameworkControlJs1;
})(TcHmi.Controls.System.TcHmiControl);

The object (_super) of the base control defined in Description.json (usually TcHmiControl ) is passed to the framework control. The framework control inherits all properties of the defined base control.

The framework control is defined by a function, in which the user-specific code of the framework control is implemented. A function in JavaScript always links a prototypical object. Access to the prototypical object of this function is indicated by the property "protoype". All properties (other functions) of the framework control are stored in the function object via the prototype.

MyControlName.prototype.myProperty = function () {...};

When a specific instance (JavaScript object) is created by the function, the instance has all the properties of the prototypical object of the function.