جعبه ابزار

جعبه ابزار جایی است که کاربران بلوک ها را در آن دریافت می کنند. معمولاً در یک طرف فضای کاری نمایش داده می شود. گاهی دسته بندی دارد و گاهی ندارد.

این صفحه عمدتاً بر چگونگی تعیین ساختار جعبه ابزار شما (یعنی چه دسته‌هایی دارد و چه بلوک‌هایی را شامل می‌شود) تمرکز می‌کند. اگر می‌خواهید جزئیات بیشتری در مورد نحوه تغییر رابط کاربری جعبه ابزار خود داشته باشید، به بخش Customizing a Blockly toolbox و گفتگوی APIs Toolbox 2021 مراجعه کنید.

فرمت ها

Blockly به شما امکان می دهد ساختار جعبه ابزار خود را با استفاده از چند فرمت مختلف مشخص کنید. فرمت پیشنهادی جدید از JSON و فرمت قدیمی از XML استفاده می کند.

در اینجا روش های مختلفی وجود دارد که می توانید جعبه ابزار فوق را مشخص کنید:

JSON

از سپتامبر 2020، جعبه ابزارها را می توان با استفاده از 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>

رشته XML

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

دسته بندی ها

بلوک‌های جعبه ابزار ممکن است در دسته‌هایی سازماندهی شوند.

در اینجا روش هایی وجود دارد که می توانید جعبه ابزار فوق را تعریف کنید، که دارای دو دسته ("کنترل" و "منطق") است که هر کدام شامل بلوک ها هستند:

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>

دسته های تو در تو

دسته ها ممکن است در دسته های دیگر تودرتو باشند. در اینجا دو دسته سطح بالا ("Core" و "Custom") وجود دارد که دسته دوم شامل دو زیرمجموعه است که هر کدام شامل بلوک هستند:

توجه داشته باشید که این امکان وجود دارد که یک دسته دارای هر دو زیر شاخه و بلوک باشد. در مثال بالا، "Custom" دارای دو زیرمجموعه ("Move" و "Turn") و همچنین یک بلوک مخصوص به خود ("شروع") است.

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>

دسته بندی های پویا

دسته‌های پویا دسته‌هایی هستند که هر بار که باز می‌شوند، بر اساس یک تابع به‌صورت پویا مجدداً جمعیت می‌شوند.

Blockly از این امر پشتیبانی می کند و به شما امکان می دهد یک دسته را با یک تابع از طریق یک کلید رشته ثبت شده مرتبط کنید. تابع باید تعریفی از محتویات یک دسته (شامل بلوک ها، دکمه ها، برچسب ها و غیره) ارائه دهد. محتویات را می توان به صورت JSON یا XML مشخص کرد، اگرچه JSON توصیه می شود.

همچنین توجه داشته باشید که تابع فضای کاری مورد نظر را به عنوان پارامتر ارائه می‌کند، بنابراین بلوک‌های دسته پویا شما می‌توانند بر اساس وضعیت فضای کاری باشند.

JSON

از زمان انتشار سپتامبر 2021، می‌توانید وضعیت بلوک‌ها را بدون استفاده از '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);

JSON قدیمی

قبل از انتشار سپتامبر 2021، باید از ویژگی '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);

پس از اینکه توابع دسته پویا با یک کلید رشته ای مرتبط شدند (با نام مستعار ثبت شده) می توانید این کلید رشته را به ویژگی custom تعریف دسته خود اختصاص دهید تا دسته بندی پویا شود.

JSON

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

XML

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

دسته بندی پویا داخلی

Blockly سه دسته پویا داخلی را ارائه می دهد.

• 'VARIABLE' یک دسته بندی برای متغیرهای تایپ نشده ایجاد می کند.
• 'VARIABLE_DYNAMIC' یک دسته برای متغیرهای تایپ شده ایجاد می کند. دارای دکمه هایی برای ایجاد رشته ها، اعداد و رنگ ها است.

