Обзор пользовательских блоков

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

Для определения и использования нового типа блока вам потребуется три вещи:

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

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

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

Блок `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"
}]);

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:

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

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

Для получения более подробной информации см. Генераторы блочного кода .

Справочник по инструментам

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

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>

Для получения дополнительной информации см. разделы «Определение всплывающего меню» или «Определение меню категорий» .