টুলবক্স

টুলবক্স হল সেই জায়গা যেখানে ব্যবহারকারীরা ব্লক পান। সাধারণত এটি কর্মক্ষেত্রের একপাশে প্রদর্শিত হয়। কখনও কখনও এটির বিভাগ আছে, এবং কখনও কখনও এটি নেই।

এই পৃষ্ঠাটি প্রধানত কিভাবে আপনার টুলবক্সের গঠন নির্দিষ্ট করতে হয় তার উপর ফোকাস করে (অর্থাৎ এটিতে কোন বিভাগ রয়েছে এবং এতে কোন ব্লক রয়েছে)। কীভাবে আপনার টুলবক্সের UI পরিবর্তন করবেন সে সম্পর্কে আপনি যদি আরও বিশদ জানতে চান, তাহলে কাস্টমাইজ করা একটি ব্লকলি টুলবক্স কোডল্যাব এবং 2021 টুলবক্স APIs টক দেখুন।

বিন্যাস

ব্লকলি আপনাকে কয়েকটি ভিন্ন ফর্ম্যাট ব্যবহার করে আপনার টুলবক্সের গঠন নির্দিষ্ট করতে দেয়। নতুন প্রস্তাবিত বিন্যাস JSON ব্যবহার করে, এবং পুরানো বিন্যাস XML ব্যবহার করে।

এখানে আপনি উপরের টুলবক্স নির্দিষ্ট করতে পারেন বিভিন্ন উপায় আছে:

JSON এক্সএমএল XML স্ট্রিং

সেপ্টেম্বর 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 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>

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 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 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 পুরানো 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);

সেপ্টেম্বর 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);

// 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"
}

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

অন্তর্নির্মিত গতিশীল বিভাগ

ব্লকলি তিনটি অন্তর্নির্মিত গতিশীল বিভাগ সরবরাহ করে।

JSON এক্সএমএল 
{
  "kind": "category",
  "name": "Variables",
  "custom": "VARIABLE"
},
{
  "kind": "category",
  "name": "Variables",
  "custom": "VARIABLE_DYNAMIC"
},
{
  "kind": "category",
  "name": "Functions",
  "custom": "PROCEDURE"
}

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

লুকিয়ে আছে

একটি লুকানো বিভাগ টুলবক্সের অংশ হিসেবে দেখানো হবে না। লুকানো বিভাগগুলি পরে জাভাস্ক্রিপ্টের মাধ্যমে দেখানো যেতে পারে।

JSON এক্সএমএল জাভাস্ক্রিপ্ট 
{
  "kind": "category",
  "name": "...",
  "hidden": "true"
}

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

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

প্রসারিত হচ্ছে

এটি শুধুমাত্র সেইসব বিভাগে প্রযোজ্য যেখানে অন্যান্য নেস্টেড বিভাগ রয়েছে।

একটি বর্ধিত বিভাগ আপনাকে তার উপ বিভাগগুলি দেখাবে। ডিফল্টরূপে, নেস্টেড বিভাগগুলি আড়াল করা হয়, এবং প্রসারিত করার জন্য ক্লিক করতে হবে৷

JSON এক্সএমএল 
{
  "kind": "category",
  "name": "...",
  "expanded": "true"
}

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

স্টাইলিং

ব্লকলি একটি ডিফল্ট বিভাগ UI প্রদান করে এবং এর সাথে স্টাইলিং এর জন্য কিছু মৌলিক বিকল্প রয়েছে। আপনি যদি UI-এর আরও উন্নত স্টাইলিং/কনফিগারেশন কীভাবে করবেন সে সম্পর্কে তথ্য চান তাহলে কাস্টমাইজ করা একটি ব্লকলি টুলবক্স কোডল্যাব এবং 2021 টুলবক্স APIs টক দেখুন।

থিম

থিমগুলি আপনাকে আমাদের বিভাগের রঙ সহ আপনার কর্মক্ষেত্রের সমস্ত রঙ একবারে নির্দিষ্ট করতে দেয়।

এগুলি ব্যবহার করার জন্য, আপনাকে একটি নির্দিষ্ট বিভাগ শৈলীর সাথে আপনার বিভাগকে সংযুক্ত করতে হবে:

JSON এক্সএমএল 
{
  "kind": "category",
  "name": "Logic",
  "categorystyle": "logic_category"
}

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

রং

আপনি সরাসরি রঙ নির্দিষ্ট করতে পারেন, কিন্তু এটি সুপারিশ করা হয় না। রঙটি একটি স্ট্রিংকৃত সংখ্যা (0-360) যা রঙ নির্দিষ্ট করে। ব্রিটিশ বানান লক্ষ্য করুন।

