Danh mục động

Danh mục động là danh mục được điền sẵn một cách linh hoạt dựa trên một hàm mỗi khi danh mục đó được mở.

Blockly hỗ trợ việc này bằng cách cho phép bạn liên kết một danh mục với một hàm thông qua khoá chuỗi đã đăng ký. Hàm này sẽ trả về định nghĩa về nội dung của một danh mục (bao gồm cả các khối, nút, nhãn, v.v.). Bạn có thể chỉ định nội dung dưới dạng JSON hoặc XML, mặc dù nên dùng JSON.

Cũng lưu ý rằng hàm này được cung cấp không gian làm việc mục tiêu dưới dạng một tham số, vì vậy, các khối trong danh mục động có thể dựa trên trạng thái của không gian làm việc.

JSON

// Returns an array of objects.
var coloursFlyoutCallback = function(workspace) {
  // Returns an array of hex colours, e.g. ['#4286f4', '#ef0447']
  var colourList = getPalette();
  var blockList = [];
  for (var i = 0; i < colourList.length; i++) {
    blockList.push({
      'kind': 'block',
      'type': 'colour_picker',
      'fields': {
        'COLOUR': colourList[i]
      }
    });
  }
  return blockList;
};

// Associates the function with the string 'COLOUR_PALETTE'
myWorkspace.registerToolboxCategoryCallback(
    'COLOUR_PALETTE', coloursFlyoutCallback);

XML

// Returns an array of XML nodes.
var coloursFlyoutCallback = function(workspace) {
  // Returns an array of hex colours, e.g. ['#4286f4', '#ef0447']
  var colourList = getPalette();
  var blockList = [];
  for (var i = 0; i < colourList.length; i++) {
    var block = document.createElement('block');
    block.setAttribute('type', 'colour_picker');
    var field = document.createElement('field');
    field.setAttribute('name', 'COLOUR');
    field.innerText = colourList[i];
    block.appendChild(field);
    blockList.push(block);
  }
  return blockList;
};

// Associates the function with the string 'COLOUR_PALETTE'
myWorkspace.registerToolboxCategoryCallback(
    'COLOUR_PALETTE', coloursFlyoutCallback);

Sau khi các hàm danh mục động được liên kết với một khoá chuỗi (còn gọi là đã đăng ký), bạn có thể chỉ định khoá chuỗi này cho thuộc tính custom trong định nghĩa danh mục để tạo danh mục động.

JSON

{
  "kind": "category",
  "name": "Colours",
  "custom": "COLOUR_PALETTE"
}

XML

<category name="Colours" custom="COLOUR_PALETTE"></category>

Danh mục động tích hợp

Blockly cung cấp 3 danh mục động tích hợp.

• 'VARIABLE' tạo một danh mục cho các biến không có kiểu.
• 'VARIABLE_DYNAMIC' tạo một danh mục cho các biến được nhập. Công cụ này có các nút để tạo chuỗi, số và màu sắc.

• 'PROCEDURE' tạo một danh mục cho các khối chức năng.

JSON

{
  "kind": "category",
  "name": "Variables",
  "custom": "VARIABLE"
},
{
  "kind": "category",
  "name": "Variables",
  "custom": "VARIABLE_DYNAMIC"
},
{
  "kind": "category",
  "name": "Functions",
  "custom": "PROCEDURE"
}

XML

<category name="Variables" custom="VARIABLE"></category>
<category name="Variables" custom="VARIABLE_DYNAMIC"></category>
<category name="Functions" custom="PROCEDURE"></category>

Lưu ý: Từ "thủ tục" được dùng trong toàn bộ cơ sở mã Blockly, nhưng từ "hàm" được nhận thấy là dễ hiểu hơn đối với học viên. Xin lỗi vì sự khác biệt này.