Como estender um campo existente

Para estender um campo existente, você deve criar uma subclasse para um campo integrado (por exemplo, FieldTextInput, FieldColour) e depois modifique parte dela para atender às suas necessidades. Estas são algumas partes de um campo que você pode modificar:

Se você deseja criar um campo personalizado que não precisa de comportamento de nenhum campo integrado, crie a subclasse Field.

Extensões comuns

A maioria dos campos personalizados estende um destes três tipos:

  • Entrada de texto: se quiser que os usuários digitem em seu campo, você deverá estender FieldTextInput
  • Número: se você quiser armazenar um número, estenda FieldNumber.
  • Menu suspenso: se você quiser criar um menu suspenso, mas quiser que ele armazene outro modelo do que a string ou o modelo de imagem padrão, estenda FieldDropdown.
    • Cuidado: antes de estender FieldDropdown, verifique se o método as opções de personalização não podem atender às suas necessidades.

Em determinadas circunstâncias, pode ser necessário estender um tipo de campo diferente. Para o exemplo FieldLabelSerializable estende FieldLabel.

Criação de subclasses

import * as Blockly from 'blockly';

export class MyCustomTextField extends Blockly.FieldTextInput {

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

O construtor da subclasse de um campo é muito semelhante ao construtor de um campo personalizado. A assinatura do subconstrutor deve geralmente correspondem à assinatura do superconstrutor.

JSON e registro

Você também precisa registrar o campo uma vez:

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

e forneça uma implementação de fromJson na classe para que ela funcione com o formato JSON:

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

Para saber mais sobre como registrar um campo, consulte a documentação sobre JSON e registro em Criação de um campo personalizado.