Özel bloklara genel bakış

Blockly, matematiksel işlevlerden döngü yapılarına kadar çok sayıda önceden tanımlanmış blokla birlikte gelir. Ancak çoğu uygulamanın alanları için özel bloklar tanımlaması ve uygulaması gerekir. Örneğin, bir çizim uygulamasında çizgi ve daire çizmek için bloklar, bir robotik uygulamasında ise kolu hareket ettirmek ve pençeyi kullanmak için bloklar gerekebilir.

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

  • Blok tanımı: 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'te yazılır.
  • Araç kutusu referansı: Araç kutusundaki blok türüne referans verir. Böylece kullanıcılar bu türü çalışma alanına ekleyebilir.

Tanımı engelleme

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, bloğa özel bir etkinlik işleyicisi gibi bloğa özel davranışları da tanımlayabilir. Örneğin, şu blok:

Bir `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 nasıl çalıştıkları hakkında daha fazla bilgi için Blok tanımı nedir? başlıklı makaleyi inceleyin.

Blok kodu oluşturucular

Bir bloğu koda dönüştürmek için oluşturmak istediğiniz her dil için ayrı oluşturucu işlevleri gerekir. Örneğin, aşağıda JavaScript oluşturan bir oluşturma aracı verilmiştir:

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];
};

Üretici işlevi, işlenen bloğu ve bir dil üreticisini kabul eder. Girişlere (örneğin, örnekteki VALUE girişi) ve alanlara eklenen tüm bloklar için kod oluşturur, ardından ortaya çıkan dizeleri daha büyük bir ifadede birleştirir.

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

Araç kutusu referansı

Blok türünüzü tanımladıktan sonra, araç kutusunda buna 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.