Özel Engellemeler Ekle

Blockly birkaç 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: Metin, renk, alanlar ve bağlantılar dahil olmak üzere bir bloğun görünümünü ve davranışını tanımlar.
  • Araç kutusu referansı: Kullanıcıların araç kutusu XML'inde blok türüne referans. Böylece kullanıcılar bloku ç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'te yazılır.

Engelleme Tanımı

Web yüklemeleri için engellemeleri, komut dosyası dosyaları aracılığıyla sağlar. blocks/ dizininde standart bloklar için bu tür birkaç örnek yer alır. Bloklarınızın mevcut kategorilere uymadığını varsayarak yeni bir JavaScript dosyası oluşturun. Bu yeni JavaScript dosyasının, düzenleyicinin HTML dosyasındaki <script ...> etiketleri listesine eklenmesi gerekir.

Tipik bir blok tanımı aşağıdaki gibidir:

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: Bloğun türü budur. Tüm bloklar aynı ad alanını paylaştığından, kategorinizi (bu örnekte string) ve ardından blokunuzun işlevini (bu örnekte length) içeren bir ad kullanmanız önerilir.

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

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

Bir &quot;string_length&quot; bloğu.

Blok tanımlarının ayrıntıları Engellemeleri tanımlama bölümünde bulunabilir.

JSON Dizisi

JSON blok tanımları dizisi kullanılarak tek seferde birden fazla blok 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 bloku 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 fazla ayrıntı için Araç Kutusu kılavuzuna bakın.

Blok kodu oluşturma aracı ekle

Son olarak, bloku koda dönüştürmek için bloku bir oluşturma işleviyle eşleyin. Oluşturucular, istenen çıkış diline özeldir ancak standart oluşturucular genellikle aşağıdaki biçimi kullanı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şleme için bloka bir referans alır. 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şturma araçları hakkında daha fazla bilgi...