Categorías dinámicas

Las categorías dinámicas son categorías que se vuelven a propagar de forma dinámica en función de una función cada vez que se abren.

Blockly admite esto, ya que te permite asociar una categoría con una función a través de una clave de cadena registrada. La función debe mostrar una definición del contenido de una categoría (incluidos los bloques, los botones, las etiquetas, etcétera). El contenido se puede especificar como JSON o XML, aunque se recomienda JSON.

También ten en cuenta que la función se le proporciona el espacio de trabajo de destino como parámetro, por lo que los bloques de tu categoría dinámica pueden basarse en el estado del espacio de trabajo.

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

Después de que las funciones de categoría dinámica se asocien con una clave de cadena (también conocida como registrada), puedes asignar esta clave de cadena a la propiedad custom de tu definición de categoría para que la categoría sea dinámica.

JSON

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

XML

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

Categorías dinámicas integradas

Blockly proporciona tres categorías dinámicas integradas.

• 'VARIABLE' crea una categoría para las variables sin tipo.
• 'VARIABLE_DYNAMIC' crea una categoría para las variables con formato. Tiene botones para crear cadenas, números y colores.

• 'PROCEDURE' crea una categoría para los bloques de funciones.

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>

Nota: La palabra “procedimiento” se usa en toda la base de código de Blockly, pero los estudiantes comprenden mejor la palabra “función”. Lamentamos la discrepancia.