Zestaw narzędzi

W tym miejscu użytkownicy otrzymują bloki. Zwykle wyświetla się po jednej stronie obszaru roboczego. Czasem nie ma kategorii, a czasami nie.

Ta strona zawiera głównie informacje o tym, jak określić strukturę zestawu narzędzi (tj. jakie należą do niego kategorie i jakie bloki się w nich znajdują). Jeśli chcesz dowiedzieć się więcej o zmienianiu interfejsu zestawu narzędzi, zapoznaj się z instrukcjami dotyczącymi dostosowywania zestawu narzędzi Blockly i prezentacją o interfejsach API Zestawu narzędzi na rok 2021.

Formaty

Blockly pozwala określić strukturę zestawu narzędzi za pomocą kilku różnych formatów. Nowy zalecany format używa formatu JSON, a stary – XML.

Oto różne sposoby definiowania powyższego zestawu narzędzi:

JSON

Od wersji z września 2020 r. zestawy narzędzi można definiować w formacie JSON.

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>

Ciąg XML

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

Kategorie

Bloki w zestawie narzędzi można uporządkować według kategorii.

Oto jak można zdefiniować powyższe zestaw narzędzi, dzieląc go na 2 kategorie („Kontrola” i „Logiczna”), z których każda zawiera bloki:

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>

Zagnieżdżone kategorie

Kategorie mogą być zagnieżdżone w innych kategoriach. Oto dwie kategorie najwyższego poziomu – „Podstawowe” i „Niestandardowe”. Druga kategoria ma dwie podkategorie, z których każda zawiera bloki:

Pamiętaj, że kategoria może zawierać zarówno podkategorie, jak i blokady. W powyższym przykładzie kategoria „Niestandardowe” składa się z dwóch podkategorii („Przenieś” i „Zawróć”) oraz bloku własnego („początek”).

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>

Kategorie dynamiczne

Kategorie dynamiczne to kategorie, które są wypełniane dynamicznie na podstawie funkcji przy każdym otwarciu.

Blockly obsługuje to, co umożliwia powiązanie kategorii z funkcją za pomocą zarejestrowanego klucza ciągu. Ta funkcja powinna zwracać definicję zawartości kategorii (w tym bloków, przycisków, etykiet itp.). Możesz ją określić w formacie JSON lub XML, ale zalecamy użycie formatu JSON.

Pamiętaj też, że funkcja ta jest udostępniana jako parametr docelowego obszaru roboczego, więc blokady w kategorii dynamicznej mogą być uzależnione od stanu obszaru roboczego.

JSON

Od wersji z września 2021 r. możesz określać stan blokad bez używania 'blockxml'.

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

Stary plik JSON

Przed wdrożeniem wersji dla września 2021 r. do określania stanu blokad trzeba było używać właściwości 'blockxml'.

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

Gdy funkcje kategorii dynamicznej zostaną powiązane z kluczem ciągu znaków (czyli zarejestrowanym), możesz przypisać ten klucz ciągu do właściwości custom definicji kategorii, aby kategoria była dynamiczna.

JSON

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

XML

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

Wbudowane kategorie dynamiczne

W blockly masz do dyspozycji 3 wbudowane kategorie dynamiczne.

  • 'VARIABLE' tworzy kategorię dla nietypowych zmiennych.
  • 'VARIABLE_DYNAMIC' tworzy kategorię dla zmiennych opisanych. Są w nim przyciski do tworzenia ciągów znaków, cyfr i kolorów.

  • 'PROCEDURE' tworzy kategorię bloków funkcji.

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>

Uwaga: słowo „procedura” jest używane w całej bazie kodu Blockly, ale okazało się, że słowo „funkcja” jest dla uczniów bardziej zrozumiałe. Przepraszamy za tę niezgodność.

Wyłączam

Gdy kategoria jest wyłączona, użytkownik nie może jej otworzyć i jest ona pomijana podczas nawigacji za pomocą klawiatury.

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

Gdy kategoria jest wyłączona, do elementu DOM dodawana jest właściwość 'disabled', która umożliwia kontrolowanie wyglądu wyłączonej kategorii.

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

Ukrywam

Ukryta kategoria nie będzie widoczna jako część zestawu narzędzi. Ukryte kategorie można później wyświetlić za pomocą JavaScriptu.

JSON

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

XML

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

JavaScript

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

Rozwijam

