การบล็อกที่กำหนดเอง: กระบวนทัศน์การบล็อก

มีกระบวนทัศน์มากมายให้เลือกเมื่อออกแบบแอปพลิเคชันที่ใช้ Blockly ควรพิจารณาตัวเลือกเหล่านี้ตั้งแต่เนิ่นๆ เนื่องจากจะส่งผลต่อการบล็อกที่ผู้ใช้ต้องการ

การกำหนดค่า

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

Blockly.Blocks['factory_base'] = {
  init: function() {
    this.setDeletable(false);
    this.setMovable(false);
    this.setEditable(false);
    // etc...
  }
}

Blockly.serialization.blocks.append({'type': 'factory_base'}, workspace);

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

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

workspace.addChangeListener(Blockly.Events.disableOrphans);

โปรแกรมซีเรียล

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

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

ระบบอาจส่งออกพื้นที่ทำงานไปยังโค้ดสั่งการได้ทุกเมื่อ โค้ดนี้อาจเรียกใช้ฝั่งไคลเอ็นต์ใน JavaScript (โดยใช้ eval หรือล่าม JS) หรือฝั่งเซิร์ฟเวอร์ในภาษาใดก็ได้

import {javascriptGenerator} from 'blockly/javascript';

var code = javascriptGenerator.workspaceToCode(workspace);

โปรแกรมแบบคู่ขนาน

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

วิธีหนึ่งในการใช้การดำเนินการพร้อมกันคือการสร้างโค้ดสำหรับแต่ละบล็อกแยกกัน

import {javascriptGenerator} from 'blockly/javascript';

var json = Blockly.serialization.workspaces.save(workspace);

// Store top blocks separately, and remove them from the JSON.
var blocks = json['blocks']['blocks'];
var topBlocks = blocks.slice();  // Create shallow copy.
blocks.length = 0;

// Load each block into the workspace individually and generate code.
var allCode = [];
var headless = new Blockly.Workspace();
for (var i = 0; block < topBlocks.length; i++) {
  var block = topBlocks[i];
  blocks.push(block);
  Blockly.serialization.workspaces.load(json, headless);
  allCode.push(javascriptGenerator.workspaceToCode(headless));
  blocks.length = 0;
}

หากภาษาเป้าหมายคือ JavaScript อาจมีการใช้อาร์เรย์ allCode ในการสร้างล่าม JS หลายรายการสำหรับการใช้งานพร้อมกัน หากภาษาเป้าหมายเป็นเหมือน Python ระบบอาจประกอบอาร์เรย์ allCode เป็นโปรแกรมเดียวที่ใช้โมดูลชุดข้อความ

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

โปรแกรมที่ขับเคลื่อนด้วยเหตุการณ์

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

นักพัฒนาซอฟต์แวร์บางรายต้องการเพิ่ม "หมวก" ที่ด้านบนของบล็อกเหตุการณ์เพื่อให้ดูแตกต่างจากการบล็อกอื่นๆ หน้าตานี้ไม่ได้มีลักษณะเริ่มต้นของ Blockly แต่อาจเพิ่มได้โดยการลบล้างค่าคงที่ของตัวแสดงผล ADD_START_HATS ไปยัง true (Custom Displayer Codelab - ลบล้างค่าคงที่) หรือโดยการเพิ่มธีมและตั้งค่าตัวเลือกหมวกในรูปแบบบล็อก ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าหมวกสำหรับบล็อกซึ่งเป็นส่วนหนึ่งของธีมได้ที่นี่

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

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