Мероприятия

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

Прослушайте события, происходящие на рабочем месте.

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

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

function onFirstComment(event) {
  if (event.type == Blockly.Events.BLOCK_CHANGE &&
      event.element == 'comment' &&
      !event.oldValue && event.newValue) {
    alert('Congratulations on creating your first comment!')
    workspace.removeChangeListener(onFirstComment);
  }
}
workspace.addChangeListener(onFirstComment);

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

var flyoutWorkspace = yourWorkspace.getFlyout().getWorkspace();
flyoutWorkspace.addChangeListener(onFirstComment);

Прослушивайте события из блоков

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

Функция добавляется путем вызова Block.setOnChange с указанием параметра и может быть выполнена во время инициализации или через расширение JSON , если вы планируете использовать ее на всех платформах.

JSON

{
  // ...,
  "extensions":["warning_on_change"],
}

Blockly.Extensions.register('warning_on_change', function() {
  // Example validation upon block change:
  this.setOnChange(function(changeEvent) {
    if (this.getInput('NUM').connection.targetBlock()) {
      this.setWarningText(null);
    } else {
      this.setWarningText('Must have an input block.');
    }
  });
});

JavaScript

Blockly.Blocks['block_type'] = {
  init: function() {
    // Example validation upon block change:
    this.setOnChange(function(changeEvent) {
      if (this.getInput('NUM').connection.targetBlock()) {
        this.setWarningText(null);
      } else {
        this.setWarningText('Must have an input block.');
      }
    });
  }
}

Вы также можете установить свойство onchange непосредственно для блока:

JavaScript

Blockly.Blocks['block_type'] = {
  init: function() {
    // Example validation upon block change:
    this.onchange = function(changeEvent) {
      if (this.getInput('NUM').connection.targetBlock()) {
        this.setWarningText(null);
      } else {
        this.setWarningText('Must have an input block.');
      }
    };
  }
}

Система вызывает функцию, передавая в нее событие изменения. Внутри функции this относится к экземпляру блока.

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

Примеры можно найти в блоках controls_flow_statements , logic_compare и procedures_ifreturn .

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

Типы событий

Для получения информации об отдельных мероприятиях обратитесь к справочной документации .

Демо

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