Sự kiện

Mọi thay đổi trên không gian làm việc đều kích hoạt một sự kiện. Các sự kiện này mô tả đầy đủ trạng thái trước và sau của mỗi thay đổi.

Theo dõi các sự kiện từ không gian làm việc

Không gian làm việc có các phương thức addChangeListener và removeChangeListener có thể dùng để theo dõi luồng sự kiện. Một ví dụ là tạo mã theo thời gian thực. Một ví dụ khác là bản minh hoạ giới hạn khối tối đa. Như thường lệ, cả hai ví dụ này đều không quan tâm đến sự kiện kích hoạt. Các hàm này chỉ xem xét trạng thái hiện tại của không gian làm việc.

Một trình nghe sự kiện phức tạp hơn sẽ xem xét sự kiện kích hoạt. Ví dụ sau đây phát hiện thời điểm người dùng tạo bình luận đầu tiên, đưa ra cảnh báo, sau đó ngừng nghe để không có cảnh báo nào khác được kích hoạt.

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

Để nghe mọi sự kiện xảy ra bên trong một cửa sổ bật lên, bạn có thể thêm trình nghe vào không gian làm việc của cửa sổ bật lên.

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

Theo dõi sự kiện từ các khối

Các khối có thể có các hàm trình nghe thay đổi được gọi khi có bất kỳ thay đổi nào đối với không gian làm việc (bao gồm cả những thay đổi không liên quan đến khối). Các thuộc tính này thường được dùng để đặt văn bản cảnh báo của khối hoặc thông báo tương tự cho người dùng bên ngoài không gian làm việc.

Bạn có thể thêm hàm này bằng cách gọi Block.setOnChange bằng một hàm và có thể thực hiện trong quá trình khởi chạy hoặc thông qua tiện ích JSON nếu bạn dự định sử dụng hàm này trên tất cả các nền tảng.

JSONJavaScript
{
  // ...,
  "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.');
      }
    });
  }
}

Bạn cũng có thể đặt thuộc tính onchange trực tiếp trên khối:

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

Hệ thống sẽ gọi hàm này, truyền vào sự kiện thay đổi. Bên trong hàm, this tham chiếu đến thực thể khối.

Vì hàm này được gọi khi có bất kỳ thay đổi nào, nên nếu sử dụng, nhà phát triển phải đảm bảo trình nghe chạy nhanh. Bạn cũng nên cẩn thận với những thay đổi đối với không gian làm việc có thể tạo ra hiệu ứng lũ lụt hoặc lặp lại trình nghe.

Hãy xem các khối controls_flow_statements, logic_compare và procedures_ifreturn để biết ví dụ.

Xin lưu ý rằng các trường có thể chỉnh sửa có trình nghe sự kiện riêng để xác thực dữ liệu đầu vào và gây ra các hiệu ứng phụ.

Loại sự kiện

Hãy tham khảo tài liệu tham khảo để biết thông tin về từng sự kiện.

Bản minh hoạ

Để biết ví dụ về những điều thú vị mà bạn có thể làm với các sự kiện, bạn có thể xem bản minh hoạ phản chiếu. Bản minh hoạ này có hai không gian làm việc Blockly được đồng bộ hoá bằng các sự kiện.