Dotyczy to tylko kategorii, które zawierają inne zagnieżdżone kategorie.

W rozwiniętej kategorii widoczne są jej podkategorie. Domyślnie kategorie zagnieżdżone są zwinięte – trzeba je kliknąć, aby je rozwinąć.

JSON

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

XML

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

Styl

Blockly udostępnia domyślny interfejs kategorii wraz z podstawowymi opcjami stylu. Jeśli szukasz informacji o bardziej zaawansowanym tworzeniu stylu i konfiguracji interfejsu użytkownika, zapoznaj się z ćwiczeniami z programowania w zestawie narzędzi Blockly i prezentacją o interfejsach API z Zestawu narzędzi na rok 2021.

Motywy

Motywy umożliwiają określenie wszystkich kolorów obszaru roboczego jednocześnie, w tym kolorów kategorii.

Aby ich używać, musisz powiązać kategorię z konkretnym stylem kategorii:

JSON

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

XML

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

Kolory

Możesz także określić kolor bezpośrednio, ale nie jest to zalecane. Kolor jest liczbą w postaci ciągu znaków (0–360) określającą barwę. Zwróć uwagę na brytyjską pisownię.

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>

Pamiętaj, że możesz też używać lokalnych odniesień do kolorów.

CSS kategorii

Jeśli chcesz mieć większe możliwości dostosowywania, Blockly umożliwia też określenie klas CSS dla różnych elementów domyślnego interfejsu użytkownika. Później możesz je dostosować za pomocą CSS.

Do tych typów elementów można stosować klasy CSS:

  • container – klasa nadrzędnego elementu div danej kategorii. Wartość domyślna blocklyToolboxCategory.
  • wiersz – klasa elementu div zawierającego etykietę kategorii i ikonę. Wartość domyślna blocklyTreeRow.
  • ikona – klasa dla ikony kategorii. Domyślnie blocklyTreeIcon.
  • label – klasa etykiety kategorii. Domyślnie blocklyTreeLabel.
  • selected – zajęcia, które zostaną dodane do kategorii po ich wybraniu. Wartość domyślna blocklyTreeSelected.
  • openicon – klasa dodana do ikony, gdy kategoria ma zagnieżdżone kategorie i jest otwarta. Domyślnie blocklyTreeIconOpen.
  • closedicon – klasa jest dodawana do ikony, gdy kategoria ma zagnieżdżone kategorie i jest zamknięta. Domyślnie blocklyTreeIconClosed.

Oto sposób określenia klas przy użyciu dowolnego z tych formatów:

JSON

Ustaw klasę CSS określonego typu elementu przy użyciu właściwości cssConfig.

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

XML

Ustaw klasę CSS określonego typu elementu, dodając na początku „css-”.

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

Uzyskiwanie dostępu

Dostęp do kategorii możesz uzyskać automatycznie na 2 sposoby. Możesz ją otworzyć za pomocą indeksu (gdzie 0 oznacza najwyższą kategorię):

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

Lub według identyfikatora:

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

Gdzie identyfikator jest podany w definicji zestawu narzędzi:

JSON

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

XML

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

Gotowe bloki

Definicja zestawu narzędzi może zawierać bloki, w których pola są ustawione na wartość domyślną, lub bloki, które są już ze sobą połączone.

Oto cztery bloki:

  1. Prosty blok logic_boolean bez gotowych wartości:
  2. Blok math_number, który został zmodyfikowany tak, aby wyświetlał liczbę 42 zamiast domyślnej wartości 0:
  3. Blok controls_for, który jest połączony z 3 blokami math_number:
  4. Blok math_arithmetic, do którego są połączone 2 bloki cieni math_number:

Oto definicja z zestawu narzędzi zawierająca te 4 bloki:

JSON

Od wersji z września 2021 r. możesz określać stan blokad bez użycia właściwości 'blockxml'.

{
  "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
            }
          }
        }
      }
    },
  ]
}

Stary plik JSON

Przed wdrożeniem wersji dla września 2021 r. do określania stanu blokad trzeba było używać właściwości 'blockxml'.

