Blockly: создание новых блоков

Blockly позволяет использовать не только предопределённые блоки, но и создавать собственные блоки.

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

Работа по созданию нового блока состоит из трёх этапов:

1. Создание блока - определение внешнего вида и поведения блока
2. Создание генератора кода, который преобразует блок в код для выполнения
3. Добавление блока на панель инструментов
   

Создание блока

Существует два пути определения блока: при помощи объекта JSON и функции JavaScript. Формат JSON является кроссплатформенным, но для определения дополнительных функций придётся использовать JavaScript.

При создании блока можно задать:

• Входы (inputs)
• Выход или вертикальные соединения (output or connections)
• Поля (fields)
• Типы данных (type)
• Цвет (colour)

В качестве входа может выступать:

• Входной разъём для получения значения при горизонтальном соединении блока (value input)
• Закрытый разъём для составления выражения при помощи вертикальной стопки блоков (statement input)
• Фиктивный вход без разъёма (для многострочных полей) - используется для добавления в блок пояснительных надписей и пустых строк (dummy input)

Каждый вход имеет имя, по которому к нему можно обратиться в коде.

Помимо входа можно задать выход или вертикальные соединения.

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

• Текстовая область для ввода надписи (text)
• Текстовое поле ввода (text input)
• Числовое поле ввода (numeric input)
• Поле для ввода величины угла в градусах (angle input)
• Выпадающий список (dropdown)
• Флажок (checkbox)
• Поле выбора цвета (colour)
• Выпадающий список имён переменных (variable)
• Поле изображения (image)

Блоки могут работать со следующими типами данных Blockly:

• Любыми из указанных в списке (any of)
• Любыми (any)
• Логический (boolean)
• Числовой (Number)
• Строковый (String)
• Массив (Array)
• Другой (other)

Тип данных можно определить для входа, выхода, верхнего и нижнего соединителя.

Поля и типы можно настроить так, чтобы к блокам можно было подключить либо блоки с определённым типом данных, либо блоки любого типа. В последнем случае контроль типов данных ложится на плечи разработчика и пользователя.

Цвет для блока можно задать при помощи значения от 0 до 360 в формате HSV (рекомендуемый способ), в шестнадцатеричном формате #RRGGBB или с использованием предопределённых констант.

Определения предопределённых блоков находятся в папке Blockly/blocks.

Создадим блок отправки email

// JSON формат { "type": "send_email", "message0": "send mail %1 address %2", "args0": [ { "type": "input_dummy" }, { "type": "input_value", "name": "email", "check": "String" } ], "previousStatement": null, "nextStatement": null, "colour": 230, "tooltip": "", "helpUrl": "" }<br /><br />// JavaScript формат Blockly.Blocks['send_email'] = { init: function() { this.appendDummyInput() // фиктивный вход .appendField("send mail"); // название блока this.appendValueInput("email") // горизонтальный вход с именем .setCheck("String") // допустимый тип данных - строковый .appendField("address"); // надпись this.setPreviousStatement(true, null); // верхний соединитель this.setNextStatement(true, null); // нижний соединитель this.setColour(230); // цвет блока this.setTooltip(""); // всплывающая подсказка this.setHelpUrl(""); // ссылка на страницу помощи для данного блока } };

Структура блока в формате JavaScript выглядит более понятным образом.

В результате получится такой блок.

Создание генератора кода

Генератор кода - это функция, которая должна возвращать код в строковой форме. При помощи метода Blockly.JavaScript.workspaceToCode можно получить код всех расположенных в рабочем поле блоков, который затем выполнить при помощи функции eval(). Например, генератор кода для блока print возвращает строку "window.alert(' + msg + ');\n". Символ новой строки \n нужен для форматированного вывода кода для его просмотра.

Перед созданием генератор кода нужно выбрать язык, для которого будет происходить генерация, и подключить к странице редактора необходимые библиотеки из корневой папки Blockly:

<script src="javascript_compressed.js"> </script>
<script src="python_compressed.js"> </script>
<script src="php_compressed.js"> </script>
<script src="dart_compressed.js"> </script>
<script src="lua_compressed.js"> </script>

Код генераторов для предопределённых блоков находится в директории Blockly/generators

Для созданного ранее блока отправки email создадим генератор.

Blockly.JavaScript['send_email'] = function(block) { var value_email = Blockly.JavaScript.valueToCode(block, 'Email', Blockly.JavaScript.ORDER_ATOMIC); var code = 'location.href = "mailto:' + value_email + '"'; return [code, Blockly.JavaScript.ORDER_NONE]; };

Метод Blockly.JavaScript.valueToCode используется для корректного преобразования значения параметра в строку кода. Это важно, так как в противном случае могут возникнуть ошибки при работе функции eval(). Например, если в текстовом блоке написать 1+1, то при некорректной обработки данного значения интерпретатор попытается вычислить сумму вместо отображения строки.

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

Эта операция была рассмотрена на предыдущем занятии. Добавим созданный блок на панель инструментов.

<block type="send_email">
  <value name="Email">
    <block type="text">
	  <field name="TEXT">email</field>
    </block>
  </value>
</block>