สร้างพื้นที่ทำงาน

พื้นที่ทำงาน Blockly เป็นคอมโพเนนต์ระดับสูงสุดของ Blockly ซึ่งเป็น UI ที่ คุณใช้เพื่อเขียนโปรแกรมด้วยบล็อก

ดูข้อมูลเพิ่มเติมเกี่ยวกับพื้นที่ทำงานและคอมโพเนนต์ย่อยได้ที่อภิธานศัพท์ ภาพ

องค์ประกอบ div ของการแทรก

ต้องแทรกพื้นที่ทำงาน Blockly ลงใน <div> ที่เรียกว่า "injection div"

การแทรก div สามารถกำหนดขนาดได้แบบคงที่หรือ แบบไดนามิก องค์ประกอบ Blockly ภายในจะdivอัปเดต ขนาดเมื่อหน้าต่างเปลี่ยนขนาด

ข้อมูลโค้ดต่อไปนี้แสดง HTML สำหรับการแทรกที่มีขนาดคงที่ div:

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

การแทรก

การแทรกจะสร้างองค์ประกอบย่อย HTML ทั้งหมดที่ประกอบกันเป็น UI ของ พื้นที่ทํางาน นอกจากนี้ ยังทำการเริ่มต้นทั้งหมดที่จำเป็นเพื่อให้พื้นที่ทำงาน พร้อมใช้งานด้วย

ฟังก์ชันการแทรกสามารถรับรหัสของการแทรก div หรือการแทรก div เองได้

// Passes the ID.
const workspace = Blockly.inject('blocklyDiv', { /* config */ });

// Passes the injection div.
const workspace = Blockly.inject(
    document.getElementById('blocklyDiv'), { /* config */ });

การกำหนดค่า

คุณกำหนดค่าพื้นที่ทำงานได้ด้วยตัวเลือกมากมาย (เช่น เลย์เอาต์และสไตล์) ในระหว่างการแทรก

ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกการกำหนดค่าได้ที่ ตัวเลือกการกำหนดค่า