JSON এক্সএমএল 
{
  "contents": [
    {
      "kind": "category",
      "name": "Logic",
      "colour": "210"
    },
    {
      "kind": "category",
      "name": "Loops",
      "colour": "120"
    }
  ]
}

<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 বিভাগ

আপনি যদি আরও শক্তিশালী কাস্টমাইজেশন চান, ব্লকলি আপনাকে ডিফল্ট UI এর বিভিন্ন উপাদানের জন্য CSS ক্লাস নির্দিষ্ট করার অনুমতি দেয়। আপনি তারপর এই স্টাইল করতে CSS ব্যবহার করতে পারেন.

নিম্নলিখিত উপাদানের ধরনগুলিতে CSS ক্লাস প্রয়োগ করা যেতে পারে:

  • ধারক - বিভাগের জন্য অভিভাবক ডিভের জন্য ক্লাস। ডিফল্ট blocklyToolboxCategory .
  • সারি - বিভাগ লেবেল এবং আইকন ধারণকারী div-এর জন্য ক্লাস। ডিফল্ট blocklyTreeRow ।
  • আইকন - বিভাগ আইকনের জন্য ক্লাস। ডিফল্ট blocklyTreeIcon ।
  • লেবেল - বিভাগ লেবেলের জন্য ক্লাস। ডিফল্ট blocklyTreeLabel ।
  • নির্বাচিত - যে শ্রেণীটি নির্বাচন করার সময় বিভাগে যোগ করা হয়। ডিফল্ট blocklyTreeSelected ।
  • openicon - যখন বিভাগে নেস্ট করা বিভাগ থাকে এবং খোলা থাকে তখন একটি আইকনে ক্লাস যোগ করা হয়। ডিফল্ট blocklyTreeIconOpen ।
  • ক্লোজডিকন - যখন ক্যাটাগরিতে নেস্টেড ক্যাটাগরি থাকে এবং বন্ধ থাকে তখন একটি আইকনে ক্লাস যোগ করা হয়। ডিফল্ট blocklyTreeIconClosed .

এবং এখানে আপনি যে কোনও ফর্ম্যাট ব্যবহার করে ক্লাসগুলি কীভাবে নির্দিষ্ট করবেন:

JSON এক্সএমএল

cssConfig প্রপার্টি ব্যবহার করে একটি নির্দিষ্ট এলিমেন্ট টাইপের CSS ক্লাস সেট করুন। 

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

একটি নির্দিষ্ট এলিমেন্ট টাইপের 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"
}

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

প্রিসেট ব্লক

টুলবক্সের সংজ্ঞায় এমন ব্লক থাকতে পারে যেগুলির ক্ষেত্রে একটি ডিফল্ট মান সেট করা আছে, অথবা এমন ব্লকগুলি থাকতে পারে যা ইতিমধ্যেই একত্রে সংযুক্ত আছে।

এখানে চারটি ব্লক রয়েছে:

  1. কোনো প্রিসেট মান ছাড়াই একটি সাধারণ logic_boolean ব্লক:
  2. একটি math_number ব্লক যা 0 এর ডিফল্টের পরিবর্তে 42 নম্বর প্রদর্শনের জন্য সংশোধন করা হয়েছে:
  3. একটি controls_for ব্লক যার সাথে তিনটি math_number ব্লক রয়েছে:
  4. একটি math_arithmetic ব্লক যার সাথে দুটি math_number ছায়া ব্লক রয়েছে:

এখানে এই চারটি ব্লক সম্বলিত একটি টুলবক্স সংজ্ঞা রয়েছে:

JSONপুরানো 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
            }
          }
        }
      }
    },
  ]
}

সেপ্টেম্বর 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 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()));

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

<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 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 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 ব্যবহার করে সংজ্ঞায়িত ব্লকের একটি তালিকা হতে পারে, নোডের একটি গাছ, বা একটি স্ট্রিং উপস্থাপনা।

সচেতন থাকুন যে এই সময়ে টুলবক্স আপডেট করার ফলে কিছু ছোটখাটো UI রিসেট হয়:

  • বিভাগ ছাড়া একটি টুলবক্সে, ব্যবহারকারীর দ্বারা পরিবর্তিত যেকোনো ক্ষেত্র (যেমন একটি ড্রপডাউন) ডিফল্টে ফিরে যাবে।

এখানে বিভাগ এবং ব্লক গ্রুপ সহ একটি গাছের একটি লাইভ ডেমো রয়েছে।