Abbildung: Toolbox

In der Toolbox erhalten Nutzende Blöcke. Normalerweise wird sie auf einer Seite des Arbeitsbereichs angezeigt. Manchmal gibt es Kategorien, manchmal aber auch nicht.

Auf dieser Seite geht es hauptsächlich darum, wie Sie die Struktur Ihrer Toolbox festlegen (d.h. welche Kategorien sie hat und welche Blöcke sie enthalten). Weitere Informationen zum Ändern der UI deiner Toolbox findest du im Codelab zum Anpassen einer Blockly-Toolbox und im Vortrag zu den Toolbox-APIs 2021.

Formate

Mit Blockly können Sie die Struktur Ihrer Toolbox mithilfe verschiedener Formate angeben. Das neue empfohlene Format verwendet JSON, das alte Format XML.

Sie können die obige Toolbox folgendermaßen angeben:

JSON

Ab der Version September 2020 können Toolboxen mit JSON definiert werden.

var toolbox = {
    "kind": "flyoutToolbox",
    "contents": [
      {
        "kind": "block",
        "type": "controls_if"
      },
      {
        "kind": "block",
        "type": "controls_whileUntil"
      }
    ]
  };
var workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});

XML

<xml id="toolbox" style="display: none">
  <block type="controls_if"></block>
  <block type="controls_whileUntil"></block>
</xml>
<script>
  var workspace = Blockly.inject('blocklyDiv',
      {toolbox: document.getElementById('toolbox')});
</script>

XML-String

var toolbox = '<xml>' +
    '<block type="controls_if"></block>' +
    '<block type="controls_whileUntil"></block>' +
    '</xml>';
var workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});

Kategorien

Die Blöcke in der Toolbox können in Kategorien organisiert sein.

Die oben dargestellte Toolbox hat zwei Kategorien („Steuerung“ und „Logik“), die jeweils Blöcke enthalten und so definiert werden können:

JSON

{
  "kind": "categoryToolbox",
  "contents": [
    {
      "kind": "category",
      "name": "Control",
      "contents": [
        {
          "kind": "block",
          "type": "controls_if"
        },
      ]
    },
    {
      "kind": "category",
      "name": "Logic",
      "contents": [
        {
          "kind": "block",
          "type": "logic_compare"
        },
        {
          "kind": "block",
          "type": "logic_operation"
        },
        {
          "kind": "block",
          "type": "logic_boolean"
        }
      ]
    }
  ]
}

XML

<xml id="toolbox" style="display: none">
  <category name="Control">
    <block type="controls_if"></block>
  <category name="Logic">
    <block type="logic_compare"></block>
    <block type="logic_operation"></block>
    <block type="logic_boolean"></block>
  </category>
</xml>

Verschachtelte Kategorien

Kategorien können innerhalb anderer Kategorien verschachtelt sein. Dies sind zwei Kategorien der obersten Ebene („Kern“ und „Benutzerdefiniert“). Die zweite enthält zwei Unterkategorien, von denen jede Blöcke enthält:

Eine Kategorie kann sowohl Unterkategorien als auch Blöcke enthalten. Im obigen Beispiel hat "Benutzerdefiniert" zwei Unterkategorien ("Verschieben" und "Abbiegen") sowie einen eigenen Block ("Start").

JSON

{
  "kind": "categoryToolbox",
  "contents": [
    {
      "kind": "category",
      "name": "Core",
      "contents": [
        {
          "kind": "block",
          "type": "controls_if"
        },
        {
          "kind": "block",
          "type": "logic_compare"
        },
      ]
    },
    {
      "kind": "category",
      "name": "Custom",
      "contents": [
        {
          "kind": "block",
          "type": "start"
        },
        {
          "kind": "category",
          "name": "Move",
          "contents": [
            {
              "kind": "block",
              "type": "move_forward"
            }
          ]
        },
        {
          "kind": "category",
          "name": "Turn",
          "contents": [
            {
              "kind": "block",
              "type": "turn_left"
            }
          ]
        }
      ]
    }
  ]
}

