Grundgerüst

Die Source.js-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 ist im JavaScript ein JavaScript-Objekt, welches durch verschiedene Eigenschaften und Methoden beschrieben wird. In anderen Programmiersprachen würde das Framework Control einer Klasse entsprechen, von der zu einem späteren Zeitpunkt konkrete Instanzen (Objekte) erstellt werden.

Projektinformationen

Bessere Unterstützung von 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" />

Diese Kommentarzeilen inkludieren verschiedene Dateien, wodurch eine bessere IntelliSense Unterstützung innerhalb der Source.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/2018 10:57:13 AM
 * Copyright UserXY 2018
 * ........................
*/

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.

Grundaufbau eines Framework Controls

/**
* 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);

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.

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

Definition der Namensräume

Innerhalb der Source.js werden verschiedenen Namensräume referenziert und definiert, die für das Framework erforderlich sind.

TcHmi

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

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

Controls

(function (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. Die Übergabe des Template-Parameters erfolgt dabei optional.

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

Custom

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

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

Custom.FrameworkControlJs1 = FrameworkControlJs1;

Prototypisches Control Objekt

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

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

   /** Control specific logic */

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

Dem Framework Control wird das Objekt (_super) des in der Description.json definierten Basis-Controls (i.d.R. TcHmiControl) übergeben. Das Framework Control erbt alle Eigenschaften des definierten Basis-Controls.

Das Framework Control wird durch eine Funktion definiert, innerhalb welcher der benutzerspezifische Code des Framework Controls implementiert wird. Eine Funktion in JavaScript verknüpft immer ein prototypisches Objekt. Der Zugriff auf das prototypische Objekt dieser Funktion wird durch die Eigenschaft „protoype“ gekennzeichnet. Alle Eigenschaften (weitere Funktionen) des Framework Controls werden über den Prototypen in das Funktionsobjekt gespeichert.

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

Wenn eine konkrete Instanz (JavaScript-Objekt) von der Funktion erstellt wird, besitzt die Instanz alle Eigenschaften des prototypischen Objekts der Funktion.