Structure

A newly added code-behind file contains pre-configured JavaScript code.

The commentary lines (triple slash directives) are required for enhanced support of IntelliSenese in JavaScript:

// 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" />

The JavaScript code that is implemented within a code-behind file must be implemented within the TcHmi namespace.

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

The TwinCAT HMI framework is not available outside the namespace!

In a new code-behind file the global onInitialized event is registered by the framework as an example. Here you can place actions that are to be executed after the initialization of the framework.

// 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!
   // ----------------------
});

Within the code-behind file any events can be registered and deregistered. The registration of TwinCAT HMI framework events is realized via the EventProvider framework API. Registration via the EventProvider registers a callback to the event and returns a function for deregistering the event. The function for deregistering the event should be called to release system resources when the event is no longer needed (for example, Event Listener for a MouseOver event).

destroyOnInitialized();

Control events are registered using the Control ID (e.g. TcHmiButton.onPressed). A control event can be registered in several places. If an event is registered in the code-behind file, it is not displayed in the Designer under Events. It is therefore advisable to either register an event in a code-behind file or to configure it in the Designer for enhanced clarity.