동적 카테고리

동적 카테고리는 열릴 때마다 함수를 기반으로 동적으로 다시 채워지는 카테고리입니다.

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는 세 가지 기본 제공 동적 카테고리를 제공합니다.

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 코드베이스 전체에 사용되지만 '함수'라는 단어가 학생들이 더 잘 이해하는 것으로 나타났습니다. 일치하지 않는 점 사과드립니다.