Blockly a été transféré à la Raspberry Pi Foundation le 10 novembre 2025 ! Consultez l'article de blog et les questions fréquentes.

Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Catégories dynamiques

Les catégories dynamiques sont des catégories qui sont remplies de manière dynamique en fonction d'une fonction chaque fois qu'elles sont ouvertes.

Blockly est compatible avec cette fonctionnalité, car il 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 reçoit 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.

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 array 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 les fonctions de catégorie dynamique associées à une clé de chaîne (c'est-à-dire enregistrées), vous pouvez attribuer cette clé de chaîne à la propriété custom de la définition de votre catégorie pour la rendre dynamique.

JSON

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

XML

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