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.