रिसर्च सर्वे: Blockly के साथ अपने अनुभव के बारे में हमें बताएं

इस पेज का अनुवाद Cloud Translation API से किया गया है.

टूलबॉक्स

टूलबॉक्स वह जगह है जहां उपयोगकर्ताओं को ब्लॉक मिलते हैं. आम तौर पर, यह फ़ाइल फ़ोल्डर के एक तरफ़ दिखती है. कभी-कभी इसमें कैटगरी होती हैं और कई बार नहीं.

इस पेज पर मुख्य रूप से, टूलबॉक्स की संरचना तय करने का तरीका बताया गया है. जैसे, उसमें कौनसी कैटगरी हैं और उसमें कौनसे ब्लॉक मौजूद हैं. अगर आपको अपने टूलबॉक्स के यूज़र इंटरफ़ेस (यूआई) को बदलने के तरीके के बारे में ज़्यादा जानकारी चाहिए, तो ब्लॉकी टूलबॉक्स कोडलैब को पसंद के मुताबिक बनाना और 2021 टूलबॉक्स एपीआई के बारे में जानकारी देखें.

फ़ॉर्मैट

ब्लॉकली की मदद से, कुछ अलग-अलग फ़ॉर्मैट का इस्तेमाल करके, अपने टूलबॉक्स का स्ट्रक्चर तय किया जा सकता है. सुझाए गए नए फ़ॉर्मैट में JSON का इस्तेमाल किया जाता है, जबकि पुराने फ़ॉर्मैट में एक्सएमएल का इस्तेमाल किया जाता है.

ऊपर दिए गए टूलबॉक्स को इन तरीकों से तय किया जा सकता है:

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>

एक्सएमएल स्ट्रिंग

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 या एक्सएमएल के तौर पर बताने का सुझाव दिया जाता है. हालांकि, हम 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>

पहले से मौजूद डाइनैमिक कैटगरी

ब्लॉकली, पहले से तीन डाइनैमिक कैटगरी उपलब्ध कराती है.

'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' प्रॉपर्टी जोड़ दी जाती है. इससे, बंद की गई कैटगरी के लुक को कंट्रोल किया जा सकता है.

.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>

ध्यान दें कि हम स्थानीय जगह के हिसाब से बनाई जा सकने वाली कलर रेफ़रंस इस्तेमाल करने की भी सुविधा देते हैं.

सीएसएस कैटगरी

अगर आपको ज़्यादा बेहतर तरीके से कस्टमाइज़ेशन चाहिए, तो Blockly की मदद से आप डिफ़ॉल्ट यूज़र इंटरफ़ेस (यूआई) के अलग-अलग एलिमेंट के लिए, सीएसएस क्लास तय कर सकते हैं. इसके बाद, इन्हें स्टाइल करने के लिए सीएसएस का इस्तेमाल किया जा सकता है.

नीचे दिए गए एलिमेंट टाइप पर सीएसएस क्लास लागू की जा सकती हैं:

कंटेनर - कैटगरी के लिए पैरंट div के लिए क्लास. डिफ़ॉल्ट blocklyToolboxCategory.
पंक्ति - उस div की क्लास जिसमें कैटगरी लेबल और आइकॉन है. डिफ़ॉल्ट blocklyTreeRow.
आइकॉन - कैटगरी आइकॉन के लिए क्लास. डिफ़ॉल्ट blocklyTreeIcon.
लेबल - श्रेणी लेबल के लिए क्लास. डिफ़ॉल्ट blocklyTreeLabel.
selected - वह क्लास जिसे कैटगरी चुनने पर उसमें जोड़ा जाता है. डिफ़ॉल्ट blocklyTreeSelected.
Openicon - कैटगरी में नेस्ट की गई कैटगरी होने और खुली होने पर, किसी आइकॉन में क्लास को जोड़ा जाता है. डिफ़ॉल्ट blocklyTreeIconOpen.
Closedicon - जब श्रेणी में नेस्ट की गई श्रेणियां होती हैं और यह बंद होती है, तो किसी आइकन में वर्ग को जोड़ा जाता है. डिफ़ॉल्ट blocklyTreeIconClosed.

