กิจกรรม

การเปลี่ยนแปลงทุกรายการในพื้นที่ทํางานจะทริกเกอร์เหตุการณ์ เหตุการณ์เหล่านี้จะอธิบายสถานะก่อนและหลังการเปลี่ยนแปลงแต่ละรายการอย่างละเอียด

ฟังเหตุการณ์จากพื้นที่ทํางาน

เวิร์กスペースมีเมธอด addChangeListener และ removeChangeListener ที่ใช้เพื่อฟังสตรีมเหตุการณ์ได้ ตัวอย่างหนึ่งคือการสร้างโค้ดแบบเรียลไทม์ อีกตัวอย่างหนึ่งคือการสาธิตขีดจํากัดสูงสุดของบล็อก ตัวอย่างทั้ง 2 รายการนี้ไม่สนใจว่าเหตุการณ์ใดเป็นเหตุการณ์เรียกให้แสดง เพียงแค่ดูสถานะปัจจุบันของเวิร์กスペース

Listener เหตุการณ์ที่ซับซ้อนมากขึ้นจะดูที่เหตุการณ์ที่ทริกเกอร์ ตัวอย่างต่อไปนี้จะตรวจจับเมื่อผู้ใช้สร้างความคิดเห็นแรก ส่งการแจ้งเตือน แล้วหยุดการฟังเพื่อไม่ให้มีการแจ้งเตือนเพิ่มเติม

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

โปรดทราบว่าฟิลด์ที่แก้ไขได้จะมี Listener เหตุการณ์ของตัวเองสําหรับการตรวจสอบอินพุตและทำให้เกิดผลข้างเคียง

ประเภทกิจกรรม

โปรดดูข้อมูลเกี่ยวกับแต่ละเหตุการณ์ในเอกสารอ้างอิง

สาธิต

ดูตัวอย่างสิ่งที่ยอดเยี่ยมที่คุณทํากับเหตุการณ์ได้ได้ที่การสาธิตมิเรอร์ เดโมนี้มีพื้นที่ทํางาน Blockly 2 รายการที่ซิงค์กันโดยใช้เหตุการณ์