Espandere un campo esistente

Per estendere un campo esistente, devi creare una sottoclasse a un campo incorporato (ad es. FieldTextInput, FieldColour), quindi modificane parte in base alle tue esigenze. Alcune parti di un campo che puoi modificare sono:

Se vuoi creare una campo personalizzato che non richiede un comportamento da alcun campo integrato, devi eseguire la sottoclasse Field.

Estensioni comuni

La maggior parte dei campi personalizzati estende uno di questi tre tipi:

  • Inserimento testo: se vuoi che gli utenti digitino nel tuo campo, estende la FieldTextInput.
  • Numero: se vuoi memorizzare un numero, devi estendere FieldNumber.
  • Menu a discesa: se vuoi creare un menu a discesa, ma vuoi che memorizzi un modello diverso. rispetto alla stringa o al modello di immagine predefinito, devi estendere FieldDropdown.
    • Attenzione: prima di estendere FieldDropdown, verifica che il valore le opzioni di personalizzazione non sono in grado di soddisfare le tue esigenze.

In determinate circostanze, potresti voler estendere un tipo di campo diverso. Per l'esempio FieldLabelSerializable estende FieldLabel.

API Subclassing

import * as Blockly from 'blockly';

export class MyCustomTextField extends Blockly.FieldTextInput {

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

Il costruttore per la sottoclasse di un campo è molto simile al costruttore per un campo personalizzato. La firma del costruttore secondario in genere corrispondono alla firma del super-costruttore.

JSON e registrazione

Devi registrare il campo anche una volta:

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

e fornire un'implementazione di fromJson nella classe in modo che funzioni con il formato JSON:

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

Per scoprire di più sulla registrazione di un campo, consulta JSON e registrazione in Creazione di un campo personalizzato.