• 'PROCEDURE' یک دسته بندی برای بلوک های تابع ایجاد می کند.

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>

توجه: کلمه "روش" در سراسر پایگاه کد Blockly استفاده می شود، اما کلمه "function" برای دانش آموزان قابل درک تر است. با عرض پوزش برای عدم تطابق.

غیرفعال کردن

دسته غیرفعال به کاربر اجازه نمی‌دهد دسته را باز کند و در حین پیمایش صفحه کلید از آن صرفنظر می‌شود.

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

هنگامی که یک دسته غیرفعال است، یک ویژگی 'disabled' به عنصر DOM اضافه می شود که به شما امکان می دهد ظاهر یک دسته غیرفعال را کنترل کنید.

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

پنهان شدن

یک دسته پنهان به عنوان بخشی از جعبه ابزار نشان داده نخواهد شد. دسته بندی های پنهان را می توان بعداً از طریق جاوا اسکریپت نشان داد.

JSON

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

XML

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

جاوا اسکریپت

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

در حال گسترش

این فقط برای دسته‌هایی اعمال می‌شود که شامل دسته‌های تودرتو هستند.

یک دسته گسترده، زیرمجموعه های خود را به شما نشان می دهد. به‌طور پیش‌فرض، دسته‌های تودرتو جمع‌شده هستند و برای گسترش باید روی آن‌ها کلیک کنید.

JSON

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

XML

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

یک ظاهر طراحی شده

Blockly یک رابط کاربری دسته‌بندی پیش‌فرض و همراه با آن برخی از گزینه‌های اساسی برای یک ظاهر طراحی ارائه می‌کند. اگر می‌خواهید اطلاعاتی در مورد نحوه انجام یک ظاهر طراحی/پیکربندی پیشرفته‌تر رابط کاربری داشته باشید، به بخش سفارشی‌سازی کد جعبه ابزار Blockly و گفتگوی APIهای Toolbox 2021 مراجعه کنید.

تم ها

تم ها به شما این امکان را می دهند که همه رنگ های فضای کاری خود را به طور همزمان مشخص کنید، از جمله رنگ های دسته های ما.

برای استفاده از آنها، باید دسته خود را با سبک دسته بندی خاصی مرتبط کنید:

JSON

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

XML

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

رنگ ها

همچنین می توانید رنگ را مستقیماً مشخص کنید، اما این توصیه نمی شود. رنگ یک عدد رشته ای (0-360) است که رنگ را مشخص می کند. به املای انگلیسی توجه کنید.

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>

توجه داشته باشید که ما همچنین از استفاده از منابع رنگی قابل بومی سازی پشتیبانی می کنیم.

CSS دسته

اگر می‌خواهید سفارشی‌سازی قدرتمندتری داشته باشید، Blockly همچنین به شما اجازه می‌دهد تا کلاس‌های CSS را برای عناصر مختلف رابط کاربری پیش‌فرض مشخص کنید. سپس می توانید از CSS برای استایل دادن به آنها استفاده کنید.

انواع عناصر زیر می توانند دارای کلاس های CSS باشند:

• ظرف - کلاس برای div والد برای دسته. پیش‌فرض blocklyToolboxCategory .
• row - کلاس برای div حاوی برچسب دسته و نماد. پیش فرض blocklyTreeRow .
• نماد - کلاس برای نماد دسته. پیش‌فرض blocklyTreeIcon .
• label - کلاس برای برچسب دسته. پیش‌فرض blocklyTreeLabel .
• Selected - کلاسی که هنگام انتخاب به دسته اضافه می شود. پیش‌فرض blocklyTreeSelected .
• openicon - کلاسی به نماد اضافه می شود که دسته دارای دسته های تو در تو و باز باشد. پیش‌فرض blocklyTreeIconOpen .
• بسته بندی - کلاسی به نماد اضافه می شود که دسته دارای دسته های تو در تو باشد و بسته باشد. پیش‌فرض blocklyTreeIconClosed .

