Ringkasan elemen penyusun kustom

Blockly dilengkapi dengan sejumlah besar blok yang telah ditentukan, mulai dari fungsi matematika hingga struktur perulangan. 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: Menghasilkan 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. Definisi blok 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 yang dimaksud dengan definisi blok?.

Generator kode blok

Untuk mengubah blok menjadi kode, Anda memerlukan fungsi generator terpisah untuk setiap bahasa yang ingin Anda buat. 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 blok yang terlampir 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 Generator 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 flyout toolbox atau Menentukan kategori toolbox.