Что такое определение блока?

Определение блока — это объект, определяющий пользовательский блок. Например, он определяет внешний вид блока (текст, поля, соединения, цвет и т. д.), а также его поведение (обработчик событий на уровне блока и т. д.).

Например, этот блок:

Блок `string_length`.

Может быть определено в формате JSON или JavaScript следующим образом:

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 создает определение блока на основе объекта 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');
   }
};

При использовании JavaScript вы создаёте определение блока напрямую.

Как работают определения блоков

Определение блока представляет собой примесь, содержащую свойства, принимающие значения в виде функций. При создании нового экземпляра блока эти свойства копируются в вновь созданный объект блока. Blockly вызывает эти функции для реализации пользовательского поведения.

Поскольку функции определения включены в блочный объект:

  • Ключевое слово this в определении функций относится к объекту блока. То есть, его можно использовать для доступа к открытым методам и свойствам класса Block (или BlockSvg ).

Blockly определяет небольшое количество функций, которые можно использовать для настройки блоков. Наиболее распространенной из них является init , которую Blockly вызывает для инициализации блока и которая используется для определения внешнего вида блока. Полный список см. в свойствах, определяемых функциями, в классах Block и BlockSvg . Эти свойства фактически образуют интерфейс для реализации в определениях блоков; все они являются необязательными.

В определениях блоков также могут содержаться пользовательские функции, хотя Blockly не будет вызывать их напрямую. Вместо этого их можно использовать для реализации других функций. Например, обработчик событий на уровне блока (свойство Block.onchange ) может делегировать различные события различным пользовательским функциям.

Как создавать определения блоков

Существует несколько различных способов создания определений блоков:

  • Используйте инструменты разработчика Blockly, чтобы определить внешний вид вашего блока. Скопируйте сгенерированный JSON или JavaScript в свой код и добавьте пользовательский код по мере необходимости. Для получения дополнительной информации см. раздел «Инструменты разработчика Blockly» .
  • Найдите похожий блок, скопируйте его определение и внесите необходимые изменения. Дополнительную информацию см. в разделе «Изменение существующих определений» .
  • Write a block definition by hand. For more information, see JSON and JavaScript .