Como estender um campo existente

Para estender um campo existente, é necessário criar uma subclasse a um campo integrado (por exemplo, FieldTextInput, FieldColour) e, em seguida, modificar parte dele para atender às suas necessidades. Estas são algumas partes de um campo que você pode modificar:

Se você quiser criar um campo personalizado que não precise 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 você quiser que os usuários digitem no campo, estenda 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 um modelo diferente do modelo padrão de string ou de imagem, estenda FieldDropdown.
    • Cuidado: antes de estender FieldDropdown, verifique se as opções de personalização do campo de menu suspenso não atendem às suas necessidades.

Sob certas circunstâncias, pode ser necessário estender um tipo de campo diferente. Por 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. Geralmente, a assinatura do subconstrutor precisa corresponder à 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 mais informações sobre como registrar um campo, consulte a seção JSON e registro em "Como criar um campo personalizado".