Visão geral dos blocos personalizados

O Blockly vem com um grande número de blocos predefinidos, desde funções matemáticas até estruturas de loop. No entanto, a maioria dos aplicativos precisa definir e implementar blocos personalizados para o domínio. Por exemplo, um aplicativo de desenho pode precisar de blocos para desenhar linhas e círculos, e um aplicativo de robótica pode precisar de blocos para mover um braço e manipular uma garra.

Para definir e usar um novo tipo de bloco, você precisa de três coisas:

• Definição de bloco: define a aparência de um tipo de bloco, bem como determinados comportamentos.
• Gerador de código de bloco: gera a string de código para blocos desse tipo. Ele sempre é escrito em JavaScript, mesmo que a linguagem de destino não seja JavaScript.
• Referência da caixa de ferramentas: uma referência ao tipo de bloco na caixa de ferramentas para que os usuários possam adicioná-lo ao espaço de trabalho.

Definição de bloco

Uma definição de bloco define a aparência de um bloco, como texto, campos, conexões e cor. Ele também pode definir um comportamento específico do bloco, como um manipulador de eventos específico do bloco. Por exemplo, este bloco:

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"
}]);

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');
   }
};

Para mais informações sobre definições de bloco e como elas funcionam, consulte O que é uma definição de bloco?.

Geradores de código em blocos

Para transformar um bloco em código, você precisa de funções geradoras separadas para cada linguagem que quer gerar. Por exemplo, este é um gerador que gera JavaScript:

javascriptGenerator.forBlock['string_length'] = function(block, generator) {
   // String or array length.
   var argument0 = generator.valueToCode(block, 'VALUE', Order.FUNCTION_CALL) || '\'\'';
   return [argument0 + '.length', Order.MEMBER];
};

A função geradora aceita o bloco que está sendo processado e um gerador de linguagem. Ele gera código para todos os blocos anexados às entradas (como a entrada VALUE no exemplo) e todos os campos. Em seguida, concatena as strings resultantes em uma expressão maior.

Para mais informações, consulte Geradores de código em blocos.

Referência da caixa de ferramentas

Depois de definir o tipo de bloco, use o nome dele para fazer referência em uma caixa de ferramentas:

JSON

var toolbox = {
     "kind": "categoryToolbox",
     "name": "Text"
     "contents": [
       {
         "kind": "block",
         "type": "string_length"
       },
     ]
   };

XML

<xml id="toolbox" style="display: none"> WHY IS THERE DISPLAY: NONE HERE?
   <category name="Text">
     <block type="string_length"></block>
   </category>
   ...
</xml>

Para mais informações, consulte Definir uma caixa de ferramentas flutuante ou Definir uma caixa de ferramentas de categoria.