กล่องเครื่องมือ

กล่องเครื่องมือคือที่ที่ผู้ใช้จะได้รับบล็อก ซึ่งโดยปกติจะแสดง ที่ด้านหนึ่งของพื้นที่ทำงาน บางครั้งอาจมีหมวดหมู่ และบางครั้งอาจไม่มี

หน้านี้จะเน้นไปที่วิธีระบุโครงสร้างของกล่องเครื่องมือ (เช่น กล่องเครื่องมือมีหมวดหมู่อะไร และบล็อกอะไรได้บ้าง) หากต้องการรายละเอียดเพิ่มเติมเกี่ยวกับวิธีเปลี่ยน UI ของกล่องเครื่องมือ โปรดดู Customizing a Blockly Toolbox Codelab และ 2021 Toolbox APIs

รูปแบบ

Blockly ให้คุณระบุโครงสร้างของกล่องเครื่องมือโดยใช้รูปแบบที่แตกต่างกัน 2-3 รูปแบบ รูปแบบใหม่ที่แนะนำใช้ JSON ส่วนรูปแบบเดิมใช้ XML

วิธีต่างๆ สำหรับการระบุกล่องเครื่องมือข้างต้นมีดังนี้

JSONXMLสตริง 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});

หมวดหมู่

บล็อกในกล่องเครื่องมืออาจจัดเรียงไว้เป็นหมวดหมู่

ต่อไปนี้เป็นวิธีกำหนดกล่องเครื่องมือข้างต้น ซึ่งมี 2 หมวดหมู่ ("การควบคุม" และ "ตรรกะ") โดยแต่ละหมวดมีบล็อก

JSONXML

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

หมวดหมู่ที่ซ้อนกัน

หมวดหมู่อาจซ้อนอยู่ในหมวดหมู่อื่น ต่อไปนี้เป็นหมวดหมู่ระดับบนสุด 2 หมวด ("หลัก" และ "กำหนดเอง") หมวดหมู่ที่ 2 มีหมวดหมู่ย่อย 2 หมวดหมู่ ซึ่งแต่ละหมวดมีการบล็อก

โปรดทราบว่า หนึ่งหมวดหมู่อาจมีทั้งหมวดหมู่ย่อยและการบล็อก ในตัวอย่างข้างต้น "กำหนดเอง" มี 2 หมวดหมู่ย่อย ("ย้าย" และ "เลี้ยว") ตลอดจนบล็อกของตนเอง ("start")

JSONXML

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

หมวดหมู่แบบไดนามิก

หมวดหมู่แบบไดนามิกคือหมวดหมู่ที่มีการเติมข้อมูลใหม่แบบไดนามิกโดยอิงตามฟังก์ชันเมื่อมีการเปิดหมวดหมู่

Blockly รองรับการดำเนินการนี้โดยให้คุณเชื่อมโยงหมวดหมู่กับฟังก์ชันผ่านคีย์สตริงที่ลงทะเบียนไว้ ฟังก์ชันดังกล่าวควรแสดงคำจำกัดความของเนื้อหา หมวดหมู่ (รวมถึงบล็อก ปุ่ม ป้ายกำกับ ฯลฯ) คุณจะระบุเนื้อหาเป็น JSON หรือ XML ก็ได้ แต่ขอแนะนำให้ใช้ JSON

และโปรดทราบว่าฟังก์ชันนี้จะมีพื้นที่ทำงานเป้าหมายเป็นพารามิเตอร์ ดังนั้นการบล็อกในหมวดหมู่แบบไดนามิกอาจอิงตามสถานะของพื้นที่ทำงานได้

JSONJSON เดิมXML

ตั้งแต่รุ่นเดือนกันยายน 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 ของคำจำกัดความหมวดหมู่เพื่อทำให้หมวดหมู่เป็นแบบไดนามิกได้

JSONXML

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

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

หมวดหมู่แบบไดนามิกในตัว

Blockly มีหมวดหมู่แบบไดนามิกในตัว 3 หมวดหมู่

• 'VARIABLE' สร้างหมวดหมู่สำหรับตัวแปรที่ไม่พิมพ์
• 'VARIABLE_DYNAMIC' สร้างหมวดหมู่สำหรับตัวแปรที่มีการพิมพ์ โดยมีปุ่มสำหรับสร้าง สตริง ตัวเลข และสี

