Özel Engellemeler Ekle

Blockly bir dizi standart blok tanımlasa da çoğu uygulamanın alanla ilgili en az birkaç blok tanımlaması ve uygulaması gerekir.

Bloklar üç bileşenden oluşur:

  • Blok tanımı nesnesi: Bir bloğun görünümünü ve davranışını tanımlar. gibi ayrıntıları göz önünde bulundurun.
  • Araç kutusu referansı: Kullanıcıların araç kutusu XML'sindeki blok türüne bir referans. bunu çalışma alanına ekleyebilir.
  • Oluşturucu işlevi: Bu blok için kod dizesini oluşturur. Hedef dil JavaScript olmasa bile her zaman JavaScript ile yazılır.

Blok Tanımı

Web için Blockly, blokları komut dosyası dosyaları aracılığıyla yükler. blocks/ dizini standart bloklar için buna benzer birçok örnek içerir. Bloklarınızın mevcut kategorilere uymadığını varsayarak yeni bir JavaScript dosyası oluşturun. Bu yeni JavaScript dosyasının <script ...> etiketleri listesine eklenmesi gerekir düzenleyicinin HTML dosyasına koyabilirsiniz.

Tipik bir blok tanımı şöyle görünür:

JSON

Blockly.Blocks['string_length'] = {
  init: function() {
    this.jsonInit({
      "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');
  }
};

  • string_length: Bu, blokun tür adıdır. Tüm bloklar ortak olduğu için aynı ad alanına sahip değilse, kategorinizden ( bu örnekte string) ve ardından blokunuzun işlevi (bu örnekte length) tıklayın.

  • init: Bu işlev, bloğun görünümünü ve tarzını tanımlar.

Bu, aşağıdaki bloğu tanımlar:

&quot;string_length&quot; bloğu.

Blok tanımlarıyla ilgili ayrıntıları Blok Tanımlama bölümünde bulabilirsiniz.

JSON Dizisi

JSON blok tanımı dizisi kullanılarak birden fazla blok tek seferde tanımlanabilir.

JSON

Blockly.defineBlocksWithJsonArray([
  // Block for colour picker.
  {
    "type": "colour_picker",
    "message0": "%1",
    "args0": [
      {
        "type": "field_colour",
        "name": "COLOUR",
        "colour": "#ff0000"
      }
    ],
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_PICKER_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_PICKER_TOOLTIP}",
    "extensions": ["parent_tooltip_when_inline"]
  },
  // Block for random colour.
  {
    "type": "colour_random",
    "message0": "%{BKY_COLOUR_RANDOM_TITLE}",
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_RANDOM_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_RANDOM_TOOLTIP}"
  }
]);

Araç Kutusu Referansı Ekle

Tanımlandıktan sonra, bloka araç kutusuna referans vermek için tür adını kullanın:

<xml id="toolbox" style="display: none">
  <category name="Text">
    <block type="string_length"></block>
  </category>
  ...
</xml>

Daha ayrıntılı bilgi için Araç Kutusu kılavuzuna bakın.

Blok kodu oluşturma aracı ekleme

Son olarak, bloğu koda dönüştürmek için bloğu bir oluşturucuyla eşleyin işlevini kullanın. Oluşturma araçları istenen çıkış diline özgüdür, ancak standart oluşturucular genellikle şu biçimi alır:

javascriptGenerator.forBlock['text_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şlenecek bloğa referans alır. Google girişleri (yukarıdaki VALUE girişi) kod dizeleri halinde oluşturur ve ardından bunları daha büyük bir ifadede birleştirir.

→ Blok kodu oluşturucular hakkında daha fazla bilgi...