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

Blockly có nhiều khối được xác định trước, từ các hàm toán học đến các cấu trúc lặp. 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à hình 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óng vuốt.

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

• Đị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. Nội dung này luôn được viết bằng JavaScript, ngay cả khi ngôn ngữ đích không phải là JavaScript.
• 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 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 về 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 của khối đó. Bạn 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:

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 định nghĩa khối, hãy xem bài viết Định nghĩa khối là gì?

Trình tạo mã dạng 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ụ: đây là một trình tạo tạo ra 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à một trình tạo ngôn ngữ. Thao tác này sẽ tạo mã cho mọi khối được đính kèm vào các đầu vào (chẳng hạn như đầ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 bài viết Trình tạo mã dạng 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 đến 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ụ bật lên hoặc Xác định hộp công cụ danh mục.