Categorias dinâmicas

As categorias dinâmicas são repopuladas dinamicamente com base em uma função sempre que são abertas.

O Blockly oferece suporte a isso, permitindo que você associe uma categoria a uma função por uma chave de string registrada. A função precisa retornar uma definição do conteúdo de uma categoria, incluindo blocos, botões, rótulos etc. O conteúdo pode ser especificado como JSON ou XML, embora o JSON seja recomendado.

Além disso, a função é fornecida ao espaço de trabalho de destino como um parâmetro. Assim, os blocos na sua categoria dinâmica podem ser baseados no estado do espaço de trabalho.

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

Depois que as funções de categoria dinâmica forem associadas a uma chave de string (também conhecida como registrada), você poderá atribuir essa chave de string à propriedade custom da definição da categoria para torná-la dinâmica.

JSONXML

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

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

Categorias dinâmicas integradas

O Blockly oferece três categorias dinâmicas integradas.

• 'VARIABLE' cria uma categoria para variáveis não tipadas.
• 'VARIABLE_DYNAMIC' cria uma categoria para variáveiscom tipo. Ele tem botões para criar strings, números e cores.

• 'PROCEDURE' cria uma categoria para blocos de função.

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>

Observação: a palavra "procedure" é usada em toda a base de código do Blockly, mas a palavra "function" é mais compreensível para os estudantes. Lamentamos a incompatibilidade.