Menentukan Blok

Definisi blok menjelaskan tampilan dan perilaku blok, termasuk teks, warna, bentuk, dan blok lain apa 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 pelokalan otomatis saat mengembangkan untuk bahasa dengan urutan kata yang berbeda. Format JSON lebih disukai untuk menentukan blok.

Namun, format JSON tidak dapat secara langsung mendefinisikan fitur lanjutan seperti sebagai mutator atau validator. Ini harus ditulis dalam JavaScript, biasanya sebagai ekstensi.

Aplikasi yang menggunakan implementasi JavaScript asli dari Blockly juga dapat menulis memblokir definisi langsung ke panggilan fungsi Blockly API tingkat yang lebih rendah, yang ditampilkan dalam berbagai contoh JavaScript di bawah ini.

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 akan membuat bentuk blok. Dalam konteks fungsi kata kunci this adalah blok sebenarnya yang dibuat.

Kedua contoh memuat 'string_length' yang sama diblokir.

Di web, format JSON dimuat menggunakan fungsi initJson. Hal ini juga memungkinkan pencampuran dua format di halaman web Blockly. Penting sebaiknya menentukan blok Anda dengan JSON jika memungkinkan, dan gunakan JavaScript hanya untuk sebagian definisi blok yang tidak didukung JSON.

Di bawah ini adalah contoh blok yang sebagian besar didefinisikan menggunakan JSON, namun 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 utama blok ditentukan oleh properti colour JSON, yaitu Fungsi block.setColour(..), atau dengan menggunakan tema dan menentukan blok gaya.

JSON

{
  // ...,
  "colour": 160,
}

JavaScript

init: function() {
  // ...
  this.setColour(160);
}

Lihat panduan warna blok untuk mengetahui detail selengkapnya.

Koneksi Pernyataan

Pengguna dapat membuat urutan blok menggunakan nextStatement dan previousStatement konektor. Dalam tata letak standar Blockly, koneksi ini berada di atas dan bawah, dengan balok yang ditumpuk secara vertikal.

Blok dengan konektor sebelumnya tidak dapat memiliki konektor output, dan sebaliknya. Istilah blok pernyataan mengacu pada blok tanpa nilai {i>output<i}. Blok pernyataan biasanya akan memiliki koneksi sebelumnya dan koneksi berikutnya.

Koneksi nextStatement dan previousStatement dapat diketik, namun 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

Tanpa jenis:

{
  ...,
  "nextStatement": null,
}

Diketik (jarang):

{
  "nextStatement": "Action",
  ...
}

JavaScript

Tanpa jenis:

this.setNextStatement(true);  // false implies no next connector, the default

Diketik (jarang):

this.setNextStatement(true, 'Action');

Koneksi Sebelumnya

Membuat lekukan di bagian atas blok, agar dapat dihubungkan sebagai tumpukan pernyataan.

Blok dengan koneksi sebelumnya tidak dapat memiliki koneksi output.

JSON

Tanpa jenis:

{
  ...,
  "previousStatement": null,
}

Diketik (jarang):

{
  "previousStatement": "Action",
  ...
}

JavaScript

Tanpa jenis:

this.setPreviousStatement(true);  // false implies no previous connector, the default

Diketik (jarang):

this.setPreviousStatement(true, 'Action');

Blokir Output

Sebuah blok dapat memiliki satu {i>output<i}, yang direpresentasikan sebagai konektor jigsaw jantan pada terdepan. Output terhubung ke input nilai. Blok dengan output biasanya disebut blok nilai.

JSON

Tanpa jenis:

{
  // ...,
  "output": null,
}

Diketik:

{
  // ...,
  "output": "Number",
}

JavaScript

Tanpa jenis:

init: function() {
  // ...
  this.setOutput(true);
}

Diketik:

init: function() {
  // ...
  this.setOutput(true, 'Number');
}

Blok dengan konektor output juga tidak boleh memiliki notch pernyataan sebelumnya.

Blokir Input

