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-Code

Die Definition des HTML-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 Source.js des Controls referenziert wird. Die Template.html-Datei definiert den Grundaufbau eines Framework Controls.

<div class="framework-control-js1-template tchmi-box">
   <!--Place your code here-->
</div>

Der HTML-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="framework-control-js1" 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="framework-control-js1-template tchmi-box"> 
      <!--Place your code here-->
   </div>
</div>

Innerhalb der Template.html-Datei können beliebig viele HTML-Elemente definiert werden. Dabei stehen dem Entwickler alle Standard-HTML-Elemente zur Verfügung. Neben den Standard-HTML-Elementen können auch TwinCAT HMI Controls in der Template.html-Datei verwendet werden. Der benutzerspezifische HTML-Code sollte innerhalb des Template-Divs platziert werden („Place your code here“).

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.

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

Die HTML-Elemente, die innerhalb der Template.html-Datei definiert werden, können in der Source.js-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-Datei ist optional, nur die statische Verwendung innerhalb der Template.html-Datei ist ebenfalls möglich.

Sollen die HMTL-Elemente in der Source.js-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('.framework-control-js1-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="framework-control-js1-template tchmi-box">
   <div class="framework-control-js1-inner-div">
      <div class="framework-control-js1-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('.framework-control-js1-template');
this.__innerDiv = this.__elementTemplateRoot.find('.framework-control-js1-inner-div');
this.__myElement = this.__innerDiv.find('.framework-control-js1-inner-div-my-element');