Grundgerüst

Die Control.js/ts-Datei enthält bereits vorkonfigurierten Quellcode, der für verschiedene Funktionalitäten des Framework Controls benötigt wird und teilweise nicht verändert werden darf. Ein Framework Control entspricht einer Klasse, von der zu einem späteren Zeitpunkt konkrete Instanzen (Objekte) erstellt werden.

Projektinformationen

Bessere Unterstützung von IntelliSense in JavaScript (nicht notwendig bei der Nutzung von TypeScript):

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

Diese Kommentarzeile inkludiert Dateien, wodurch eine bessere IntelliSense Unterstützung innerhalb der Control.js-Datei ermöglicht wird. Diese Zeilen werden nicht für die Verwendung des Controls benötigt.

Informationen über das Framework Control:

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

Diese Kommentarzeilen enthalten Informationen über die Erstellung des Framework Controls, die automatisch bei der Erstellung des Framework Control Projektes generiert werden. Diese Zeilen werden nicht für die Verwendung des Controls benötigt.

Führen Sie keine Veränderungen an dem Grundaufbau des Framework Controls innerhalb der Control.js/ts durch. Es besteht die Gefahr, dass das Control nicht mehr verwendet werden kann.

Grundaufbau eines TypeScript-Framework-Controls

Hinweis: In alten Templates wurde modules TcHmi statt namespace TcHmi genutzt. Der resultierende JavaScript code ist exakt gleich. Diese Syntax ist jedoch veraltet und wird daher in neueren Templates nicht mehr verwendet.

namespace TcHmi.Controls {
   export namespace 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 */

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

Grundaufbau eines JavaScript-Framework-Controls

Der Grundaufbau von Version 1.8 und 1.10 Controls wird weiterhin unterstützt. Es wird jedoch empfohlen für neue Controls TypeScript oder diese Javascipt-Syntax zu nutzen:

(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 = {}));

Dieser Code definiert den Grundaufbau eines Framework Controls und wird für die Verwendung des Controls zur Laufzeit benötigt. Bei ungültigen Veränderungen kann das Control nicht mehr ordnungsgemäß verwendet werden.

Definition der Namensräume

Innerhalb der Control.js werden verschiedenen Namensräume referenziert und definiert, die für das Framework erforderlich sind. Viele dieser Definitionen sind in TypeScript nicht nötig.

TcHmi

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

Die Funktion macht das Control innerhalb des Namensraums „TcHmi“ bekannt. Außerhalb dieses Namensraumes besteht kein Zugriff auf das Framework.

Controls

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

Die Funktion macht das Control innerhalb des Namensraums „Controls“ bekannt. In diesem Namensraum befinden sich alle Controls des TwinCAT HMIs (System, Beckhoff, Custom).

Im Control-Namensraum findet die Registrierung des Controls statt, die für das Engineering des TwinCAT HMI erforderlich ist.

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

Eigener Namensraum

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

Die Funktion definiert den Namensraum für benutzerspezifische Controls und macht das Controls innerhalb des Namensraums bekannt. In dem FrameworkPrj1-Namensraum wird das konkrete Framework Control Objekt definiert und anschließend dem FrameworkPrj1-Namensraum zugewiesen:

FrameworkPrj1.FrameworkControlJs1 = FrameworkControlJs1;

Control-Klasse

Ein Framework-Control wird durch eine JavaScript-Klasse innerhalb des FrameworkPrj1-Namensraums definiert. Innerhalb diesen Bereiches wird die Logik implementiert (Konstruktor, System-Funktionen, Attribute, Funktionen, Events, Zugriffsrechte).

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

      /** Control specific logic */
   }

Für das Framework Control wird die Klasse des in der Description.json definierten Basis-Controls (i.d.R. TcHmiControl) angegeben. Das Framework Control erbt alle Eigenschaften des definierten Basis-Controls.

Das Framework Control wird durch eine Klasse definiert, innerhalb welcher der benutzerspezifische Code des Framework Controls implementiert wird.

Wenn eine konkrete Instanz (JavaScript-Objekt) von der Klasse erstellt wird, besitzt die Instanz alle Eigenschaften der Klasse.