Template.html

Ein Framework-Control basiert wie jedes Control im TwinCAT HMI auf HTML-Code. Sobald ein Framework-Control im Engineering des TwinCAT HMI instanziiert wird, wird automatisch ein HTML-Div-Element für das Control angelegt. Der Entwickler des Framework Controls hat die Möglichkeit, innerhalb des Control-Div-Elements weiteren HTML-Code für das Control zu definieren.

HTML/SVG-Code

Die Definition des HTML/SVG -Codes wird in der Datei „Template.html“ implementiert. Die Verwendung dieser Datei ist optional. Die Template.html-Datei wird nur verwendet, wenn diese in der Description.json des Controls referenziert wird. Die Template.html-Datei definiert den Grundaufbau eines Framework Controls.

<div class="TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-Template tchmi-box">
   <!--Place your code here-->
</div>

Der HTML/SVG -Code, der innerhalb dieser Datei definiert wird, wird im Engineering automatisch innerhalb des Control-Div-Elements eingefügt (wenn die Datei verwendet wird). Der Code kann z. B. beim Debugging im Browser eingesehen werden.

<div id="TcHmiFrameworkControlJs1" data-tchmi-type=" TcHmi.Controls.FrameworkPrj1.FrameworkControlJs1" data-tchmi-height="150" data-tchmi-height-unit="px" data-tchmi-left="137" data-tchmi-left-unit="px" data-tchmi-top="140" data-tchmi-top-unit="px" data-tchmi-value="True" data-tchmi-width="150" data-tchmi-width-unit="px" class="tchmi-box tchmi-control framework-control-js1" title="" style="left: 137px; top: 140px; width: 150px; height: 150px; z-index: 0; border-width: 0px;">
   <div class="TcHmi_Controls_FrameworkPrj1_FrameworkControlTs1-Template tchmi-box"> 
      <!--Place your code here-->
   </div>
</div>

Auch SVG-Elemente können direkt eingebettet werden.

<div class="TcHmi_Controls_FrameworkPrj1_FrameworkControlTs1-Template tchmi-box">
   <div class="TcHmi_Controls_FrameworkPrj1_FrameworkControlTs1-Template-div1 tchmi-box"></div>
   <svg class=" TcHmi_Controls_FrameworkPrj1_FrameworkControlTs1-Template-svg1 tchmi-box" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30px" height="100%" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
      <polyline class="TcHmi_Controls_FrameworkPrj1_FrameworkControlTs1-Template-svg1-arrow" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="22.865,12.5 15,20.366 7.135,12.5"></polyline>
   </svg>
   <div class="TcHmi_Controls_FrameworkPrj1_FrameworkControlTs1-Template-div2 tchmi-box"></div>

Innerhalb der Template.html-Datei können beliebig viele HTML/SVG -Elemente definiert werden. Dabei stehen dem Entwickler alle Standard-HTML/SVG -Elemente zur Verfügung.

Neben den Standard-HTML-Elementen können auch TwinCAT HMI Controls in der Template.html-Datei verwendet werden. Siehe dazu Dynamische Control-Generierung.

Der benutzerspezifische HTML-Code sollte innerhalb des Template-Divs platziert werden („Place your code here“).

Template.html 1:

Keine festen IDs vergeben

Innerhalb der Template.html-Datei dürfen keine festen IDs vergeben werden. Die Vergabe von IDs innerhalb der Template.html-Datei widerspricht dem Konzept der Mehrfachinstanziierung eines Framework Controls, da eine ID innerhalb des HTML-Dokuments nur einmal vorkommen darf. Das äußere Control-Div-Element enthält automatisch eine eindeutige ID über das Engineering.

Diese ID wird über den Platzhalter {Id} zur Verfügung gestellt. Ein Div-Element darf damit so angelegt werden: <div id=“{Id}-subDiv“></div>

CSS-Klassen

Innerhalb der Elemente in der Template.html-Datei können CSS-Klassen vergeben werden, die über Cascading Style Sheets-Dateien losgelöst von dem Theme oder in Abhängigkeit des Themes beschrieben werden. Per Default wird die Template-Klasse in der Style.css-Datei auf Projektebene genutzt.

Zugriff über JavaScript/TypeScript

Die HTML-Elemente, die innerhalb der Template.html-Datei definiert werden, können in der Source.js/ts-Datei weiterverarbeitet werden. Die Elemente können z. B. während der Laufzeit verändert werden oder als Platzhalter für dynamisch erzeugte Elemente dienen. Die Verarbeitung der HMTL-Elemente in der Source.js/ts-Datei ist optional, nur die statische Verwendung innerhalb der Template.html-Datei ist ebenfalls möglich.

Sollen die HMTL-Elemente in der Source.js/ts-Datei weiterverarbeitet werden, müssen dort Referenzen zu den HTML-Elementen erzeugt werden. Innerhalb der PrevInit-Funktion in der Source.js-Datei werden die Referenzen zu der Template.html-Datei erzeugt.

/** Handle template elements. Should be done before call to __previnit of super class. */
this.__elementTemplateRoot = this.getElement().find('.TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-Template');

Das Listing zeigt den Zugriff auf das Template-Div innerhalb der Template.html. Das Template-Div wird über die JQuery-Funktion „.find()“ innerhalb des Haupt-JQuery-Objektes des Controls gesucht. Die Referenz zu dem JQuery-Objekt des Controls ist über ".getElement()" erreichbar. Wenn innerhalb des Template-Divs weitere Elemente platziert werden, können diese ebenfalls über die JQuery-Funktion „.find()“ gefunden werden. Aus Gründen der Performance empfiehlt es sich insbesondere bei vielen verschachtelten Elementen, die Suche nicht über das äußere JQuery-Objekt zu realisieren, sondern über die bereits referenzierten inneren Elemente.

Beispiel:

<div class="TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-Template tchmi-box">
   <div class="TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-inner-div">
      <div class="TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-inner-div-my-element">

      </div>
   </div>
</div>

Aus diesem HMTL-Code ergeben sich folgenden Referenzen:

/** Handle template elements. Should be done before call to __previnit of super class. */
this.__elementTemplateRoot = this.getElement().find('.TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-template');
this.__innerDiv = this.__elementTemplateRoot.find('.TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-inner-div');
this.__myElement = this.__innerDiv.find('.TcHmi_Controls_FrameworkPrj1_FrameworkControlJs1-inner-div-my-element');