Dynamische Kategorien

Dynamische Kategorien werden bei jedem Öffnen anhand einer Funktion dynamisch neu gefüllt.

Blockly unterstützt dies, indem Sie eine Kategorie über einen registrierten Stringschlüssel mit einer Funktion verknüpfen können. Die Funktion sollte eine Definition der Inhalte einer Kategorie zurückgeben (einschließlich Blöcken, Schaltflächen, Labels usw.). Die Inhalte können als JSON oder XML angegeben werden. JSON wird jedoch empfohlen.

Beachten Sie auch, dass der Funktion der Zielarbeitsbereich als Parameter übergeben wird, sodass die Blöcke in Ihrer dynamischen Kategorie auf dem Status des Arbeitsbereichs basieren können.

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

Nachdem die Funktionen für dynamische Kategorien mit einem Stringschlüssel verknüpft wurden (d. h. registriert wurden), können Sie diesen Stringschlüssel der Eigenschaft custom Ihrer Kategoriedefinition zuweisen, um die Kategorie dynamisch zu machen.

JSON

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

XML

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

Integrierte dynamische Kategorien

Blockly bietet drei integrierte dynamische Kategorien.

• 'VARIABLE' erstellt eine Kategorie für nicht typisierte Variablen.
• 'VARIABLE_DYNAMIC' erstellt eine Kategorie für typisierte Variablen. Sie enthält Schaltflächen zum Erstellen von Strings, Zahlen und Farben.

• 'PROCEDURE' erstellt eine Kategorie für Funktionsblöcke.

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>

Hinweis: In der gesamten Blockly-Codebasis wird das Wort „procedure“ verwendet. Das Wort „function“ ist für Schüler jedoch verständlicher. Wir entschuldigen uns für die Abweichung.