Ereignisse

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

Auf Ereignisse im Arbeitsbereich warten

Workspaces haben die Methoden addChangeListener und removeChangeListener, mit denen der Ereignisstream abgehört werden kann. Ein Beispiel hierfür ist die Echtzeitgenerierung von Code. Ein weiteres Beispiel ist die Demo zum Blockierungslimit. Wie so oft spielt es in diesen beiden Beispielen keine Rolle, was das auslösende Ereignis war. Sie sehen sich einfach den aktuellen Status des Arbeitsbereichs an.

Ein ausgefeilterer Event-Listener würde sich das auslösende Ereignis ansehen. Im folgenden Beispiel wird erkannt, wenn der Nutzer seinen ersten Kommentar erstellt, eine Benachrichtigung ausgegeben und dann 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);

Damit alle Ereignisse in einem Flyout überwacht werden können, kann dem Arbeitsbereich des Flyouts ein Listener hinzugefügt werden.

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

Auf Ereignisse von Blöcken warten

Blöcke können Änderungslistenerfunktionen haben, die bei jeder Änderung am Arbeitsbereich aufgerufen werden, auch bei solchen, die nichts mit dem Block zu tun haben. Sie werden häufig verwendet, um den Warntext des Blocks oder eine ähnliche Nutzerbenachrichtigung außerhalb des Arbeitsbereichs festzulegen.

Die Funktion wird hinzugefügt, indem Block.setOnChange mit einer Funktion aufgerufen wird. Das kann während der Initialisierung oder über eine JSON-Erweiterung erfolgen, wenn Sie die Funktion 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 sollten Sie vorsichtig sein, wenn Sie Änderungen am Arbeitsbereich vornehmen, die zu einer Kaskade oder einer Schleife zurück zum Hörer führen könnten.

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

Bearbeitbare Felder haben eigene Ereignis-Listener für die Eingabevalidierung und können Nebenwirkungen verursachen.

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, ist die Mirror-Demo. Diese Demo enthält zwei Blockly-Arbeitsbereiche, die über Ereignisse synchronisiert werden.