DroidScript

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

© 2016-2018 Автор материалов - Александр Страшко admin@starport.ru
DroidScript
инструменты для мобильной разработки

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

© 2016-2018 Автор материалов - Александр Страшко admin@starport.ru
Blockly  
Дата изменения 12.08.2018

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Цвет для блока можно задать при помощи значения от 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