Özel bloklara genel bakış

Blockly, matematiksel işlevlerden döngü yapılarına kadar çok sayıda önceden tanımlanmış blok içerir. Ancak çoğu uygulamanın, alanları için özel bloklar tanımlaması ve uygulaması gerekir. Örneğin, bir çizim uygulamasının çizgi ve daire çizmek için bloklara, bir robotik uygulamasının ise kolu hareket ettirmek ve pençeyi kontrol etmek için bloklara ihtiyacı olabilir.

Yeni bir blok türünü tanımlamak ve kullanmak için üç şeye ihtiyacınız vardır:

  • Blok tanımı: Bir blok türünün görünümünü ve belirli davranışları tanımlar.
  • Blok kodu oluşturucu: Bu türdeki bloklar için kod dizesini oluşturur. Hedef dil JavaScript olmasa bile her zaman JavaScript ile yazılır.
  • Araç kutusu referansı: Kullanıcıların çalışma alanına ekleyebilmesi için araç kutusundaki blok türüne referans verir.

Blok tanımı

Blok tanımı, bir bloğun görünümünü ve tarzını (ör. metni, alanları, bağlantıları ve rengi) tanımlar. Ayrıca, bloka özgü bir etkinlik işleyici gibi bloka özgü davranışı da tanımlayabilir. Örneğin, şu blok:

"string_length" bloğu.

JSON veya JavaScript'te aşağıdaki gibi tanımlanabilir:

JSON

Blockly.common.defineBlocksWithJsonArray([{
  "type": "string_length",
  "message0": 'length of %1',
  "args0": [
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "String"
    }
  ],
  "output": "Number",
  "colour": 160,
  "tooltip": "Returns number of letters in the provided text.",
  "helpUrl": "http://www.w3schools.com/jsref/jsref_length_string.asp"
}]);

JavaScript

Blockly.Blocks['string_length'] = {
   init: function() {
     this.appendValueInput('VALUE')
         .setCheck('String')
         .appendField('length of');
     this.setOutput(true, 'Number');
     this.setColour(160);
     this.setTooltip('Returns number of letters in the provided text.');
     this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');
   }
};

Blok tanımları ve bunların işleyiş şekli hakkında daha fazla bilgi için Blok tanımı nedir? başlıklı makaleyi inceleyin.

Blok kod oluşturucular

Bir bloğu koda dönüştürmek için, oluşturmak istediğiniz her dil için ayrı bir oluşturucu işlevine ihtiyacınız vardır. Örneğin, JavaScript oluşturan bir jeneratörü aşağıda görebilirsiniz:

javascriptGenerator.forBlock['string_length'] = function(block, generator) {
   // String or array length.
   var argument0 = generator.valueToCode(block, 'VALUE', Order.FUNCTION_CALL) || '\'\'';
   return [argument0 + '.length', Order.MEMBER];
};

Oluşturucu işlevi, işlenen bloğu ve bir dil oluşturucuyu kabul eder. Girişlere (örneğin, örnekteki VALUE girişi) ve alanlara bağlı tüm bloklar için kod oluşturur ve elde edilen dizeleri daha büyük bir ifadede birleştirir.

Daha fazla bilgi için Blok kod oluşturucular başlıklı makaleyi inceleyin.

Araç kutusu referansı

Blok türünüzü tanımladıktan sonra, araç kutusunda türe referans vermek için tür adını kullanın:

JSON

var toolbox = {
     "kind": "categoryToolbox",
     "name": "Text"
     "contents": [
       {
         "kind": "block",
         "type": "string_length"
       },
     ]
   };

XML

<xml id="toolbox" style="display: none"> WHY IS THERE DISPLAY: NONE HERE?
   <category name="Text">
     <block type="string_length"></block>
   </category>
   ...
</xml>

Daha fazla bilgi için Açılır araç kutusu tanımlama veya Kategori araç kutusu tanımlama başlıklı makaleyi inceleyin.