و در اینجا نحوه تعیین کلاس ها با استفاده از هر فرمت است:

JSON

کلاس CSS یک نوع عنصر خاص را با استفاده از ویژگی cssConfig تنظیم کنید.

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

XML

کلاس CSS یک نوع عنصر خاص را با اضافه کردن «css-» به آن تنظیم کنید.

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

دسترسی

دو راه برای دسترسی برنامه‌ریزی به یک دسته وجود دارد. می توانید از طریق فهرست به آن دسترسی داشته باشید (که در آن 0 دسته برتر است):

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

یا با شناسه:

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

جایی که شناسه در تعریف جعبه ابزار مشخص شده است:

JSON

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

XML

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

بلوک های از پیش تعیین شده

تعریف جعبه ابزار ممکن است شامل بلوک‌هایی باشد که فیلدهایی روی یک مقدار پیش‌فرض تنظیم شده‌اند یا بلوک‌هایی داشته باشند که قبلاً به یکدیگر متصل شده‌اند.

در اینجا چهار بلوک وجود دارد:

1. یک بلوک logic_boolean ساده بدون مقادیر از پیش تعیین شده:
   
2. یک بلوک math_number که برای نمایش عدد 42 به جای پیش فرض 0 تغییر یافته است:
   
3. یک بلوک controls_for که سه بلوک math_number به آن متصل است:
   
4. یک بلوک math_arithmetic که دارای دو بلوک سایه math_number به آن متصل است:
   

در اینجا یک تعریف جعبه ابزار حاوی این چهار بلوک است:

JSON

از زمان انتشار سپتامبر 2021، می‌توانید وضعیت بلوک‌ها را بدون استفاده از '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
            }
          }
        }
      }
    },
  ]
}

JSON قدیمی

قبل از انتشار سپتامبر 2021، باید از ویژگی '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>

نوشتن این تعاریف با دست می تواند ... کمی دردناک باشد. در عوض می توانید بلوک های خود را در یک فضای کاری بارگذاری کنید و سپس کد زیر را برای دریافت تعاریف اجرا کنید. این تماس‌ها کار می‌کنند زیرا جعبه ابزار از همان قالبی که سیستم سریال‌سازی برای بلوک‌ها استفاده می‌کند، استفاده می‌کند.

JSON

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

XML

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

همچنین می‌توانید ویژگی‌های x ، y و id را حذف کنید، زیرا جعبه ابزار آن‌ها را نادیده می‌گیرد.

بلوک های سایه

بلوک‌های سایه، بلوک‌های مکان‌دار هستند که چندین عملکرد را انجام می‌دهند:

• آنها مقادیر پیش فرض بلوک والد خود را نشان می دهند.
• آنها به کاربران اجازه می دهند که مقادیر را مستقیماً بدون نیاز به واکشی یک عدد یا بلوک رشته ای تایپ کنند.
• برخلاف یک بلوک معمولی، اگر کاربر یک بلوک را روی آنها بیاندازد، جایگزین می شوند.
• آنها کاربر را از نوع ارزش مورد انتظار مطلع می کنند.

توجه: بلوک های سایه ممکن است شامل یک فیلد متغیر نباشند یا فرزندانی داشته باشند که سایه هم نباشند.

بلوک های غیر فعال

بلوک های غیرفعال را نمی توان از جعبه ابزار کشیدند. بلوک ها را می توان به صورت جداگانه با استفاده از ویژگی 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>

همچنین می توانید با استفاده از setEnabled یک بلوک را به صورت برنامه نویسی غیرفعال یا فعال کنید.

فیلدهای متغیر

فیلدهای متغیر زمانی که در جعبه ابزار هستند در مقایسه با زمانی که صرفاً سریالی می شوند ممکن است نیاز به تعیین متفاوت داشته باشند.

