DE:Javascript

Es ist möglich im Javascript Panel Skripte für einen Screen oder ein CustomControl hinzuzufügen.

Mann muss dabei aber ein paar Besonderheiten beachten.

Es gibt 3 spezielle Methoden:

/**
* @param {BaseScreenViewerAndControl} instance
*/
export function init(instance) {
}

/**
* @param {BaseScreenViewerAndControl} instance
*/
export function connectedCallback(instance) {
}

/**
* @param {BaseScreenViewerAndControl} instance
*/
export function disconnectedCallback(instance) {
}

• init : wird beim erzeugen des Screens/CustomControls aufgerufen, wobei ihr die instanz als parameter übergeben bekommt.
• connectedCallback : wird aufgerufen wenn die instanz dem DOM hinzugefügt wird
• disconnectedCallback : wird aufgerufen wenn die instanz vom DOM entfernt wird

Aus dem HTML kann auch von events auf javascript methoden verlink werden. Diese müssen dann folgende Signatur haben:

/**
* @param {MouseEvent} event
* @param {Element} eventRaisingElement
* @param {ShadowRoot} shadowRoot
* @param {BaseScreenViewerAndControl} instance
*/
export function methodenname(event, eventRaisingElement, shadowRoot, instance) {
    
}

Um auf ein Event eines elements innerhalb des codes zu reagieren, könnt ihr die normale addEventListener Funktion verwenden, besser ist jedoch ihr nutzt

   instance._assignEvent('event-name', () => .... );

dies sorgt dafür, das die events beim disconnect entfernt werden, und wenn das element wieder connected wird wieder registriert werden.

Elemente aus euer instanz (screen oder control) könnt ihr z.B. mit

  instance._getDomElement(element-id)

oder

  instance._getDomElements(selector)

erhalten.

Auch gibt es noch 2 globale objekte:

RUNTIME und IOB. Mit RUNTIME könnt Ihr z.b. Screens oder Dialoge öffnen, und mit IOB mit Iobroker kommunizieren.