Étendre un champ existant

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:

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.

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é.