• 'PROCEDURE' สร้างหมวดหมู่สำหรับบล็อกฟังก์ชัน

JSONXML

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

หมายเหตุ: มีการใช้คำว่า "ขั้นตอน" ใน Codebase ของ Blockly แต่นักเรียนพบว่าคำว่า "ฟังก์ชัน" เข้าใจได้มากกว่า ขออภัยที่ข้อมูลไม่ตรงกัน

กำลังปิดใช้

หมวดหมู่ที่ปิดใช้จะไม่อนุญาตให้ผู้ใช้เปิดหมวดหมู่นั้น และจะข้ามหมวดหมู่ในระหว่างการไปยังส่วนต่างๆ ด้วยแป้นพิมพ์

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

เมื่อปิดใช้หมวดหมู่ ระบบจะเพิ่มพร็อพเพอร์ตี้ 'disabled' ลงในองค์ประกอบ DOM ซึ่งจะช่วยให้คุณควบคุมรูปลักษณ์ของหมวดหมู่ที่ปิดใช้ได้

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

กำลังซ่อน

หมวดหมู่ที่ซ่อนไว้จะไม่แสดงเป็นส่วนหนึ่งของกล่องเครื่องมือ หมวดหมู่ที่ซ่อนไว้ สามารถแสดงผ่าน JavaScript ได้ในภายหลัง

JSONXMLJavaScript

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

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

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

กำลังขยาย

การดำเนินการนี้จะมีผลกับหมวดหมู่ที่มีหมวดหมู่ที่ซ้อนกันอื่นๆ เท่านั้น

หมวดหมู่ที่ขยายจะแสดงหมวดหมู่ย่อย โดยค่าเริ่มต้น หมวดหมู่ที่ซ้อนกันจะยุบอยู่ และจะต้องคลิกเพื่อขยาย

JSONXML

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

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

การจัดรูปแบบ

Blockly มี UI หมวดหมู่เริ่มต้น รวมถึงตัวเลือกพื้นฐานสำหรับการจัดรูปแบบ หากต้องการข้อมูลเกี่ยวกับวิธีการจัดรูปแบบ/การกำหนดค่าขั้นสูงมากขึ้นสำหรับ UI โปรดดูการปรับแต่งโค้ดแล็บกล่องเครื่องมือของ Blockly และ พูดถึงเรื่อง API กล่องเครื่องมือปี 2021

ธีม

ธีมช่วยให้คุณระบุสีทั้งหมดของพื้นที่ทำงานได้พร้อมกัน รวมถึงสีในหมวดหมู่ต่างๆ

หากต้องการใช้หมวดหมู่นี้ คุณต้องเชื่อมโยงหมวดหมู่กับสไตล์หมวดหมู่ที่ต้องการ ดังนี้

JSONXML

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

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

สี

คุณยังสามารถระบุสีได้โดยตรง แต่เราไม่แนะนำให้ทำเช่นนี้ สีคือตัวเลขที่เป็นสตริง (0-360) ที่ระบุโทนสี สังเกตการสะกดคำแบบบริติช

JSONXML

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

หากต้องการการปรับแต่งที่มีประสิทธิภาพมากขึ้น Blockly ยังให้คุณระบุคลาส CSS สำหรับองค์ประกอบต่างๆ ของ UI เริ่มต้นได้ด้วย จากนั้นคุณสามารถใช้ CSS เพื่อจัดรูปแบบแท็ก

ประเภทองค์ประกอบต่อไปนี้สามารถใช้คลาส CSS ได้

• คอนเทนเนอร์ - คลาสสำหรับ div ระดับบนสุดสำหรับหมวดหมู่ ค่าเริ่มต้น blocklyToolboxCategory
• แถว - คลาสสำหรับ div ที่มีป้ายกำกับหมวดหมู่และไอคอน ค่าเริ่มต้น blocklyTreeRow
• ไอคอน - ชั้นเรียนสำหรับไอคอนหมวดหมู่ blocklyTreeIcon เริ่มต้น
• label - คลาสสำหรับป้ายกำกับหมวดหมู่ blocklyTreeLabel เริ่มต้น
• selected - ชั้นเรียนที่เพิ่มลงในหมวดหมู่เมื่อเลือกแล้ว ค่าเริ่มต้น blocklyTreeSelected
• openicon - ชั้นเรียนที่เพิ่มลงในไอคอนเมื่อหมวดหมู่มีหมวดหมู่ที่ซ้อนกัน และเปิดอยู่ blocklyTreeIconOpen เริ่มต้น
• ไอคอนปิด - ชั้นเรียนที่เพิ่มลงในไอคอนเมื่อหมวดหมู่มีหมวดหมู่ที่ซ้อนกัน และปิดอยู่ blocklyTreeIconClosed เริ่มต้น

