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

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

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

  • Đối tượng định nghĩa khối: Xác định giao diện và hoạt động của một khối, bao gồm văn bản, màu sắc, trường và đường kết nối.
  • Tài liệu tham khảo về hộp công cụ: Mã tham chiếu đến 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 này vào không gian làm việc.
  • Hàm trình tạo: Tạo chuỗi mã cho khối này. Mã này 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

Chặn đối với tải trên web Chặn thông qua tệp tập lệnh. Thư mục blocks/ có một số ví dụ như vậy về các khối tiêu chuẩn. Giả sử các quy tắc chặn của bạn không phù hợp với các danh mục hiện có, hãy tạo một tệp JavaScript mới. Tệp JavaScript mới này 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 thông thường sẽ 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 có cùng không gian tên, nên bạn nên sử dụng tên được tạo từ danh mục của mình (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.

Điều này xác định khối sau:

Khối &quot;string_length&quot;.

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

Mảng JSON

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

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 thông tin 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 tới 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 chi tiết.

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

Cuối cùng, để chuyển đổi khối thành mã, hãy ghép nối khối đó với một hàm tạo. Các trình tạo sẽ dành riêng cho ngôn ngữ đầu ra mong muốn, nhưng các trình tạo tiêu 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 tạo tham chiếu đến khối để xử lý. Phương thức này kết xuất các dữ liệu đầu vào (đầu vào VALUE ở trên) vào các chuỗi mã và sau đó nối các dữ liệu đó 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...