XML

<xml id="toolbox" style="display: none">
  <category name="Core">
    <block type="controls_if"></block>
    <block type="logic_compare"></block>
  </category>
  <category name="Custom">
    <block type="start"></block>
    <category name="Move">
      <block type="move_forward"></block>
    </category>
    <category name="Turn">
      <block type="turn_left"></block>
    </category>
  </category>
</xml>

Dynamische Kategorien

Dynamische Kategorien sind Kategorien, die basierend auf einer Funktion bei jedem Öffnen dynamisch neu gefüllt werden.

Blockly unterstützt dies durch die Möglichkeit, eine Kategorie über einen registrierten Stringschlüssel mit einer Funktion zu verknüpfen. Die Funktion sollte eine Definition des Inhalts einer Kategorie zurückgeben (einschließlich Blöcken, Schaltflächen, Labels usw.). Der Inhalt kann als JSON oder XML angegeben werden, empfohlen wird jedoch JSON.

Der Funktion wird der Zielarbeitsbereich als Parameter bereitgestellt, sodass die Blöcke in Ihrer dynamischen Kategorie auf dem Status des Arbeitsbereichs basieren können.

JSON

Ab dem Release vom September 2021 können Sie den Status von Blockierungen ohne 'blockxml' angeben.

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

Altes JSON-Format

Vor der Version im September 2021 mussten Sie das Attribut 'blockxml' verwenden, um den Status von Blöcken anzugeben.

// 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', // Type is optional if you provide blockxml
      'blockxml': '<block type="colour_picker">' +
          '<field name="COLOUR">' + colourList[i] + '</field>' +
          '</block>'
    });
  }
  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 dynamischen Kategoriefunktionen mit einem Stringschlüssel (auch registriert) verknüpft sind, 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 nicht typisierte Variablen.
  • 'VARIABLE_DYNAMIC' erstellt eine Kategorie für typisierte Variablen. Es enthält Schaltflächen zum Erstellen von Zeichenfolgen, 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: Das Wort „Prozedur“ wird in der gesamten Blockly-Codebasis verwendet, aber das Wort „Funktion“ ist für Studenten besser verständlich. Wir entschuldigen uns für die Abweichung.

Wird deaktiviert

Nutzer können die Kategorie nicht öffnen, wenn sie deaktiviert ist. Sie wird bei der Tastaturnavigation übersprungen.

var category = toolbox.getToolboxItems()[0];
category.setDisabled('true');

Wenn eine Kategorie deaktiviert ist, wird dem DOM-Element die Eigenschaft 'disabled' hinzugefügt, mit der Sie das Aussehen einer deaktivierten Kategorie steuern können.

.blocklyToolboxCategory[disabled="true"] {
  opacity: .5;
}

Wird ausgeblendet

Eine ausgeblendete Kategorie wird nicht als Teil der Toolbox angezeigt. Ausgeblendete Kategorien können später über JavaScript angezeigt werden.

JSON

{
  "kind": "category",
  "name": "...",
  "hidden": "true"
}

XML

<category name="..." hidden="true"></category>

JavaScript

var category = toolbox.getToolboxItems()[0];
category.hide();
// etc...
category.show();

Wird maximiert

Dies gilt nur für Kategorien, die andere verschachtelte Kategorien enthalten.

Bei einer maximierten Kategorie werden die zugehörigen Unterkategorien angezeigt. Standardmäßig sind verschachtelte Kategorien minimiert und müssen angeklickt werden, um sie zu maximieren.

JSON

{
  "kind": "category",
  "name": "...",
  "expanded": "true"
}

XML

<category name="..." expanded="true"></sep>

Stile

Blockly bietet eine Standardbenutzeroberfläche für Kategorien, die auch einige grundlegende Optionen für die Gestaltung umfasst. Informationen zum erweiterten Gestalten und Konfigurieren der UI findest du im Codelab zum Anpassen einer Blockly Toolbox und im Vortrag zu den Toolbox APIs 2021.

