イベント

ワークスペースの変更ごとにイベントがトリガーされます。これらのイベントは、各変更の前後の状態を完全に記述します。

ワークスペースのイベントをリッスンする

ワークスペースには、イベント ストリームのリッスンに使用できる addChangeListener メソッドと removeChangeListener メソッドがあります。たとえば、コードのリアルタイム生成などです。別の例として、最大ブロック数の制限のデモがあります。多くの場合、これらの 2 つの例のどちらも、トリガー イベントが何であるかは気にしません。ワークスペースの現在の状態を確認するだけです。

より高度なイベント リスナーは、トリガーとなるイベントを確認します。次の例では、ユーザーが最初のコメントを作成したときに検出してアラートを発行し、その後はリッスンを停止して、アラートがトリガーされないようにします。

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

フライアウト内で発生するイベントをリッスンするには、フライアウトのワークスペースにリスナーを追加します。

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

ブロックのイベントをリッスンする

ブロックには、ワークスペースの変更（ブロックに関係のない変更を含む）時に呼び出される変更リスナー関数を設定できます。これらは、ブロックの警告テキストや、ワークスペース外の同様のユーザー通知を設定するためによく使用されます。

この関数は、関数で Block.setOnChange を呼び出すことで追加されます。初期化時に追加することも、すべてのプラットフォームで使用する場合は JSON 拡張機能を使用して追加することもできます。

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

ブロックに onchange プロパティを直接設定することもできます。

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

システムは、変更イベントを渡して関数を呼び出します。関数内で、this はブロック インスタンスを参照します。

この関数は変更時に呼び出されるため、使用する場合は、リスナーが迅速に実行されるようにする必要があります。また、ワークスペースの変更がリスナーにカスケードまたはループバックする可能性があることにも注意する必要があります。

例については、controls_flow_statements、logic_compare、procedures_ifreturn のブロックをご覧ください。

編集可能なフィールドには、入力検証と副作用の発生のための独自のイベント リスナーがあります。

イベントタイプ

個々のイベントについては、リファレンス ドキュメントをご覧ください。

デモ

イベントでできることの例については、ミラーのデモをご覧ください。このデモには 2 つの Blockly ワークスペースがあり、イベントを使用して同期されています。