Tambahkan Blok Khusus

Blockly mendefinisikan sejumlah blok standar, sebagian besar aplikasi perlu menetapkan dan menerapkan setidaknya beberapa blok domain yang relevan.

Blok terdiri dari tiga komponen:

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

Definisi Blokir

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

Definisi blok standar 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 berbagi namespace yang sama, adalah baik untuk menggunakan nama yang terdiri dari kategori Anda (di dalam hal ini string) diikuti dengan fungsi blok Anda (dalam kasus ini length).

  • init: Fungsi ini menentukan tampilan dan nuansa blok.

Ini menentukan blok berikut:

Blok `string_length`.

Detail definisi blok dapat ditemukan di Menentukan Blok.

Array JSON

Beberapa blok dapat ditentukan sekaligus 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 mengetahui detail selengkapnya.

Menambahkan generator kode blok

Terakhir, untuk mengubah blok menjadi kode, pasangkan blok dengan generator fungsi tersebut. {i>Generator<i} khusus untuk bahasa {i> output<i} 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. Ini merender input (input VALUE, di atas) menjadi string kode, lalu menyambungkannya ke dalam ekspresi yang lebih besar.

→ Info selengkapnya tentang generator kode blok...