Designs

Mit Designs können Sie alle Farben des Arbeitsbereichs auf einmal angeben, einschließlich der Farben unserer Kategorien.

Um sie verwenden zu können, müssen Sie Ihre Kategorie mit einem bestimmten Kategoriestil verknüpfen:

JSON

{
  "kind": "category",
  "name": "Logic",
  "categorystyle": "logic_category"
}

XML

<category name="Logic" categorystyle="logic_category"></category>

Farben

Sie können die Farbe auch direkt angeben. Dies wird jedoch nicht empfohlen. Die Farbe ist eine Zeichenfolge (0–360), die den Farbton angibt. Beachten Sie die britische Schreibweise.

JSON

{
  "contents": [
    {
      "kind": "category",
      "name": "Logic",
      "colour": "210"
    },
    {
      "kind": "category",
      "name": "Loops",
      "colour": "120"
    }
  ]
}

XML

<xml id="toolbox" style="display: none">
  <category name="Logic" colour="210">...</category>
  <category name="Loops" colour="120">...</category>
  <category name="Math" colour="230">...</category>
  <category name="Colour" colour="20">...</category>
  <category name="Variables" colour="330" custom="VARIABLE"></category>
  <category name="Functions" colour="290" custom="PROCEDURE"></category>
</xml>

Wir unterstützen auch die Verwendung lokalisierbarer Farbreferenzen.

CSS-Kategorie

Wenn Sie eine leistungsfähigere Anpassung wünschen, können Sie mit Blockly auch CSS-Klassen für verschiedene Elemente der Standard-UI angeben. Diese können Sie dann mit CSS gestalten.

Auf die folgenden Elementtypen können CSS-Klassen angewendet werden:

  • container - Die Klasse des übergeordneten div-Elements der Kategorie. Standard-blocklyToolboxCategory.
  • row - die Klasse für das div-Element, das Kategorielabel und -symbol enthält. Standard-blocklyTreeRow.
  • icon - Die Klasse für das Kategoriesymbol. Standard blocklyTreeIcon.
  • label - Die Klasse für das Kategorie-Label. Standard blocklyTreeLabel.
  • selected - Der Kurs, der der Kategorie hinzugefügt wird, wenn er ausgewählt wird. Standard-blocklyTreeSelected.
  • openicon – Klasse, die einem Symbol hinzugefügt wird, wenn die Kategorie verschachtelte Kategorien hat und offen ist. Standard blocklyTreeIconOpen.
  • Closedicon – Klasse, die einem Symbol hinzugefügt wird, wenn die Kategorie verschachtelte Kategorien hat und geschlossen ist. Standard blocklyTreeIconClosed.

Und so geben Sie die Klassen in beiden Formaten an:

JSON

Legen Sie die CSS-Klasse eines bestimmten Elementtyps mithilfe des Attributs „cssConfig“ fest.

{
  "kind": "category",
  "name": "...",
  "cssConfig": {
    "container": "yourClassName"
  }
}

XML

Sie können die CSS-Klasse eines bestimmten Elementtyps festlegen, indem Sie ihr "css-" voranstellen.

<category name="..." css-container="yourClassName"></category>

Zugriff

Es gibt zwei Möglichkeiten, programmatisch auf eine Kategorie zuzugreifen. Sie können entweder über den Index (wobei 0 die oberste Kategorie ist) darauf zugreifen:

var category = toolbox.getToolboxItems()[0];

Oder nach ID:

var category = toolbox.getToolboxItemById('categoryId');

Dabei wird die ID in der Toolbox-Definition angegeben:

JSON

{
  "kind": "category",
  "name": "...",
  "toolboxitemid": "categoryId"
}

XML

<category name="..." toolboxitemid="categoryId"></category>

Voreingestellte Blöcke

Die Toolbox-Definition kann Blöcke mit Feldern enthalten, die auf einen Standardwert gesetzt sind, oder Blöcke enthalten, die bereits miteinander verbunden sind.