به طور خاص، زمانی که فیلدهای متغیر معمولاً به JSON سریال می شوند، فقط حاوی شناسه متغیری هستند که نشان می دهند، زیرا نام و نوع متغیر به طور جداگانه سریال می شوند. با این حال، جعبه ابزار حاوی آن اطلاعات نیست، بنابراین باید مستقیماً در قسمت متغیر گنجانده شود.

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

جداکننده ها

افزودن یک جداکننده بین هر دو دسته، یک خط و فضای اضافی بین دو دسته ایجاد می کند.

می‌توانید کلاس جداکننده را در تعریف جعبه ابزار JSON یا XML خود تغییر دهید.

JSON

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

XML

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

افزودن یک جداکننده بین هر دو بلوک باعث ایجاد شکاف بین بلوک ها می شود. به طور پیش فرض هر بلوک با 24 پیکسل از همسایه پایینی خود جدا می شود. این جداسازی ممکن است با استفاده از ویژگی 'gap' تغییر یابد، که جایگزین شکاف پیش فرض خواهد شد.

این به شما امکان می دهد گروه های منطقی از بلوک ها را در جعبه ابزار ایجاد کنید.

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>

دکمه ها و برچسب ها

شما می توانید یک دکمه یا برچسب را در هر جایی که می توانید یک بلوک در جعبه ابزار قرار دهید قرار دهید.

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>

می توانید نام کلاس CSS را برای اعمال بر روی دکمه یا برچسب خود تعیین کنید. در مثال بالا، برچسب اول از یک سبک سفارشی استفاده می کند، در حالی که برچسب دوم از سبک پیش فرض استفاده می کند.

دکمه ها باید دارای توابع پاسخ به تماس باشند. برچسب ها نباید برای تنظیم برگشت به تماس برای یک کلیک دکمه داده شده، از استفاده کنید

yourWorkspace.registerButtonCallback(yourCallbackKey, yourFunction).

تابع شما باید دکمه ای را که کلیک شده است به عنوان آرگومان بپذیرد. دکمه «ایجاد متغیر...» در دسته متغیرها، مثال خوبی از دکمه‌ای است که دارای پاسخ تماس است.

تغییر جعبه ابزار

برنامه ممکن است بلوک های موجود در جعبه ابزار را در هر زمانی با یک فراخوانی تابع تغییر دهد:

workspace.updateToolbox(newTree);

همانطور که در پیکربندی اولیه اتفاق افتاد، newTree ممکن است درختی از گره ها، نمایش رشته ای یا یک شی JSON باشد. تنها محدودیت این است که حالت را نمی توان تغییر داد. یعنی اگر دسته‌هایی در جعبه ابزار تعریف شده اولیه وجود داشته باشد، جعبه ابزار جدید نیز باید دسته‌هایی داشته باشد (اگرچه دسته‌ها ممکن است تغییر کنند). به همین ترتیب، اگر جعبه ابزار تعریف شده اولیه هیچ دسته ای نداشت، جعبه ابزار جدید ممکن است هیچ دسته ای نداشته باشد.

محتویات یک دسته را می توان با موارد زیر به روز کرد:

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

جایی که flyoutContents می‌تواند فهرستی از بلوک‌های تعریف‌شده با استفاده از JSON، درختی از گره‌ها یا نمایش رشته‌ای باشد.

توجه داشته باشید که در این زمان به روز رسانی جعبه ابزار باعث ایجاد برخی بازنشانی های جزئی رابط کاربری می شود:

• در جعبه ابزار بدون دسته‌بندی، هر فیلدی که کاربر تغییر داده است (مانند فهرست کشویی) به حالت پیش‌فرض برمی‌گردد.

در اینجا یک نسخه ی نمایشی زنده از یک درخت با دسته ها و گروه های بلوک وجود دارد.