Struktur blok di JavaScript

Dalam dokumen ini, kita akan membahas cara menggunakan JavaScript untuk menentukan input dan kolom (termasuk label) dalam blok Anda. Jika Anda belum memahami istilah-istilah ini, lihat Anatomi blok sebelum melanjutkan.

Anda juga dapat menentukan input, kolom, dan koneksi dalam JSON.

Menambahkan input

JavaScript API menyertakan metode append untuk setiap jenis input:

JavaScript

init: function() {
  // ...
  this.appendEndRowInput()
      .appendField('for each')
      .appendField('item')
      .appendField(new Blockly.FieldVariable(), 'VAR');
  this.appendValueInput('LIST')
      .setCheck('Array')
      .setAlign(Blockly.inputs.Align.RIGHT)
      .appendField('in list');
  this.appendStatementInput('DO')
      .appendField('do');
  this.appendDummyInput()
      .appendField('end');
}

Blok dengan empat baris. Baris pertama memiliki label "untuk setiap" dan "item" serta dropdown variabel dengan "x" yang dipilih. Baris kedua memiliki label "dalam daftar" dan input nilai. Baris ketiga memiliki label "do" dan input pernyataan. Baris terakhir memiliki label "end".

Setiap metode appendInput dapat mengambil string ID, yang digunakan oleh generator kode untuk mengambil kode untuk blok yang terhubung ke input. Generator kode jarang mereferensikan input dummy dan akhir baris, sehingga umumnya tidak ada alasan untuk menetapkan ID padanya.

JavaScript API juga menyertakan metode appendInput generik untuk menambahkan input kustom. Perhatikan bahwa dalam kasus ini, ID harus diteruskan langsung ke konstruktor input kustom Anda.

JavaScript

init: function() {
  // ...
  this.appendInput(new MyCustomInput('INPUT_NAME'))
      .appendField('an example label')
}

Semua metode appendInput (generik dan non-generik) menampilkan objek input sehingga dapat dikonfigurasi lebih lanjut menggunakan rantai metode. Ada tiga metode bawaan yang digunakan untuk mengonfigurasi input.

Tambahkan kolom

Setelah input dibuat dan ditambahkan ke blok dengan appendInput, Anda dapat secara opsional menambahkan sejumlah kolom ke input. Kolom ini sering digunakan sebagai label untuk mendeskripsikan fungsi setiap input.

JavaScript

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello');
}

Blok dengan label

Kolom paling sederhana adalah label. Konvensi Blockly adalah menggunakan semua teks huruf kecil, kecuali nama yang tepat (mis. Google, SQL).

Baris input dapat berisi sejumlah kolom. Beberapa panggilan appendField dapat dirangkai untuk menambahkan beberapa kolom secara efisien ke baris input yang sama.

JavaScript

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello')
      .appendField(new Blockly.FieldLabel('Neil', 'person'));
}

Blok dengan label "hello" dalam teks biasa dan label "Neil" dalam huruf miring.

Panggilan appendField('hello') sebenarnya adalah pintasan untuk menggunakan konstruktor FieldLabel eksplisit: appendField(new Blockly.FieldLabel('hello')). Satu-satunya saat seseorang ingin menggunakan konstruktor adalah saat menentukan nama class sehingga label dapat diberi gaya menggunakan aturan CSS.

Pemeriksaan koneksi

JavaScript

init: function() {
  // ...
  this.appendValueInput('NUM')
      .setCheck('Number');
}

Metode setCheck digunakan untuk koneksi pemeriksaan jenis. Jika diberi argumen null, default, maka input ini dapat dihubungkan ke blok mana pun. Lihat Pemeriksaan koneksi untuk mengetahui detailnya.

Menyejajarkan kolom

JavaScript

init: function() {
  // ...
  this.appendValueInput('LIST')
      .appendField('in list')
      .setAlign(Blockly.inputs.Align.RIGHT);
}

Metode setAlign digunakan untuk menyelaraskan kolom dalam input. Ada tiga nilai deskriptif mandiri yang dapat diteruskan sebagai argumen ke fungsi ini: Blockly.inputs.Align.LEFT, Blockly.inputs.Align.RIGHT, dan Blockly.inputs.Align.CENTER.

Saat blok dirender dalam mode kanan ke kiri (misalnya, bahasa Arab dan Ibrani), kiri dan kanan dibalik. Dengan demikian, Blockly.inputs.Align.RIGHT akan menyelaraskan kolom ke kiri.