Hier sind vier Blöcke:

  1. Ein einfacher logic_boolean-Block ohne voreingestellte Werte:
  2. Ein math_number-Block, der geändert wurde, um die Zahl 42 anstelle des Standardwerts 0 anzuzeigen:
  3. Ein controls_for-Block, mit dem drei math_number-Blöcke verbunden sind:
  4. Ein math_arithmetic-Block, mit dem zwei math_number-Schattenblöcke verbunden sind:

Hier ist eine Toolbox-Definition, die diese vier Blöcke enthält:

JSON

Ab dem Release vom September 2021 können Sie den Status von Blöcken ohne 'blockxml' angeben.

{
  "kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type": "logic_boolean"
    },
    {
      "kind": "block",
      "type": "math_number",
      "fields": {
        "NUM": 42
      }
    },
    {
      "kind": "block",
      "type": "controls_for",
      "inputs": {
        "FROM": {
          "block": {
            "type": "math_number",
            "fields": {
              "NUM": 1
            }
          }
        },
        "TO": {
          "block": {
            "type": "math_number",
            "fields": {
              "NUM": 10
            }
          }
        },
        "BY": {
          "block": {
            "type": "math_number",
            "fields": {
              "NUM": 1
            }
          }
        },
      }
    },
    {
      "kind": "block",
      "type": "math_arithmetic",
      "fields": {
        "OP": "ADD"
      },
      "inputs": {
        "A": {
          "shadow": {
            "type": "math_number",
            "fields": {
              "NUM": 1
            }
          }
        },
        "B": {
          "shadow": {
            "type": "math_number",
            "fields": {
              "NUM": 1
            }
          }
        }
      }
    },
  ]
}

Altes JSON-Format

Vor der Version im September 2021 mussten Sie das Attribut 'blockxml' verwenden, um den Status von Blöcken anzugeben.

{
  "kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type": "logic_boolean"
    },
    {
      "kind": "block",
      "blockxml":
          '<block type="math_number">' +
          '<field name="NUM">42</field>' +
          '</block>'
    },
    {
      "kind": "block",
      "blockxml":
          '<block type="controls_for">' +
            '<value name="FROM">' +
              '<block type="math_number">' +
                '<field name="NUM">1</field>' +
              '</block>' +
            '</value>' +
            '<value name="TO">' +
              '<block type="math_number">' +
                '<field name="NUM">10</field>' +
              '</block>' +
            '</value>' +
            '<value name="BY">' +
              '<block type="math_number">' +
                '<field name="NUM">1</field>' +
              '</block>' +
            '</value>' +
          '</block>'
    },
    {
      "kind": "block",
      "blockxml":
          '<block type="math_arithmetic">' +
            '<field name="OP">ADD</field>' +
            '<value name="A">' +
              '<shadow type="math_number">' +
                '<field name="NUM">1</field>' +
              '</shadow>' +
            '</value>' +
            '<value name="B">' +
              '<shadow type="math_number">' +
                '<field name="NUM">1</field>' +
              '</shadow>' +
            '</value>' +
          '</block>'
    },
  ]
}

XML

<xml id="toolbox" style="display: none">
  <block type="logic_boolean"></block>

  <block type="math_number">
    <field name="NUM">42</field>
  </block>

  <block type="controls_for">
    <value name="FROM">
      <block type="math_number">
        <field name="NUM">1</field>
      </block>
    </value>
    <value name="TO">
      <block type="math_number">
        <field name="NUM">10</field>
      </block>
    </value>
    <value name="BY">
      <block type="math_number">
        <field name="NUM">1</field>
      </block>
    </value>
  </block>

  <block type="math_arithmetic">
    <field name="OP">ADD</field>
    <value name="A">
      <shadow type="math_number">
        <field name="NUM">1</field>
      </shadow>
    </value>
    <value name="B">
      <shadow type="math_number">
        <field name="NUM">1</field>
      </shadow>
    </value>
  </block>
