Événements

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

Écouter des événements depuis l'espace de travail

Les espaces de travail disposent de 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. Vous pouvez également consulter la démo sur 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. Il s'agit simplement de vérifier l'état actuel de l'espace de travail.

Un écouteur d'événements plus sophistiqué examine l'événement déclencheur. L'exemple suivant détecte quand l'utilisateur crée son premier commentaire, émet une alerte, puis arrête l'écoute pour 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 tous les événements qui se produisent dans un panneau, vous pouvez ajouter un écouteur à l'espace de travail du panneau.

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

Écouter des événements à partir de blocs

Les blocs peuvent comporter des fonctions d'écouteur de modification qui sont appelées à chaque modification de l'espace de travail (y compris celles qui n'ont aucun rapport avec le bloc). Ils sont souvent utilisés pour définir le texte d'avertissement du blocage 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 extension JSON 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 à chaque modification, si elle est utilisée, les développeurs doivent s'assurer que l'écouteur s'exécute rapidement. Il faut également se méfier des modifications apportées à l'espace de travail qui pourraient se propager en cascade ou revenir à l'écouteur.

Pour en savoir plus, 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 provoquent des effets secondaires.

Types d'événement

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

Démonstration

Pour découvrir les fonctionnalités intéressantes que vous pouvez utiliser avec les événements, consultez la démo du miroir. Cette démonstration comporte deux espaces de travail Blockly qui sont synchronisés à l'aide d'événements.