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

คุณกำหนดค่า (ค่าที่กำหนดล่วงหน้า) สถานะของบล็อกในกล่องเครื่องมือได้ เช่น คุณ สามารถตั้งค่าเริ่มต้นให้กับฟิลด์หรือเชื่อมต่อ 2 บล็อกเข้าด้วยกันได้ คุณยังสร้างการบล็อกเงาซึ่งใช้เป็นค่าเริ่มต้นสำหรับการบล็อกย่อยได้ด้วย

ตัวอย่าง

ตัวอย่างบล็อกที่กำหนดค่าล่วงหน้ามีดังนี้

บล็อกด้วยค่าฟิลด์ที่กำหนดไว้ล่วงหน้า

นี่คือmath_numberบล็อกที่มีช่องแสดงหมายเลข 42 แทนค่าเริ่มต้น 0

บล็อกตัวเลขที่มีค่าตั้งไว้ล่วงหน้าเป็น 42

และนี่คือกล่องเครื่องมือที่ตั้งค่าฟิลด์นี้

JSON

{
 "kind": "flyoutToolbox",
 "contents": [
   {
     "kind": "block",
     "type": "math_number",
     "fields": {
       "NUM": 42
     }
   },
 ]
}

XML

<xml id="toolbox" style="display: none">
 <block type="math_number">
   <field name="NUM">42</field>
 </block>
</xml>

บล็อกที่เชื่อมต่อไว้ล่วงหน้า

ต่อไปนี้คือบล็อก controls_for ที่มีบล็อก math_number 3 บล็อกเชื่อมต่ออยู่

บล็อก &quot;นับด้วย i จากค่าหนึ่งไปยังอีกค่าหนึ่งโดยใช้ค่าหนึ่ง&quot; อินพุตค่าทั้ง 3 รายการ
เชื่อมต่อกับบล็อกตัวเลขที่มีค่าเป็น 1, 10 และ
1

และนี่คือกล่องเครื่องมือที่เชื่อมต่อบล็อกเหล่านี้ไว้ล่วงหน้า

JSON

{
 "kind": "flyoutToolbox",
 "contents": [
   {
     "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
           }
         }
       },
     }
   },
 ]
}

XML

<xml id="toolbox" style="display: none">
 <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>
</xml>

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

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

เมนูแบบลอยที่มี 3 บล็อก บล็อกที่ 3 ถูกปิดใช้และเป็นสีเทา

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>

นอกจากนี้ คุณยังปิดใช้หรือเปิดใช้การบล็อกแบบเป็นโปรแกรมได้โดยใช้ setDisabledReason

กำหนดค่าการบล็อก

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

ซึ่งหมายความว่าคุณสามารถสร้างการกำหนดค่าการบล็อกได้อย่างง่ายดาย เพียงโหลดบล็อกลงในพื้นที่ทํางาน กําหนดค่าตามที่ต้องการ แล้วทําให้เป็นอนุกรมโดยเรียกใช้โค้ดต่อไปนี้ในคอนโซล

JSON

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

XML

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

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

ฟิลด์ตัวแปร

คุณอาจต้องระบุฟิลด์ตัวแปรแตกต่างกันเมื่ออยู่ในกล่องเครื่องมือ เทียบกับเมื่อมีการทำให้เป็นอนุกรม

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

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

บล็อกเงา

บล็อกเงาคือบล็อกตัวยึดตำแหน่งที่ทำหน้าที่หลายอย่าง ดังนี้

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

หากต้องการสร้างบล็อกเงา ให้ใช้พร็อพเพอร์ตี้ shadow (JSON) หรือแท็ก <shadow> (XML) แทนพร็อพเพอร์ตี้ block หรือแท็ก <block> ตัวอย่างเช่น บล็อก math_arithmetic ที่มีบล็อกเงา math_number 2 บล็อกเชื่อมต่ออยู่

บล็อก `math_arithmetic` ที่มีอินพุตค่า 2 รายการคั่นด้วยเมนูแบบเลื่อนลงของโอเปอเรเตอร์
ซึ่งเลือกโอเปอเรเตอร์บวก ค่าที่ป้อนแต่ละค่าจะมี
บล็อกตัวเลขเงา ซึ่งจะแสดงเป็นสีเทาเพื่อแสดงว่าบล็อกอื่นสามารถแทนที่
บล็อกนี้ได้

และนี่คือกล่องเครื่องมือที่ใช้บล็อกเงาเหล่านี้

JSON

{
 "kind": "flyoutToolbox",
 "contents": [
   {
     "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
           }
         }
       }
     }
   },
 ]
}

XML

<xml id="toolbox" style="display: none">
 <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>