</xml>

Diese Definitionen von Hand aufzuschreiben, kann nervig sein. Stattdessen können Sie Ihre Blöcke in einen Arbeitsbereich laden und dann den folgenden Code ausführen, um die Definitionen zu erhalten. Diese Aufrufe funktionieren, da die Toolbox dasselbe Format für Blöcke wie das Serialisierungssystem verwendet.

JSON

console.log(Blockly.serialization.workspaces.save(Blockly.getMainWorkspace()));

XML

console.log(Blockly.Xml.workspaceToDom(Blockly.getMainWorkspace()));

Sie können auch die Attribute x, y und id entfernen, da diese von der Toolbox ignoriert werden.

Schattenblöcke

Schattenblöcke sind Platzhalterblöcke, die verschiedene Funktionen erfüllen:

  • Sie geben die Standardwerte für den übergeordneten Block an.
  • Damit können Nutzer Werte direkt eingeben, ohne eine Nummer oder einen Zeichenfolgenblock abrufen zu müssen.
  • Im Gegensatz zu einem normalen Block werden sie ersetzt, wenn der Nutzer einen Block über sie legt.
  • Sie informieren die Nutzenden über den erwarteten Werttyp.

Deaktivierte Blockierungen

Deaktivierte Blöcke können nicht aus der Toolbox gezogen werden. Blockierungen können mit dem optionalen Attribut disabled einzeln deaktiviert werden.

JSON

{
  "kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type":"math_number"
    },
    {
      "kind": "block",
      "type": "math_arithmetic"
    },
    {
      "kind": "block",
      "type": "math_single",
      "disabled": "true"
    }
  ]
}

XML

<xml id="toolbox" style="display: none">
  <block type="math_number"></block>
  <block type="math_arithmetic"></block>
  <block type="math_single" disabled="true"></block>
</xml>

Mit setEnabled können Sie eine Blockierung auch programmatisch deaktivieren oder aktivieren.

Variablenfelder

Variablenfelder müssen möglicherweise anders angegeben werden, wenn sie sich in einer Toolbox befinden, und nicht, wenn sie einfach serialisiert sind.

Insbesondere wenn Variablenfelder normalerweise in JSON serialisiert werden, enthalten sie nur die ID der Variablen, die sie darstellen, da Name und Typ der Variablen separat serialisiert werden. Toolboxes enthalten diese Informationen jedoch nicht, sodass sie direkt in das Variablenfeld eingefügt werden müssen.

{
  "kind": "flyoutToolbox",
  "content": [
    {
      "type": "controls_for",
      "fields": {
        "VAR": {
          "name": "index",
          "type": "Number"
        }
      }
    }
  ]
}

Trennzeichen

Wenn Sie ein Trennzeichen zwischen zwei Kategorien hinzufügen, wird eine Linie und ein zusätzlicher Abstand zwischen den beiden Kategorien erstellt.

Sie können die Klasse für das Trennzeichen in Ihrer JSON- oder XML-Toolbox-Definition ändern.

JSON

{
  "kind": "sep",
  "cssConfig": {
    "container": "yourClassName"
  }
}

XML

<sep css-container="yourClassName"></sep>

Wenn Sie ein Trennzeichen zwischen zwei Blöcken hinzufügen, entsteht eine Lücke zwischen den Blöcken. Standardmäßig ist jeder Block von seinem unteren Nachbarn um 24 Pixel getrennt. Diese Trennung kann mithilfe des Attributs „Lücke“ geändert werden, das die Standardlücke ersetzt.

So können Sie logische Gruppen von Blöcken in der Toolbox erstellen.

JSON

{
  "kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type":"math_number"
    },
    {
      "kind": "sep",
      "gap": "32"
    },
    {
      "kind": "block",
      "blockxml": "<block type='math_arithmetic'><field name='OP'>ADD</field></block>"
    },
    {
      "kind": "sep",
      "gap": "8"
    },
    {
      "kind": "block",
      "blockxml": "<block type='math_arithmetic'><field name='OP'>MINUS</field></block>"
    }
  ]
}

