Wydarzenia

Każda zmiana w obszarze roboczym powoduje wystąpienie zdarzenia. Te zdarzenia w pełni opisują stan przed i po każdej zmianie.

Nasłuchiwanie zdarzeń z obszaru roboczego

Pracownie mają metody addChangeListener i removeChangeListener, których można używać do nasłuchiwania strumienia zdarzeń. Jednym z nich jest generowanie kodu w czasie rzeczywistym. Innym przykładem jest maksymalny limit blokady. Jak to często bywa, w żadnym z tych przykładów nie ma znaczenia, co było zdarzeniem wywołującym. Wystarczy, że spojrzą na bieżący stan tej przestrzeni.

Bardziej zaawansowany detektor zdarzeń sprawdzałby zdarzenie uruchamiające. W tym przykładzie wykryto, że użytkownik utworzył pierwszy komentarz, wysłał alert, a potem przestał słuchać, więc nie wysyłano dalszych 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ń zachodzących w wysuwanym panelu, możesz dodać do jego obszaru roboczego obiekt listener.

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

Nasłuchiwanie zdarzeń z bloków

Bloki mogą mieć funkcje słuchaczy zmian, które są wywoływane przy każdej zmianie w przestrzeni roboczej (w tym tych niezwiązanych z blokiem). Są one często używane do określenia tekstu ostrzeżenia blokady lub podobnego powiadomienia dla użytkownika poza obszarem roboczym.

Funkcja jest dodawana przez wywołanie Block.setOnChange z funkcją i może być wykonywana podczas inicjalizacji lub za pomocą rozszerzenia JSON, 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 zmienna this odnosi się do wystąpienia bloku.

Funkcja jest wywoływana przy każdej zmianie, więc deweloperzy powinni zadbać o to, aby odbiorca działał szybko. Należy też uważać na zmiany w obszarze roboczym, które mogą być przekazywane dalej lub wracać do słuchacza.

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

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

Typy zdarzeń

Informacje o poszczególnych zdarzeniach znajdziesz w dokumentacji.

Prezentacja

Przykładem ciekawych rzeczy, które możesz robić za pomocą zdarzeń, jest prezentacja lustrzanego odbicia. W tym pokazie są 2 obszary robocze Blockly, które są synchronizowane za pomocą zdarzeń.