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

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>

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