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

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

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

Блок `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 вы создаете определение блока напрямую.

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

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

Поскольку функции определения смешаны с объектом блока:

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

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

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

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

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

  • Используйте инструменты разработчика Blockly, чтобы настроить внешний вид и содержание вашего блока. Скопируйте сгенерированный JSON-код или JavaScript в свой код и добавьте необходимый код. Подробнее см. в разделе «Инструменты разработчика Blockly» .
  • Найдите похожий блок, скопируйте его определение и измените его при необходимости. Подробнее см. в разделе Изменение существующих определений .
  • Напишите определение блока вручную. Подробнее см. в разделе JSON и JavaScript .