Menentukan Blok

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.