이벤트

작업공간의 모든 변경사항은 이벤트를 트리거합니다. 이러한 이벤트는 각 변경사항의 전후 상태를 완전히 설명합니다.

작업공간의 이벤트 수신 대기

작업공간에는 이벤트 스트림을 수신 대기하는 데 사용할 수 있는 addChangeListener 및 removeChangeListener 메서드가 있습니다. 한 가지 예는 실시간 코드 생성입니다. 또 다른 예는 최대 블록 한도 데모입니다. 일반적인 경우와 마찬가지로 이 두 가지 예 모두 트리거 이벤트가 무엇인지 신경 쓰지 않습니다. 작업공간의 현재 상태만 확인합니다.

더 정교한 이벤트 리스너는 트리거 이벤트를 확인합니다. 다음 예는 사용자가 첫 번째 댓글을 작성할 때 감지하고, 알림을 표시한 다음, 추가 알림이 트리거되지 않도록 수신 대기를 중지합니다.

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 블록을 참고하세요.

수정 가능한 필드에는 입력 유효성 검사 및 부작용 발생을 위한 자체 이벤트 리스너가 있습니다.

이벤트 유형

개별 이벤트에 관한 정보는 참고 문서 를 참고하세요.

데모

이벤트로 할 수 있는 멋진 작업의 예를 보려면 미러 데모를 확인하세요. 이 데모에는 이벤트를 사용하여 동기화되는 두 개의 Blockly 작업공간이 있습니다.