กิจกรรม

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

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

พื้นที่ทำงานมีเมธอด 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);

หากต้องการฟังเหตุการณ์ที่เกิดขึ้นภายใน Flyout คุณสามารถเพิ่ม Listener ลงในพื้นที่ทำงานของ Flyout ได้

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

ฟังเหตุการณ์จากบล็อก

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

คุณสามารถเพิ่มฟังก์ชันได้โดยการเรียกใช้ 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 จะอ้างอิงถึงอินสแตนซ์ของบล็อก

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

ดูตัวอย่างได้ที่บล็อก controls_flow_statements, logic_compare และ procedures_ifreturn

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

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

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

สาธิต

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