XML

<xml id="toolbox" style="display: none">
  <block type="math_number"></block>
  <sep gap="32"></sep>
  <block type="math_arithmetic">
    <field name="OP">ADD</field>
  </block>
  <sep gap="8"></sep>
  <block type="math_arithmetic">
    <field name="OP">MINUS</field>
  </block>
</xml>

Schaltflächen und Beschriftungen

Sie können überall, wo Sie einen Block in der Toolbox platzieren, eine Schaltfläche oder ein Label einfügen.

JSON

{
  "kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type":"logic_operation"
    },
    {
      "kind": "label",
      "text": "A label",
      "web-class": "myLabelStyle"
    },
    {
      "kind": "label",
      "text": "Another label"
    },
    {
      "kind": "block",
      "type": "logic_negate"
    },
    {
      "kind": "button",
      "text": "A button",
      "callbackKey": "myFirstButtonPressed"
    },
    {
      "kind": "block",
      "type": "logic_boolean"
    }
  ]
}

XML

<xml id="toolbox" style="display: none">
  <block type="logic_operation"></block>
  <label text="A label" web-class="myLabelStyle"></label>
  <label text="Another label"></label>
  <block type="logic_negate"></block>
  <button text="A button" callbackKey="myFirstButtonPressed"></button>
  <block type="logic_boolean"></block>
</xml>

    <style>
    .myLabelStyle>.blocklyFlyoutLabelText {
      font-style: italic;
      fill: green;
    }
    </style>

Sie können einen CSS-Klassennamen angeben, der auf Ihre Schaltfläche oder Ihr Label angewendet werden soll. Im obigen Beispiel verwendet das erste Label einen benutzerdefinierten Stil und das zweite Label den Standardstil.

Schaltflächen sollten Callback-Funktionen haben, Labels nicht. Um den Callback für einen bestimmten Schaltflächenklick festzulegen,

yourWorkspace.registerButtonCallback(yourCallbackKey, yourFunction).

Ihre Funktion sollte die Schaltfläche, auf die geklickt wurde, als Argument akzeptieren. Die Schaltfläche „Variable erstellen...“ in der Variablenkategorie ist ein gutes Beispiel für eine Schaltfläche mit einem Callback.

Die Toolbox ändern

Die Anwendung kann die in der Toolbox verfügbaren Blöcke jederzeit mit einem einzigen Funktionsaufruf ändern:

workspace.updateToolbox(newTree);

Wie bei der Erstkonfiguration kann newTree entweder eine Baumstruktur von Knoten, eine Stringdarstellung oder ein JSON-Objekt sein. Die einzige Einschränkung besteht darin, dass der Modus nicht geändert werden kann. Wenn also in der ursprünglich definierten Toolbox Kategorien vorhanden sind, muss die neue Toolbox auch Kategorien enthalten. Die Kategorien können sich jedoch ändern. Hatte die anfänglich definierte Toolbox keine Kategorien, kann die neue Toolbox ebenfalls keine Kategorien enthalten.

So können Sie den Inhalt einer einzelnen Kategorie aktualisieren:

var category = workspace.getToolbox().getToolboxItems()[0];
category.updateFlyoutContents(flyoutContents);

Dabei kann flyoutContents eine Liste von Blöcken sein, die mithilfe von JSON definiert wurden, eine Baumstruktur von Knoten oder eine Stringdarstellung.

Beachten Sie, dass die Aktualisierung der Toolbox zu einigen kleinen Zurücksetzungen der Benutzeroberfläche führt:

  • In einer Toolbox ohne Kategorien werden alle vom Nutzer geänderten Felder (z. B. ein Drop-down-Menü) auf die Standardeinstellungen zurückgesetzt.

Hier sehen Sie eine Live-Demo einer Baumstruktur mit Kategorien und Blockgruppen.