Control.ts/js

A framework control requires JavaScript code or TypeScript code.

Browsers cannot execute TypeScript, so an additional compilation step turns TypeScript code into corresponding JavaScript code. TypeScript extends the syntax of JavaScript with information about data type and access rights.

JavaScript code is written directly in the Control.js file.

Both file types (Control.js and Control.ts) define the base framework for the implementation of a framework control and can be extended flexibly. See also Creating a control.

Programming conventions

The programming conventions provide a base for standardizing framework controls. They are used to distinguish between internal and external access.

Member variables are marked with the prefix"__" and in Camel case:

this.__myVar = …;

Functions with external access (Engineering: setter/getter functions) are identified without prefix and in Camel case:

setMyVar() { /* … */ }

Internal functions are marked with the prefix "__" and in Camel case:

__processMyVar() { /* … */ }

Source code analysis with eslint

The project directory contains a file .eslintrc.json. This can be used to enter rules for the source code analysis tool eslint for all JavaScript and also TypeScript files. By default a few rules are already active there, which can detect actual program errors. The documentation under https://eslint.org/docs/rules/ lists all possible rules in detail.

	If you make changes in the Control.js file and the framework control is already associated with an HMI project, you must then carry out a project build of the framework control to apply the changes. A corresponding JavaScript file is automatically created from the TypeScript files.

Further Information