Definisi blok menjelaskan tampilan dan perilaku blok, termasuk teks, warna, bentuk, dan blok lain yang dapat dihubungkan.
Format JSON versus JavaScript API
Blockly memiliki dua cara untuk menentukan blok: objek JSON dan fungsi JavaScript. Format JSON dirancang untuk menyederhanakan proses pelokalan saat mengembangkan untuk bahasa dengan urutan kata yang berbeda-beda. Format JSON adalah metode yang lebih disukai untuk menentukan blok.
Namun, format JSON tidak dapat secara langsung menentukan fitur lanjutan seperti mutator atau validator. Ekstensi ini harus ditulis dalam JavaScript, biasanya sebagai ekstensi.
Aplikasi yang menggunakan penerapan JavaScript asli dari Blockly juga dapat menulis definisi blok langsung ke panggilan fungsi Blockly API level lebih rendah, yang ditunjukkan dalam berbagai contoh JavaScript di bawah.
JSON
Blockly.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');
}
};
Fungsi init
membuat bentuk blok. Dalam konteks fungsi ini, kata kunci this
adalah blok sebenarnya yang dibuat.
Kedua contoh memuat blok 'string_length' yang sama.
Di web, format JSON dimuat menggunakan fungsi initJson
.
Hal ini juga memungkinkan penggabungan dua format di halaman web Blockly. Sebaiknya tentukan blok Anda dengan JSON jika memungkinkan, dan gunakan JavaScript hanya untuk bagian definisi blok yang tidak didukung JSON.
Berikut adalah contoh blok yang sebagian besar ditentukan menggunakan JSON, tetapi diperluas menggunakan JavaScript API untuk menampilkan tooltip dinamis.
JavaScript
var mathChangeJson = {
"message0": "change %1 by %2",
"args0": [
{"type": "field_variable", "name": "VAR", "variable": "item", "variableTypes": [""]},
{"type": "input_value", "name": "DELTA", "check": "Number"}
],
"previousStatement": null,
"nextStatement": null,
"colour": 230
};
Blockly.Blocks['math_change'] = {
init: function() {
this.jsonInit(mathChangeJson);
// Assign 'this' to a variable for use in the tooltip closure below.
var thisBlock = this;
this.setTooltip(function() {
return 'Add a number to variable "%1".'.replace('%1',
thisBlock.getFieldValue('VAR'));
});
}
};
Warna blok
Warna primer blok ditentukan oleh properti colour
JSON, fungsi block.setColour(..)
,
atau dengan menggunakan tema dan menentukan gaya
blok.
JSON
{
// ...,
"colour": 160,
}
JavaScript
init: function() {
// ...
this.setColour(160);
}
Lihat panduan warna blok untuk detail selengkapnya.
Koneksi Pernyataan
Pengguna dapat membuat urutan blok menggunakan konektor nextStatement
dan
previousStatement
. Dalam tata letak standar Blockly, koneksi ini
berada di bagian atas dan bawah, dengan blok yang ditumpuk secara vertikal.
Blok dengan konektor sebelumnya tidak dapat memiliki konektor output, dan sebaliknya. Istilah blok pernyataan mengacu pada blok tanpa output nilai. Blok pernyataan biasanya memiliki koneksi sebelumnya dan koneksi berikutnya.
Koneksi nextStatement
dan previousStatement
dapat
diketik,
tetapi fitur ini tidak digunakan oleh blok standar.
Koneksi Berikutnya
Membuat titik di bagian bawah blok sehingga pernyataan lain dapat ditumpuk di bawahnya. Blok dengan koneksi berikutnya, tetapi tidak ada koneksi sebelumnya, biasanya mewakili peristiwa, dan dapat dikonfigurasi untuk dirender dengan topi.
JSON
Tidak diketik:
{
...,
"nextStatement": null,
}
Diketik (rare):
{
"nextStatement": "Action",
...
}
JavaScript
Tidak diketik:
this.setNextStatement(true); // false implies no next connector, the default
Diketik (jarang):
this.setNextStatement(true, 'Action');
Koneksi Sebelumnya
Membuat notch di bagian atas blok sehingga dapat dihubungkan sebagai tumpukan pernyataan.
Blok dengan koneksi sebelumnya tidak dapat memiliki koneksi output.
JSON
Tidak diketik:
{
...,
"previousStatement": null,
}
Diketik (rare):
{
"previousStatement": "Action",
...
}
JavaScript
Tidak diketik:
this.setPreviousStatement(true); // false implies no previous connector, the default
Diketik (jarang):
this.setPreviousStatement(true, 'Action');
Blokir Output
Sebuah blok dapat memiliki satu output, yang direpresentasikan sebagai konektor jigsaw jantan di tepi depan. Output terhubung ke input nilai. Blok yang memiliki output biasanya disebut blok nilai.
JSON
Tidak diketik:
{
// ...,
"output": null,
}
Diketik:
{
// ...,
"output": "Number",
}
JavaScript
Tidak diketik:
init: function() {
// ...
this.setOutput(true);
}
Diketik:
init: function() {
// ...
this.setOutput(true, 'Number');
}
Blok dengan konektor output juga tidak dapat memiliki notch pernyataan sebelumnya.
Blokir Input
Blok memiliki satu atau beberapa input, dengan setiap input memiliki urutan kolom dan dapat mengakhiri koneksi. Ada beberapa jenis {i>input<i} bawaan.
- Input nilai: Terhubung ke koneksi output
blok nilai. Blok
math_arithmetic
(penambahan, pengurangan) adalah contoh blok dengan dua input nilai. - Input pernyataan: Menghubungkan ke koneksi sebelumnya dari blok pernyataan. Bagian bertingkat dari loop if adalah contoh input pernyataan.
- Input tiruan: Tidak memiliki koneksi blok. Bertindak seperti baris baru jika blok dikonfigurasi untuk menggunakan input nilai eksternal.
- Input baris akhir: Tidak memiliki koneksi blok, dan selalu berfungsi seperti baris baru.
Anda juga dapat membuat input kustom, untuk mendukung rendering kustom.
Format JSON dan JavaScript API menggunakan model yang sedikit berbeda untuk mendeskripsikan inputnya.
Input dan Kolom di JSON
Blok yang ditentukan JSON disusun sebagai urutan string pesan interpolasi ( message0
, message1
, ...), dengan setiap token interpolasi (%1
, %2
, ...) berupa kolom atau ujung input (sehingga konektor input dirender, dalam pesan) dalam array JSON argsN
yang cocok. Format ini dimaksudkan untuk memudahkan internasionalisasi.
JSON
{
"message0": "set %1 to %2",
"args0": [
{
"type": "field_variable",
"name": "VAR",
"variable": "item",
"variableTypes": [""]
},
{
"type": "input_value",
"name": "VALUE"
}
]
}
Token interpolasi harus cocok sepenuhnya dengan array args0
: tidak ada duplikat,
tanpa penghilangan. Token dapat ada dalam urutan apa pun, sehingga tata letak blok dapat
diubah oleh bahasa yang berbeda.
Teks di kedua sisi token interpolasi dipangkas spasi kosong.
Teks yang menggunakan karakter %
(misalnya saat merujuk ke persentase) harus menggunakan
%%
agar tidak ditafsirkan sebagai token interpolasi.
Urutan argumen dan jenis argumen menentukan bentuk
blok. Mengubah salah satu string ini dapat sepenuhnya mengubah tata letak blok.
Hal ini terutama penting dalam bahasa yang memiliki urutan kata yang berbeda
dari bahasa Inggris. Pertimbangkan bahasa hipotesis saat "set %1 to %2"
(seperti yang digunakan dalam contoh di atas) harus dibalik menjadi "put %2 in %1"
. Mengubah satu string ini (dan membiarkan sisa JSON tidak tersentuh) akan menghasilkan blok berikut:
Blockly otomatis mengubah urutan kolom, membuat input tiruan, dan beralih dari input eksternal ke internal.
Blockly juga otomatis mengganti karakter baris baru (\n
) dalam string
pesan dengan input baris akhir.
JSON
{
"message0": "set %1\nto %2",
"args0": [
{
"type": "field_variable",
"name": "VAR",
"variable": "item",
"variableTypes": [""]
},
{
"type": "input_value",
"name": "VALUE"
}
]
}
Args
Setiap string pesan dipasangkan dengan array args
dari angka yang sama. Misalnya, message0
sesuai dengan args0
. Token interpolasi (%1
, %2
, ...) merujuk pada item array args
. Setiap objek memiliki string type
. Parameter lainnya bervariasi bergantung pada jenisnya:
Anda juga dapat menentukan kolom kustom dan input kustom Anda sendiri, lalu meneruskannya sebagai argumen.
Setiap objek juga dapat memiliki kolom alt
. Jika Blockly tidak
mengenali type
objek, objek alt
akan digunakan sebagai gantinya. Misalnya, jika kolom baru bernama field_time
ditambahkan ke Blockly, pemblokiran yang menggunakan
kolom ini dapat menggunakan alt
untuk menentukan penggantian field_input
untuk versi lama
Blockly:
JSON
{
"message0": "sound alarm at %1",
"args0": [
{
"type": "field_time",
"name": "TEMPO",
"hour": 9,
"minutes": 0,
"alt":
{
"type": "field_input",
"name": "TEMPOTEXT",
"text": "9:00"
}
}
]
}
Objek alt
mungkin memiliki objek alt
sendiri, sehingga memungkinkan pembuatan rantai.
Pada akhirnya, jika Blockly tidak dapat membuat objek dalam array args0
(setelah
mencoba objek alt
), objek tersebut akan dilewati.
Input contoh akan otomatis ditambahkan ke akhir blok jika
string message
diakhiri dengan teks atau kolom yang tidak berisi input.
Jadi, jika input terakhir pada blok adalah input contoh, input tersebut dapat dihilangkan dari
array args
dan tidak memerlukan interpolasi ke message
. Penambahan
otomatis input dummy tailing memungkinkan penerjemah mengubah
message
tanpa perlu mengubah JSON lainnya. Lihat contoh
"set %1 to %2"
(tanpa input contoh) dan "put %2 in %1"
(input tiruan ditambahkan)
di halaman ini sebelumnya.
implicitAlign0
Dalam kasus yang jarang terjadi, input contoh akhir yang dibuat secara otomatis harus diselaraskan
dengan "RIGHT"
atau "CENTRE"
. Nilai default jika tidak ditentukan adalah "LEFT"
.
Pada contoh di bawah ini, message0
adalah "send email to %1 subject %2 secure %3"
dan Blockly otomatis menambahkan input dummy untuk baris ketiga. Menetapkan
implicitAlign0
ke "RIGHT"
akan memaksa baris ini untuk diratakan dengan benar. Penyelarasan
ini berlaku untuk semua input yang tidak secara eksplisit ditentukan dalam definisi blok
JSON, termasuk input baris akhir yang menggantikan karakter baris baru
('\n'
) dalam pesan. Ada juga properti lastDummyAlign0
yang tidak digunakan lagi
dan memiliki perilaku yang sama dengan implicitAlign0
.
Saat mendesain blok untuk RTL (bahasa Arab dan Ibrani), kiri dan kanan dibalik.
Dengan demikian, "RIGHT"
akan meratakan kolom ke kiri.
message1
, args1
, implicitAlign1
Beberapa blok secara alami dibagi menjadi dua atau lebih bagian yang terpisah. Pertimbangkan blok berulang ini yang memiliki dua baris:
Jika blok ini dijelaskan dengan satu pesan, properti message0
akan menjadi "repeat %1 times %2 do %3"
. String ini canggung bagi penerjemah,
sulit untuk menjelaskan arti substitusi %2
. Input contoh %2
bahkan mungkin tidak diinginkan dalam beberapa bahasa. Dan mungkin ada beberapa blok yang
ingin membagikan teks dari baris kedua. Pendekatan yang lebih baik
adalah agar JSON menggunakan lebih dari satu properti pesan dan argumen:
JSON
{
"type": "controls_repeat_ext",
"message0": "repeat %1 times",
"args0": [
{"type": "input_value", "name": "TIMES", "check": "Number"}
],
"message1": "do %1",
"args1": [
{"type": "input_statement", "name": "DO"}
],
"previousStatement": null,
"nextStatement": null,
"colour": 120
}
Sejumlah properti message
, args
, dan implicitAlign
dapat ditentukan
dalam format JSON, dimulai dengan 0 dan meningkat secara berurutan. Perlu diperhatikan bahwa
Block Factory tidak dapat membagi pesan menjadi beberapa bagian, tetapi
melakukannya secara manual sangat mudah.
Input dan Kolom di JavaScript
JavaScript API menyertakan metode append
untuk setiap jenis input:
JavaScript
this.appendEndRowInput()
.appendField('for each')
.appendField('item')
.appendField(new Blockly.FieldVariable());
this.appendValueInput('LIST')
.setCheck('Array')
.setAlign(Blockly.inputs.Align.RIGHT)
.appendField('in list');
this.appendStatementInput('DO')
.appendField('do');
this.appendDummyInput()
.appendField('end');
Setiap metode penambahan dapat mengambil string ID, yang digunakan oleh generator kode. Input contoh dan baris akhir jarang memerlukan referensi dan ID biasanya tidak disetel.
JavaScript API juga menyertakan metode appendInput
generik untuk menambahkan
input kustom. Perhatikan bahwa dalam hal ini, ID harus diteruskan langsung ke konstruktor input kustom Anda.
JavaScript
this.appendInput(new MyCustomInput('INPUT_NAME'))
.appendField('an example label')
Semua metode appendInput
(baik generik maupun non-generik) menampilkan
objek input sehingga dapat dikonfigurasi lebih lanjut menggunakan perantaian metode. Ada
tiga metode bawaan yang digunakan untuk mengonfigurasi input.
setCheck
JavaScript
input.setCheck('Number');
Fungsi opsional ini digunakan untuk pemeriksaan jenis input yang terhubung. Jika diberi argumen null, defaultnya, input ini dapat dihubungkan ke blok mana pun. Lihat Pemeriksaan Jenis untuk mengetahui detailnya.
setAlign
JavaScript
input.setAlign(Blockly.inputs.Align.RIGHT);
Fungsi opsional ini digunakan untuk meratakan kolom (lihat di bawah). 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 mendesain blok untuk RTL (bahasa Arab dan Ibrani), kiri dan kanan dibalik.
Dengan demikian, Blockly.inputs.Align.RIGHT
akan meratakan kolom ke kiri.
appendField
Setelah input dibuat dan ditambahkan ke blok dengan appendInput
, Anda
dapat menambahkan sejumlah kolom ke input secara opsional. Kolom ini
sering digunakan sebagai label untuk menjelaskan kegunaan dari setiap input.
JavaScript
input.appendField('hello');
Elemen kolom paling sederhana adalah teks. Konvensi Blockly adalah menggunakan semua teks huruf kecil, kecuali nama aslinya (misalnya, Google, SQL).
Baris input dapat berisi berapa pun elemen kolom. Beberapa panggilan appendField
dapat dirantai untuk menambahkan beberapa kolom secara efisien ke baris
input yang sama.
JavaScript
input.appendField('hello')
.appendField(new Blockly.FieldLabel('Neil', 'person'));
Panggilan appendField('hello')
sebenarnya merupakan pintasan untuk menggunakan konstruktor FieldLabel eksplisit: appendField(new Blockly.FieldLabel('hello'))
.
Satu-satunya situasi ketika seseorang ingin menggunakan konstruktor adalah ketika menentukan
nama class, sehingga teks dapat diberi gaya menggunakan aturan CSS.
Inline vs. Eksternal
Input blok dapat dirender sebagai eksternal atau internal.
Definisi blok dapat menentukan boolean opsional yang mengontrol apakah input inline atau tidak. Jika false
, maka semua input nilai akan bersifat eksternal (seperti
blok kiri). Jika true
maka input nilai apa pun akan inline (seperti
blok yang tepat di atas).
JSON
{
// ...,
"inputsInline": true
}
JavaScript
init: function() {
// ...
this.setInputsInline(true);
}
Jika tidak ditentukan, Blockly akan menggunakan beberapa heuristik untuk menebak mode mana
yang terbaik. Dengan asumsi Blockly membuat pilihan yang tepat, sebaiknya biarkan kolom ini tidak ditentukan
karena terjemahan bahasa yang berbeda dapat otomatis memiliki
mode yang berbeda. Lihat contoh JSON untuk "set %1 to %2"
(input eksternal) dan
"put %2 in %1"
(input inline) di awal di halaman ini.
Gunakan input inline jika blok cenderung memiliki input kecil seperti angka.
Pengguna dapat mengaktifkan opsi ini melalui menu konteks, jika konfigurasi collapse
diaktifkan (setelan defaultnya adalah benar jika toolbox memiliki kategori).
Kolom
Kolom menentukan sebagian besar elemen UI dalam blok. Elemen ini mencakup
label string, gambar, dan input untuk
data literal
seperti string dan angka. Contoh paling sederhana adalah blok math_number
,
yang menggunakan field_input
untuk memungkinkan pengguna mengetik angka.
Kolom ditambahkan ke blok menggunakan appendField.
Blockly menyediakan sejumlah kolom bawaan, termasuk input teks, pemilih warna, dan gambar. Anda juga dapat membuat kolom sendiri.
→ Informasi lebih lanjut tentang kolom bawaan.
→ Informasi selengkapnya tentang pembuatan kolom kustom.
Ikon
Ikon menentukan elemen UI pada blok yang menampilkan informasi "meta" tentang blok tersebut.
Ikon ditambahkan ke blok menggunakan addIcon.
Blockly menyediakan sejumlah ikon bawaan, termasuk ikon komentar dan ikon peringatan. Anda juga dapat membuat ikon sendiri.
→ Informasi selengkapnya tentang pembuatan ikon kustom.
Tooltip
Tooltip menawarkan bantuan instan saat pengguna mengarahkan mouse ke blok. Jika panjang, teks akan terbungkus secara otomatis.
JSON
{
// ...,
"tooltip": "Tooltip text."
}
JavaScript
init: function() {
this.setTooltip("Tooltip text.");
}
Di JavaScript API, tooltip juga dapat ditentukan sebagai fungsi, bukan
string statis. Hal ini memungkinkan bantuan dinamis. Lihat math_arithmetic
untuk
contoh tooltip yang berubah bergantung pada opsi dropdown
yang dipilih.
JavaScript
Blockly.Blocks['math_arithmetic'] = {
init: function() {
// ...
// Assign 'this' to a variable for use in the tooltip closure below.
var thisBlock = this;
this.setTooltip(function() {
var mode = thisBlock.getFieldValue('OP');
var TOOLTIPS = {
'ADD': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_ADD,
'MINUS': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MINUS,
'MULTIPLY': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MULTIPLY,
'DIVIDE': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_DIVIDE,
'POWER': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_POWER
};
return TOOLTIPS[mode];
});
}
};
Dengan JavaScript API, blok dapat menentukan fungsi, bukan string
statis, yang menampilkan string tooltip. Tindakan ini memungkinkan tooltip dinamis.
Lihat math_arithmetic
untuk mengetahui contohnya.
Penyesuaian
Anda juga dapat menyesuaikan tampilan tooltip dengan menyediakan fungsi rendering kustom. Buat fungsi yang menerima dua parameter:
- pertama, elemen
<div>
tempat Anda akan merender konten - kedua, elemen aktual yang sedang diarahkan dan yang akan Anda tampilkan tooltip untuk
Dalam isi fungsi, Anda dapat merender konten apa pun yang diinginkan ke dalam
div. Untuk mendapatkan string tooltip yang ditentukan pada blok yang diarahkan mouse, Anda dapat
memanggil Blockly.Tooltip.getTooltipOfObject(element);
dengan element
yang merupakan
parameter kedua di atas.
Terakhir, daftarkan fungsi ini agar Blockly dapat memanggilnya pada waktu yang tepat:
Blockly.Tooltip.setCustomTooltip(yourFnHere);
Misalnya, lihat demo Tooltip Kustom.
URL Bantuan
Pemblokiran dapat memiliki halaman bantuan yang terkait dengannya. Fitur ini tersedia bagi
pengguna Blockly untuk Web dengan mengklik kanan blok tersebut, lalu memilih "Help"
dari menu konteks. Jika nilai ini adalah null
, menu akan
berwarna abu-abu.
JSON
{
// ...,
"helpUrl": "https://en.wikipedia.org/wiki/For_loop"
}
JavaScript
init: function() {
// ...
this.setHelpUrl('https://en.wikipedia.org/wiki/For_loop');
}
Dengan JavaScript API, blok dapat menentukan fungsi, bukan string statis, yang menampilkan string URL, sehingga memungkinkan bantuan dinamis.
Mengubah Pemroses dan Validator
Blok dapat memiliki fungsi pemroses perubahan yang dipanggil pada setiap perubahan pada ruang kerja (termasuk yang tidak terkait dengan blok). Fungsi ini utamanya digunakan untuk menetapkan teks peringatan pemblokiran, atau notifikasi pengguna serupa di luar ruang kerja.
Fungsi ini ditambahkan dengan memanggil setOnChange menggunakan sebuah fungsi dan dapat dilakukan selama init atau melalui ekstensi JSON jika Anda berencana untuk menggunakannya di semua platform.
JSON
{
// ...,
"extensions":["warning_on_change"],
}
Blockly.Extensions.register('warning_on_change', function() {
// Example validation upon block change:
this.setOnChange(function(changeEvent) {
if (this.getInput('NUM').connection.targetBlock()) {
this.setWarningText(null);
} else {
this.setWarningText('Must have an input block.');
}
});
});
JavaScript
Blockly.Blocks['block_type'] = {
init: function() {
// Example validation upon block change:
this.setOnChange(function(changeEvent) {
if (this.getInput('NUM').connection.targetBlock()) {
this.setWarningText(null);
} else {
this.setWarningText('Must have an input block.');
}
});
}
}
Sistem akan memanggil fungsi, dengan meneruskan peristiwa perubahan.
Di dalam fungsi, this
mengacu pada instance blok.
Karena fungsi ini dipanggil pada setiap perubahan, jika digunakan, developer harus memastikan pemroses berjalan cepat. Anda juga harus mewaspadai perubahan pada ruang kerja yang mungkin menurun atau kembali ke pemroses.
Lihat blok controls_flow_statements
, logic_compare
, dan procedures_ifreturn
untuk mengetahui contohnya.
Perhatikan bahwa kolom yang dapat diedit memiliki pemroses peristiwanya sendiri untuk validasi input dan menyebabkan efek samping.
Mutator
Mutator memungkinkan blok lanjutan untuk mengubah bentuk, terutama karena
pengguna membuka dialog untuk menambahkan, menghapus, atau mengatur ulang komponen. Mutator dapat ditambahkan melalui JSON dengan kunci mutator
.
JSON
{
// ...,
"mutator":"if_else_mutator"
}
Konfigurasi per blok
Instance blok memiliki sejumlah properti yang mengonfigurasi perilakunya terhadap pengguna. Peristiwa ini dapat digunakan untuk membatasi ruang kerja guna mencerminkan properti tertentu dari domain (misalnya, hanya ada satu peristiwa 'mulai'), atau memfokuskan upaya pengguna (misalnya, tutorial).
Status yang Dapat Dihapus
block.setDeletable(false);
Jika kebijakan disetel ke salah (false), pengguna tidak akan dapat menghapus pemblokiran. Memblokir default untuk dihapus pada ruang kerja yang dapat diedit.
Setiap blok, (bahkan yang tidak dapat dihapus) dapat dihapus secara terprogram:
block.dispose();
Status yang Dapat Diedit
block.setEditable(false);
Jika disetel ke salah (false), pengguna tidak akan dapat mengubah kolom blok (mis., drop-down dan input teks). Memblokir default agar dapat diedit pada ruang kerja yang dapat diedit.
Status yang Dapat Dipindahkan
block.setMovable(false);
Jika disetel ke salah (false), pengguna tidak akan dapat memindahkan blok secara langsung. Blok yang tidak dapat dipindahkan yang merupakan turunan dari blok lain tidak dapat diputus dari blok tersebut, meskipun akan berpindah bersama induknya jika induknya dipindahkan. Memblokir default ke dapat dipindahkan pada ruang kerja yang dapat diedit.
Setiap blok (bahkan yang tidak dapat dipindahkan) dapat dipindahkan secara terprogram setelah berada di ruang kerja.
block.moveBy(dx, dy)
Posisi awal untuk blok di ruang kerja secara default adalah (0, 0).
Blokir data
this.data = '16dcb3a4-bd39-11e4-8dfc-aa07a5b093db';
Data adalah string opsional dan arbitrer yang dilampirkan ke blok. Jika blok diserialisasi, string data akan diserialisasi dengan blok tersebut. Hal ini termasuk saat blok diduplikasi atau disalin/ditempel.
Sering kali ini digunakan untuk mengaitkan blok dengan resource eksternal.
Saat diserialisasi ke JSON, data disimpan sebagai properti level teratas dalam blok:
{
"type": "my_block",
"data": "16dcb3a4-bd39-11e4-8dfc-aa07a5b093db",
// etc..
}
Saat diserialisasi ke XML (sistem serialisasi icebox lama), string data
disimpan dalam tag <data></data>
dalam blok:
<block type="my_block">
<data>16dcb3a4-bd39-11e4-8dfc-aa07a5b093db</data>
<!-- etc... -->
</block>
Penghancuran
Blok memiliki hook destroy
, yang dipanggil saat dihapus dari
ruang kerja. Model ini dapat digunakan untuk menghancurkan model data pendukung/resource eksternal
yang terkait dengan blok yang tidak diperlukan lagi.
JSON
{
// ...,
"extensions":["destroy"],
}
Blockly.Extensions.registerMixin('destroy', {
destroy: function() {
this.myResource.dispose();
}
});
JavaScript
Blockly.Blocks['block_type'] = {
destroy: function() {
this.myResource.dispose();
}
}
Metode destroy
dipanggil setelah induk blok dibuang, tetapi
sebelum turunan atau kolomnya dibuang.
Menu Konteks
Secara default, blok memiliki menu konteks klik kanan yang memungkinkan pengguna melakukan hal-hal seperti menambahkan komentar, atau memblokir duplikat.
Anda dapat menonaktifkan menu konteks setiap blok dengan melakukan:
block.contextMenu = false;
Anda juga dapat menyesuaikan opsi yang ditampilkan di menu. Guna menyesuaikan menu untuk
semua blok, lihat
dokumentasi menu konteks.
Guna menyesuaikan menu untuk setiap blok, Anda dapat mengimplementasikan
customContextMenu
. Fungsi ini menggunakan serangkaian opsi menu dan
mengubahnya di tempat, yang berarti Anda dapat menambahkan dan menghapus item.
Setiap opsi menu adalah objek dengan tiga properti:
text
adalah teks tampilan.enabled
adalah boolean. Jika dinonaktifkan, opsi akan ditampilkan, tetapi dengan teks berwarna abu-abu.callback
adalah fungsi yang akan dipanggil saat opsi diklik.