動態類別

動態類別是指每次開啟時,系統會根據函式動態重新填入的類別。

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

動態類別函式與字串鍵 (又稱為已註冊) 建立關聯後,您可以將這個字串鍵指派給類別定義的 custom 屬性,讓類別變成動態類別。

JSON

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

XML

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

內建動態類別

Blockly 提供三個內建的動態類別。

  • '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>

注意:Blockly 程式碼庫中使用「程序」一詞,但「函式」一詞對學生來說較易理解。很抱歉造成不便。