O que é uma definição de bloco?

Uma definição de bloco é um objeto que define um bloco personalizado. Por exemplo, ela define a aparência do bloco (texto, campos, conexões, cor etc.), bem como o comportamento dele (manipulador 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 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 de 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 um comportamento personalizado.

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

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

O Blockly define um pequeno número de funções que podem ser usadas para personalizar blocos. A mais comum delas é init, que o Blockly chama para inicializar um bloco e que é usada para definir a aparência do bloco. Para uma lista completa, consulte as propriedades com valor de função nas Block e BlockSvg classes. Essas propriedades formam uma interface para as definições de bloco a serem 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 manipulador de eventos no nível do bloco (a propriedade Block.onchange) pode delegar diferentes eventos a diferentes funções personalizadas.

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 bloco. Copie o JSON ou JavaScript gerado para o 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 atuais.
  • Escreva uma definição de bloco manualmente. Para mais informações, consulte JSON e JavaScript.