Dynamische Kategorien

Dynamische Kategorien werden jedes Mal, wenn sie geöffnet werden, basierend auf einer Funktion dynamisch neu befü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 des Inhalts einer Kategorie zurückgeben (einschließlich Blöcke, Schaltflächen, Labels usw.). Der Inhalt kann als JSON oder XML angegeben werden. JSON wird empfohlen.

Beachten Sie auch, dass der Ziel-Arbeitsbereich als Parameter an die Funktion übergeben wird. Die Blöcke in Ihrer dynamischen Kategorie können also vom Status des Arbeitsbereichs abhängen.

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

Nachdem die Funktionen für dynamische Kategorien mit einem Stringschlüssel verknüpft (d. h. registriert) wurden, können Sie diesen Stringschlüssel dem Attribut 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 unbeschriebene Variablen.
  • Mit 'VARIABLE_DYNAMIC' wird eine Kategorie für typisierte Variablen erstellt. Es gibt Schaltflächen zum Erstellen von Strings, Zahlen und Farben.
  • Mit 'PROCEDURE' wird eine Kategorie für Funktionsblöcke erstellt.

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: Das Wort „Prozedur“ wird in der gesamten Blockly-Codebasis verwendet, aber das Wort „Funktion“ ist für Schüler und Studenten leichter verständlich. Wir entschuldigen uns für die Abweichung.