Visão geral dos blocos personalizados

O Blockly vem com um grande número de blocos predefinidos, de funções matemáticas a estruturas de looping. 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 o idioma 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 o 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 as definições de bloco e como elas funcionam, consulte O que é uma definição de bloco?.

Geradores de código de bloco

Para transformar um bloco em código, você precisa de funções de gerador separadas para cada linguagem que você 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 do gerador aceita o bloco que está sendo processado e um gerador de linguagem. Ele gera código para todos os blocos anexados a entradas (como a entrada VALUE no exemplo) e todos os campos e, em seguida, concatena as strings resultantes em uma expressão maior.

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

Referência da caixa de ferramentas

Depois de definir o tipo de bloco, use o nome do tipo para fazer referência a ele 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 desdobrável ou Definir uma caixa de ferramentas de categorias.