Biến

Biến là một khái niệm lập trình quan trọng. Blockly hỗ trợ động như Python và JavaScript và bạn phải thực hiện thêm một chút công việc, có thể thêm thông tin để hỗ trợ các ngôn ngữ được nhập mạnh (hoặc được nhập tĩnh ngôn ngữ), chẳng hạn như Java hoặc C.

Đây là các biểu tượng khác thông tin về ngôn ngữ đích và ngôn ngữ nhập tĩnh.

Blockly cung cấp các trường biến là các hộp thả xuống động hiển thị tên của các biến mà người dùng đã cung cấp. Sau đây là ví dụ về một cách.

Theo mặc định, Blockly cho phép gán bất kỳ loại nào cho một biến và tất cả Các trình tạo do Blockly cung cấp dành cho các ngôn ngữ được nhập động. Nếu bạn sử dụng ngôn ngữ đã nhập, bạn có thể định cấu hình Blockly để hỗ trợ tính năng này bằng cách thực hiện như sau:

Khối biến chưa được nhập

Các khối cơ bản nhất để truy cập và thao tác với một biến là phương thức getter và khối setter. Hãy cùng tìm hiểu các khối getter và setter mà Blockly cung cấp.

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

Thao tác này sẽ tạo ra 2 khối sau:

Một chi tiết quan trọng cần lưu ý là bằng cách đặt "đầu ra" của biến phương thức getter thành rỗng, thì giá trị trả về có thể thuộc bất kỳ kiểu nào. Ngoài ra, hãy lưu ý rằng biến Đầu vào của phương thức setter không chỉ định bất kỳ bước kiểm tra nào. Do đó, bạn có thể đặt biến thành bất kỳ loại giá trị nào.

Khối biến thể đã nhập

Bạn có thể thêm phương thức getter và phương thức setter thực thi hoạt động kiểm tra kiểu. Ví dụ: nếu bạn đã tạo biến thuộc loại "Panda", các định nghĩa sau đây tạo ra một biến phương thức getter và setter với các kiểu phù hợp.

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

Thao tác này sẽ tạo ra 2 loại khối: phương thức getter và phương thức setter. Chỉ trình đơn thả xuống hiển thị các biến thuộc kiểu Panda. Dữ liệu đầu vào và đầu ra của công cụ này chỉ chấp nhận kết nối với loại Gấu trúc. Bạn phải đặt defaultType của trường này thành 1 của các giá trị trong mảng variableTypes. Không đặt defaultType khi việc cung cấp mảng variableTypes sẽ dẫn đến lỗi được gửi.

Theo mặc định, không có chỉ báo trực quan để cho người dùng biết loại tệp nào đang được đã sử dụng. Một cách dễ dàng để phân biệt các loại biến là dựa vào màu sắc.

Thêm biến vào Hộp công cụ

Để loại biến mới này trở nên hữu ích với người dùng của bạn, bạn cần thêm một cách để tạo và sử dụng các biến mới.

Tạo danh mục động mới cho các biến nếu bạn chưa có biến.

Thêm phương thức getter và setter mới vào danh mục.

Nút Tạo biến

Tiếp theo, người dùng cần biết cách tạo biến. Cách đơn giản nhất là dùng "Tạo biến" nút.

Khi tạo nút này, hãy thực hiện lệnh gọi lại

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

và một biến đã nhập của Panda sẽ được tạo!

Cách dễ nhất để cho phép người dùng tạo biến thuộc nhiều loại là sử dụng một là "tạo" nút cho mỗi loại (ví dụ: Tạo biến chuỗi, Tạo số Biến, Tạo biến Gấu trúc).

Nếu có nhiều hơn hai hoặc ba loại biến, bạn có thể nhanh chóng kết thúc bằng quá nhiều nút. Trong trường hợp đó, hãy cân nhắc sử dụng @blockly/plugin-typed-variable-modal để hiển thị một cửa sổ bật lên mà từ đó người dùng có thể chọn loại biến mong muốn.

Định nghĩa trình tạo

Cuối cùng, bạn cần xác định trình tạo mã khối cho các khối biến mới của bạn. Bạn cũng có thể truy cập trực tiếp vào danh sách các biến bằng Blockly.Workspace.getAllVariables() để lấy tất cả các biến hoặc Blockly.Workspace.getVariablesOfType() để nhận tất cả các biến thuộc một loại cụ thể.