Aufbau

Eine neu hinzugefügte Code-Behind-Datei enthält vorkonfigurierten JavaScript-Code.

Die Kommentarzeilen (Triple-Slash-Direktiven) werden für die bessere Unterstützung von IntelliSense in JavaScript benötigt:

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

// TcHmi Version 1.8
// 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" />

Der JavaScript-Code, der innerhalb einer Code-Behind-Datei implementiert wird, muss innerhalb des Namensraumes „TcHmi“ implementiert werden.

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

Außerhalb des Namensraumes steht das Framework des TwinCAT HMI nicht zur Verfügung!

In einer neuen Code-Behind-Datei wird beispielhaft das globale onInitialized-Event vom Framework registriert. Hier können Aktionen platziert werden, die nach der Initialisierung des Frameworks ausgeführt werden sollen.

// If you want to unregister an event outside the event code you need to use the return value of the method register()
var destroyOnInitialized = TcHmi.EventProvider.register('onInitialized', function (e, data) {
   // This event will be raised only once, so we can free resources. 
   // It's best practice to use destroy function of the event object within the callback function to avoid conflicts.
   e.destroy();

   // ----------------------
   // Place your code here!
   // ----------------------
});

Innerhalb der Code-Behind-Datei können beliebige Events registriert und abgemeldet werden. Die Registrierung von Framework Events des TwinCAT HMI wird über die Framework API „EventProvider“ realisiert. Der Registrierung über den EventProvider registriert ein Callback zu dem Event und liefert eine Funktion zum Abmelden des Events zurück. Die Funktion zum Abmelden des Events sollte aufgerufen werden um Systemressourcen freizugeben, wenn das Event nicht mehr benötigt wird (z. B. Event-Listener für ein MouseOver-Event).

destroyOnInitialized();

Die Registrierung von Control-Events erfolgt über die Control-ID (z. B. TcHmiButton.onPressed). Ein Control-Event kann an mehreren Stellen registriert werden. Wenn ein Event in der Code-Behind-Datei registriert wird, wird dieses im Designer unter den Events nicht angezeigt. Daher empfiehlt es sich zur besseren Übersichtlichkeit ein Event entweder in einer Code-Behind-Datei zu registrieren oder im Designer zu konfigurieren.