Ein vorhandenes Feld erweitern

Zum Erweitern eines vorhandenen Felds müssen Sie einem integrierten Feld (z. B. FieldTextInput, FieldColour) abgeleitete Klassen erstellen und dann einen Teil davon an Ihre Anforderungen anpassen. Folgende Teile eines Feldes können geändert werden:

• Den Editor.
• Das On-Block-Display.
• Der angezeigte Text

Wenn Sie ein benutzerdefiniertes Feld erstellen möchten, das kein Verhalten von integrierten Feldern erfordert, sollten Sie eine abgeleitete Klasse von Field erstellen.

Gängige Erweiterungen

Die meisten benutzerdefinierten Felder erweitern einen dieser drei Typen:

• Texteingabe: Wenn Sie möchten, dass Ihre Nutzer Text in das Feld eingeben, sollten Sie FieldTextInput erweitern.
• Zahl: Wenn Sie eine Nummer speichern möchten, sollten Sie FieldNumber erweitern.
• Drop-down: Wenn Sie ein Drop-down-Menü erstellen möchten, aber ein anderes Modell als das Standardstring- oder Bildmodell speichern möchten, sollten Sie FieldDropdown erweitern.
  • Achtung: Bevor Sie FieldDropdown erweitern, prüfen Sie, ob die Anpassungsoptionen des Drop-down-Felds Ihre Anforderungen nicht erfüllen.

Unter bestimmten Umständen möchten Sie möglicherweise einen anderen Feldtyp erweitern. Beispiel: FieldLabelSerializable erweitert FieldLabel.

Abgeleitete Klassen

import * as Blockly from 'blockly';

export class MyCustomTextField extends Blockly.FieldTextInput {

  constructor(value, validator, config) {
    super(value, validator, config);
  }
}

Der Konstruktor für die Unterklasse eines Felds sieht dem Konstruktor für ein benutzerdefiniertes Feld sehr ähnlich. Die Signatur des Subkonstruktors sollte im Allgemeinen mit der Signatur des Superkonstruktors übereinstimmen.

JSON und Registrierung

Sie sollten das Feld auch einmal registrieren:

Blockly.fieldRegistry.register('my_custom_text_field', MyCustomTextField);

und geben Sie eine Implementierung von fromJson in der Klasse an, damit sie mit dem JSON-Format funktioniert:

static fromJson(options) {
  const value = Blockly.utils.parsing.replaceMessageReferences(options.value);
  return new MySubclassName(value);
}

Weitere Informationen zum Registrieren eines Felds finden Sie im Abschnitt JSON und Registrierung in "Benutzerdefiniertes Feld erstellen".