Ereignisse

Jede Änderung im Arbeitsbereich löst ein Ereignis aus. Diese Ereignisse beschreiben den Zustand vor und nach jeder Änderung vollständig.

Auf Ereignisse aus dem Arbeitsbereich warten

Arbeitsbereiche haben die Methoden addChangeListener und removeChangeListener, mit denen der Ereignisstream überwacht werden kann. Ein Beispiel ist die Echtzeitgenerierung von Code. Ein weiteres Beispiel ist die Demo zum maximalen Blocklimit. Wie so oft ist es in beiden Beispielen egal, welches Ereignis die Auslösung verursacht hat. Sie beziehen sich einfach auf den aktuellen Status des Arbeitsbereichs.

Ein komplexerer Event-Listener würde sich das auslösende Ereignis ansehen. Im folgenden Beispiel wird erkannt, wenn der Nutzer seinen ersten Kommentar erstellt. Es wird eine Benachrichtigung ausgegeben und dann wird das Zuhören beendet, damit keine weiteren Benachrichtigungen ausgelöst werden.

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

Wenn Sie auf Ereignisse reagieren möchten, die in einem Flyout auftreten, können Sie dem Arbeitsbereich des Flyouts einen Listener hinzufügen.

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

Auf Ereignisse von Blöcken warten

Blöcke können Änderungs-Listener-Funktionen haben, die bei jeder Änderung am Arbeitsbereich aufgerufen werden (auch bei Änderungen, die nicht mit dem Block zusammenhängen). Sie werden häufig verwendet, um den Warntext des Blocks oder eine ähnliche Nutzerbenachrichtigung außerhalb des Arbeitsbereichs festzulegen.

Die Funktion wird durch Aufrufen von Block.setOnChange mit einer Funktion hinzugefügt. Dies kann während der Initialisierung oder über eine JSON-Erweiterung erfolgen, wenn Sie sie auf allen Plattformen verwenden möchten.

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

Sie können das Attribut onchange auch direkt für den Block festlegen:

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

Das System ruft die Funktion auf und übergibt das Änderungsereignis. Innerhalb der Funktion bezieht sich this auf die Blockinstanz.

Da die Funktion bei jeder Änderung aufgerufen wird, sollten Entwickler darauf achten, dass der Listener schnell ausgeführt wird. Außerdem sollte man auf Änderungen am Arbeitsbereich achten, die sich auf den Zuhörer auswirken oder zu ihm zurückkehren könnten.

Beispiele finden Sie in den Blöcken controls_flow_statements, logic_compare und procedures_ifreturn.

Beachten Sie, dass bearbeitbare Felder eigene Event-Listener für die Eingabevalidierung und für Nebeneffekte haben.

Ereignistypen

Informationen zu einzelnen Ereignissen finden Sie in der Referenzdokumentation.

Demo

Ein Beispiel für die coolen Dinge, die Sie mit Ereignissen tun können, finden Sie in der Spiegel-Demo. Diese Demo enthält zwei Blockly-Arbeitsbereiche, die mithilfe von Ereignissen synchronisiert werden.