Blok memiliki satu atau beberapa {i>input<i}, di mana setiap input memiliki kolom dan dapat berakhir di koneksi. Ada beberapa jenis input bawaan.

  • Input nilai: Menghubungkan ke koneksi output blok nilai. Blok math_arithmetic (penambahan, pengurangan) adalah contoh blok dengan dua input nilai.
  • Input pernyataan: Terhubung ke koneksi sebelumnya dari blok pernyataan. Tujuan bagian tersarang dari loop sementara adalah contoh {i>input <i}pernyataan.
  • Input dummy: Tidak memiliki koneksi blok. Bertindak seperti baris baru ketika blok dikonfigurasikan 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 input rendering.

Format JSON dan JavaScript API menggunakan model yang sedikit berbeda untuk mendeskripsikan input mereka.

Input dan Kolom di JSON

Blok yang ditentukan JSON disusun sebagai urutan interpolasi string pesan ( message0, message1, ...), dengan setiap token interpolasi (%1, %2, ...) adalah kolom atau ujung input (sehingga konektor input dirender, dalam pesan) di array argsN JSON yang cocok. Format ini adalah 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 benar-benar cocok dengan array args0: tidak ada duplikat, tidak ada kekurangan. Token dapat ada dalam urutan apa pun, yang memungkinkan berbagai bahasa untuk mengubah tata letak blok.

Teks di kedua sisi token interpolasi akan dipangkas dengan spasi kosong. Teks yang menggunakan karakter % (misalnya, saat mengacu pada persentase) harus menggunakan %% sehingga tidak akan ditafsirkan sebagai token interpolasi.

Urutan argumen dan jenis argumen menentukan bentuk diblokir. Mengubah salah satu string ini dapat mengubah tata letak blok sepenuhnya. Hal ini sangat penting dalam bahasa yang memiliki urutan kata yang berbeda daripada bahasa Inggris. Pertimbangkan bahasa fiktif dengan "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 disentuh) akan menghasilkan blok berikut:

Blockly secara otomatis mengubah urutan {i>field<i}, membuat {i>input<i} contoh, dan beralih dari input eksternal ke internal.

Blockly juga otomatis mengganti karakter baris baru (\n) dalam 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. Sebagai contoh, message0 cocok 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 khusus dan menentukan input kustom dan meneruskannya sebagai argumen.

Setiap objek mungkin juga memiliki kolom alt. Jika Blockly tidak mengenali type objek, maka objek alt akan digunakan di tempatnya. Sebagai misalnya, jika kolom baru bernama field_time ditambahkan ke Blockly, memblokir menggunakan kolom ini dapat menggunakan alt untuk menentukan penggantian field_input untuk versi yang lebih lama dari 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 dapat 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.

Masukan contoh akan ditambahkan secara otomatis ke akhir blok jika String message diakhiri dengan teks atau kolom yang tidak terdapat dalam input. Jadi jika input terakhir pada blok adalah input tiruan, maka dapat dihilangkan dari array args dan tidak memerlukan interpolasi ke dalam message. Tujuan penambahan otomatis input tiruan tailing memungkinkan penerjemah untuk mengubah message tanpa perlu mengubah JSON lainnya. Lihat contoh "set %1 to %2" (tidak ada input contoh) dan "put %2 in %1" (input contoh yang ditambahkan) sebelumnya di halaman ini.

implicitAlign0

Dalam kasus yang jarang terjadi, input dummy tambahan yang dibuat otomatis harus diselaraskan ke "RIGHT" atau "CENTRE". Nilai default-nya jika tidak ditentukan adalah "LEFT".

Pada contoh di bawah, message0 adalah "send email to %1 subject %2 secure %3" dan Blockly secara otomatis menambahkan masukan contoh untuk baris ketiga. Latar (Setting) implicitAlign0 hingga "RIGHT" memaksa baris ini agar disejajarkan ke kanan. Ini perataan berlaku untuk semua input yang tidak ditentukan secara eksplisit dalam JSON definisi blok, termasuk input baris akhir yang menggantikan karakter baris baru ('\n') dalam pesan. Ada juga properti lastDummyAlign0 yang tidak digunakan lagi yang 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 terpisah. Pertimbangkan blok berulang ini yang memiliki dua baris:

