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 streaming peristiwa. Salah satu contohnya adalah pembuatan kode secara real-time. Contoh lainnya adalah demo batas blok maksimum. Seperti yang sering terjadi, kedua contoh ini tidak peduli apa peristiwa pemicunya. 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 flyout, pemroses dapat ditambahkan ke ruang kerja flyout.

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). Ini sering digunakan untuk menetapkan teks peringatan blok, atau notifikasi pengguna serupa di luar ruang kerja.

Fungsi ditambahkan dengan memanggil Block.setOnChange dengan fungsi dan dapat dilakukan 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 mengacu pada 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 beruntun 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, lihat demo mirror. Demo ini memiliki dua ruang kerja Blockly yang tetap sinkron menggunakan peristiwa.