Étendre un champ existant

Pour étendre un champ existant, vous devez sous-classer un champ intégré (par exemple, FieldTextInput, FieldColour), puis modifiez-en une partie en fonction de vos besoins. Vous pouvez modifier les parties suivantes d'un champ:

Si vous souhaitez créer un champ personnalisé qui n'a besoin d'aucun comportement à partir 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 stocker un numéro, prolongez FieldNumber.
  • Menu déroulant: si vous souhaitez créer un menu déroulant, mais que vous voulez qu'il stocke un autre modèle que le modèle de chaîne ou d'image par défaut, vous devez étendre FieldDropdown.
    • Attention: Avant d'étendre FieldDropdown, vérifiez que la propriété Les options de personnalisation ne peuvent pas répondre à vos besoins.

Dans certains cas, vous pouvez souhaiter étendre un type de champ différent. Pour 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 de un champ personnalisé. La signature du sous-constructeur doit correspondent généralement à la signature du super-constructeur.

JSON et enregistrement

Vous devez également enregistrer le champ une fois:

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

et fournir une implémentation de fromJson dans la classe afin qu'elle fonctionne avec au format JSON:

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

Pour en savoir plus sur l'enregistrement d'un champ, consultez la page JSON et enregistrement. de la section "Création d'un champ personnalisé".