Анатомия блока

В этом документе рассматриваются различные части блока.

Связи

Соединения определяют, где блоки могут соединяться и с какими типами блоков они могут соединяться.

Существует четыре типа соединений:

Тип соединения Изображение
Выходное соединение выходное соединение
Входное соединение входное соединение
Предыдущее соединение предыдущее соединение
Следующее соединение следующее соединение

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

Вы можете настраивать формы соединений, используя специальный рендерер.

Связи верхнего уровня

Блоки имеют три соединения, использование которых необязательно.

Блок может иметь одно выходное соединение, представленное в виде разъёма типа «папа» на передней кромке блока. Выходное соединение передаёт значение блока (выражение) другому блоку. Блок с выходным соединением называется блоком значений .

Блок math_number.

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

Блок variable_set

Более подробную информацию см. в разделе Соединения верхнего уровня .

Поля

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

Блок с несколькими полями.

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

Более подробную информацию смотрите в разделе Поля .

Входы

Входы — это контейнеры для полей и соединений. Блок строится путём размещения входов в одну или несколько строк, подобно кирпичикам.

Существует четыре различных типа входных данных, все из которых могут содержать поля (включая метки), а два из них содержат одно соединение. Вы также можете создавать пользовательские входные данные , поддерживающие пользовательскую визуализацию .

Тип ввода Тип соединения Изображение
Фиктивный вход Никто фиктивный вход
Ввод в конце строки Никто ввод в конце строки
Ввод значения Входное соединение ввод значения
Ввод заявления Следующее соединение ввод оператора

Мы рассмотрим эти входные данные на примере. Сведения об определении входных данных, связей и полей, составляющих блок, см. в разделах Структура блока в JSON и Структура блока в JavaScript .

Фиктивные входы

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

Числовой блок с фиктивным входом и числовым полем.

В качестве более сложного примера рассмотрим блок, который складывает два числа. Его можно построить на основе одного фиктивного входного значения с тремя полями (число, метка, число):

Блок сложения, построенный на основе фиктивного ввода с тремя полями.

или три фиктивных входа, каждый с одним полем:

Блок сложения, построенный из трех фиктивных входов, каждый из которых имеет одно поле.

Входы в конце строки

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

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

Блок сложения, разделенный на две строки с помощью ввода в конце строки.

Входные данные

Поля ограничены в том, какие данные они могут принимать. Например, числовые поля принимают только числа. Но что, если вам нужно сложить две переменные? Или добавить результат вызова процедуры к результату другого вычисления? Чтобы решить эту проблему, используйте входные соединения вместо полей. Это позволяет пользователям использовать блоки значений в качестве входных значений.

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

Блок сложения с двумя входами значений.

Входные данные заявления

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

Блок повтора с оператором input для вложения повторяющихся операторов.

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

Блок if-then-else с отдельными входами для операторов then и else.

Встроенные и внешние входы

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

Один и тот же блок, отрендеренный один раз со встроенными входами и один раз с внешними входами.

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

Иди играй!

Лучший способ узнать о входных данных, полях и соединениях — это создать блоки в инструментах разработчика Blockly и выбрать различные настройки для раскрывающегося списка inputs ( automatic , external , inline ).

Иконки

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

Блок со значком комментария и открытым редактором комментариев.

Более подробную информацию см. в разделе Значки .

Блоки и объекты JavaScript

Блоки, входы, соединения, поля и значки — все это объекты JavaScript.

Блочный компонент Базовый класс Подклассы
Блокировать Block BlockSvg
Вход Input DummyInput
EndRowInput
ValueInput
StatementInput
пользовательский ввод
Связь Connection RenderedConnection
Поле Field FieldTextInput
FieldNumber
FieldLabel
настраиваемое поле
и т. д.
Икона Icon CommentIcon
MutatorIcon
WarningIcon
пользовательский значок

Объекты в блоке образуют древовидную структуру. Понимание того, как графическое представление блока соответствует этому дереву, полезно при написании кода для программного управления блоками. Например, блок controls_for :

Блок цикла с полем переменной, входными значениями для «до», «от» и «по», а также входными данными оператора для повторяющихся операторов.

соответствует следующему дереву объектов JavaScript.

// <Object> means an instance of an Object.
{                                   // Block
  nextConnection: <Connection>,     // ConnectionType NEXT_STATEMENT
  outputConnection: null,
  previousConnection: <Connection>, // ConnectionType PREVIOUS_STATEMENT
  inputList: [                      // Array of Inputs in block
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [                   // Array of fields in Input
        <FieldLabel>,               // 'count with'
        <FieldVariable>,            // i
        <FieldLabel>,               // 'from'
      ],
    },
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [
        <FieldLabel>,               // 'to'
      ],
    },
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [
        <FieldLabel>,               // 'by'
      ],
    },
    {                               // StatementInput
      connection: <Connection>,     // ConnectionType NEXT_STATEMENT
      fieldRow: [
        <FieldLabel>,               // 'do'
      ],
    },
  ]
}