O que é uma definição de bloco?

Uma definição de bloco é um objeto que define um bloco personalizado. Por exemplo, ele define a aparência e a sensação do bloco (texto, campos, conexões, cor etc.), bem como o comportamento (gerenciador de eventos no nível do bloco etc.).

Por exemplo, este bloco:

Um bloco "string_length".

pode ser definido em JSON ou JavaScript da seguinte maneira:

JSON

Blockly.common.defineBlocksWithJsonArray([{
  "type": "string_length",
  "message0": 'length of %1',
  "args0": [
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "String"
    }
  ],
  "output": "Number",
  "colour": 160,
  "tooltip": "Returns number of letters in the provided text.",
  "helpUrl": "http://www.w3schools.com/jsref/jsref_length_string.asp"
}]);

defineBlocksWithJsonArray cria uma definição de bloco a partir de um objeto JSON.

JavaScript

Blockly.Blocks['string_length'] = {
   init: function() {
     this.appendValueInput('VALUE')
         .setCheck('String')
         .appendField('length of');
     this.setOutput(true, 'Number');
     this.setColour(160);
     this.setTooltip('Returns number of letters in the provided text.');
     this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');
   }
};

Ao usar o JavaScript, você cria a definição do bloco diretamente.

Como as definições de bloco funcionam

Uma definição de bloco é um mixin que contém propriedades com valor de função. Quando um novo bloco é instanciado, essas propriedades são copiadas para o objeto de bloco recém-criado. O Blockly chama essas funções para invocar o comportamento personalizado.

Porque as funções de definição são misturadas ao objeto de bloco:

  • A palavra-chave this em funções de definição se refere ao objeto de bloco. Ou seja, ele pode ser usado para acessar os métodos e as propriedades públicas na classe Block (ou BlockSvg).

O Blockly define um pequeno número de funções que podem ser usadas para personalizar blocos. O mais comum é init, que o Blockly chama para inicializar um bloco e é usado para definir a aparência do bloco. Para uma lista completa, consulte as propriedades com valor de função nas classes Block e BlockSvg. Essas propriedades formam uma interface para que as definições de bloco sejam implementadas. Todas elas são opcionais.

As definições de bloco também podem ter funções personalizadas, embora o Blockly não as chame diretamente. Em vez disso, elas podem ser usadas para implementar outras funções. Por exemplo, um gerenciador de eventos no nível do bloco (a propriedade Block.onchange) pode delegar eventos diferentes para funções personalizadas diferentes.

Como criar definições de bloco

Há várias maneiras diferentes de criar definições de bloco:

  • Use as Ferramentas para desenvolvedores do Blockly para definir a aparência do seu bloco. Copie o JSON ou JavaScript gerado para seu código e adicione o código personalizado conforme necessário. Para mais informações, consulte Ferramentas para desenvolvedores do Blockly.
  • Encontre um bloco semelhante, copie a definição dele e modifique conforme necessário. Para mais informações, consulte Modificar definições existentes.
  • Escreva uma definição de bloco à mão. Para mais informações, consulte JSON e JavaScript.