createEx

[ Funktion ]

public static createEx(
    type: string, 
    id: string, 
    attributes: null | Dictionary<any>
    parent?: TcHmi.Controls.System.baseTcHmiControl | null
): TcHmi.Controls.System.baseTcHmiControl | undefined;

Erstellt eine Control-Instanz per Identifier, Typ und zusätzlichen Attributen.

Parameter

Name	Typ	Beschreibung
type	string	Typ des neuen Controls.
id	string	Identifier des neuen Controls.
attributes	null, Dictionary<any>	Ein Dictionary ( Objekt ) aus Attributnamen und Werten. Beispiel: { 'data-tchmi-attribute1' : true, 'data-tchmi-attribute2' : false } Die Attributnamen können Sie aus dem HTML-Editor auslesen. Konfigurieren Sie dazu ein beliebiges Control und öffnen Sie den HTML-Editor.
parent [ Optional ]	TcHmi.Controls.System.baseTcHmiControl	Eltern-Control des neuen Controls. Wird unter anderem genutzt zur Prüfung der Zugriffsrechte, wenn diese vom Eltern-Control abhängen. Wird ein Control dynamisch auf Applikationsebene ( CodeBehind ) erstellt um es anschließend zu einem ContainerControl (View, Content, Container, etc.) hinzuzufügen ist dieser Parameter nicht zu setzen. Die Eltern-Kind-Beziehung wird dynamisch hergestellt, wenn das Control per addChild Funktion zum entsprechenden ContainerControl hinzugefügt wird. Wird ein Control dynamisch innerhalb eines anderen Controls erstellt, so ist dieses andere Control das logische Eltern-Control und muss bei der Erstellung des neuen Controls übergeben werden, damit Eigenschaften wie Zugriffsrechte auch auf dieses Kind-Control wirken können und das System die Möglichkeit hat dieses Kind-Control zu zerstören, wenn das Eltern-Control zerstört wird.

Rückgabewert

Typ	Beschreibung
TcHmi.Controls.System.baseTcHmiControl, undefined	Das Control-Objekt oder `undefined` im Fehlerfall.

	Verfügbar ab Version 1.10

Beispiel innerhalb eines Controls – TypeScript

In diesem Beispiel wird ein Button innerhalb eines eigenen Controls dynamisch erzeugt und in den DOM hinzugefügt.

// Place in __prevInit of your own control:
var myButton = TcHmi.ControlFactory.createEx<TcHmi.Controls.Beckhoff.TcHmiButton>
    (
        'TcHmi.Controls.Beckhoff.TcHmiButton',
        'MyButton',
        {
            'data-tchmi-top': 25,
            'data-tchmi-left': 250,
            'data-tchmi-width': 200,
            'data-tchmi-height': 50,
            'data-tchmi-text': 'Dynamic Button',
            'data-tchmi-background-color': {
                color: 'rgba(55, 55, 55, 1)',
            },
        },
        this // <- this sets the framework parent/child relationship,
             // but does not add it in the DOM
    );
if (!myButton) {
    // handle error
    throw new Error(this.getId() + ': Could not create sub button');
}
// Add the button to the DOM at a specific position
this.getElement().append(myButton.getElement());

Beispiel Codebehind – TypeScript

In diesem Beispiel wird ein Button dynamisch nach dem Laden des Desktops erzeugt. Danach wird dieses Control über die vorhandene addChild API des View-Controls hinzugefügt, welche den Button auch auf dem Bildschirm hinzufügt.

TcHmi.EventProvider.register('Desktop.onAttached', function (e, data) {
    let desktop = TcHmi.Controls.get<TcHmi.Controls.System.TcHmiView>('Desktop');
    let myButton = TcHmi.ControlFactory.createEx<TcHmi.Controls.Beckhoff.TcHmiButton>
        (
            'TcHmi.Controls.Beckhoff.TcHmiButton',
            'MyButton',
            {
                'data-tchmi-top': 25,
                'data-tchmi-left': 250,
                'data-tchmi-width': 200,
                'data-tchmi-height': 50,
                'data-tchmi-text': 'MyButton',
                'data-tchmi-background-color': {
                    'color': 'rgba(55, 55, 55, 1)'
                }
            },
            desktop // <- this sets the framework parent/child relationship only
        );
    if (desktop && myButton) {
        // Views have an API to add a button and
        // places it into a good place in DOM.
        desktop.addChild(myButton);
    }
});