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