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 do bloco (texto, campos, conexões, cor etc.), bem como o comportamento dele (processador 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 com base em 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 JavaScript, você cria a definição de bloco diretamente.

Como as definições de bloqueio funcionam

Uma definição de bloco é um mixin que contém propriedades com valores 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 um comportamento personalizado.

Como 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 propriedades públicos 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 deles é init, que o Blockly chama para inicializar um bloco e que é 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 implementações de definições de blocos. Todas elas são opcionais.

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

Como criar definições de bloco

Há várias maneiras 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 um 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 atuais.
  • Escrever uma definição de bloco à mão. Para mais informações, consulte JSON e JavaScript.