Thêm khối tùy chỉnh

Mặc dù Blockly định nghĩa một số khối tiêu chuẩn, nhưng hầu hết ứng dụng cần xác định và triển khai ít nhất một số quy tắc chặn có liên quan đến miền.

Khối bao gồm 3 thành phần:

  • Đối tượng định nghĩa khối: Xác định giao diện và hành vi của khối, bao gồm văn bản, màu sắc, trường và kết nối.
  • Tài liệu tham khảo về Hộp công cụ: Tài liệu tham khảo về loại khối trong tệp XML của hộp công cụ để người dùng có thể thêm loại khối đó vào không gian làm việc.
  • Hàm tạo: Tạo chuỗi mã cho khối này. Luôn luôn được viết bằng JavaScript, ngay cả khi ngôn ngữ đích không phải là JavaScript.

Định nghĩa khối

Blockly cho web tải các Khối thông qua tệp tập lệnh. Thư mục blocks/ bao gồm một số ví dụ như vậy cho các khối tiêu chuẩn. Giả sử các khối của bạn không phù hợp với các danh mục hiện tại, hãy tạo tệp JavaScript mới. Thông tin mới này Tệp JavaScript cần được đưa vào danh sách thẻ <script ...> trong tệp HTML của trình chỉnh sửa.

Định nghĩa khối điển hình có dạng như sau:

JSON

Blockly.Blocks['string_length'] = {
  init: function() {
    this.jsonInit({
      "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');
  }
};

  • string_length: Đây là tên loại của khối. Vì tất cả các khối đều dùng chung một không gian tên, nên bạn nên sử dụng tên bao gồm danh mục (trong trường hợp này là string) theo sau là hàm của khối (trong trường hợp này là length).

  • init: Hàm này xác định giao diện của khối.

Thao tác này xác định khối sau:

Khối `string_length`.

Bạn có thể xem thông tin chi tiết về các định nghĩa khối trong Xác định khối.

Mảng JSON

Bạn có thể xác định nhiều khối cùng lúc bằng cách sử dụng một mảng khối JSON định nghĩa.

JSON

Blockly.defineBlocksWithJsonArray([
  // Block for colour picker.
  {
    "type": "colour_picker",
    "message0": "%1",
    "args0": [
      {
        "type": "field_colour",
        "name": "COLOUR",
        "colour": "#ff0000"
      }
    ],
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_PICKER_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_PICKER_TOOLTIP}",
    "extensions": ["parent_tooltip_when_inline"]
  },
  // Block for random colour.
  {
    "type": "colour_random",
    "message0": "%{BKY_COLOUR_RANDOM_TITLE}",
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_RANDOM_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_RANDOM_TOOLTIP}"
  }
]);

Thêm tài liệu tham khảo về Hộp công cụ

Sau khi xác định, hãy sử dụng tên loại để tham chiếu khối đến hộp công cụ:

<xml id="toolbox" style="display: none">
  <category name="Text">
    <block type="string_length"></block>
  </category>
  ...
</xml>

Xem hướng dẫn về Hộp công cụ để biết thêm thông tin chi tiết.

Thêm trình tạo mã khối

Cuối cùng, để chuyển đổi khối này thành mã, hãy ghép nối khối với một trình tạo . Trình tạo dành riêng cho ngôn ngữ đầu ra mong muốn, nhưng trình tạo chuẩn thường có định dạng sau:

javascriptGenerator.forBlock['text_length'] = function(block, generator) {
  // String or array length.
  var argument0 = generator.valueToCode(block, 'VALUE', Order.FUNCTION_CALL) || '\'\'';
  return [argument0 + '.length', Order.MEMBER];
};

Hàm trình tạo tham chiếu đến khối để xử lý. Hàm này hiển thị dữ liệu đầu vào (dữ liệu đầu vào VALUE ở trên) thành chuỗi mã, sau đó nối các chuỗi đó thành một biểu thức lớn hơn.

→ Thông tin khác về trình tạo mã khối...