พื้นที่ทำงาน Blockly เป็นคอมโพเนนต์ระดับสูงสุดของ Blockly ซึ่งเป็น UI ที่คุณใช้ เขียนโปรแกรมด้วยบล็อก
ดูข้อมูลเพิ่มเติมเกี่ยวกับพื้นที่ทำงานและองค์ประกอบย่อยได้ที่อภิธานศัพท์ภาพ
div ของการแทรก
ต้องมีการแทรกพื้นที่ทำงานแบบบล็อกลงใน <div>
ซึ่งเรียกว่า "div การแทรก"
div ของการแทรกอาจปรับขนาดแบบคงที่หรือแบบไดนามิกก็ได้ องค์ประกอบแบบบล็อกใน 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 */ });
การกำหนดค่า
สามารถกำหนดค่าพื้นที่ทำงานด้วยตัวเลือกมากมาย (เช่น เลย์เอาต์และรูปแบบ) ระหว่างการแทรก
ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกการกำหนดค่าได้ที่ตัวเลือกการกำหนดค่า