مربع الأدوات

صندوق الأدوات هو المكان الذي يحصل فيه المستخدمون على حظر. عادة ما يتم عرضه على جانب واحد من مساحة العمل. أحيانًا يكون به فئات، وأحيانًا لا يكون كذلك.

تركّز هذه الصفحة بشكل أساسي على كيفية تحديد بنية صندوق الأدوات (أي الفئات التي تتضمّنها والعناصر التي تحتوي عليها). لمزيد من التفاصيل حول كيفية تغيير واجهة المستخدم لمجموعة الأدوات، يمكنك الاطّلاع على الدرس التطبيقي حول ترميز مجموعات أدوات حظر الإعلانات وحديث حول واجهات برمجة تطبيقات مجموعة أدوات عام 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>

الفئات المتداخلة

قد يتم دمج الفئات ضمن فئات أخرى. في ما يلي فئتان من المستوى الأعلى ("أساسية" و"مخصصة")، تحتوي الثانية على فئتين فرعيتين، تحتوي كل منهما على كتل:

تجدر الإشارة إلى أنّه من الممكن أن تحتوي إحدى الفئات على كلٍّ من الفئات الفرعية والكتل. في المثال السابق، تحتوي كلمة "مخصص" على فئتين فرعيتين ("نقل" و"دوران")، بالإضافة إلى جزء خاص بها ("البدء").

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>

الفئات الديناميكية

الفئات الديناميكية هي فئات تتم إعادة تعبئتها ديناميكيًا استنادًا إلى دالة في كل مرة يتم فتحها.

يتيح هذا الخيار بشكل آمن تمكّنك من ربط فئة بدالة ما عبر مفتاح سلسلة مسجَّل. يجب أن ترجع الدالة تعريفًا لمحتويات الفئة (بما في ذلك الكتل والأزرار والتسميات وما إلى ذلك). يمكن تحديد المحتوى بتنسيق 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>

ملاحظة: يتم استخدام كلمة "إجراء" في قاعدة الترميزات بالرغم من أنّ الطلاب وجدوا أنّ كلمة "دالة" مفهومة أكثر لهم. نعتذر عن عدم التطابق.

الإيقاف

لن تسمح الفئة المعطَّلة للمستخدم بفتح الفئة وسيتم تخطيها أثناء التنقل بلوحة المفاتيح.

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

عند إيقاف فئة، تتم إضافة سمة 'disabled' إلى عنصر DOM، ما يتيح لك التحكّم في شكل الفئة التي تم إيقافها.

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

جارٍ الإخفاء

لن يتم عرض الفئة المخفية كجزء من مربع الأدوات. يمكن لاحقًا عرض الفئات المخفية عبر JavaScript.

JSON

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

XML

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

JavaScript

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

جارٍ التوسيع

لا ينطبق هذا إلا على الفئات التي تحتوي على فئات متداخلة أخرى.

ستعرِض لك الفئة الموسّعة فئاتها الفرعية. بشكل افتراضي، يتم تصغير الفئات المدمجة، ويجب النقر فوقها لتوسيعها.

JSON

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

XML

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

التصميم

يوفر بشكل حظر واجهة مستخدم افتراضية للفئات، ومعه بعض الخيارات الأساسية للتصميم. إذا أردت الحصول على معلومات حول طريقة تنفيذ تصميم أو ضبط أكثر تقدّمًا لواجهة المستخدم، يمكنك الاطّلاع على الدرس التطبيقي حول ترميز مجموعة أدوات حظر وحديث عن واجهات برمجة التطبيقات لمجموعة أدوات عام 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.
• صف - فئة div التي تحتوي على تسمية الفئة ورمزها. الإعداد التلقائي blocklyTreeRow.
• الأيقونة - فئة أيقونة الفئة. blocklyTreeIcon التلقائي.
• التسمية - فئة تسمية الفئة. blocklyTreeLabel التلقائي.
• select - الفئة التي تتم إضافتها إلى الفئة عند تحديدها. الإعداد التلقائي 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 بكسل. يمكن تغيير هذا الفصل باستخدام سمة "الفجوة" التي ستحلّ محلّ الفجوة التلقائية.

يتيح لك هذا إنشاء مجموعات منطقية من الكتل في مربع الأدوات.

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 أو شجرة العُقد أو تمثيل سلسلة.

تجدر الإشارة إلى أنّ تحديث مربع الأدوات في الوقت الحالي يؤدي إلى بعض عمليات إعادة الضبط البسيطة لواجهة المستخدم:

• في مربع الأدوات بدون فئات، ستتم إعادة أي حقول يغيرها المستخدم (مثل القائمة المنسدلة) إلى الإعداد التلقائي.

إليك عرض توضيحي مباشر لشجرة تتضمّن فئات ومجموعات حظر.