{
  "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>

Napisanie tych definicji ręcznie może być... kłopotliwe. Zamiast tego możesz wczytać bloki do obszaru roboczego, a potem uruchomić poniższy kod, aby uzyskać definicje. Te wywołania działają, ponieważ zestaw narzędzi wykorzystuje ten sam format bloków co system serializacji.

JSON

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

XML

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

Możesz też usunąć właściwości x, y i id, ponieważ są one ignorowane przez zestaw narzędzi.

Bloki cieni

Bloki cienia to zastępcze bloki, które pełnią kilka funkcji:

  • Wskazują one wartości domyślne bloku nadrzędnego.
  • Pozwalają użytkownikom wpisywać wartości bezpośrednio bez konieczności pobierania bloku liczb czy ciągów znaków.
  • W przeciwieństwie do zwykłych bloków są one zastępowane, gdy użytkownik upuszcza na nie blok.
  • Informują użytkownika o oczekiwanym typie wartości.

Wyłączone blokady

Wyłączonych bloków nie można przeciągać z przybornika. Blokady można wyłączać pojedynczo za pomocą opcjonalnej właściwości disabled.

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>

Możesz też automatycznie wyłączyć lub włączyć blokadę za pomocą elementu setEnabled.

Pola zmiennych

Pola zmiennych mogą być określone inaczej, gdy znajdują się w zestawie narzędzi, a innym, gdy są po prostu zserializowane.

Gdy pola zmiennych są zwykle zserializowane w formacie JSON, zawierają tylko identyfikator zmiennej, którą reprezentują, ponieważ nazwa i typ zmiennej są szeregowane oddzielnie. Zestawy narzędzi nie zawierają tych informacji, więc trzeba je umieścić bezpośrednio w polu zmiennych.

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

Separatory

Dodanie separatora między dowolnymi 2 kategoriami spowoduje utworzenie linii i dodatkowego odstępu między nimi.

Możesz zmienić klasę separatora w definicji zestawu narzędzi JSON lub XML.

JSON

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

XML

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

Dodanie separatora między dowolnymi 2 bryłami spowoduje utworzenie przerwy między nimi. Domyślnie każdy blok jest oddzielony od dolnego sąsiadu o 24 piksele. Ten podział można zmienić za pomocą atrybutu „przerwa”, który zastąpi domyślną lukę.

Dzięki temu możesz tworzyć logiczne grupy bloków w zestawie narzędzi.

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>

Przyciski i etykiety

Wszędzie tam, gdzie można umieścić bryłę w zestawie narzędzi, można umieścić przycisk lub etykietę.

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>

Możesz określić nazwę klasy CSS, która będzie stosowana do przycisku lub etykiety. W powyższym przykładzie pierwsza etykieta używa stylu niestandardowego, a druga – stylu domyślnego.

Przyciski powinny mieć funkcje wywołania zwrotnego, a etykiety nie. Aby ustawić wywołanie zwrotne po kliknięciu danego przycisku,

yourWorkspace.registerButtonCallback(yourCallbackKey, yourFunction).

Twoja funkcja powinna akceptować jako argument kliknięty przycisk. Dobrym przykładem przycisku z wywołaniem zwrotnym jest przycisk „Utwórz zmienną...” w kategorii zmiennej.

Zmiana zestawu narzędzi

Aplikacja może w każdej chwili zmienić bloki dostępne w zestawie narzędzi za pomocą jednego wywołania funkcji:

workspace.updateToolbox(newTree);

Tak jak podczas początkowej konfiguracji, newTree może być drzewem węzłów, reprezentacją ciągu znaków lub obiektem JSON. Jedynym ograniczeniem jest to, że nie można zmienić trybu. Oznacza to, że jeśli we wstępnie zdefiniowanym zestawie narzędzi były kategorie, nowe narzędzia też muszą mieć kategorie (chociaż mogą się one zmieniać). I podobnie, jeśli wstępnie zdefiniowany zestaw narzędzi nie miał żadnych kategorii, to nowy zestaw może go w ogóle nie mieć.

Zawartość pojedynczej kategorii można aktualizować za pomocą:

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

Gdzie flyoutContents może to być lista bloków zdefiniowanych w formacie JSON, drzewo węzłów lub reprezentacja ciągu znaków.

Pamiętaj, że obecnie zaktualizowanie zestawu narzędzi powoduje kilka drobnych zmian w interfejsie użytkownika:

  • W przypadku zestawu narzędzi bez kategorii wszystkie pola zmienione przez użytkownika (takie jak menu) zostaną przywrócone do wartości domyślnych.

Oto prezentacja drzewa z kategoriami i grupami bloków.