ซึ่งคุณจะระบุชั้นเรียนได้โดยใช้รูปแบบใดรูปแบบหนึ่งต่อไปนี้

JSONXML

ตั้งค่าคลาส CSS ของประเภทองค์ประกอบที่เฉพาะเจาะจงโดยใช้คุณสมบัติ cssConfig

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

ตั้งค่าคลาส CSS ของประเภทองค์ประกอบเฉพาะโดยใส่ "css-" ไว้ด้านหน้า

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

การเข้าถึง

คุณเข้าถึงหมวดหมู่แบบเป็นโปรแกรมได้ 2 วิธี คุณจะเข้าถึง URL ด้วยดัชนี (โดยที่ 0 คือหมวดหมู่ยอดนิยม) ได้ดังนี้

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

หรือตามรหัส:

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

ตำแหน่งที่มีการระบุรหัสในคำจำกัดความของกล่องเครื่องมือ

JSONXML

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

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

บล็อกที่กำหนดล่วงหน้า

คำจำกัดความกล่องเครื่องมืออาจมีการบล็อกที่มีการตั้งค่าช่องเป็นค่าเริ่มต้น หรือมีบล็อกที่เชื่อมต่อไว้ด้วยกันอยู่แล้ว

ต่อไปนี้เป็น 4 บล็อก:

1. บล็อก logic_boolean แบบง่ายที่ไม่มีค่าที่กำหนดล่วงหน้า
   
2. บล็อก math_number ที่มีการแก้ไขให้แสดงหมายเลข 42 แทนค่าเริ่มต้น 0:
   
3. บล็อก controls_for ที่มีบล็อก math_number 3 บล็อกอยู่
   
4. บล็อก math_arithmetic ที่มีmath_number บล็อกเงา 2 บล็อกเชื่อมต่ออยู่ ดังนี้
   

ต่อไปนี้เป็นคำนิยามของกล่องเครื่องมือที่มีบล็อกทั้ง 4 ส่วนนี้

JSONJSON เดิมXML

ตั้งแต่รุ่นเดือนกันยายน 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>

การเขียนคำนิยามด้วยมืออาจเป็นอะไรที่ชวนปวดหัว แต่คุณสามารถโหลดบล็อกลงในพื้นที่ทำงาน แล้วเรียกใช้โค้ดต่อไปนี้เพื่อรับคำจำกัดความได้ การเรียกเหล่านี้ได้ผลเนื่องจากกล่องเครื่องมือใช้รูปแบบสำหรับบล็อกรูปแบบเดียวกับระบบการทำให้เป็นอนุกรม

JSONXML

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

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

นอกจากนี้ ยังนำพร็อพเพอร์ตี้ x, y และ id ออกได้ เนื่องจากกล่องเครื่องมือจะไม่สนใจพร็อพเพอร์ตี้เหล่านั้น

บล็อกการให้แสงเงา

บล็อกการให้แสงเงาคือบล็อกตัวยึดตําแหน่งซึ่งทํางานหลายอย่าง ดังนี้

• โดยจะระบุค่าเริ่มต้นสำหรับการบล็อกระดับบนสุด
• พารามิเตอร์นี้ช่วยให้ผู้ใช้พิมพ์ค่าได้โดยตรงโดยไม่ต้องดึงตัวเลขหรือบล็อกสตริง
• การบล็อกแบบปกติจะถูกแทนที่หากผู้ใช้วางการบล็อกทับบล็อกเหล่านั้น
• โดยจะแจ้งให้ผู้ใช้ทราบถึงประเภทของค่าที่คาดไว้

หมายเหตุ: บล็อกการให้แสงเงาอาจไม่มีช่องตัวแปรหรือมีช่องย่อยที่ไม่ใช่เงา

การบล็อกที่ปิดใช้

ลากบล็อกที่ปิดใช้จากกล่องเครื่องมือไม่ได้ คุณปิดใช้การบล็อกทีละรายการได้โดยใช้พร็อพเพอร์ตี้ disabled (ไม่บังคับ)

