Pour étendre un champ existant, vous devez sous-classer un champ intégré (par exemple, FieldTextInput
ou FieldColour
), puis en modifier une partie selon vos besoins.
Voici certaines parties d'un champ que vous pouvez modifier:
- Son éditeur.
- Son écran dans le bloc.
- Le texte affiché.
Si vous souhaitez créer un champ personnalisé qui n'a pas besoin du comportement d'un champ intégré, vous devez sous-classer Field
.
Extensions courantes
La plupart des champs personnalisés étendent l'un de ces trois types:
- Saisie de texte: si vous souhaitez que vos utilisateurs saisissent du texte dans votre champ, vous devez étendre
FieldTextInput
. - Nombre: si vous souhaitez enregistrer un numéro, vous devez prolonger
FieldNumber
. - Menu déroulant: si vous souhaitez créer une liste déroulante, mais que vous souhaitez qu'elle stocke un modèle différent de celui de la chaîne ou du modèle d'image par défaut, étendez
FieldDropdown
.- Attention: Avant d'étendre
FieldDropdown
, vérifiez que les options de personnalisation du champ déroulant ne peuvent pas répondre à vos besoins.
- Attention: Avant d'étendre
Dans certains cas, il se peut que vous souhaitiez étendre un autre type de champ. Par exemple, FieldLabelSerializable
étend FieldLabel
.
Sous-classement
import * as Blockly from 'blockly';
export class MyCustomTextField extends Blockly.FieldTextInput {
constructor(value, validator, config) {
super(value, validator, config);
}
}
Le constructeur de la sous-classe d'un champ ressemble beaucoup au constructeur d'un champ personnalisé. La signature du sous-constructeur doit généralement correspondre à celle du super-constructeur.
JSON et enregistrement
Vous devez également enregistrer le champ une seule fois:
Blockly.fieldRegistry.register('my_custom_text_field', MyCustomTextField);
et fournir une implémentation de fromJson
dans la classe afin qu'elle fonctionne avec le format JSON:
static fromJson(options) {
const value = Blockly.utils.parsing.replaceMessageReferences(options.value);
return new MySubclassName(value);
}
Pour plus d'informations sur l'enregistrement d'un champ, consultez la section JSON et enregistrement dans Créer un champ personnalisé.