Acara

Setiap perubahan pada ruang kerja akan memicu peristiwa. Peristiwa ini sepenuhnya menjelaskan status sebelum dan sesudah setiap perubahan.

Memproses peristiwa dari ruang kerja

Ruang kerja memiliki metode addChangeListener dan removeChangeListener yang dapat digunakan untuk memproses aliran peristiwa. Salah satu contohnya adalah pembuatan kode real-time. Contoh lainnya adalah demo batas blok maksimum. Seperti yang sering terjadi, kedua contoh ini tidak peduli dengan peristiwa pemicu. Mereka hanya melihat status ruang kerja saat ini.

Pemroses peristiwa yang lebih canggih akan melihat peristiwa pemicu. Contoh berikut mendeteksi saat pengguna membuat komentar pertamanya, mengeluarkan pemberitahuan, lalu berhenti memproses sehingga tidak ada pemberitahuan lebih lanjut yang dipicu.

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

Untuk memproses peristiwa apa pun yang terjadi di dalam menu pop-up, pemroses dapat ditambahkan ke ruang kerja menu pop-up.

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

Memproses peristiwa dari blok

Blok dapat memiliki fungsi pemroses perubahan yang dipanggil pada setiap perubahan pada ruang kerja (termasuk yang tidak terkait dengan blok). Fungsi ini sering digunakan untuk menetapkan teks peringatan blok, atau notifikasi pengguna serupa di luar ruang kerja.

Fungsi ini ditambahkan dengan memanggil Block.setOnChange dengan fungsi dan dapat di lakukan selama inisialisasi atau melalui ekstensi JSON jika Anda berencana menggunakannya di semua platform.

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

Anda juga dapat menetapkan properti onchange langsung di blok:

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

Sistem memanggil fungsi, dengan meneruskan peristiwa perubahan. Di dalam fungsi, this merujuk ke instance blok.

Karena fungsi dipanggil pada setiap perubahan, jika digunakan, developer harus memastikan pemroses berjalan dengan cepat. Anda juga harus berhati-hati terhadap perubahan pada ruang kerja yang mungkin berjenjang atau berulang ke pemroses.

Lihat blok controls_flow_statements, logic_compare, dan procedures_ifreturn untuk mengetahui contohnya.

Perhatikan bahwa kolom yang dapat diedit memiliki pemroses peristiwanya sendiri untuk validasi input dan menyebabkan efek samping.

Jenis peristiwa

Lihat dokumentasi referensi untuk mengetahui informasi tentang setiap peristiwa.

Demo

Untuk contoh hal keren yang dapat Anda lakukan dengan peristiwa, Anda dapat melihat demo cermin. Demo ini memiliki dua ruang kerja Blockly yang tetap disinkronkan menggunakan peristiwa.