Événements

Chaque modification apportée à l'espace de travail déclenche un événement. Ces événements décrivent entièrement l'état avant et après chaque modification.

Écouter les événements de l'espace de travail

Les espaces de travail disposent des méthodes addChangeListener et removeChangeListener qui peuvent être utilisées pour écouter le flux d'événements. La génération de code en temps réel en est un exemple. Un autre exemple est la démo de la limite maximale de blocs. Comme c'est souvent le cas, aucun de ces deux exemples ne se soucie de l'événement déclencheur. Ils se contentent d'examiner l'état actuel de l'espace de travail.

Un écouteur d'événements plus sophistiqué examinerait l'événement déclencheur. L'exemple suivant détecte lorsque l'utilisateur crée son premier commentaire, émet une alerte, puis arrête l'écoute afin qu'aucune autre alerte ne soit déclenchée.

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

Pour écouter les événements qui se produisent dans un menu déroulant, un écouteur peut être ajouté à l'espace de travail du menu déroulant.

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

Écouter les événements des blocs

Les blocs peuvent avoir des fonctions d'écouteur de modification qui sont appelées lors de toute modification de l'espace de travail (y compris celles qui ne sont pas liées au bloc). Elles sont souvent utilisées pour définir le texte d'avertissement du bloc ou une notification utilisateur similaire en dehors de l'espace de travail.

La fonction est ajoutée en appelant Block.setOnChange avec une fonction. Vous pouvez le faire lors de l'initialisation ou via une JSON extension si vous prévoyez de l'utiliser sur toutes les plates-formes.

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

Vous pouvez également définir la propriété onchange directement sur le bloc :

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

Le système appelle la fonction en transmettant l'événement de modification. Dans la fonction, this fait référence à l'instance de bloc.

Étant donné que la fonction est appelée lors de toute modification, si elle est utilisée, les développeurs doivent s'assurer que l'écouteur s'exécute rapidement. Il convient également de se méfier des modifications apportées à l'espace de travail qui pourraient se répercuter ou revenir à l'écouteur.

Pour obtenir des exemples, consultez les blocs controls_flow_statements, logic_compare et procedures_ifreturn.

Notez que les champs modifiables ont leurs propres écouteurs d'événements pour la validation des entrées et les effets secondaires.

Types d'événement

Pour en savoir plus sur les événements individuels, consultez la documentation de référence.

Démo

Pour obtenir un exemple des choses intéressantes que vous pouvez faire avec des événements, consultez la démo de miroir. Cette démo comporte deux espaces de travail Blockly qui sont synchronisés à l'aide d'événements.