Блочная структура в JavaScript

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

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

Добавить входы

JavaScript API включает метод append для каждого типа ввода :

JavaScript 

init: function() {
  // ...
  this.appendEndRowInput()
      .appendField('for each')
      .appendField('item')
      .appendField(new Blockly.FieldVariable(), 'VAR');
  this.appendValueInput('LIST')
      .setCheck('Array')
      .setAlign(Blockly.inputs.Align.RIGHT)
      .appendField('in list');
  this.appendStatementInput('DO')
      .appendField('do');
  this.appendDummyInput()
      .appendField('end');
}

Блок с четырьмя строками. Первая строка имеет метки «for each» и «item», а также выпадающий список переменных с выбранным «x». Вторая строка имеет метку «in list» и ввод значения. Третья строка имеет метку «do» и ввод оператора. И последняя строка имеет метку «end».

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

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

JavaScript 

init: function() {
  // ...
  this.appendInput(new MyCustomInput('INPUT_NAME'))
      .appendField('an example label')
}

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

Добавить поля

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

JavaScript 

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello');
}

Блок с этикеткой

Простейшее поле — метка. Соглашение Blockly заключается в использовании всего текста в нижнем регистре, за исключением имен собственных (например, Google, SQL).

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

JavaScript 

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello')
      .appendField(new Blockly.FieldLabel('Neil', 'person'));
}

Блок с меткой «привет» обычным текстом и меткой «Нил» курсивом.

Вызов appendField('hello') на самом деле является сокращением для использования явного конструктора FieldLabel : appendField(new Blockly.FieldLabel('hello')) . Единственный случай, когда может понадобиться использовать конструктор, — это указание имени класса, чтобы метка могла быть стилизована с использованием правила CSS.

Проверка соединения

JavaScript 

init: function() {
  // ...
  this.appendValueInput('NUM')
      .setCheck('Number');
}

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

Выровнять поля

JavaScript 

init: function() {
  // ...
  this.appendValueInput('LIST')
      .appendField('in list')
      .setAlign(Blockly.inputs.Align.RIGHT);
}

Метод setAlign используется для выравнивания полей в пределах ввода. Есть три самоописательных значения, которые могут быть переданы в качестве аргумента этой функции: Blockly.inputs.Align.LEFT , Blockly.inputs.Align.RIGHT и Blockly.inputs.Align.CENTER .

Когда блок отображается справа налево (например, арабский и иврит), левое и правое меняются местами. Таким образом, Blockly.inputs.Align.RIGHT выровняет поля по левому краю.