Aufbau

Typescript

Wählen Sie beim Erstellen Typescript aus, so enthält die neu hinzugefügte Code-Behind-Datei vorkonfigurierten TypeScript-Code.

Durch die Konfiguration in der tsconfig.json kennt das Syntax-Highlighting von IntelliSense die TcHmi API.

Javascript

Wählen Sie JavaScript, so enthält die neu hinzugefügte Code-Behind-Datei spezielle Kommentarzeilen (Triple-Slash-Direktiven). Diese werden für die bessere Unterstützung von IntelliSense in JavaScript benötigt:

// Keep these lines for a best effort IntelliSense in the editor.
/// <reference path="./../Packages/Beckhoff.TwinCAT.HMI.Framework.x.y.z/runtimes/native1.12-tchmi/TcHmi.d.ts" />

Beispiel

Zu beachten ist, dass der Code direkt beim Laden im Browser ausgeführt wird. Zu diesem Zeitpunkt ist das System noch nicht vollständig geladen und initialisiert.

Daher wird im Beispiel 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. Zur besseren Übersichtlichkeit wird empfohlen, ein Event entweder in einer Code-Behind-Datei zu registrieren oder im Designer zu konfigurieren.