Workspace ขนาดคงที่

วิธีที่ง่ายที่สุดในการวาง Blockly ลงในหน้าเว็บคือการแทรกบล็อกลงในแท็ก "div" ที่ว่างเปล่า

1. รับโค้ด

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

2. กำหนดพื้นที่

เพิ่ม div ที่ว่างเปล่าในส่วนเนื้อหาของหน้าเว็บและกำหนดขนาด ดังนี้

<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

3. แทรกพื้นที่ทำงาน

กำหนดโครงสร้างกล่องเครื่องมือ ดังนี้

const toolbox = {
  "kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type": "controls_if"
    },
    {
      "kind": "block",
      "type": "controls_repeat_ext"
    },
    {
      "kind": "block",
      "type": "logic_compare"
    },
    {
      "kind": "block",
      "type": "math_number"
    },
    {
      "kind": "block",
      "type": "math_arithmetic"
    },
    {
      "kind": "block",
      "type": "text"
    },
    {
      "kind": "block",
      "type": "text_print"
    },
  ]
}

และสุดท้าย เรียกข้อมูลต่อไปนี้เพื่อแทรก Blockly ลงใน div ที่คุณกำหนด

const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});

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

ตอนนี้คุณทดสอบหน้าเว็บในเบราว์เซอร์ได้แล้ว คุณควรจะเห็นเครื่องมือแก้ไขของ Blockly ที่เติม div ด้วยบล็อก 7 บล็อกในกล่องเครื่องมือ นี่คือการสาธิตการใช้งานจริง