Structure

TypeScript

If you choose TypeScript when creating, the newly added code-behind file contains preconfigured TypeScript code.

Due to the configuration in tsconfig.json, the syntax highlighting of IntelliSense knows the TcHmi API.

JavaScript

If you select JavaScript, the newly added code-behind file contains special comment lines (triple-slash directives). These are required for better support of IntelliSense in JavaScript:

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

Example

Please note that the code is executed directly when it is loaded in the browser. At this point, the system is not yet completely loaded and initialized.

Therefore, the global onInitialized event is registered by the framework in the 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. For clarity, it is recommended that you either register an event in a code-behind file or configure it in the designer.