Tổng quan về khối tuỳ chỉnh

Blockly đi kèm với một số lượng lớn các khối được xác định trước, từ các hàm toán học đến cấu trúc lặp lại. Tuy nhiên, hầu hết các ứng dụng đều cần xác định và triển khai các khối tuỳ chỉnh cho miền của mình. Ví dụ: một ứng dụng vẽ có thể cần các khối để vẽ đường thẳng và vòng tròn, còn một ứng dụng robot có thể cần các khối để di chuyển cánh tay và điều khiển một cái vuốt.

Để xác định và sử dụng một loại khối mới, bạn cần có 3 yếu tố sau:

  • Định nghĩa khối: Xác định giao diện của một loại khối cũng như một số hành vi nhất định.
  • Trình tạo mã khối: Tạo chuỗi mã cho các khối thuộc loại này. Mã này luôn được viết bằng JavaScript, ngay cả khi ngôn ngữ mục tiêu không phải là JavaScript.
  • Tham chiếu hộp công cụ: Tham chiếu đến loại khối trong 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.

Định nghĩa khối

Định nghĩa khối xác định giao diện của một khối, chẳng hạn như văn bản, trường, kết nối và màu sắc. Lớp này cũng có thể xác định hành vi dành riêng cho khối, chẳng hạn như trình xử lý sự kiện dành riêng cho khối. Ví dụ: khối này:

Khối `string_length`.

có thể được xác định trong JSON hoặc JavaScript như sau:

JSON

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

Để biết thêm thông tin về định nghĩa khối và cách hoạt động của các định nghĩa đó, hãy xem bài viết Định nghĩa khối là gì?.

Trình tạo mã khối

Để chuyển đổi một khối thành mã, bạn cần có các hàm trình tạo riêng biệt cho từng ngôn ngữ mà bạn muốn tạo. Ví dụ: sau đây là một trình tạo tạo JavaScript:

javascriptGenerator.forBlock['string_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 chấp nhận khối đang được xử lý và trình tạo ngôn ngữ. Hàm này tạo mã cho mọi khối được đính kèm vào dữ liệu đầu vào (chẳng hạn như dữ liệu đầu vào VALUE trong ví dụ) và mọi trường, sau đó nối các chuỗi kết quả thành một biểu thức lớn hơn.

Để biết thêm thông tin, hãy xem phần Trình tạo mã khối.

Tài liệu tham khảo về Hộp công cụ

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

JSON

var toolbox = {
     "kind": "categoryToolbox",
     "name": "Text"
     "contents": [
       {
         "kind": "block",
         "type": "string_length"
       },
     ]
   };

XML

<xml id="toolbox" style="display: none"> WHY IS THERE DISPLAY: NONE HERE?
   <category name="Text">
     <block type="string_length"></block>
   </category>
   ...
</xml>

Để biết thêm thông tin, hãy xem phần Xác định hộp công cụ mở ra hoặc Xác định hộp công cụ theo danh mục.