이벤트

워크스페이스의 모든 변경사항은 이벤트를 트리거합니다. 이러한 이벤트는 각 변경사항의 전후 상태를 완전히 설명합니다.

워크스페이스의 이벤트 수신 대기

워크스페이스에는 이벤트 스트림을 수신 대기하는 데 사용할 수 있는 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.');
    }
  });
});

자바스크립트

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 속성을 설정할 수도 있습니다.

자바스크립트

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 워크스페이스가 있습니다.