Tambahkan Blok Khusus

Meskipun Blockly menentukan sejumlah blok standar, sebagian besar aplikasi perlu menentukan dan menerapkan setidaknya beberapa blok yang relevan dengan domain.

Blok terdiri dari tiga komponen:

  • Objek definisi blok: Mendefinisikan tampilan dan perilaku blok, termasuk teks, warna, kolom, dan koneksi.
  • Referensi toolbar: Referensi ke jenis blok dalam XML toolbox, sehingga pengguna dapat menambahkannya ke ruang kerja.
  • Fungsi generator: Menghasilkan string kode untuk blok ini. Kode ini selalu ditulis dalam JavaScript, meskipun target bahasanya bukan JavaScript.

Definisi Block

Blockly untuk pemuatan web Pemblokiran melalui file skrip. Direktori blocks/ menyertakan beberapa contoh untuk blok standar. Dengan asumsi blok Anda tidak muat dengan kategori yang ada, buat file JavaScript baru. File JavaScript baru ini harus disertakan dalam daftar tag <script ...> di file HTML editor.

Definisi blok umumnya terlihat seperti ini:

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: Ini adalah nama jenis blok. Karena semua blok memiliki namespace yang sama, sebaiknya gunakan nama yang terdiri dari kategori Anda (dalam hal ini string) yang diikuti dengan fungsi blok Anda (dalam hal ini length).

  • init: Fungsi ini menentukan tampilan dan nuansa blok.

Parameter ini menentukan blok berikut:

Blok `string_length`.

Detail definisi blok dapat ditemukan di bagian Menentukan Blok.

Array JSON

Beberapa blok dapat ditentukan sekaligus dengan menggunakan array definisi blok JSON.

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

Menambahkan Referensi Toolbox

Setelah ditentukan, gunakan nama jenis untuk mereferensikan blok ke toolbox:

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

Lihat panduan Toolbox untuk detail selengkapnya.

Menambahkan generator kode blok

Terakhir, untuk mengubah blok menjadi kode, sambungkan blok dengan fungsi generator. Generator bersifat khusus untuk bahasa output yang diinginkan, tetapi generator standar umumnya menggunakan format berikut:

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

Fungsi generator mengambil referensi ke blok untuk diproses. Fungsi ini merender input (input VALUE, di atas) menjadi string kode, lalu menggabungkan input tersebut menjadi ekspresi yang lebih besar.

→ Info selengkapnya tentang generator kode blok...