Variabel

Variabel adalah konsep pemrograman yang penting. Blockly mendukung secara dinamis yang diketik seperti Python dan JavaScript dan dengan sedikit upaya tambahan, Anda dapat menambahkan informasi untuk mendukung bahasa dengan sistem strong type (atau jenis bahasa statis) bahasa) seperti Java atau C.

Berikut selengkapnya informasi tentang bahasa bertipe dinamis versus statis.

Secara blok menyediakan kolom variabel yang berupa kotak dropdown dinamis yang ditampilkan nama variabel yang disediakan pengguna. Berikut adalah contohnya.

Secara default, Blockly memungkinkan jenis apa pun ditetapkan ke variabel dan Generator yang disediakan Blockly adalah untuk bahasa yang diketik secara dinamis. Jika Anda menggunakan bahasa yang diketik, Anda dapat mengkonfigurasi Blockly untuk mendukungnya dengan melakukan hal berikut:

Blok Variabel Tanpa Jenis

Blok paling dasar untuk mengakses dan memanipulasi variabel adalah pengambil dan blok penyetel. Mari kita telusuri blok pengambil dan penyetel yang Blockly yang disediakan.

JSON

// Block for variable getter.
{
  "type": "variables_get",
  "message0": "%1",
  "args0": [
    {    // Beginning of the field variable dropdown
      "type": "field_variable",
      "name": "VAR",    // Static name of the field
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}"    // Given at runtime
    }    // End of the field variable dropdown
  ],
  "output": null,    // Null means the return value can be of any type
  ...
},

// Block for variable setter.
{
  "type": "variables_set",
  "message0": "%{BKY_VARIABLES_SET}",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}"
    },
    {
      "type": "input_value",    // This expects an input of any type
      "name": "VALUE"
    }
  ],
  ...
}

JavaScript

// Block for variable getter.
Blockly.Blocks['variables_get'] = {
  init: function() {
    this.appendDummyInput()
      .appendField(new Blockly.FieldVariable("VAR_NAME"), "FIELD_NAME");
    this.setOutput(true, null);
    ...
  }
};

// Block for variable setter.
Blockly.Blocks['variables_set'] = {
  init: function() {
    this.appendValueInput("NAME")
        .setCheck(null)
        .appendField("set")
        .appendField(new Blockly.FieldVariable("VAR_NAME"), "FIELD_NAME")
        .appendField("to");
    this.setOutput(true, null);
    ...
  }
};

Cara ini membuat dua blok berikut:

Detail penting yang perlu diperhatikan adalah dengan mengatur "output" pengambil variabel ke null, nilai yang ditampilkan dapat berupa jenis apa pun. Perhatikan juga bahwa variabel input penyetel tidak menentukan pemeriksaan apa pun. Oleh karena itu, variabel dapat ditetapkan ke semua jenis nilai.

Blok Variabel yang Diketik

Anda dapat menambahkan pengambil dan penyetel yang menerapkan pemeriksaan jenis. Misalnya, jika Anda telah membuat variabel jenis “Panda”, definisi berikut membuat pengambil dan penyetel dengan jenis yang sesuai.

JSON

 // Block for Panda variable getter.
 {
  "type": "variables_get_panda",
  "message0": "%1",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}",
      "variableTypes": ["Panda"],    // Specifies what types to put in the dropdown
      "defaultType": "Panda"
    }
  ],
  "output": "Panda",    // Returns a value of "Panda"
  ...
},

 // Block for Panda variable setter.
{
  "type": "variables_set_panda",
  "message0": "%{BKY_VARIABLES_SET}",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "%{BKY_VARIABLES_DEFAULT_NAME}",
      "variableTypes": ["Panda"],
      "defaultType": "Panda"
    },
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "Panda"    // Checks that the input value is of type "Panda"
    }
  ],
  "previousStatement": null,
  "nextStatement": null,
  ...
}

JavaScript

// Block for variable getter.
Blockly.Blocks['variables_get_panda'] = {
  init: function() {
    this.appendDummyInput()
      .appendField(new Blockly.FieldVariable(
          "VAR_NAME", ['Panda'], 'Panda'), "FIELD_NAME");
    this.setOutput(true, 'Panda');
    ...
  }
};

// Block for variable setter.
Blockly.Blocks['variables_set_panda'] = {
  init: function() {
    this.appendValueInput("NAME")
        .setCheck('Panda')
        .appendField("set")
        .appendField(new Blockly.FieldVariable(
            "VAR_NAME", null, ['Panda'], 'Panda'), "FIELD_NAME")
        .appendField("to");
        this.setPreviousStatement(true, null);
        this.setNextStatement(true, null);
    ...
  }
};

Ini menciptakan dua jenis blok, pengambil dan penyetel. Hanya dropdown mereka menampilkan variabel jenis Panda. Input dan outputnya hanya menerima koneksi dengan jenis Panda. defaultType kolom harus ditetapkan ke satu dari nilai dalam array variableTypes. Tidak menyetel defaultType saat menyediakan array variableTypes akan menyebabkan error ditampilkan.

Secara default, tidak ada indikator visual untuk memberi tahu pengguna jenis mana yang sedang data Satu cara mudah untuk membedakan jenis variabel adalah dengan warna.

Menambahkan Variabel ke Toolbox

Agar jenis variabel baru ini berguna bagi pengguna, Anda perlu menambahkan cara untuk membuat dan menggunakan variabel baru.

Membuat kategori dinamis baru untuk variabel jika Anda belum memilikinya.

Tambahkan pengambil dan penyetel baru ke kategori.

Tombol Buat Variabel

Selanjutnya, pengguna memerlukan cara untuk membuat variabel. Cara paling sederhana adalah dengan "Buat Variabel" .

Saat membuat tombol, lakukan panggilan callback

Blockly.Variables.createVariableButtonHandler(button.getTargetWorkspace(), null, 'panda');

dan variabel berjenis Panda akan dibuat.

Cara termudah untuk memungkinkan pengguna membuat variabel dari beberapa jenis adalah dengan satu "{i>create<i}" tombol per jenis (mis., Buat Variabel String, Buat Nomor Variabel, Buat Variabel Panda).

Jika Anda memiliki lebih dari dua atau tiga jenis variabel, Anda dapat dengan cepat mendapatkan terlalu banyak tombol. Dalam hal ini, pertimbangkan untuk menggunakan @blockly/plugin-typed-variable-modal untuk menampilkan pop-up tempat pengguna dapat memilih jenis variabel yang mereka inginkan.

Tentukan Generator

Terakhir, Anda harus menentukan generator kode blok untuk blok variabel baru Anda. Anda juga dapat mengakses daftar variabel secara langsung dengan Blockly.Workspace.getAllVariables() untuk mendapatkan semua variabel dari semua jenis atau Blockly.Workspace.getVariablesOfType() untuk mendapatkan semua variabel dari jenis tertentu.