Wydarzenia

Każda zmiana w obszarze roboczym wywołuje zdarzenie. Te zdarzenia w pełni opisują stan przed i po każdej zmianie.

Nasłuchiwanie zdarzeń z obszaru roboczego

Obszary robocze mają metody addChangeListener i removeChangeListener, których można używać do nasłuchiwania strumienia zdarzeń. Jednym z przykładów jest generowanie kodu w czasie rzeczywistym. Innym przykładem jest prezentacja maksymalnego limitu bloków. Jak to często bywa, żaden z tych 2 przykładów nie zwraca uwagi na to, jakie zdarzenie wywołało zmianę. Po prostu sprawdzają bieżący stan obszaru roboczego.

Bardziej zaawansowany detektor zdarzeń będzie sprawdzać zdarzenie wywołujące. Poniższy przykład wykrywa, kiedy użytkownik tworzy pierwszy komentarz, wysyła alert, a następnie przestaje nasłuchiwać, aby nie wywoływać kolejnych alertów.

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);

Aby nasłuchiwać zdarzeń, które występują w wysuwanym menu, można dodać detektor do obszaru roboczego tego menu.

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

Nasłuchiwanie zdarzeń z bloków

Bloki mogą mieć funkcje detektora zmian, które są wywoływane przy każdej zmianie w obszarze roboczym (w tym tych niezwiązanych z blokiem). Są one często używane do ustawiania tekstu ostrzeżenia bloku lub podobnego powiadomienia użytkownika poza obszarem roboczym.

Funkcję dodaje się, wywołując Block.setOnChange z funkcją. Można to zrobić podczas inicjowania lub za pomocą JSON rozszerzenia, jeśli planujesz używać jej na wszystkich platformach.

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.');
      }
    });
  }
}

Możesz też ustawić właściwość onchange bezpośrednio w bloku:

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.');
      }
    };
  }
}

System wywołuje funkcję, przekazując zdarzenie zmiany. Wewnątrz funkcji this odnosi się do instancji bloku.

Ponieważ funkcja jest wywoływana przy każdej zmianie, deweloperzy powinni zadbać o to, aby detektor działał szybko. Należy też uważać na zmiany w obszarze roboczym, które mogą kaskadowo lub w pętli wpływać na detektor.

Przykłady znajdziesz w blokach controls_flow_statements, logic_compare i procedures_ifreturn.

Pamiętaj, że pola edytowalne mają własne detektory zdarzeń do sprawdzania poprawności danych wejściowych i wywoływania efektów ubocznych.

Typy zdarzeń

Informacje o poszczególnych zdarzeniach znajdziesz w dokumentacji.

Prezentacja

Przykład ciekawych rzeczy, które można zrobić za pomocą zdarzeń, znajdziesz w prezentacji lustra. Ta prezentacja zawiera 2 obszary robocze Blockly, które są synchronizowane za pomocą zdarzeń.