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. Những 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 trong không gian làm việc

Không gian làm việc có các phương thức addChangeListener và removeChangeListener mà bạn 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 là gì. Các tiện ích này chỉ đơn giản là 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 theo dõi để 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);

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

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

Theo dõi các 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 (kể cả những thay đổi không liên quan đến khối). Các hàm 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.

Hàm này được thêm bằng cách gọi Block.setOnChange bằng một hàm và có thể được 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.

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

Bạn cũng có thể đặt trực tiếp thuộc tính onchange 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 đề cập đến phiên bản 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 thận trọng với những thay đổi đối với không gian làm việc có thể xếp tầng hoặc quay 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 tác dụng phụ.

Loại sự kiện

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ạ

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