Jika pemblokiran ini dijelaskan dengan satu pesan, properti message0 adalah "repeat %1 times %2 do %3". {i>String<i} ini terasa canggung bagi penerjemah, sulit untuk menjelaskan arti substitusi %2. Model %2 input mungkin juga tidak diinginkan dalam beberapa bahasa. Dan mungkin ada beberapa blok yang ingin membagikan teks dari baris kedua. Pendekatan yang lebih baik ditujukan 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 bertambah secara berurutan. Perlu diketahui bahwa {i>Block Factory<i} tidak mampu membagi pesan menjadi beberapa bagian, namun melakukannya secara manual adalah hal yang 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. Contoh dan input baris akhir jarang memerlukan referensi, dan ID biasanya dibiarkan tidak disetel.

JavaScript API juga menyertakan metode appendInput generik untuk menambahkan input kustom. Perhatikan bahwa dalam kasus ini, pengenal 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 adalah tiga metode bawaan yang digunakan untuk mengkonfigurasi {i>input.<i}

setCheck

JavaScript

input.setCheck('Number');

Fungsi opsional ini digunakan untuk pemeriksaan jenis input yang terhubung. Jika diberikan argumen null, default-nya, maka input ini dapat dihubungkan ke blok mana pun. Lihat Pemeriksaan Jenis untuk detailnya.

setAlign

JavaScript

input.setAlign(Blockly.inputs.Align.RIGHT);

