Ringkasan elemen penyusun kustom

Blockly dilengkapi dengan sejumlah besar blok standar, mulai dari fungsi matematika hingga struktur loop. Namun, sebagian besar aplikasi perlu menentukan dan menerapkan blok kustom untuk domainnya. Misalnya, aplikasi gambar mungkin memerlukan blok untuk menggambar garis dan lingkaran, dan aplikasi robotika mungkin memerlukan blok untuk menggerakkan lengan dan memanipulasi cakar.

Untuk menentukan dan menggunakan jenis blok baru, Anda memerlukan tiga hal:

  • Definisi blok: Menentukan tampilan dan nuansa jenis blok serta perilaku tertentu.
  • Generator kode blok: Membuat string kode untuk blok jenis ini. Kode ini selalu ditulis dalam JavaScript, meskipun bahasa targetnya bukan JavaScript.
  • Referensi toolbox: Referensi ke jenis blok di toolbox, sehingga pengguna dapat menambahkannya ke ruang kerja.

Definisi blok

Definisi blok menentukan tampilan dan nuansa blok, seperti teks, kolom, koneksi, dan warnanya. Fungsi ini juga dapat menentukan perilaku khusus blok, seperti pengendali peristiwa khusus blok. Misalnya, blok ini:

Blok `string_length`.

dapat ditentukan dalam JSON atau JavaScript sebagai berikut:

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');
   }
};

Untuk mengetahui informasi selengkapnya tentang definisi blok dan cara kerjanya, lihat Apa itu definisi blok?.

Generator kode blok

Untuk mengubah blok menjadi kode, Anda memerlukan fungsi generator terpisah untuk setiap bahasa yang ingin dihasilkan. Misalnya, berikut adalah generator yang menghasilkan JavaScript:

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

Fungsi generator menerima blok yang sedang diproses dan generator bahasa. Fungsi ini menghasilkan kode untuk setiap blok yang dilampirkan ke input (seperti input VALUE dalam contoh) dan kolom apa pun, lalu menggabungkan string yang dihasilkan menjadi ekspresi yang lebih besar.

Untuk mengetahui informasi selengkapnya, lihat Pembuat kode blok.

Referensi toolbox

Setelah menentukan jenis blok, gunakan nama jenis untuk mereferensikannya di toolbox:

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>

Untuk mengetahui informasi selengkapnya, lihat Menentukan toolbox flyout atau Menentukan toolbox kategori.