Google Blocky - Custom Block

Blocky Kütüphanesine bir giriş yapmıştık (yazıya buradan ulaşabilirsiniz.), Şimdi birazda Custom blok tanımlamaya değinmek istiyorum. Bu gün javascript yordamı ile devam edeceğiz ve Kütüphane ile gelen demo uygulamalardan birini kullanarak, "Uyarı Mesajı" isimli bir blok oluşturacağız. Bloğun tanımladığımız iş kuralına göre min/max değerleri içinalert mesajı vermesini gerçekleştireceğiz.

Öncelikle Şunu belirtmekte fayda var, Kendinize has bir blok yaratırken 2 adımda düşünmekte fayda var;

1. Bloğunuzun görsel tasarımı
2. Bloğunuzun davranışı

Bu 2 tanım için aslen benzer bir yaklaşım izliyor olacağız. (Blocks.js dosyasına yazdığımız method ları ekleyerek ilerlememiz mümkün, yada farklı bir dosya yaratmakta seçilebilir.)

Blockly.Blocks['givealert'] = { init: function() {

    this.appendValueInput("message")

        .setCheck("Number")

        .setAlign(Blockly.ALIGN_CENTRE)

        .appendField("Uyarı Mesajı :");

    this.setOutput(true, null);

    this.setColour(195);

 this.setTooltip("javascript message tool");

 this.setHelpUrl("http://yazilimcigozuyleincelemeler.blogspot.com.tr/");

  }};

Burada yaptıklarımızı kısaca özetlersek, öncelikle "givealert" isimli bir blok tanımlıyoruz, "message" isimli input alacağını belirttik, "appendField" property si ile ismini veriyoruz, renk değeri, tooltip mesajı ve help seçeneği ile referans URL bilgisini dolduruyoruz, Böylece Bloğumuzun görsel tasarımını ve bağlantı şeklini tamamlamış olduk. Akabinde, davranışını tanımlamak için 2. bir method oluşturacağız,

var x = '';

var xActive = true;

Blockly.JavaScript['givealert'] = function(block) {

var value_message = Blockly.JavaScript.valueToCode(block, 'message', Blockly.JavaScript.ORDER_ATOMIC);

  if (x != value_message)  {

x = value_message;

  }

  if ((eval(x) == 0 || eval(x) == 21)) {

if(xActive) {

alert(eval(x) + ' olası değer değil!');

xActive = false;

}

} 

  else { xActive = true; }

  return [x, Blockly.JavaScript.ORDER_MEMBER];

};

Dikkat edilir ise, method ların tanımlamasına ilişkin ufak farklılıklar mevcut, ve tanımlama methodundan ziyade davranışsal işlemler kısmı, javascript kod geliştiricileri için çok daha basit olacaktır.

Yukardaki şekildede incelendiği üzere, tanımlı limit değerleri olan 0 ve 21 sıra sayısına ulaşıldığında alert mesajı üreteceği görülebilir. Tabiki Sayfamızdada workspace toolbox ve kullanılacak blokları eklememiz gerektiğini unutmamalıyız... :)