หมวดหมู่แบบไดนามิก

หมวดหมู่แบบไดนามิกคือหมวดหมู่ที่ระบบสร้างขึ้นใหม่แบบไดนามิกตามฟังก์ชันทุกครั้งที่เปิด

Blockly รองรับการดำเนินการนี้โดยให้คุณเชื่อมโยงหมวดหมู่กับฟังก์ชันผ่านคีย์สตริงที่ลงทะเบียน ฟังก์ชันควรแสดงผลคําจํากัดความของเนื้อหาในหมวดหมู่ (รวมถึงบล็อก ปุ่ม ป้ายกำกับ ฯลฯ) เนื้อหาสามารถระบุเป็น JSON หรือ XML ก็ได้ แต่เราขอแนะนำให้ใช้ JSON

นอกจากนี้ โปรดทราบว่าฟังก์ชันนี้จะได้รับพื้นที่ทํางานเป้าหมายเป็นพารามิเตอร์ เพื่อให้บล็อกในหมวดหมู่แบบไดนามิกอิงตามสถานะของพื้นที่ทํางานได้

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

หลังจากเชื่อมโยงฟังก์ชันหมวดหมู่แบบไดนามิกกับคีย์สตริง (หรือที่เรียกว่าการลงทะเบียน) แล้ว คุณสามารถกําหนดคีย์สตริงนี้ให้กับพร็อพเพอร์ตี้ custom ของคําจํากัดความหมวดหมู่เพื่อให้หมวดหมู่เป็นแบบไดนามิก

JSON

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

XML

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

หมวดหมู่แบบไดนามิกในตัว

Blockly มีหมวดหมู่แบบไดนามิกในตัว 3 หมวดหมู่

• 'VARIABLE' สร้างหมวดหมู่สําหรับตัวแปรที่ไม่มีประเภท
• 'VARIABLE_DYNAMIC' สร้างหมวดหมู่สําหรับตัวแปรที่มีประเภท โดยมีปุ่มสำหรับสร้างสตริง ตัวเลข และสี

• 'PROCEDURE' สร้างหมวดหมู่สำหรับบล็อกฟังก์ชัน

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>

หมายเหตุ: มีการใช้คำว่า "procedure" ทั่วทั้งโค้ดฐานของ Blockly แต่พบว่านักเรียนเข้าใจคำว่า "function" มากกว่า ขออภัยที่ข้อมูลไม่ตรงกัน