Base framework

The Source.js/ts file already contains preconfigured source code that is required for various functions of the framework control and may not be modified in some cases. A framework control corresponds to a class, of which concrete instances (objects) are created at a later time.

Project information

Better support of IntelliSense in JavaScript (not necessary when using TypeScript):

/// <reference path="../../Packages/Beckhoff.TwinCAT.HMI.Framework.12.742.0/runtimes/native1.12-tchmi/TcHmi.d.ts" />

This comment line includes files, allowing better IntelliSense support within the Control.js file. These lines are not required for using the control.

Information about the framework control:

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

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.

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

Base structure of a TypeScript framework control

module TcHmi {
   export module Controls {
      export module FrameworkPrj1 {
         export class FrameworkPrj1Control extends TcHmi.Controls.System.TcHmiControl {
            constructor(element: JQuery, pcElement: JQuery, attrs: TcHmi.Controls.ControlAttributeList) {
               super(element, pcElement, attrs);

            }

            /** Control specific logic */

         }
      }
      registerEx('FrameworkPrj1Control', 'TcHmi.Controls.FrameworkPrj1', FrameworkPrj1.FrameworkPrj1Control);
   }
}

Base structure of a JavaScript framework control

The base structure of version 1.8 and 1.10 controls is still supported. However, it is recommended to use TypeScript or this Javascipt syntax for new controls:

(function (/** @type {globalThis.TcHmi} */ TcHmi) {
   let Controls;
   (function (/** @type {globalThis.TcHmi.Controls} */ Controls) {
      let FrameworkPrj1;
      (function (FrameworkPrj1) {
         class FrameworkControlJs1 extends TcHmi.Controls.System.TcHmiControl {
            constructor(element, pcElement, attrs) {
               super(element, pcElement, attrs);

            }

            /** Control specific logic */

         }
         FrameworkPrj1.FrameworkControlJs1 = FrameworkControlJs1;
      })(FrameworkPrj1 = Controls.FrameworkPrj1 || (Controls.FrameworkPrj1 = {}));
      Controls.registerEx('FrameworkControlJs1', 'TcHmi.Controls.FrameworkPrj1', FrameworkPrj1.FrameworkControlJs1);
   })(Controls = TcHmi.Controls || (TcHmi.Controls = {}));
})(TcHmi || (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.

Definition of the namespaces

Within Control.js, various namespaces are referenced and defined, which are required for the framework. Many of these definitions are unnecessary in TypeScript.

TcHmi

(function (/** @type {globalThis.TcHmi} */ TcHmi) { })(TcHmi);

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

Controls

(function (/** @type {globalThis.TcHmi.Controls} */ 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.

Controls.registerEx('FrameworkControlJs1', 'TcHmi.Controls.FrameworkPrj1', FrameworkPrj1.FrameworkControlJs1);

Own namespace

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

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 FrameworkPrj1 namespace and then assigned to the FrameworkPrj1 namespace:

FrameworkPrj1.FrameworkControlJs1 = FrameworkControlJs1;

Control class

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

let FrameworkPrj1;
(function (FrameworkPrj1) {
   class FrameworkControlJs1 extends TcHmi.Controls.System.TcHmiControl {
      constructor(element, pcElement, attrs) {
         super(element, pcElement, attrs);
      }

      /** Control specific logic */
   }

For the framework control the class of the base control (usually TcHmiControl) defined in Description.json is specified. The framework control inherits all properties of the defined base control.

The framework control is defined by a class within which the user-specific code of the framework control is implemented.

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