(FHEM) FTUI 3

2026-04-27T16:47:21Z

Komponentenprogramme

← Nächstältere Version		Version vom 27. April 2026, 18:47 Uhr
Zeile 191:		Zeile 191:
	</pre>		</pre>

			Der '''View''' ist die Basis fuer:
			* Toolbar
			* Stage
			* Sheet
			* Section
			* Item

	Für `button` zeigt das Repository z.B. `button.component.js`, `button-nice.component.js` und CSS. ([GitHub][4])		Für `button` zeigt das Repository z.B. `button.component.js`, `button-nice.component.js` und CSS. ([GitHub][4])

(FHEM) FTUI 3 Components

2026-04-26T15:44:03Z

initBooleanAttribute

← Nächstältere Version		Version vom 26. April 2026, 17:44 Uhr
(4 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1:		Zeile 1:
	=element.components.js=		=element.components.js=

	~~Definition~~ der '''Basisklasse''' für alle FTUI-v3-Webcomponents. Jede Komponente wie `ftui-button`, `ftui-label`, `ftui-icon` usw. erbt vermutlich von `FtuiElement`.		Deklaration der '''Basisklasse''' für alle FTUI-v3-Webcomponents. Jede Komponente wie `ftui-button`, `ftui-label`, `ftui-icon` usw. erbt vermutlich von `FtuiElement`.

	Sie kuemmert sich um:		Sie kuemmert sich um:
Zeile 32:		Zeile 32:

	Es werden drei Hilfsfunktionen verwendet:		Es werden drei Hilfsfunktionen verwendet:
			* isNumeric() prüft, ob ein Wert numerisch ist
	~~</pre>text~~		* toKebabCase() wandelt z.B. "baseWidth" in "base-width"
	isNumeric() prüft, ob ein Wert numerisch ist		* log() schreibt Debug-Ausgaben
	toKebabCase() wandelt z.B. "baseWidth" in "base-width"
	log() schreibt Debug-Ausgaben
	~~</pre>~~

	==UID-Zähler==		==UID-Zähler==
Zeile 198:		Zeile 195:
	Wichtig: Hier werden nur die Basiseigenschaften beobachtet. Abgeleitete Komponenten müssen wahrscheinlich selbst `observedAttributes` erweitern, sonst werden ihre eigenen Attribute nicht automatisch beobachtet.		Wichtig: Hier werden nur die Basiseigenschaften beobachtet. Abgeleitete Komponenten müssen wahrscheinlich selbst `observedAttributes` erweitern, sonst werden ihre eigenen Attribute nicht automatisch beobachtet.

	==convertToAttributes		==convertToAttributes==

	<pre>		<pre>
Zeile 236:		Zeile 233:

	1. Standardwerte werden verarbeitet.		1. Standardwerte werden verarbeitet.

	2. Falls die konkrete Komponente `onConnected()` definiert, wird diese Hook-Funktion ausgeführt.		2. Falls die konkrete Komponente `onConnected()` definiert, wird diese Hook-Funktion ausgeführt.

Zeile 246:		Zeile 244:
	</pre>		</pre>

	==attributeChangedCallback		==attributeChangedCallback==

	<pre>		<pre>
Zeile 507:		Zeile 505:
	Da `hidden`, `disabled`, `readonly` alle `false` sind, werden sie standardmäßig nicht gesetzt.		Da `hidden`, `disabled`, `readonly` alle `false` sind, werden sie standardmäßig nicht gesetzt.

	==defineBooleanProperty		==defineBooleanProperty==

	<pre>		<pre>
Zeile 553:		Zeile 551:
	wird als `false` interpretiert. Das ist etwas komfortabler als natives HTML, wo ein vorhandenes Boolean-Attribut normalerweise immer wahr ist.		wird als `false` interpretiert. Das ist etwas komfortabler als natives HTML, wo ein vorhandenes Boolean-Attribut normalerweise immer wahr ist.

	==defineNumberProperty		==defineNumberProperty==

	<pre>		<pre>
Zeile 572:		Zeile 570:
	liefert Zahl `2`.		liefert Zahl `2`.

	==defineStringProperty		==defineStringProperty==

	<pre>		<pre>
Zeile 591:		Zeile 589:
	</pre>		</pre>

	==updateProperties		==updateProperties==

	<pre>		<pre>

(FHEM) FTUI 3 Components

2026-04-26T15:20:13Z

Die Seite wurde neu angelegt: „=element.components.js= Definition der '''Basisklasse''' für alle FTUI-v3-Webcomponents. Jede Komponente wie `ftui-button`, `ftui-label`, `ftui-icon` usw. erbt vermutlich von `FtuiElement`. Sie kuemmert sich um: * automatische IDs * Standardattribute wie `hidden`, `disabled`, `readonly`, `margin`, `padding` * Verbindung zwischen Attributen und JavaScript-Properties * Shadow DOM * Change-Events für FTUI-Bindings * Hooks für abgeleitete Komponenten =…“

Neue Seite

=element.components.js=

Definition der '''Basisklasse''' für alle FTUI-v3-Webcomponents. Jede Komponente wie `ftui-button`, `ftui-label`, `ftui-icon` usw. erbt vermutlich von `FtuiElement`.

Sie kuemmert sich um:

* automatische IDs
* Standardattribute wie `hidden`, `disabled`, `readonly`, `margin`, `padding`
* Verbindung zwischen Attributen und JavaScript-Properties
* Shadow DOM
* Change-Events für FTUI-Bindings
* Hooks für abgeleitete Komponenten

==Kurzueberblick==

<pre>
export class FtuiElement extends HTMLElement
</pre>

`FtuiElement` erweitert den nativen Browser-Typ `HTMLElement`. Dadurch wird daraus die gemeinsame Basis für eigene HTML-Tags wie:

<pre>
<ftui-button></ftui-button>
<ftui-label></ftui-label>
</pre>

==Import==

<pre>
import { isNumeric, toKebabCase, log } from '../modules/ftui/ftui.helper.js';
</pre>

Es werden drei Hilfsfunktionen verwendet:

</pre>text
isNumeric() prüft, ob ein Wert numerisch ist
toKebabCase() wandelt z.B. "baseWidth" in "base-width"
log() schreibt Debug-Ausgaben
</pre>

==UID-Zähler==

<pre>
const uids = {};
</pre>

Damit bekommt jedes FTUI-Element automatisch eine ID, falls keine gesetzt wurde.

Beispiel:

<pre>
<ftui-label></ftui-label>
</pre>

wird intern etwa zu:

<pre>
<ftui-label id="ftui_label_1"></ftui-label>
</pre>

==Constructor==

<pre>
constructor(properties) {
super();
</pre>

`super()` ruft den Konstruktor von `HTMLElement` auf. Das ist bei Webcomponents Pflicht.

<pre>
if (!this.id) {
...
this.id = `${this.localName.replace(/-/g, '_')}_${uids[this.localName]++}`;
}
</pre>

Falls das Element keine ID hat, wird automatisch eine erzeugt.

<pre>
this.properties = Object.assign(FtuiElement.properties, properties);
</pre>

Hier werden die Standard-Properties der Basisklasse mit den Properties der konkreten Komponente gemischt.

Beispiel:

<pre>
FtuiElement.properties = {
hidden: false,
disabled: false,
readonly: false,
margin: '',
padding: ''
}
</pre>

Ein `ftui-button` könnte zusätzlich `value`, `color`, `fill` usw. definieren.

Achtung: `Object.assign(FtuiElement.properties, properties)` verändert das Objekt `FtuiElement.properties`. Sauberer wäre oft:

<pre>
Object.assign({}, FtuiElement.properties, properties)
</pre>

Sonst können Properties versehentlich global vermischt werden.

<pre>
this.initProperties(this.properties);
</pre>

Erzeugt für jede Property Getter/Setter und initialisiert die passenden HTML-Attribute.

<pre>
if (typeof this.template === 'function') {
this.createShadowRoot(this.template());
}
</pre>

Wenn die konkrete Komponente eine Methode `template()` besitzt, wird daraus ein Shadow DOM erzeugt.

<pre>
this.isActiveChange = {};
</pre>

Merker für aktive Änderungen, wichtig für Two-Way-Binding.

<pre>
if (window.ftuiApp) {
ftuiApp.attachBinding(this);
}
</pre>

Wenn die FTUI-App bereits existiert, wird das Element mit dem FTUI-Binding-System verbunden.

==Shadow DOM==

<pre>
createShadowRoot(content) {
const elemTemplate = document.createElement('template');
elemTemplate.innerHTML = content;
this.attachShadow({ mode: 'open' });
this.shadowRoot.appendChild(elemTemplate.content.cloneNode(true));
}
</pre>

Diese Methode baut das interne DOM der Komponente.

Beispiel:

<pre>
template() {
return `<button><slot></slot></button>`;
}
</pre>

wird zu einem Shadow DOM innerhalb des Elements.

`mode: 'open'` bedeutet: Man kann von außen per JavaScript darauf zugreifen:

<pre>
element.shadowRoot
</pre>

==Standard-Properties==

<pre>
static get properties() {
return {
hidden: false,
disabled: false,
readonly: false,
margin: '',
padding: '',
};
}
</pre>

Jedes FTUI-Element bekommt diese Attribute:

<pre>
<ftui-button hidden></ftui-button>
<ftui-button disabled></ftui-button>
<ftui-button readonly></ftui-button>
<ftui-button margin="1"></ftui-button>
<ftui-button padding="0.5"></ftui-button>
</pre>

==observedAttributes==

<pre>
static get observedAttributes() {
return [...Object.keys(FtuiElement.properties)];
}
</pre>

Der Browser ruft `attributeChangedCallback()` nur für Attribute auf, die hier stehen.

Wichtig: Hier werden nur die Basiseigenschaften beobachtet. Abgeleitete Komponenten müssen wahrscheinlich selbst `observedAttributes` erweitern, sonst werden ihre eigenen Attribute nicht automatisch beobachtet.

==convertToAttributes

<pre>
static convertToAttributes(properties) {
return Object.keys(properties).map(property => toKebabCase(property));
}
</pre>

Hilfsfunktion, um Property-Namen in HTML-Attributnamen umzuwandeln.

Beispiel:

<pre>
baseWidth
</pre>

wird zu:

<pre>
base-width
</pre>

==connectedCallback==

<pre>
connectedCallback() {
this.updateProperties();
if (typeof this.onConnected === 'function') {
this.onConnected();
}
}
</pre>

Diese Methode wird automatisch vom Browser aufgerufen, wenn das Element in die Seite eingefügt wird.

Ablauf:

1. Standardwerte werden verarbeitet.
2. Falls die konkrete Komponente `onConnected()` definiert, wird diese Hook-Funktion ausgeführt.

Beispiel in einer Kindklasse:

<pre>
onConnected() {
console.log('Button ist im DOM');
}
</pre>

==attributeChangedCallback

<pre>
attributeChangedCallback(name, oldValue, newValue) {
</pre>

Wird aufgerufen, wenn ein beobachtetes Attribut geändert wird.

<pre>
log(3, `${this.id} - attributeChangedCallback ...`)
</pre>

Debug-Ausgabe.

<pre>
if (typeof this.onAttributeChanged === 'function') {
this.onAttributeChanged(name, newValue, oldValue);
}
</pre>

Hook für Kindklassen.

Danach behandelt die Basisklasse ihre Standardattribute:

#==hidden

<pre>
case 'hidden':
this.style.display = hasValue ? 'none' : '';
</pre>

Wenn `hidden` gesetzt ist, wird das Element ausgeblendet.

#==disabled

<pre>
case 'disabled':
this.style.filter = hasValue ? 'sepia(1) saturate(0) blur(1px)' : '';
this.style.pointerEvents = hasValue ? 'none' : '';
</pre>

Optisch ausgegraut und nicht anklickbar.

#==readonly

<pre>
case 'readonly':
this.style.pointerEvents = hasValue ? 'none' : '';
</pre>

Nicht bedienbar, aber ohne optischen Filter.

#==margin

<pre>
case 'margin':
if (this.tagName !== 'FTUI-GRID') {
this.style.margin = isNumeric(newValue) ? newValue + 'em' : newValue;
}
</pre>

Wenn numerisch:

<pre>
margin="1"
</pre>

wird zu:

<pre>
margin: 1em;
</pre>

Wenn nicht numerisch:

<pre>
margin="10px"
</pre>

bleibt:

<pre>
margin: 10px;
</pre>

Für `FTUI-GRID` wird `margin` hier nicht gesetzt, vermutlich weil `ftui-grid` sein eigenes Margin-Verhalten hat.

#==padding

<pre>
case 'padding':
this.style.padding = isNumeric(newValue) ? newValue + 'em' : newValue;
</pre>

Analog zu `margin`.

==submitChange==

<pre>
submitChange(property, value) {
this.isActiveChange[property] = true;
this[property] = value;
this.emitChangeEvent(property, value);
}
</pre>

Das ist wichtig für FTUI-Bindings.

Wenn eine Komponente intern einen Wert ändert, etwa ein Button oder Slider, ruft sie:

<pre>
this.submitChange('value', newValue);
</pre>

Dann passiert:

1. Änderung wird als aktiv markiert.
2. Property wird gesetzt.
3. Ein Event `valueChange` wird ausgelöst.

Dieses Event kann FTUI dann nutzen, um per `(value)` oder `[(value)]` etwas an FHEM zu senden.

==emitChangeEvent und emitEvent==

<pre>
emitChangeEvent(attribute, value) {
this.emitEvent(attribute + 'Change', value);
}
</pre>

Aus `value` wird:

</pre>text
valueChange
</pre>

<pre>
emitEvent(name, value) {
const event = new CustomEvent(name, { detail: value });
this.dispatchEvent(event);
}
</pre>

Es wird ein normales DOM-Event ausgelöst.

Beispiel:

<pre>
this.emitChangeEvent('value', 'on');
</pre>

erzeugt:

<pre>
new CustomEvent('valueChange', { detail: 'on' })
</pre>

==initProperties==

<pre>
initProperties(properties) {
Object.entries(properties).forEach(([name, defaultValue]) => {
</pre>

Für jede Property wird automatisch ein passender Getter/Setter erzeugt.

Beispiel:

<pre>
hidden: false
</pre>

wird zu:

<pre>
element.hidden
</pre>

und HTML-Attribut:

<pre>
hidden
</pre>

#==Boolean

<pre>
if (typeof properties[name] === 'boolean') {
this.defineBooleanProperty(name, attr);
this.initBooleanAttribute(attr, defaultValue);
}
</pre>

Boolean-Attribute funktionieren nach HTML-Logik:

<pre>
<ftui-button disabled></ftui-button>
</pre>

bedeutet `true`.

#==Number

<pre>
else if (typeof properties[name] === 'number') {
this.defineNumberProperty(name, attr);
this.initAttribute(attr, defaultValue);
}
</pre>

Wird beim Lesen in `Number(...)` umgewandelt.

#==String

<pre>
else {
this.defineStringProperty(name, attr);
this.initAttribute(attr, defaultValue);
}
</pre>

Normale String-Attribute.

==initAttribute==

<pre>
initAttribute(attr, value) {
if (!this.hasAttribute(attr)) {
this.setAttribute(attr, value);
}
}
</pre>

Wenn das Attribut noch nicht im HTML steht, wird der Default gesetzt.

Beispiel:

<pre>
padding: ''
</pre>

führt zu:

<pre>
padding=""
</pre>

==initBooleanAttribute==

<pre>
initBooleanAttribute(attr, value) {
if (!this.hasAttribute(attr) && value) {
this.setAttribute(attr, '');
}
}
</pre>

Boolean-Attribute werden nur gesetzt, wenn der Default `true` ist.

Da `hidden`, `disabled`, `readonly` alle `false` sind, werden sie standardmäßig nicht gesetzt.

==defineBooleanProperty

<pre>
Object.defineProperty(this, name, {
get() {
return this.hasAttribute(attr)
&& this.getAttribute(attr) !== 'false';
},
set(value) {
if (value) {
this.setAttribute(attr, '');
} else {
this.removeAttribute(attr);
}
},
});
</pre>

Damit kann man schreiben:

<pre>
element.disabled = true;
</pre>

und bekommt im HTML:

<pre>
<ftui-button disabled></ftui-button>
</pre>

Bei:

<pre>
element.disabled = false;
</pre>

wird das Attribut entfernt.

Interessant:

<pre>
disabled="false"
</pre>

wird als `false` interpretiert. Das ist etwas komfortabler als natives HTML, wo ein vorhandenes Boolean-Attribut normalerweise immer wahr ist.

==defineNumberProperty

<pre>
get() { return Number(this.getAttribute(attr)); },
set(value) { this.setAttribute(attr, value); },
</pre>

Beispiel:

<pre>
<ftui-grid-tile row="2"></ftui-grid-tile>
</pre>

<pre>
element.row
</pre>

liefert Zahl `2`.

==defineStringProperty

<pre>
get() { return this.getAttribute(attr); },
set(value) { this.setAttribute(attr, value); },
</pre>

Normale Abbildung:

<pre>
element.text = 'Hallo';
</pre>

wird zu:

<pre>
text="Hallo"
</pre>

==updateProperties

<pre>
updateProperties() {
Object.entries(this.properties).forEach(([name, defaultValue]) => {
const attr = toKebabCase(name);
if (this.getAttribute(attr) === String(defaultValue)) {
this.attributeChangedCallback(attr, null, defaultValue);
}
})
}
</pre>

Beim Einfügen ins DOM werden Standardattribute nochmal verarbeitet.

Warum?
Wenn ein Attribut schon beim Erzeugen gesetzt wurde, kann es sein, dass die Style-Logik noch nicht gelaufen ist. `updateProperties()` erzwingt deshalb die Behandlung der Defaultwerte.

==Kommentierte Version==

<pre>
import { isNumeric, toKebabCase, log } from '../modules/ftui/ftui.helper.js';

// Zähler für automatisch erzeugte IDs pro Elementtyp
const uids = {};

// Basisklasse aller FTUI-Webcomponents
export class FtuiElement extends HTMLElement {

constructor(properties) {
super();

// Falls keine ID vorhanden ist, automatisch eine eindeutige ID erzeugen
if (!this.id) {
if (!uids[this.localName]) {
uids[this.localName] = 1;
}
this.id = `${this.localName.replace(/-/g, '_')}_${uids[this.localName]++}`;
}

// Standardproperties der Basisklasse mit Komponentenproperties kombinieren
this.properties = Object.assign(FtuiElement.properties, properties);

// Für alle Properties Getter/Setter und Default-Attribute anlegen
this.initProperties(this.properties);

// Wenn die Komponente ein Template besitzt, Shadow DOM erzeugen
if (typeof this.template === 'function') {
this.createShadowRoot(this.template());
}

// Merker für aktive Änderungen, wichtig für Output-/Two-Way-Bindings
this.isActiveChange = {};

// Element beim globalen FTUI-Binding-System anmelden
if (window.ftuiApp) {
ftuiApp.attachBinding(this);
}
}

// Erzeugt Shadow DOM aus einem HTML-Template-String
createShadowRoot(content) {
const elemTemplate = document.createElement('template');
elemTemplate.innerHTML = content;
this.attachShadow({ mode: 'open' });
this.shadowRoot.appendChild(elemTemplate.content.cloneNode(true));
}

// Standardattribute, die jedes FTUI-Element besitzt
static get properties() {
return {
hidden: false,
disabled: false,
readonly: false,
margin: '',
padding: '',
};
}

// Attribute, bei deren Änderung attributeChangedCallback ausgelöst wird
static get observedAttributes() {
return [...Object.keys(FtuiElement.properties)];
}

// Wandelt Property-Namen in HTML-Attributnamen um
static convertToAttributes(properties) {
return Object.keys(properties).map(property => toKebabCase(property));
}

// Wird vom Browser aufgerufen, wenn das Element in den DOM eingefügt wurde
connectedCallback() {
this.updateProperties();

// Hook für abgeleitete Komponenten
if (typeof this.onConnected === 'function') {
this.onConnected();
}
}

// Wird aufgerufen, wenn sich ein beobachtetes Attribut ändert
attributeChangedCallback(name, oldValue, newValue) {
log(3, `${this.id} - attributeChangedCallback name=${name}, oldValue=${oldValue}, newValue=${newValue}`);

// Hook für abgeleitete Komponenten
if (typeof this.onAttributeChanged === 'function') {
this.onAttributeChanged(name, newValue, oldValue);
}

const hasValue = newValue !== null && newValue !== false;

// Standardattribute behandeln
switch (name) {
case 'hidden':
this.style.display = hasValue ? 'none' : '';
break;

case 'disabled':
this.style.filter = hasValue ? 'sepia(1) saturate(0) blur(1px)' : '';
this.style.pointerEvents = hasValue ? 'none' : '';
break;

case 'readonly':
this.style.pointerEvents = hasValue ? 'none' : '';
break;

case 'margin': {
// ftui-grid behandelt margin selbst
if (this.tagName !== 'FTUI-GRID') {
this.style.margin = isNumeric(newValue) ? newValue + 'em' : newValue;
}
break;
}

case 'padding': {
this.style.padding = isNumeric(newValue) ? newValue + 'em' : newValue;
break;
}
}
}

// Wird von Komponenten genutzt, wenn ein Benutzerwert geändert wurde
submitChange(property, value) {
this.isActiveChange[property] = true;
this[property] = value;
this.emitChangeEvent(property, value);
}

// Erzeugt z.B. valueChange aus value
emitChangeEvent(attribute, value) {
this.emitEvent(attribute + 'Change', value);
}

// Löst ein DOM CustomEvent aus
emitEvent(name, value) {
const event = new CustomEvent(name, { detail: value });
this.dispatchEvent(event);
}

// Initialisiert Properties abhängig vom Typ des Defaultwerts
initProperties(properties) {
Object.entries(properties).forEach(([name, defaultValue]) => {
const attr = toKebabCase(name);

if (typeof properties[name] === 'boolean') {
this.defineBooleanProperty(name, attr);
this.initBooleanAttribute(attr, defaultValue);

} else if (typeof properties[name] === 'number') {
this.defineNumberProperty(name, attr);
this.initAttribute(attr, defaultValue);

} else {
this.defineStringProperty(name, attr);
this.initAttribute(attr, defaultValue);
}
});
}

// Setzt Default-Attribut, wenn es noch nicht existiert
initAttribute(attr, value) {
if (!this.hasAttribute(attr)) {
this.setAttribute(attr, value);
}
}

// Setzt Boolean-Attribut nur, wenn Default true ist
initBooleanAttribute(attr, value) {
if (!this.hasAttribute(attr) && value) {
this.setAttribute(attr, '');
}
}

// Definiert Boolean-Property mit HTML-Attribut-Synchronisierung
defineBooleanProperty(name, attr) {
Object.defineProperty(this, name, {
get() {
return this.hasAttribute(attr)
&& this.getAttribute(attr) !== 'false';
},
set(value) {
if (value) {
this.setAttribute(attr, '');
} else {
this.removeAttribute(attr);
}
},
});
}

// Definiert Number-Property
defineNumberProperty(name, attr) {
Object.defineProperty(this, name, {
get() {
return Number(this.getAttribute(attr));
},
set(value) {
this.setAttribute(attr, value);
},
});
}

// Definiert String-Property
defineStringProperty(name, attr) {
Object.defineProperty(this, name, {
get() {
return this.getAttribute(attr);
},
set(value) {
this.setAttribute(attr, value);
},
});
}

// Behandelt Defaultwerte beim Einfügen des Elements in den DOM
updateProperties() {
Object.entries(this.properties).forEach(([name, defaultValue]) => {
const attr = toKebabCase(name);

if (this.getAttribute(attr) === String(defaultValue)) {
this.attributeChangedCallback(attr, null, defaultValue);
}
});
}
}
</pre>

==Mögliche Schwachstellen / Besonderheiten==

1. **`Object.assign(FtuiElement.properties, properties)` mutiert die statischen Basiseigenschaften.**
Sicherer wäre:

<pre>
this.properties = Object.assign({}, FtuiElement.properties, properties);
</pre>

2. **`observedAttributes` enthält nur Basiseigenschaften.**
Kindklassen müssen eigene Attribute selbst hinzufügen.

3. **Boolean-Erkennung `newValue !== false` ist etwas ungenau.**
Attribute liefern normalerweise Strings oder `null`, nicht echtes `false`. Bei `disabled="false"` funktioniert der Getter zwar korrekt, aber `attributeChangedCallback()` behandelt `"false"` trotzdem als vorhanden.

4. **`initAttribute()` setzt auch leere Default-Strings als Attribute.**
Dadurch entstehen Attribute wie:

<pre>
margin=""
padding=""
</pre>

Das ist nicht falsch, aber kann unnötige `attributeChangedCallback()`-Aufrufe erzeugen.

5. **`createShadowRoot()` nutzt `innerHTML`.**
Das ist normal für Templates, aber Template-Inhalte sollten kontrolliert sein.

==Merksatz==

Dieses Programm macht aus einer normalen Webcomponent eine **FTUI-kompatible Komponente mit Attributbindung, Defaultwerten, Shadow DOM und Change-Events**.

(FHEM) FTUI 3

2026-04-26T15:08:08Z

Hauptstruktur

Änderungen zeigen

TippvomTibb - Letzte Änderungen [de]

(FHEM) FTUI 3

(FHEM) FTUI 3 Components

(FHEM) FTUI 3 Components

(FHEM) FTUI 3