Categorie dinamiche

Le categorie dinamiche vengono ricompilate dinamicamente in base a una funzione ogni volta che vengono aperte.

Blockly supporta questa funzionalità consentendoti di associare una categoria a una funzione tramite una chiave di stringa registrata. La funzione deve restituire una definizione dei contenuti di una categoria (inclusi blocchi, pulsanti, etichette e così via). I contenuti possono essere specificati come JSON o XML, anche se è consigliabile utilizzare JSON.

Tieni inoltre presente che alla funzione viene fornito lo spazio di lavoro di destinazione come parametro, pertanto i blocchi della categoria dinamica possono essere basati sullo stato dello spazio di lavoro.

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

Dopo che le funzioni di categoria dinamica sono associate a una chiave di stringa (ovvero registrata), puoi assegnare questa chiave di stringa alla proprietà custom della definizione della categoria per renderla dinamica.

JSON

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

XML

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

Categorie dinamiche integrate

Blockly fornisce tre categorie dinamiche integrate.

• 'VARIABLE' crea una categoria per le variabili non tipizzate.
• 'VARIABLE_DYNAMIC' crea una categoria per le variabili con tipi. Dispone di pulsanti per creare stringhe, numeri e colori.

• 'PROCEDURE' crea una categoria per i blocchi di funzioni.

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 parola "procedura" viene utilizzata in tutto il codice di Blockly, ma la parola "funzione" è risultata più comprensibile per gli studenti. Ci scusiamo per la mancata corrispondenza.