Um ein vorhandenes Feld zu erweitern, müssen Sie eine Unterklasse eines integrierten Felds (z. B.
FieldTextInput
, FieldColour
) und passen Sie dann einen Teil an Ihre Bedürfnisse an.
Sie können folgende Bereiche eines Felds ändern:
- Das Editor haben.
- Das On-Block-Display.
- Die Text angezeigt wird.
Wenn Sie ein
benutzerdefiniertes Feld
die kein Verhalten aus einem integrierten Feld benötigt, sollten Sie Field
ableiten.
Gängige Erweiterungen
Die meisten benutzerdefinierten Felder umfassen einen dieser drei Typen:
- Texteingabe: Wenn Sie möchten, dass die Nutzer Text in das Feld eingeben können, müssen Sie
FieldTextInput
- Zahl: Wenn Sie eine Nummer speichern möchten, müssen Sie
FieldNumber
erweitern. - Drop-down: Wenn Sie ein Drop-down-Menü erstellen, aber ein anderes Modell speichern möchten.
als der Standardstring oder das Standard-Bildmodell, sollten Sie
FieldDropdown
erweitern.- Achtung: Bevor Sie
FieldDropdown
erweitern, prüfen Sie, ob die Anpassungsoptionen können Ihre Anforderungen nicht erfüllen.
- Achtung: Bevor Sie
Unter bestimmten Umständen ist es sinnvoll, einen anderen Feldtyp zu erweitern. Für
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 ähnelt dem konstruktor für ein benutzerdefiniertes Feld. Die Signatur des Unterkonstruktors sollte mit der Signatur des Super-Konstruktors übereinstimmt.
JSON und Registrierung
Sie sollten das Feld auch einmal registrieren:
Blockly.fieldRegistry.register('my_custom_text_field', MyCustomTextField);
und eine Implementierung von fromJson
in der Klasse bereitstellen, damit sie mit
JSON-Format:
static fromJson(options) {
const value = Blockly.utils.parsing.replaceMessageReferences(options.value);
return new MySubclassName(value);
}
Weitere Informationen zum Registrieren eines Felds finden Sie unter JSON und Registrierung im Abschnitt Benutzerdefinierte Felder erstellen.