Добавить пользовательские блоки

Хотя Blockly определяет ряд стандартных блоков, большинству приложений необходимо определить и реализовать хотя бы несколько блоков, соответствующих предметной области.

Блоки состоят из трех компонентов:

Объект определения блока: определяет внешний вид и поведение блока, включая текст, цвет, поля и соединения.
Ссылка на панель инструментов: ссылка на тип блока в XML панели инструментов, позволяющая пользователям добавлять его в рабочую область.
Функция генератора: генерирует строку кода для этого блока. Он всегда пишется на JavaScript, даже если целевой язык не является JavaScript.

Определение блока

Blockly для Интернета загружает блоки через файлы сценариев. Каталог blocks/ содержит несколько таких примеров для стандартных блоков. Предполагая, что ваши блоки не помещаются в существующие категории, создайте новый файл JavaScript. Этот новый файл JavaScript необходимо включить в список тегов <script ...> HTML-файла редактора.

Типичное определение блока выглядит следующим образом:

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 : это имя типа блока. Поскольку все блоки используют одно и то же пространство имен, полезно использовать имя, состоящее из вашей категории (в данном случае string ), за которым следует функция вашего блока (в данном случае length ).
init : эта функция определяет внешний вид блока.

Это определяет следующий блок:

Блок `string_length`.

Подробную информацию об определениях блоков можно найти в разделе «Определение блоков» .

JSON-массив

Несколько блоков можно определить одновременно, используя массив определений блоков JSON.

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

Добавить ссылку на панель инструментов

После определения используйте имя типа для ссылки на блок на панель инструментов:

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

Дополнительную информацию см. в руководстве Toolbox .

Добавить генератор блочного кода

Наконец, чтобы преобразовать блок в код, соедините его с функцией-генератором. Генераторы зависят от желаемого языка вывода, но стандартные генераторы обычно имеют следующий формат:

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

Функция генератора принимает ссылку на блок для обработки. Он преобразует входные данные (входные данные VALUE выше) в строки кода, а затем объединяет их в более крупное выражение.

→ Подробнее о генераторах блок-кода ...