Danh mục động

Danh mục động là các danh mục được điền lại một cách linh động dựa trên một hàm mỗi khi đượ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 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ù bạn nên dùng JSON.

Ngoài ra, xin 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 tham số, vì vậy, các khối trong danh mục động của bạn có thể dựa trên trạng thái của không gian làm việc.

JSONXML

// 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);

// Returns an arry 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ể gán khoá chuỗi này cho thuộc tính custom của định nghĩa danh mục để tạo danh mục động.

JSONXML

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

<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 sẵn.

• 'VARIABLE' tạo một danh mục cho các biến chưa được nhập.
• 'VARIABLE_DYNAMIC' tạo một danh mục cho các biến đã 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 hàm.

JSONXML

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

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

Lưu ý: Từ "quy trình" được sử dụng trong toàn bộ cơ sở mã Blockly, nhưng từ "hàm" được học viên hiểu rõ hơn. Chúng tôi xin lỗi vì sự không khớp này.