Etkinlikler

Çalışma alanında yapılan her değişiklik bir etkinliği tetikler. Bu etkinlikler, her değişikliğin öncesi ve sonrası durumunu tam olarak açıklar.

Çalışma alanındaki etkinlikleri dinleme

Çalışma alanlarında, etkinlik akışını dinlemek için kullanılabilecek addChangeListener ve removeChangeListener yöntemleri bulunur. Bunun bir örneği, kodun anında oluşturulmasıdır. Bir diğer örnek ise maksimum blok sınırı demosudur. Genellikle olduğu gibi, bu iki örnek de tetikleyici etkinliğin ne olduğuyla ilgilenmez. Bu kişiler yalnızca çalışma alanının mevcut durumuna bakar.

Daha karmaşık bir etkinlik işleyicisi, tetikleyici etkinliğe bakar. Aşağıdaki örnekte, kullanıcının ilk yorumunu oluşturduğu zaman algılanır, 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);

Bir açılır pencerede gerçekleşen etkinlikleri dinlemek için açılır pencerenin çalışma alanına bir dinleyici eklenebilir.

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

Bloklardaki etkinlikleri dinleme

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

İşlev, Block.setOnChange bir işlevle çağrılarak eklenir ve tüm platformlarda kullanmayı planlıyorsanız başlatma sırasında veya 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 özelliğini 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, işlevi çağırarak değişiklik etkinliğini iletir. İşlevin içinde this, blok örneğini ifade eder.

İşlev herhangi bir değişiklikte çağrıldığından, geliştiriciler kullanılıyorsa dinleyicinin hızlı çalıştığından emin olmalıdır. Ayrıca, çalışma alanında dinleyiciye yansıyabilecek veya dinleyiciye geri dönebilecek değişikliklere karşı da dikkatli olunmalı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 olma için kendi etkinlik işleyicileri olduğunu unutmayın.

Etkinlik türleri

Tek tek etkinlikler hakkında bilgi edinmek için referans belgelerini inceleyin.

Demo

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