Etkinlikler

Çalışma alanındaki her değişiklik bir etkinliği tetikler. Bu etkinlikler, her değişikliğin önceki ve sonraki durumunu tam olarak açıklar.

Çalışma alanındaki etkinlikleri dinleme

Workspace'lerde, etkinlik akışını dinlemek için kullanılabilecek addChangeListener ve removeChangeListener yöntemleri bulunur. Örneğin, gerçek zamanlı kod oluşturma. Maksimum blok sınırı demosu da buna örnek gösterilebilir. Genelde olduğu gibi, bu iki örnekten hiçbirinde tetikleyici etkinliğin ne olduğu önemli değildir. Yalnızca çalışma alanının mevcut durumuna bakarlar.

Daha gelişmiş bir etkinlik işleyici, tetikleyici etkinliğe bakar. Aşağıdaki örnekte, kullanıcının ilk yorumunu oluşturduğu tespit edilir, bir uyarı verilir ve daha fazla uyarı tetiklenmemesi için dinleme durdurulur.

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

Açılır menünün içinde gerçekleşen tüm etkinlikleri dinlemek için dinleyici, açılır menünün çalışma alanına eklenebilir.

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

Bloklardaki etkinlikleri dinleme

Bloklarda, çalışma alanındaki herhangi bir değişiklikte (blokla ilgili olmayanlar dahil) çağrılan değişiklik dinleyici işlevleri olabilir. Bunlar genellikle çalışma alanının dışındaki engellemenin uyarı metnini veya benzer bir kullanıcı bildirimini ayarlamak için kullanılır.

İşlev, Block.setOnChange işlevi bir işlevle çağrılarak eklenir. Bu işlem, tüm platformlarda kullanmayı planlıyorsanız başlatma sırasında veya bir JSON uzantısı aracılığıyla yapılabilir.

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 mülkünü doğrudan blokta da ayarlayabilirsiniz:

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, değişiklik etkinliğini ileterek işlevi çağırır. İşlevin içinde this, blok örneğini ifade eder.

İşlev her değişiklikte çağrıldığı için geliştiriciler, kullanılıyorsa dinleyicinin hızlı çalıştığından emin olmalıdır. Ayrıca, dinleyiciye geri dönebilecek veya dinleyiciye tekrar tekrar gönderilebilecek çalışma alanındaki değişikliklerden de kaçınılmalıdır.

Örnekler için controls_flow_statements, logic_compare ve procedures_ifreturn bloklarına bakın.

Düzenlenebilir alanların, giriş doğrulaması ve yan etkilere neden olmak için kendi etkinlik dinleyicilerinin olduğunu unutmayın.

Etkinlik türleri

Tek tek etkinliklerle ilgili bilgi edinmek için referans dokümanlarını inceleyin.

Demo

Etkinliklerle yapabileceğiniz harika şeylere örnek olarak yansıtma demosuna göz atabilirsiniz. Bu demoda, etkinlikler kullanılarak senkronize edilen iki Blockly çalışma alanı vardır.