DroidScript
DroidScript
инструменты для мобильной разработки

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

Blockly  
12.08.2018

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

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

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

Блок для отправки email

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

Генератор кода - это функция, которая должна возвращать код в строковой форме. При помощи метода 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.valueToCode используется для корректного преобразования значения параметра в строку кода. Это важно, так как в противном случае могут возникнуть ошибки при работе функции eval(). Например, если в текстовом блоке написать 1+1, то при некорректной обработки данного значения интерпретатор попытается вычислить сумму вместо отображения строки.

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

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

<block type="send_email">
  <value name="Email">
    <block type="text">
	  <field name="TEXT">email</field>
    </block>
  </value>
</block>
Blockly  
© 2016-2018 Александр Страшко