यहां बताया गया है कि किसी भी फ़ॉर्मैट का इस्तेमाल करके क्लास के बारे में कैसे बताया जाए:

JSON

cssConfig प्रॉपर्टी का इस्तेमाल करके किसी खास तरह के एलिमेंट की सीएसएस क्लास सेट करें.

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

XML

किसी खास तरह के एलिमेंट की सीएसएस क्लास को सेट करने के लिए, उसमें '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>

प्रीसेट ब्लॉक

टूलबॉक्स परिभाषा में ऐसे ब्लॉक हो सकते हैं जिनके फ़ील्ड किसी डिफ़ॉल्ट वैल्यू पर सेट हों या ऐसे ब्लॉक हों जो पहले से एक साथ कनेक्ट हों.

ये चार ब्लॉक हैं:

बिना किसी प्रीसेट वैल्यू वाला सामान्य logic_boolean ब्लॉक:
math_number ब्लॉक, जिसमें डिफ़ॉल्ट के तौर पर 0:
के बजाय 42 दिखाने के लिए बदलाव किया गया है
controls_for का एक ब्लॉक, जिसमें तीन math_number ब्लॉक जुड़े हैं:
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

{
  "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 या एक्सएमएल टूलबॉक्स परिभाषा में, सेपरेटर के लिए क्लास में बदलाव किया जा सकता है.

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>

बटन या लेबल पर लागू करने के लिए, सीएसएस क्लास का नाम तय किया जा सकता है. ऊपर दिए गए उदाहरण में, पहला लेबल कस्टम स्टाइल का इस्तेमाल करता है, जबकि दूसरा लेबल डिफ़ॉल्ट स्टाइल का इस्तेमाल करता है.

बटन में कॉलबैक फ़ंक्शन होने चाहिए, लेबल में नहीं. किसी बटन के लिए कॉलबैक सेट करने के लिए, क्लिक करके

yourWorkspace.registerButtonCallback(yourCallbackKey, yourFunction).

आपके फ़ंक्शन को उस बटन को तर्क के रूप में स्वीकार करना चाहिए जिस पर क्लिक किया गया है. वैरिएबल कैटगरी में "वैरिएबल बनाएं..." बटन, कॉलबैक वाले बटन का एक अच्छा उदाहरण है.

टूलबॉक्स बदलना

ऐप्लिकेशन, टूलबॉक्स में मौजूद ब्लॉक को किसी भी समय सिर्फ़ एक फ़ंक्शन कॉल से बदल सकता है:

workspace.updateToolbox(newTree);

जैसा कि शुरुआती कॉन्फ़िगरेशन के दौरान हुआ था, newTree या तो नोड का ट्री, स्ट्रिंग रिप्रज़ेंटेशन या JSON ऑब्जेक्ट हो सकता है. इसमें बस यही पाबंदी है कि मोड को बदला नहीं जा सकता. ऐसा तब होता है, जब शुरुआती तौर पर तय किए गए टूलबॉक्स में कैटगरी होती हैं, तो नए टूलबॉक्स में कैटगरी भी होनी चाहिए (हालांकि, कैटगरी बदल सकती हैं). इसी तरह, अगर शुरुआत में बताए गए टूलबॉक्स में कोई कैटगरी नहीं थी, तो हो सकता है कि नए टूलबॉक्स में कोई कैटगरी न हो.

किसी एक कैटगरी के कॉन्टेंट को अपडेट करने के लिए:

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

जहां FlyoutContents, JSON का इस्तेमाल करके तय किए गए ब्लॉक की सूची हो सकता है, नोड का ट्री या किसी स्ट्रिंग का इस्तेमाल करके बनाया जा सकता है.

ध्यान रखें कि इस समय टूलबॉक्स को अपडेट करने से, कुछ यूज़र इंटरफ़ेस (यूआई) रीसेट हो जाते हैं:

बिना कैटगरी वाले टूलबॉक्स में, उपयोगकर्ता के बदले गए सभी फ़ील्ड, जैसे कि ड्रॉपडाउन, डिफ़ॉल्ट पर वापस सेट हो जाएंगे.

यहां कैटगरी और ब्लॉक ग्रुप वाले ट्री का लाइव डेमो दिया गया है.