Catégories dynamiques

Les catégories dynamiques sont des catégories qui sont renseignées dynamiquement en fonction d'une fonction chaque fois qu'elles sont ouvertes.

Blockly vous permet d'associer une catégorie à une fonction via une clé de chaîne enregistrée. La fonction doit renvoyer une définition du contenu d'une catégorie (y compris les blocs, les boutons, les libellés, etc.). Le contenu peut être spécifié au format JSON ou XML, bien que le format JSON soit recommandé.

Notez également que la fonction fournit l'espace de travail cible en tant que paramètre. Les blocs de votre catégorie dynamique peuvent donc être basés sur l'état de l'espace de travail.

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

Une fois que les fonctions de catégorie dynamique sont associées à une clé de chaîne (également appelée "enregistrée"), vous pouvez attribuer cette clé de chaîne à la propriété custom de votre définition de catégorie pour la rendre dynamique.

JSONXML

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

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

Catégories dynamiques intégrées

Blockly fournit trois catégories dynamiques intégrées.

• 'VARIABLE' crée une catégorie pour les variables non typées.
• 'VARIABLE_DYNAMIC' crée une catégorie pour les variables typées. Il comporte des boutons permettant de créer des chaînes, des nombres et des couleurs.

• 'PROCEDURE' crée une catégorie pour les blocs de fonction.

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>

Remarque: Le mot "procédure" est utilisé dans l'ensemble du code de Blockly, mais le mot "fonction" s'est avéré plus compréhensible pour les élèves. Veuillez nous excuser pour cette erreur.