Adicionar blocos personalizados

Embora o Blockly defina vários blocos padrão, a maioria dos aplicativos precisa definir e implementar pelo menos alguns blocos relevantes de domínio.

Os blocos são compostos por três componentes:

• Objeto de definição de bloco: define a aparência e o comportamento de um bloco. incluindo texto, cor, campos e conexões.
• Referência da caixa de ferramentas: uma referência ao tipo de bloco no XML da caixa de ferramentas para que os usuários possam adicioná-lo ao espaço de trabalho.
• Função gerador: gera a string de código para este bloco. Ele é sempre escrito em JavaScript, mesmo que o idioma de destino não seja JavaScript.

Definição do bloco

Blockly para carregamento da Web Blocos por arquivos de script. O diretório blocks/ inclui vários exemplos para os blocos padrão. Considerando que seus blocos não se encaixarem nas categorias existentes, crie um novo arquivo JavaScript. Esse novo arquivo JavaScript precisa ser incluído na lista de tags <script ...> no arquivo HTML do editor.

Observação: a maior parte de um bloco pode ser definida usando as Ferramentas para desenvolvedores do Blockly, em vez de criando manualmente o código abaixo.

Uma definição de bloco típica tem esta aparência:

JSON

Blockly.Blocks['string_length'] = {
  init: function() {
    this.jsonInit({
      "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');
  }
};

• string_length: é o nome do tipo do bloco. Como todos os blocos compartilham o mesmo namespace, é recomendável usar um nome composto por sua categoria (em neste caso string) seguida pela função do seu bloco (neste caso, length).

• init: essa função define a aparência do bloco.

Isso define o seguinte bloco:

Os detalhes das definições de bloco podem ser encontrados em Definir blocos.

Matriz JSON

Vários blocos podem ser definidos de uma só vez usando uma matriz de blocos JSON. e definições.

JSON

Blockly.defineBlocksWithJsonArray([
  // Block for colour picker.
  {
    "type": "colour_picker",
    "message0": "%1",
    "args0": [
      {
        "type": "field_colour",
        "name": "COLOUR",
        "colour": "#ff0000"
      }
    ],
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_PICKER_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_PICKER_TOOLTIP}",
    "extensions": ["parent_tooltip_when_inline"]
  },
  // Block for random colour.
  {
    "type": "colour_random",
    "message0": "%{BKY_COLOUR_RANDOM_TITLE}",
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_RANDOM_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_RANDOM_TOOLTIP}"
  }
]);

Adicionar referência da Toolbox

Depois de definido, use o nome do tipo para fazer referência ao bloco na caixa de ferramentas:

<xml id="toolbox" style="display: none">
  <category name="Text">
    <block type="string_length"></block>
  </category>
  ...
</xml>

Consulte o guia da Caixa de ferramentas para mais detalhes.

Adicionar gerador de código de bloco

Por fim, para transformar o bloco em código, pareie-o com um gerador função. Os geradores são específicos para o idioma de saída desejado, mas os geradores padrão geralmente têm o seguinte formato:

javascriptGenerator.forBlock['text_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 gerador usa uma referência ao bloco para processamento. Ele renderiza as entradas (a entrada VALUE, acima) em strings de código e, em seguida, as concatena em uma expressão maior.

→ Mais informações sobre geradores de código de bloco...