Дизайн приложения

При проектировании приложения, использующего Blockly, можно выбирать из нескольких парадигм. Следует заранее рассмотреть эти варианты, поскольку они влияют на блоки, которые понадобятся пользователю.

Конфигурация

Многие приложения Blockly используются для описания конфигураций, а не исполняемых программ. Приложения конфигурации обычно начинаются с инициализации одного блока корневого уровня в рабочей области. Хорошим примером является вкладка Block Factory в Blockly Developer Tools:

Blockly.Blocks['factory_base'] = {
  init: function() {
    this.setDeletable(false);
    this.setMovable(false);
    this.setEditable(false);
    // etc...
  }
}

Blockly.serialization.blocks.append({'type': 'factory_base'}, workspace);

Это создает неудаляемый, неперемещаемый блок, который содержит всю конфигурацию пользователя. Рабочее пространство может быть сериализовано в любое время для определения текущей конфигурации.

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

workspace.addChangeListener(Blockly.Events.disableOrphans);

Серийная программа

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

Каждый (не отключенный) блок в рабочей области будет частью программы. Если есть несколько стопок блоков, то сначала выполняются более высокие. (Если две стопки примерно одинаковой высоты, приоритет отдается стопкам слева (справа в режиме RTL).)

Рабочее пространство может быть экспортировано в исполняемый код в любое время. Этот код может быть выполнен на стороне клиента в JavaScript (с использованием eval или JS Interpreter) или на стороне сервера на любом языке.

import {javascriptGenerator} from 'blockly/javascript';

var code = javascriptGenerator.workspaceToCode(workspace);

Параллельная программа

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

Одним из способов реализации параллельного выполнения является генерация кода для каждого блока по отдельности:

import {javascriptGenerator} from 'blockly/javascript';

var json = Blockly.serialization.workspaces.save(workspace);

// Store top blocks separately, and remove them from the JSON.
var blocks = json['blocks']['blocks'];
var topBlocks = blocks.slice();  // Create shallow copy.
blocks.length = 0;

// Load each block into the workspace individually and generate code.
var allCode = [];
var headless = new Blockly.Workspace();
for (var i = 0; block < topBlocks.length; i++) {
  var block = topBlocks[i];
  blocks.push(block);
  Blockly.serialization.workspaces.load(json, headless);
  allCode.push(javascriptGenerator.workspaceToCode(headless));
  blocks.length = 0;
}

Если целевой язык — JavaScript, массив allCode может затем использоваться для создания нескольких интерпретаторов JS для одновременного выполнения. Если целевой язык — что-то вроде Python, массив allCode может быть собран в одну программу, которая использует модуль потоковой обработки.

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

Программа, ориентированная на события

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

Некоторые разработчики любят добавлять «шапку» в верхнюю часть блоков событий, чтобы они выглядели отдельно от других блоков. Это не стандартный вид для Blockly, но его можно добавить, либо переопределив константу рендеринга ADD_START_HATS на true ( Пользовательские рендеры codelab - Переопределение констант ). или добавив тему и установив опцию шляпы в стиле блока. Для получения дополнительной информации о настройке шляп в блоках как части тем см. Стиль блока в документации по темам.

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

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

Макет рабочего пространства

Есть два разумных способа компоновки экрана слева направо. Один способ начинается с панели инструментов слева, рабочего пространства посередине и визуализации вывода справа. Этот макет используется в версии 1 Scratch, а также в Made with Code.

Другой способ начинается с визуализации вывода слева, панели инструментов посередине и рабочего пространства справа. Этот макет используется версией 2 Scratch, а также большинством приложений Blockly.

В любом случае рабочее пространство должно растягиваться, чтобы занять доступный размер экрана — пользователям нужно столько места для программирования, сколько они могут получить. Как видно на скриншотах выше, первый макет плохо работает на широких экранах, поскольку код пользователя и визуализация вывода разделены. В то время как второй макет обеспечивает дополнительное пространство для более крупных программ, при этом все три раздела остаются близко друг к другу.

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

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

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

Рекомендация: Разместите визуализацию программы рядом с панелью инструментов.