JSONXML

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

เส้นแบ่ง

การเพิ่มตัวแบ่งระหว่าง 2 หมวดหมู่จะสร้างบรรทัดและช่องว่างระหว่าง 2 หมวดหมู่นี้

คุณสามารถเปลี่ยนคลาสของตัวคั่นในคำจำกัดความกล่องเครื่องมือ JSON หรือ XML ได้

JSONXML

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

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

การเพิ่มตัวคั่นระหว่างบล็อก 2 บล็อกจะสร้างช่องว่างระหว่างบล็อกดังกล่าว โดยค่าเริ่มต้น ทุกๆ บล็อกจะแยกออกจากบริเวณใกล้เคียงกัน 24 พิกเซล การแยกนี้อาจเปลี่ยนได้โดยใช้แอตทริบิวต์ "gap" ซึ่งจะแทนที่ช่องว่างเริ่มต้น

ซึ่งช่วยให้คุณสร้างกลุ่มบล็อกเชิงตรรกะในกล่องเครื่องมือได้

JSONXML

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

ปุ่มและป้ายกำกับ

คุณจะวางปุ่มหรือป้ายกำกับไว้ที่ใดก็ได้ที่ใส่บล็อกในกล่องเครื่องมือ

JSONXML

{
  "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 เพื่อใช้กับปุ่มหรือป้ายกำกับได้ ในตัวอย่างข้างต้น ป้ายกำกับแรกใช้รูปแบบที่กำหนดเอง ส่วนป้ายกำกับที่ 2 ใช้รูปแบบเริ่มต้น

ปุ่มต่างๆ ควรมีฟังก์ชันเรียกกลับ ส่วนป้ายกำกับก็ไม่ควรมี เมื่อต้องการตั้งค่าโค้ดเรียกกลับ สำหรับการคลิกปุ่มที่ต้องการ ให้ใช้

yourWorkspace.registerButtonCallback(yourCallbackKey, yourFunction).

ฟังก์ชันของคุณควรยอมรับปุ่มที่ถูกคลิกเป็นอาร์กิวเมนต์ ปุ่ม "สร้างตัวแปร..." ในหมวดหมู่ตัวแปรเป็นตัวอย่างที่ดีของปุ่มที่มีโค้ดเรียกกลับ

การเปลี่ยนกล่องเครื่องมือ

แอปพลิเคชันอาจเปลี่ยนบล็อกที่อยู่ในกล่องเครื่องมือได้ตลอดเวลาด้วยการเรียกใช้ฟังก์ชันครั้งเดียว

workspace.updateToolbox(newTree);

เช่นเดียวกับในระหว่างการกำหนดค่าเริ่มต้น newTree อาจเป็นต้นไม้ของโหนด การแสดงสตริง หรือออบเจ็กต์ JSON ข้อจำกัดเพียงอย่างเดียวคือไม่สามารถเปลี่ยนโหมดได้ นั่นคือหากมีหมวดหมู่ในกล่องเครื่องมือที่กำหนดไว้ในตอนแรก กล่องเครื่องมือใหม่ก็จะต้องมีหมวดหมู่ด้วย (แต่หมวดหมู่อาจมีการเปลี่ยนแปลง) ในทำนองเดียวกัน หากกล่องเครื่องมือที่กำหนดไว้ตอนแรกไม่มีหมวดหมู่ กล่องเครื่องมือใหม่ก็อาจไม่มีหมวดหมู่ใดๆ

คุณอัปเดตเนื้อหาของหมวดหมู่ใดหมวดหมู่หนึ่งได้โดย

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

โดยที่ flyoutContents อาจเป็นรายการบล็อกที่กำหนดโดยใช้ JSON, แผนผังของโหนด หรือการแสดงสตริง

โปรดทราบว่าขณะนี้การอัปเดตกล่องเครื่องมืออาจทำให้มีการรีเซ็ต UI เล็กน้อย:

• ในกล่องเครื่องมือที่ไม่มีหมวดหมู่ ช่องที่ผู้ใช้เปลี่ยนแปลง (เช่น เมนูแบบเลื่อนลง) จะเปลี่ยนกลับไปเป็นค่าเริ่มต้น

นี่คือการสาธิตแบบสดของต้นไม้ที่มีหมวดหมู่และบล็อกกลุ่ม