Fungsi opsional ini digunakan untuk menyelaraskan {i>field<i} (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, satu dapat menambahkan sejumlah kolom ke input. Kolom ini sering digunakan sebagai label untuk menggambarkan kegunaan setiap input.

JavaScript

input.appendField('hello');

Elemen kolom paling sederhana adalah teks. Konvensi Blockly adalah menggunakan semua teks huruf kecil, dengan pengecualian untuk nama yang tepat (misalnya, Google, SQL).

Baris input dapat berisi berapa pun elemen kolom. Beberapa appendField panggilan dapat dirantai bersama untuk secara efisien menambahkan beberapa kolom ke baris input.

JavaScript

input.appendField('hello')
     .appendField(new Blockly.FieldLabel('Neil', 'person'));

Panggilan appendField('hello') sebenarnya adalah pintasan untuk menggunakan Konstruktor FieldLabel: appendField(new Blockly.FieldLabel('hello')). Satu-satunya saat seseorang ingin menggunakan konstruktor adalah saat menentukan sehingga teks bisa ditata gayanya 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 input nilai apa pun akan bersifat eksternal (seperti blok kiri). Jika true maka input nilai apa pun akan menjadi inline (seperti blok kanan di atas).

JSON

{
  // ...,
  "inputsInline": true
}

JavaScript

init: function() {
  // ...
  this.setInputsInline(true);
}

Jika tidak ditentukan maka Blockly akan menggunakan beberapa heuristik untuk menebak mode yang terbaik. Dengan asumsi Blockly membuat pilihan yang tepat, membiarkan kolom ini tidak ditentukan lebih disukai karena terjemahan bahasa yang berbeda secara otomatis memiliki mode yang berbeda. Lihat contoh JSON "set %1 to %2" (input eksternal) dan "put %2 in %1" (input inline) lebih awal di halaman ini.

Gunakan input inline jika blok cenderung memiliki input kecil seperti angka. Pengguna dapat mengaktifkan opsi ini melalui menu konteks, jika collapse diaktifkan (nilai defaultnya adalah true jika toolbox memiliki kategori).

Kolom

Kolom menentukan sebagian besar elemen UI dalam satu blok. Termasuk di antaranya label {i>string<i}, gambar, dan input untuk data literal seperti {i>string<i} dan angka. Contoh paling sederhana adalah blok math_number, yang menggunakan field_input agar pengguna dapat mengetik angka.

Kolom ditambahkan ke blok menggunakan appendField.

Blockly menyediakan sejumlah {i>field<i} bawaan, termasuk {i>input<i} teks, pemilih warna, dan gambar. Anda juga dapat membuat kolom sendiri.

→ Informasi selengkapnya tentang kolom bawaan.

→ Informasi selengkapnya tentang pembuatan kolom kustom.

Ikon

Ikon menentukan elemen UI pada blok yang menampilkan "meta" informasi tentang diblokir.

Ikon ditambahkan ke blok menggunakan addIcon.

Blockly menyediakan sejumlah ikon bawaan, termasuk ikon komentar ikon peringatan dan 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 teks panjang, teks akan dibulatkan secara otomatis.

JSON

{
  // ...,
  "tooltip": "Tooltip text."
}

JavaScript

init: function() {
  this.setTooltip("Tooltip text.");
}

Di JavaScript API, tooltip juga dapat didefinisikan sebagai fungsi, bukan {i>string<i} statis. Hal ini memungkinkan bantuan dinamis. Lihat math_arithmetic untuk contoh tooltip yang berubah tergantung pada opsi dropdown mana 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 menggunakan JavaScript API, blok dapat menentukan fungsi, bukan fungsi statis , yang menampilkan string tooltip. Hal ini memungkinkan tooltip dinamis. Lihat math_arithmetic untuk mengetahui contohnya.

Penyesuaian

Anda juga dapat menyesuaikan tampilan tooltip dengan memberikan rendering kustom fungsi tersebut. Buat fungsi yang menerima dua parameter:

  • pertama, elemen <div> tempat Anda akan merender konten
  • kedua, elemen aktual yang sedang diarahkan mouse dan Anda akan tampilkan tooltip untuk

Di dalam isi fungsi, Anda bisa merender konten apa pun yang Anda suka ke dalam div. Untuk mendapatkan string tooltip yang ditentukan pada blok yang diarahkan mouse, Anda dapat panggil Blockly.Tooltip.getTooltipOfObject(element); dengan element adalah parameter kedua di atas.

Terakhir, daftarkan fungsi ini sehingga Blockly dapat memanggilnya di waktu yang tepat:

Blockly.Tooltip.setCustomTooltip(yourFnHere);

Misalnya, lihat Demo Tooltip Kustom.

URL Bantuan

Pemblokiran dapat memiliki halaman bantuan yang terkait dengan pemblokiran tersebut. Fitur ini tersedia untuk pengguna Blockly for Web dengan mengklik kanan blok tersebut dan memilih "Help" dari menu konteks. Jika nilai ini adalah null, menu akan berwarna abu-abu posisi-posisi ini.

JSON

{
  // ...,
  "helpUrl": "https://en.wikipedia.org/wiki/For_loop"
}

JavaScript

init: function() {
  // ...
  this.setHelpUrl('https://en.wikipedia.org/wiki/For_loop');
}

Dengan menggunakan JavaScript API, blok dapat menentukan fungsi, bukan fungsi statis , yang menampilkan string URL, sehingga memungkinkan bantuan dinamis.

Pemroses dan Validator Perubahan

Blok dapat memiliki fungsi pemroses perubahan yang dipanggil pada setiap perubahan pada ruang kerja (termasuk yang tidak terkait dengan blok). Ini terutama digunakan untuk atur teks peringatan pemblokiran, atau notifikasi pengguna serupa di luar Workspace.

Fungsi ditambahkan dengan memanggil setOnChange menggunakan suatu 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 memanggil fungsi tersebut, dengan meneruskan peristiwa perubahan. Di dalam fungsi, this mengacu pada instance blok.

Karena fungsi dipanggil pada setiap perubahan, jika digunakan, developer harus memastikan pemroses berjalan cepat. Kita juga harus mewaspadai perubahan pada ruang kerja yang mungkin menurun atau berulang kembali ke pemroses.

Lihat controls_flow_statements, logic_compare, dan procedures_ifreturn yang berbeda untuk contoh.

Perhatikan bahwa kolom yang dapat diedit memiliki pemroses peristiwanya sendiri untuk validasi input dan menyebabkan efek samping.

Mutator

Mutator memungkinkan blok lanjutan berubah bentuk, terutama karena pengguna yang membuka dialog untuk menambah, menghapus, atau mengatur ulang komponen. Mutator mungkin ditambahkan melalui JSON dengan kunci mutator.

JSON

{
  // ...,
  "mutator":"if_else_mutator"
}

Konfigurasi per blok

Instance blok memiliki sejumlah properti yang mengonfigurasi perilakunya pengguna. Ini dapat digunakan untuk membatasi ruang kerja untuk mencerminkan properti domain (mis., hanya ada satu peristiwa 'mulai'), atau fokus usaha pengguna (mis., tutorial).

Status Dapat Dihapus

block.setDeletable(false);

Jika kebijakan disetel ke salah (false), pengguna tidak akan dapat menghapus pemblokiran. Pemblokiran default untuk dihapus di ruang kerja yang dapat diedit.

Semua blok, (bahkan yang tidak dapat dihapus) dapat dihapus secara terprogram:

block.dispose();

Status yang Dapat Diedit

block.setEditable(false);

Jika kebijakan disetel ke salah (false), pengguna tidak akan dapat mengubah kolom blok. (misalnya, dropdown dan input teks). Blok secara default dapat diedit di browser yang dapat diedit Workspace.

Status yang Dapat Dipindahkan

block.setMovable(false);

Jika kebijakan disetel ke salah (false), pengguna tidak akan dapat memindahkan blok secara langsung. Channel yang merupakan turunan dari blok lain tidak boleh terputus dari blok itu, meskipun akan berpindah dengan induknya jika induknya dipindahkan. Block secara default ke dapat dipindahkan di ruang kerja yang dapat diedit.

Setiap blok (bahkan blok yang tidak bisa dipindahkan) dapat dipindahkan secara terprogram setelah berada di Workspace.

block.moveBy(dx, dy)

Posisi awal blok pada ruang kerja ditetapkan secara default ke (0, 0).

Blokir kuota

this.data = '16dcb3a4-bd39-11e4-8dfc-aa07a5b093db';

Data adalah string opsional dan arbitrer yang dilampirkan ke blok. Jika yang diserialisasi, {i>string<i} data diserialisasi dengannya. Ini termasuk ketika blok itu diduplikasi atau disalin/ditempelkan.

Sering kali ini digunakan untuk mengaitkan suatu blok dengan sumber daya eksternal.

Saat diserialisasi ke JSON, data akan disimpan sebagai properti level teratas dalam blok:

{
  "type": "my_block",
  "data": "16dcb3a4-bd39-11e4-8dfc-aa07a5b093db",
  // etc..
}

Jika diserialisasi ke XML (sistem serialisasi kotak es lama), string data disimpan dalam tag <data></data> di dalam blok:

<block type="my_block">
  <data>16dcb3a4-bd39-11e4-8dfc-aa07a5b093db</data>
  <!-- etc... -->
</block>

Penghancuran

Blok memiliki hook destroy, yang dipanggil jika dihapus dari Workspace. Ini dapat digunakan untuk menghancurkan model data pendukung/eksternal sumber daya yang terkait dengan blok yang tidak lagi dibutuhkan.

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 melakukannya 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. Untuk menyesuaikan menu semua blok, lihat dokumentasi menu konteks. Untuk menyesuaikan menu setiap blok, Anda dapat mengimplementasikan customContextMenu. Fungsi ini mengambil array dari opsi menu dan memodifikasinya di tempat, yang berarti Anda bisa menambah 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 warna abu-abu teks.
  • callback adalah fungsi yang akan dipanggil saat opsi diklik.